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

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

@@ -8,9 +8,13 @@ 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 type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+const investigateFactStore = useInvestigateFactStore();
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useInvestigateFactStore();
@@ -46,9 +50,107 @@ const data = reactive<FormData>({
   documentFile: null,
   respondentType: "",
   organizationId: "",
-  persons:[]
+  persons: [],
 });
 
+/** หัวตาราง */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "info",
+    align: "left",
+    label: "",
+    sortable: false,
+    field: "info",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "idcard",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: true,
+    field: "idcard",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** หัวข้อที่เเสดงในตาราง */
+const visibleColumns = ref<string[]>([
+  "info",
+  "no",
+  "idcard",
+  "name",
+  "posNo",
+  "position",
+  "positionLevel",
+  "salary",
+  "organization",
+]);
+
 function getData() {
   showLoader();
   http
@@ -58,8 +160,8 @@ function getData() {
       const dataList = res.data.result;
       data.id = dataList.id;
       data.idComplaint = dataList.idComplaint;
-      data.respondentType = dataList.respondentType
-      data.persons = dataList.persons
+      data.respondentType = dataList.respondentType;
+      data.persons = dataList.persons;
       data.investigationDetail = dataList.investigationDetail;
       data.investigationDetailOther = dataList.investigationDetailOther;
       data.investigationDateStart = dataList.investigationDateStart;
@@ -178,6 +280,23 @@ function confirmCancelInvestigate() {
     });
 }
 
+function emitPerson(data: FormData[]) {
+  const dataMapId = data.map((item: FormData) => item.id);
+  showLoader();
+  http
+    .put(config.API.investigateApprove(id.value), {
+      persons: dataMapId,
+    })
+    .then((res) => {
+      // router.push(`/discipline/investigatefacts`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 /** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
@@ -251,7 +370,15 @@ onMounted(() => {
       </q-tab-panels>
     </q-card>
 
-    <Popup :modal="modalPopup" :close="closePopup" title="ส่งไปสอบสวน" />
+    <Popup
+      :modal="modalPopup"
+      :close="closePopup"
+      title="ส่งไปสอบสวน"
+      :rows="investigateFactStore.rowsAdd"
+      :columns="columns"
+      :visibleColumns="visibleColumns"
+      @return-person="emitPerson"
+    />
   </div>
 </template>
 <style scoped>