From f247167e9a287d03e65eccf4da0d1968ed343b81 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 30 Nov 2023 18:02:29 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=87=E0=B9=80=E0=B8=A3=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99,=20=E0=B8=AA=E0=B8=B7=E0=B8=9A=E0=B8=AA=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99,=20=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=AA=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/11_discipline/api.discipline.ts       |    4 +-
 src/components/Dialogs/AddPersonal.vue        |  105 +-
 .../components/1_Complaint/EditPage.vue       |  116 +-
 .../components/1_Complaint/Form.vue           |  357 ++--
 .../components/1_Complaint/MainPage.vue       |    1 -
 .../2_InvestigateFacts/EditPage.vue           |  125 +-
 .../components/2_InvestigateFacts/Form.vue    | 1613 ++++++++---------
 .../3_InvestigateDisciplinary/EditPage.vue    |   35 +-
 .../3_InvestigateDisciplinary/Form.vue        |  201 +-
 .../components/4_Result/EditPage.vue          |    3 +-
 .../Dialogbody.vue => DialogDirector.vue}     |   32 +-
 .../Popup.vue => PopupSendToNext.vue}         |    8 +-
 .../interface/request/complaint.ts            |    1 +
 .../interface/request/disciplinary.ts         |    2 +-
 .../interface/request/investigate.ts          |    2 +-
 .../interface/request/investigateFact.ts      |    4 +-
 src/modules/11_discipline/store.ts            |  283 ++-
 .../11_discipline/store/ComplaintsStore.ts    |   72 +-
 .../store/InvestigateFactStore.ts             |  100 +-
 .../11_discipline/store/ResultStore.ts        |    6 +-
 20 files changed, 1356 insertions(+), 1714 deletions(-)
 rename src/modules/11_discipline/components/{3_InvestigateDisciplinary/Dialogbody.vue => DialogDirector.vue} (92%)
 rename src/modules/11_discipline/components/{1_Complaint/Popup.vue => PopupSendToNext.vue} (96%)

diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 401488f29..093b52c26 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -52,11 +52,11 @@ export default {
   disciplineDisciplinaryById: (id: string) => `${discipline}/${id}`,
   disciplineInvestigateById: (id: string) => `${discipline}/investigate/${id}`,
   disciplineComplaintsById: (id: string) => `${discipline}/complaint/${id}`,
-  // disciplineDirector: () => `${disciplineMain}/director`,
+  disciplineDirector: () => `${discipline}/director`,
   disciplineDoc: (type: string, id: string) =>
     `${discipline}/${type}/file/${id}`,
   disciplineByIdDoc: (type: string, id: string, docId: string) =>
-    `${discipline}/disciplinary/${type}/file/${id}/${docId}`,
+    `${discipline}/${type}/file/${id}/${docId}`,
   disciplinaryReject: (id: string) => `${discipline}/reject/${id}`,
   disciplinaryResume: (id: string) => `${discipline}/resume/${id}`,
   disciplinaryApprove: (id: string) => `${discipline}/approve/${id}`,
diff --git a/src/components/Dialogs/AddPersonal.vue b/src/components/Dialogs/AddPersonal.vue
index cb80e4c3c..412b7a5b5 100644
--- a/src/components/Dialogs/AddPersonal.vue
+++ b/src/components/Dialogs/AddPersonal.vue
@@ -7,10 +7,13 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { ResponsePreson } from "@/interface/response/listPerson";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
+
+const mainStore = useDisciplineMainStore();
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, dialogMessageNotify, showLoader, hideLoader } = mixin;
+const { dialogMessageNotify, showLoader, hideLoader } = mixin;
 
 interface typeOp {
   id: string;
@@ -34,7 +37,6 @@ const rows = ref<tableType[]>([]);
 const type = ref<string>("idcard");
 const search = ref<string>("");
 const selected = ref<any>([]);
-const dataObject = ref<any>([]);
 
 const typeOps = ref<typeOp[]>([
   { id: "idcard", name: "เลขประจำตัวประชาชน" },
@@ -42,94 +44,6 @@ const typeOps = ref<typeOp[]>([
   { id: "lastname", name: "นามสกุล" },
 ]);
 
-/** หัวข้อที่เเสดงในตาราง */
-const visibleColumns = ref<string[]>([
-  "no",
-  "idcard",
-  "name",
-  "posNo",
-  "position",
-  "positionLevel",
-  "salary",
-  "organization",
-]);
-
-/** หัวตาราง */
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขบัตรประชาชน",
-    sortable: true,
-    field: "idcard",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
 /** รับค่ามาจาก หน้าหลัก */
 const props = defineProps({
   checkId: {
@@ -231,13 +145,6 @@ async function searchInput() {
   }
 }
 
-/** update ตาราง เมื่อ input ว่าง */
-function updateInput() {
-  if (!search.value) {
-    rows.value = dataObject.value;
-  }
-}
-
 /** update เมื่อเปลี่ยน option */
 function updateSelect() {
   search.value = "";
@@ -305,7 +212,7 @@ function updateSelect() {
         <div class="full-width q-mt-sm">
           <d-table
             ref="table"
-            :columns="columns"
+            :columns="mainStore.columnsRespondent"
             :rows="rows"
             row-key="personId"
             flat
@@ -313,7 +220,7 @@ function updateSelect() {
             :paging="true"
             dense
             class="custom-header-table"
-            :visible-columns="visibleColumns"
+            :visible-columns="mainStore.visibleColumnsRespondent"
             selection="multiple"
             v-model:selected="selected"
           >
diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index c2b94d93b..fe721f539 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import Form from "@/modules/11_discipline/components/1_Complaint/Form.vue";
-import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
+import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -15,7 +15,10 @@ import type {
 } from "@/modules/11_discipline/interface/request/complaint";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
+
 const complainstStore = useComplainstDataStore();
+const mainStore = useDisciplineMainStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -34,6 +37,7 @@ const modalPopup = ref<boolean>(false);
 
 /** ข้อมูล v-model ของฟอร์ม */
 const personOj = reactive<ArrayPerson>({
+  id: "",
   personId: "",
   idcard: "",
   name: "",
@@ -74,67 +78,6 @@ const data = reactive<FormData>({
   disciplineComplaintDocs: [fileListOj],
 });
 
-/** ดึงค่าจาก api */
-// const fetchData = async () => {
-//   data.respondentType = "PERSON";
-//   data.organizationId = "0";
-//   data.consideredAgency = "2";
-//   data.title = "ทุจริตในหน้าที่";
-//   data.description = "มีข้อร้องเรียนเรื่องการทุจริตทางการเงิน";
-//   data.dateReceived = new Date("2023-11-05");
-//   data.dateConsideration = new Date("2023-11-07T14:58:00");
-//   data.offenseDetails = "NOT_SPECIFIED";
-//   data.levelConsideration = "NORMAL";
-//   data.dateNotification = new Date("2023-11-07T14:58:00");
-//   data.complaintFrom = "สตง";
-//   data.appellant = "สมศรี สุขใจ";
-//   data.documentFile = "";
-//   data.complaintStatus = "NEW";
-//   (data.persons = [
-//     {
-//       idcard: "1529900022223",
-//       name: "นางศิรินภา คงน้อย",
-//       positionNo: "สกก.1",
-//       position: "ธุรการ",
-//       positionLevel: "ต้น",
-//       salary: "10000",
-//       organization: "สกจ.",
-//     },
-//   ]),
-//     (data.fileList = [
-//       {
-//         id: "08dbeb08-1931-487d-8989-0725ce48031d",
-//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/edb095bf-8898-4ef8-ad60-daaf60991b8f?AWSAccessKeyId=frappet&Expires=1700657567&Signature=7Do0YexqpTJGA4DQPKzJ5YtvyJg%3D",
-//         fileName: "ex_slip.jpeg.png14",
-//         fileType: "image/png",
-//       },
-//       {
-//         id: "08dbeb08-392b-41b8-8970-78934f317469",
-//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/5a32c821-46d6-4bbc-9824-b777f154702e?AWSAccessKeyId=frappet&Expires=1700657567&Signature=HlNAjybBNPqGAYJtHIefNRofz1E%3D",
-//         fileName: "17058616.jpg",
-//         fileType: "image/jpeg",
-//       },
-//       {
-//         id: "08dbeb08-3e41-4500-8476-6bdd76f0b6c8",
-//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/1bf5ef61-05f3-4cb1-98a5-dd2698b49440?AWSAccessKeyId=frappet&Expires=1700657567&Signature=WAlAjPbX%2BUoO0zY7m1jDEb3ovvA%3D",
-//         fileName: "17058616.jpg",
-//         fileType: "image/jpeg",
-//       },
-//       {
-//         id: "08dbeb08-428f-483b-8d50-718e947d012e",
-//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/d848952a-54af-4502-b235-1f01f441d86c?AWSAccessKeyId=frappet&Expires=1700657568&Signature=3L9QfaWLCHmZjeS2UttVM3se6W0%3D",
-//         fileName: "HybGoQu8osQ49G7AzCOvYF4G.png",
-//         fileType: "image/png",
-//       },
-//       {
-//         id: "08dbeb08-8aa5-4264-87bf-1794be50f0c7",
-//         file: "https://s3cluster.frappet.com/bma-ehr-fpt/ac55b1f8-54f6-43c4-9f85-c236d24e7d76?AWSAccessKeyId=frappet&Expires=1700657568&Signature=isN3RM3P4%2BP5lgK5%2F45h1U5pabI%3D",
-//         fileName: "1300399ปปปป.jpg",
-//         fileType: "image/jpeg",
-//       },
-//     ]);
-// };
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -271,28 +214,33 @@ async function onSubmit(data: any) {
 
 /** ยืนยัน มีมูลส่งไปสืบสวน */
 function sentInvestigate() {
-  if (complainstStore.rowsAdd.length > 0) {
+  if (mainStore.rowsAdd.length > 0) {
     modalPopup.value = true;
   } else {
-    dialogConfirm($q,()=>sentConfirm(),'ยืนยันส่งไปสืบสวน','ต้องการยืนยันยืนยันส่งไปสืบสวนใช่หรือไม่?')
+    dialogConfirm(
+      $q,
+      () => sentConfirmNoPerson(),
+      "ยืนยันส่งไปสืบสวน",
+      "ต้องการยืนยันยืนยันส่งไปสืบสวนใช่หรือไม่?"
+    );
   }
 }
 
-function sentConfirm(){
+function sentConfirmNoPerson() {
   showLoader();
-    http
-      .put(config.API.complaintApprove(id.value), {
-        persons: [],
-      })
-      .then((res) => {
-        router.push(`/discipline/complaints`);
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
+  http
+    .put(config.API.complaintApprove(id.value), {
+      persons: [],
+    })
+    .then((res) => {
+      router.push(`/discipline/complaints`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function closePopup() {
@@ -355,8 +303,9 @@ function confirmCancelInvestigate() {
  * ดึงข้อมูล จาก component เเล้ว update
  * @param data person data
  */
-function emitPerson(data: ArrayPerson[]) {
-  const dataMapId = data.map((item: ArrayPerson) => item.personId);
+function sendPersonToNext(data: ArrayPerson[]) {
+  const dataMapId = data.map((item: ArrayPerson) => item.id);
+
   showLoader();
   http
     .put(config.API.complaintApprove(id.value), {
@@ -379,6 +328,7 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-end">
@@ -417,11 +367,11 @@ onMounted(() => {
     </div>
 
     <Form :on-submit="onSubmit" :data="data" :get-data="getData" />
-    <Popup
+    <PopupSendToNext
       :modal="modalPopup"
       :close="closePopup"
-      @return-person="emitPerson"
-      :rows="complainstStore.rowsAdd"
+      @return-person="sendPersonToNext"
+      :rows="mainStore.rowsAdd"
       :columns="columns"
       :visibleColumns="visibleColumns"
     />
diff --git a/src/modules/11_discipline/components/1_Complaint/Form.vue b/src/modules/11_discipline/components/1_Complaint/Form.vue
index 2a683e665..bd29f8d0e 100644
--- a/src/modules/11_discipline/components/1_Complaint/Form.vue
+++ b/src/modules/11_discipline/components/1_Complaint/Form.vue
@@ -1,33 +1,31 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch, watchEffect } from "vue";
-import { is, useQuasar } from "quasar";
-import { useRouter } from "vue-router";
-import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
 /** import Type */
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type {
   FormData,
   MyObjectComplaintsRef,
-  DataAddRequest,
-  ArrayPerson,
   ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
 
 /** importStroe*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
 
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 const $q = useQuasar();
-const router = useRouter();
 const fileDocDataUpload = ref<File[]>([]);
 
 /** เรียกใช้ store */
 const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
+const mainStore = useDisciplineMainStore();
+
 const {
   date2Thai,
   dialogConfirm,
@@ -37,11 +35,10 @@ const {
   hideLoader,
   showLoader,
 } = mixin;
-const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
+const { filterSelector } = complainstStore; // function จาก store complainstStore
 
 /** validateForm */
 const respondentTypeRef = ref<Object | null>(null);
-const complainantRef = ref<Object | null>(null);
 const organizationIdRef = ref<Object | null>(null);
 const consideredAgencyRef = ref<Object | null>(null);
 const titleRef = ref<Object | null>(null);
@@ -56,6 +53,7 @@ const appellantRef = ref<Object | null>(null);
 const resultRef = ref<Object | null>(null);
 
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 
 const fileList = ref<ArrayFileList[]>([]);
 /** รับ props มาจากหน้าหลัก */
@@ -112,132 +110,21 @@ const objectComplaintsRef: MyObjectComplaintsRef = {
   result: resultRef,
 };
 
-/** options ทั้งหมด*/
-const offenseDetailstoptions = ref<DataOption[]>([
-  { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
-  { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
-  { id: "DEADLY", name: "ร้ายแรง" },
-]);
-const levelConsiderationtoptions = ref<DataOption[]>([
-  { id: "NORMAL", name: "ปกติ" },
-  { id: "URGENT", name: "ด่วน" },
-  { id: "VERY_URGENT", name: "ด่วนมาก" },
-]);
-const complaintFromtoptions = ref<DataOption[]>([]);
+// /**
+//  * รับค่าผู้ถูกร้องเรียน
+//  * @param val บุคคล หน่วยงาน กทม
+//  */
+// async function selectComplainant(val: string) {
+//   formData.organizationId = "";
+//   formData.consideredAgency = "";
 
-/** หัวตาราง */
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "info",
-    align: "left",
-    label: "",
-    sortable: false,
-    field: "info",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขบัตรประชาชน",
-    sortable: true,
-    field: "idcard",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
+//   if (val === "1") {
+//     await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
+//   }
+// }
 
-/** หัวข้อที่เเสดงในตาราง */
-const visibleColumns = ref<string[]>([
-  "info",
-  "no",
-  "idcard",
-  "name",
-  "posNo",
-  "position",
-  "positionLevel",
-  "salary",
-  "organization",
-]);
-
-/**
- * รับค่าผู้ถูกร้องเรียน
- * @param val บุคคล หน่วยงาน กทม
- */
-async function selectComplainant(val: string) {
-  formData.organizationId = "";
-  formData.consideredAgency = "";
-
-  if (val === "1") {
-    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
-  }
-}
-
-/** เรียกโครงสร้างสำนักงาน */
-async function fetchOffice() {}
+// /** เรียกโครงสร้างสำนักงาน */
+// async function fetchOffice() {}
 
 /**
  * ฟังชั่นอัปโหลดไฟล์
@@ -296,8 +183,8 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      if (complainstStore.rowsAdd) {
-        formData.persons = complainstStore.rowsAdd;
+      if (mainStore.rowsAdd) {
+        formData.persons = mainStore.rowsAdd;
         props.onSubmit(formData);
       } else props.onSubmit(formData);
       // props.onSubmit(formData);
@@ -353,25 +240,30 @@ function confirmDelete(id: string) {
  * เก็บข้อมูลลง formData
  */
 watch(props.data, async () => {
-  fileList.value = props.data.disciplineComplaintDocs;
-  complainstStore.fetchComplainstAdd(props.data.persons);
+  if (props.data !== null) {
+    isReadonly.value = props.data.status != "NEW" ?? true;
+    isSave.value = false;
 
-  formData.id = props.data.id;
-  formData.respondentType = props.data.respondentType;
-  formData.organizationId = props.data.organizationId;
-  formData.consideredAgency = props.data.consideredAgency;
-  formData.title = props.data.title;
-  formData.description = props.data.description;
-  formData.dateReceived = props.data.dateReceived;
-  formData.dateConsideration = props.data.dateConsideration;
-  formData.offenseDetails = props.data.offenseDetails;
-  formData.levelConsideration = props.data.levelConsideration;
-  formData.dateNotification = props.data.dateNotification;
-  formData.complaintFrom = props.data.complaintFrom;
-  formData.appellant = props.data.appellant;
-  formData.status = props.data.status;
-  formData.result = props.data.result;
-  formData.persons = complainstStore.rowsAdd;
+    fileList.value = props.data.disciplineComplaintDocs;
+    mainStore.fetchData(props.data.persons);
+
+    formData.id = props.data.id;
+    formData.respondentType = props.data.respondentType;
+    formData.organizationId = props.data.organizationId;
+    formData.consideredAgency = props.data.consideredAgency;
+    formData.title = props.data.title;
+    formData.description = props.data.description;
+    formData.dateReceived = props.data.dateReceived;
+    formData.dateConsideration = props.data.dateConsideration;
+    formData.offenseDetails = props.data.offenseDetails;
+    formData.levelConsideration = props.data.levelConsideration;
+    formData.dateNotification = props.data.dateNotification;
+    formData.complaintFrom = props.data.complaintFrom;
+    formData.appellant = props.data.appellant;
+    formData.status = props.data.status;
+    formData.result = props.data.result;
+    formData.persons = mainStore.rowsAdd;
+  }
 });
 
 /**
@@ -383,6 +275,9 @@ function handleSave(returnData: any) {
   toggleModal();
 }
 
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
 function upLoadFileDoc() {
   const Data = new FormData();
   Data.append("file", formData.documentFile);
@@ -390,7 +285,7 @@ function upLoadFileDoc() {
   http
     .put(config.API.complaintFileUpload(formData.id), Data)
     .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
+      success($q, "อัพโหลดไฟล์สำเร็จ");
       props.getData();
     })
     .catch((e) => {
@@ -402,12 +297,17 @@ function upLoadFileDoc() {
     });
 }
 
+/**
+ * ฟังก์ชั่นเพิ่มรายชื่อผู้ถูกสอบสวนจาก popup มายังรายการผู้ถูกสอบสวนหน้าหลัก
+ * @param data ข้อมูลรายชื่อผู้ถูกสอบสวนเป็น array
+ */
 async function addPerson(data: any) {
   toggleModal();
   changeFormData();
-  await complainstStore.fetchComplainstAdd(data);
+  await mainStore.fetchData(data);
 }
 
+/** ดึงข้อมูลหน่วยงานจาก api */
 function getOc() {
   http.get(config.API.typeOc()).then((res) => {
     const data = res.data.result;
@@ -415,39 +315,43 @@ function getOc() {
   });
 }
 
+/**
+ * ฟังก์ชั่นลบผู้ถูกร้องเรียนออกจากรายการ
+ * @param id id ของผู้ถูกร้อง
+ */
 function deletePerson(id: string) {
-  dialogRemove($q, () => removePerson(id));
-}
-
-function removePerson(id: string) {
-  changeFormData();
-  const dataRow = complainstStore.rowsAdd;
-  const updatedRows = dataRow.filter((item: any) => item.personId !== id);
-  complainstStore.rowsAdd = updatedRows;
-}
-
-function getListChannel() {
-  http.get(config.API.complaintListOp()).then((res) => {
-    complaintFromtoptions.value = res.data.result.data;
+  dialogRemove($q, () => {
+    changeFormData();
+    const dataRow = mainStore.rowsAdd;
+    const updatedRows = dataRow.filter((item: any) => item.personId !== id);
+    mainStore.rowsAdd = updatedRows;
   });
 }
 
+/** ช่องทางการร้องเรียน และฟังก์ชั่นการดึงข้อมูลช่องทางการร้องเรียนมาจาก api*/
+const channelOptions = ref<DataOption[]>([]);
+function getListChannel() {
+  http.get(config.API.complaintListOp()).then((res) => {
+    channelOptions.value = res.data.result.data;
+  });
+}
+
+/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
 function changeFormData() {
   isSave.value = props.data != null ?? true;
 }
 
 onMounted(() => {
+  mainStore.rowsAdd = []
   getListChannel();
   getOc();
-  complainstStore.columns = columns.value;
-  complainstStore.visibleColumns = visibleColumns.value;
 });
 </script>
 
 <template>
   <div class="row col-12 bg-white">
     <div class="col-sm-12 col-md-9">
-      <div v-if="isSave === true" class="q-pa-sm q-gutter-sm">
+      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
         <q-banner
           inline-actions
           bordered
@@ -470,9 +374,7 @@ onMounted(() => {
                     ref="respondentTypeRef"
                     dense
                     outlined
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     label="ผู้ถูกร้องเรียน"
                     option-value="id"
                     option-label="name"
@@ -509,9 +411,7 @@ onMounted(() => {
                     ref="organizationIdRef"
                     dense
                     hide-bottom-space
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     outlined
                     option-label="name"
                     option-value="id"
@@ -537,9 +437,7 @@ onMounted(() => {
                     label="หน่วยงานที่พิจารณา"
                     option-value="id"
                     option-label="name"
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     hide-bottom-space
                     emit-value
                     map-options
@@ -574,9 +472,7 @@ onMounted(() => {
                     >
                       ผู้ถูกร้องเรียน
                       <q-btn
-                        v-if="
-                          formData.status === 'NEW' || formData.status === ''
-                        "
+                        v-if="!isReadonly"
                         size="12px"
                         flat
                         round
@@ -593,15 +489,17 @@ onMounted(() => {
                     <div class="col-xs-12 q-pa-sm">
                       <d-table
                         ref="table"
-                        :columns="complainstStore.columns"
-                        :rows="complainstStore.rowsAdd"
+                        :columns="mainStore.columnsRespondent"
+                        :rows="mainStore.rowsAdd"
                         row-key="idcard"
                         flat
                         bordered
                         :paging="true"
                         dense
                         class="custom-header-table"
-                        :visible-columns="complainstStore.visibleColumns"
+                        :visible-columns="
+                          mainStore.visibleColumnsRespondent
+                        "
                       >
                         <template v-slot:header="props">
                           <q-tr :props="props">
@@ -651,10 +549,7 @@ onMounted(() => {
                             </q-td>
                             <q-td auto-width>
                               <q-btn
-                                v-if="
-                                  formData.status === 'NEW' ||
-                                  formData.status === ''
-                                "
+                                v-if="!isReadonly"
                                 size="12px"
                                 flat
                                 round
@@ -678,9 +573,7 @@ onMounted(() => {
                     ref="titleRef"
                     dense
                     outlined
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     hide-bottom-space
                     v-model="formData.title"
                     :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
@@ -698,9 +591,7 @@ onMounted(() => {
                     ref="descriptionRef"
                     dense
                     outlined
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     hide-bottom-space
                     v-model="formData.description"
                     :rules="[(val) => !!val || 'กรุณาการข้อมูล']"
@@ -719,9 +610,7 @@ onMounted(() => {
                     :locale="'th'"
                     autoApply
                     borderless
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     :enableTimePicker="false"
                     week-start="0"
                     @update:model-value="changeFormData()"
@@ -738,9 +627,7 @@ onMounted(() => {
                         ref="dateReceivedRef"
                         outlined
                         dense
-                        :readonly="
-                          formData.status !== 'NEW' && formData.status !== ''
-                        "
+                        :readonly="isReadonly"
                         hide-bottom-space
                         class="full-width datepicker"
                         :model-value="
@@ -773,11 +660,9 @@ onMounted(() => {
                     ref="levelConsiderationRef"
                     dense
                     outlined
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     v-model="formData.levelConsideration"
-                    :options="levelConsiderationtoptions"
+                    :options="complainstStore.levelConsiderationtOptions"
                     label="ระดับการพิจารณา"
                     option-value="id"
                     option-label="name"
@@ -801,9 +686,7 @@ onMounted(() => {
                     v-model="formData.dateConsideration"
                     @update:model-value="changeFormData()"
                     :locale="'th'"
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     autoApply
                     borderless
                     :enableTimePicker="false"
@@ -827,9 +710,7 @@ onMounted(() => {
                             ? date2Thai(formData.dateConsideration)
                             : null
                         "
-                        :readonly="
-                          formData.status !== 'NEW' && formData.status !== ''
-                        "
+                        :readonly="isReadonly"
                         label="วันที่กำหนดวันพิจารณา"
                         hide-bottom-space
                         :rules="[
@@ -857,11 +738,9 @@ onMounted(() => {
                     ref="offenseDetailsRef"
                     dense
                     outlined
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     v-model="formData.offenseDetails"
-                    :options="offenseDetailstoptions"
+                    :options="mainStore.offenseDetailstOptions"
                     label="ลักษณะความผิด"
                     option-value="id"
                     option-label="name"
@@ -880,9 +759,7 @@ onMounted(() => {
                     v-model="formData.dateNotification"
                     :locale="'th'"
                     autoApply
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     borderless
                     :enableTimePicker="false"
                     week-start="0"
@@ -900,9 +777,7 @@ onMounted(() => {
                         ref="dateNotificationRef"
                         outlined
                         dense
-                        :readonly="
-                          formData.status !== 'NEW' && formData.status !== ''
-                        "
+                        :readonly="isReadonly"
                         hide-bottom-space
                         class="full-width datepicker"
                         :model-value="
@@ -935,12 +810,10 @@ onMounted(() => {
                     for="selectReceivecomplaints"
                     ref="complaintFromRef"
                     dense
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     outlined
                     v-model="formData.complaintFrom"
-                    :options="complaintFromtoptions"
+                    :options="channelOptions"
                     label="รับเรื่องร้องเรียน"
                     option-value="id"
                     option-label="name"
@@ -962,9 +835,7 @@ onMounted(() => {
                     dense
                     outlined
                     v-model="formData.appellant"
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     label="ผู้ร้องเรียน"
                     :rules="[(val) => !!val || `${'กรุณากรอกข้อมูล'}`]"
                     lazy-rules
@@ -976,9 +847,7 @@ onMounted(() => {
                 </div>
                 <div class="col-xs-12 col-sm-12">
                   <q-input
-                    :readonly="
-                      formData.status !== 'NEW' && formData.status !== ''
-                    "
+                    :readonly="isReadonly"
                     for="result"
                     ref="resultRef"
                     dense
@@ -1001,10 +870,7 @@ onMounted(() => {
         </div>
 
         <q-separator />
-        <div
-          class="row col-12 q-pa-sm"
-          v-if="formData.status === 'NEW' || formData.status === ''"
-        >
+        <div class="row col-12 q-pa-sm" v-if="!isReadonly">
           <q-space />
           <q-btn
             for="ButtonOnSubmit"
@@ -1029,22 +895,20 @@ onMounted(() => {
             >
               <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                 {{
-                  formData.status === "NEW"
-                    ? "อัปโหลดไฟล์เอกสารหลักฐาน"
-                    : "ไฟล์เอกสารหลักฐาน"
+                  !isReadonly ? "อัปโหลดไฟล์เอกสารหลักฐาน" : "ไฟล์เอกสารหลักฐาน"
                 }}
               </div>
               <div class="col-12"><q-separator /></div>
 
-              <div v-if="formData.status === 'NEW'" class="col-12 q-pa-sm row">
+              <div
+                v-if="!isReadonly && formData.id !== ''"
+                class="col-12 q-pa-sm row"
+              >
                 <q-file
                   for="inputFiles"
                   class="col-11"
                   outlined
                   dense
-                  :readonly="
-                    formData.status !== 'NEW' && formData.status !== ''
-                  "
                   v-model="formData.documentFile"
                   @added="fileUploadDoc"
                   label="ไฟล์เอกสารหลักฐาน"
@@ -1094,7 +958,7 @@ onMounted(() => {
                       ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                     >
                     <q-btn
-                      v-if="formData.status === 'NEW'"
+                      v-if="!isReadonly"
                       size="12px"
                       flat
                       round
@@ -1109,7 +973,7 @@ onMounted(() => {
                 </q-list>
               </div>
 
-              <div class="col-12 q-pa-sm" v-if="fileList.length == 0">
+              <div class="col-12 q-pa-sm" v-else>
                 <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
               </div>
             </q-card>
@@ -1119,11 +983,12 @@ onMounted(() => {
     </div>
   </div>
 
+  <!-- Popup ผู้ถูกร้องเรียน -->
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"
-    :checkId="complainstStore.rowsAdd"
+    :checkId="mainStore.rowsAdd"
     :modal="modal"
-    btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
+    btn-title="เพิ่มรายชื่อผู้ถูกร้องเรียน"
     :close="toggleModal"
     :save="addPerson"
     @returnData="handleSave"
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 9c87d2eb4..fe1cd7ef5 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -59,7 +59,6 @@ async function getList() {
 
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageadd() {
-  complainstStore.fetchComplainstAdd([]);
   router.push(`/discipline/complaints/add`);
 }
 
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 65dfea31b..a3b5101f5 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -2,11 +2,12 @@
 import { onMounted, reactive, ref, watch } from "vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
 import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
-import { useRouter, useRoute } from "vue-router";
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
 import { useQuasar } from "quasar";
-import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
+import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
 import type {
   FormData as FormDataComplaint,
@@ -18,13 +19,12 @@ import type { QTableProps } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-const investigateFactStore = useInvestigateFactStore();
+const mainStore = useDisciplineMainStore();
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useInvestigateFactStore();
 const { dialogConfirm, showLoader, success, hideLoader, messageError } = mixin;
-const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
@@ -40,10 +40,10 @@ const data = reactive<FormData>({
   investigationDetailOther: "",
   evidenceFiles: null,
   fileComplaint: null,
-  clickTime: false,
+  investigationExtendStatus: false,
   investigationDateStart: null,
   investigationDateEnd: null,
-  daysExtend: null,
+  investigationDaysExtend: null,
   investigationStatusResult: "",
   investigationCauseText: "",
   complaintStatus: "",
@@ -60,6 +60,7 @@ const data = reactive<FormData>({
 
 /** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
 const personObjComplaint = reactive<ArrayPerson>({
+  id: "",
   personId: "",
   idcard: "",
   name: "",
@@ -132,104 +133,6 @@ async function getDataComplaint() {
     });
 }
 
-/** หัวตาราง */
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "info",
-    align: "left",
-    label: "",
-    sortable: false,
-    field: "info",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขบัตรประชาชน",
-    sortable: true,
-    field: "idcard",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** หัวข้อที่เเสดงในตาราง */
-const visibleColumns = ref<string[]>([
-  "info",
-  "no",
-  "idcard",
-  "name",
-  "posNo",
-  "position",
-  "positionLevel",
-  "salary",
-  "organization",
-]);
-
 function getData() {
   showLoader();
   http
@@ -250,8 +153,11 @@ function getData() {
       data.result = dataList.result;
       data.directors = dataList.director;
       data.disciplineInvestigateDocs = dataList.disciplineInvestigateDocs;
-      data.disciplineInvestigateRelevantDocs = dataList.disciplineInvestigateRelevantDocs;
+      data.disciplineInvestigateRelevantDocs =
+        dataList.disciplineInvestigateRelevantDocs;
       data.investigationStatusResult = dataList.investigationStatusResult;
+      data.investigationExtendStatus = dataList.investigationExtendStatus;
+      data.investigationDaysExtend = dataList.investigationDaysExtend;
     })
     .catch((e) => {
       messageError($q, e);
@@ -378,7 +284,6 @@ function emitPerson(data: FormData[]) {
     });
 }
 
-
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   getData();
@@ -461,13 +366,13 @@ watch(
       </q-tab-panels>
     </q-card>
 
-    <Popup
+    <PopupSendToNext
       :modal="modalPopup"
       :close="closePopup"
       title="ส่งไปสอบสวน"
-      :rows="investigateFactStore.rowsAdd"
-      :columns="columns"
-      :visibleColumns="visibleColumns"
+      :rows="mainStore.rowsAdd"
+      :columns="mainStore.columnsDirector"
+      :visibleColumns="mainStore.visibleColumnsDirector"
       @return-person="emitPerson"
     />
   </div>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 587ed991b..7227edb4f 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -3,12 +3,14 @@ import { useRouter, useRoute } from "vue-router";
 import { onMounted, ref, watch, reactive, computed } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
-import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
+import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vue";
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
+
 import type {
   FormData,
   MyObjectInvestigateRef,
@@ -24,6 +26,8 @@ const modalPerson = ref<boolean>(false);
 const toggleModal = () => (modalPerson.value = !modalPerson.value);
 /**เรียกใช้ store */
 const investigateFactStore = useInvestigateFactStore();
+const mainStore = useDisciplineMainStore();
+
 const mixin = useCounterMixin();
 const { filterFnOptionsType } = investigateFactStore;
 const {
@@ -51,7 +55,7 @@ const investigationDescriptionRef = ref<Object | null>(null);
 const faultRef = ref<Object | null>(null);
 const investigationDetailOtherRef = ref<Object | null>(null);
 const fileComplaintRef = ref<Object | null>(null);
-const clickTimeRef = ref<Object | null>(null);
+const extendStatusRef = ref<Object | null>(null);
 const dateRef = ref<Object | null>(null);
 const dateEndRef = ref<Object | null>(null);
 const investigationDetailRef = ref<Object | null>(null);
@@ -60,6 +64,9 @@ const investigationStatusResultRef = ref<Object | null>(null);
 const investigationCauseTextRef = ref<Object | null>(null);
 const resultRef = ref<Object | null>(null);
 
+const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -89,11 +96,11 @@ const formData = reactive<FormData>({
   investigationDetailOther: "",
   evidenceFiles: null,
   fileComplaint: null,
-  clickTime: false,
+  investigationExtendStatus: false,
   investigationDateStart: null,
   investigationDateEnd: null,
   investigationDetail: "",
-  daysExtend: null,
+  investigationDaysExtend: null,
   investigationStatusResult: "",
   investigationCauseText: "",
   complaintStatus: "",
@@ -133,103 +140,6 @@ const initialPagination = ref<any>({
   rowsPerPage: 0,
 });
 
-/** หัวตาราง */
-const columnsPerson = ref<QTableProps["columns"]>([
-  {
-    name: "info",
-    align: "center",
-    label: "",
-    sortable: false,
-    field: "info",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขบัตรประชาชน",
-    sortable: true,
-    field: "idcard",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** หัวข้อที่เเสดงในตาราง */
-const visibleColumnsPerson = ref<string[]>([
-  "info",
-  "no",
-  "idcard",
-  "name",
-  "posNo",
-  "position",
-  "positionLevel",
-  "salary",
-  "organization",
-]);
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
   const hasError = [];
@@ -260,9 +170,10 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      if (investigateFactStore.rowsAdd) {
-        formData.persons = investigateFactStore.rowsAdd;
+      if (mainStore.rowsAdd) {
+        formData.persons = mainStore.rowsAdd;
         props.onSubmit(formData);
+        isSave.value = false;
       } else props.onSubmit(formData);
       // props.onSubmit(formData);
     },
@@ -276,6 +187,7 @@ function onSubmit() {
  * @param val จำนวนวันที่ต้องการขยาย
  */
 function calEndDate(val: string) {
+  changeFormData();
   const date = new Date(props.data.investigationDateEnd);
   const dateNew = new Date();
   formData.investigationDateEnd = new Date(
@@ -303,6 +215,9 @@ function clickClose() {
  */
 watch(props.data, async () => {
   if (props.data !== null) {
+    isReadonly.value = props.data.status != "NEW" ?? true;
+    isSave.value = false;
+
     isUpdate.value = true;
     formData.id = props.data.id;
     formData.complaint = props.data.complaint;
@@ -312,11 +227,11 @@ watch(props.data, async () => {
     formData.fault = props.data.fault;
     formData.investigationDetailOther = props.data.investigationDetailOther;
     formData.fileComplaint = props.data.fileComplaint;
-    formData.clickTime = props.data.clickTime;
     formData.investigationDateStart = props.data.investigationDateStart;
     formData.investigationDateEnd = props.data.investigationDateEnd;
     formData.investigationDetail = props.data.investigationDetail;
-    formData.daysExtend = props.data.daysExtend;
+    formData.investigationDaysExtend = props.data.investigationDaysExtend;
+    formData.investigationExtendStatus = props.data.investigationExtendStatus;
     formData.investigationStatusResult = props.data.investigationStatusResult;
     formData.investigationCauseText = props.data.investigationCauseText;
     formData.result = props.data.result;
@@ -325,10 +240,10 @@ watch(props.data, async () => {
       props.data.disciplineInvestigateRelevantDocs;
     formData.status = props.data.status;
 
-    investigateFactStore.rowsAdd = props.data.persons;
+    mainStore.rowsAdd = props.data.persons;
 
     const dataMap = props.data.directors.map((item: any) => ({
-      id: item.id,
+      id: item.directorId,
       name: `${item.prefix}${item.firstName} ${item.lastName}`,
       prefix: item.prefix,
       firstName: item.firstName,
@@ -337,7 +252,11 @@ watch(props.data, async () => {
       email: item.email,
       phone: item.phone,
     }));
+
     rows.value = dataMap;
+
+    const dataList = dataMap.map((item: any) => item.id);
+    formData.directors = dataList;
   }
 });
 
@@ -453,7 +372,7 @@ function confirmDelete(id: string) {
     });
 }
 async function addPerson(data: any) {
-  await investigateFactStore.fetchInvestigateAdd(data);
+  await mainStore.fetchData(data);
   toggleModal();
 }
 
@@ -504,164 +423,470 @@ async function getList() {
 }
 
 function returnDirector(data: any) {
-  clickClose();
   const dataList = data.map((item: any) => item.id);
-  console.log(data);
   formData.directors = dataList;
   rows.value = data;
+  clickClose();
 }
 
 function deletePerson(id: string) {
-  dialogRemove($q, () => remove(id));
-}
-
-function remove(id: string) {
-  const dataRow = investigateFactStore.rowsAdd;
+  changeFormData();
+  const dataRow = mainStore.rowsAdd;
   const updatedRows = dataRow.filter((item: any) => item.id !== id);
-  investigateFactStore.rowsAdd = updatedRows;
+  mainStore.rowsAdd = updatedRows;
 }
 
 function deleteDirector(id: string) {
-  dialogRemove($q, () => removePerson(id));
-}
-
-function removePerson(id: string) {
+  changeFormData();
   const dataRow = rows.value;
   const updatedRows = dataRow.filter((item: any) => item.id !== id);
   rows.value = updatedRows;
+
+  const dataList = updatedRows.map((item: any) => item.id);
+  formData.directors = dataList;
 }
+
+/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
+function changeFormData() {
+  isSave.value = true;
+}
+
 onMounted(async () => {
-  console.log(route.name);
   getOc();
-  investigateFactStore.columnsPerson = columnsPerson.value;
-  investigateFactStore.visibleColumnsPerson = visibleColumnsPerson.value;
 });
 </script>
 <template>
-  <div class="row">
-    <div class="col-xs-12 col-sm-12 col-md-9">
-      <q-card flat bordered class="q-mb-md">
-        <form @submit.prevent="validateForm">
-          <div class="q-pa-md q-col-gutter-md">
-            <div class="col-xs-12 row items-start q-col-gutter-md">
-              <!-- <div class="col-6">
-            <q-select
-              for="#fault"
-              outlined
-              dense
-              ref="complaintRef"
-              v-model="formData.complaint"
-              :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
-              :options="complaintsOptions"
-              label="เรื่องร้องเรียน"
-              emit-value
-              map-options
-              hide-bottom-space
-              option-label="name"
-              option-value="id"
-              use-input
-              @filter="(inputValue: any,
-                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
-                )"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div> -->
-
-              <!-- <div class="col-3">
-            <q-select
-              for="#fault"
-              outlined
-              dense
-              ref="faultRef"
-              v-model="formData.fault"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
-              :options="investigateFactStore.faultOp"
-              label="ลักษณะความผิด"
-              emit-value
-              hide-bottom-space
-              map-options
-              option-label="name"
-              option-value="id"
-              use-input
-              @filter="(inputValue: any,
-                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
-                )"
-              ><template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div> -->
-              <div class="col-xs-12 col-sm-3">
-                <q-select
-                  for="SelectrespondentType"
-                  v-model="formData.respondentType"
-                  ref="respondentTypeRef"
-                  dense
-                  outlined
-                  :readonly="formData.status !== 'NEW'"
-                  label="ผู้ถูกร้องเรียน"
-                  option-value="id"
-                  option-label="name"
-                  emit-value
-                  use-input
-                  map-options
-                  hide-bottom-space
-                  :options="investigateFactStore.respondentTypeOps"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-                  lazy-rules
-                  @filter="(inputValue: any,
+  <div class="row col-12 bg-white">
+    <div class="col-sm-12 col-md-9">
+      <div v-if="isSave" class="q-pa-sm q-gutter-sm">
+        <q-banner
+          inline-actions
+          bordered
+          class="bg-red-1 text-red border-orange"
+        >
+          <q-icon name="mdi-information-outline" size="20px" /> แจ้งเตือน
+          ยังไม่ได้บันทึกข้อมูล
+        </q-banner>
+      </div>
+      <form @submit.prevent="validateForm">
+        <div class="col-12">
+          <q-card bordered>
+            <div class="col-12 row q-pa-md q-col-gutter-md">
+              <div class="col-xs-12 row q-col-gutter-md">
+                <div class="col-xs-12 col-sm-3" id="respondentType">
+                  <q-select
+                    for="SelectrespondentType"
+                    v-model="formData.respondentType"
+                    ref="respondentTypeRef"
+                    dense
+                    outlined
+                    :readonly="isReadonly"
+                    label="ผู้ถูกร้องเรียน"
+                    option-value="id"
+                    option-label="name"
+                    emit-value
+                    use-input
+                    map-options
+                    hide-bottom-space
+                    :options="investigateFactStore.respondentTypeOps"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                    lazy-rules
+                    @filter="(inputValue: any,
                 doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
                 )"
+                    @update:model-value="changeFormData()"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+
+                <div
+                  class="col-xs-12 col-sm-3"
+                  v-if="formData.respondentType === 'ORGANIZATION'"
+                  id="organizationId"
                 >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
+                  <q-select
+                    for="inputOffice"
+                    name="organizationId"
+                    ref="organizationIdRef"
+                    dense
+                    hide-bottom-space
+                    :readonly="isReadonly"
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    emit-value
+                    map-options
+                    v-model="formData.organizationId"
+                    :options="investigateFactStore.organizationIdOp"
+                    label="เลือกสำนักงาน"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                    lazy-rules
+                    @update:model-value="changeFormData()"
+                  />
+                </div>
+
+                <div
+                  class="row col-12"
+                  v-if="formData.respondentType === 'PERSON'"
+                >
+                  <q-card
+                    bordered
+                    class="row col-12"
+                    style="border: 1px solid #d6dee1"
+                  >
+                    <div
+                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                    >
+                      ผู้ถูกร้องเรียน
+                      <q-btn
+                        v-if="!isReadonly"
+                        size="12px"
+                        flat
+                        round
+                        dense
+                        color="add"
+                        class="q-ml-sm"
+                        @click="toggleModal"
+                        icon="mdi-plus"
+                      >
+                        <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                      </q-btn>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-xs-12 q-pa-sm">
+                      <d-table
+                        ref="table"
+                        :columns="mainStore.columnsRespondent"
+                        :rows="mainStore.rowsAdd"
+                        row-key="idcard"
+                        flat
+                        bordered
+                        :paging="true"
+                        dense
+                        class="custom-header-table"
+                        :visible-columns="mainStore.visibleColumnsRespondent"
+                      >
+                        <template v-slot:header="props">
+                          <q-tr :props="props">
+                            <q-th
+                              v-for="col in props.cols"
+                              :key="col.name"
+                              :props="props"
+                              style="color: #000000; font-weight: 500"
+                            >
+                              <span class="text-weight-medium">{{
+                                col.label
+                              }}</span>
+                            </q-th>
+                            <q-th auto-width></q-th>
+                          </q-tr>
+                        </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"
+                            >
+                              <div v-if="col.name == 'no'">
+                                {{ props.rowIndex + 1 }}
+                              </div>
+                              <div v-else-if="col.name == 'info'">
+                                <q-btn
+                                  size="14px"
+                                  flat
+                                  round
+                                  dense
+                                  color="info"
+                                  icon="info"
+                                  @click="
+                                    router.push(
+                                      `/registry/${props.row.personId}`
+                                    )
+                                  "
+                                  ><q-tooltip
+                                    >ดูข้อมูลในทะเบียนประวัติ</q-tooltip
+                                  ></q-btn
+                                >
+                              </div>
+                              <div
+                                v-else-if="col.name === 'organization'"
+                                class="table_ellipsis"
+                              >
+                                {{ props.row.organization }}
+                              </div>
+                              <div v-else>
+                                {{ col.value }}
+                              </div>
+                            </q-td>
+                            <q-td auto-width>
+                              <q-btn
+                                v-if="!isReadonly"
+                                size="12px"
+                                flat
+                                round
+                                dense
+                                color="red"
+                                class="q-ml-sm"
+                                icon="mdi-delete-outline"
+                                @click="deletePerson(props.row.id)"
+                                ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                              >
+                            </q-td>
+                          </q-tr>
+                        </template>
+                      </d-table>
+                    </div>
+                  </q-card>
+                </div>
+
+                <div class="col-xs-12 col-sm-3">
+                  <q-select
+                    :readonly="isReadonly"
+                    for="#investigationDetail"
+                    outlined
+                    hide-bottom-space
+                    dense
+                    lazy-rules
+                    ref="investigationDetailRef"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
+                    ]"
+                    v-model="formData.investigationDetail"
+                    :options="investigateFactStore.investigationDetailOp"
+                    label="ลักษณะการสืบสวน"
+                    emit-value
+                    map-options
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    @filter="(inputValue: any,
+        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
+        )"
+                    @update:model-value="changeFormData()"
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
               </div>
 
               <div
-                class="col-xs-12 col-sm-3"
-                v-if="formData.respondentType === 'ORGANIZATION'"
-                id="organizationId"
+                v-if="formData.investigationDetail === 'OTHER'"
+                class="col-12"
               >
-                <q-select
-                  for="inputOffice"
-                  name="organizationId"
-                  ref="organizationIdRef"
-                  dense
-                  hide-bottom-space
-                  :readonly="formData.status !== 'NEW'"
+                <q-input
+                  :readonly="isReadonly"
+                  for="#investigationDetailOther"
+                  class="full-width cursor-pointer"
                   outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="formData.organizationId"
-                  :options="investigateFactStore.organizationIdOp"
-                  label="เลือกสำนักงาน"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
-                  lazy-rules
+                  ref="investigationDetailOtherRef"
+                  dense
+                  borderless
+                  v-model="formData.investigationDetailOther"
+                  hide-bottom-space
+                  :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+                  type="textarea"
+                  :rules="[
+                    (val) =>
+                      formData.investigationDetail === 'OTHER'
+                        ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                        : true,
+                  ]"
+                  @update:model-value="changeFormData()"
                 />
               </div>
 
-              <div
-                class="row col-12"
-                v-if="formData.respondentType === 'PERSON'"
-              >
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="col-12"
+                  style="border: 1px solid #d6dee1"
+                >
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                  >
+                    วันที่สืบสวน
+                    <q-checkbox
+                      v-if="
+                        formData.investigationDateStart != null &&
+                        formData.investigationDateEnd != null &&
+                        ((isReadonly && formData.investigationExtendStatus) ||
+                          !isReadonly)
+                      "
+                      :disable="isReadonly"
+                      for="#extendStatus"
+                      size="md"
+                      v-model="formData.investigationExtendStatus"
+                      label="ขยายเวลา"
+                      color="primary"
+                      dense
+                      class="text-weight-medium q-ml-sm"
+                      keep-color
+                      @update:model-value="changeFormData()"
+                    />
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="q-pa-sm">
+                    <div class="q-col-gutter-sm row">
+                      <div
+                        class="col-3"
+                        v-if="!formData.investigationExtendStatus"
+                      >
+                        <datepicker
+                          menu-class-name="modalfix"
+                          :readonly="isReadonly"
+                          v-model="formData.investigationDateStart"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                          @update:model-value="changeFormData()"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              for="#date"
+                              class="full-width cursor-pointer"
+                              ref="dateRef"
+                              :readonly="isReadonly"
+                              outlined
+                              dense
+                              lazy-rules
+                              borderless
+                              hide-bottom-space
+                              :model-value="
+                                formData.investigationDateStart
+                                  ? date2Thai(formData.investigationDateStart)
+                                  : null
+                              "
+                              :rules="[
+                                (val) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
+                              ]"
+                              :label="`${'วันที่เริ่มการสืบสวน'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
+
+                      <div
+                        class="col-3"
+                        v-if="formData.investigationExtendStatus"
+                      >
+                        <q-select
+                          :readonly="isReadonly"
+                          for="#daysExtend"
+                          outlined
+                          dense
+                          lazy-rules
+                          ref="daysExtendRef"
+                          v-model="formData.investigationDaysExtend"
+                          :options="investigateFactStore.daysExtendOp"
+                          label="จำนวนวันที่ต้องการขยาย"
+                          emit-value
+                          hide-bottom-space
+                          map-options
+                          :rules="[
+                            (val) =>
+                              formData.investigationExtendStatus
+                                ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                                : true,
+                          ]"
+                          option-label="name"
+                          option-value="id"
+                          use-input
+                          @update:model-value="calEndDate"
+                          ><template v-slot:no-option>
+                            <q-item>
+                              <q-item-section class="text-grey">
+                                ไม่มีข้อมูล
+                              </q-item-section>
+                            </q-item>
+                          </template>
+                        </q-select>
+                      </div>
+
+                      <div class="col-3">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="formData.investigationDateEnd"
+                          :readonly="isReadonly"
+                          :locale="'th'"
+                          autoApply
+                          :enableTimePicker="false"
+                          week-start="0"
+                          @update:model-value="changeFormData()"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              for="#dateEnd"
+                              ref="dateEndRef"
+                              class="full-width cursor-pointer"
+                              :readonly="isReadonly"
+                              outlined
+                              dense
+                              lazy-rules
+                              hide-bottom-space
+                              borderless
+                              :model-value="
+                                formData.investigationDateEnd
+                                  ? date2Thai(formData.investigationDateEnd)
+                                  : null
+                              "
+                              :rules="[
+                                (val) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
+                              ]"
+                              :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  color="primary"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
+
+              <div class="row col-12">
                 <q-card
                   bordered
                   class="row col-12"
@@ -670,559 +895,220 @@ onMounted(async () => {
                   <div
                     class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                   >
-                    ผู้ถูกร้องเรียน
+                    รายชื่อกรรมการ
                     <q-btn
-                      v-if="formData.status === 'NEW'"
+                      v-if="!isReadonly"
                       size="12px"
                       flat
                       round
                       dense
                       color="add"
                       class="q-ml-sm"
-                      @click="toggleModal"
                       icon="mdi-plus"
+                      @click="onClickOpenPopup"
                     >
-                      <q-tooltip>เพิ่มผู้ถูกร้องเรียน</q-tooltip>
+                      <q-tooltip>เพิ่มกรรมการ</q-tooltip>
                     </q-btn>
                   </div>
                   <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 q-pa-sm">
-                    <d-table
-                      ref="table"
-                      :columns="investigateFactStore.columnsPerson"
-                      :rows="investigateFactStore.rowsAdd"
-                      row-key="idcard"
-                      flat
-                      bordered
-                      :paging="true"
-                      dense
-                      class="custom-header-table"
-                      :visible-columns="
-                        investigateFactStore.visibleColumnsPerson
+                  <div class="col-xs-12 q-pa-sm row">
+                    <Table
+                      class="col-12"
+                      style="max-height: 80vh"
+                      :rows="rows"
+                      :columns="investigateDis.columnsDirector"
+                      :filter="filter"
+                      :visible-columns="investigateDis.visibleColumnsDirector"
+                      v-model:inputfilter="filter"
+                      v-model:inputvisible="
+                        investigateDis.visibleColumnsDirector
                       "
+                      :pagination="initialPagination"
+                      :nornmalData="true"
+                      :paging="true"
+                      :titleText="''"
                     >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
-                          >
-                            <span class="text-weight-medium">{{
-                              col.label
-                            }}</span>
-                          </q-th>
-                          <q-th auto-width></q-th>
-                        </q-tr>
-                      </template>
-                      <template v-slot:body="props">
+                      <template #columns="props">
                         <q-tr :props="props" class="cursor-pointer">
                           <q-td
                             v-for="col in props.cols"
                             :key="col.name"
                             :props="props"
                           >
-                            <div v-if="col.name == 'no'">
+                            <div
+                              v-if="col.name == 'no'"
+                              class="table_ellipsis2"
+                            >
                               {{ props.rowIndex + 1 }}
                             </div>
-                            <div v-else-if="col.name == 'info'">
-                              <q-btn
-                                size="14px"
-                                flat
-                                round
-                                dense
-                                color="info"
-                                icon="info"
-                                @click="
-                                  router.push(`/registry/${props.row.personId}`)
-                                "
-                                ><q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip></q-btn
-                              >
-                            </div>
-                            <div
-                              v-else-if="col.name === 'organization'"
-                              class="table_ellipsis"
-                            >
-                              {{ props.row.organization }}
-                            </div>
-                            <div v-else>
+                            <div v-else class="table_ellipsis2">
                               {{ col.value }}
                             </div>
                           </q-td>
-                          <!-- v-if="formData.status === 'NEW'" -->
-                          <q-td auto-width>
+                          <q-td>
                             <q-btn
-                              v-if="formData.status === 'NEW'"
+                              v-if="!isReadonly"
+                              dense
                               size="12px"
                               flat
                               round
-                              dense
                               color="red"
-                              class="q-ml-sm"
                               icon="mdi-delete-outline"
-                              @click="deletePerson(props.row.id)"
-                              ><q-tooltip>ลบผู้ถูกร้องเรียน</q-tooltip></q-btn
+                              @click="deleteDirector(props.row.id)"
                             >
+                              <q-tooltip>ลบข้อมูล</q-tooltip>
+                            </q-btn>
                           </q-td>
                         </q-tr>
                       </template>
-                    </d-table>
+                    </Table>
                   </div>
                 </q-card>
               </div>
-              <div class="col-xs-12 col-sm-3">
-                <q-select
-                  :readonly="formData.status !== 'NEW'"
-                  for="#investigationDetail"
+
+              <div class="col-12">
+                <q-input
+                  :readonly="isReadonly"
+                  for="#investigationDescription"
+                  class="full-width cursor-pointer"
                   outlined
-                  hide-bottom-space
+                  ref="investigationDescriptionRef"
                   dense
                   lazy-rules
-                  ref="investigationDetailRef"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
-                  v-model="formData.investigationDetail"
-                  :options="investigateFactStore.investigationDetailOp"
-                  label="ลักษณะการสืบสวน"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  option-value="id"
-                  use-input
-                  @filter="(inputValue: any,
-        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
-        )"
-                  ><template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey">
-                        ไม่มีข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
+                  borderless
+                  v-model="formData.investigationDescription"
+                  :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                  hide-bottom-space
+                  :label="`${'รายละเอียด'}`"
+                  type="textarea"
+                  @update:model-value="changeFormData()"
+                />
               </div>
-            </div>
-            <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
-              <q-input
-                for="#investigationDetailOther"
-                class="full-width cursor-pointer"
-                outlined
-                ref="investigationDetailOtherRef"
-                dense
-                borderless
-                v-model="formData.investigationDetailOther"
-                hide-bottom-space
-                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-                type="textarea"
-                :rules="[
-                  (val) =>
-                    formData.investigationDetail === 'OTHER'
-                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                      : true,
-                ]"
-              />
-            </div>
 
-            <div class="row">
-              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
-                <div
-                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              <div class="row col-12">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  วันที่สืบสวน
-                  <q-checkbox
-                    v-if="
-                      props.data.investigationDateStart != null &&
-                      props.data.investigationDateEnd != null
-                    "
-                    for="#clickTime"
-                    size="md"
-                    v-model="formData.clickTime"
-                    label="ขยายเวลา"
-                    color="primary"
-                    dense
-                    class="text-weight-medium q-ml-sm"
-                    keep-color
-                  />
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <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 && statusStep"
-                        v-model="formData.investigationDateStart"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            for="#date"
-                            class="full-width cursor-pointer"
-                            ref="dateRef"
-                            :readonly="statusStep && isUpdate"
-                            outlined
-                            dense
-                            lazy-rules
-                            borderless
-                            hide-bottom-space
-                            :model-value="
-                              formData.investigationDateStart
-                                ? date2Thai(formData.investigationDateStart)
-                                : null
-                            "
-                            :rules="[
-                              (val) =>
-                                !!val || `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
-                            ]"
-                            :label="`${'วันที่เริ่มการสืบสวน'}`"
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                color="primary"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-
-                    <div class="col-3" v-if="formData.clickTime">
-                      <q-select
-                        for="#daysExtend"
-                        outlined
-                        dense
-                        lazy-rules
-                        ref="daysExtendRef"
-                        v-model="formData.daysExtend"
-                        :options="investigateFactStore.daysExtendOp"
-                        label="จำนวนวันที่ต้องการขยาย"
-                        emit-value
-                        hide-bottom-space
-                        map-options
-                        :rules="[
-                          (val) =>
-                            formData.clickTime
-                              ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                              : true,
-                        ]"
-                        option-label="name"
-                        option-value="id"
-                        use-input
-                        @update:model-value="calEndDate"
-                        ><template v-slot:no-option>
-                          <q-item>
-                            <q-item-section class="text-grey">
-                              ไม่มีข้อมูล
-                            </q-item-section>
-                          </q-item>
-                        </template>
-                      </q-select>
-                    </div>
-
-                    <div class="col-3">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="formData.investigationDateEnd"
-                        :readonly="statusStep && isUpdate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            for="#dateEnd"
-                            ref="dateEndRef"
-                            class="full-width cursor-pointer"
-                            :readonly="statusStep && isUpdate"
-                            outlined
-                            dense
-                            lazy-rules
-                            hide-bottom-space
-                            borderless
-                            :model-value="
-                              formData.investigationDateEnd
-                                ? date2Thai(formData.investigationDateEnd)
-                                : null
-                            "
-                            :rules="[
-                              (val) =>
-                                !!val ||
-                                `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
-                            ]"
-                            :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                color="primary"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
+                  <div
+                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                  >
+                    ผลการสืบสวน
                   </div>
-                </div>
-              </q-card>
-            </div>
 
-            <div class="row col-12">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
-                <div
-                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                >
-                  กรรมการ
-                  <q-btn
-                    size="12px"
-                    flat
-                    round
-                    dense
-                    color="add"
-                    class="q-ml-sm"
-                    icon="mdi-plus"
-                    @click="onClickOpenPopup"
-                  >
-                    <q-tooltip>เพิ่มกรรมการ</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="col-xs-12 q-pa-sm row">
-                  <Table
-                    class="col-12"
-                    style="max-height: 80vh"
-                    :rows="rows"
-                    :columns="investigateDis.columnsDirector"
-                    :filter="filter"
-                    :visible-columns="investigateDis.visibleColumnsDirector"
-                    v-model:inputfilter="filter"
-                    v-model:inputvisible="investigateDis.visibleColumnsDirector"
-                    :pagination="initialPagination"
-                    :nornmalData="true"
-                    :paging="true"
-                    :titleText="''"
-                  >
-                    <template #columns="props">
-                      <q-tr :props="props" class="cursor-pointer">
-                        <q-td
-                          v-for="col in props.cols"
-                          :key="col.name"
-                          :props="props"
-                        >
-                          <div v-if="col.name == 'no'" class="table_ellipsis2">
-                            {{ props.rowIndex + 1 }}
-                          </div>
-                          <div v-else class="table_ellipsis2">
-                            {{ col.value }}
-                          </div>
-                        </q-td>
-                        <q-td>
-                          <q-btn
-                            dense
-                            size="12px"
-                            flat
-                            round
-                            color="red"
-                            icon="mdi-delete-outline"
-                            @click="deleteDirector(props.row.id)"
-                          >
-                            <q-tooltip>ลบข้อมูล</q-tooltip>
-                          </q-btn>
-                        </q-td>
-                      </q-tr>
-                    </template>
-                  </Table>
-                </div>
-              </q-card>
-            </div>
+                  <div class="col-12"><q-separator /></div>
 
-            <!-- <div class="col-12">
-          <q-input
-            for="#complaintdetail"
-            class="full-width cursor-pointer"
-            outlined
-            ref="complaintdetailRef"
-            dense
-            lazy-rules
-            borderless
-            v-model="formData.complaintdetail"
-            :rules="[
-              (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
-            ]"
-            hide-bottom-space
-            :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
-            type="textarea"
-          />
-        </div> -->
-
-            <!-- <div class="col-12">
-          <q-file
-            for="#fileComplaint"
-            outlined
-            ref="fileComplaintRef"
-            dense
-            v-model="formData.fileComplaint"
-            label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
-            lazy-rules
-            :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-            hide-bottom-space
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" color="primary" />
-            </template>
-          </q-file>
-        </div> -->
-
-            <div class="col-12">
-              <q-input
-                for="#investigationDescription"
-                class="full-width cursor-pointer"
-                outlined
-                ref="investigationDescriptionRef"
-                dense
-                lazy-rules
-                borderless
-                v-model="formData.investigationDescription"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                type="textarea"
-              />
-            </div>
-
-            <div class="row col-12">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
-                <div
-                  class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                >
-                  ผลการสืบสวน
-                </div>
-
-                <div class="col-12"><q-separator /></div>
-
-                <div class="col-xs-12 q-pa-sm row">
-                  <div class="row col-12 q-col-gutter-md">
-                    <div class="col-3">
-                      <q-select
-                        for="#fault"
-                        outlined
-                        dense
-                        :readonly="statusStep"
-                        lazy-rules
-                        ref="investigationStatusResultRef"
-                        v-model="formData.investigationStatusResult"
-                        :rules="[
-                          (val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`,
-                        ]"
-                        :options="
-                          investigateFactStore.investigationStatusResultOptions
-                        "
-                        label="ผลการสืบสวน"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        option-value="id"
-                        use-input
-                        @filter="(inputValue: any,
+                  <div class="col-xs-12 q-pa-sm row">
+                    <div class="row col-12 q-col-gutter-md">
+                      <div class="col-3">
+                        <q-select
+                          for="#fault"
+                          outlined
+                          dense
+                          :readonly="isReadonly"
+                          lazy-rules
+                          ref="investigationStatusResultRef"
+                          v-model="formData.investigationStatusResult"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`,
+                          ]"
+                          :options="mainStore.statusResultOptions"
+                          label="ผลการสืบสวน"
+                          emit-value
+                          map-options
+                          option-label="name"
+                          option-value="id"
+                          use-input
+                          @filter="(inputValue: any,
                 doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
                 )"
-                        ><template v-slot:no-option>
-                          <q-item>
-                            <q-item-section class="text-grey">
-                              ไม่มีข้อมูล
-                            </q-item-section>
-                          </q-item>
-                        </template>
-                      </q-select>
-                    </div>
+                          @update:model-value="changeFormData()"
+                          ><template v-slot:no-option>
+                            <q-item>
+                              <q-item-section class="text-grey">
+                                ไม่มีข้อมูล
+                              </q-item-section>
+                            </q-item>
+                          </template>
+                        </q-select>
+                      </div>
 
-                    <div
-                      v-if="formData.investigationStatusResult == 'HAVE_CAUSE'"
-                      class="col-3"
-                    >
-                      <q-select
-                        for="#fault"
-                        outlined
-                        dense
-                        ref="investigationCauseTextRef"
-                        v-model="formData.investigationCauseText"
-                        :rules="[
-                          (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
-                        ]"
-                        :options="
-                          investigateFactStore.investigationCauseTextOptions
+                      <div
+                        v-if="
+                          formData.investigationStatusResult == 'HAVE_CAUSE'
                         "
-                        label="ร้ายแรง/ไม่ร้ายแรง"
-                        emit-value
-                        map-options
-                        option-label="name"
-                        option-value="id"
-                        use-input
-                        ><template v-slot:no-option>
-                          <q-item>
-                            <q-item-section class="text-grey">
-                              ไม่มีข้อมูล
-                            </q-item-section>
-                          </q-item>
-                        </template>
-                      </q-select>
+                        class="col-3"
+                      >
+                        <q-select
+                          :readonly="isReadonly"
+                          for="#fault"
+                          outlined
+                          dense
+                          ref="investigationCauseTextRef"
+                          v-model="formData.investigationCauseText"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
+                          ]"
+                          :options="mainStore.causeTextOptions"
+                          label="ร้ายแรง/ไม่ร้ายแรง"
+                          emit-value
+                          map-options
+                          option-label="name"
+                          option-value="id"
+                          use-input
+                          @update:model-value="changeFormData()"
+                          ><template v-slot:no-option>
+                            <q-item>
+                              <q-item-section class="text-grey">
+                                ไม่มีข้อมูล
+                              </q-item-section>
+                            </q-item>
+                          </template>
+                        </q-select>
+                      </div>
+                    </div>
+
+                    <div class="row col-12">
+                      <q-input
+                        class="full-width cursor-pointer"
+                        outlined
+                        ref="resultRef"
+                        :readonly="isReadonly"
+                        dense
+                        lazy-rules
+                        borderless
+                        v-model="formData.result"
+                        :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+                        hide-bottom-space
+                        :label="`${'เหตุผล'}`"
+                        type="textarea"
+                        @update:model-value="changeFormData()"
+                      />
                     </div>
                   </div>
+                </q-card>
+              </div>
 
-                  <div class="row col-12">
-                    <q-input
-                      class="full-width cursor-pointer"
-                      outlined
-                      ref="resultRef"
-                      dense
-                      lazy-rules
-                      borderless
-                      v-model="formData.result"
-                      :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-                      hide-bottom-space
-                      :label="`${'เหตุผล'}`"
-                      type="textarea"
-                    />
-                  </div>
-                </div>
-              </q-card>
+              <q-separator />
+              <div v-if="!isReadonly" class="row col-12 q-pa-sm">
+                <q-space />
+                <q-btn
+                  id="onSubmit"
+                  type="submit"
+                  label="บันทึก"
+                  color="secondary"
+                  ><q-tooltip>บันทึก</q-tooltip></q-btn
+                >
+              </div>
             </div>
-          </div>
-
-          <q-separator />
-          <div class="row col-12 q-pa-sm">
-            <q-space />
-            <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
-              ><q-tooltip>บันทึก</q-tooltip></q-btn
-            >
-          </div>
-        </form>
-      </q-card>
+          </q-card>
+        </div>
+      </form>
     </div>
+
+    <!-- อัพโหลดไฟล์ -->
     <div class="col-xs-12 col-sm-12 col-md-3">
       <q-card flat bordered class="q-pa-md q-mb-sm">
         <div class="col-xs-12 q-mb-sm">
@@ -1231,88 +1117,89 @@ onMounted(async () => {
               อัปโหลดไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-file
-              class="col-10 q-pa-sm"
-              for="#evidenceFiles"
-              outlined
-              dense
-              v-model="formData.evidenceFiles"
-              label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
-              hide-bottom-space
-            >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-            <div class="col-2 self-center">
-              <q-btn
-                v-if="formData.evidenceFiles"
-                size="14px"
-                flat
-                round
-                dense
-                color="add"
-                class="q-ml-sm"
-                icon="mdi-upload"
-                @click="uploadFileRelevant"
-                ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
-              >
-            </div>
+
             <div
-              class="col-12"
-              v-if="
-                formData.disciplineInvestigateRelevantDocs &&
-                formData.disciplineInvestigateRelevantDocs.length === 0
-              "
+              v-if="!isReadonly && formData.id !== ''"
+              class="col-12 q-pa-sm row"
             >
-              <q-card class="q-pa-md q-ma-xs" bordered>
-                ไม่มีรายการเอกสาร
-              </q-card>
-            </div>
-            <q-list
-              separator
-              class="full-width q-mt-md"
-              v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
-            >
-              <q-item
-                clickable
-                v-ripple
-                v-for="(file, index) in props.data
-                  .disciplineInvestigateRelevantDocs"
-                :key="index"
+              <q-file
+                class="col-11"
+                for="#evidenceFiles"
+                outlined
+                dense
+                v-model="formData.evidenceFiles"
+                label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
+                hide-bottom-space
               >
-                <q-item-section>{{ file.fileName }}</q-item-section>
-                <q-item-section avatar>
-                  <div class="row">
-                    <div>
-                      <q-btn
-                        dense
-                        flat
-                        round
-                        size="12px"
-                        color="blue"
-                        icon="mdi-download-outline"
-                        @click="downloadFileRelevant(file.pathName)"
-                      >
-                        <q-tooltip>ดาวน์โหลด</q-tooltip>
-                      </q-btn>
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+              <div class="col-1 self-center">
+                <q-btn
+                  v-if="formData.evidenceFiles"
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  icon="mdi-upload"
+                  @click="uploadFileRelevant"
+                  ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
+                >
+              </div>
+            </div>
+
+            <div
+              v-if="props.data.disciplineInvestigateRelevantDocs.length > 0"
+              class="col-xs-12 q-pa-sm row"
+            >
+              <q-list
+                v-for="file in props.data.disciplineInvestigateRelevantDocs"
+                :key="file.id"
+                class="full-width"
+                bordered
+                separator
+              >
+                <q-item clickable v-ripple>
+                  <q-item-section>{{ file.fileName }}</q-item-section>
+                  <q-item-section avatar>
+                    <div class="row">
+                      <div>
+                        <q-btn
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="blue"
+                          icon="mdi-download-outline"
+                          @click="downloadFileRelevant(file.pathName)"
+                        >
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+                        </q-btn>
+                      </div>
+                      <div>
+                        <q-btn
+                          v-if="!isReadonly"
+                          dense
+                          flat
+                          round
+                          size="12px"
+                          color="red"
+                          icon="mdi-delete-outline"
+                          @click="deleteFileRelevant(file.id)"
+                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                        >
+                      </div>
                     </div>
-                    <div>
-                      <q-btn
-                        dense
-                        flat
-                        round
-                        size="12px"
-                        color="red"
-                        icon="mdi-delete-outline"
-                        @click="deleteFileRelevant(file.id)"
-                        ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
-                      >
-                    </div>
-                  </div>
-                </q-item-section>
-              </q-item>
-            </q-list>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+
+            <div class="col-12 q-pa-sm" v-else>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+            </div>
           </q-card>
         </div>
         <div class="col-xs-12">
@@ -1321,54 +1208,55 @@ onMounted(async () => {
               อัปโหลดไฟล์เอกสารหลักฐาน
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-file
-              v-if="formData.status === 'NEW'"
-              class="col-10 q-pa-sm"
-              for="#documentFile"
-              outlined
-              dense
-              v-model="formData.documentFile"
-              label="ไฟล์เอกสารหลักฐาน"
-              hide-bottom-space
+            <div
+              v-if="!isReadonly && formData.id !== ''"
+              class="col-12 q-pa-sm row"
             >
-              <template v-slot:prepend>
-                <q-icon name="attach_file" color="primary" />
-              </template>
-            </q-file>
-
-            <div class="col-2 self-center">
-              <q-btn
-                v-if="formData.documentFile"
-                size="14px"
-                flat
-                round
+              <q-file
+                for="inputFiles"
+                class="col-11"
+                outlined
                 dense
-                color="add"
-                icon="mdi-upload"
-                @click="uploadFile"
-                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                v-model="formData.documentFile"
+                @added="uploadFile"
+                label="ไฟล์เอกสารหลักฐาน"
+                hide-bottom-space
+                lazy-rules
+                accept=".pdf,.xlsx,.doc"
+                clearable
               >
-            </div>
-            <div
-              v-if="formData.disciplineInvestigateDocs.length === 0"
-              class="col-12"
-            >
-              <q-card class="q-pa-md q-ma-xs" bordered>
-                ไม่มีรายการเอกสาร
-              </q-card>
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" color="primary" />
+                </template>
+              </q-file>
+
+              <div class="col-1 self-center">
+                <q-btn
+                  v-if="formData.documentFile"
+                  size="14px"
+                  flat
+                  round
+                  dense
+                  color="add"
+                  icon="mdi-upload"
+                  @click="uploadFile"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
             </div>
 
             <div
-              class="col-xs-12 q-pa-sm row"
               v-if="props.data.disciplineInvestigateDocs.length > 0"
+              class="col-xs-12 q-pa-sm row"
             >
-              <q-list separator class="full-width">
-                <q-item
-                  clickable
-                  v-ripple
-                  v-for="file in props.data.disciplineInvestigateDocs"
-                  :key="file.id"
-                >
+              <q-list
+                v-for="file in props.data.disciplineInvestigateDocs"
+                :key="file.id"
+                class="full-width"
+                bordered
+                separator
+              >
+                <q-item clickable v-ripple>
                   <q-item-section>{{ file.fileName }}</q-item-section>
                   <q-item-section avatar>
                     <div class="row">
@@ -1382,12 +1270,12 @@ onMounted(async () => {
                           icon="mdi-download-outline"
                           @click="downloadFile(file.pathName)"
                         >
-                          <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
+                          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                         </q-btn>
                       </div>
                       <div>
                         <q-btn
-                          v-if="formData.status === 'NEW'"
+                          v-if="!isReadonly"
                           dense
                           flat
                           round
@@ -1395,7 +1283,7 @@ onMounted(async () => {
                           color="red"
                           icon="mdi-delete-outline"
                           @click="deleteFile(file.id)"
-                          ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
+                          ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                         >
                       </div>
                     </div>
@@ -1403,6 +1291,10 @@ onMounted(async () => {
                 </q-item>
               </q-list>
             </div>
+
+            <div class="col-12 q-pa-sm" v-else>
+              <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+            </div>
           </q-card>
         </div>
       </q-card>
@@ -1411,15 +1303,15 @@ onMounted(async () => {
 
   <DialogAddPersonal
     title="ผู้ถูกร้องเรียน"
-    :checkId="investigateFactStore.rowsAdd"
+    :checkId="mainStore.rowsAdd"
     :modal="modalPerson"
-    btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
+    btn-title="เพิ่มรายชื่อผู้ถูกร้องเรียน"
     :close="toggleModal"
     :save="addPerson"
     @returnData="handleSave"
   />
 
-  <Dialogbody
+  <DialogDirector
     :get-list="getList"
     v-model:Modal="modal"
     :clickClose="clickClose"
@@ -1430,7 +1322,14 @@ onMounted(async () => {
     :rowsPerPage="rowsPerPage"
     :page="page"
     :maxPage="maxPage"
+    :selected-row="rows"
     @update:pagination="updatePagingProp"
     @returnDirector="returnDirector"
   />
 </template>
+
+<style scoped>
+.q-banner {
+  min-height: 25px;
+}
+</style>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 130373205..9fa98b97d 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -5,20 +5,18 @@ import { useRouter, useRoute } from "vue-router";
 import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
+import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vue";
 /**import component*/
 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,
-  PersonsArray,
-} from "@/modules/11_discipline/interface/request/disciplinary";
+import type { PersonsArray } from "@/modules/11_discipline/interface/request/disciplinary";
 import type {
   FormData as FormDataComplaint,
   ArrayPerson,
   ArrayFileList,
 } from "@/modules/11_discipline/interface/request/complaint";
+import PopupSendToNext from "@/modules/11_discipline/components/PopupSendToNext.vue";
 
 import type { FormData as FormInvestigateFact } from "@/modules/11_discipline/interface/request/investigateFact";
 
@@ -38,6 +36,8 @@ const id = ref<string>(route.params.id as string);
 const data = ref<object>();
 const status = ref<string>("");
 
+const idInvestigate = ref<string>("");
+const idComplaint = ref<string>("");
 /** function fetchData สอบสวนความผิดทางวินัย*/
 async function fetchDetailDisciplinary() {
   showLoader();
@@ -46,6 +46,8 @@ async function fetchDetailDisciplinary() {
     .then((res) => {
       data.value = res.data.result;
       status.value = res.data.result.status;
+      idComplaint.value = res.data.result.idComplaint;
+      idInvestigate.value = res.data.result.idInvestigate;
     })
     .catch((err) => {
       messageError($q, err);
@@ -59,7 +61,7 @@ async function fetchDetailDisciplinary() {
 async function fetchDetailInvestigate() {
   showLoader();
   await http
-    .get(config.API.disciplineInvestigateById(id.value))
+    .get(config.API.investigateById(idInvestigate.value))
     .then((res) => {
       const dataList = res.data.result;
       dataInvestigatefacts.id = dataList.id;
@@ -85,6 +87,9 @@ async function fetchDetailInvestigate() {
         dataList.disciplineInvestigateRelevantDocs;
       dataInvestigatefacts.investigationStatusResult =
         dataList.investigationStatusResult;
+      dataInvestigatefacts.investigationExtendStatus = dataList.investigationExtendStatus;
+      dataInvestigatefacts.investigationDaysExtend =
+        dataList.investigationDaysExtend;
     })
     .catch((err) => {
       messageError($q, err);
@@ -98,7 +103,7 @@ async function fetchDetailInvestigate() {
 async function fetchDetailComplaints() {
   showLoader();
   await http
-    .get(config.API.disciplineComplaintsById(id.value))
+    .get(config.API.complaintbyId(idComplaint.value))
     .then((res) => {
       const dataList = res.data.result;
       dataComplaints.id = dataList.id;
@@ -169,11 +174,16 @@ function sentIssue() {
 }
 
 function sentIssueGate() {
-  dialogConfirm($q, () => confirmSentIssueGate(),'ยืนยันส่งไปสรุปผลการพิจารณา','ต้องการยืนยันส่งไปสรุปผลการพิจารณาใช่หรือไม่?');
+  dialogConfirm(
+    $q,
+    () => confirmSentIssueGate(),
+    "ยืนยันส่งไปสรุปผลการพิจารณา",
+    "ต้องการยืนยันส่งไปสรุปผลการพิจารณาใช่หรือไม่?"
+  );
 }
 
 function confirmSentIssueGate() {
-  showLoader()
+  showLoader();
   http
     .get(config.API.disciplinaryApprove(id.value))
     .then((res) => {})
@@ -271,6 +281,7 @@ watch(
 
 /** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
 const personObjComplaint = reactive<ArrayPerson>({
+  id: "",
   personId: "",
   idcard: "",
   name: "",
@@ -442,10 +453,10 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
   investigationDetailOther: "",
   evidenceFiles: null,
   fileComplaint: null,
-  clickTime: false,
+  investigationExtendStatus: false,
   investigationDateStart: null,
   investigationDateEnd: null,
-  daysExtend: null,
+  investigationDaysExtend: null,
   investigationStatusResult: "",
   investigationCauseText: "",
   complaintStatus: "",
@@ -541,7 +552,7 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
     </q-card>
   </div>
 
-  <Popup
+  <PopupSendToNext
     :modal="modalPopup"
     :close="closePopup"
     title="ส่งไปพักราชการ"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index ed816c6c8..8fa299b48 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -23,7 +23,7 @@ import type { DataOptionRes } from "@/modules/11_discipline/interface/response/M
 
 /** import components*/
 import DialogAddPersonal from "@/components/Dialogs/AddPersonal.vue";
-import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
+import DialogDirector from "@/modules/11_discipline/components/DialogDirector.vue";
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/DirectorTable.vue";
 import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
 
@@ -31,9 +31,12 @@ import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
+import { co } from "@fullcalendar/core/internal-common";
 
 const complainstStore = useComplainstDataStore();
 const investigateDis = useInvestigateDisStore();
+const mainStore = useDisciplineMainStore();
 const { filterSelector } = complainstStore; // function จาก store complainstStore
 const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader, dialogConfirm, messageError } =
@@ -52,95 +55,13 @@ const modalPerson = ref<boolean>(false);
 /**  search data table*/
 const filter = ref<string>("");
 
+const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
 function toggleModal() {
   modalPerson.value = !modalPerson.value;
 }
 
-/** หัวตารางของรายการผู้ถูกสอบสวน กรณีบุคคล */
-const columnsPerson = ref<QTableProps["columns"]>([
-  {
-    name: "info",
-    align: "center",
-    label: "",
-    sortable: false,
-    field: "info",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "idcard",
-    align: "left",
-    label: "เลขบัตรประชาชน",
-    sortable: true,
-    field: "idcard",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "positionLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "เงินเดือน",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organization",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
 /** formData*/
 const formData = reactive<FormData>({
   respondentType: "",
@@ -158,7 +79,7 @@ const formData = reactive<FormData>({
   result: "", // ผลการสอบสวน
   directors: [],
   persons: [],
-  clickTime: false,
+  extendStatus: false,
   disciplinaryDateStart: null, // วันที่เริ่มการสอบสวน
   disciplinaryDateEnd: null, // วันที่สิ้นสุดการสอบสวน
   daysExtend: 0,
@@ -167,21 +88,6 @@ const formData = reactive<FormData>({
   disciplinaryStatusResult: "",
   disciplinaryCauseText: "",
   disciplinaryResult: "",
-
-  // detailComplaint: "",
-  // whereInvestigate: "",
-  // trueDetail: "",
-  // evidence: "",
-  // recordAccuser: "",
-  // witnesses: "",
-  // InvestResults: "",
-  // complaintStatus: "",
-  // filesEvidence: null,
-  // filesRecordAccuser: null,
-  // filesWitnesses: null,
-  // filesEtc: null,
-  // organizationId: "",
-  // consideredAgency: "",
 });
 const disciplineDisciplinary_DocRelevants = ref<FileLists[]>([]); // ยังไม่มีรอ api
 const disciplineDisciplinary_DocSummaryEvidences = ref<FileLists[]>([]);
@@ -280,8 +186,7 @@ function validateForm() {
   }
   if (hasError.every((result) => result === true)) {
     onSubmit();
-  } else {
-    console.log("ไม่ผ่าน ");
+    isSave.value = false;
   }
 }
 
@@ -306,8 +211,6 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      const dataList = formData.directors.map((item: any) => item.id);
-      formData.directors = dataList;
       emit("submit:disciplinary", formData);
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -315,14 +218,23 @@ function onSubmit() {
   );
 }
 
-/** ฟังชั่น delect */
-async function deleteData(id: string) {
-  console.log("delete");
+/** ฟังชั่นลบข้อมูลกรรมการ */
+async function deleteDirector(id: string) {
+  changeFormData();
+  const dataRow = rows.value;
+  const updatedRows = dataRow.filter((item: any) => item.id !== id);
+  rows.value = updatedRows;
+
+  const dataList = updatedRows.map((item: any) => item.id);
+  formData.directors = dataList;
 }
 
 /** เรียกข้อมูลรายละเอียด*/
 async function fetchDatadetail() {
   if (props.data) {
+    isReadonly.value = props.data.status != "NEW" ?? true;
+    isSave.value = false;
+
     formData.respondentType = props.data.respondentType;
     formData.organizationId = props.data.organizationId;
     formData.consideredAgency = props.data.consideredAgency;
@@ -337,7 +249,6 @@ async function fetchDatadetail() {
     formData.disciplinaryRecordAccuser = props.data.disciplinaryRecordAccuser;
     formData.disciplinaryWitnesses = props.data.disciplinaryWitnesses;
     formData.result = props.data.result;
-    formData.directors = props.data.director ?? [];
     formData.persons = props.data.persons ?? [];
     formData.disciplinaryDateStart = props.data.disciplinaryDateStart ?? null;
     formData.disciplinaryDateEnd = props.data.disciplinaryDateEnd ?? null;
@@ -359,23 +270,25 @@ async function fetchDatadetail() {
 
     investigateDis.rowSent = formData.persons;
 
+    formData.disciplinaryStatusResult = props.data.disciplinaryStatusResult;
+    formData.disciplinaryCauseText = props.data.disciplinaryCauseText;
+    formData.disciplinaryResult = props.data.disciplinaryResult;
+
     /** MAP รายชื่อกรรมการ หน้าหลัก */
-    let datalistDirector: responseType[] = formData.directors.map(
-      (e: directorType) => ({
-        id: e.id,
-        directorId: e.directorId,
-        name: `${e.prefix}${e.firstName} ${e.lastName}`,
-        prefix: e.prefix,
-        firstName: e.firstName,
-        lastName: e.lastName,
-        position: e.position ? e.position : "-",
-        email: e.email ? e.email : "-",
-        phone: e.phone ? e.phone : "-",
-        total: Number(e.total) ?? "-",
-        duty: e.duty ? e.duty : "-",
-      })
-    );
-    rows.value = datalistDirector;
+    const dataMap = props.data.director.map((item: any) => ({
+      id: item.directorId,
+      name: `${item.prefix}${item.firstName} ${item.lastName}`,
+      prefix: item.prefix,
+      firstName: item.firstName,
+      lastName: item.lastName,
+      position: item.position,
+      email: item.email,
+      phone: item.phone,
+    }));
+
+    rows.value = dataMap;
+    const dataList = dataMap.map((item: any) => item.id);
+    formData.directors = dataList;
   }
 }
 
@@ -518,6 +431,11 @@ async function selectComplainant(val: string) {
   // }
 }
 
+/** ฟังก์ชั่นเช็คการแก้ไขฟอร์มแล้วไม่ได้กดบันทึก */
+function changeFormData() {
+  isSave.value = true;
+}
+
 /** Hook */
 onMounted(async () => {
   await fetchOrganization();
@@ -652,7 +570,7 @@ onMounted(async () => {
                     <div class="col-xs-12 q-pa-sm">
                       <d-table
                         ref="table"
-                        :columns="columnsPerson"
+                        :columns="mainStore.columnsRespondent"
                         :rows="formData.persons"
                         row-key="personId"
                         flat
@@ -730,16 +648,16 @@ onMounted(async () => {
                       class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                     >
                       วันที่สอบสวน
-                      <!-- v-if="
-                        props.data.disciplinaryDateStart &&
-                        props.data.disciplinaryDateStart != null &&
-                        props.data.disciplinaryDateEnd != null
-                      " -->
 
                       <q-checkbox
-                        for="#clickTime"
+                        v-if="
+                          formData.disciplinaryDateStart != null &&
+                          formData.disciplinaryDateEnd != null &&
+                          ((isReadonly && formData.extendStatus) || !isReadonly)
+                        "
+                        for="#extendStatus"
                         size="md"
-                        v-model="formData.clickTime"
+                        v-model="formData.extendStatus"
                         label="ขยายเวลา"
                         color="primary"
                         dense
@@ -750,7 +668,7 @@ onMounted(async () => {
                     <div class="col-12"><q-separator /></div>
                     <div class="q-pa-sm">
                       <div class="q-col-gutter-sm row">
-                        <div class="col-3" v-if="!formData.clickTime">
+                        <div class="col-3" v-if="!formData.extendStatus">
                           <datepicker
                             menu-class-name="modalfix"
                             :readonly="isUpdate"
@@ -802,7 +720,7 @@ onMounted(async () => {
                           </datepicker>
                         </div>
 
-                        <div class="col-3" v-if="formData.clickTime">
+                        <div class="col-3" v-if="formData.extendStatus">
                           <q-selectinvestigateDis
                             for="#daysExtend"
                             outlined
@@ -817,7 +735,7 @@ onMounted(async () => {
                             map-options
                             :rules="[
                             (val: any) =>
-                              formData.clickTime
+                              formData.extendStatus
                                 ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                                 : true,
                           ]"
@@ -1147,8 +1065,8 @@ onMounted(async () => {
                                 flat
                                 round
                                 color="red"
-                                @click="deleteData(props.row.id)"
-                                icon="mdi-delete"
+                                @click="deleteDirector(props.row.id)"
+                                icon="mdi-delete-outline"
                               >
                                 <q-tooltip>ลบข้อมูล</q-tooltip>
                               </q-btn>
@@ -1305,7 +1223,7 @@ onMounted(async () => {
                             :rules="[
                               (val) => !!val || `${'กรุณาเลือกผลการสอบสวน'}`,
                             ]"
-                            :options="investigateDis.offenseDetailsOps"
+                            :options="mainStore.statusResultOptions"
                             label="ผลการสอบสวน"
                             emit-value
                             map-options
@@ -1454,7 +1372,7 @@ onMounted(async () => {
     @returnData="handleSave"
   />
 
-  <Dialogbody
+  <DialogDirector
     v-model:Modal="modal"
     :clickClose="clickClose"
     :rows2="listDirector"
@@ -1464,6 +1382,7 @@ onMounted(async () => {
     :rowsPerPage="rowsPerPage"
     :page="page"
     :maxPage="maxPage"
+    :selected-row="rows"
     @update:pagination="updatePaging"
     @returnDirector="returnDirector"
   />
diff --git a/src/modules/11_discipline/components/4_Result/EditPage.vue b/src/modules/11_discipline/components/4_Result/EditPage.vue
index eec8b3893..9dd1a80fc 100644
--- a/src/modules/11_discipline/components/4_Result/EditPage.vue
+++ b/src/modules/11_discipline/components/4_Result/EditPage.vue
@@ -115,7 +115,7 @@ const dataInvestigatefacts = reactive<FormInvestigateFact>({
   investigationDetailOther: "",
   evidenceFiles: null,
   fileComplaint: null,
-  clickTime: false,
+  extendStatus: false,
   investigationDateStart: null,
   investigationDateEnd: null,
   daysExtend: null,
@@ -172,6 +172,7 @@ async function fetchDetailInvestigate() {
 }
 
 const personObjComplaint = reactive<ArrayPerson>({
+  id: "",
   personId: "",
   idcard: "",
   name: "",
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue b/src/modules/11_discipline/components/DialogDirector.vue
similarity index 92%
rename from src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
rename to src/modules/11_discipline/components/DialogDirector.vue
index 5b26f6f52..84bf29bf9 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue
+++ b/src/modules/11_discipline/components/DialogDirector.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, watch, onMounted } from "vue";
+import {
+  ref,
+  computed,
+  watchEffect,
+  watch,
+  onMounted,
+  type PropType,
+} from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -110,6 +117,10 @@ const props = defineProps({
     type: Function,
     default: () => "",
   },
+  selectedRow: {
+    type: Array as PropType<directorType[]>,
+    required: true,
+  },
 });
 
 const checkSelected = computed(() => {
@@ -118,18 +129,8 @@ const checkSelected = computed(() => {
   }
 });
 
-/** popup ยืนยันส่งัว */
-function saveDirector() {
-  dialogConfirm(
-    $q,
-    () => DirectorSave(),
-    "ยืนยันเพิ่มรายชื่อกรรมการ",
-    "ต้องการยืนยันเพิ่มรายชื่อกรรมการ?"
-  );
-}
-
-/** ส่งไปออกคำสั่ง */
-async function DirectorSave() {
+/** เลือกกรรมการ */
+async function directorSave() {
   emit("returnDirector", selected.value);
 }
 
@@ -152,7 +153,7 @@ function Reset() {
 /** เช็คค่า props.Modal === true */
 watchEffect(() => {
   if (props.Modal === true) {
-    // selected.value = [];
+    selected.value = props.selectedRow;
     props.getList();
   }
 });
@@ -184,6 +185,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog v-model="props.Modal">
     <q-card style="width: 1200px; max-width: 80vw">
@@ -259,7 +261,7 @@ watch(
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn
           label="เพิ่มรายชื่อกรรมการ"
-          @click="saveDirector"
+          @click="directorSave"
           :disable="checkSelected"
           color="public"
         />
diff --git a/src/modules/11_discipline/components/1_Complaint/Popup.vue b/src/modules/11_discipline/components/PopupSendToNext.vue
similarity index 96%
rename from src/modules/11_discipline/components/1_Complaint/Popup.vue
rename to src/modules/11_discipline/components/PopupSendToNext.vue
index 41fcf0a9f..b506ebb5f 100644
--- a/src/modules/11_discipline/components/1_Complaint/Popup.vue
+++ b/src/modules/11_discipline/components/PopupSendToNext.vue
@@ -3,16 +3,13 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import DialogHeader from "@/components/DialogHeader.vue";
 
-
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
-const complainstStore = useComplainstDataStore();
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
 
-const { dialogConfirm, dialogMessageNotify, success } = mixin;
+const { dialogConfirm } = mixin;
 
 const props = defineProps({
   title: {
@@ -63,8 +60,7 @@ function onclickSend() {
     dialogConfirm(
       $q,
       async () => {
-        success($q, `ส่งข้อมูล${props.title}สำเร็จ`);
-        console.log(selected.value);
+        // success($q, `ส่งข้อมูล${props.title}สำเร็จ`);
         emit("returnPerson", selected.value);
         props.close?.();
       },
diff --git a/src/modules/11_discipline/interface/request/complaint.ts b/src/modules/11_discipline/interface/request/complaint.ts
index 0b7b0316c..6f7d00b5e 100644
--- a/src/modules/11_discipline/interface/request/complaint.ts
+++ b/src/modules/11_discipline/interface/request/complaint.ts
@@ -20,6 +20,7 @@ interface FormData {
 }
 
 interface ArrayPerson {
+    id: string
     personId:string
     idcard:string
     name:string
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index f735dc32f..2f12099eb 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -65,7 +65,7 @@ interface FormData {
   result: string;
   directors: Director[];
   persons: Persons[];
-  clickTime: boolean;
+  extendStatus: boolean;
   disciplinaryDateStart: Date | null;
   disciplinaryDateEnd: Date | null;
   daysExtend: number;
diff --git a/src/modules/11_discipline/interface/request/investigate.ts b/src/modules/11_discipline/interface/request/investigate.ts
index 9e9e030d9..c47598d7a 100644
--- a/src/modules/11_discipline/interface/request/investigate.ts
+++ b/src/modules/11_discipline/interface/request/investigate.ts
@@ -6,7 +6,7 @@ interface FormData {
   other: string;
   evidenceFiles: File | null;
   fileComplaint: File | null;
-  clickTime: boolean;
+  extendStatus: boolean;
   date: Date | null;
   dateEnd: Date;
   daysExtend: number | null;
diff --git a/src/modules/11_discipline/interface/request/investigateFact.ts b/src/modules/11_discipline/interface/request/investigateFact.ts
index 930ce53bd..93309b343 100644
--- a/src/modules/11_discipline/interface/request/investigateFact.ts
+++ b/src/modules/11_discipline/interface/request/investigateFact.ts
@@ -9,10 +9,10 @@ interface FormData {
   investigationDetailOther: string;
   evidenceFiles: any | null;
   fileComplaint: File | null;
-  clickTime: boolean;
+  investigationExtendStatus: boolean | null;
   investigationDateStart: Date | null;
   investigationDateEnd: Date|null;
-  daysExtend: number | null;
+  investigationDaysExtend: number | null;
   investigationStatusResult: string;
   investigationCauseText: string;
   complaintStatus:string
diff --git a/src/modules/11_discipline/store.ts b/src/modules/11_discipline/store.ts
index dcff1e8b0..589f0e90c 100644
--- a/src/modules/11_discipline/store.ts
+++ b/src/modules/11_discipline/store.ts
@@ -1,16 +1,22 @@
 import { defineStore } from "pinia";
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+import type { ArrayPerson } from "@/modules/11_discipline/interface/response/investigate";
 
-export const useStoreResultMain = defineStore("resultMain", () => {
-  /** function ผู้ถูกสอบสวน*/
-  function convertRespondentType(val: string) {
-    switch (val) {
-      case "PERSON":
-        return "บุคคล";
-      case "ORGANIZATION":
-        return "หน่วยงาน";
-      case "BANGKOK":
-        return "กรุงเทพมหานคร";
-    }
+export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
+  /** option ผู้ถูกสอบสวน*/
+  const complainantoptionsMain = ref<DataOption[]>([
+    { id: "PERSON", name: "บุคคล" },
+    { id: "ORGANIZATION", name: "หน่วยงาน" },
+    { id: "BANGKOK", name: "กรุงเทพมหานคร" },
+  ]);
+
+  function convertComplaintType(val: string) {
+    const result = complainantoptionsMain.value.find(
+      (x: any) => x.id == val
+    )?.name;
+    return result ? result : "-";
   }
 
   /** function ลักษณะความผิด*/
@@ -27,7 +33,7 @@ export const useStoreResultMain = defineStore("resultMain", () => {
     }
   }
 
-  /** function ลักษณะความผิด*/
+  /** function สถานะ*/
   function convertStatus(val: string) {
     switch (val) {
       case "NEW":
@@ -40,5 +46,256 @@ export const useStoreResultMain = defineStore("resultMain", () => {
         return "ส่งไปสรุปผลการพิจารณาทางวินัย";
     }
   }
-  return { convertRespondentType, convertFault, convertStatus };
+
+  /** option ลักษณะความผิด */
+  const offenseDetailstOptions = ref<DataOption[]>([
+    { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+    { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
+    { id: "DEADLY", name: "ร้ายแรง" },
+  ]);
+
+  function convertOffenseDetailst(val: string) {
+    return (
+      offenseDetailstOptions.value.find((x: any) => x.id == val)?.name ?? "-"
+    );
+  }
+
+  const statusResultOptions = ref<DataOption[]>([
+    { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
+    { id: "HAVE_CAUSE", name: "มีมูล" },
+    { id: "NO_CAUSE", name: "ไม่มีมูล" },
+  ]);
+  function convertStatusResult(val: string) {
+    const result = statusResultOptions.value.find(
+      (x: any) => x.id == val
+    )?.name;
+    return result ? result : "-";
+  }
+
+  const causeTextOptions = ref<DataOption[]>([
+    { id: "ร้ายแรง", name: "ร้ายแรง" },
+    { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
+  ]);
+
+  /** หัวตารางผู้ถูกร้องเรียน */
+  const columnsRespondent = ref<QTableProps["columns"]>([
+    {
+      name: "info",
+      align: "left",
+      label: "",
+      sortable: false,
+      field: "info",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "idcard",
+      align: "left",
+      label: "เลขบัตรประชาชน",
+      sortable: true,
+      field: "idcard",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "name",
+      align: "left",
+      label: "ชื่อ - นามสกุล",
+      sortable: true,
+      field: "name",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "posNo",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "posNo",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "position",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "position",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionLevel",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "positionLevel",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "salary",
+      align: "left",
+      label: "เงินเดือน",
+      sortable: true,
+      field: "salary",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "organization",
+      align: "left",
+      label: "หน่วยงาน",
+      sortable: true,
+      field: "organization",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+  const visibleColumnsRespondent = ref<string[]>([
+    "info",
+    "no",
+    "idcard",
+    "name",
+    "posNo",
+    "position",
+    "positionLevel",
+    "salary",
+    "organization",
+  ]);
+
+  /** หัวตารางกรรมการ */
+  const columnsDirector = ref<QTableProps["columns"]>([
+    {
+      name: "info",
+      align: "left",
+      label: "",
+      sortable: false,
+      field: "info",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: false,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "idcard",
+      align: "left",
+      label: "เลขบัตรประชาชน",
+      sortable: true,
+      field: "idcard",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "name",
+      align: "left",
+      label: "ชื่อ - นามสกุล",
+      sortable: true,
+      field: "name",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "posNo",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "posNo",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "position",
+      align: "left",
+      label: "ตำแหน่ง",
+      sortable: true,
+      field: "position",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "positionLevel",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "positionLevel",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "salary",
+      align: "left",
+      label: "เงินเดือน",
+      sortable: true,
+      field: "salary",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "organization",
+      align: "left",
+      label: "หน่วยงาน",
+      sortable: true,
+      field: "organization",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+
+  /** หัวข้อที่เเสดงในตารางกรรมการ */
+  const visibleColumnsDirector = ref<string[]>([
+    "info",
+    "no",
+    "idcard",
+    "name",
+    "posNo",
+    "position",
+    "positionLevel",
+    "salary",
+    "organization",
+  ]);
+
+  const rowsAdd = ref<ArrayPerson[]>([]);
+  function fetchData(data: ArrayPerson[]) {
+    rowsAdd.value = data;
+  }
+
+  return {
+    complainantoptionsMain,
+    convertFault,
+    convertStatus,
+    columnsRespondent,
+    visibleColumnsRespondent,
+    offenseDetailstOptions,
+    convertOffenseDetailst,
+    convertComplaintType,
+
+    columnsDirector,
+    visibleColumnsDirector,
+    rowsAdd,
+    fetchData,
+
+    statusResultOptions,
+    convertStatusResult,
+
+    causeTextOptions
+  };
 });
diff --git a/src/modules/11_discipline/store/ComplaintsStore.ts b/src/modules/11_discipline/store/ComplaintsStore.ts
index a00d3dad3..4928b8a35 100644
--- a/src/modules/11_discipline/store/ComplaintsStore.ts
+++ b/src/modules/11_discipline/store/ComplaintsStore.ts
@@ -6,11 +6,12 @@ import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import type {
   DataList,
   DataListRow,
-  DataAdd,
   ocListType,
 } from "@/modules/11_discipline/interface/response/complaint";
 import type { ArrayPerson } from "@/modules/11_discipline/interface/request/complaint";
 import type { QTableProps } from "quasar";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
+const mainStore = useDisciplineMainStore();
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
@@ -19,27 +20,17 @@ export const useComplainstDataStore = defineStore(
   "DisciplineComplainst",
   () => {
     const rows = ref<DataListRow[]>([]);
-    const rowsAdd = ref<ArrayPerson[]>([]);
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
 
-    function fetchComplainstAdd(data: ArrayPerson[]) {
-      rowsAdd.value = data;
-    }
-
-    function addCommas(salaryString: string): string {
-      const salaryNumber = parseFloat(salaryString.replace(/,/g, ""));
-      return salaryNumber.toLocaleString();
-    }
-
     function fetchComplainst(data: DataList[]) {
       let dataList: DataListRow[] = data.map((e: DataList) => ({
         id: e.id,
         personId: e.personId,
         title: e.title,
         dateReceived: e.dateReceived ? date2Thai(e.dateReceived) : "-",
-        respondentType: convertComplaintType(e.respondentType),
-        offenseDetails: offenseDetailsTran(e.offenseDetails),
+        respondentType: mainStore.convertComplaintType(e.respondentType),
+        offenseDetails: mainStore.convertOffenseDetailst(e.offenseDetails),
         createdAt: date2Thai(e.createdAt)!,
         levelConsideration: levelConsiderationTran(e.levelConsideration),
         dateConsideration: e.dateConsideration
@@ -50,21 +41,9 @@ export const useComplainstDataStore = defineStore(
       rows.value = dataList;
     }
 
-    // filter options
-    const complainantoptionsMain = ref<DataOption[]>([
-      { id: "PERSON", name: "บุคคล" },
-      { id: "ORGANIZATION", name: "หน่วยงาน" },
-      { id: "BANGKOK", name: "กรุงเทพมหานคร" },
-    ]);
-
-    function convertComplaintType(val: string) {
-      const result = complainantoptionsMain.value.find(
-        (x: any) => x.id == val
-      )?.name;
-      return result ? result : "-";
-    }
-
-    const complainantoptions = ref<DataOption[]>(complainantoptionsMain.value);
+    const complainantoptions = ref<DataOption[]>(
+      mainStore.complainantoptionsMain
+    );
     const consideredAgencytoptions = ref<DataOption[]>([]);
     const organizationIdOp = ref<DataOption[]>([]);
 
@@ -81,29 +60,17 @@ export const useComplainstDataStore = defineStore(
       }
     };
 
-    function offenseDetailsTran(val: string) {
-      switch (val) {
-        case "NOT_SPECIFIED":
-          return "ยังไม่ระบุ";
-        case "NOT_DEADLY":
-          return "ร้ายแรง";
-        case "DEADLY":
-          return "ไม่ร้ายแรง";
-        default:
-          return "-";
-      }
-    }
+    const levelConsiderationtOptions = ref<DataOption[]>([
+      { id: "NORMAL", name: "ปกติ" },
+      { id: "URGENT", name: "ด่วน" },
+      { id: "VERY_URGENT", name: "ด่วนมาก" },
+    ]);
+
     function levelConsiderationTran(val: string) {
-      switch (val) {
-        case "NORMAL":
-          return "ปกติ";
-        case "URGENT":
-          return "ด่วน";
-        case "VERT_URGENT":
-          return "ด่วนมาก";
-        default:
-          return "-";
-      }
+      return (
+        levelConsiderationtOptions.value.find((v: any) => v.id === val)?.name ??
+        "-"
+      );
     }
 
     const agencytoptions = ref<DataOption[]>(consideredAgencytoptions.value);
@@ -119,7 +86,7 @@ export const useComplainstDataStore = defineStore(
       update(() => {
         const needle = val.toLowerCase();
         if (type === "filterrespondentType") {
-          complainantoptions.value = complainantoptionsMain.value.filter(
+          complainantoptions.value = mainStore.complainantoptionsMain.filter(
             (v: any) => v.name.toLowerCase().indexOf(needle) > -1
           );
         } else if (type === "filteragencytoptions") {
@@ -144,7 +111,6 @@ export const useComplainstDataStore = defineStore(
     }
     return {
       rows,
-      rowsAdd,
       visibleColumns,
       columns,
       fetchComplainst,
@@ -153,9 +119,9 @@ export const useComplainstDataStore = defineStore(
       complainantoptions,
       consideredAgencytoptions,
       optionListName,
-      fetchComplainstAdd,
       organizationIdOp,
       ocListFn,
+      levelConsiderationtOptions,
     };
   }
 );
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 9f6ab5069..488a6bdd8 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -8,7 +8,12 @@ import type {
   DataOption,
   DataNumberOption,
 } from "@/modules/11_discipline/interface/index/Main";
-import type { ListData, ArrayPerson, ocListType } from "@/modules/11_discipline/interface/response/investigate";
+import type {
+  ListData,
+  ocListType,
+} from "@/modules/11_discipline/interface/response/investigate";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
+const mainStore = useDisciplineMainStore();
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
@@ -17,11 +22,10 @@ const consideredAgencytoptions = ref<DataOption[]>([]);
 function ocListFn(data: ocListType[]) {
   let dataList: DataOption[] = data.map((item: ocListType) => ({
     id: item.organizationId,
-    name: item.organizationName
-  }))
-  consideredAgencytoptions.value = dataList
-  organizationIdOp.value = dataList
-
+    name: item.organizationName,
+  }));
+  consideredAgencytoptions.value = dataList;
+  organizationIdOp.value = dataList;
 }
 
 /*** store ของข้อมูลสืบสวนข้อเท็จจริง */
@@ -37,40 +41,23 @@ export const useInvestigateFactStore = defineStore(
       { id: 60, name: "60 วัน" },
     ]);
 
-    const offenseDetailsOps = ref<DataOption[]>([
-      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
-      { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
-      { id: "DEADLY", name: "ร้ายแรง" },
-    ]);
     const investigationDetailOps = ref<DataOption[]>([
       { id: "APPOINT_DIRECTORS", name: "แต่งตั้งกรรมการสืบสวน" },
       { id: "SECRET_INVESTIGATION", name: "สืบสวนทางลับ" },
       { id: "OTHER", name: "อื่นๆ" },
     ]);
+
     const faultOps = ref<DataOption[]>([
       { id: "NEW", name: "กำลังสืบสวน" },
       { id: "STOP", name: "ยุติเรื่อง" },
-      { id: "SEND_DISCIPLINARY", name: "ส่งไปสอบสวน" },
+      { id: "SEND_DISCIPLINARY", name: "ส่งไปสอบสวนแล้ว" },
     ]);
-    const investigationStatusResultOptions = ref<DataOption[]>([
-      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
-      { id: "HAVE_CAUSE", name: "มีมูล" },
-      { id: "NO_CAUSE", name: "ไม่มีมูล" },
-    ]);
-    const investigationCauseTextOptions = ref<DataOption[]>([
-      { id: "ร้ายแรง", name: "ร้ายแรง" },
-      { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
-    ]);
-    const respondentTypeOp = ref<DataOption[]>([
-      { id: "PERSON", name: "บุคคล" },
-      { id: "ORGANIZATION", name: "หน่วยงาน" },
-      { id: "BANGKOK", name: "กรุงเทพมหานคร" },
-    ])
+
     const daysExtendOp = ref<DataNumberOption[]>(daysExtendOps.value);
-    const investigationDetailOp = ref<DataOption[]>(investigationDetailOps.value);
+    const investigationDetailOp = ref<DataOption[]>(
+      investigationDetailOps.value
+    );
     const faultOp = ref<DataOption[]>(faultOps.value);
-    const visibleColumnsPerson = ref<string[]>([]);
-    const columnsPerson = ref<QTableProps["columns"]>([]);
     const visibleColumns = ref<string[]>([
       "no",
       "title",
@@ -192,23 +179,19 @@ export const useInvestigateFactStore = defineStore(
 
     const rows = ref<InvestigatefactsDataRowType[]>();
 
-    const rowsAdd = ref<ArrayPerson[]>([])
-    function fetchInvestigateAdd(data: ArrayPerson[]) {
-      rowsAdd.value = data
-    }
-    const respondentTypeOps = ref<DataOption[]>(respondentTypeOp.value)
+    const respondentTypeOps = ref<DataOption[]>(
+      mainStore.complainantoptionsMain
+    );
     function filterSelector(val: string, update: Function, type: string) {
-      console.log(val)
+      console.log(val);
       update(() => {
         const needle = val.toLowerCase();
 
         if (type === "filtercomplainantType") {
-          respondentTypeOps.value = respondentTypeOp.value.filter(
+          respondentTypeOps.value = mainStore.complainantoptionsMain.filter(
             (v: any) => v.name.toLowerCase().indexOf(needle) > -1
           );
-
         }
-
       });
     }
     async function fecthList(data: ListData[]) {
@@ -216,34 +199,29 @@ export const useInvestigateFactStore = defineStore(
         return {
           id: e.id,
           title: e.title,
-          respondentType: convertRespondentType(e.respondentType),
-          offenseDetails: convertOffenseDetails(
-            e.offenseDetails
-          ),
+          respondentType: mainStore.convertComplaintType(e.respondentType),
+          offenseDetails: mainStore.convertOffenseDetailst(e.offenseDetails),
           investigationDetail: convertInvestigationDetail(
             e.investigationDetail
           ),
           dateInvestigate:
             e.investigationDateStart && e.investigationDateEnd
-              ? `${date2Thai(e.investigationDateStart)} - ${date2Thai(e.investigationDateEnd)}`
+              ? `${date2Thai(e.investigationDateStart)} - ${date2Thai(
+                  e.investigationDateEnd
+                )}`
               : "-",
-          investigationStatusResult: activeStatusResult(e.investigationStatusResult),
+          investigationStatusResult: mainStore.convertStatusResult(
+            e.investigationStatusResult
+          ),
           status: convertStatus(e.status),
         };
       });
     }
-    function convertRespondentType(val: string) {
-      const result = respondentTypeOp.value.find((x: any) => x.id == val)?.name;
-      return result ? result : "-";
-    }
-
-    function convertOffenseDetails(val: string) {
-      const result = offenseDetailsOps.value.find((x: any) => x.id == val)?.name;
-      return result ? result : "-";
-    }
 
     function convertInvestigationDetail(val: string) {
-      const result = investigationDetailOps.value.find((x: any) => x.id == val)?.name;
+      const result = investigationDetailOps.value.find(
+        (x: any) => x.id == val
+      )?.name;
       return result ? result : "-";
     }
 
@@ -251,12 +229,6 @@ export const useInvestigateFactStore = defineStore(
       const result = faultOps.value.find((x: any) => x.id == val)?.name;
       return result ? result : "-";
     }
-    function activeStatusResult(val: string) {
-      const result = investigationStatusResultOptions.value.find(
-        (x: any) => x.id == val
-      )?.name;
-      return result ? result : "-";
-    }
 
     return {
       tabMenu,
@@ -271,18 +243,10 @@ export const useInvestigateFactStore = defineStore(
       investigationDetailOp,
       visibleColumns,
       columns,
-      investigationStatusResultOptions,
-      investigationCauseTextOptions,
-      fetchInvestigateAdd,
-      rowsAdd,
-      respondentTypeOp,
       filterSelector,
       respondentTypeOps,
       organizationIdOp,
       ocListFn,
-      columnsPerson,
-      visibleColumnsPerson,
-
     };
   }
 );
diff --git a/src/modules/11_discipline/store/ResultStore.ts b/src/modules/11_discipline/store/ResultStore.ts
index 95a8057fd..afd319e08 100644
--- a/src/modules/11_discipline/store/ResultStore.ts
+++ b/src/modules/11_discipline/store/ResultStore.ts
@@ -11,10 +11,10 @@ import type {
   DataResultList,
 } from "@/modules/11_discipline/interface/response/result";
 
-import { useStoreResultMain } from "@/modules/11_discipline/store";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
-const storeMain = useStoreResultMain();
+const storeMain = useDisciplineMainStore();
 const { date2Thai } = mixin;
 
 export const useDisciplineResultStore = defineStore(
@@ -30,7 +30,7 @@ export const useDisciplineResultStore = defineStore(
         id: e.id,
         title: e.title,
         respondentType: e.respondentType
-          ? storeMain.convertRespondentType(e.respondentType)
+          ? storeMain.convertComplaintType(e.respondentType)
           : "-",
         offenseDetails: e.offenseDetails
           ? storeMain.convertFault(e.offenseDetails)