เพิ่ม Popup ข้อมูลการพ้นจากราชการ

src/modules/04_registryPerson/components/DialogRetired.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useRoute } from "vue-router";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+const modal = defineModel<boolean>("modal", { required: true });
+
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  pathRegistryEmp,
+  onSearchDataTable,
+} = mixin;
+
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+const profileId = ref<string>(route.params.id.toString()); //id profile
+
+const data = ref<{ date: Date; type: string; reson: string; document: string }>(
+  {
+    date: new Date(),
+    type: "ออกจากราชการ",
+    reson: "พ้นจากราชการด้วยสาเหตุ : ออกจากราชการ",
+    document: "test",
+  }
+);
+</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>