add barebone dialog
This commit is contained in:
@@ -19,6 +19,7 @@ var CustomTheme = {
|
|||||||
"success-darken": "#1B5E20",
|
"success-darken": "#1B5E20",
|
||||||
white: "#FFFFFF",
|
white: "#FFFFFF",
|
||||||
grey: "#9E9E9E",
|
grey: "#9E9E9E",
|
||||||
|
"grey-lighten-2": "#E0E0E0",
|
||||||
"grey-lighten-5": "#FAFAFA",
|
"grey-lighten-5": "#FAFAFA",
|
||||||
"grey-darken-1": "#757575"
|
"grey-darken-1": "#757575"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,11 +6,12 @@
|
|||||||
<h3>{{ $t('message.table.title') }}</h3>
|
<h3>{{ $t('message.table.title') }}</h3>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="1" align="end">
|
<v-col cols="1" align="end">
|
||||||
<h3>6</h3>
|
<h3>{{ datax.length }}</h3>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</div>
|
</div>
|
||||||
<v-data-table
|
<v-data-table
|
||||||
|
:items="datax"
|
||||||
:headers="headers"
|
:headers="headers"
|
||||||
hide-default-footer
|
hide-default-footer
|
||||||
>
|
>
|
||||||
@@ -23,14 +24,86 @@
|
|||||||
</template>
|
</template>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</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-data-table>
|
||||||
|
<v-pagination :length="total_page"></v-pagination>
|
||||||
|
<sp-dialog></sp-dialog>
|
||||||
</v-container>
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Sp_dialog from './sp_dialog.vue';
|
||||||
export default {
|
export default {
|
||||||
name: "contentcomp",
|
name: "contentcomp",
|
||||||
components: {},
|
components: {
|
||||||
|
"sp-dialog": Sp_dialog
|
||||||
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -39,7 +112,7 @@
|
|||||||
headers : [
|
headers : [
|
||||||
{
|
{
|
||||||
title: this.$t('message.table.h_no'),
|
title: this.$t('message.table.h_no'),
|
||||||
align: "start",
|
align: "center",
|
||||||
sortable: false,
|
sortable: false,
|
||||||
key: "name",
|
key: "name",
|
||||||
width: "5%",
|
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"
|
"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: {
|
mutations: {
|
||||||
setDate(state, date) {
|
setDate(state, date) {
|
||||||
state.date = date;
|
state.date = date;
|
||||||
|
},
|
||||||
|
setDialog(state, bool) {
|
||||||
|
state.sp_dialog = bool;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
|||||||
Reference in New Issue
Block a user