97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
|
|
|
|
import type { DataLeave } from "@/modules/04_registryPerson/interface/index/leave";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
const storeRegistry = useRegistryNewDataStore();
|
|
const modal = defineModel<boolean>("modal", { required: true });
|
|
|
|
const mixin = useCounterMixin();
|
|
const { date2Thai } = mixin;
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({
|
|
leaveDate: null,
|
|
leaveType: "",
|
|
leaveReason: "",
|
|
leaveCommandNo: "",
|
|
}),
|
|
},
|
|
});
|
|
|
|
const data = ref<DataLeave>({
|
|
date: null,
|
|
type: "",
|
|
reson: "",
|
|
document: "",
|
|
});
|
|
|
|
watch(modal, (val) => {
|
|
if (val) {
|
|
data.value = {
|
|
date: props.data?.leaveDate,
|
|
type: storeRegistry.convertTypeRetired(props.data?.leaveType),
|
|
reson: props.data?.leaveReason,
|
|
document: props.data?.leaveCommandNo,
|
|
};
|
|
} else {
|
|
data.value = {
|
|
date: null,
|
|
type: "",
|
|
reson: "",
|
|
document: "",
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog v-model="modal" persistent>
|
|
<q-card style="min-width: 30%">
|
|
<DialogHeader
|
|
tittle="ข้อมูลการพ้นจากราชการ"
|
|
:close="() => (modal = false)"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section>
|
|
<div class="row">
|
|
<div class="col-12 column justify-center no-wrap">
|
|
<div class="row text-grey-6">
|
|
<div class="col-6">วันเดือนปีที่พ้นจากราชการ</div>
|
|
<div class="col-6">ประเภทการพ้นจากราชการ</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
{{ data.date ? date2Thai(data.date) : "-" }}
|
|
</div>
|
|
<div class="col-6">{{ data.type ? data.type : "-" }}</div>
|
|
</div>
|
|
|
|
<div class="row q-mt-md text-grey-6">
|
|
<div class="col-12">สาเหตุ/เหตุผล</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">{{ data.reson ? data.reson : "-" }}</div>
|
|
</div>
|
|
|
|
<div class="row q-mt-md text-grey-6">
|
|
<div class="col-12">คำสั่ง/เอกสารอ้างอิง</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
{{ data.document ? data.document : "-" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|