ปรับ ทะเบียนประวัติในส่วนของเมนูด้านบนขวา

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

@@ -12,6 +12,15 @@ import avatar from "@/assets/avatar_user.jpg";
 import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
 import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
 import { ResponseObject } from "../interface/response/Profile";
+import DialogHeader from "@/components/DialogHeader.vue";
+/** ถึงเเก่กรรม */
+const dialogPassaway = ref<boolean>(false);
+const placeDeathCertificate = ref("");
+const deathCertificateNo = ref("");
+const dateDeath = ref<Date>(new Date());
+const filePassaway = ref<any>(null);
+const reasonDeath = ref("");
+
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const router = useRouter();
@@ -24,6 +33,7 @@ const {
   messageError,
   success,
   date2Thai,
+  dateToISO
 } = mixin;
 
 const profileId = ref<string>(route.params.id.toString());
@@ -151,52 +161,187 @@ function onClickDownloadKp7(type: string) {
     window.open(config.API.profileKp7ShortId(profileId.value));
   }
 }
+
+/** ช่วยราชการ */
+async function helpPost() {
+  const formData = new FormData();
+  formData.append("id", profileId.value);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.placemenHelpGov, formData)
+      .then(() => {
+        success($q, "ดำเนินการสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        router.push("/help-government");
+      });
+  });
+};
+
+/** ส่งตัวกลับ */
+async function repatriationPost() {
+  const formData = new FormData();
+  formData.append("id", profileId.value);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.placemenRepatriation, formData)
+      .then(() => {
+        success($q, "ดำเนินการสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        router.push("/repatriate");
+      });
+  });
+};
+
+/** แต่งตังเลื่อน */
+async function appointPost() {
+  const formData = new FormData();
+  formData.append("id", profileId.value);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.placemenAppointment, formData)
+      .then(() => {
+        success($q, "ดำเนินการสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        router.push("/appoint-promote");
+      });
+  });
+};
+
+/** ถึงเเก่กรรม */
+async function clickPassaway() {
+  dialogPassaway.value = true;
+};
+
+/** ให้ออกจากราชการ */
+async function outPost() {
+  const formData = new FormData();
+  formData.append("id", profileId.value);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.retirementOut, formData)
+      .then(() => {
+        success($q, "ดำเนินการสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        router.push("/dismiss-order");
+      });
+  });
+};
+
+/** อื่นๆ */
+async function otherPost(){
+  const formData = new FormData();
+  formData.append("id", profileId.value);
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.placemenOther, formData)
+      .then(() => {
+        success($q, "ดำเนินการสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        router.push("/other");
+      });
+  });
+};
+
+function closePassaway() {
+  dialogPassaway.value = false;
+};
+
+async function clickSaveDeceased() {
+  const formData = new FormData();
+  formData.append("File", filePassaway.value);
+  formData.append("Number", deathCertificateNo.value);
+  formData.append("Date", dateToISO(dateDeath.value));
+  formData.append("Location", placeDeathCertificate.value);
+  formData.append("Reason", reasonDeath.value);
+  formData.append("ProfileId", profileId.value);
+
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .post(config.API.listDeceased(), formData)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          router.push("/deceased");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
+    .onCancel(() => { })
+    .onDismiss(() => { });
+};
+
 onMounted(async () => {
   fileName.value = `profile-${profileId.value}`;
   fetchProfile(profileId.value);
   fetchDataPersonal();
 });
 </script>
+
 <template>
   <div class="row items-center q-gutter-sm q-mb-xs">
     <div class="toptitle text-dark row items-center q-py-xs">
-      <q-btn
-        icon="mdi-arrow-left"
-        unelevated
-        round
-        dense
-        flat
-        color="primary"
-        class="q-mr-sm"
-        @click="router.go(-1)"
-      />
+      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
       ทะเบียนประวัติ
     </div>
     <q-space />
-    <q-btn-dropdown
-      size="md"
-      rounded
-      unelevated
-      color="grey-4"
-      text-color="red"
-      icon="mdi-home-export-outline"
-      dropdown-icon="mdi-chevron-down"
-    >
+    <q-btn-dropdown size="md" rounded unelevated color="grey-4" text-color="red" icon="mdi-home-export-outline"
+      dropdown-icon="mdi-chevron-down">
       <q-list v-for="(item, index) in itemsMenu" key="index">
