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

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

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

@@ -261,11 +261,11 @@ function onSubmit() {
 }
 
 /**
- * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่เริ่ม
+ * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสืบสวน
- * @param val วันที่เริ่ม
+ * @param val จำนวนวันที่ต้องการขยาย
  */
 function calEndDate(val: string) {
-  const date = new Date(props.data.dateEnd);
+  const date = new Date(props.data.investigationDateEnd);
   const dateNew = new Date();
   formData.investigationDateEnd = new Date(
     dateNew.setDate(date.getDate() + Number(val))
@@ -730,8 +730,8 @@ onMounted(async () => {
               วันที่สืบสวน
               <q-checkbox
                 v-if="
-                  props.data.investigationDateStart === null &&
+                  props.data.investigationDateStart != null &&
-                  props.data.investigationDateEnd === null
+                  props.data.investigationDateEnd != null
                 "
                 for="#clickTime"
                 size="md"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted,watch } from "vue";
+import { ref, useAttrs, onMounted, watch } from "vue";
 
 import router from "@/router";
 import { useQuasar } from "quasar";
@@ -10,7 +10,6 @@ import http from "@/plugins/http";
 
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 const dataInvestigate = useInvestigateFactStore();
-const { fecthList } = dataInvestigate;
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -47,16 +46,22 @@ const pagination = ref({
   rowsPerPage: rowsPerPage.value,
 });
 
-watch(() => currentPage.value,() => {
+watch(
-  rowsPerPage.value = pagination.value.rowsPerPage;
+  () => currentPage.value,
-  getList();
+  () => {
-});
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getList();
+  }
+);
 
-watch(()=>pagination.value.rowsPerPage,()=>{
+watch(
-  rowsPerPage.value = pagination.value.rowsPerPage;
+  () => pagination.value.rowsPerPage,
-  currentPage.value = 1
+  () => {
-  getList();
+    rowsPerPage.value = pagination.value.rowsPerPage;
-})
+    currentPage.value = 1;
+    getList();
+  }
+);
 async function getList() {
   showLoader();
   await http
@@ -69,7 +74,7 @@ async function getList() {
     )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      const data = res.data.result.data
+      const data = res.data.result.data;
       dataInvestigate.fecthList(data);
     })
     .catch((e) => {
@@ -82,7 +87,6 @@ async function getList() {
 
 const attrs = ref<any>(useAttrs());
 
-
 /**ไปยังหน้าเพิ่มข้อมูล */
 const clickAdd = () => {
   router.push(`/discipline/investigatefacts/add`);
@@ -92,7 +96,8 @@ const clickAdd = () => {
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
  */
-function editPage(id: string) {
+async function editPage(id: string) {
+  dataInvestigate.tabMenu = await "investigatefacts";
   router.push(`/discipline/investigatefacts/${id}`);
 }
 
@@ -100,7 +105,7 @@ function editPage(id: string) {
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(async () => {
-  getList()
+  getList();
 });
 </script>
 <template>
@@ -180,7 +185,7 @@ onMounted(async () => {
         :visible-columns="dataInvestigate.visibleColumns"
         v-model:pagination="pagination"
       >
-      <template v-slot:pagination="scope">
+        <template v-slot:pagination="scope">
           <q-pagination
             v-model="currentPage"
             active-color="primary"