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

src/api/11_discipline/api.discipline.ts

@@ -1,5 +1,6 @@
 import env from "../index";
 const discipline = `${env.API_URI}/discipline`;
+const investigate = `${env.API_URI}/discipline/investigate`
 
 export default {
   directorList:(page:number,pageSize:number,keyword:string) => `${discipline}/director?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
@@ -13,7 +14,6 @@ export default {
    * @param id type
    */
   complaintChannelbyId:(id:string) => `${discipline}/complaint_Channel/${id}`,
-
   complaintAdd:() => `${discipline}/complaint`,
   complaintbyId:(id:string) => `${discipline}/complaint/${id}`,
   complaintReject:(id:string) => `${discipline}/complaint/reject/${id}`,
@@ -21,7 +21,23 @@ export default {
   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}`
 
+  /** API  สืบสวนข้อเท็จจริง*/
+  investigateMain:(page:number,pageSize:number,keyword:string) =>`${investigate}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  investigateById:(id:string) => `${investigate}/${id}`,
+
+
+
+
+  investigateRelevantUploadFile:(id:string) => `${investigate}/relevant/file/${id}`,
+  investigateRelevantFileDelete:(id:string,docId:string) => `${investigate}/relevant/file/${id}/${docId}`,
+  
+  investigateUploadFile:(id:string) => `${investigate}/file/${id}`,
+  investigateFileDelete:(id:string,docId:string) => `${investigate}/file/${id}/${docId}`,
+
+  investigateReject:(id:string) => `${investigate}/reject/${id}`,
+  investigateResume:(id:string) => `${investigate}/resume/${id}`,
+  
 };

src/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue

@@ -16,12 +16,10 @@ const router = useRouter();
 /** บันทึกข้อมูล */
 async function onSubmit(data: any) {
   /** post */
-  console.log(data)
   showLoader();
   http
     .post(config.API.complaintAdd(), data)
     .then((res) => {
-      console.log(res)
       success($q, "บันทึกข้อมูลสำเร็จ");
       router.push(`/discipline/complaints/${res.data.result}`);
     })

src/modules/11_discipline/components/1_Complaint/EditPage.vue

@@ -69,7 +69,7 @@ const data = reactive<FormData>({
   documentFile: null,
   status: "",
   persons: [personOj],
-  result: '',
+  result: "",
   disciplineComplaintDocs: [fileListOj],
 });
 
@@ -158,7 +158,6 @@ async function getData() {
       data.result = dataList.result;
       data.disciplineComplaintDocs = dataList.disciplineComplaintDocs;
 
-      console.log("list", data.id);
     })
     .catch((e) => {
       messageError($q, e);
@@ -173,7 +172,6 @@ async function onSubmit(data: any) {
   http
     .put(config.API.complaintbyId(id.value), data)
     .then((res) => {
-      console.log(res);
       success($q, "บันทึกข้อมูลสำเร็จ");
       router.push(`/discipline/complaints`);
     })
@@ -183,19 +181,12 @@ async function onSubmit(data: any) {
     .finally(async () => {
       hideLoader();
     });
-  console.log("edit", data);
   // router.push(`/discipline/complaints`);
 }
 
 /** ยืนยัน มีมูลส่งไปสืบสวน */
 function sentInvestigate() {
   modalPopup.value = true;
-  // dialogConfirm(
-  //   $q,
-  //   () => confirmSentInvestigate(),
-  //   "ยืนยันส่งไปสืบสวน",
-  //   "ต้องการยืนยันส่งไปสืบสวนใช่หรือไม่?"
-  // );
 }
 
 function closePopup() {
@@ -222,11 +213,6 @@ function cancelInvestigate() {
   );
 }
 
-/** ฟังชั่น มีมูลส่งไปสืบสวน*/
-function confirmSentInvestigate() {
-  console.log("sent");
-}
-
 /** ฟังชั่น ยุติเรื่อง*/
 function confirmEndInvestigate() {
   showLoader();
@@ -236,12 +222,11 @@ function confirmEndInvestigate() {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
     .catch((e) => {
-      messageError($q,e);
+      messageError($q, e);
     })
     .finally(async () => {
       await getData();
     });
-  console.log("sent");
 }
 
 /** ฟังชั่น ยกเลิกการยุติเรื่อง*/
@@ -250,7 +235,7 @@ function confirmCancelInvestigate() {
   http
     .get(config.API.complaintResume(id.value))
     .then((res) => {
-      getData()
+      getData();
     })
     .catch((e) => {
       messageError($q, e);
@@ -258,19 +243,18 @@ function confirmCancelInvestigate() {
     .finally(() => {
       hideLoader();
     });
-  console.log("sent");
 }
 
-function emitPerson(data:ArrayPerson[]){
+/**
-  console.log('person',data)
+ * ดึงข้อมูล จาก component เเล้ว update
-  const dataMapId = data.map((item:ArrayPerson) =>
+ * @param data person data
-    item.personId
+ */
-  )
+function emitPerson(data: ArrayPerson[]) {
-  console.log('id',dataMapId)
+  const dataMapId = data.map((item: ArrayPerson) => item.personId);
-    showLoader();
+  showLoader();
   http
-    .put(config.API.complaintApprove(id.value),{
+    .put(config.API.complaintApprove(id.value), {
-      persons:dataMapId
+      persons: dataMapId,
     })
     .then((res) => {
       router.push(`/discipline/complaints`);
@@ -282,24 +266,9 @@ function emitPerson(data:ArrayPerson[]){
       hideLoader();
     });
 }
-// function sentApprove() {
+
-//   // showLoader();
-//   // http
-//   //   .put(config.API.complaintApprove(id.value))
-//   //   .then((res) => {
-//   //     router.push(`/discipline/complaints`);
-//   //   })
-//   //   .catch((e) => {
-//   //     messageError($q, e);
-//   //   })
-//   //   .finally(() => {
-//   //     hideLoader();
-//   //   });
-//   console.log("sent");
-// }
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(() => {
-  console.log(data);
   // fetchData();
   getData();
 });
@@ -341,11 +310,11 @@ onMounted(() => {
       </div>
     </div>
 
-    <Form
+    <Form :on-submit="onSubmit" :data="data" :get-data="getData" />
-      :on-submit="onSubmit"
+    <Popup
-      :data="data"
+      :modal="modalPopup"
-      :get-data="getData"
+      :close="closePopup"
+      @return-person="emitPerson"
     />
-    <Popup :modal="modalPopup" :close="closePopup" @return-person="emitPerson"/>
   </div>
 </template>

src/modules/11_discipline/components/1_Complaint/Form.vue

@@ -228,42 +228,6 @@ const visibleColumns = ref<string[]>([
   "organization",
 ]);
 
-/**
- * รับค่าผู้ถูกร้องเรียน
- * @param val บุคคล หน่วยงาน กทม
- */
-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() {}
-
 /**
  * ฟังชั่นอัปโหลดไฟล์
  * @param documentFile ไฟล์ที่รับมา
@@ -379,6 +343,7 @@ function confirmDelete(id: string) {
 watch(props.data, async () => {
   fileList.value = props.data.disciplineComplaintDocs;
   complainstStore.fetchComplainstAdd(props.data.persons);
+  
   formData.id = props.data.id;
   formData.respondentType = props.data.respondentType;
   formData.organizationId = props.data.organizationId;
@@ -467,7 +432,6 @@ onMounted(() => {
                 :options="complainstStore.complainantoptions"
                 :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
                 lazy-rules
-                @update:model-value="selectComplainant(formData.respondentType)"
                 @filter="(inputValue: any,
                 doneFn: Function) => filterSelector(inputValue, doneFn, 'filterrespondentType'
                 )"

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

@@ -8,63 +8,101 @@ import { useInvestigateFactStore } from "@/modules/11_discipline/store/Investiga
 import { useQuasar } from "quasar";
 import Popup from "@/modules/11_discipline/components/1_Complaint/Popup.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/investigateFact";
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useInvestigateFactStore();
-const { dialogConfirm } = mixin;
+const { dialogConfirm, showLoader, success, hideLoader, messageError } = mixin;
 const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
 /** ข้อมูล v-model ของฟอร์ม */
 const data = reactive<FormData>({
+  id: "",
+  idComplaint: "",
+  investigationDetail: "",
   complaint: "",
   complaintdetail: "",
-  detail: "",
+  investigationDescription: "",
   fault: "",
-  other: "",
+  investigationDetailOther: "",
   evidenceFiles: null,
   fileComplaint: null,
   clickTime: false,
-  date: null,
+  investigationDateStart: null,
-  dateEnd: new Date(),
+  investigationDateEnd: null,
-  investigation: "",
   daysExtend: null,
-  statusResult: "",
+  investigationStatusResult: "",
-  causeText: "",
+  investigationCauseText: "",
   complaintStatus: "",
-  reason: "",
+  result: "",
+  directors: [],
+  disciplineInvestigateDocs: [],
+  disciplineInvestigateRelevantDocs: [],
+  status: "",
+  documentFile: null,
+  respondentType: "",
+  organizationId: "",
+  persons:[]
 });
 
-/** จำลองข้อมูลจาก api */
+function getData() {
-const fetchData = async () => {
+  showLoader();
-  // ดึงค่าจาก api
+  http
-  data.complaint = "เรื่องที่ 1";
+    .get(config.API.investigateById(id.value))
-  data.complaintdetail = "รายละเอียด";
+    .then((res) => {
-  data.detail = "รายละเอียด";
+      console.log(res.data.result);
-  data.fault = "001";
+      const dataList = res.data.result;
-  data.other = "";
+      data.id = dataList.id;
-  data.evidenceFiles = null;
+      data.idComplaint = dataList.idComplaint;
-  data.fileComplaint = null;
+      data.respondentType = dataList.respondentType
-  data.clickTime = false;
+      data.persons = dataList.persons
-  data.date = new Date("2023-11-07T14:58:00");
+      data.investigationDetail = dataList.investigationDetail;
-  data.dateEnd = new Date("2023-11-08T14:58:00");
+      data.investigationDetailOther = dataList.investigationDetailOther;
-  data.investigation = "appoint_directors";
+      data.investigationDateStart = dataList.investigationDateStart;
-  data.daysExtend = null;
+      data.investigationDateEnd = dataList.investigationDateEnd;
-  data.statusResult = "not_specified";
+      data.investigationDescription = dataList.investigationDescription;
-  data.causeText = "";
+      data.investigationCauseText = dataList.investigationCauseText;
-  data.complaintStatus = "NEW";
+      data.status = dataList.status;
-};
+      data.result = dataList.result;
+      data.directors = dataList.director;
+      data.disciplineInvestigateDocs = dataList.disciplineInvestigateDocs;
+      data.disciplineInvestigateRelevantDocs =
+        dataList.disciplineInvestigateRelevantDocs;
+      data.investigationStatusResult = dataList.investigationStatusResult;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 /**
  * บันทึกข้อมูลที่เเก้ไข
  * @param id ระบุ บุคคล
  */
-async function onSubmit(id: string) {
+async function onSubmit(data: any) {
   // put
-  console.log("edit", id);
+  console.log("edit", data);
-  router.push(`/discipline/investigatefacts`);
+  showLoader();
+  http
+    .put(config.API.investigateById(id.value), data)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      // router.push(`/discipline/complaints`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+  // router.push(`/discipline/investigatefacts`);
 }
 
 const modalPopup = ref<boolean>(false);
@@ -110,17 +148,40 @@ function confirmSentInvestigate() {
 
 /** ฟังชั่น ยุติเรื่อง*/
 function confirmEndInvestigate() {
-  console.log("sent");
+  showLoader();
+  http
+    .get(config.API.investigateReject(id.value))
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await getData();
+    });
 }
 
 /** ฟังชั่น ยกเลิกการยุติเรื่อง*/
 function confirmCancelInvestigate() {
-  console.log("sent");
+  showLoader();
+  http
+    .get(config.API.investigateResume(id.value))
+    .then((res) => {
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
-  fetchData();
+  getData();
 });
 </script>
 
@@ -137,24 +198,24 @@ onMounted(() => {
         class="q-mr-sm"
         @click="$router.push(`/discipline/investigatefacts`)"
       />
-      <div class="q-ma-none">แก้ไขรายการสืบสวนข้อเท็จจริง {{ id }}#id</div>
+      <div class="q-ma-none">แก้ไขรายการสืบสวนข้อเท็จจริง</div>
       <q-space />
       <div class="q-gutter-x-sm">
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+          v-if="data.status === 'NEW'"
           label="ส่งไปสอบสวน"
           color="public"
           @click="sentInvestigate"
         />
 
         <q-btn
-          v-if="data.complaintStatus === 'NEW'"
+          v-if="data.status === 'NEW'"
           label="ยุติเรื่อง"
           color="red-7"
           @click="endInvestigate"
         />
         <q-btn
-          v-if="data.complaintStatus === 'STOP'"
+          v-if="data.status === 'STOP'"
           label="ยกเลิกการยุติเรื่อง"
           color="red-7"
           @click="cancelInvestigate"
@@ -181,12 +242,16 @@ onMounted(() => {
           <FormComplaints :on-submit="onSubmit" />
         </q-tab-panel>
         <q-tab-panel name="investigatefacts">
-          <FormInvestigatefacts :on-submit="onSubmit" :data="data" />
+          <FormInvestigatefacts
+            :on-submit="onSubmit"
+            :data="data"
+            :get-data="getData"
+          />
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
 
-    <Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน"/>
+    <Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน" />
   </div>
 </template>
 <style scoped>

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

@@ -2,7 +2,9 @@
 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 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";
@@ -12,35 +14,50 @@ import type {
   MyObjectInvestigateRef,
 } from "@/modules/11_discipline/interface/request/investigateFact";
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+
 const $q = useQuasar();
 const route = useRoute();
-
+const modalPerson = ref<boolean>(false);
+const toggleModal = () => (modalPerson.value = !modalPerson.value);
 /**เรียกใช้ store */
 const investigateFactStore = useInvestigateFactStore();
 const mixin = useCounterMixin();
 const { filterFnOptionsType } = investigateFactStore;
-const { date2Thai, dialogConfirm } = mixin;
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+} = mixin;
 const investigateDis = useInvestigateDisStore();
 
 // const complaintsOptions = ref<any>([]);
 const isUpdate = ref<boolean>(false);
-
+const filterTable = ref<string>("");
+const filterKeyword = ref<string>("");
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
 /** ตัวแปร ref สำหรับแสดง validate */
 const complaintRef = ref<Object | null>(null);
 const complaintdetailRef = ref<Object | null>(null);
-const detailRef = ref<Object | null>(null);
+const investigationDescriptionRef = ref<Object | null>(null);
 const faultRef = ref<Object | null>(null);
-const otherRef = ref<Object | null>(null);
+const investigationDetailOtherRef = ref<Object | null>(null);
-const evidenceFilesRef = ref<Object | null>(null);
 const fileComplaintRef = ref<Object | null>(null);
 const clickTimeRef = ref<Object | null>(null);
 const dateRef = ref<Object | null>(null);
 const dateEndRef = ref<Object | null>(null);
-const investigationRef = ref<Object | null>(null);
+const investigationDetailRef = ref<Object | null>(null);
 const daysExtendRef = ref<Object | null>(null);
-const statusResultRef = ref<Object | null>(null);
+const investigationStatusResultRef = ref<Object | null>(null);
-const causeTextRef = ref<Object | null>(null);
+const investigationCauseTextRef = ref<Object | null>(null);
-const reasonRef = ref<Object | null>(null);
+const resultRef = ref<Object | null>(null);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -52,47 +69,59 @@ const props = defineProps({
     type: Function,
     default: () => "",
   },
+  getData: {
+    type: Function,
+    default: () => "",
+  },
 });
 
 const filter = ref<string>("");
 
 /** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
+  id: "",
+  idComplaint: "",
   complaint: "",
   complaintdetail: "",
-  detail: "",
+  investigationDescription: "",
   fault: "",
-  other: "",
+  investigationDetailOther: "",
   evidenceFiles: null,
   fileComplaint: null,
   clickTime: false,
-  date: null,
+  investigationDateStart: null,
-  dateEnd: new Date(),
+  investigationDateEnd: null,
-  investigation: "",
+  investigationDetail: "",
   daysExtend: null,
-  statusResult: "",
+  investigationStatusResult: "",
-  causeText: "",
+  investigationCauseText: "",
   complaintStatus: "",
-  reason: "",
+  result: "",
+  directors: [],
+  disciplineInvestigateDocs: [],
+  disciplineInvestigateRelevantDocs: [],
+  status: "",
+  documentFile: null,
+  respondentType: "",
+  organizationId: "",
+  persons: [],
 });
-const evidenceFiles = ref<any>([{ name: "ชื่อไฟล์" }, { name: "ชื่อไฟล์" }]);
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectInvestigate: MyObjectInvestigateRef = {
   complaint: complaintRef,
   complaintdetail: complaintdetailRef,
-  detail: detailRef,
+  investigationDescription: investigationDescriptionRef,
   fault: faultRef,
-  other: otherRef,
+  investigationDetailOther: investigationDetailOtherRef,
-  evidenceFiles: evidenceFilesRef,
   fileComplaint: fileComplaintRef,
   date: dateRef,
   dateEnd: dateEndRef,
-  investigation: investigationRef,
+  investigationDetail: investigationDetailRef,
   daysExtend: daysExtendRef,
-  statusResult: statusResultRef,
+  investigationStatusResult: investigationStatusResultRef,
-  causeText: causeTextRef,
+  investigationCauseText: investigationCauseTextRef,
-  reason: reasonRef,
+  result: resultRef,
 };
 
 const rows = ref([]);
@@ -103,6 +132,93 @@ const initialPagination = ref<any>({
   rowsPerPage: 0,
 });
 
+/** หัวตาราง */
+const columnsPerson = 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 visibleColumnsPerson = ref<string[]>([
+  "no",
+  "idcard",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "salary",
+  "organization",
+]);
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
   const hasError = [];
@@ -133,7 +249,11 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      props.onSubmit(formData);
+      if (investigateFactStore.rowsAdd) {
+        formData.persons = investigateFactStore.rowsAdd;
+        props.onSubmit(formData);
+      } else props.onSubmit(formData);
+      // props.onSubmit(formData);
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -147,27 +267,9 @@ function onSubmit() {
 function calEndDate(val: string) {
   const date = new Date(props.data.dateEnd);
   const dateNew = new Date();
-  formData.dateEnd = new Date(dateNew.setDate(date.getDate() + Number(val)));
+  formData.investigationDateEnd = new Date(
-}
+    dateNew.setDate(date.getDate() + Number(val))
-
+  );
-async function fetchDataDetail() {
-  if (props.data !== null) {
-    // isUpdate.value = true;
-    formData.complaint = props.data.complaint;
-    formData.complaintdetail = props.data.complaintdetail;
-    formData.detail = props.data.detail;
-    formData.fault = props.data.fault;
-    formData.other = props.data.other;
-    formData.evidenceFiles = props.data.evidenceFiles;
-    formData.fileComplaint = props.data.fileComplaint;
-    formData.clickTime = props.data.clickTime;
-    formData.date = props.data.date;
-    formData.dateEnd = props.data.dateEnd;
-    formData.investigation = props.data.investigation;
-    formData.daysExtend = props.data.daysExtend;
-    formData.statusResult = props.data.statusResult;
-    formData.causeText = props.data.results;
-  }
 }
 
 const modal = ref<boolean>(false);
@@ -183,11 +285,6 @@ function clickClose() {
   modal.value = false;
 }
 
-onMounted(async () => {
-  await fetchDataDetail();
-  console.log(route.name);
-});
-
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
@@ -196,22 +293,202 @@ onMounted(async () => {
 watch(props.data, async () => {
   if (props.data !== null) {
     isUpdate.value = true;
+    formData.id = props.data.id;
     formData.complaint = props.data.complaint;
+    formData.respondentType = props.data.respondentType;
     formData.complaintdetail = props.data.complaintdetail;
-    formData.detail = props.data.detail;
+    formData.investigationDescription = props.data.investigationDescription;
     formData.fault = props.data.fault;
-    formData.other = props.data.other;
+    formData.investigationDetailOther = props.data.investigationDetailOther;
-    formData.evidenceFiles = props.data.evidenceFiles;
     formData.fileComplaint = props.data.fileComplaint;
     formData.clickTime = props.data.clickTime;
-    formData.date = props.data.date;
+    formData.investigationDateStart = props.data.investigationDateStart;
-    formData.dateEnd = props.data.dateEnd;
+    formData.investigationDateEnd = props.data.investigationDateEnd;
-    formData.investigation = props.data.investigation;
+    formData.investigationDetail = props.data.investigationDetail;
     formData.daysExtend = props.data.daysExtend;
-    formData.statusResult = props.data.results;
+    formData.investigationStatusResult = props.data.investigationStatusResult;
-    formData.causeText = props.data.results;
+    formData.investigationCauseText = props.data.investigationCauseText;
+    formData.result = props.data.result;
+    
+    investigateFactStore.rowsAdd = props.data.persons
+    rows.value = props.data.directors
   }
 });
+
+function uploadFileRelevant() {
+  const Data = new FormData();
+  Data.append("file", formData.evidenceFiles);
+  showLoader();
+  http
+    .put(config.API.investigateRelevantUploadFile(formData.id), Data)
+    .then((res) => {
+      console.log(res);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.getData();
+      // router.push(`/discipline/complaints`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+function uploadFile() {
+  const Data = new FormData();
+  Data.append("file", formData.documentFile);
+  showLoader();
+  http
+    .put(config.API.investigateUploadFile(formData.id), Data)
+    .then((res) => {
+      console.log(res);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.getData();
+      // router.push(`/discipline/complaints`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิดลิงค์ไฟล์
+ * @param link รับมาเป็น https ลิงค์
+ */
+function downloadFile(link: string) {
+  window.open(link, "_blank");
+}
+
+/**
+ * เปิดลิงค์ไฟล์
+ * @param link รับมาเป็น https ลิงค์
+ */
+function downloadFileRelevant(link: string) {
+  window.open(link, "_blank");
+}
+
+/**
+ * ลบไฟล์
+ * @param id id file
+ */
+function deleteFileRelevant(id: string) {
+  dialogRemove($q, () => confirmDeleteRelevant(id));
+}
+
+/**
+ * ยืนยัน ลบ ไฟล์
+ * @param id id file
+ */
+function confirmDeleteRelevant(id: string) {
+  showLoader();
+  http
+    .delete(config.API.investigateRelevantFileDelete(formData.id, id))
+    .then((res) => {
+      success($q, `ลบไฟล์สำเร็จ`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      props.getData();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param id id file
+ */
+function deleteFile(id: string) {
+  dialogRemove($q, () => confirmDelete(id));
+}
+
+/**
+ * ยืนยัน ลบ ไฟล์
+ * @param id id file
+ */
+function confirmDelete(id: string) {
+  showLoader();
+  http
+    .delete(config.API.investigateFileDelete(formData.id, id))
+    .then((res) => {
+      success($q, `ลบไฟล์สำเร็จ`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      props.getData();
+    });
+}
+async function addPerson(data: any) {
+  await investigateFactStore.fetchInvestigateAdd(data);
+  toggleModal();
+}
+
+/**
+ * ฟังชั่น รับค่าจาก คอมโพเเนน
+ * @param returnData ค่าที่ได้คืนมา
+ */
+function handleSave(returnData: any) {
+  addPerson(returnData);
+  toggleModal();
+}
+
+function getOc() {
+  http.get(config.API.typeOc()).then((res) => {
+    const data = res.data.result;
+    investigateFactStore.ocListFn(data);
+  });
+}
+
+async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
+  rowsPerPage.value = rowPerpage;
+  page.value = pageCurrent;
+  await getList();
+}
+
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.directorList(
+        page.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    //
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result.data;
+      investigateDis.fecthDirector(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function returnDirector(data: any) {
+  clickClose();
+  const dataList = data.map((item: any) => item.id);
+  console.log(dataList);
+  formData.directors = dataList;
+  rows.value = data;
+}
+
+onMounted(async () => {
+  console.log(route.name);
+  getOc();
+  investigateFactStore.columnsPerson = columnsPerson.value;
+  investigateFactStore.visibleColumnsPerson = visibleColumnsPerson.value;
+});
 </script>
 <template>
   <q-card flat class="q-mt-sm">
@@ -275,54 +552,170 @@ watch(props.data, async () => {
               </template>
             </q-select>
           </div> -->
-
+          <q-select
-          <div class="col-3">
+            for="SelectrespondentType"
-            <q-select
+            v-model="formData.respondentType"
-              :readonly="statusStep"
+            ref="respondentTypeRef"
-              :disable="statusStep"
+            dense
-              for="#investigation"
+            outlined
-              outlined
+            :readonly="formData.status !== 'NEW' && formData.status !== ''"
-              hide-bottom-space
+            label="ผู้ถูกร้องเรียน"
-              dense
+            option-value="id"
-              ref="investigationRef"
+            option-label="name"
-              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
+            emit-value
-              v-model="formData.investigation"
+            use-input
-              :options="investigateFactStore.investigationOp"
+            map-options
-              label="ลักษณะการสืบสวน"
+            hide-bottom-space
-              emit-value
+            :options="investigateFactStore.respondentTypeOps"
-              map-options
+            :rules="[(val) => !!val || `${'กรุณาเลือกผู้ร้องเรียน'}`]"
-              option-label="name"
+            lazy-rules
-              option-value="id"
+            @filter="(inputValue: any,
-              use-input
+                doneFn: Function) => investigateFactStore.filterSelector(inputValue, doneFn, 'filterrespondentType'
-              @filter="(inputValue: any,
+                )"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            :readonly="statusStep"
+            :disable="statusStep"
+            for="#investigationDetail"
+            outlined
+            hide-bottom-space
+            dense
+            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>
+            ><template v-slot:no-option>
-                <q-item>
+              <q-item>
-                  <q-item-section class="text-grey">
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-                    ไม่มีข้อมูล
+              </q-item>
-                  </q-item-section>
+            </template>
-                </q-item>
+          </q-select>
-              </template>
+          <div
-            </q-select>
+            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
+              :readonly="formData.status !== 'NEW' && formData.status !== ''"
+              outlined
+              option-label="name"
+              option-value="id"
+              emit-value
+              map-options
+              v-model="formData.organizationId"
+              :options="investigateFactStore.organizationIdOp"
+              label="เลือกสำนักงาน"
+              :rules="[(val) => !!val || `${'กรุณาเลือกสำนักงาน'}`]"
+              lazy-rules
+            />
+          </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="formData.status === 'NEW' || formData.status === ''"
+                  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="investigateFactStore.columnsPerson"
+                  :rows="investigateFactStore.rowsAdd"
+                  row-key="idcard"
+                  flat
+                  bordered
+                  :paging="true"
+                  dense
+                  class="custom-header-table"
+                  :visible-columns="investigateFactStore.visibleColumnsPerson"
+                >
+                  <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>
         </div>
 
-        <div v-if="formData.investigation === '003'" class="col-12">
+        <div v-if="formData.investigationDetail === 'OTHER'" class="col-12">
           <q-input
-            for="#other"
+            for="#investigationDetailOther"
             class="full-width cursor-pointer"
             outlined
-            ref="otherRef"
+            ref="investigationDetailOtherRef"
             dense
             borderless
-            v-model="formData.other"
+            v-model="formData.investigationDetailOther"
             hide-bottom-space
             :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
             type="textarea"
             :rules="[
               (val) =>
-                formData.investigation === '003'
+                formData.investigationDetail === 'OTHER'
                   ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
                   : true,
             ]"
@@ -336,7 +729,10 @@ watch(props.data, async () => {
             >
               วันที่สืบสวน
               <q-checkbox
-                v-if="formData.clickTime != null && statusStep === false"
+                v-if="
+                  props.data.investigationDateStart === null &&
+                  props.data.investigationDateEnd === null
+                "
                 for="#clickTime"
                 size="md"
                 v-model="formData.clickTime"
@@ -354,7 +750,7 @@ watch(props.data, async () => {
                   <datepicker
                     menu-class-name="modalfix"
                     :readonly="isUpdate && statusStep"
-                    v-model="formData.date"
+                    v-model="formData.investigationDateStart"
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
@@ -376,7 +772,9 @@ watch(props.data, async () => {
                         borderless
                         hide-bottom-space
                         :model-value="
-                          formData.date ? date2Thai(formData.date) : null
+                          formData.investigationDateStart
+                            ? date2Thai(formData.investigationDateStart)
+                            : null
                         "
                         :rules="[
                           (val) =>
@@ -433,7 +831,7 @@ watch(props.data, async () => {
                 <div class="col-3">
                   <datepicker
                     menu-class-name="modalfix"
-                    v-model="formData.dateEnd"
+                    v-model="formData.investigationDateEnd"
                     :readonly="statusStep && isUpdate"
                     :locale="'th'"
                     autoApply
@@ -456,7 +854,9 @@ watch(props.data, async () => {
                         hide-bottom-space
                         borderless
                         :model-value="
-                          formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                          formData.investigationDateEnd
+                            ? date2Thai(formData.investigationDateEnd)
+                            : null
                         "
                         :rules="[
                           (val) =>
@@ -588,14 +988,14 @@ watch(props.data, async () => {
 
         <div class="col-12">
           <q-input
-            for="#detail"
+            for="#investigationDescription"
             class="full-width cursor-pointer"
             outlined
-            ref="detailRef"
+            ref="investigationDescriptionRef"
             dense
             lazy-rules
             borderless
-            v-model="formData.detail"
+            v-model="formData.investigationDescription"
             :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
             hide-bottom-space
             :label="`${'รายละเอียด'}`"
@@ -622,10 +1022,12 @@ watch(props.data, async () => {
                     dense
                     :readonly="statusStep"
                     lazy-rules
-                    ref="statusResultRef"
+                    ref="investigationStatusResultRef"
-                    v-model="formData.statusResult"
+                    v-model="formData.investigationStatusResult"
                     :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-                    :options="investigateFactStore.statusResultOptions"
+                    :options="
+                      investigateFactStore.investigationStatusResultOptions
+                    "
                     label="ผลการสืบสวน"
                     emit-value
                     map-options
@@ -645,17 +1047,22 @@ watch(props.data, async () => {
                   </q-select>
                 </div>
 
-                <div v-if="formData.statusResult == 'have_cause'" class="col-3">
+                <div
+                  v-if="formData.investigationStatusResult == 'HAVE_CAUSE'"
+                  class="col-3"
+                >
                   <q-select
                     for="#fault"
                     outlined
                     dense
-                    ref="causeTextRef"
+                    ref="investigationCauseTextRef"
-                    v-model="formData.causeText"
+                    v-model="formData.investigationCauseText"
                     :rules="[
                       (val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`,
                     ]"
