131 lines
4.4 KiB
Vue
131 lines
4.4 KiB
Vue
<template>
|
|
<div>
|
|
<v-container class="bg-white rounded-lg" fluid>
|
|
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="xpatients"
|
|
return-object
|
|
hide-default-footer
|
|
>
|
|
<template v-slot:headers="{ columns }">
|
|
<tr>
|
|
<td width="15%" class="pa-4 bg-secondary-lighten font-weight-bold">
|
|
{{ $t('message.headerWorklist.test') }}
|
|
</td>
|
|
<td class="pa-1 bg-secondary-lighten font-weight-bold">
|
|
<span class="position-relative" style="top:6px;">
|
|
{{ $t('message.headerWorklist.patient') }}
|
|
</span>
|
|
<span class="text-black float-right mr-3" style="font-size:20px;">
|
|
{{ staff }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<template v-slot:item="{ item }">
|
|
<tr>
|
|
<td>
|
|
<p class="mt-2 font-weight-medium text-uppercase">{{ item.T_TestName }}</p>
|
|
<p class="text-grey">{{ item.T_TestCode }}</p>
|
|
<p class="mb-2 text-black">Total pasien : {{ item.patients.length }}</p>
|
|
</td>
|
|
<td>
|
|
<v-row class="flex-wrap">
|
|
<v-sheet v-for="(p, i) in item.patients" v-bind:key="i" class="pr-3 row-pointer">
|
|
<v-sheet :class="p.is_received == 'Y' ? 'text-uppercase bg-primary-lighten text-primary box-y':'text-uppercase text-black box-n'">
|
|
<p class="font-weight-medium">{{ p.name }}</p>
|
|
<p >{{ p.number }}</p>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</v-row>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.row-pointer :hover {
|
|
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;
|
|
}
|
|
|
|
.box-y {
|
|
display: flex;
|
|
width: 202px;
|
|
padding: 8px 12px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
border-radius: 4px;
|
|
border: 1px solid #E3F2FD;
|
|
}
|
|
.box-n {
|
|
display: flex;
|
|
width: 202px;
|
|
padding: 8px 12px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
border-radius: 4px;
|
|
border: 1px solid #E0E0E0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="module">
|
|
export default {
|
|
name: "ListPatient",
|
|
data() {
|
|
return {
|
|
staff: "BELUM ADA STAFF",
|
|
headers: [
|
|
{
|
|
align: 'start',
|
|
key: 'test',
|
|
sortable: false,
|
|
width: "15%",
|
|
title: this.$t('message.headerWorklist.test'),
|
|
class: "bg-secondary-lighten font-weight-bold",
|
|
},
|
|
{
|
|
align: 'start',
|
|
key: 'patient',
|
|
sortable: false,
|
|
width: "85%",
|
|
title: this.$t('message.headerWorklist.patient'),
|
|
class: "bg-secondary-lighten font-weight-bold",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
xpatients() {
|
|
return this.$store.state.worklist.patients
|
|
},
|
|
selected_patient: {
|
|
get() {
|
|
return this.$store.state.worklist.selected_patient
|
|
},
|
|
set(val) {
|
|
this.$store.commit("worklist/setSelectedPatient", val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
wacth: {
|
|
|
|
}
|
|
}
|
|
</script> |