fix slicing verification

This commit is contained in:
Hanan Askarim
2024-08-19 15:16:31 +07:00
parent 738068edc5
commit b3ad260791
5 changed files with 285 additions and 285 deletions

View File

@@ -1,136 +1,136 @@
<template> <template>
<div> <div>
<v-row> <v-container class="bg-white rounded-lg" fluid>
<v-col cols="12"> <v-row>
<v-container class="bg-white rounded-lg"> <v-col cols="2">
<v-menu
<v-row class="pb-5"> v-model="menu"
<v-col cols="2"> :close-on-content-click="false"
<v-menu transition="scale-transition"
v-model="menu" offset-y
:close-on-content-click="false" min-width="auto"
transition="scale-transition" max-width="290px"
offset-y
min-width="auto"
max-width="290px"
>
<template v-slot:activator="{ props }">
<v-text-field
:model-value="formatDate()"
label="Tanggal Mulai"
prepend-inner-icon="mdi-calendar"
hide-details
readonly
variant="outlined"
v-bind="props"
></v-text-field>
</template>
<v-date-picker
hide-header
show-adjacent-months
rounded="lg"
color="primary"
v-model="date"
@update:modelValue="menu=false"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="4">
<v-text-field
label="No Reg / Nama / Jenis Kelamin"
variant="outlined"
hide-details
></v-text-field>
</v-col>
<v-col cols="3">
<v-text-field
label="DOB / Umur"
variant="outlined"
hide-details
></v-text-field>
</v-col>
<v-col cols="3">
<v-text-field
label="Pengirim"
variant="outlined"
hide-details
></v-text-field>
</v-col>
</v-row>
<v-data-table
:headers="headers"
:items="xdetails"
return-object
hide-default-footer
> >
<template v-slot:item="{ item }"> <template v-slot:activator="{ props }">
<tr> <v-text-field
<td class="text-left" v-if="item.is_result == 'N'" colspan="8"> :model-value="formatDate()"
<p class="font-weight-medium">{{ item.t_testname }}</p> label="Tanggal Mulai"
</td> prepend-inner-icon="mdi-calendar"
<td class="text-left" v-if="item.is_result == 'Y'"> hide-details
<p class="font-weight-medium">{{ item.t_testname }}</p> readonly
</td> variant="outlined"
<td class="text-left"> v-bind="props"
></v-text-field>
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
<p>{{ item.result_flag }}</p>
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.normal_note }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.unit_name }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.methode_name }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.note }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
<div class="d-flex justify-center">
<v-btn fab
variant="tonal"
small
color="error"
class="bg-error-lighten ma-0 float-left">
<iconify-icon
style="font-size: 2rem;"
icon="fluent:dismiss-24-regular"
></iconify-icon>
</v-btn>
<v-btn fab
variant="tonal"
small
color="success"
class="bg-success-lighten ml-1 ma-0 float-left">
<iconify-icon
style="font-size: 2rem;"
icon="fluent:checkmark-24-regular"
></iconify-icon>
</v-btn>
</div>
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
<div class="d-flex">
<v-sheet class="font-weight-medium ma-1 pa-1">VR</v-sheet>
<v-sheet class="font-weight-medium ma-1 pa-1">VL</v-sheet>
</div>
</td>
</tr>
</template> </template>
</v-data-table> <v-date-picker
hide-header
show-adjacent-months
rounded="lg"
color="primary"
v-model="date"
@update:modelValue="menu=false"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="5">
<v-text-field
label="No Reg / Nama / Jenis Kelamin"
variant="outlined"
hide-details
></v-text-field>
</v-col>
<v-col cols="2.5">
<v-text-field
label="DOB / Umur"
variant="outlined"
hide-details
></v-text-field>
</v-col>
<v-col cols="2.5">
<v-text-field
label="Pengirim"
variant="outlined"
hide-details
></v-text-field>
</v-col>
</v-row>
</v-container> <v-data-table
</v-col> :headers="headers"
</v-row> :items="xdetails"
return-object
hide-default-footer
class="pt-5"
>
<template v-slot:item="{ item }">
<tr>
<td class="text-left" v-if="item.is_result == 'N'" colspan="8">
<p class="font-weight-medium">{{ item.t_testname }}</p>
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
<p class="font-weight-medium">{{ item.t_testname }}</p>
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
<p>{{ item.result_flag }}</p>
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.normal_note }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.unit_name }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.methode_name }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
{{ item.note }}
</td>
<td class="text-left" v-if="item.is_result == 'Y'">
<div class="d-flex justify-center">
<div
class="pointer bg-error-lighten"
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
>
<iconify-icon
class="text-error"
style="font-size: 1.5rem;"
icon="fluent:dismiss-24-regular"
></iconify-icon>
</div>
<div
class="pointer bg-success-lighten ml-2"
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
>
<iconify-icon
class="text-success"
style="font-size: 1.5rem;"
icon="fluent:checkmark-24-regular"
></iconify-icon>
</div>
</div>
</td>
</tr>
</template>
</v-data-table>
</v-container>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.pointer {
cursor: pointer;
}
.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td,
.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > th,
.v-table .v-table__wrapper > table > thead > tr > th {
border-bottom: dashed 1px #EEEEEE;
}
</style> </style>
<script type="module"> <script type="module">
@@ -144,7 +144,7 @@
align: 'start', align: 'start',
key: 'name', key: 'name',
sortable: false, sortable: false,
width: "10%", width: "15%",
title: "NAMA PEMERIKSAAN", title: "NAMA PEMERIKSAAN",
class: "bg-secondary-lighten font-weight-bold", class: "bg-secondary-lighten font-weight-bold",
}, },
@@ -160,7 +160,7 @@
align: 'start', align: 'start',
key: 'name', key: 'name',
sortable: false, sortable: false,
width: "5%", width: "10%",
title: "FLAG", title: "FLAG",
class: "bg-secondary-lighten font-weight-bold", class: "bg-secondary-lighten font-weight-bold",
}, },
@@ -204,14 +204,6 @@
title: "VALIDASI", title: "VALIDASI",
class: "bg-secondary-lighten font-weight-bold", class: "bg-secondary-lighten font-weight-bold",
}, },
{
align: 'start',
key: 'name',
sortable: false,
width: "10%",
title: "MR",
class: "bg-secondary-lighten font-weight-bold",
},
], ],
}; };
}, },

