245 lines
10 KiB
Vue
245 lines
10 KiB
Vue
<template>
|
|
<v-container fluid class="bg-white rounded-lg my-5">
|
|
<div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
|
|
<v-row>
|
|
<v-col cols="11">
|
|
<h3>{{ $t('message.table.title') }}</h3>
|
|
</v-col>
|
|
<v-col cols="1" align="end">
|
|
<h3>{{ datax.length }}</h3>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<v-data-table
|
|
:items="datax"
|
|
:headers="headers"
|
|
hide-default-footer
|
|
>
|
|
<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 align="center" class="pa-2">
|
|
<p class="font-weight-medium">{{ item.xno }}</p>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p class="font-weight-medium">{{ item.order_date }}</p>
|
|
<p class="font-weight-medium rounded-lg bg-grey-lighten-2 px-4" style="display: inline-block;">{{ item.order_promise }}</p>
|
|
</td>
|
|
<td align="start" class="pa-2">
|
|
<v-row>
|
|
<v-col cols="5" align="start">
|
|
<p class="font-weight-medium">{{ item.no_reg }}</p>
|
|
</v-col>
|
|
<v-col cols="7" align="end">
|
|
<p class="font-weight-bold text-blue">{{ item.no_reg_ext }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<p class="font-weight-bold">{{ item.patient_name }}</p>
|
|
<v-row>
|
|
<v-col cols="5" align="start">
|
|
<p class="font-weight-medium">{{ item.company_name }}</p>
|
|
</v-col>
|
|
<v-col cols="7" align="end">
|
|
<p class="font-weight-medium text-grey">{{ item.mou_name }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p
|
|
:class="['font-weight-medium rounded-lg pointer', item.details_order[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
|
|
style=" width: 80%; height: 60%; align-content: center;"
|
|
@click="openMultiDialog(true, 'order')"
|
|
>{{ item.details_order[0].group_name }}</p>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p
|
|
:class="['font-weight-medium rounded-lg pointer', item.details_sampling[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
|
|
style=" width: 80%; height: 60%; align-content: center;"
|
|
@click="openMultiDialog(true, 'sample')"
|
|
>{{ item.details_sampling[0].group_name }}</p>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p
|
|
:class="['font-weight-medium rounded-lg pointer', item.details_process[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
|
|
style=" width: 80%; height: 60%; align-content: center;"
|
|
@click="openMultiDialog(true, 'process')"
|
|
>{{ item.details_process[0].group_name }}</p>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p
|
|
:class="['font-weight-medium rounded-lg pointer', item.details_result_verification[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
|
|
style=" width: 80%; height: 60%; align-content: center;"
|
|
@click="openMultiDialog(true, 'verif')"
|
|
>{{ item.details_result_verification[0].group_name }}</p>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p
|
|
:class="['font-weight-medium rounded-lg pointer', item.details_result_validation[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
|
|
style=" width: 80%; height: 60%; align-content: center;"
|
|
@click="openMultiDialog(true, 'valid')"
|
|
>{{ item.details_result_validation[0].group_name }}</p>
|
|
</td>
|
|
<td align="center" class="pa-2">
|
|
<p
|
|
:class="['font-weight-medium rounded-lg pointer', item.details_print[0].status === 'Y' ? 'bg-success' : 'bg-grey-lighten-2']"
|
|
style=" width: 80%; height: 60%; align-content: center;"
|
|
@click="print_dialog=true"
|
|
>{{ item.details_print[0].group_name }}</p>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table>
|
|
<v-pagination :length="total_page"></v-pagination>
|
|
<sp-dialog></sp-dialog>
|
|
<print-dialog></print-dialog>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import PrintDialog from './print-dialog.vue';
|
|
import Sp_dialog from './sp_dialog.vue';
|
|
export default {
|
|
name: "contentcomp",
|
|
components: {
|
|
"sp-dialog": Sp_dialog,
|
|
"print-dialog": PrintDialog,
|
|
},
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
menu: false,
|
|
visible: false,
|
|
headers : [
|
|
{
|
|
title: this.$t('message.table.h_no'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "5%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_orderr'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "15%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_pasien'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "20%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_status'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "10%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_sample'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "10%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_proces'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "10%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_resver'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "10%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_resval'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "10%",
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
title: this.$t('message.table.h_printt'),
|
|
align: "center",
|
|
sortable: false,
|
|
key: "name",
|
|
width: "10%",
|
|
class: "font-weight-bold",
|
|
},
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
datax: {
|
|
get() {
|
|
return this.$store.state.stored.data;
|
|
}
|
|
},
|
|
total_page: {
|
|
get() {
|
|
return this.$store.state.stored.total_page;
|
|
}
|
|
},
|
|
dialog: {
|
|
get() {
|
|
return this.$store.state.stored.sp_dialog;
|
|
},
|
|
set(bool) {
|
|
this.$store.commit("setDialog", bool);
|
|
}
|
|
},
|
|
multi_dialog: {
|
|
get() {
|
|
return this.$store.state.stored.multi_dialog;
|
|
},
|
|
set(bool, nama) {
|
|
this.$store.commit("setMultiDialog", bool, nama)
|
|
}
|
|
},
|
|
print_dialog: {
|
|
get() {
|
|
return this.$store.state.stored.print_dialog;
|
|
},
|
|
set(bool) {
|
|
this.$store.commit("setPrintDialog", bool);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
openMultiDialog(bool, nama) {
|
|
this.multi_dialog.open = bool;
|
|
this.multi_dialog.name = nama;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
</style> |