ขออัปเดตข้อมูลจากกรมการปกครอง

src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue

@@ -17,12 +17,15 @@ import type { DateRequest } from "@/modules/04_registryPerson/interface/response
 
 /** importComponents*/
 import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/Dialog01_EditStatus.vue";
+import DialogUpdate from "@/modules/04_registryPerson/components/Dialog/DialogUpdate.vue";
 
 const $q = useQuasar();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
 //Table
+const idCard = ref<string>("");
+const profileId = ref<string>("");
 const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
 const page = ref<number>(1); //หน้า
 const pageSize = ref<number>(10); //จำนวนต่อหน้า
@@ -113,6 +116,7 @@ const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
 const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
 const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
+const modalUpdate = ref<boolean>(false); //อัปเดตข้อมูลจากกรมการปกครอง
 const requestId = ref<string>(""); //id รายการแก้ไข
 
 /** function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ*/
@@ -172,9 +176,15 @@ function filterOption(val: string, update: Function) {
  * funciton  แก่ไขคำร้อง
  * @param id รายการคำร้อง
  */
-function onclickEdit(id: string) {
-  modalStatus.value = true;
-  requestId.value = id;
+function onclickEdit(data: any) {
+  requestId.value = data.id;
+  if (data.topic == "ขออัปเดตข้อมูลจากกรมการปกครอง") {
+    modalUpdate.value = true;
+    idCard.value = data.idcard as string;
+    profileId.value = data.profileId;
+  } else {
+    modalStatus.value = true;
+  }
 }
 
 /**
@@ -336,14 +346,26 @@ onMounted(() => {
           <q-tr :props="props">
             <q-td auto-width>
               <q-btn
-                :icon="props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'mdi-sync-circle':'edit'"
+                :icon="
+                  props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง'
+                    ? 'mdi-sync-circle'
+                    : 'edit'
+                "
                 round
                 dense
                 flat
-                :color="props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'info':'edit'"
-                @click.pervent="onclickEdit(props.row.id)"
+                :color="
+                  props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง'
+                    ? 'info'
+                    : 'edit'
+                "
+                @click.pervent="onclickEdit(props.row)"
               >
-                <q-tooltip>{{props.row.topic == 'ขออัปเดตข้อมูลจากกรมการปกครอง' ? 'ขออัปเดตข้อมูลจากกรมการปกครอง':'แก้ไขสถานะคำร้อง'}}</q-tooltip>
+                <q-tooltip>{{
+                  props.row.topic == "ขออัปเดตข้อมูลจากกรมการปกครอง"
+                    ? "ขออัปเดตข้อมูลจากกรมการปกครอง"
+                    : "แก้ไขสถานะคำร้อง"
+                }}</q-tooltip>
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -388,6 +410,14 @@ onMounted(() => {
     :fetch-data="fetchListRequset"
     :request-id="requestId"
   />
+
+  <DialogUpdate
+    v-model:modal="modalUpdate"
+    v-model:id-card="idCard"
+    v-model:profile-id="profileId"
+    :fetch-data="fetchListRequset"
+    :request-id=requestId
+  />
 </template>
 
 <style scoped></style>