From 7b56868c1f455c8817981a3c1df4256677f19fd4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 Nov 2023 14:49:51 +0700
Subject: [PATCH] =?UTF-8?q?API=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=AD=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=9C=E0=B8=B4=E0=B8=94=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/11_discipline/api.discipline.ts       |  37 +-
 .../3_InvestigateDisciplinary/EditPage.vue    |  67 +++-
 .../3_InvestigateDisciplinary/Form.vue        | 361 ++++++++++++++----
 .../3_InvestigateDisciplinary/MainPage.vue    |  96 ++---
 .../11_discipline/interface/index/Main.ts     |  18 +-
 .../interface/request/disciplinary.ts         |   5 +-
 .../store/InvestigateDisStore.ts              |  60 +--
 7 files changed, 462 insertions(+), 182 deletions(-)

diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 64c3b94cf..e0209579b 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -2,26 +2,37 @@ import env from "../index";
 const discipline = `${env.API_URI}/discipline`;
 
 export default {
-  directorList:(page:number,pageSize:number,keyword:string) => `${discipline}/director?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
-  director:() => `${discipline}/director`,
-  directorbyId:(id:string) => `${discipline}/director/${id}`,
+  directorList: (page: number, pageSize: number, keyword: string) =>
+    `${discipline}/director?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  director: () => `${discipline}/director`,
+  directorbyId: (id: string) => `${discipline}/director/${id}`,
 
   /**ช่องทางการร้องเรียน */
-  complaintChannel:() => `${discipline}/complaint_Channel`,
+  complaintChannel: () => `${discipline}/complaint_Channel`,
 
   /**ลบ ช่องทางการร้องเรียน
    * @param id type
    */
-  complaintChannelbyId:(id:string) => `${discipline}/complaint_Channel/${id}`,
+  complaintChannelbyId: (id: string) => `${discipline}/complaint_Channel/${id}`,
 
-  complaintAdd:() => `${discipline}/complaint`,
-  complaintbyId:(id:string) => `${discipline}/complaint/${id}`,
-  complaintReject:(id:string) => `${discipline}/complaint/reject/${id}`,
-  complaintResume:(id:string) => `${discipline}/complaint/resume/${id}`,
-  complaintList:(page:number,pageSize:number,keyword:string) => `${discipline}/complaint?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
-  complaintFileUpload:(id:string) => `${discipline}/complaint/file/${id}`,
-  complaintFileDelete:(id:string,docId:string) => `${discipline}/complaint/file/${id}/${docId}`,
+  complaintAdd: () => `${discipline}/complaint`,
+  complaintbyId: (id: string) => `${discipline}/complaint/${id}`,
+  complaintReject: (id: string) => `${discipline}/complaint/reject/${id}`,
+  complaintResume: (id: string) => `${discipline}/complaint/resume/${id}`,
+  complaintList: (page: number, pageSize: number, keyword: string) =>
+    `${discipline}/complaint?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  complaintFileUpload: (id: string) => `${discipline}/complaint/file/${id}`,
+  complaintFileDelete: (id: string, docId: string) =>
+    `${discipline}/complaint/file/${id}/${docId}`,
 
-  complaintApprove:(id:string) => `${discipline}/complaint/approve/${id}`
+  complaintApprove: (id: string) => `${discipline}/complaint/approve/${id}`,
 
+  /** ระบบวินัยเรื่องสอบสวน */
+  disciplineDisciplinary: () => `${discipline}/disciplinary`,
+  disciplineDisciplinaryById: (id: string) =>
+    `${discipline}/disciplinary/${id}`,
+  disciplineInvestigateById: (id: string) =>
+    `${discipline}/disciplinary/investigate/${id}`,
+  disciplineComplaintsById: (id: string) =>
+    `${discipline}/disciplinary/complaint/${id}`,
 };
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
index 9b7dfda15..0966f5325 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/EditPage.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 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"; // สอบสวนความผิดทางวินัย
@@ -19,6 +21,7 @@ const id = ref<string>(route.params.id as string);
 /** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
   complaint: "",
+  respondentType: "",
   dateInvestigate: null,
   dateAllegation: null,
   dateEvident: null,
@@ -38,8 +41,43 @@ const data = reactive<FormData>({
   filesWitnesses: null,
   filesEtc: null,
   complaintStatus: "NEW",
+  organizationId: "",
+  consideredAgency: "",
 });
 
+async function fetchDetailDisciplinary() {
+  await http
+    .get(config.API.disciplineDisciplinaryById(id.value))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+async function fetchDetailInvestigate() {
+  await http
+    .get(config.API.disciplineInvestigateById(id.value))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+async function fetchDetailComplaints() {
+  await http
+    .get(config.API.disciplineComplaintsById(id.value))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
 /** จำลองข้อมูลจาก api */
 const fetchData = async () => {
   data.complaint = "test1";
@@ -119,8 +157,31 @@ function confirmCancelInvestigate() {
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(async () => {
-  await fetchData();
+  await fetchDetailDisciplinary();
 });
+
+watch(
+  () => store.tabMenu,
+  async () => {
+    const fetchFunction =
+      store.tabMenu === "disciplinary"
+        ? fetchDetailDisciplinary
+        : store.tabMenu === "investigatefacts"
+        ? fetchDetailInvestigate
+        : store.tabMenu === "complaints"
+        ? fetchDetailComplaints
+        : null;
+
+    if (fetchFunction) {
+      await fetchFunction();
+    }
+    //   if (store.tabMenu === "disciplinary") {
+    //     await fetchDetailDisciplinary();
+    //   } else if (store.tabMenu === "investigatefacts") {
+    //     await fetchDetailInvestigate();
+    //   } else if (store.tabMenu === "complaints") await fetchDetailComplaints();
+  }
+);
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
@@ -158,7 +219,7 @@ onMounted(async () => {
         />
       </div>
     </div>
-    <q-card flat  class="col-12">
+    <q-card flat class="col-12">
       <q-tabs
         v-model="store.tabMenu"
         dense
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
index c66cf9218..ef8ec6f6a 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useQuasar, QForm } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 
 import Dialogbody from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue";
@@ -15,8 +18,10 @@ import type {
 } from "@/modules/11_discipline/interface/request/disciplinary";
 import type { FileLists } from "../../interface/index/Main";
 
+const complainstStore = useComplainstDataStore();
 const investigateDis = useInvestigateDisStore();
 const { fecthDirector } = investigateDis;
+const { selectComplainantTpye, filterSelector } = complainstStore; // function จาก store complainstStore
 
 const mixin = useCounterMixin();
 const { date2Thai, hideLoader, dialogConfirm } = mixin;
@@ -37,6 +42,7 @@ const fileDocDataUpload = ref<File[]>([]);
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const complaintRef = ref<Object | null>(null);
+const respondentTypeRef = ref<Object | null>(null);
 const dateInvestigateRef = ref<Object | null>(null);
 const dateAllegationRef = ref<Object | null>(null);
 const dateEvidentRef = ref<Object | null>(null);
@@ -76,6 +82,7 @@ const initialPagination = ref<any>({
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   complaint: "",
+  respondentType: "",
   dateInvestigate: null,
   dateAllegation: null,
   dateEvident: null,
@@ -95,15 +102,27 @@ const formData = reactive<FormData>({
   filesRecordAccuser: null,
   filesWitnesses: null,
   filesEtc: null,
+  organizationId: "",
+  consideredAgency: "",
 });
-const filesEvidence = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
-const filesRecordAccuser = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
-const filesWitnesses = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
-const filesEtc = ref<any>([{ name: "ชื่อไฟล" }, { name: "ชื่อไฟล" }]);
+const filesEvidence = ref<any>([
+  { fileName: "ชื่อไฟล" },
+  { fileName: "ชื่อไฟล" },
+]);
+const filesRecordAccuser = ref<any>([
+  { fileName: "ชื่อไฟล" },
+  { fileName: "ชื่อไฟล" },
+]);
+const filesWitnesses = ref<any>([
+  { fileName: "ชื่อไฟล" },
+  { fileName: "ชื่อไฟล" },
+]);
+const filesEtc = ref<any>([{ fileName: "ชื่อไฟล" }, { fileName: "ชื่อไฟล" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectdisciplinary: disciplinaryRef = {
   complaint: complaintRef,
+  respondentType: respondentTypeRef,
   dateInvestigate: dateInvestigateRef,
   dateAllegation: dateAllegationRef,
   dateEvident: dateEvidentRef,
@@ -187,65 +206,96 @@ async function deleteData(id: string) {
   console.log("delete");
 }
 
-async function fetvhDatadetail() {
-  formData.complaint = props.data.complaint;
-  formData.dateInvestigate = props.data.dateInvestigate;
-  formData.dateAllegation = props.data.dateAllegation;
-  formData.dateEvident = props.data.dateEvident;
-  formData.casefault = props.data.casefault;
-  formData.typefault = props.data.typefault;
-  formData.faultLevel = props.data.faultLevel;
-  formData.refLaw = props.data.refLaw;
-  formData.detailComplaint = props.data.detailComplaint;
-  formData.whereInvestigate = props.data.whereInvestigate;
-  formData.trueDetail = props.data.trueDetail;
-  formData.evidence = props.data.evidence;
-  formData.recordAccuser = props.data.recordAccuser;
-  formData.witnesses = props.data.witnesses;
-  formData.InvestResults = props.data.InvestResults;
-  formData.filesEvidence = props.data.filesEvidence;
-  formData.filesRecordAccuser = props.data.filesRecordAccuser;
-  formData.filesWitnesses = props.data.filesWitnesses;
-  formData.filesEtc = props.data.filesEtc;
-
-  console.log(formData);
-}
+// async function fetvhDatadetail() {
+//   formData.complaint = props.data.complaint;
+//   formData.dateInvestigate = props.data.dateInvestigate;
+//   formData.dateAllegation = props.data.dateAllegation;
+//   formData.dateEvident = props.data.dateEvident;
+//   formData.casefault = props.data.casefault;
+//   formData.typefault = props.data.typefault;
+//   formData.faultLevel = props.data.faultLevel;
+//   formData.refLaw = props.data.refLaw;
+//   formData.detailComplaint = props.data.detailComplaint;
+//   formData.whereInvestigate = props.data.whereInvestigate;
+//   formData.trueDetail = props.data.trueDetail;
+//   formData.evidence = props.data.evidence;
+//   formData.recordAccuser = props.data.recordAccuser;
+//   formData.witnesses = props.data.witnesses;
+//   formData.InvestResults = props.data.InvestResults;
+//   formData.filesEvidence = props.data.filesEvidence;
+//   formData.filesRecordAccuser = props.data.filesRecordAccuser;
+//   formData.filesWitnesses = props.data.filesWitnesses;
+//   formData.filesEtc = props.data.filesEtc;
+//   console.log(formData);
+// }
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
 watch(props.data, async () => {
-  formData.complaint = props.data.complaint;
-  formData.dateInvestigate = props.data.dateInvestigate;
-  formData.dateAllegation = props.data.dateAllegation;
-  formData.dateEvident = props.data.dateEvident;
-  formData.casefault = props.data.casefault;
-  formData.typefault = props.data.typefault;
-  formData.faultLevel = props.data.faultLevel;
-  formData.refLaw = props.data.refLaw;
-  formData.detailComplaint = props.data.detailComplaint;
-  formData.whereInvestigate = props.data.whereInvestigate;
-  formData.trueDetail = props.data.trueDetail;
-  formData.evidence = props.data.evidence;
-  formData.recordAccuser = props.data.recordAccuser;
-  formData.witnesses = props.data.witnesses;
-  formData.InvestResults = props.data.InvestResults;
-  formData.filesEvidence = props.data.filesEvidence;
-  formData.filesRecordAccuser = props.data.filesRecordAccuser;
-  formData.filesWitnesses = props.data.filesWitnesses;
-  formData.filesEtc = props.data.filesEtc;
+  // formData.complaint = props.data.complaint;
+  // formData.dateInvestigate = props.data.dateInvestigate;
+  // formData.dateAllegation = props.data.dateAllegation;
+  // formData.dateEvident = props.data.dateEvident;
+  // formData.casefault = props.data.casefault;
+  // formData.typefault = props.data.typefault;
+  // formData.faultLevel = props.data.faultLevel;
+  // formData.refLaw = props.data.refLaw;
+  // formData.detailComplaint = props.data.detailComplaint;
+  // formData.whereInvestigate = props.data.whereInvestigate;
+  // formData.trueDetail = props.data.trueDetail;
+  // formData.evidence = props.data.evidence;
+  // formData.recordAccuser = props.data.recordAccuser;
+  // formData.witnesses = props.data.witnesses;
+  // formData.InvestResults = props.data.InvestResults;
+  // formData.filesEvidence = props.data.filesEvidence;
+  // formData.filesRecordAccuser = props.data.filesRecordAccuser;
+  // formData.filesWitnesses = props.data.filesWitnesses;
+  // formData.filesEtc = props.data.filesEtc;
 });
 
 function uploadData() {
   console.log("อัปโหลไฟล");
 }
 
+async function selectComplainant(val: string) {
+  formData.organizationId = "";
+  formData.consideredAgency = "";
+  if (val === "0") {
+    await fetchListname(); // ถ้าเลือกบุกคลจะเรียก function fetchListname เรียกรายชื่อจากทะเบียน
+  } else if (val === "1") {
+    await fetchOffice(); // ถ้าเลือกหน่วยงานจะเรียก function fetchOffice  เรียกโครงสร้างสำนักงาน
+  }
+}
+
+/** เรียกรายชื่อ */
+async function fetchListname() {
+  const listName = [
+    {
+      id: "1",
+      name: "นายเอ",
+    },
+    {
+      id: "2",
+      name: "นายบี",
+    },
+    {
+      id: "3",
+      name: "นายชี",
+    },
+  ];
+  selectComplainantTpye(listName);
+}
+
+/** เรียกโครงสร้างสำนักงาน */
+async function fetchOffice() {}
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  await fetvhDatadetail();
+  // await fetvhDatadetail();
   await fecthDirector([
     {
       nameDirector: "นาง เกสินี เจียรสุมัย",
@@ -267,33 +317,49 @@ onMounted(async () => {
   await hideLoader();
 });
 
-const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }]);
+const files = ref<FileLists[]>([
+  { id: "1", fileName: "test", pathName: "xxx" },
+]);
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
-    <UploadFile title="อัปโหลดเอกสาร" label="เลือกเอกสาร" :files="files" id="xx"/>
+    <!-- <UploadFile
+      title="อัปโหลดเอกสาร"
+      label="เลือกเอกสาร"
+      :files="files"
+      id="xx"
+    /> -->
 
     <form @submit.prevent="validateForm">
       <div class="col-12">
         <q-card>
           <div class="col-12 row q-pa-md">
             <div class="col-12 row q-col-gutter-md">
-              <!-- <div class="col-12">
+              <div class="col-xs-12 col-sm-3">
                 <q-select
-                  for="#fault"
-                  outlined
+                  for="SelectrespondentType"
+                  v-model="formData.respondentType"
+                  ref="respondentTypeRef"
                   dense
-                  ref="complaintRef"
-                  v-model="formData.complaint"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
-                  :options="complaintsOptions"
-                  label="เรื่องร้องเรียน"
-                  emit-value
-                  map-options
-                  option-label="name"
+                  outlined
+                  label="ผู้ถูกร้องเรียน"
                   option-value="id"
+                  option-label="name"
+                  emit-value
                   use-input
-                  ><template v-slot:no-option>
+                  map-options
+                  hide-bottom-space
+                  :options="complainstStore.complainantoptions"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
+                  lazy-rules
+                  @update:model-value="
+                    selectComplainant(formData.respondentType)
+                  "
+                  @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
+                )"
+                >
+                  <template v-slot:no-option>
                     <q-item>
                       <q-item-section class="text-grey">
                         ไม่มีข้อมูล
@@ -301,7 +367,137 @@ const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }])
                     </q-item>
                   </template>
                 </q-select>
-              </div> -->
+              </div>
+              <div class="col-xs-12 col-sm-3" id="consideredAgency">
+                <q-select
+                  ref="consideredAgencyRef"
+                  for="selectAgency"
+                  dense
+                  outlined
+                  v-model="formData.consideredAgency"
+                  :options="complainstStore.consideredAgencytoptions"
+                  label="หน่วยงานที่พิจารณา"
+                  option-value="id"
+                  option-label="name"
+                  hide-bottom-space
+                  emit-value
+                  map-options
+                  :rules="[(val) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                  lazy-rules
+                  use-input
+                  @filter="(inputValue: any,
+                  doneFn: Function) => filterSelector(inputValue, doneFn, 'filterconsideredAgencytoptions'
+                  )"
+                >
+                  <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"
+              >
+                <q-select
+                  for="inputOffice"
+                  name="organizationId"
+                  ref="organizationIdRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.organizationId"
+                  :options="complainstStore.organizationIdOp"
+                  label="เลือกสำนักงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+                  lazy-rules
+                />
+              </div>
+              <div
+                v-if="formData.respondentType !== 'ORGANIZATION'"
+                class="col-6"
+              ></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
+                      size="12px"
+                      flat
+                      round
+                      dense
+                      color="add"
+                      class="q-ml-sm"
+                      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="complainstStore.columns"
+                      :rows="complainstStore.rowsAdd"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="complainstStore.visibleColumns"
+                    >
+                      <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-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>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </q-card>
+              </div>
 
               <!-- <datepicker
                 menu-class-name="modalfix"
@@ -679,7 +875,32 @@ const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }])
           </div>
         </q-card>
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <UploadFile
+          title="อัปโหลดหลักฐานสนับสนุนข้อกล่าวหา"
+          label="ไฟล์เอกสารหลักฐานสรุปพยานหลักฐานสนับสนุนข้อกล่าวหา"
+          :files="filesEvidence"
+          id="xx"
+        />
+        <UploadFile
+          title="อัปโหลดบันทึกถ้อยคำของผู้กล่าวหา"
+          label="ไฟล์เอกสารบันทึกถ้อยคำของผู้กล่าวหา"
+          :files="filesRecordAccuser"
+          id="xx"
+        />
+        <UploadFile
+          title="อัปโหลดพยานและการบันทึกถ้อยคำ"
+          label="ไฟล์เอกสารพยานและการบันทึกถ้อยคำ"
+          :files="filesWitnesses"
+          id="xx"
+        />
+        <UploadFile
+          title="อัปโหลดไฟล์เอกสารหลักฐานอื่น ๆ"
+          label="ไฟล์เอกสารหลักฐานอื่น ๆ"
+          :files="filesEtc"
+          id="xx"
+        />
+
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -768,9 +989,9 @@ const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }])
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -859,9 +1080,9 @@ const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }])
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -950,9 +1171,9 @@ const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }])
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
 
