132 lines
4.3 KiB
Vue
132 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-container class="pt-0" fluid>
|
|
<div class="rounded-lg pa-5 mb-5">
|
|
<h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
|
|
</div>
|
|
<v-data-table
|
|
v-model="selected_patients"
|
|
:items="patients"
|
|
:headers="headers"
|
|
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 @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.tanggal }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.noreg }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.kelpelanggan }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.nama }}</p>
|
|
</td>
|
|
<td>
|
|
<p class="font-weight-medium">{{ item.status }}</p>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "leftcomp",
|
|
components: {},
|
|
mounted() {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
menu: false,
|
|
visible: false,
|
|
selectedItems: [],
|
|
headers: [
|
|
{
|
|
title: this.$t('message.tablePatient.date'),
|
|
align: "start",
|
|
sortable: false,
|
|
key: "date",
|
|
width: "15%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.tablePatient.noreg'),
|
|
align: "start",
|
|
sortable: false,
|
|
key: "noreg",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.tablePatient.group'),
|
|
align: "start",
|
|
sortable: false,
|
|
key: "group",
|
|
width: "25%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.tablePatient.name'),
|
|
align: "start",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "25%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.tablePatient.status'),
|
|
align: "start",
|
|
sortable: false,
|
|
key: "status",
|
|
width: "15%",
|
|
class: "font-weight-bold",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
patients() {
|
|
return this.$store.state.collection.patients;
|
|
},
|
|
selected_patients: {
|
|
get() {
|
|
return this.$store.state.collection.selected_patients;
|
|
},
|
|
set(data) {
|
|
this.$store.commit("setSelectedPatients", data);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
selectItem(data) {
|
|
// this.$store.commit("setSelectedPatients", data);
|
|
this.selected_patients = data;
|
|
},
|
|
isItemSelected(data) {
|
|
return data.noreg === this.$store.state.collection.selected_patients.noreg
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.row-pointer >>> tbody tr :hover {
|
|
cursor: pointer;
|
|
}
|
|
</style> |