แก้ไขฟอร์มสืบสวน

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 import FormComplaints from "@/modules/11_discipline/components/1_Complaint/Form.vue"; //เรื่องร้องเรียน
 import FormInvestigatefacts from "@/modules/11_discipline/components/2_InvestigateFacts/Form.vue"; //สืบสวนข้อเท็จจริง
 import { useRouter, useRoute } from "vue-router";
@@ -8,6 +8,11 @@ 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 {
+  FormData as FormDataComplaint,
+  ArrayPerson,
+  ArrayFileList,
+} from "@/modules/11_discipline/interface/request/complaint";
 import type { QTableProps } from "quasar";
 
 import config from "@/app.config";
@@ -23,7 +28,7 @@ const router = useRouter();
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
 
-/** ข้อมูล v-model ของฟอร์ม */
+/** ข้อมูล v-model ของฟอร์มสืบสวน */
 const data = reactive<FormData>({
   id: "",
   idComplaint: "",
@@ -53,6 +58,80 @@ const data = reactive<FormData>({
   persons: [],
 });
 
+/** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
+const personObjComplaint = reactive<ArrayPerson>({
+  personId: "",
+  idcard: "",
+  name: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  posNo: "",
+  position: "",
+  positionLevel: "",
+  salary: null,
+  organization: "",
+});
+
+const fileListObjComplaint = reactive<ArrayFileList>({
+  id: "",
+  pathName: "",
+  fileName: "",
+});
+
+const dataComplaints = reactive<FormDataComplaint>({
+  id: "",
+  respondentType: "",
+  organizationId: "",
+  consideredAgency: "",
+  title: "",
+  description: "",
+  dateReceived: null,
+  dateConsideration: null,
+  offenseDetails: "",
+  levelConsideration: "",
+  dateNotification: null,
+  complaintFrom: "",
+  appellant: "",
+  documentFile: null,
+  status: "",
+  persons: [personObjComplaint],
+  result: "",
+  disciplineComplaintDocs: [fileListObjComplaint],
+});
+
+async function getDataComplaint() {
+  showLoader();
+  await http
+    .get(config.API.complaintbyId(data.idComplaint))
+    .then((res) => {
+      const dataList = res.data.result;
+      dataComplaints.id = dataList.id;
+      dataComplaints.respondentType = dataList.respondentType;
+      dataComplaints.organizationId = dataList.organizationId;
+      dataComplaints.consideredAgency = dataList.consideredAgency;
+      dataComplaints.title = dataList.title;
+      dataComplaints.description = dataList.description;
+      dataComplaints.dateReceived = dataList.dateReceived;
+      dataComplaints.levelConsideration = dataList.levelConsideration;
+      dataComplaints.dateConsideration = dataList.dateConsideration;
+      dataComplaints.offenseDetails = dataList.offenseDetails;
+      dataComplaints.dateNotification = dataList.dateNotification;
+      dataComplaints.complaintFrom = dataList.complaintFrom;
+      dataComplaints.appellant = dataList.appellant;
+      dataComplaints.status = dataList.status;
+      dataComplaints.persons = dataList.persons;
+      dataComplaints.result = dataList.result;
+      dataComplaints.disciplineComplaintDocs = dataList.disciplineComplaintDocs;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -302,6 +381,17 @@ function emitPerson(data: FormData[]) {
 onMounted(() => {
   getData();
 });
+
+watch(
+  () => store.tabMenu,
+  () => {
+    if (store.tabMenu == "complaints") {
+      getDataComplaint();
+    } else {
+      getData();
+    }
+  }
+);
 </script>
 
 <template>
@@ -352,13 +442,13 @@ onMounted(() => {
         active-bg-color="teal-1"
         active-class="text-primary"
       >
-        <q-tab name="complaints" label="เรื่องร้องเรียน" />
+        <q-tab name="complaints" label="เรื่องร้องเรียน (สำเนา)" />
         <q-tab name="investigatefacts" label="สืบสวนข้อเท็จจริง" />
       </q-tabs>
       <q-separator />
       <q-tab-panels v-model="store.tabMenu" animated>
         <q-tab-panel name="complaints">
-          <FormComplaints :on-submit="onSubmit" />
+          <FormComplaints :data="dataComplaints" />
         </q-tab-panel>
         <q-tab-panel name="investigatefacts">
           <FormInvestigatefacts