แก้ไข เพิ่มใน pop up ถึงแก่กรรม

src/modules/04_registry/components/Profile.vue

@@ -387,38 +387,100 @@
   </q-dialog>
   <!-- Dialog แนบใบมรณบัตร -->
   <q-dialog v-model="dialogPassaway" persistent>
-    <q-card style="width: 100vw; max-width: 60vw">
+    <div class="col-12">
-      <q-card-section class="q-py-sm row">
+      <q-card style="width: 100vw; max-width: 60vw">
-        <div class="text-h6">แนบใบมรณบัตร</div>
+        <q-form ref="myForm">
-        <q-space />
+          <q-card-section class="q-py-sm row">
-        <q-btn
+            <DialogHeader tittle="ถึงแก่กรรม" :close="closePassaway" />
-          icon="close"
+            <q-file
-          unelevated
+              class="col-5"
-          round
+              outlined
-          dense
+              dense
-          @click="closePassaway"
+              v-model="filePassaway"
-          style="color: #ff8080; background-color: #ffdede"
+              label="แนบใบมรณบัตร"
-        >
+              hide-bottom-space
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
+              lazy-rules
-        </q-btn>
+            >
-      </q-card-section>
+              <template v-slot:prepend>
-      <q-separator />
+                <q-icon name="attach_file" />
-      <q-card-actions align="right">
+              </template>
-        <q-file
+            </q-file>
-          class="col-xs-12 col-sm-12"
+            <q-separator />
-          outlined
+            <q-input
-          dense
+              class="col-7"
-          v-model="filePassaway"
+              dense
-          label="แนบใบมรณบัตร"
+              outlined
-          hide-bottom-space
+              v-model="deathCertificateNo"
-          lazy-rules
+              label="เลขที่ใบมรณบัตร"
-        >
+            />
-          <template v-slot:prepend>
+            <q-separator />
-            <q-icon name="attach_file" />
+            <datepicker
-          </template>
+              class="col-5"
-        </q-file>
+              menu-class-name="modalfix"
-      </q-card-actions>
+              v-model="dateDeath"
-    </q-card>
+              :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-7"
+              dense
+              outlined
+              v-model="placeDeathCertificate"
+              label="สถานที่ออกใบมรณบัตร"
+            />
+            <q-separator />
+            <q-input
+              class="col-12"
+              dense
+              outlined
+              v-model="reasonDeath"
+              label="เหตุผลการเสีบชีวิต"
+              type="textarea"
+            />
+            <q-space />
+
+            <q-space />
+          </q-card-section>
+          <q-separator />
+          <DialogFooter
+            :save="clickSave"
+            :validate="validateData"
+            v-model:editvisible="edit"
+            v-model:modalEdit="modalEdit"
+          />
+        </q-form>
+      </q-card>
+    </div>
   </q-dialog>
   <!-- Dialog เลือก เกษียณ -->
   <q-dialog v-model="dialogLeave" persistent>
@@ -583,8 +645,10 @@ import { ref, onMounted } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+import { useQuasar, QForm } from "quasar";
 import EducationVue from "@/modules/04_registry/components/Education.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
 import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
@@ -612,6 +676,9 @@ import config from "@/app.config";
 const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
+const reasonDeath = ref("");
+const deathCertificateNo = ref("");
+const placeDeathCertificate = ref("");
 const mixin = useCounterMixin();
 const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
 const route = useRoute();
@@ -620,12 +687,7 @@ const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
 const fullname = ref<string>("");
 const position = ref<string>("นักจัดการงานทั่วไป");
-const pdfSrc = ref<string>("");
+const dateDeath = ref<Date>(new Date());
-const pdfCurrentPage = ref<number>();
-const pdfTotalPage = ref<number>();
-const pdfSrcShort = ref<string>("");
-const pdfCurrentPageShort = ref<number>();
-const pdfTotalPageShort = ref<number>();
 const dialog = ref<boolean>(false);
 const dialogShort = ref<boolean>(false);
 const dialogLeave = ref<boolean>(false);
@@ -636,6 +698,11 @@ const statusEdit = ref<boolean>(false);
 const activeImage = ref<any | null>(null);
 const filePassaway = ref(null);
 const images = ref<any>([]);
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const profileId = ref<string>(route.params.id.toString());
 const profileType = ref<string>("");
 const employeeClass = ref<string>("temp");
@@ -922,6 +989,99 @@ const clickKp7 = async () => {
   //     });
 };
 
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value!.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .put(config.API.getPositionMasterId(positionMasterId.value), {
+  //       positionMasterId: positionMasterId.value,
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       edit.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  //   modal.value = false;
+  //   loaderPage(true);
+  //   await http
+  //     .post(config.API.getPositionMaster, {
+  //       positionTypeId: positionTypeId.value,
+  //       positionLineId: positionLineId.value,
+  //       positionPathId: positionPathId.value,
+  //       positionPathSideId: positionPathSideId.value,
+  //       positionExecutiveId: positionExecutiveId.value,
+  //       positionExecutiveSideId: positionExecutiveSideId.value,
+  //       positionLevelId: positionLevelId.value,
+  //       isDirector: isDirector.value,
+  //       positionStatusId: positionStatusId.value,
+  //       qualification: qualification.value,
+  //       positionCondition: positionCondition.value,
+  //       positionMasterUserNote: positionMasterUserNote.value,
+  //     })
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลร่างสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       statusCode.value = e.response.data.status;
+  //     })
+  //     .finally(async () => {
+  //       modal.value = false;
+  //       await fetchData();
+  //     });
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
 const downloadFilePDF = async (res: string, fileName: string) => {
   const link = document.createElement("a");
   //   link.href = window.URL.createObjectURL(new Blob([res]));