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

src/modules/11_discipline/components/2_InvestigateFacts/Form.vue

@@ -14,6 +14,7 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
 import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
 import DialogDuty from "@/modules/11_discipline/components/DialogDuty.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 
 import type {
   FormData,
@@ -24,6 +25,9 @@ import type { ArrayPersonAdd } from "@/modules/11_discipline/interface/response/
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+const modalPersonal = ref<boolean>(false);
+const personId = ref<string>("");
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -617,6 +621,15 @@ async function saveDuty(id: string, duty: string, resolution: string) {
     });
 }
 
+function onclickViewinfo(id: string) {
+  modalPersonal.value = true;
+  personId.value = id;
+}
+
+function updatemodalPersonal(modal: boolean) {
+  modalPersonal.value = modal;
+}
+
 onMounted(async () => {
   mainStore.rowsAdd = [];
   getOc();
@@ -771,15 +784,16 @@ onMounted(async () => {
                         <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"
@@ -1564,6 +1578,13 @@ onMounted(async () => {
     :checked-val="false"
     :fetch-data="fetchData"
   />
+
+  <PopupPersonal
+    :modal="modalPersonal"
+    :id="personId"
+    @update:modal="updatemodalPersonal"
+  />
+  
 </template>
 
 <style scope>