andy/westone-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add button detail func mockup

Browse Source
This commit is contained in:
adibwp
2024-08-20 17:58:02 +07:00
parent c65da6ade9
commit 1d698dbca4
3 changed files with 49 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
specimen-collection/components/left.vue
View File

@@ -59,7 +59,7 @@ export default {
headers: [ headers: [
{ {
title: this.$t('message.tablePatient.date'), title: this.$t('message.tablePatient.date'),
align: "left", align: "start",
sortable: false, sortable: false,
key: "date", key: "date",
width: "15%", width: "15%",

55
specimen-collection/components/right.vue
View File

@@ -4,7 +4,7 @@
<div class="bg-primary-lighten rounded-lg pa-5"> <div class="bg-primary-lighten rounded-lg pa-5">
<v-row> <v-row>
<v-col cols="2"> <v-col cols="2">
<div class="rounded-lg bg-secondary-lighten" style="width: 100px; height: 100px;"> <div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
<!-- placeholder photo --> <!-- placeholder photo -->
</div> </div>
</v-col> </v-col>
@@ -27,6 +27,7 @@
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
class="rounded-lg bg-secondary-lighten pa-2 pointer" class="rounded-lg bg-secondary-lighten pa-2 pointer"
@click="setCall(selected)" @click="setCall(selected)"
v-show="selected.doneCall !== 'Y'"
> >
<iconify-icon <iconify-icon
class="text-secondary-darken" class="text-secondary-darken"
@@ -113,15 +114,17 @@
<div <div
style="display: flex; align-items: center; justify-content: center;" style="display: flex; align-items: center; justify-content: center;"
class="rounded-lg pa-2" class="rounded-lg pa-2"
v-if="selected.doneCall === 'Y'"
> >
<div <div
class="pointer" class="pointer"
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;" style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
> >
<iconify-icon <iconify-icon
class="text-grey" :class="{'text-error': item.requirement === 'N'}"
style="font-size: 1.5rem;" style="font-size: 1.5rem;"
icon="fluent:dismiss-24-regular" icon="fluent:dismiss-12-filled"
@click="setReq(item, 'N')"
></iconify-icon> ></iconify-icon>
</div> </div>
<div <div
@@ -129,26 +132,31 @@
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;" style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
> >
<iconify-icon <iconify-icon
class="text-grey" :class="{'text-success': item.requirement === 'Y'}"
style="font-size: 1.5rem;" style="font-size: 2rem;"
icon="fluent:checkmark-24-regular" icon="fluent:checkmark-12-filled"
@click="setReq(item, 'Y')"
></iconify-icon> ></iconify-icon>
</div> </div>
</div> </div>
<p v-else style="font-size: 1.5rem;">-</p>
</td> </td>
<td align="center" class="py-1"> <td align="center">
<div class="bg-warning rounded-lg pa-1 text-white"> <div v-if="selected.doneCall === 'Y'" class="py-1">
06-08-2024 14:17 <div class="bg-warning rounded-lg pa-1 text-white">
</div> {{ formatDate(item.sDate) }}
<div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1"> </div>
00-00-0000 00:00 <div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
{{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
</div>
</div> </div>
<p v-else style="font-size: 1.5rem;">-</p>
</td> </td>
</tr> </tr>
</template> </template>
</v-data-table> </v-data-table>
<div class="ml-3"> <div class="ml-3">
<v-chip v-for="y in details.jenis" class="mr-2 mt-2" color="primary">{{ y }}</v-chip> <v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</v-chip>
</div> </div>
</v-container> </v-container>
<v-container class="bg-white rounded-lg mt-5" fluid> <v-container class="bg-white rounded-lg mt-5" fluid>
@@ -221,6 +229,9 @@
details: { details: {
get() { get() {
return this.$store.state.collection.details; return this.$store.state.collection.details;
},
set(data) {
this.$store.commit("")
} }
}, },
pemeriksaan() { pemeriksaan() {
@@ -237,9 +248,21 @@
} }
}, },
setCall(data) { setCall(data) {
data.status = "Call"; if (data.status == "New") {
this.selected = data; data.status = "Call";
} } else if (data.status == "Call") {
data.doneCall = "Y";
}
},
setReq(data, status) {
data.requirement = status;
data.eDate= new Date();
},
formatDate(date) {
if (!date) return null;
return moment(date).format("DD-MM-YYYY HH:mm");
},
}, },
} }
</script> </script>

10
specimen-collection/modules/collection.js
View File

@@ -10,6 +10,7 @@ const store = {
kelpelanggan: "PASIEN MANDIRI", kelpelanggan: "PASIEN MANDIRI",
nama: "Tn. Alpha", nama: "Tn. Alpha",
status: "New", status: "New",
doneCall: "N",
}, },
{ {
tanggal: "31-07-2024", tanggal: "31-07-2024",
@@ -17,6 +18,7 @@ const store = {
kelpelanggan: "PASIEN KLINISI", kelpelanggan: "PASIEN KLINISI",
nama: "Tn. Beta", nama: "Tn. Beta",
status: "New", status: "New",
doneCall: "N",
}, },
{ {
tanggal: "30-07-2024", tanggal: "30-07-2024",
@@ -24,6 +26,7 @@ const store = {
kelpelanggan: "PASIEN KLINISI", kelpelanggan: "PASIEN KLINISI",
nama: "Tn. Gamma", nama: "Tn. Gamma",
status: "New", status: "New",
doneCall: "N",
}, },
], ],
selected_patients: { selected_patients: {
@@ -39,15 +42,20 @@ const store = {
{ {
specimen: "EDTA Rutin", specimen: "EDTA Rutin",
barcode: "055000035LSE1A", barcode: "055000035LSE1A",
requirement: "",
sDate: new Date(),
eDate: "",
}, },
{ {
specimen: "EDTA Rutin", specimen: "EDTA Rutin",
barcode: "0550000AA223FF", barcode: "0550000AA223FF",
requirement: "",
sDate: new Date(),
eDate: "",
}, },
], ],
jenis: ["DARAH", "SWAB/SEKRET" ] jenis: ["DARAH", "SWAB/SEKRET" ]
}, },
pemeriksaan: [ pemeriksaan: [
"Hematologi Lengkap", "Golongan Darah Rhesus", "Kultur Usap Tenggorokan (Vitek)", "Hematologi Lengkap", "Golongan Darah Rhesus", "Kultur Usap Tenggorokan (Vitek)",
] ]