-                    :options="investigateFactStore.causeTextOptions"
+                    :options="
+                      investigateFactStore.investigationCauseTextOptions
+                    "
                     label="ร้ายแรง/ไม่ร้ายแรง"
                     emit-value
                     map-options
@@ -677,11 +1084,11 @@ watch(props.data, async () => {
                 <q-input
                   class="full-width cursor-pointer"
                   outlined
-                  ref="reasonRef"
+                  ref="resultRef"
                   dense
                   lazy-rules
                   borderless
-                  v-model="formData.reason"
+                  v-model="formData.result"
                   :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                   hide-bottom-space
                   :label="`${'เหตุผล'}`"
@@ -696,11 +1103,13 @@ watch(props.data, async () => {
                 for="#evidenceFiles"
                 outlined
                 dense
-                ref="evidenceFilesRef"
                 v-model="formData.evidenceFiles"
                 label="เอกสารที่เกี่ยวข้องกับการสืบสวน"
                 lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน']"
+                :rules="[
+                  (val) =>
+                    !!val || 'กรุณาเลือกไฟล์เอกสารที่เกี่ยวข้องกับการสืบสวน',
+                ]"
                 hide-bottom-space
               >
                 <template v-slot:prepend>
@@ -716,6 +1125,7 @@ watch(props.data, async () => {
                   color="add"
                   class="q-ml-sm"
                   icon="mdi-upload"
+                  @click="uploadFileRelevant"
                   ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                 >
               </div>
@@ -724,10 +1134,11 @@ watch(props.data, async () => {
                 <q-item
                   clickable
                   v-ripple
-                  v-for="(file, index) in evidenceFiles"
+                  v-for="(file, index) in props.data
+                    .disciplineInvestigateRelevantDocs"
                   :key="index"
                 >
-                  <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+                  <q-item-section>{{ file.fileName }}</q-item-section>
                   <q-item-section avatar>
                     <div class="row">
                       <div>
@@ -738,6 +1149,7 @@ watch(props.data, async () => {
                           size="12px"
                           color="blue"
                           icon="mdi-download-outline"
+                          @click="downloadFileRelevant(file.pathName)"
                         >
                           <q-tooltip>ดาวน์โหลด</q-tooltip>
                         </q-btn>
@@ -750,6 +1162,7 @@ watch(props.data, async () => {
                           size="12px"
                           color="red"
                           icon="mdi-delete-outline"
+                          @click="deleteFileRelevant(file.id)"
                           ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
                         >
                       </div>
@@ -783,11 +1196,10 @@ watch(props.data, async () => {
           <div class="col-xs-12 q-pa-sm row">
             <q-file
               class="col-11 q-mt-sm"
-              for="#evidenceFiles"
+              for="#documentFile"
               outlined
               dense
-              ref="evidenceFilesRef"
+              v-model="formData.documentFile"
-              v-model="formData.evidenceFiles"
               label="ไฟล์เอกสารหลักฐาน"
               lazy-rules
               :rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
@@ -806,6 +1218,7 @@ watch(props.data, async () => {
                 color="add"
                 class="q-ml-sm q-mt-sm"
                 icon="mdi-upload"
+                @click="uploadFile"
                 ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
               >
             </div>
@@ -815,10 +1228,10 @@ watch(props.data, async () => {
               <q-item
                 clickable
                 v-ripple
-                v-for="(file, index) in evidenceFiles"
+                v-for="file in props.data.disciplineInvestigateDocs"
-                :key="index"
+                :key="file.id"
               >
-                <q-item-section>{{ file.name + (index + 1) }}</q-item-section>
+                <q-item-section>{{ file.fileName }}</q-item-section>
                 <q-item-section avatar>
                   <div class="row">
                     <div>
@@ -829,6 +1242,7 @@ watch(props.data, async () => {
                         size="12px"
                         color="blue"
                         icon="mdi-download-outline"
+                        @click="downloadFile(file.pathName)"
                       >
                         <q-tooltip>ดาวน์โหลดเอกสารหลักฐาน</q-tooltip>
                       </q-btn>
@@ -841,6 +1255,7 @@ watch(props.data, async () => {
                         size="12px"
                         color="red"
                         icon="mdi-delete-outline"
+                        @click="deleteFile(file.id)"
                         ><q-tooltip>ลบเอกสารหลักฐาน</q-tooltip></q-btn
                       >
                     </div>
@@ -854,11 +1269,28 @@ watch(props.data, async () => {
     </div>
   </q-card>
 
+  <DialogAddPersonal
+    title="ผู้ถูกร้องเรียน"
+    :checkId="investigateFactStore.rowsAdd"
+    :modal="modalPerson"
+    btn-title="เพิ่มรายชื่อผู้ถูกสอบสวน"
+    :close="toggleModal"
+    :save="addPerson"
+    @returnData="handleSave"
+  />
+
   <Dialogbody
+    :get-list="getList"
     v-model:Modal="modal"
     :clickClose="clickClose"
     :rows2="investigateDis.rows2"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
+    :filterTable="filterTable"
+    :rowsPerPage="rowsPerPage"
+    :page="page"
+    :maxPage="maxPage"
+    @update:pagination="updatePagingProp"
+    @returnDirector="returnDirector"
   />
 </template>

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

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
+import { ref, useAttrs, onMounted,watch } from "vue";
 
 import router from "@/router";
 import { useQuasar } from "quasar";
-// import { useCounterMixin } from "@/stores/mixin";
+import { useCounterMixin } from "@/stores/mixin";
 
-// import config from "@/app.config";
+import config from "@/app.config";
-// import http from "@/plugins/http";
+import http from "@/plugins/http";
 
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 const dataInvestigate = useInvestigateFactStore();
 const { fecthList } = dataInvestigate;
-// const mixin = useCounterMixin();
+const mixin = useCounterMixin();
-// const {
+const {
-//   date2Thai,
+  date2Thai,
-//   success,
+  success,
-//   messageError,
+  messageError,
-//   showLoader,
+  showLoader,
-//   hideLoader,
+  hideLoader,
-//   dialogConfirm,
+  dialogConfirm,
-//   dialogRemove,
+  dialogRemove,
-// } = mixin;
+} = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
 /** ค้นหาข้อมูลในตาราง */
@@ -33,15 +33,55 @@ const resetFilter = () => {
   }
 };
 
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+/**
+ *pagination ของตาราง
+ */
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
+
+watch(() => currentPage.value,() => {
+  rowsPerPage.value = pagination.value.rowsPerPage;
+  getList();
+});
+
+watch(()=>pagination.value.rowsPerPage,()=>{
+  rowsPerPage.value = pagination.value.rowsPerPage;
+  currentPage.value = 1
+  getList();
+})
+async function getList() {
+  showLoader();
+  await http
+    .get(
+      config.API.investigateMain(
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      const data = res.data.result.data
+      dataInvestigate.fecthList(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const attrs = ref<any>(useAttrs());
 
-/** แสดงจำนวนในตาราง */
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /**ไปยังหน้าเพิ่มข้อมูล */
 const clickAdd = () => {
@@ -60,19 +100,7 @@ function editPage(id: string) {
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  await fecthList([
+  getList()
-    {
-      id: "001",
-      subject: "ทุจริตในหน้าที่",
-      interrogated: "บุคคล",
-      complaintOffenseDetails: "NOT_SPECIFIED",
-      investigationDetail: "appoint_directors",
-      startDate: new Date ("2023-11-20"),
-      endDate: new Date ("2023-11-25"),
-      statusResult: "not_specified",
-      status: "new"
-    },
-  ]);
 });
 </script>
 <template>
@@ -152,6 +180,17 @@ onMounted(async () => {
         :visible-columns="dataInvestigate.visibleColumns"
         v-model:pagination="pagination"
       >
+      <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th

src/modules/11_discipline/components/3_InvestigateDisciplinary/Dialogbody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect } from "vue";
+import { ref, computed, watchEffect, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -13,16 +13,16 @@ const $q = useQuasar();
 const selected = ref<directorType[]>([]);
 const mixin = useCounterMixin();
 const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
-
+const currentPage = ref<number>(1);
 /** ค้นหาคอลัม */
 const visibleColumns2 = ref<string[]>([
   "no",
-  "nameDirector",
+  "name",
   "position",
   "duty",
   "email",
-  "telephone",
+  "phone",
-  "role"
+  "role",
 ]);
 
 /**ข้อมูลหัว ตาราง*/
@@ -39,11 +39,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "nameDirector",
+    name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "nameDirector",
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -83,11 +83,11 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "telephone",
+    name: "phone",
     align: "left",
     label: "เบอร์โทรศัพท์",
     sortable: true,
-    field: "telephone",
+    field: "phone",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -113,6 +113,26 @@ const props = defineProps({
   getData: Function,
   rows2: Array,
   filterKeyword2: String,
+  filterTable: {
+    type: String,
+    default: "",
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  getList: {
+    type: Function,
+    default: () => "",
+  },
 });
 
 const checkSelected = computed(() => {
@@ -123,42 +143,77 @@ const checkSelected = computed(() => {
 });
 
 /** popup ยืนยันส่งัว */
-function saveDirector(){
+function saveDirector() {
   dialogConfirm(
     $q,
     () => DirectorSave(),
     "ยืนยันเพิ่มรายชื่อกรรมการ",
     "ต้องการยืนยันเพิ่มรายชื่อกรรมการ?"
   );
-};
+}
 
 /** ส่งไปออกคำสั่ง */
-async function DirectorSave(){};
+async function DirectorSave() {
+  emit('returnDirector',selected.value);
+}
 
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+const emit = defineEmits([
+  "update:filterKeyword2",
+  "update:selected",
+  "update:pagination",
+  "returnDirector"
+]);
 
-function updateInput(value: any){
+function updateInput(value: any) {
   emit("update:filterKeyword2", value);
-};
+}
 
 /**รีเซ็ตค่าในช่องค้นหา */
-function Reset(){
+function Reset() {
   emit("update:filterKeyword2", "");
-};
+}
 
 /** เช็คค่า props.Modal === true */
 watchEffect(() => {
   if (props.Modal === true) {
     selected.value = [];
+    props.getList();
   }
 });
+
+/** แสดงจำนวนในตาราง */
+const pagination = ref({
+  descending: true,
+  page: Number(props.page),
+  rowsPerPage: props.rowsPerPage,
+});
+
+const updateProp = (newPagination: any, page: number) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, page);
+};
+
+watch(
+  () => currentPage.value,
+  () => {
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    currentPage.value = 1;
+    updateProp(pagination.value.rowsPerPage, currentPage.value);
+  }
+);
 </script>
 <template>
   <q-dialog v-model="props.Modal">
     <q-card style="width: 1200px; max-width: 80vw">
       <DialogHeader title="เลือกรายชื่อกรรมการ" :close="clickClose" />
       <q-separator />
-      <q-card-section >
+      <q-card-section>
         <q-input
           borderless
           outlined
@@ -185,7 +240,7 @@ watchEffect(() => {
           :columns="columns2"
           :rows="rows2"
           :filter="filterKeyword2"
-          row-key="nameDirector"
+          row-key="id"
           :visible-columns="visibleColumns2"
           selection="multiple"
           v-model:selected="selected"

src/modules/11_discipline/interface/index/Main.ts

@@ -10,12 +10,12 @@ interface DataNumberOption {
 
 interface InvestigatefactsDataRowType {
   id:string,
-  subject: string;
+  title: string;
-  interrogated: string;
+  respondentType: string;
-  complaintOffenseDetails: string,
+  offenseDetails: string,
   investigationDetail: string,
   dateInvestigate: string,
-  statusResult: string,
+  investigationStatusResult: string,
   status: string
 }
 
@@ -32,12 +32,23 @@ interface investigateDisDataRowType {
 }
 
 interface directorType {
-  nameDirector: string;
+  id:string
+  prefix:string
+  firstName:string
+  lastName:string
   position: string;
-  duty: string;
   email: string;
-  telephone: string;
+  phone: string;
-  role: string;
+}
+interface responseType {
+  id:string
+  name:string
+  prefix:string
+  firstName:string
+  lastName:string
+  position:string
+  email:string
+  phone:string
 }
 
 export type {
@@ -45,5 +56,6 @@ export type {
   InvestigatefactsDataRowType,
   investigateDisDataRowType,
   directorType,
-  DataNumberOption
+  DataNumberOption,
+  responseType
 };

src/modules/11_discipline/interface/request/investigateFact.ts

@@ -1,35 +1,53 @@
 interface FormData {
+  id:string
+  idComplaint:string
+  investigationDetail: string;
   complaint: string;
   complaintdetail: string;
-  detail: string;
+  investigationDescription: string;
   fault: string;
-  other: string;
+  investigationDetailOther: string;
-  evidenceFiles: File | null;
+  evidenceFiles: any | null;
   fileComplaint: File | null;
   clickTime: boolean;
-  date: Date | null;
+  investigationDateStart: Date | null;
-  dateEnd: Date;
+  investigationDateEnd: Date|null;
   daysExtend: number | null;
-  investigation: string;
+  investigationStatusResult: string;
-  statusResult: string;
+  investigationCauseText: string;
-  causeText: string;
   complaintStatus:string
-  reason: string
+  result: string
+  directors:object|null
+  status:string
+  disciplineInvestigateDocs:object|null
+  disciplineInvestigateRelevantDocs:object|null
+  documentFile:any|null
+  respondentType:string
+  organizationId:string
+  persons:object|null
+}
+interface ArrayPerson{
+  id:string
+  name:string
+  position:string
+  email:string
+  phone:string
 }
 interface MyObjectInvestigateRef {
   complaint: object | null;
   complaintdetail: object | null;
-  detail: object | null;
+  investigationDescription: object | null;
   fault: object | null;
-  evidenceFiles: object | null;
   fileComplaint: object | null;
   date: object | null;
   dateEnd: object | null;
-  investigation: object | null;
+  investigationDetail: object | null;
   daysExtend: object | null;
-  statusResult: object | null;
+  investigationStatusResult: object | null;
-  causeText: object | null;
+  investigationCauseText: object | null;
-  reason: object | null;
+  result: object | null;
   [key: string]: any;
 }
+
+
 export type { FormData, MyObjectInvestigateRef };

src/modules/11_discipline/interface/response/investigate.ts

@@ -1,13 +1,31 @@
 interface ListData {
   id: string;
-  subject: string;
+  title: string;
-  interrogated: string;
+  respondentType: string;
-  complaintOffenseDetails: string;
+  offenseDetails: string;
   investigationDetail: string;
-  startDate: Date | null;
+  investigationDateStart: Date | null;
-  endDate: Date | null;
+  investigationDateEnd: Date | null;
-  statusResult: string;
+  investigationStatusResult: string;
   status: string;
+  createdAt: Date|null;
 }
 
-export type { ListData };
+interface ArrayPerson {
+  personId:string
+  idcard:string
+  name:string
+  prefix:string
+  firstName:string
+  lastName:string
+  posNo:string
+  position:string
+  positionLevel:string
+  salary:number|null
+  organization:string
+}
+interface ocListType{
+  organizationId:string
+  organizationName:string
+}
+export type { ListData,ArrayPerson,ocListType };

src/modules/11_discipline/store/ComplaintsStore.ts

@@ -3,9 +3,11 @@ import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
-import type { DataList, DataListRow, DataAdd, ArrayPerson,ocListType } from "@/modules/11_discipline/interface/response/complaint"
+import type { DataList, DataListRow, DataAdd,ocListType } from "@/modules/11_discipline/interface/response/complaint"
 import type { QTableProps } from "quasar";
-
+import type {
+  ArrayPerson,
+} from "@/modules/11_discipline/interface/request/complaint";
 const mixin = useCounterMixin()
 const { date2Thai } = mixin
 

src/modules/11_discipline/store/InvestigateDisStore.ts

@@ -5,6 +5,7 @@ import type {
   investigateDisDataRowType,
   DataOption,
   directorType,
+  responseType
 } from "@/modules/11_discipline/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
@@ -46,13 +47,15 @@ export const useInvestigateDisStore = defineStore(
       rows.value = datalist;
     }
     async function fecthDirector(data: directorType[]) {
-      let datalistDirector: directorType[] = data.map((e: directorType) => ({
+      let datalistDirector: responseType[] = data.map((e: directorType) => ({
-        nameDirector: e.nameDirector,
+        id: e.id,
+        name: `${e.prefix}${e.firstName} ${e.lastName}`,
+        prefix:e.prefix,
+        firstName:e.firstName,
+        lastName:e.lastName,
         position: e.position,
-        duty: e.duty,
         email: e.email,
-        telephone: e.telephone,
+        phone: e.phone,
-        role: e.role,
       }));
       rows2.value = datalistDirector;
       selected.value = rows2.value;

src/modules/11_discipline/store/InvestigateFactStore.ts

@@ -8,10 +8,21 @@ import type {
   DataOption,
   DataNumberOption,
 } from "@/modules/11_discipline/interface/index/Main";
-import type { ListData } from "@/modules/11_discipline/interface/response/investigate";
+import type { ListData, ArrayPerson, ocListType } from "@/modules/11_discipline/interface/response/investigate";
 
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
+const organizationIdOp = ref<DataOption[]>([]);
+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
+
+}
 
 /*** store ของข้อมูลสืบสวนข้อเท็จจริง */
 export const useInvestigateFactStore = defineStore(
@@ -31,37 +42,43 @@ export const useInvestigateFactStore = defineStore(
       { id: "NOT_DEADLY", name: "ไม่ร้ายแรง" },
       { id: "DEADLY", name: "ร้ายแรง" },
     ]);
-    const investigationOps = ref<DataOption[]>([
+    const investigationDetailOps = ref<DataOption[]>([
-      { id: "appoint_directors", name: "แต่งตั้งกรรมการสืบสวน" },
+      { id: "APPOINT_DIRECTORS", name: "แต่งตั้งกรรมการสืบสวน" },
-      { id: "secret_investigation", name: "สืบสวนทางลับ" },
+      { id: "SECRET_INVESTIGATION", name: "สืบสวนทางลับ" },
-      { id: "other", name: "อื่นๆ" },
+      { id: "OTHER", name: "อื่นๆ" },
     ]);
     const faultOps = ref<DataOption[]>([
-      { id: "new", name: "กำลังสืบสวน" },
+      { id: "NEW", name: "กำลังสืบสวน" },
-      { id: "stop", name: "ยุติเรื่อง" },
+      { id: "STOP", name: "ยุติเรื่อง" },
-      { id: "complete", name: "ส่งไปสอบสวน" },
+      { id: "COMPLETE", name: "ส่งไปสอบสวน" },
     ]);
-    const statusResultOptions = ref<DataOption[]>([
+    const investigationStatusResultOptions = ref<DataOption[]>([
-      { id: "not_specified", name: "ยังไม่ระบุ" },
+      { id: "NOT_SPECIFIED", name: "ยังไม่ระบุ" },
-      { id: "have_cause", name: "มีมูล" },
+      { id: "HAVE_CAUSE", name: "มีมูล" },
-      { id: "no_cause", name: "ไม่มีมูล" },
+      { id: "NO_CAUSE", name: "ไม่มีมูล" },
     ]);
-    const causeTextOptions = ref<DataOption[]>([
+    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 investigationOp = ref<DataOption[]>(investigationOps.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",
-      "subject",
+      "title",
-      "interrogated",
+      "respondentType",
-      "complaintOffenseDetails",
+      "offenseDetails",
       "investigationDetail",
       "dateInvestigate",
-      "statusResult",
+      "investigationStatusResult",
       "status",
     ]);
 
@@ -77,31 +94,31 @@ export const useInvestigateFactStore = 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: "complaintOffenseDetails",
+        name: "offenseDetails",
         align: "left",
         label: "ลักษณะความผิด",
         sortable: true,
-        field: "complaintOffenseDetails",
+        field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
@@ -130,11 +147,11 @@ export const useInvestigateFactStore = defineStore(
           a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "statusResult",
+        name: "investigationStatusResult",
         align: "left",
         label: "ผลการสืบสวน",
         sortable: true,
-        field: "statusResult",
+        field: "investigationStatusResult",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
         sort: (a: string, b: string) =>
@@ -162,7 +179,7 @@ export const useInvestigateFactStore = defineStore(
             (v: any) => v.name.toLowerCase().indexOf(val) > -1
           );
         } else if (type === "investigationOp") {
-          investigationOp.value = investigationOps.value.filter(
+          investigationDetailOp.value = investigationDetailOps.value.filter(
             (v: any) => v.name.toLowerCase().indexOf(val) > -1
           );
         } else if (type === "daysExtendOp") {
@@ -174,27 +191,51 @@ 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)
+    function filterSelector(val: string, update: Function, type: string) {
+      console.log(val)
+      update(() => {
+        const needle = val.toLowerCase();
+
+        if (type === "filtercomplainantType") {
+          respondentTypeOps.value = respondentTypeOp.value.filter(
+            (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+          );
+
+        }
+
+      });
+    }
     async function fecthList(data: ListData[]) {
       rows.value = await data.map((e: ListData) => {
         return {
           id: e.id,
-          subject: e.subject,
+          title: e.title,
-          interrogated: e.interrogated,
+          respondentType: convertRespondentType(e.respondentType),
-          complaintOffenseDetails: convertOffenseDetails(
+          offenseDetails: convertOffenseDetails(
-            e.complaintOffenseDetails
+            e.offenseDetails
           ),
           investigationDetail: convertInvestigationDetail(
             e.investigationDetail
           ),
           dateInvestigate:
-            e.startDate && e.endDate
+            e.investigationDateStart && e.investigationDateEnd
-              ? `${date2Thai(e.startDate)} - ${date2Thai(e.endDate)}`
+              ? `${date2Thai(e.investigationDateStart)} - ${date2Thai(e.investigationDateEnd)}`
               : "-",
-          statusResult: activeStatusResult(e.statusResult),
+          investigationStatusResult: activeStatusResult(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;
@@ -202,7 +243,7 @@ export const useInvestigateFactStore = defineStore(
     }
 
     function convertInvestigationDetail(val: string) {
-      const result = investigationOps.value.find((x: any) => x.id == val)?.name;
+      const result = investigationDetailOps.value.find((x: any) => x.id == val)?.name;
       return result ? result : "-";
     }
 
@@ -211,7 +252,7 @@ export const useInvestigateFactStore = defineStore(
       return result ? result : "-";
     }
     function activeStatusResult(val: string) {
-      const result = statusResultOptions.value.find(
+      const result = investigationStatusResultOptions.value.find(
         (x: any) => x.id == val
       )?.name;
       return result ? result : "-";
@@ -222,16 +263,26 @@ export const useInvestigateFactStore = defineStore(
       fecthList,
       rows,
       daysExtendOps,
-      investigationOps,
+      investigationDetailOps,
       faultOps,
       filterFnOptionsType,
       faultOp,
       daysExtendOp,
-      investigationOp,
+      investigationDetailOp,
       visibleColumns,
       columns,
-      statusResultOptions,
+      investigationStatusResultOptions,
-      causeTextOptions,
+      investigationCauseTextOptions,
+      fetchInvestigateAdd,
+      rowsAdd,
+      respondentTypeOp,
+      filterSelector,
+      respondentTypeOps,
+      organizationIdOp,
+      ocListFn,
+      columnsPerson,
+      visibleColumnsPerson,
+
     };
   }
 );