-        <q-card flat class="q-pa-md q-mt-sm">
+        <!-- <q-card flat class="q-pa-md q-mt-sm">
           <div class="col-12 row q-col-gutter-md">
             <div class="row col-12">
               <q-card
@@ -1041,7 +1262,7 @@ const files = ref<FileLists[]>([{ id: "1", fileName: "test", pathName: "xxx" }])
               </q-card>
             </div>
           </div>
-        </q-card>
+        </q-card> -->
       </div>
     </form>
   </div>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 9055bbc36..c98a50e73 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -2,23 +2,54 @@
 import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
-import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
-const $q = useQuasar(); // show dialog
-const router = useRouter();
-const filter = ref<string>(""); //search data table
+import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
-const { fecthList } = dataInvestigateDis;
+const { fetchList } = dataInvestigateDis;
 
+const $q = useQuasar(); // show dialog
+const router = useRouter();
+
+const filter = ref<string>(""); //search data table
+const page = ref<number>(1);
+const maxPage = ref<number>(1);
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+  rowsPerPage: 10,
 });
 
+async function fetchListDisciplinary() {
+  showLoader();
+  await http
+    .get(
+      config.API.disciplineDisciplinary() +
+        `?page=${page.value}&pageSize=${initialPagination.value.rowsPerPage}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(
+        res.data.result.total / initialPagination.value.rowsPerPage
+      );
+      fetchList(data);
+      console.log(data);
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
@@ -32,54 +63,7 @@ function openEdit(id: string) {
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  showLoader();
-  fecthList([
-    {
-      id: "001",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "ศิรินภา คงน้อยี่",
-      fault: "1",
-      penaltyLevel: "7",
-      caseFault: "ทุจริตในหน้าที่",
-      dateInvestigate: "2023-12-01",
-      status: "0",
-      active: "2",
-    },
-    {
-      id: "002",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "ภัทรานุช คงน้อย",
-      fault: "1",
-      penaltyLevel: "7",
-      caseFault: "ทุจริตในหน้าที่",
-      dateInvestigate: "2023-11-30",
-      status: "0",
-      active: "0",
-    },
-    {
-      id: "003",
-      subject: "กระทำทุจริตเงินกองทุน",
-      interrogated: "ปรมาพร ศรีมี",
-      fault: "2",
-      penaltyLevel: "1",
-      caseFault: "พบการทุจริต",
-      dateInvestigate: "2023-09-14",
-      status: "1",
-      active: "1",
-    },
-    {
-      id: "004",
-      subject: "พูดจาไม่สุภาพ",
-      interrogated: "สมรัก ใจอารีย์",
-      fault: "2",
-      penaltyLevel: "1",
-      caseFault: "พูดจาไม่สุภาพกับผู้บังคับบัญชา",
-      dateInvestigate: "2023-08-11",
-      status: "0",
-      active: "1",
-    },
-  ]);
-  await hideLoader();
+  await fetchListDisciplinary();
 });
 </script>
 
diff --git a/src/modules/11_discipline/interface/index/Main.ts b/src/modules/11_discipline/interface/index/Main.ts
index 0227ad183..cfe4ec9bd 100644
--- a/src/modules/11_discipline/interface/index/Main.ts
+++ b/src/modules/11_discipline/interface/index/Main.ts
@@ -20,15 +20,15 @@ interface InvestigatefactsDataRowType {
 }
 
 interface investigateDisDataRowType {
-  id: string;
-  subject: string;
-  interrogated: string;
-  fault: string | undefined;
-  penaltyLevel: string | undefined;
-  caseFault: string;
-  dateInvestigate: string | null;
-  status: string | undefined;
-  active: string | undefined;
+  id: string; //id รายการ
+  title: string; //เรื่องร้องเรียน
+  interrogated: string; //ผู้ถูกสอบสวน
+  descMistake: string; //ลักษณะความผิด
+  mistakeLevel: string; //ระดับโทษความผิด
+  mistakeCase: string; //กรณีความผิด
+  investigationDate: Date | null; //วันที่สอบสวน
+  status: string | null; //สถานะ
+  isResultConfirmed: Boolean; //ยืนยันผลเเล้ว/ยังไม่ได้ยืนยันผล
 }
 
 interface directorType {
diff --git a/src/modules/11_discipline/interface/request/disciplinary.ts b/src/modules/11_discipline/interface/request/disciplinary.ts
index 848512f76..0affe1d0d 100644
--- a/src/modules/11_discipline/interface/request/disciplinary.ts
+++ b/src/modules/11_discipline/interface/request/disciplinary.ts
@@ -1,5 +1,6 @@
 interface FormData {
   complaint: string;
+  respondentType: string;
   dateInvestigate: Date | null;
   dateAllegation: Date | null;
   dateEvident: Date | null;
@@ -18,7 +19,9 @@ interface FormData {
   recordAccuser: string;
   witnesses: string;
   InvestResults: string;
-  complaintStatus: string
+  complaintStatus: string;
+  organizationId: string;
+  consideredAgency: string;
 }
 
 interface disciplinaryRef {
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index cd93f2744..3b9eae8d0 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -31,18 +31,18 @@ export const useInvestigateDisStore = defineStore(
       { id: "5", name: "ปลดออก" },
       { id: "6", name: "ไล่ออก" },
     ]);
-    async function fecthList(data: investigateDisDataRowType[]) {
-      let datalist: investigateDisDataRowType[] = data.map((e: any) => ({
+    async function fetchList(data: investigateDisDataRowType[]) {
+      let datalist: any[] = data.map((e: any) => ({
         id: e.id,
-        subject: e.subject,
-        interrogated: e.interrogated,
-        fault: convertFault(e.fault),
-        penaltyLevel: convertPenaltyLevel(e.penaltyLevel),
-        caseFault: e.caseFault,
-        dateInvestigate: date2Thai(new Date(e.dateInvestigate)),
-        status: convertSatatus(e.status),
-        active: activeStatus(e.active),
+        title: e.title,
+        respondentType: e.respondentType,
+        offenseDetails: e.offenseDetails,
+        disciplinaryFaultLevel: e.disciplinaryFaultLevel,
+        disciplinaryCaseFault: e.disciplinaryCaseFault,
+        status: e.status,
+        createdAt: date2Thai(e.createdAt),
       }));
+
       rows.value = datalist;
     }
     async function fecthDirector(data: directorType[]) {
@@ -56,7 +56,7 @@ export const useInvestigateDisStore = defineStore(
       }));
       rows2.value = datalistDirector;
       selected.value = rows2.value;
-      console.log(rows2.value);
+      // console.log(rows2.value);
     }
     function convertFault(val: string) {
       switch (val) {
@@ -107,12 +107,12 @@ export const useInvestigateDisStore = defineStore(
 
     const visibleColumns = ref<String[]>([
       "no",
-      "subject",
-      "interrogated",
-      "fault",
-      "penaltyLevel",
-      "caseFault",
-      "dateInvestigate",
+      "title",
+      "respondentType",
+      "offenseDetails",
+      "disciplinaryFaultLevel",
+      "disciplinaryCaseFault",
+      "createdAt",
       "status",
     ]);
 
@@ -127,64 +127,64 @@ export const useInvestigateDisStore = defineStore(
         style: "font-size: 14px",
       },
       {
-        name: "subject",
+        name: "title",
         align: "left",
         label: "เรื่อง",
         sortable: true,
-        field: "subject",
+        field: "title",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
       },
       {
-        name: "interrogated",
+        name: "respondentType",
         align: "left",
         label: "ผู้ถูกสืบสวน",
         sortable: true,
-        field: "interrogated",
+        field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
           a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "fault",
+        name: "offenseDetails",
         align: "left",
         label: "ลักษณะความผิด",
         sortable: true,
-        field: "fault",
+        field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
           a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "penaltyLevel",
+        name: "disciplinaryFaultLevel",
         align: "left",
         label: "ระดับโทษความผิด",
         sortable: true,
-        field: "penaltyLevel",
+        field: "disciplinaryFaultLevel",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
           a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "caseFault",
+        name: "disciplinaryCaseFault",
         align: "left",
         label: "กรณีความผิด",
         sortable: true,
-        field: "caseFault",
+        field: "disciplinaryCaseFault",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
           a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "dateInvestigate",
+        name: "createdAt",
         align: "left",
         label: "วันที่สอบสวน",
         sortable: true,
-        field: "dateInvestigate",
+        field: "createdAt",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
       },
@@ -275,7 +275,7 @@ export const useInvestigateDisStore = defineStore(
     ]);
     return {
       tabMenu,
-      fecthList,
+      fetchList,
       rows,
       rows2,
       optionsTypefault,