ทะเบียนประวัติ: ประวัติเปลี่ยนชื่อ ดึงข้อมูลมาใส่input+readonly

src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue

@@ -24,20 +24,19 @@ const {
   success,
   dialogConfirm,
   messageError,
-  typeChangeName,
   showLoader,
   hideLoader,
   dialogRemove,
 } = mixin;
 
-const { calculateAge, fetchPerson } = store;
+const { fetchPerson } = store;
 const profileId = ref<string>(route.params.id.toString());
 const editId = ref<string>("");
 const dialog = ref<boolean>(false);
 const dialogStatus = ref<string>("create");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
-const fileName = ref<string>("");
+
 const modalHistory = ref<boolean>(false);
 const rowsHistory = ref<RequestItemsObject[]>([]);
 const changeNameData = reactive<any>({
@@ -50,20 +49,23 @@ const changeNameData = reactive<any>({
   documentId: "",
 });
 
+const profileInfo = ref<any>([]);
+
 const statusOption = ref([
   "เปลี่ยนคำนำหน้าชื่อ",
   "เปลี่ยนชื่อ",
   "เปลี่ยนนามสกุล",
   "เปลี่ยนชื่อ-นามสกุล",
+  "เปลี่ยนคำนำหน้าชื่อ และชื่อ",
   "เปลี่ยนคำนำหน้าชื่อ และนามสกุล",
   "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
 ]);
-const prefixFilter = ref([]);
 const statusOptionFilter = ref([
   "เปลี่ยนคำนำหน้าชื่อ",
   "เปลี่ยนชื่อ",
   "เปลี่ยนนามสกุล",
   "เปลี่ยนชื่อ-นามสกุล",
+  "เปลี่ยนคำนำหน้าชื่อ และชื่อ",
   "เปลี่ยนคำนำหน้าชื่อ และนามสกุล",
   "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
 ]);
@@ -258,13 +260,13 @@ function closeDialog() {
   dialog.value = false;
 }
 
-function clearForm() {
+// function clearForm() {
-  changeNameData.status = "";
+//   changeNameData.status = "";
-  changeNameData.prefix = "";
+//   changeNameData.prefix = "";
-  changeNameData.firstName = "";
+//   changeNameData.firstName = "";
-  changeNameData.lastName = "";
+//   changeNameData.lastName = "";
-  alertUpload.value = false;
+//   alertUpload.value = false;
-}
+// }
 
 async function onSubmit() {
   if (!!fileUpload.value) {
@@ -334,6 +336,21 @@ async function uploadFileURL(uploadUrl: string, file: any) {
     });
 }
 
+async function fetchDataPersonal() {
+  showLoader();
+  await http
+    .get(config.API.registryNewByProfileId(profileId.value))
+    .then((res) => {
+      profileInfo.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 async function fetchProfile(id: string) {
   showLoader();
   await http
@@ -396,24 +413,23 @@ function editData(idData: string) {
 }
 
 function deleteData(idData: string) {
-  // dialogRemove($q, () =>
+  dialogRemove($q, () =>
-  http
+    http
-    .delete(config.API.profileNewChangeNameByChangeNameId(idData))
+      .delete(config.API.profileNewChangeNameByChangeNameId(idData))
-    .then(() => {
+      .then(() => {
-      fetchData(profileId.value);
+        fetchData(profileId.value);
-      success($q, "ลบข้อมูลสำเร็จ");
+        success($q, "ลบข้อมูลสำเร็จ");
-    })
+      })
-    .catch((err) => {
+      .catch((err) => {
-      messageError($q, err);
+        messageError($q, err);
-    })
+      })
-    .finally(() => {
+      .finally(() => {
-      hideLoader();
+        hideLoader();
-    });
+      })
-  // );
+  );
 }
 
 function deleteFileData(idData: string) {
-  // dialogRemove($q, () =>
   http
     .delete(
       config.API.subFile(
@@ -432,7 +448,6 @@ function deleteFileData(idData: string) {
     .finally(() => {
       hideLoader();
     });
-  // );
 }
 
 async function fetchHistoryData(id: string) {
@@ -487,9 +502,9 @@ onMounted(async () => {
   ) {
     await fetchPerson();
   }
-  prefixFilter.value = store.Ops.prefixOps;
 
   fetchData(profileId.value);
+  fetchDataPersonal();
 });
 function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
@@ -502,7 +517,7 @@ function filterSelector(val: string, update: Function, refData: string) {
       break;
     case "prefixOps":
       update(() => {
-        store.Ops.prefixOps = prefixFilter.value.filter(
+        store.Ops.prefixOps = store.OpsFilter.prefixOps.filter(
           (v: any) => v.name.indexOf(val) > -1
         );
       });
@@ -523,9 +538,12 @@ function filterSelector(val: string, update: Function, refData: string) {
       size="16px"
       @click="
         () => {
+          changeNameData.prefix = profileInfo.prefix;
+          changeNameData.firstName = profileInfo.firstName;
+          changeNameData.lastName = profileInfo.lastName;
+          changeNameData.status = '';
           dialogStatus = 'create';
           dialog = true;
-          clearForm();
         }
       "
     >
@@ -669,7 +687,7 @@ function filterSelector(val: string, update: Function, refData: string) {
         </q-td>
         <q-td auto-width>
           <q-btn
-            v-if="props.row.file != null"
+            v-if="props.row.file !== null"
             color="green"
             flat
             dense
@@ -688,7 +706,7 @@ function filterSelector(val: string, update: Function, refData: string) {
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
             :close="closeDialog"
           />
         </q-card-section>
@@ -717,6 +735,15 @@ function filterSelector(val: string, update: Function, refData: string) {
           <div class="row q-gutter-md q-mb-md">
             <div class="col">
               <q-select
+                :readonly="
+                  !changeNameData.status ||
+                  (changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ' &&
+                    changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
+                    changeNameData.status !==
+                      'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
+                    changeNameData.status !==
+                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                "
                 v-model="changeNameData.prefix"
                 :options="store.Ops.prefixOps"
                 label="คำนำหน้าชื่อ"
@@ -739,6 +766,14 @@ function filterSelector(val: string, update: Function, refData: string) {
             </div>
             <div class="col">
               <q-input
+                :readonly="
+                  !changeNameData.status ||
+                  (changeNameData.status !== 'เปลี่ยนชื่อ' &&
+                    changeNameData.status !== 'เปลี่ยนคำนำหน้าชื่อ และชื่อ' &&
+                    changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
+                    changeNameData.status !==
+                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                "
                 outlined
                 v-model="changeNameData.firstName"
                 label="ชื่อ"
@@ -750,6 +785,15 @@ function filterSelector(val: string, update: Function, refData: string) {
             </div>
             <div class="col">
               <q-input
+                :readonly="
+                  !changeNameData.status ||
+                  (changeNameData.status !== 'เปลี่ยนนามสกุล' &&
+                    changeNameData.status !== 'เปลี่ยนชื่อ-นามสกุล' &&
+                    changeNameData.status !==
+                      'เปลี่ยนคำนำหน้าชื่อ และนามสกุล' &&
+                    changeNameData.status !==
+                      'เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล')
+                "
                 outlined
                 v-model="changeNameData.lastName"
                 label="นามสกุล"