View File

@@ -1,47 +1,46 @@
<template> <template>
<div> <div>
<v-row> <v-container class="bg-white rounded-lg" fluid>
<v-col cols="12">
<v-container class="bg-white rounded-lg">
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="xpatients" :items="xpatients"
return-object return-object
hide-default-footer hide-default-footer
> class="row-pointer"
<template v-slot:top> >
<v-toolbar flat class="bg-secondary-lighten"> <template v-slot:top>
<v-toolbar-title>{{ $t('message.toolbalTitle') }}</v-toolbar-title> <v-toolbar flat class="bg-secondary-lighten rounded-lg">
</v-toolbar> <v-toolbar-title class="text-black font-weight-bold">{{ $t('message.toolbalTitle') }}</v-toolbar-title>
</template> </v-toolbar>
</template>
<template v-slot:item="{ item }"> <template v-slot:item="{ item }">
<tr> <tr v-bind:class="{'bg-primary-lighten':isSelected(item)}" @click="selectMe(item)">
<td v-bind:class="{'blue-lighten-5':isSelected(item)}" @click="selectMe(item)"> <td>
<div> <div>
<p class="mt-2 mb-2">{{ item.noreg }}</p> <p class="mt-2 mb-2">{{ item.noreg }}</p>
<p class="mb-2" > <p class="mb-2" >
<v-chip label size="small"> <v-chip label size="small">
{{ item.orderdate }} {{ item.orderdate }}
</v-chip> </v-chip>
</p> </p>
</div> </div>
</td> </td>
<td v-bind:class="{'blue-lighten-5':isSelected(item)}" @click="selectMe(item)"> <td>
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
</td> </td>
</tr> </tr>
</template> </template>
</v-data-table> </v-data-table>
</v-container> </v-container>
</v-col>
</v-row>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.row-pointer >>> tbody tr :hover {
cursor: pointer;
}
</style> </style>
<script type="module"> <script type="module">
@@ -86,8 +85,8 @@
isSelected(p) { isSelected(p) {
return p.id == this.$store.state.verification.selected_patient.id return p.id == this.$store.state.verification.selected_patient.id
}, },
selectMe(c) { selectMe(data) {
console.log(c) this.$store.commit("verification/setSelectedPatient", data)
} }
}, },
wacth: { wacth: {

View File

@@ -3,14 +3,12 @@
<one-navbar></one-navbar> <one-navbar></one-navbar>
<v-main> <v-main>
<div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100"> <div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
<search-component></search-component>
<v-row> <v-row>
<v-col cols="12" md="12" sm="12" xs="12"> <v-col cols="12" md="3" sm="12" xs="12" class="mt-5">
<search-component></search-component>
</v-col>
<v-col cols="12" md="4" sm="12" xs="12">
<list-patient-component></list-patient-component> <list-patient-component></list-patient-component>
</v-col> </v-col>
<v-col cols="12" md="8" sm="12" xs="12"> <v-col cols="12" md="9" sm="12" xs="12" class="mt-5">
<detail-patient-component></detail-patient-component> <detail-patient-component></detail-patient-component>
</v-col> </v-col>
</v-row> </v-row>

View File

@@ -1,116 +1,115 @@
<template> <template>
<div> <div>
<v-row> <v-container class="bg-white rounded-lg" fluid>
<v-col cols="12"> <v-row>
<v-card class="bg-white rounded-lg pa-5"> <v-col cols="3">
<v-row> <div class="d-flex align-center ga-2">
<v-col cols="2"> <v-menu
<v-menu v-model="menuStartDate"
v-model="menuStartDate" :close-on-content-click="false"
:close-on-content-click="false" transition="scale-transition"
transition="scale-transition" offset-y
offset-y min-width="auto"
min-width="auto" max-width="290px"
max-width="290px" >
> <template v-slot:activator="{ props }">
<template v-slot:activator="{ props }">
<v-text-field
:model-value="formatDate()"
label="Tanggal Mulai"
prepend-inner-icon="mdi-calendar"
hide-details
readonly
variant="outlined"
v-bind="props"
></v-text-field>
</template>
<v-date-picker
hide-header
show-adjacent-months
rounded="lg"
color="primary"
v-model="date"
@update:modelValue="menuStartDate=false"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="2">
<v-menu
v-model="menuEndDate"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="auto"
max-width="290px"
>
<template v-slot:activator="{ props }">
<v-text-field
:model-value="formatDate()"
label="Tanggal Selesai"
prepend-inner-icon="mdi-calendar"
hide-details
readonly
variant="outlined"
v-bind="props"
></v-text-field>
</template>
<v-date-picker
hide-header
show-adjacent-months
rounded="lg"
color="primary"
v-model="date"
@update:modelValue="menuEndDate=false"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="3">
<v-text-field <v-text-field
label="No Reg / Nama" :model-value="formatDate()"
variant="outlined" label="Tanggal Mulai"
prepend-inner-icon="mdi-calendar"
hide-details hide-details
append-inner-icon="mdi-magnify" readonly
variant="outlined"
v-bind="props"
></v-text-field> ></v-text-field>
</v-col> </template>
<v-col cols="3"> <v-date-picker
<v-autocomplete hide-header
label="Grup Pemeriksaan" show-adjacent-months
variant="outlined" rounded="lg"
color="primary"
v-model="date"
@update:modelValue="menuStartDate=false"
></v-date-picker>
</v-menu>
<v-menu
v-model="menuEndDate"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="auto"
max-width="290px"
>
<template v-slot:activator="{ props }">
<v-text-field
:model-value="formatDate()"
label="Tanggal Selesai"
prepend-inner-icon="mdi-calendar"
hide-details hide-details
menu-icon="mdi-chevron-down" readonly
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" variant="outlined"
></v-autocomplete> v-bind="props"
</v-col> ></v-text-field>
<v-col cols="2"> </template>
<div style="height: 100%;"> <v-date-picker
<v-row class="pt-3 justify-space-between"> hide-header
<div show-adjacent-months
style="height: 100%;" rounded="lg"
class="rounded-lg bg-primary pa-2 mr-2 h-100" color="primary"
> v-model="date"
<iconify-icon @update:modelValue="menuEndDate=false"
style="font-size: 2rem;" ></v-date-picker>
icon="fluent:search-20-regular" </v-menu>
></iconify-icon> </div>
</div> </v-col>
<div <v-col cols="2.5">
class="pt-3 pa-3" <v-text-field
> label="No Reg / Nama"
<v-btn variant="outlined"
class="bg-primary-lighten" hide-details
variant="tonal" append-inner-icon="mdi-magnify"
color="primary" ></v-text-field>
> </v-col>
HISTORY <v-col cols="2.5">
</v-btn> <v-autocomplete
</div> label="Grup Pemeriksaan"
</v-row> variant="outlined"
hide-details
menu-icon="mdi-chevron-down"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
></v-autocomplete>
</v-col>
<v-col cols="1">
<v-btn
variant="flat"
small
style="height: 100%;"
class="bg-primary rounded-lg">
<iconify-icon
style="font-size: 2rem;"
icon="fluent:search-20-regular"
></iconify-icon>
</v-btn>
</v-col>
<v-col cols="3">
<div style="height: 100%;">
<v-row class="pt-3 justify-end">
<div
class="pt-3 pa-3"
>
<v-btn
class="bg-primary-lighten"
variant="tonal"
color="primary"
>
HISTORY
</v-btn>
</div> </div>
</v-col> </v-row>
</v-row> </div>
</v-card> </v-col>
</v-col> </v-row>
</v-row> </v-container>
</div> </div>
</template> </template>
@@ -129,7 +128,15 @@
}; };
}, },
computed: { computed: {
date: {
get() {
return this.$store.state.verification.date;
},
set(val) {
console.log(val)
this.$store.commit("verification/setDate", val);
},
},
}, },
methods: { methods: {
formatDate() { formatDate() {

View File

@@ -3,6 +3,7 @@ const store = {
namespaced: true, namespaced: true,
state() { state() {
return { return {
date: new Date(),
patients: [ patients: [
{ {
id: 1, id: 1,
@@ -2078,6 +2079,9 @@ const store = {
}; };
}, },
mutations: { mutations: {
setDate(state, data) {
state.date = data;
},
setPatients(state, data) { setPatients(state, data) {
state.patients = data state.patients = data
}, },