เเก้ UIรายการสืบสวนข้อเท็จจริง

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

@@ -41,13 +41,13 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-
 const clickAdd = () => {
   router.push(`/discipline/investigatefacts/add`);
 };
-onMounted(async() => {
- await fecthList([
+onMounted(async () => {
+  await fecthList([
     {
+      id: "001",
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
       fault: "1",
@@ -55,6 +55,7 @@ onMounted(async() => {
       active: "1",
     },
     {
+      id: "002",
       subject: "ทุจริตในหน้าที่",
       interrogated: "นายนครชัย วันดี",
       fault: "1",
@@ -62,6 +63,7 @@ onMounted(async() => {
       active: "1",
     },
     {
+      id: "003",
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "นายกัณฐิมา  กาฬสินธ์ุ",
       fault: "0",
@@ -69,6 +71,7 @@ onMounted(async() => {
       active: "1",
     },
     {
+      id: "004",
       subject: "พูดจาไม่สุภาพ",
       interrogated: "นายปิยรมย์ ศิริธาราฟ",
       fault: "0",
@@ -77,6 +80,9 @@ onMounted(async() => {
     },
   ]);
 });
+function editPage(id: string) {
+  router.push(`/discipline/investigatefacts/${id}`);
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -86,7 +92,7 @@ onMounted(async() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
-        for="#addInvestigatefacts"
+          for="#addInvestigatefacts"
           @click="clickAdd()"
           size="12px"
           flat
@@ -100,7 +106,7 @@ onMounted(async() => {
       <q-space />
 
       <q-input
-      for="#search"
+        for="#search"
         class="col-xs-12 col-sm-3 col-md-2"
         standout
         dense
@@ -122,7 +128,7 @@ onMounted(async() => {
       </q-input>
 
       <q-select
-      for="#select"
+        for="#select"
         v-model="dataInvestigate.visibleColumns"
         multiple
         outlined
@@ -170,7 +176,12 @@ onMounted(async() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="editPage(props.row.id)"
+            >
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
@@ -178,7 +189,11 @@ onMounted(async() => {
                 {{ col.value }}
               </div>
             </q-td>
-            <q-td auto-width style="font-size: 14px; width: 10%;">
+            <q-td
+              auto-width
+              style="font-size: 14px; width: 10%"
+              @click="editPage(props.row.id)"
+            >
               {{ props.row.active }}
             </q-td>
             <q-td auto-width>
@@ -187,7 +202,7 @@ onMounted(async() => {
                   v-if="props.row.status === 'ยุติเรื่อง'"
                   for="#cancel"
                   dense
-                  unelevated 
+                  unelevated
                   color="primary"
                   class="q-px-sm"
                   >ยกเลิกยุติเรื่อง</q-btn