ปรับหน้ารายละเอียดของผู้สอบผ่าน ให้เป็นข้อมูลหลักจากระบบใหม่

2024-05-20 10:49:45 +07:00 · 2024-05-20 10:49:45 +07:00 · 7afafb68e5
commit 7afafb68e5
parent 30befa38c2
7 changed files with 204 additions and 173 deletions
--- a/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Address.vue
@ -140,6 +140,7 @@ const refreshData = async () => {
      async () => {
        emit("update:statusEdit", false);
        await props.fetch("Address");
+        fetchProvince()
        edit.value = false;
        onEdit.value = false;
      },
@ -210,6 +211,7 @@ const editData = async () => {

 // เลือกข้อมูลจังหวัด
 const selectProvince = async (e: string | null, name: string) => {
+  onEdit.value = true;
  if (e != null) {
    if (name == "1") {
      registAddress.subDistrictId = "";
@ -227,6 +229,7 @@ const selectProvince = async (e: string | null, name: string) => {

 // เลือกข้อมูลอำเภอ
 const selectDistrict = async (e: string | null, name: string) => {
+  onEdit.value = true;
  if (e != null) {
    if (name == "1") {
      registAddress.subDistrictId = "";
@ -242,6 +245,7 @@ const selectDistrict = async (e: string | null, name: string) => {

 // เลือกข้อมูลตำบล
 const selectSubDistrict = (e: string | null, name: string) => {
+  onEdit.value = true;
  if (e != null) {
    if (name == "1") {
      const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
@ -329,14 +333,12 @@ const fetchProvince = async () => {
      messageError($q, e);
    })
    .finally(() => {
-      hideLoader();
    });
 };

 // ดึงข้อมูลอำเภอ
 const fetchDistrict = async (id: string | null, position: string) => {
  if (id != null && id != "") {
-    showLoader();
    await http
      .get(config.API.orgProvince + `/${id}`)
      .then(async (res) => {
@ -374,7 +376,6 @@ const fetchDistrict = async (id: string | null, position: string) => {
        messageError($q, e);
      })
      .finally(() => {
-        hideLoader();
      });
  }
 };
@ -382,7 +383,6 @@ const fetchDistrict = async (id: string | null, position: string) => {
 // ดึงข้อมูลตำบล
 const fetchSubDistrict = async (id: string | null, position: string) => {
  if (id != null && id != "") {
-    showLoader();
    await http
      .get(config.API.orgDistrict + `/${id}`)
      .then(async (res) => {
@ -447,6 +447,10 @@ const getClass = (val: boolean) => {
    "full-width cursor-pointer": !val,
  };
 };
+
+function checkEdit() {
+  onEdit.value = true;
+}
 </script>

 <template>
@ -477,6 +481,7 @@ const getClass = (val: boolean) => {
            v-model="addressData.registAddress"
            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
@ -583,6 +588,7 @@ const getClass = (val: boolean) => {
            label="ใช่"
            dense
            :disable="!edit"
+            @update:modelValue="checkEdit"
          />
          <q-radio
            v-model="addressData.registSame"
@ -591,6 +597,7 @@ const getClass = (val: boolean) => {
            val="0"
            label="ไม่"
            dense
+            @update:modelValue="checkEdit"
            :disable="!edit"
          />
        </div>
@ -603,6 +610,7 @@ const getClass = (val: boolean) => {
            dense
            lazy-rules
            type="textarea"
+            @update:modelValue="checkEdit"
            autogrow
            :readonly="!edit"
            :borderless="!edit"
--- a/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Certicate.vue
@ -349,7 +349,7 @@ const saveData = async () => {
      messageError($q, e);
    })
    .finally(async () => {
-      await props.fetch();
+      await props.fetch("Certificate");
      rows.value = props.data;
    });
 };
@ -376,7 +376,7 @@ const editData = async () => {
      messageError($q, e);
    })
    .finally(async () => {
-      await props.fetch();
+      await props.fetch("Certificate");
      rows.value = props.data;
    });
 };
@ -385,38 +385,27 @@ const editData = async () => {
 * ลบลบข้อมูล
 */
 const clickDelete = async () => {
-  $q.dialog({
-    title: `ลบข้อมูล`,
-    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  })
-    .onOk(async () => {
-      showLoader();
-      await http
-        .delete(
-          config.API.placementCertDetailId(
-            route.params.personalId.toString(),
-            id.value
-          )
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .delete(
+        config.API.placementCertDetailId(
+          route.params.personalId.toString(),
+          id.value
        )
-        .then((res) => {
-          success($q, "ลบข้อมูลสำเร็จ");
-          modal.value = false;
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await props.fetch();
-          rows.value = props.data;
-        });
-    })
-    .onCancel(async () => {
-      await props.fetch();
-      rows.value = props.data;
-    });
+      )
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await props.fetch("Certificate");
+        rows.value = props.data;
+      });
+  });
 };

 /**
@ -424,17 +413,16 @@ const clickDelete = async () => {
 */
 const clickClose = async () => {
  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      modal.value = false;
-      next.value = false;
-      previous.value = false;
-    });
+    dialogConfirm(
+      $q,
+      () => {
+        modal.value = false;
+        next.value = false;
+        previous.value = false;
+      },
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่"
+    );
  } else {
    modal.value = false;
    next.value = false;
@ -479,19 +467,18 @@ const addData = () => {
 * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
 */
 const clickCancel = async () => {
-  myForm.value.resetValidation()
+  myForm.value.resetValidation();
  if (editRow.value == true) {
-    $q.dialog({
-      title: `ข้อมูลมีการแก้ไข`,
-      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
-      cancel: "ยกเลิก",
-      ok: "ยืนยัน",
-      persistent: true,
-    }).onOk(async () => {
-      edit.value = false;
-      await checkRowPage();
-      await getData();
-    });
+    dialogConfirm(
+      $q,
+      async () => {
+        edit.value = false;
+        await checkRowPage();
+        await getData();
+      },
+      "ข้อมูลมีการแก้ไข",
+      "ยืนยันยกเลิกการแก้ไขใช่หรือไม่"
+    );
  } else {
    edit.value = false;
    await checkRowPage();
@ -638,9 +625,7 @@ const getClass = (val: boolean) => {
        />
        <q-separator />
        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
+          <div class="row col-12 items-top q-col-gutter-x-xs q-col-gutter-y-xs">
            <div class="col-xs-6 col-sm-6 col-md-6">
              <q-input
                :class="getClass(edit)"
--- a/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Family.vue
@ -56,11 +56,13 @@ const onEdit = ref<boolean>(false);
 const myform = ref<QForm | null>(null);
 const familyData = ref<Family>(props.data);

-onMounted(async () => {
-  emit("update:statusEdit", false);
-});

-const filterSelector = (val: any, update: Function, refData: string) => {
+
+function checkEdit() {
+  onEdit.value = true;
+}
+
+function filterSelector(val: any, update: Function, refData: string){
  update(() => {
    props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
      (v: DataOption) => v.name.indexOf(val) > -1
@ -68,7 +70,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  });
 };

-const refreshData = async () => {
+async function refreshData(){
  if (myform.value != null) {
    myform.value.reset();
  }
@ -89,7 +91,7 @@ const refreshData = async () => {
  }
 };

-const editData = async () => {
+async function editData(){
  dialogConfirm($q, async () => {
    showLoader();
    //   const body: ResponseObject = {
@ -148,7 +150,7 @@ const editData = async () => {
  });
 };

-const saveData = async () => {
+async function saveData(){
  await myform.value?.validate().then(async (success: boolean) => {
    if (success) {
      await editData();
@ -157,7 +159,8 @@ const saveData = async () => {
  });
 };

-const selectRadio = (e: boolean, i: any) => {
+function selectRadio(e: boolean, i: any){
+  onEdit.value = true;
  if (e) {
    familyData.value.marryPrefixId = "";
    familyData.value.marryFirstName = "";
@ -167,10 +170,9 @@ const selectRadio = (e: boolean, i: any) => {
  }
 };

-const changeBtn = async () => {
+async function changeBtn(){
  if (edit.value == true) {
    if (props.statusEdit === true) {
-      edit.value = false;
      props.notiNoEdit();
    } else {
      emit("update:statusEdit", true);
@ -180,12 +182,16 @@ const changeBtn = async () => {
  }
 };

-const getClass = (val: boolean) => {
+function getClass(val: boolean){
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
 };
+
+onMounted(async () => {
+  emit("update:statusEdit", false);
+});
 </script>

 <template>
@ -206,6 +212,7 @@ const getClass = (val: boolean) => {
        <div class="col-xs-12 col-sm-3 col-md-3">
          <selector
            :hide-dropdown-icon="!edit"
+            @update:modelValue="checkEdit"
            hide-bottom-space
            :class="getClass(edit)"
            :readonly="!edit"
@ -241,6 +248,7 @@ const getClass = (val: boolean) => {
            v-model="familyData.fatherFirstName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
@ -255,6 +263,7 @@ const getClass = (val: boolean) => {
            v-model="familyData.fatherLastName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3">
@ -268,6 +277,7 @@ const getClass = (val: boolean) => {
            :borderless="!edit"
            v-model="familyData.fatherOccupation"
            :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
          />
        </div>

@ -292,6 +302,7 @@ const getClass = (val: boolean) => {
            option-value="id"
            :label="`${'คำนำหน้า'}`"
            use-input
+            @update:modelValue="checkEdit"
            input-debounce="0"
            @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
@ -311,6 +322,7 @@ const getClass = (val: boolean) => {
            v-model="familyData.motherFirstName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
@ -325,6 +337,7 @@ const getClass = (val: boolean) => {
            v-model="familyData.motherLastName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-xs-12 col-sm-3 col-md-3">
@ -338,6 +351,7 @@ const getClass = (val: boolean) => {
            :borderless="!edit"
            v-model="familyData.motherOccupation"
            :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
@ -387,6 +401,7 @@ const getClass = (val: boolean) => {
            option-value="id"
            :label="`${'คำนำหน้า'}`"
            use-input
+            @update:modelValue="checkEdit"
            input-debounce="0"
            @filter="(inputValue:any,
                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
@ -406,6 +421,7 @@ const getClass = (val: boolean) => {
            v-model="familyData.marryFirstName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
            :label="`${'ชื่อ'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
@ -420,6 +436,7 @@ const getClass = (val: boolean) => {
            v-model="familyData.marryLastName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
            :label="`${'นามสกุล'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
        <!-- <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.couple == '1'">
@ -450,6 +467,7 @@ const getClass = (val: boolean) => {
            :borderless="!edit"
            v-model="familyData.marryOccupation"
            :label="`${'อาชีพ'}`"
+            @update:modelValue="checkEdit"
          />
        </div>
      </div>
--- a/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Information.vue
@ -19,6 +19,7 @@ import { useProfileDataStore } from "@/modules/05_placement/store";
 import type { QForm } from "quasar";
 import type { PropType } from "vue";

+const onEdit = ref<boolean>(false);
 const props = defineProps({
  statusEdit: {
    type: Boolean,
@ -251,7 +252,7 @@ const getClass = (val: boolean) => {
  };
 };

-const onEdit = ref<boolean>(false);
+
 function checkEdit() {
  onEdit.value = true;
 }