ดูข้อมูลในทะเบียนประวัติ ปรับ UI

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -15,6 +15,7 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 
 const $q = useQuasar();
@@ -24,6 +25,8 @@ const channelOptions = ref<DataOption[]>([]);
 const mixin = useCounterMixin();
 const mainStore = useDisciplineMainStore();
 const complainstStore = useComplainstDataStore();
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
 
 /**ชั่งฟังเพิ่มข้อมูล ลง ตาราง */
 const modal = ref<boolean>(false);
@@ -159,7 +162,7 @@ function validateForm() {
     }
   }
   if (hasError.every((result) => result === true)) {
-    countNum.value = 1
+    countNum.value = 1;
     onSubmit();
   } else {
     console.log("ไม่ผ่าน ");
@@ -247,7 +250,7 @@ watch(props.data, async () => {
       formData.status = props.data.status;
       formData.result = props.data.result;
       formData.persons = mainStore.rowsAdd;
-    }else if (countNum.value === 2){
+    } else if (countNum.value === 2) {
       fileList.value = props.data.disciplineComplaintDocs;
     }
   }
@@ -273,7 +276,7 @@ function upLoadFileDoc() {
     .put(config.API.complaintFileUpload(formData.id), Data)
     .then((res) => {
       success($q, "อัพโหลดไฟล์สำเร็จ");
-      countNum.value = 2
+      countNum.value = 2;
       props.getData();
     })
     .catch((e) => {
@@ -339,6 +342,15 @@ function inputEdit(val: boolean) {
   };
 }
 
+function onclickViewinfo(id: string) {
+  modalPersonal.value = true;
+  personId.value = id;
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
 onMounted(() => {
   mainStore.rowsAdd = [];
   getListChannel();
@@ -521,15 +533,16 @@ onMounted(() => {
                         <template v-slot:body="props">
                           <q-tr :props="props" class="cursor-pointer">
                             <td>
-                              <router-link
-                                target="_blank"
-                                :to="`/registry/${props.row.personId}`"
-                                ><q-icon name="info" color="info" size="sm"
-                                  ><q-tooltip
-                                    >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
-                                  >
-                                </q-icon></router-link
+                              <q-btn
+                                dense
+                                flat
+                                round
+                                color="info"
+                                icon="info"
+                                @click="onclickViewinfo(props.row.personId)"
                               >
+                                <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                              </q-btn>
                             </td>
                             <q-td
                               v-for="col in props.cols"
@@ -979,6 +992,12 @@ onMounted(() => {
     :selected-data="mainStore.rowsAdd"
     @returnData="handleSave"
   />
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
 </template>
 
 <style scoped>