เพิ่ม 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>

src/modules/04_registryPerson/views/detailView.vue

@@ -16,25 +16,20 @@ import axios from "axios";
 import genReport from "@/plugins/genreport";
 import avatar from "@/assets/avatar_user.jpg";
 
-/**
+/** importType*/
- * importType
- */
 import type {
   DataOption,
   DataOptionSys,
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
 
-/**
+/** importComponents*/
- * importComponents
- */
 import CardNotPermission from "@/components/CardNotPermission.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue";
+import DialogRetired from "@/modules/04_registryPerson/components/DialogRetired.vue";
 
-/**
+/** use*/
- * use
- */
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -67,6 +62,8 @@ const reasonDeath = ref(""); //เหตุผลการเสียชีว
 
 const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
 const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
+
+const modalDialogRetired = ref<boolean>(false);
 //รายการเมนูออกคำสั่งข้าราชการ
 const baseItemsMenu = ref<DataOptionSys[]>([
   {
@@ -118,6 +115,7 @@ const itemsMenu = computed(() => {
     return baseItemsMenu.value || [];
   }
 });
+
 //รายการเมนูออกคำสั่งลูกจ้าง
 const itemsMenuEmployee = ref<DataOptionSys[]>([
   {
@@ -162,7 +160,10 @@ function imageActive(n: any) {
   activeImage.value = n;
 }
 
-// ฟังก์ชันสำหรับปรับขนาดภาพ
+/**
+ * ฟังก์ชันสำหรับปรับขนาดภาพ
+ * @param file ไฟล์รูป
+ */
 function resizeImage(file: File): Promise<File> {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -224,9 +225,7 @@ function resizeImage(file: File): Promise<File> {
 
 const newProfileFile = ref<any>(null);
 
-/**
+/** ฟังก์ชันอัปโหลด*/
- * ฟังก์ชันอัปโหลด
- */
 async function uploadImg() {
   showLoader();
   newProfileFile.value = await resizeImage(profileFile.value);
@@ -266,6 +265,8 @@ async function uploadProfile(path: string) {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -347,9 +348,7 @@ const reasonOptions = ref<DataOption[]>([
   },
 ]);
 
-/**
+/** ฟังก์ชันดึงข้อมูลส่วนต้ว*/
- * ฟังก์ชันดึงข้อมูลส่วนต้ว
- */
 async function fetchDataPersonal() {
   showLoader();
   await http
@@ -400,7 +399,8 @@ async function fetchDataPersonal() {
 }
 
 /**
- * ฟังก์ชันดาว์นโหลดไฟล์ "ก.พ.7/ก.ก.1 หรื่อ ประวัติแบบย่อ
+ * ฟังก์ชันดาว์นโหลดไฟล์ "ก.พ.7/ก.ก.1 และประวัติแบบย่อ
+ * @param type full === 'ก.พ.7/ก.ก.1', SHORT === 'ประวัติแบบย่อ'
  */
 async function onClickDownloadKp7(type: string) {
   showLoader();
@@ -428,9 +428,7 @@ async function onClickDownloadKp7(type: string) {
     });
 }
 
-/**
+/**  ฟังก์ชันออกคำสั่งช่วยราชการ*/
- *  ฟังก์ชันออกคำสั่งช่วยราชการ
- */
 function helpPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -451,9 +449,7 @@ function helpPost() {
   });
 }
 
-/**
+/** ฟังก์ชันออกคำสั่งส่งตัวกลับ*/
- * ฟังก์ชันออกคำสั่งส่งตัวกลับ
- */
 function repatriationPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -474,9 +470,7 @@ function repatriationPost() {
   });
 }
 
-/**
+/** ฟังก์ชันออกคำสั่งแต่งตังเลื่อน*/
- * ฟังก์ชันออกคำสั่งแต่งตังเลื่อน
- */
 function appointPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -497,9 +491,7 @@ function appointPost() {
   });
 }
 
-/**
+/** ฟังก์ชันออกคำสั่งถึงเเก่กรรม*/
- * ฟังก์ชันออกคำสั่งถึงเเก่กรรม
- */
 function clickPassaway() {
   dialogPassaway.value = true;
   filePassaway.value = null;
@@ -509,9 +501,7 @@ function clickPassaway() {
   reasonDeath.value = "";
 }
 
-/**
+/** ฟังก์ชันออกคำสั่งให้ออกจากราชการ*/
- * ฟังก์ชันออกคำสั่งให้ออกจากราชการ
- */
 function outPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -536,9 +526,7 @@ function outPost() {
   });
 }
 
-/**
+/** ฟังก์ชันออกคำสั่งอื่นๆ*/
- * ฟังก์ชันออกคำสั่งอื่นๆ
- */
 function otherPost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -563,9 +551,7 @@ function otherPost() {
   });
 }
 