-        <q-item clickable v-close-popup>
+        <q-item clickable @click="item.name == 'ช่วยราชการ' ? helpPost()
+        : item.name == 'ส่งตัวกลับ' ? repatriationPost()
+          : item.name == 'แต่งตั้ง-เลื่อน-ย้าย' ? appointPost()
+            : item.name == 'ถึงแก่กรรม' ? clickPassaway()
+              : item.name == 'ให้ออกจากราชการ' ? outPost()
+                : item.name == 'อื่นๆ' ? otherPost() : null" v-close-popup>
           <q-item-section>{{ item.name }}</q-item-section>
         </q-item>
       </q-list>
     </q-btn-dropdown>
 
-    <q-btn
-      unelevated
-      round
-      color="grey-4"
-      text-color="primary"
-      icon="mdi-file-eye-outline"
-      size="md"
-    >
+    <q-btn unelevated round color="grey-4" text-color="primary" icon="mdi-file-eye-outline" size="md">
       <q-tooltip>ดาวน์ไฟล์</q-tooltip>
       <q-menu>
         <q-list style="min-width: 120px">
@@ -218,13 +363,10 @@ onMounted(async () => {
           <div class="col-sm-3 col-md-2"></div>
           <div class="col">
             <div class="col-12 text-primary">
-              <h2
-                class="title q-ma-none q-pa-none"
-                v-if="formDetail && formDetail.firstName && formDetail.lastName"
-              >
+              <h2 class="title q-ma-none q-pa-none" v-if="formDetail && formDetail.firstName && formDetail.lastName">
                 {{
-                  `${formDetail?.prefix}${formDetail?.firstName}  ${formDetail?.lastName}`
-                }}
+        `${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName}`
+      }}
               </h2>
             </div>
             <div class="col-12 subtitle">{{ formDetail?.position }}</div>
@@ -236,14 +378,8 @@ onMounted(async () => {
         <q-avatar size="130px">
           <img :src="profilePicture" />
         </q-avatar>
-        <q-btn
-          round
-          color="white"
-          text-color="primary"
-          icon="mdi-pencil-outline"
-          style="position: absolute; bottom: 0; right: 0"
-          @click="selectFile"
-        >
+        <q-btn round color="white" text-color="primary" icon="mdi-pencil-outline"
+          style="position: absolute; bottom: 0; right: 0" @click="selectFile">
         </q-btn>
       </div>
 
@@ -280,6 +416,69 @@ onMounted(async () => {
   <q-card class="q-mt-md rounded">
     <TabMain />
   </q-card>
+
+  <!-- Dialog แนบใบมรณบัตร -->
+  <q-dialog v-model="dialogPassaway" persistent>
+    <div class="col-12">
+      <q-card style="width: 100vw; max-width: 60vw">
+        <q-form ref="myForm">
+          <q-card-section class="q-py-sm row">
+            <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
+
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-file class="col-12 col-sm-6 col-md-5" outlined dense v-model="filePassaway" label="แนบใบมรณบัตร"
+                hide-bottom-space lazy-rules accept=".pdf">
+                <q-separator />
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="deathCertificateNo"
+                label="เลขที่ใบมรณบัตร" />
+
+              <datepicker class="col-12 col-sm-6 col-md-5" menu-class-name="modalfix" v-model="dateDeath" :locale="'th'"
+                autoApply borderless :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker" :model-value="dateDeath != null ? date2Thai(dateDeath) : null
+        " :label="`${'วันที่เสียชีวิต'}`" :rules="[
+        (val) => !!val || `${'กรุณาเลือกวันที่เสียชีวิต'}`,
+      ]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
+              <q-input class="col-12 col-sm-6 col-md-7" dense outlined v-model="placeDeathCertificate"
+                label="สถานที่ออกใบมรณบัตร" />
+              <q-separator />
+              <q-input class="col-12" dense outlined v-model="reasonDeath" label="เหตุผลการเสียชีวิต" type="textarea" />
+            </div>
+            <q-space />
+          </q-card-section>
+          <q-separator />
+          <div class="flex justify-end q-pa-sm q-gutter-sm">
+            <q-btn unelevated label="บันทึก" color="public" @click="clickSaveDeceased" :disable="filePassaway === null ||
+        deathCertificateNo === '' ||
+        placeDeathCertificate === '' ||
+        reasonDeath === ''
+        ">
+              <q-tooltip>บันทึก</q-tooltip>
+            </q-btn>
+          </div>
+        </q-form>
+      </q-card>
+    </div>
+  </q-dialog>
+
 </template>
 
 <style scoped>
@@ -288,15 +487,18 @@ h2.title {
   line-height: 1.6rem;
   font-weight: 500;
 }
+
 .subtitle {
   font-size: 1rem;
   color: #34373c;
 }
+
 .absolute-center-left {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
 }
+
 .rounded {
   border-radius: 10px;
 }