add barebone dialog
This commit is contained in:
@@ -19,6 +19,7 @@ var CustomTheme = {
|
||||
"success-darken": "#1B5E20",
|
||||
white: "#FFFFFF",
|
||||
grey: "#9E9E9E",
|
||||
"grey-lighten-2": "#E0E0E0",
|
||||
"grey-lighten-5": "#FAFAFA",
|
||||
"grey-darken-1": "#757575"
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
75
status-patient/components/sp_dialog.vue
Normal file
75
status-patient/components/sp_dialog.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-dialog v-model="dialog" width="auto">
|
||||
<v-card min-width="600" max-width="750" class="rounded-lg">
|
||||
<v-card-item class="bg-primary mb-5">
|
||||
<v-card-title>TIMELINE</v-card-title>
|
||||
</v-card-item>
|
||||
<v-card-text>
|
||||
<v-row class="ga-4 mb-5">
|
||||
<div class="rounded-lg bg-secondary-lighten" style="width: 80px; height: 80px;"></div>
|
||||
<div>
|
||||
<h4 class="font-weight-medium">05600027LA</h4>
|
||||
<h4 class="font-weight-bold">Ny IMELDA JANICE</h4>
|
||||
</div>
|
||||
</v-row>
|
||||
|
||||
<v-timeline side="end" style="align-items: start; align-content: start">
|
||||
<v-timeline-item
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
dot-color="white"
|
||||
fill-dot="false"
|
||||
:icon="item.icon"
|
||||
icon-color="primary"
|
||||
size="small"
|
||||
>
|
||||
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-card-text>
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
class="ms-auto text-primary font-weight-medium"
|
||||
text="TUTUP"
|
||||
@click="dialog=false"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "statuspasiendialog",
|
||||
components: {},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
color: 'info',
|
||||
icon: 'mdi-check-circle',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
color: 'error',
|
||||
icon: 'mdi-alert-circle',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dialog: {
|
||||
get() {
|
||||
return this.$store.state.stored.sp_dialog;
|
||||
},
|
||||
set(bool) {
|
||||
this.$store.commit("setDialog", bool);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -78,13 +78,93 @@ const store = {
|
||||
}
|
||||
],
|
||||
"no_reg_ext": "056G3C17LA"
|
||||
},
|
||||
{
|
||||
"xno": 2,
|
||||
"xid": "132283",
|
||||
"order_date": "28-08-2024 15:51",
|
||||
"no_reg": "05600028LA",
|
||||
"patient_name": "Ny COBA HENY",
|
||||
"company_name": "PASIEN MANDIRI",
|
||||
"mou_name": "PRAMITA PROMO PAKET IMLEK 2024",
|
||||
"status_cito": "N",
|
||||
"order_promise": "29-08-2024 12:00",
|
||||
"details_order": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"details_sampling": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"details_verifications": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"details_process": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"details_result_verification": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"details_result_validation": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"details_print": [
|
||||
{
|
||||
"ids": "1626780",
|
||||
"group_name": "Fisioterapi SWD",
|
||||
"group_id": "26",
|
||||
"flag_nonlab": "N",
|
||||
"status": "Y"
|
||||
}
|
||||
],
|
||||
"no_reg_ext": "056R2H68LA"
|
||||
}
|
||||
]
|
||||
],
|
||||
total_page: 1,
|
||||
sp_dialog: false,
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setDate(state, date) {
|
||||
state.date = date;
|
||||
},
|
||||
setDialog(state, bool) {
|
||||
state.sp_dialog = bool;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
||||
Reference in New Issue
Block a user