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

Feat: List Patient

Browse Source
This commit is contained in:
naochizuki
2024-08-29 14:31:19 +07:00
parent b5babbfeac
commit bbf939fb79
10 changed files with 1268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
list-patient/components/lists.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<div>
<v-container class="bg-white rounded-lg" fluid>
<div
class="bg-secondary-lighten rounded-lg d-flex justify-space-between pa-5 mb-5"
>
<h3 class="primary-lighten">
{{ $t("message.tableListPatient.title") }}
</h3>
<h3 class="primary-lighten">{{ patients.length }}</h3>
</div>
<v-data-table
v-model:page="page"
height="275px"
:items="patients"
:headers="headers"
:items-per-page="itemsPerPage"
hide-default-footer
class="row-pointer"
>
<template v-slot:headers="{ columns }">
<tr>
<template v-for="column in columns" :key="column.key">
<td
:class="column.class"
:style="{ width: column.width, textAlign: column.align }"
>
<span>{{ column.title }}</span>
</td>
</template>
</tr>
</template>
<template v-slot:item="{ item }">
<tr>
<td>
<v-btn
icon="mdi-pencil"
variant="flat"
:class="[
'rounded-0 w-100 h-100 pa-2 text-white',
{ 'bg-info': item.process },
{ 'bg-secondary': !item.process },
]"
@click="onSelectPatient(item)"
></v-btn>
</td>
<td>
<p class="font-weight-medium">{{ item.no }}</p>
</td>
<td>
<div>
<p class="font-weight-medium mt-2">{{ item.noReg1 }}</p>
<p
v-if="item.noReg2"
class="font-weight-medium text-error mb-2"
>
{{ item.noReg2 }}
</p>
</div>
</td>
<td>
<div>
<p class="mt-2 mb-2" style="font-size: 12px">{{ item.name }}</p>
<p class="mb-2">
<v-chip label size="small">
{{ item.staff }}
</v-chip>
</p>
<p class="mb-2">
<v-chip label size="small">
{{ item.orderTime }}
</v-chip>
</p>
</div>
</td>
<td>
<p style="font-size: 12px">{{ item.agreement }}</p>
</td>
<td>
<div>
<p class="mt-2" style="font-size: 12px">{{ item.doctor.no }}</p>
<p class="mb-2" style="font-size: 12px">
{{ item.doctor.name }}
</p>
</div>
</td>
<td>
<div>
<p
v-for="result in item.result"
:key="result"
style="font-size: 12px"
>
{{ result }}
</p>
</div>
</td>
<td>
<div>
<p
v-for="inspection in item.inspection"
:key="inspection"
style="font-size: 12px"
>
{{ inspection }}
</p>
</div>
</td>
<td>
<div>
<p v-for="delivery in item.delivery">
<v-chip variant="flat" color="primary" class="rounded">{{
delivery
}}</v-chip>
</p>
</div>
</td>
<td>
<div>
<p class="font-weight-medium">{{ item.total.all }}</p>
<p v-if="item.total.disc" class="font-weight-medium text-error">
{{ item.total.disc }}
</p>
</div>
</td>
</tr>
</template>
<template v-slot:bottom>
<div class="text-center pt-2">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
</div>
</template>
</v-data-table>
</v-container>
</div>
<info-dialog></info-dialog>
<change-birthday-dialog></change-birthday-dialog>
<barcode-dialog></barcode-dialog>
<material-dialog></material-dialog>
</template>
<script>
import InfoDialogComponent from "./infoDialog.vue";
import ChangeBirthdayDialogComponent from "./changeBirthdayDialog.vue";
import BarcodeDialogComponent from "./barcodeDialog.vue";
import MaterialDialogComponent from "./materialDialog.vue";
export default {
name: "MainLists",
components: {
"info-dialog": InfoDialogComponent,
"change-birthday-dialog": ChangeBirthdayDialogComponent,
"barcode-dialog": BarcodeDialogComponent,
"material-dialog": MaterialDialogComponent,
},
mounted() {},
data() {
return {
page: 1,
itemsPerPage: 3,
headers: [
{
title: "",
align: "start",
sortable: false,
key: "actionButton",
width: "4%",
class: "",
},
{
title: this.$t("message.tableListPatient.no"),
align: "center",
sortable: false,
key: "no",
width: "4%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.noreg"),
align: "start",
sortable: false,
key: "noreg",
width: "12%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.name"),
align: "start",
sortable: false,
key: "noreg",
width: "12%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.agreement"),
align: "start",
sortable: false,
key: "noreg",
width: "14%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.doctor"),
align: "start",
sortable: false,
key: "noreg",
width: "12%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.result"),
align: "start",
sortable: false,
key: "noreg",
width: "14%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.inspection"),
align: "start",
sortable: false,
key: "noreg",
width: "12%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.delivery"),
align: "start",
sortable: false,
key: "noreg",
width: "12%",
class: "font-weight-bold",
},
{
title: this.$t("message.tableListPatient.total"),
align: "start",
sortable: false,
key: "noreg",
width: "4%",
class: "font-weight-bold",
},
],
};
},
computed: {
patients() {
return this.$store.state.collection.patients;
},
pageCount() {
return Math.ceil(this.patients.length / this.itemsPerPage);
},
},
methods: {
onSelectPatient(patient) {
this.$store.commit("setMenuSelectedPatient", true);
this.$store.commit("setSelectedPatient", patient);
},
},
};
</script>
<style scoped>
.row-pointer >>> tbody tr :hover {
cursor: pointer;
}
</style>