894 lines
33 KiB
Vue
894 lines
33 KiB
Vue
<template>
|
|
<v-layout
|
|
id="display_parent"
|
|
style="
|
|
width: 98vw;
|
|
height: 98vh;
|
|
background-color: white;
|
|
border-radius: 24px;
|
|
"
|
|
column
|
|
>
|
|
<v-toolbar dark color="primary" style="border-radius: 24px 24px 0px 0px;">
|
|
<!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
|
|
<v-btn @click="back()" icon class="hidden-xs-only">
|
|
<v-icon>settings</v-icon>
|
|
</v-btn>
|
|
<v-btn @click="fullscreen()" icon class="hidden-xs-only">
|
|
<v-icon>fullscreen</v-icon>
|
|
</v-btn>
|
|
|
|
<v-toolbar-title class="display-1 font-weight-bold white--text">{{
|
|
title
|
|
}}</v-toolbar-title>
|
|
|
|
<v-spacer></v-spacer>
|
|
<span class="display-1 font-weight-bold" id="realTimeDateTime"></span>
|
|
|
|
<!-- <v-btn icon>
|
|
<v-icon>search</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn icon>
|
|
<v-icon>apps</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn icon>
|
|
<v-icon>refresh</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn icon>
|
|
<v-icon>more_vert</v-icon>
|
|
</v-btn> -->
|
|
</v-toolbar>
|
|
|
|
<v-container fluid>
|
|
<v-layout v-if="queueList.length === 1" fill-height column>
|
|
<v-flex xs12 class="">
|
|
<div class="grid-box">
|
|
<v-toolbar color="cyan" dark class="elevation-0 text-center">
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ queueList[0].stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
</div>
|
|
<v-container fluid>
|
|
<v-layout v-if="queueList.length === 1" fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list two-line>
|
|
<template v-for="(item, index) in queueList[0].process ">
|
|
<v-list-tile :key="item.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="item.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="item.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-5">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="height: 55vh; overflow: scroll; overflow-x: hidden;"
|
|
>
|
|
<v-list class="py-1">
|
|
<template v-for="(item, index) in queueList[0].waiting">
|
|
<v-list-tile :key="item.order_lab_number" class="py-0">
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
{{ item.order_lab_number }} {{ item.patient_name }}
|
|
<kbd v-if="item.status === 'New'" class="success">{{
|
|
item.status
|
|
}}</kbd>
|
|
<kbd
|
|
v-if="item.status === 'Skip'"
|
|
class="warning"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout v-else-if="queueList.length === 2" row fill-height>
|
|
<v-flex xs6 v-for="(item, index) in queueList" class="px-2">
|
|
<div
|
|
class="grid-box elevation-10"
|
|
style="height: 85vh; border-radius: 24px;"
|
|
>
|
|
<v-toolbar
|
|
color="cyan"
|
|
dark
|
|
class="elevation-0 text-center"
|
|
style="border-radius: 24px 24px 0px 0px;"
|
|
>
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ item.stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-container fluid>
|
|
<v-layout fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list two-line>
|
|
<template
|
|
v-for="(itemProcess, indexProcess) in item.process "
|
|
>
|
|
<v-list-tile :key="itemProcess.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="itemProcess.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="itemProcess.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-5">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="height: 50vh; overflow: scroll; overflow-x: hidden;"
|
|
>
|
|
<v-list class="py-1">
|
|
<template
|
|
v-for="(itemWaiting, indexWaiting) in item.waiting"
|
|
>
|
|
<v-list-tile
|
|
:key="itemWaiting.order_lab_number"
|
|
class="py-0"
|
|
>
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
{{ itemWaiting.order_lab_number }}
|
|
{{ itemWaiting.patient_name }}
|
|
<kbd
|
|
v-if="itemWaiting.status === 'New'"
|
|
class="success"
|
|
>{{ itemWaiting.status }}</kbd
|
|
>
|
|
<kbd
|
|
v-if="itemWaiting.status === 'Skip'"
|
|
class="warning"
|
|
>{{ itemWaiting.status }}</kbd
|
|
>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</v-flex>
|
|
<!-- <v-flex xs6>
|
|
<div class="grid-box">2</div>
|
|
</v-flex> -->
|
|
</v-layout>
|
|
|
|
<v-layout v-else-if="queueList.length === 3" row wrap fill-height>
|
|
<v-flex xs4 v-for="(item, index) in queueList" class="px-2">
|
|
<div
|
|
class="grid-box elevation-10"
|
|
style="height: 85vh; border-radius: 24px;"
|
|
>
|
|
<v-toolbar
|
|
color="cyan"
|
|
dark
|
|
class="elevation-0 text-center"
|
|
style="border-radius: 24px 24px 0px 0px;"
|
|
>
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ item.stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-container fluid>
|
|
<v-layout fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list two-line>
|
|
<template
|
|
v-for="(itemProcess, indexProcess) in item.process "
|
|
>
|
|
<v-list-tile :key="itemProcess.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="itemProcess.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="itemProcess.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-5">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="height: 50vh; overflow: scroll; overflow-x: hidden;"
|
|
>
|
|
<v-list class="py-1">
|
|
<template
|
|
v-for="(itemWaiting, indexWaiting) in item.waiting"
|
|
>
|
|
<v-list-tile
|
|
:key="itemWaiting.order_lab_number"
|
|
class="py-0"
|
|
>
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
{{ itemWaiting.order_lab_number }}
|
|
{{ itemWaiting.patient_name }}
|
|
<kbd
|
|
v-if="itemWaiting.status === 'New'"
|
|
class="success"
|
|
>{{ itemWaiting.status }}</kbd
|
|
>
|
|
<kbd
|
|
v-if="itemWaiting.status === 'Skip'"
|
|
class="warning"
|
|
>{{ itemWaiting.status }}</kbd
|
|
>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</v-flex>
|
|
<!-- <v-flex xs4 class="pr-2 pb-1">
|
|
<div
|
|
class="grid-box elevation-10"
|
|
style="height: 43vh; border-radius: 24px;"
|
|
>
|
|
<v-toolbar
|
|
color="cyan"
|
|
dark
|
|
class="elevation-0 text-center"
|
|
style="border-radius: 24px 24px 0px 0px;"
|
|
>
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ queueList[0].stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-container fluid class="py-2 px-3">
|
|
<v-layout fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list two-line>
|
|
<template v-for="(item, index) in queueList[0].process ">
|
|
<v-list-tile :key="item.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="item.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="item.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-2">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="height: 15vh; overflow: scroll; overflow-x: hidden;"
|
|
>
|
|
<v-list dense class="py-1">
|
|
<template v-for="(item, index) in queueList[0].waiting">
|
|
<v-list-tile :key="item.order_lab_number" class="py-0">
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
{{ item.order_lab_number }}
|
|
{{ item.patient_name }}
|
|
<kbd
|
|
v-if="item.status === 'New'"
|
|
class="success"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
<kbd
|
|
v-if="item.status === 'Skip'"
|
|
class="warning"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</v-flex>
|
|
<v-flex xs4 class="pl-2 pb-1">
|
|
<div
|
|
class="grid-box elevation-10"
|
|
style="height: 43vh; border-radius: 24px;"
|
|
>
|
|
<v-toolbar
|
|
color="cyan"
|
|
dark
|
|
class="elevation-0 text-center"
|
|
style="border-radius: 24px 24px 0px 0px;"
|
|
>
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ queueList[1].stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-container fluid class="py-2 px-3">
|
|
<v-layout fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list dense two-line>
|
|
<template v-for="(item, index) in queueList[1].process ">
|
|
<v-list-tile :key="item.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="item.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="item.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-2">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="height: 15vh; overflow: scroll; overflow-x: hidden;"
|
|
>
|
|
<v-list dense class="py-1">
|
|
<template v-for="(item, index) in queueList[1].waiting">
|
|
<v-list-tile :key="item.order_lab_number" class="py-0">
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
{{ item.order_lab_number }}
|
|
{{ item.patient_name }}
|
|
<kbd
|
|
v-if="item.status === 'New'"
|
|
class="success"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
<kbd
|
|
v-if="item.status === 'Skip'"
|
|
class="warning"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</v-flex>
|
|
<v-flex xs4 class="pt-2">
|
|
<div
|
|
class="grid-box elevation-10"
|
|
style="height: 43vh; border-radius: 24px;"
|
|
>
|
|
<v-toolbar
|
|
color="cyan"
|
|
dark
|
|
class="elevation-0 text-center"
|
|
style="border-radius: 24px 24px 0px 0px;"
|
|
>
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ queueList[2].stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-container fluid class="py-2 px-3">
|
|
<v-layout fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list dense two-line>
|
|
<template v-for="(item, index) in queueList[2].process ">
|
|
<v-list-tile :key="item.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="item.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="item.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-2">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="height: 15vh; overflow: scroll; overflow-x: hidden;"
|
|
>
|
|
<v-list dense class="py-1">
|
|
<template v-for="(item, index) in queueList[2].waiting">
|
|
<v-list-tile :key="item.order_lab_number" class="py-0">
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
"
|
|
>
|
|
{{ item.order_lab_number }}
|
|
{{ item.patient_name }}
|
|
<kbd
|
|
v-if="item.status === 'New'"
|
|
class="success"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
<kbd
|
|
v-if="item.status === 'Skip'"
|
|
class="warning"
|
|
>{{ item.status }}</kbd
|
|
>
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</v-flex> -->
|
|
</v-layout>
|
|
|
|
<v-layout v-else-if="queueList.length === 4" column fill-height>
|
|
<v-layout row fill-height>
|
|
<v-flex xs3 v-for="(item, index) in queueList" class="px-2">
|
|
<div
|
|
class="grid-box elevation-10"
|
|
style="height: 85vh; border-radius: 24px;"
|
|
>
|
|
<v-toolbar
|
|
color="cyan"
|
|
dark
|
|
class="elevation-0 text-center"
|
|
style="border-radius: 24px 24px 0px 0px;"
|
|
>
|
|
<v-toolbar-title class="font-weight-bold">
|
|
{{ item.stationName }}
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-container fluid>
|
|
<v-layout fill-height row wrap>
|
|
<v-flex xs12 class="px-2">
|
|
<p>PROSES SAMPLING</p>
|
|
<v-divider></v-divider>
|
|
<v-list two-line>
|
|
<template
|
|
v-for="(itemProcess, indexProcess) in item.process "
|
|
>
|
|
<v-list-tile :key="itemProcess.order_lab_number">
|
|
<v-list-tile-content>
|
|
<v-list-tile-title
|
|
class="font-weight-bold"
|
|
v-html="itemProcess.order_lab_number"
|
|
></v-list-tile-title>
|
|
<v-list-tile-sub-title
|
|
class="font-weight-bold"
|
|
v-html="itemProcess.patient_name"
|
|
></v-list-tile-sub-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-flex>
|
|
<v-flex xs12 class="mt-5">
|
|
<p>ANTRIAN SELANJUTNYA</p>
|
|
<v-divider></v-divider>
|
|
<div
|
|
style="
|
|
height: 50vh;
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
"
|
|
>
|
|
<v-list class="py-1">
|
|
<template
|
|
v-for="(itemWaiting, indexWaiting) in item.waiting"
|
|
>
|
|
<v-list-tile
|
|
:key="itemWaiting.order_lab_number"
|
|
class="py-0"
|
|
>
|
|
<v-list-tile-content class="py-1">
|
|
<v-list-tile-title>
|
|
{{ itemWaiting.order_lab_number }}
|
|
{{ itemWaiting.patient_name }}
|
|
</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
<v-list-tile-action>
|
|
<!-- <v-icon color="pink">star</v-icon> -->
|
|
<kbd
|
|
v-if="itemWaiting.status === 'New'"
|
|
class="success"
|
|
>{{ itemWaiting.status }}</kbd
|
|
>
|
|
<kbd
|
|
v-if="itemWaiting.status === 'Skip'"
|
|
class="warning"
|
|
>{{ itemWaiting.status }}</kbd
|
|
>
|
|
</v-list-tile-action>
|
|
</v-list-tile>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-layout>
|
|
</template>
|
|
<style scoped></style>
|
|
<script>
|
|
// const { data } = require("./onePriceHeader.vue");
|
|
|
|
module.exports = {
|
|
// components: {
|
|
// "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
|
|
// "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
|
|
// },
|
|
mounted() {
|
|
console.log("ini mi=ounted");
|
|
document.addEventListener("DOMContentLoaded", this.updateDateTime());
|
|
// this.$store.dispatch("queue/getStation");
|
|
// this.$store.dispatch("queue/getStation");
|
|
const element = document.getElementById("display_parent");
|
|
const height = element.offsetHeight;
|
|
console.log("Offset Height:", height);
|
|
},
|
|
methods: {
|
|
getHeight() {
|
|
const element = document.getElementById("display_parent");
|
|
const height = element.offsetHeight;
|
|
if (this.queueList.length == 1) {
|
|
return height;
|
|
} else {
|
|
return height / 2;
|
|
}
|
|
},
|
|
fullscreen() {
|
|
var elem = document.documentElement;
|
|
if (elem.requestFullscreen) {
|
|
elem.requestFullscreen();
|
|
} else if (elem.webkitRequestFullscreen) {
|
|
/* Safari */
|
|
elem.webkitRequestFullscreen();
|
|
} else if (elem.msRequestFullscreen) {
|
|
/* IE11 */
|
|
elem.msRequestFullscreen();
|
|
}
|
|
},
|
|
back() {
|
|
this.screen = "setting";
|
|
},
|
|
adjustCardHeights() {
|
|
// Ambil tinggi layout-container
|
|
const layout = document.getElementById("display_parent");
|
|
const height = layout.offsetHeight;
|
|
|
|
// Hitung tinggi untuk setiap kartu
|
|
const cards = document.querySelectorAll(".card-wrapper");
|
|
const rows = Math.ceil(this.items.length / 2); // Maksimal 2 item per baris
|
|
const cardHeight = height / rows;
|
|
|
|
// Set tinggi untuk setiap kartu
|
|
cards.forEach((card) => {
|
|
card.style.height = `${cardHeight}px`;
|
|
});
|
|
},
|
|
getGridClass(length, index) {
|
|
// Atur grid berdasarkan jumlah item
|
|
if (length === 1) return "xs12 fill-height"; // 1 item: 1 kolom penuh
|
|
if (length === 2) return "xs12 "; // 2 item: 1 kolom per baris
|
|
if (length === 3) return index < 2 ? "xs6 " : "xs12 "; // 3 item: 2 atas, 1 bawah
|
|
if (length === 4) return "xs6 "; // 4 item: 2 atas, 2 bawah
|
|
},
|
|
updateDateTime() {
|
|
const dateTimeElement = document.getElementById("realTimeDateTime"); // Ganti dengan ID elemen HTML Anda
|
|
|
|
const monthNames = [
|
|
"Januari",
|
|
"Februari",
|
|
"Maret",
|
|
"April",
|
|
"Mei",
|
|
"Juni",
|
|
"Juli",
|
|
"Agustus",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"Desember",
|
|
];
|
|
|
|
function formatDateTime() {
|
|
const now = new Date();
|
|
const day = now.getDate();
|
|
const month = monthNames[now.getMonth()];
|
|
const year = now.getFullYear();
|
|
const hours = String(now.getHours()).padStart(2, "0");
|
|
const minutes = String(now.getMinutes()).padStart(2, "0");
|
|
|
|
return `${day} ${month} ${year} ${hours}:${minutes}`;
|
|
}
|
|
|
|
function refresh() {
|
|
dateTimeElement.textContent = formatDateTime();
|
|
}
|
|
|
|
refresh(); // Menampilkan waktu saat pertama kali
|
|
setInterval(refresh, 1000); // Perbarui setiap detik
|
|
},
|
|
isObjectEmpty(obj) {
|
|
return Object.keys(obj).length === 0 && obj.constructor === Object;
|
|
},
|
|
save() {
|
|
if (this.loading) return;
|
|
if (this.title.trim() === "") {
|
|
alert("Judul tidak boleh Kosong");
|
|
return;
|
|
}
|
|
if (this.isObjectEmpty(this.selectedBranch)) {
|
|
alert("Pilih salah satu cabang");
|
|
return;
|
|
}
|
|
if (this.selectedStation.length === 0) {
|
|
alert("Pilih station terlebih dahulu");
|
|
return;
|
|
}
|
|
if (this.selectedStation.length > 4) {
|
|
alert("Pilih station maksimal 4");
|
|
return;
|
|
}
|
|
this.screen = "display";
|
|
},
|
|
},
|
|
computed: {
|
|
queueList: {
|
|
get() {
|
|
return this.$store.state.queue.queueList;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_queueList", val);
|
|
},
|
|
},
|
|
screen: {
|
|
get() {
|
|
return this.$store.state.queue.screen;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_screen", val);
|
|
},
|
|
},
|
|
title: {
|
|
get() {
|
|
return this.$store.state.queue.title;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_title", val);
|
|
},
|
|
},
|
|
loading: {
|
|
get() {
|
|
return this.$store.state.queue.loading;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_loading", val);
|
|
},
|
|
},
|
|
stationList: {
|
|
get() {
|
|
return this.$store.state.queue.stationList;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_stationList", val);
|
|
},
|
|
},
|
|
selectedStation: {
|
|
get() {
|
|
return this.$store.state.queue.selectedStation;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_selectedStation", val);
|
|
},
|
|
},
|
|
branchList: {
|
|
get() {
|
|
return this.$store.state.queue.branchList;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_branchList", val);
|
|
},
|
|
},
|
|
selectedBranch: {
|
|
get() {
|
|
return this.$store.state.queue.selectedBranch;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("queue/update_selectedBranch", val);
|
|
},
|
|
},
|
|
},
|
|
watch: {},
|
|
data() {
|
|
return {
|
|
selected_delivery: {},
|
|
search_company: "",
|
|
search_test: "",
|
|
menufilterdatestart: false,
|
|
menufilterdateend: false,
|
|
date: new Date().toISOString().substr(0, 10),
|
|
items: [],
|
|
menustartdate: false,
|
|
menuenddate: false,
|
|
errors: [],
|
|
sheet: false,
|
|
indeterminatex: false,
|
|
checkednotall: false,
|
|
bar_chx_all: false,
|
|
selected_barcode: [],
|
|
dialogtimeline: false,
|
|
search_doctor: "",
|
|
dialogWarning: false,
|
|
dialogWarningMsg: "",
|
|
rules: {
|
|
min: (v) => v > 0 || "Minimum value 1",
|
|
maxPersen: (v) => v <= 100 || "Maximum value 100",
|
|
},
|
|
headers: [
|
|
{
|
|
text: "STATUS",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "lab",
|
|
width: "10%",
|
|
class: "pa-2 blue darken-2 white--text",
|
|
},
|
|
{
|
|
text: "TEST",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "lab",
|
|
width: "25%",
|
|
class: "pa-2 blue darken-2 white--text",
|
|
},
|
|
{
|
|
text: "AMOUNT",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "lab",
|
|
width: "15%",
|
|
class: "pa-2 blue darken-2 white--text",
|
|
},
|
|
{
|
|
text: "DISKON",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "name",
|
|
width: "15%",
|
|
class: "pa-2 blue darken-2 white--text",
|
|
},
|
|
{
|
|
text: "DISKON RP",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "name",
|
|
width: "15%",
|
|
class: "pa-2 blue darken-2 white--text",
|
|
},
|
|
{
|
|
text: "TOTAL",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "status",
|
|
width: "20%",
|
|
class: "pa-2 blue darken-2 white--text",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
};
|
|
</script>
|