add barebone dialog

This commit is contained in:
2024-08-29 15:41:24 +07:00
parent 67600d6a16
commit c85d0344b7
4 changed files with 260 additions and 5 deletions

View File

@@ -6,11 +6,12 @@
<h3>{{ $t('message.table.title') }}</h3>
</v-col>
<v-col cols="1" align="end">
<h3>6</h3>
<h3>{{ datax.length }}</h3>
</v-col>
</v-row>
</div>
<v-data-table
:items="datax"
:headers="headers"
hide-default-footer
>
@@ -23,14 +24,86 @@
</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="dialog=true"
>{{ 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;"
>{{ 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;"
>{{ 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;"
>{{ 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;"
>{{ 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;"
>{{ item.details_print[0].group_name }}</p>
</td>
</tr>
</template>
</v-data-table>
<v-pagination :length="total_page"></v-pagination>
<sp-dialog></sp-dialog>
</v-container>
</template>
<script>
import Sp_dialog from './sp_dialog.vue';
export default {
name: "contentcomp",
components: {},
components: {
"sp-dialog": Sp_dialog
},
mounted() {},
data() {
return {
@@ -39,7 +112,7 @@
headers : [
{
title: this.$t('message.table.h_no'),
align: "start",
align: "center",
sortable: false,
key: "name",
width: "5%",
@@ -112,5 +185,31 @@
]
};
},
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);
}
}
},
}
</script>
</script>
<style scoped>
.pointer {
cursor: pointer;
}
</style>