-/**
+/** ฟังก์ชันออกคำสั่งปรับระดับชั้นงาน - ย้าย*/
- * ฟังก์ชันออกคำสั่งปรับระดับชั้นงาน - ย้าย
- */
 function appointEmployeePost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -586,9 +572,7 @@ function appointEmployeePost() {
   });
 }
 
-/**
+/** ฟังก์ชันยืนยันบันทึกข้อมูลถึงแก่กรรม*/
- * ฟังก์ชันยืนยันบันทึกข้อมูลถึงแก่กรรม
- */
 function clickSaveDeceased() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -617,25 +601,19 @@ function clickSaveDeceased() {
   });
 }
 
-/**
+/** ฟังก์ชันปืด popup ถึงแก่กรรม*/
- * ฟังก์ชันปืด popup ถึงแก่กรรม
- */
 function closePassaway() {
   dialogPassaway.value = false;
 }
 
-/**
+/** ฟังก์ชันเปืด popup เลือกรูปภาพ*/
- * ฟังก์ชันเปืด popup เลือกรูปภาพ
- */
 function openDialogImg() {
   dialogImage.value = true;
   getImage();
 }
 
-/**
+/** ฟังก์ชันเรียกข้อมูลรูป*/
- * ฟังก์ชันเรียกข้อมูลรูป
+async function getImage() {
- */
-function getImage() {
   showLoader();
   http
     .get(config.API.orgProfileAvatar + `/${profileId.value}`)
@@ -656,8 +634,8 @@ function getImage() {
 }
 
 /**
- * ฟังก์ชันเรียกข้อมูลรูป
+ * ฟังก์ชันเรียกข้อมูลรายการรูป
- * @param dataList
+ * @param dataList ข้อมูล
  */
 async function getImg(dataList: any) {
   await http
@@ -676,9 +654,7 @@ async function getImg(dataList: any) {
     });
 }
 
-/**
+/** ฟังก์ชันปิด Popup เลือกรูปภาพ*/
- * ฟังก์ชันปิด Popup เลือกรูปภาพ
- */
 function closeImage() {
   dialogImage.value = false;
   images.value = [];
@@ -696,10 +672,10 @@ function deletePhoto(id: string) {
       showLoader();
       http
         .delete(config.API.orgProfileAvatar + `/${id}`)
-        .then((res) => {
+        .then(async () => {
+          await getImage();
           images.value = [];
           imagesAlldata.value = [];
-          getImage();
         })
         .catch((e) => {
           messageError($q, e);
@@ -712,9 +688,7 @@ function deletePhoto(id: string) {
   );
 }
 
-/**
+/** ฟังก์ชันยืนยันการเลือกรูป*/
- * ฟังก์ชันยืนยันการเลือกรูป
- */
 function selectAvatarHistory() {
   if (activeImage.value == null) {
     dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน");
@@ -781,7 +755,7 @@ onMounted(async () => {
       />
       {{
         route.name === "registry-employeeId"
-          ? " ทะเบียนประวัติลูกจ้างชั่วคราว"
+          ? "ทะเบียนประวัติลูกจ้างชั่วคราว"
           : "ทะเบียนประวัติ"
       }}
     </div>
@@ -789,7 +763,6 @@ onMounted(async () => {
 
     <div v-if="isPermission">
       <!-- list menu ของข้าราชการฯ -->
-
       <q-btn-dropdown
         v-if="
           (!storeRegistry.isLeave &&
@@ -934,6 +907,16 @@ onMounted(async () => {
                     }${formDetail.firstName} ${formDetail.lastName}`
                   }}
                   <span class="text-red"> {{ leaveReason }}</span>
+                  <q-btn
+                    v-if="leaveReason"
+                    flat
+                    round
+                    color="info"
+                    icon="info"
+                    @click.stop.prevent="modalDialogRetired = true"
+                  >
+                    <q-tooltip>ข้อมูลการพ้นจากราชการ</q-tooltip>
+                  </q-btn>
                 </h2>
               </div>
             </div>
@@ -1201,6 +1184,9 @@ onMounted(async () => {
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!-- Dialog ข้อมูลการพ้นจากราชการ -->
+  <DialogRetired v-model:modal="modalDialogRetired" />
 </template>
 
 <style scoped>