From 34b229e817ac9f30b831594ea6d1ac991d65280c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 22 Nov 2023 11:26:10 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20tabMenu=20=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2_InvestigateFacts/EditPage.vue           |  31 +-
 .../components/2_InvestigateFacts/Form.vue    |  26 +-
 .../3_InvestigateDisciplinary/EditPage.vue    |  50 +++-
 .../3_InvestigateDisciplinary/Form.vue        |  30 +-
 .../3_InvestigateDisciplinary/MainPage.vue    |  26 +-
 .../store/InvestigateDisStore.ts              |   4 +-
 .../store/InvestigateFactStore.ts             | 279 +++++++++---------
 7 files changed, 288 insertions(+), 158 deletions(-)

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 7ae23e726..3e5eee9da 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
-import Form from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue";
+import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
+import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
 import type { FormData } from "@/modules/11_discipline/interface/request/investigate";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useInvestigateFactStore();
 const { dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
@@ -149,7 +152,31 @@ onMounted(() => {
         />
       </div>
     </div>
+    <q-card flat bordered class="col-12">
+      <q-tabs
+        v-model="store.tabMenu"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="complaints" label="เรื่องร้องเรียน" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
+      </q-tabs>
+      <q-separator />
+      <q-tab-panels v-model="store.tabMenu" animated>
+        <q-tab-panel name="complaints">
+          <FormComplaints :on-submit="onSubmit" />
+        </q-tab-panel>
+        <q-tab-panel name="investigatefacts">
+          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
 
-    <Form :on-submit="onSubmit" :data="data" />
+    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index ae1fb1ade..378e368c1 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -132,6 +132,29 @@ function calEndDate(val: string) {
   formData.dateEnd = new Date(dateNew.setDate(date.getDate() + Number(val)));
 }
 
+async function fetchDataDetail() {
+  if (props.data !== null) {
+    // isUpdate.value = true;
+    formData.complaint = props.data.complaint;
+    formData.complaintdetail = props.data.complaintdetail;
+    formData.detail = props.data.detail;
+    formData.fault = props.data.fault;
+    formData.other = props.data.other;
+    formData.evidenceFiles = props.data.evidenceFiles;
+    formData.fileComplaint = props.data.fileComplaint;
+    formData.clickTime = props.data.clickTime;
+    formData.date = props.data.date;
+    formData.dateEnd = props.data.dateEnd;
+    formData.investigation = props.data.investigation;
+    formData.daysExtend = props.data.daysExtend;
+    formData.statusResult = props.data.results;
+    formData.causeText = props.data.results;
+  }
+}
+onMounted(async () => {
+  await fetchDataDetail();
+});
+
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -293,7 +316,6 @@ watch(props.data, async () => {
             <div class="q-pa-sm">
               <div class="q-col-gutter-sm row">
                 <div class="col-3" v-if="!formData.clickTime">
-
                   <datepicker
                     menu-class-name="modalfix"
                     :readonly="isUpdate"
@@ -372,7 +394,7 @@ watch(props.data, async () => {
                     </template>
                   </q-select>
                 </div>
-                
+
                 <div class="col-3">
                   <datepicker
                     menu-class-name="modalfix"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 969fbc0aa..8c7a82196 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
-import Form from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue";
+import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
+import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
+import FormDisciplinary from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue"; // สอบสวนความผิดทางวินัย
 import type { FormData } from "@/modules/11_discipline/interface/request/disciplinary";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useQuasar } from "quasar";
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useInvestigateDisStore();
 const { dialogConfirm } = mixin;
 const router = useRouter();
 const route = useRoute();
@@ -33,7 +37,7 @@ const data = reactive<FormData>({
   filesRecordAccuser: null,
   filesWitnesses: null,
   filesEtc: null,
-  complaintStatus: 'NEW'
+  complaintStatus: "NEW",
 });
 
 /** จำลองข้อมูลจาก api */
@@ -114,8 +118,8 @@ function confirmCancelInvestigate() {
 }
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
-onMounted(() => {
-  fetchData();
+onMounted(async () => {
+  await fetchData();
 });
 </script>
 <template>
@@ -134,7 +138,12 @@ onMounted(() => {
       <div class="q-ma-none">แก้ไขการสอบสวนความผิดทางวินัย {{ id }}#id</div>
       <q-space />
       <div class="q-gutter-x-sm">
-        <q-btn  v-if="data.complaintStatus === 'NEW'" label="ส่งไปออกคำสั่ง" color="public" @click="sentIssue" />
+        <q-btn
+          v-if="data.complaintStatus === 'NEW'"
+          label="ส่งไปออกคำสั่ง"
+          color="public"
+          @click="sentIssue"
+        />
         <q-btn
           v-if="data.complaintStatus === 'NEW'"
           label="ยุติเรื่อง"
@@ -147,9 +156,36 @@ onMounted(() => {
           color="red-7"
           @click="cancelInvestigate"
         />
-
       </div>
     </div>
-    <Form :on-submit="onSubmit" :data="data" />
+    <q-card flat bordered class="col-12">
+      <q-tabs
+        v-model="store.tabMenu"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="complaints" label="เรื่องร้องเรียน" />
+        <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
+        <q-tab name="disciplinary" label="สอบสวนความผิดทางวินัย" />
+      </q-tabs>
+      <q-separator />
+      <q-tab-panels v-model="store.tabMenu" animated>
+        <q-tab-panel name="complaints">
+          <FormComplaints :on-submit="onSubmit" />
+        </q-tab-panel>
+        <q-tab-panel name="investigatefacts">
+          <FormInvestigatefacts :on-submit="onSubmit" />
+        </q-tab-panel>
+        <q-tab-panel name="disciplinary">
+          <FormDisciplinary :on-submit="onSubmit" :data="data" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+    <!-- <Form :on-submit="onSubmit" :data="data" /> -->
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index eab23641e..45b397858 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -118,10 +118,10 @@ const objectdisciplinary: disciplinaryRef = {
 };
 
 /** เปิด dialog */
-function popup(){
+function popup() {
   modal.value = true;
   filterKeyword2.value = "";
-};
+}
 
 /** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function validateForm() {
@@ -179,6 +179,29 @@ async function deleteData(id: string) {
   console.log("delete");
 }
 
+async function fetvhDatadetail() {
+  formData.complaint = props.data.complaint;
+  formData.dateInvestigate = props.data.dateInvestigate;
+  formData.dateAllegation = props.data.dateAllegation;
+  formData.dateEvident = props.data.dateEvident;
+  formData.casefault = props.data.casefault;
+  formData.typefault = props.data.typefault;
+  formData.faultLevel = props.data.faultLevel;
+  formData.refLaw = props.data.refLaw;
+  formData.detailComplaint = props.data.detailComplaint;
+  formData.whereInvestigate = props.data.whereInvestigate;
+  formData.trueDetail = props.data.trueDetail;
+  formData.evidence = props.data.evidence;
+  formData.recordAccuser = props.data.recordAccuser;
+  formData.witnesses = props.data.witnesses;
+  formData.InvestResults = props.data.InvestResults;
+  formData.filesEvidence = props.data.filesEvidence;
+  formData.filesRecordAccuser = props.data.filesRecordAccuser;
+  formData.filesWitnesses = props.data.filesWitnesses;
+  formData.filesEtc = props.data.filesEtc;
+
+  console.log(formData);
+}
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -206,10 +229,11 @@ watch(props.data, async () => {
   formData.filesEtc = props.data.filesEtc;
 });
 
-/**เมื่อเริ่มโหลดหน้า 
+/**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
+  await fetvhDatadetail();
   await fecthDirector([
     {
       nameDirector: "นาง เกสินี เจียรสุมัย",
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 9e4779c2a..0713ddbe9 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -12,7 +12,7 @@ const router = useRouter();
 const filter = ref<string>(""); //search data table
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
-const { hideLoader } = mixin;
+const { showLoader, hideLoader } = mixin;
 const { fecthList } = dataInvestigateDis;
 
 const initialPagination = ref<Pagination>({
@@ -23,18 +23,19 @@ const initialPagination = ref<Pagination>({
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
  */
-function openEdit(id:string) {
-  console.log(id)
-  router.push(`/discipline/disciplinary/${id}`)
+function openEdit(id: string) {
+  console.log(id);
+  router.push(`/discipline/disciplinary/${id}`);
 }
 
-/**เมื่อเริ่มโหลดหน้า 
+/**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
+  showLoader();
   fecthList([
     {
-      id:'001',
+      id: "001",
       subject: "ทุจริตในหน้าที่",
       interrogated: "ศิรินภา คงน้อยี่",
       fault: "1",
@@ -45,7 +46,7 @@ onMounted(async () => {
       active: "2",
     },
     {
-      id:'002',
+      id: "002",
       subject: "ทุจริตในหน้าที่",
       interrogated: "ภัทรานุช คงน้อย",
       fault: "1",
@@ -56,7 +57,7 @@ onMounted(async () => {
       active: "0",
     },
     {
-      id:'003',
+      id: "003",
       subject: "กระทำทุจริตเงินกองทุน",
       interrogated: "ปรมาพร ศรีมี",
       fault: "2",
@@ -67,7 +68,7 @@ onMounted(async () => {
       active: "1",
     },
     {
-      id:'004',
+      id: "004",
       subject: "พูดจาไม่สุภาพ",
       interrogated: "สมรัก ใจอารีย์",
       fault: "2",
@@ -103,7 +104,12 @@ onMounted(async () => {
       >
         <template #columns="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="openEdit(props.row.id)">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="openEdit(props.row.id)"
+            >
               <div v-if="col.name == 'no'">
                 {{ props.rowIndex + 1 }}
               </div>
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index 182bd5a0d..cd93f2744 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -13,6 +13,7 @@ const { date2Thai } = mixin;
 export const useInvestigateDisStore = defineStore(
   "DisciplineInvestigateDis",
   () => {
+    const tabMenu = ref<string>("disciplinary");
     const rows = ref<investigateDisDataRowType[]>([]);
     const rows2 = ref<directorType[]>([]);
     const selected = ref<directorType[]>([]);
@@ -32,7 +33,7 @@ export const useInvestigateDisStore = defineStore(
     ]);
     async function fecthList(data: investigateDisDataRowType[]) {
       let datalist: investigateDisDataRowType[] = data.map((e: any) => ({
-        id:e.id,
+        id: e.id,
         subject: e.subject,
         interrogated: e.interrogated,
         fault: convertFault(e.fault),
@@ -273,6 +274,7 @@ export const useInvestigateDisStore = defineStore(
       },
     ]);
     return {
+      tabMenu,
       fecthList,
       rows,
       rows2,
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index e1114459f..caf1bdb87 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -1,170 +1,183 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type { investigatefactsDataRowType, DataOption, DataNumberOption } from '@/modules/11_discipline/interface/index/Main'
+import type {
+  investigatefactsDataRowType,
+  DataOption,
+  DataNumberOption,
+} from "@/modules/11_discipline/interface/index/Main";
 
 /*** store ของข้อมูลสืบสวนข้อเท็จจริง */
-export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact", () => {
-    const rows = ref<investigatefactsDataRowType[]>([])
+export const useInvestigateFactStore = defineStore(
+  "DisciplineInvestigateFact",
+  () => {
+    const tabMenu = ref<string>("investigatefacts");
+    const rows = ref<investigatefactsDataRowType[]>([]);
 
     const daysExtendOps = ref<DataNumberOption[]>([
-        { id: 15, name: "15 วัน" },
-        { id: 30, name: "30 วัน" },
-        { id: 45, name: "45 วัน" },
-        { id: 60, name: "60 วัน" },
+      { id: 15, name: "15 วัน" },
+      { id: 30, name: "30 วัน" },
+      { id: 45, name: "45 วัน" },
+      { id: 60, name: "60 วัน" },
     ]);
     const investigationOps = ref<DataOption[]>([
-        { id: "001", name: "เเต่งตั้งการสืบสวน" },
-        { id: "002", name: "สืบสวนทางลับ" },
-        { id: "003", name: "อื่นๆ" },
+      { id: "001", name: "เเต่งตั้งการสืบสวน" },
+      { id: "002", name: "สืบสวนทางลับ" },
+      { id: "003", name: "อื่นๆ" },
     ]);
     const faultOps = ref<DataOption[]>([
-        { id: "001", name: "ยังไม่ระบุ" },
-        { id: "002", name: "ไม่ร้ายเเรง" },
-        { id: "003", name: "ร้ายเเรง" },
+      { id: "001", name: "ยังไม่ระบุ" },
+      { id: "002", name: "ไม่ร้ายเเรง" },
+      { id: "003", name: "ร้ายเเรง" },
     ]);
     const statusResultOptions = ref<DataOption[]>([
-        { id: "not_specified", name: "ยังไม่ระบุ" },
-        { id: "have_cause", name: "มีมูล" },
-        { id: "no_cause", name: "ไม่มีมูล" },
+      { id: "not_specified", name: "ยังไม่ระบุ" },
+      { id: "have_cause", name: "มีมูล" },
+      { id: "no_cause", name: "ไม่มีมูล" },
     ]);
     const causeTextOptions = ref<DataOption[]>([
-        { id: "ร้ายแรง", name: "ร้ายแรง" },
-        { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
+      { id: "ร้ายแรง", name: "ร้ายแรง" },
+      { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
     ]);
 
     const daysExtendOp = ref<DataNumberOption[]>(daysExtendOps.value);
     const investigationOp = ref<DataOption[]>(investigationOps.value);
     const faultOp = ref<DataOption[]>(faultOps.value);
     const visibleColumns = ref<string[]>([
-        "no",
-        "subject",
-        "interrogated",
-        "fault",
-        "status",
+      "no",
+      "subject",
+      "interrogated",
+      "fault",
+      "status",
     ]);
 
     // หัวตาราง
     const columns = ref<QTableProps["columns"]>([
-        {
-            name: "no",
-            align: "center",
-            label: "ลำดับ",
-            sortable: false,
-            field: "no",
-            headerStyle: "font-size: 14px",
-            style: "font-size: 14px",
-        },
-        {
-            name: "subject",
-            align: "left",
-            label: "เรื่อง",
-            sortable: true,
-            field: "subject",
-            headerStyle: "font-size: 14px",
-            style: "font-size: 14px",
-        },
-        {
-            name: "interrogated",
-            align: "left",
-            label: "ผู้ถูกสอบสวน",
-            sortable: true,
-            field: "interrogated",
-            headerStyle: "font-size: 14px",
-            style: "font-size: 14px",
-            sort: (a: string, b: string) =>
-                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-        },
-        {
-            name: "fault",
-            align: "left",
-            label: "ลักษณะความผิด",
-            sortable: true,
-            field: "fault",
-            headerStyle: "font-size: 14px",
-            style: "font-size: 14px",
-            sort: (a: string, b: string) =>
-                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-        },
-        {
-            name: "status",
-            align: "left",
-            label: "สถานะ",
-            sortable: false,
-            field: "status",
-            headerStyle: "font-size: 14px",
-            style: "font-size: 14px",
-        },
+      {
+        name: "no",
+        align: "center",
+        label: "ลำดับ",
+        sortable: false,
+        field: "no",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "subject",
+        align: "left",
+        label: "เรื่อง",
+        sortable: true,
+        field: "subject",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "interrogated",
+        align: "left",
+        label: "ผู้ถูกสอบสวน",
+        sortable: true,
+        field: "interrogated",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "fault",
+        align: "left",
+        label: "ลักษณะความผิด",
+        sortable: true,
+        field: "fault",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+        sort: (a: string, b: string) =>
+          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      },
+      {
+        name: "status",
+        align: "left",
+        label: "สถานะ",
+        sortable: false,
+        field: "status",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
     ]);
-    function filterFnOptionsType(val: string | number, update: any, type: string) {
-        update(() => {
-            if (type === "faultOp") {
-                faultOp.value = faultOps.value.filter(
-                    (v: any) => v.name.toLowerCase().indexOf(val) > -1
-                );
-
-            } else if (type === "investigationOp") {
-                investigationOp.value = investigationOps.value.filter(
-                    (v: any) => v.name.toLowerCase().indexOf(val) > -1
-                );
-            } else if (type === "daysExtendOp") {
-                daysExtendOp.value = daysExtendOps.value.filter(
-                    (v: any) => v.id.indexOf(val) > -1
-                );
-            }
-
-        });
+    function filterFnOptionsType(
+      val: string | number,
+      update: any,
+      type: string
+    ) {
+      update(() => {
+        if (type === "faultOp") {
+          faultOp.value = faultOps.value.filter(
+            (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          );
+        } else if (type === "investigationOp") {
+          investigationOp.value = investigationOps.value.filter(
+            (v: any) => v.name.toLowerCase().indexOf(val) > -1
+          );
+        } else if (type === "daysExtendOp") {
+          daysExtendOp.value = daysExtendOps.value.filter(
+            (v: any) => v.id.indexOf(val) > -1
+          );
+        }
+      });
     }
     function fecthList(data: investigatefactsDataRowType[]) {
-        let datalist: investigatefactsDataRowType[] = data.map((e: investigatefactsDataRowType) => {
-            return {
-                id: e.id,
-                subject: e.subject,
-                interrogated: e.interrogated,
-                fault: e.fault ? convertFault(e.fault) : '-',
-                status: e.status ? convertSatatus(e.status) : '-',
-                active: e.active ? activeStatus(e.active) : '-'
-            };
-        });
-        rows.value = datalist;
+      let datalist: investigatefactsDataRowType[] = data.map(
+        (e: investigatefactsDataRowType) => {
+          return {
+            id: e.id,
+            subject: e.subject,
+            interrogated: e.interrogated,
+            fault: e.fault ? convertFault(e.fault) : "-",
+            status: e.status ? convertSatatus(e.status) : "-",
+            active: e.active ? activeStatus(e.active) : "-",
+          };
+        }
+      );
+      rows.value = datalist;
     }
     function convertFault(val: string) {
-        switch (val) {
-            case "0":
-                return "ความผิดวินัยไม่ร้ายแรง"
-            case "1":
-                return "ความผิดวินัยร้ายแรง"
-        }
+      switch (val) {
+        case "0":
+          return "ความผิดวินัยไม่ร้ายแรง";
+        case "1":
+          return "ความผิดวินัยร้ายแรง";
+      }
     }
     function convertSatatus(val: string) {
-        switch (val) {
-            case "0":
-                return "ยุติเรื่อง"
-            case "1":
-                return "เสร็จสิ้นเเล้ว"
-        }
+      switch (val) {
+        case "0":
+          return "ยุติเรื่อง";
+        case "1":
+          return "เสร็จสิ้นเเล้ว";
+      }
     }
     function activeStatus(val: string) {
-        switch (val) {
-            case "0":
-                return "ยังไม่ได้ยืนยันผล"
-            case "1":
-                return "ยืนยันผลเเล้ว"
-        }
+      switch (val) {
+        case "0":
+          return "ยังไม่ได้ยืนยันผล";
+        case "1":
+          return "ยืนยันผลเเล้ว";
+      }
     }
     return {
-        fecthList,
-        rows,
-        daysExtendOps,
-        investigationOps,
-        faultOps,
-        filterFnOptionsType,
-        faultOp,
-        daysExtendOp,
-        investigationOp,
-        visibleColumns,
-        columns,
-        statusResultOptions,
-        causeTextOptions
+      tabMenu,
+      fecthList,
+      rows,
+      daysExtendOps,
+      investigationOps,
+      faultOps,
+      filterFnOptionsType,
+      faultOp,
+      daysExtendOp,
+      investigationOp,
+      visibleColumns,
+      columns,
+      statusResultOptions,
+      causeTextOptions,
     };
-})
\ No newline at end of file
+  }
+);