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: [
{
title: this.$t('message.tablePatient.date'),
align: "left",
align: "start",
sortable: false,
key: "date",
width: "15%",

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

@@ -4,7 +4,7 @@
<div class="bg-primary-lighten rounded-lg pa-5">
<v-row>
<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 -->
</div>
</v-col>
@@ -27,6 +27,7 @@
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
class="rounded-lg bg-secondary-lighten pa-2 pointer"
@click="setCall(selected)"
v-show="selected.doneCall !== 'Y'"
>
<iconify-icon
class="text-secondary-darken"
@@ -113,15 +114,17 @@
<div
style="display: flex; align-items: center; justify-content: center;"
class="rounded-lg pa-2"
v-if="selected.doneCall === 'Y'"
>
<div
class="pointer"
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
>
<iconify-icon
class="text-grey"
:class="{'text-error': item.requirement === 'N'}"
style="font-size: 1.5rem;"
icon="fluent:dismiss-24-regular"
icon="fluent:dismiss-12-filled"
@click="setReq(item, 'N')"
></iconify-icon>
</div>
<div
@@ -129,26 +132,31 @@
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
>
<iconify-icon
class="text-grey"
style="font-size: 1.5rem;"
icon="fluent:checkmark-24-regular"
:class="{'text-success': item.requirement === 'Y'}"
style="font-size: 2rem;"
icon="fluent:checkmark-12-filled"
@click="setReq(item, 'Y')"
></iconify-icon>
</div>
</div>
<p v-else style="font-size: 1.5rem;">-</p>
</td>
<td align="center" class="py-1">
<div class="bg-warning rounded-lg pa-1 text-white">
06-08-2024 14:17
</div>
<div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1">
00-00-0000 00:00
<td align="center">
<div v-if="selected.doneCall === 'Y'" class="py-1">
<div class="bg-warning rounded-lg pa-1 text-white">
{{ formatDate(item.sDate) }}
</div>
<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>
<p v-else style="font-size: 1.5rem;">-</p>
</td>
</tr>
</template>
</v-data-table>
<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>
</v-container>
<v-container class="bg-white rounded-lg mt-5" fluid>
@@ -221,6 +229,9 @@
details: {
get() {
return this.$store.state.collection.details;
},
set(data) {
this.$store.commit("")
}
},
pemeriksaan() {
@@ -237,9 +248,21 @@
}
},
setCall(data) {
data.status = "Call";
this.selected = data;
}
if (data.status == "New") {
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>

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

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