fix: ตัวแปร ค้นหาขั้นสูง เก็บใน store

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

@@ -10,6 +10,7 @@ import http from "@/plugins/http";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 
@@ -19,10 +20,11 @@ import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearc
 
 const $q = useQuasar();
 const router = useRouter();
+const store = useDisciplineMainStore();
 const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
-const { showLoader, messageError, hideLoader } = mixin;
+const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
 
 const filterRef = ref<HTMLInputElement | null>(null);
 const filterTable = ref<string>("");
@@ -42,36 +44,21 @@ const pagination = ref({
 });
 
 /** ดึงข้อมูล เรื่องร้องเรียน */
-async function getList(data?: any) {
+async function getList(page?: number) {
   const body = {
-    page: pagination.value.page,
+    page: page ? page : pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
-    ...(data && data.dateReceivedStart
+    ...(store.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
-      ? { dateReceivedStart: data.dateReceivedStart }
+    ...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
-      : {}),
+    ...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
-    ...(data && data.dateReceivedEnd
+    ...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
-      ? { dateReceivedEnd: data.dateReceivedEnd }
+    ...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
-      : {}),
+    ...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
-    ...(data && data.respondentType
+    ...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[1])}),
-      ? { respondentType: data.respondentType }
-      : {}),
-    ...(data && data.offenseDetails
-      ? { offenseDetails: data.offenseDetails }
-      : {}),
-    ...(data && data.levelConsideration
-      ? { levelConsideration: data.levelConsideration }
-      : {}),
-    ...(data && data.dateConsiderationStart
-      ? { dateConsiderationStart: data.dateConsiderationStart }
-      : {}),
-    ...(data && data.dateConsiderationEnd
-      ? { dateConsiderationEnd: data.dateConsiderationEnd }
-      : {}),
   };
   showLoader();
-
   await http
     .post(config.API.complaintList(), body)
     //
@@ -183,7 +170,7 @@ onMounted(async () => {
         >
       </div>
       <q-space />
-      <DialogSearchAdvanced :get-data="(value:any)=> getList(value)" />
+      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
       <q-input
         for="#search"
         standout

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

@@ -7,14 +7,16 @@ import http from "@/plugins/http";
 import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 import { checkPermission } from "@/utils/permissions";
 
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const store = useDisciplineMainStore();
 const mixin = useCounterMixin();
 const dataInvestigate = useInvestigateFactStore();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError, showLoader, hideLoader, convertDateToAPI } = mixin;
 
 const option = ref<any[]>(dataInvestigate.statusOptions);
 
@@ -36,36 +38,45 @@ const pagination = ref({
 const attrs = ref<any>(useAttrs());
 
 /** ดึงข้อมูลบสวน */
-async function getList(data?: any) {
+async function getList(page?: number) {
   const body = {
-    page: pagination.value.page,
+    page: page ? page : pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
-    ...(data && data.respondentType
+    ...(store.formInvestigateFacts.respondentType && {
-      ? { respondentType: data.respondentType }
+      respondentType: store.formInvestigateFacts.respondentType,
-      : {}),
+    }),
-    ...(data && data.offenseDetails
+    ...(store.formInvestigateFacts.offenseDetails && {
-      ? { offenseDetails: data.offenseDetails }
+      offenseDetails: store.formInvestigateFacts.offenseDetails,
-      : {}),
+    }),
-    ...(data && data.investigationDetail
+    ...(store.formInvestigateFacts.investigationDetail && {
-      ? { investigationDetail: data.investigationDetail }
+      investigationDetail: store.formInvestigateFacts.investigationDetail,
-      : {}),
+    }),
-    ...(data && data.investigationDateStart
+    ...(store.formInvestigateFacts.investigationDate?.[0] && {
-      ? { investigationDateStart: data.investigationDateStart }
+      investigationDateStart: convertDateToAPI(
-      : {}),
+        store.formInvestigateFacts.investigationDate[0]
-    ...(data && data.investigationDateEnd
+      ),
-      ? { investigationDateEnd: data.investigationDateEnd }
+    }),
-      : {}),
+    ...(store.formInvestigateFacts.investigationDate?.[1] && {
-    ...(data && data.dateReceivedStart
+      investigationDateEnd: convertDateToAPI(
-      ? { dateReceivedStart: data.dateReceivedStart }
+        store.formInvestigateFacts.investigationDate[1]
-      : {}),
+      ),
-    ...(data && data.dateReceivedEnd
+    }),
-      ? { dateReceivedEnd: data.dateReceivedEnd }
+    ...(store.formInvestigateFacts.dateReceived?.[0] && {
-      : {}),
+      dateReceivedStart: convertDateToAPI(
-    ...(data && data.investigationStatusResult
+        store.formInvestigateFacts.dateReceived[0]
-      ? { investigationStatusResult: data.investigationStatusResult }
+      ),
-      : {}),
+    }),
+    ...(store.formInvestigateFacts.dateReceived?.[1] && {
+      dateReceivedEnd: convertDateToAPI(
+        store.formInvestigateFacts.dateReceived[1]
+      ),
+    }),
+    ...(store.formInvestigateFacts.investigationStatusResult && {
+      investigationStatusResult:
+        store.formInvestigateFacts.investigationStatusResult,
+    }),
   };
   showLoader();
   await http
@@ -148,7 +159,7 @@ onMounted(async () => {
     รายการสืบสวนข้อเท็จจริง
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
       <q-select
         v-model="statusFilter"
         label="สถานะ"
@@ -184,7 +195,7 @@ onMounted(async () => {
       </q-select>
 
       <q-space />
-      <DialogSearchAdvanced :get-data="(value:any)=> getList(value)" />
+      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
       <q-input
         for="#search"
         standout

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

@@ -5,6 +5,8 @@ import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -22,43 +24,54 @@ const pagination = ref({
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
+const store = useDisciplineMainStore();
 const dataInvestigateDis = useInvestigateDisStore();
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = dataInvestigateDis;
 
 const filter = ref<string>(""); //search data table
 
 const status = ref<string>("NEW");
-async function fetchListDisciplinary(data?: any) {
+async function fetchListDisciplinary(page?: number) {
   const body = {
-    page: pagination.value.page,
+    page: page ? page : pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
     keyword: filter.value.trim(),
     status: status.value,
-    ...(data && data.respondentType
+    ...(store.formInvestigateDisciplinary.respondentType && {
-      ? { respondentType: data.respondentType }
+      respondentType: store.formInvestigateDisciplinary.respondentType,
-      : {}),
+    }),
-    ...(data && data.offenseDetails
+    ...(store.formInvestigateDisciplinary.offenseDetails && {
-      ? { offenseDetails: data.offenseDetails }
+      offenseDetails: store.formInvestigateDisciplinary.offenseDetails,
-      : {}),
+    }),
-    ...(data && data.disciplinaryFaultLevel
+    ...(store.formInvestigateDisciplinary.disciplinaryFaultLevel && {
-      ? { disciplinaryFaultLevel: data.disciplinaryFaultLevel }
+      disciplinaryFaultLevel:
-      : {}),
+        store.formInvestigateDisciplinary.disciplinaryFaultLevel,
-    ...(data && data.disciplinaryCaseFault
+    }),
-      ? { disciplinaryCaseFault: data.disciplinaryCaseFault }
+    ...(store.formInvestigateDisciplinary.disciplinaryCaseFault && {
-      : {}),
+      disciplinaryCaseFault:
-    ...(data && data.disciplinaryDateStart
+        store.formInvestigateDisciplinary.disciplinaryCaseFault.trim(),
-      ? { disciplinaryDateStart: data.disciplinaryDateStart }
+    }),
-      : {}),
+    ...(store.formInvestigateDisciplinary.disciplinaryDate?.[0] && {
-    ...(data && data.disciplinaryDateEnd
+      disciplinaryDateStart: convertDateToAPI(
-      ? { disciplinaryDateEnd: data.disciplinaryDateEnd }
+        store.formInvestigateDisciplinary.disciplinaryDate[0]
-      : {}),
+      ),
-    ...(data && data.dateReceivedStart
+    }),
-      ? { dateReceivedStart: data.dateReceivedStart }
+    ...(store.formInvestigateDisciplinary.disciplinaryDate?.[1] && {
-      : {}),
+      disciplinaryDateEnd: convertDateToAPI(
-    ...(data && data.dateReceivedEnd
+        store.formInvestigateDisciplinary.disciplinaryDate[1]
-      ? { dateReceivedEnd: data.dateReceivedEnd }
+      ),
-      : {}),
+    }),
+    ...(store.formInvestigateDisciplinary.dateReceived?.[0] && {
+      dateReceivedStart: convertDateToAPI(
+        store.formInvestigateDisciplinary.dateReceived[0]
+      ),
+    }),
+    ...(store.formInvestigateDisciplinary.dateReceived?.[1] && {
+      dateReceivedEnd: convertDateToAPI(
+        store.formInvestigateDisciplinary.dateReceived[1]
+      ),
+    }),
   };
   showLoader();
   await http
@@ -99,9 +112,9 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(data?:any) {
+function getSearch(page?: number) {
   pagination.value.page = 1;
-  fetchListDisciplinary(data);
+  fetchListDisciplinary(page);
 }
 
 watch(

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

@@ -171,7 +171,7 @@ function updatePagination(newPagination: any) {
 
     <q-space />
     <!-- ค้นหาข้อความใน table -->
-    <DialogSearchAdvanced :get-data="(value:any)=> props.getSearch?.(value)" />
+    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
     <q-input
       standout
       dense

src/modules/11_discipline/components/4_Result/MainPage.vue

@@ -7,7 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
-
+import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
@@ -15,9 +15,10 @@ import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
 const $q = useQuasar(); // show dialog
 const router = useRouter();
 const mixin = useCounterMixin();
-const store = useDisciplineResultStore();
+const storeResult = useDisciplineResultStore();
-const { showLoader, hideLoader, messageError } = mixin;
+const store = useDisciplineMainStore();
-const { fetchList } = store;
+const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
+const { fetchList } = storeResult;
 
 const filter = ref<string>("");
 const status = ref<string>("DONE");
@@ -31,38 +32,46 @@ const pagination = ref({
 });
 
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
-async function fetchListResult(data?: any) {
+async function fetchListResult(page?: number) {
   const body = {
-    page: pagination.value.page,
+    page: page ? page : pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
     keyword: filter.value.trim(),
     status: status.value,
-    ...(data && data.respondentType
+    ...(store.formResult.respondentType && {
-      ? { respondentType: data.respondentType }
+      respondentType: store.formResult.respondentType,
-      : {}),
+    }),
-    ...(data && data.offenseDetails
+    ...(store.formResult.offenseDetails && {
-      ? { offenseDetails: data.offenseDetails }
+      offenseDetails: store.formResult.offenseDetails,
-      : {}),
+    }),
-    ...(data && data.disciplinaryFaultLevel
+    ...(store.formResult.disciplinaryFaultLevel && {
-      ? { disciplinaryFaultLevel: data.disciplinaryFaultLevel }
+      disciplinaryFaultLevel: store.formResult.disciplinaryFaultLevel,
-      : {}),
+    }),
-    ...(data && data.disciplinaryCaseFault
+    ...(store.formResult.disciplinaryCaseFault && {
-      ? { disciplinaryCaseFault: data.disciplinaryCaseFault }
+      disciplinaryCaseFault: store.formResult.disciplinaryCaseFault.trim(),
-      : {}),
+    }),
-    ...(data && data.disciplinaryDateStart
+    ...(store.formResult.disciplinaryDate?.[0] && {
-      ? { disciplinaryDateStart: data.disciplinaryDateStart }
+      disciplinaryDateStart: convertDateToAPI(
-      : {}),
+        store.formResult.disciplinaryDate[0]
-    ...(data && data.disciplinaryDateEnd
+      ),
-      ? { disciplinaryDateEnd: data.disciplinaryDateEnd }
+    }),
-      : {}),
+    ...(store.formResult.disciplinaryDate?.[1] && {
-    ...(data && data.resultDisciplineType
+      disciplinaryDateEnd: convertDateToAPI(
-      ? { resultDisciplineType: data.resultDisciplineType }
+        store.formResult.disciplinaryDate[1]
-      : {}),
+      ),
-    ...(data && data.resultTitleType
+    }),
-      ? { resultTitleType: data.resultTitleType }
+    ...(store.formResult.resultDisciplineType && {
-      : {}),
+      resultDisciplineType: store.formResult.resultDisciplineType.trim(),
-    ...(data && data.resultOc ? { resultOc: data.resultOc } : {}),
+    }),
-    ...(data && data.resultYear ? { resultYear: data.resultYear } : {}),
+    ...(store.formResult.resultTitleType && {
+      resultTitleType: store.formResult.resultTitleType.trim(),
+    }),
+    ...(store.formResult.resultOc && {
+      resultOc: store.formResult.resultOc.trim(),
+    }),
+    ...(store.formResult.resultYear && {
+      resultYear: store.formResult.resultYear,
+    }),
   };
   showLoader();
   await http
@@ -103,9 +112,9 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(data?: any) {
+function getSearch(page?: number) {
   pagination.value.page = 1;
-  fetchListResult(data);
+  fetchListResult(page);
 }
 
 watch(
@@ -131,11 +140,11 @@ onMounted(async () => {
     <div>
       <Table
         style="max-height: 80vh"
-        :rows="store.rows"
+        :rows="storeResult.rows"
-        :columns="store.columns"
+        :columns="storeResult.columns"
-        :visible-columns="store.visibleColumns"
+        :visible-columns="storeResult.visibleColumns"
         v-model:inputfilter="filter"
-        v-model:inputvisible="store.visibleColumns"
+        v-model:inputvisible="storeResult.visibleColumns"
         :nornmalData="true"
         :paging="true"
         :titleText="''"

src/modules/11_discipline/components/4_Result/Table.vue

@@ -149,7 +149,7 @@ function updatePagination(newPagination: any) {
     </q-select>
 
     <q-space />
-    <DialogSearchAdvanced :get-data="(value:any)=> props.getSearch?.(value)" />
+    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
     <q-input
       standout
       dense

src/modules/11_discipline/components/DialogSearchAdvanced.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -26,36 +26,6 @@ const modal = ref<boolean>(false);
 /** เปิด popup ค้นหาขั้นสูง */
 function onSearch() {
   modal.value = true;
-
-  formComplaint.dateReceived = null;
-  formComplaint.respondentType = "";
-  formComplaint.offenseDetails = "";
-  formComplaint.levelConsideration = "";
-  formComplaint.dateConsideration = null;
-
-  formInvestigateFacts.respondentType = "";
-  formInvestigateFacts.offenseDetails = "";
-  formInvestigateFacts.investigationDetail = "";
-  formInvestigateFacts.investigationDate = null;
-  formInvestigateFacts.dateReceived = null;
-  formInvestigateFacts.investigationStatusResult = "";
-
-  formInvestigateDisciplinary.respondentType = "";
-  formInvestigateDisciplinary.offenseDetails = "";
-  formInvestigateDisciplinary.disciplinaryFaultLevel = "";
-  formInvestigateDisciplinary.disciplinaryCaseFault = "";
-  formInvestigateDisciplinary.disciplinaryDate = null;
-  formInvestigateDisciplinary.dateReceived = null;
-
-  formResult.respondentType = "";
-  formResult.offenseDetails = "";
-  formResult.disciplinaryFaultLevel = "";
-  formResult.disciplinaryCaseFault = "";
-  formResult.disciplinaryDate = null;
-  formResult.resultDisciplineType = "";
-  formResult.resultTitleType = "";
-  formResult.resultOc = "";
-  formResult.resultYear = null;
 }
 
 /** ปิด popup ค้นหาขั้นสูง */
@@ -63,179 +33,46 @@ function onClose() {
   modal.value = false;
 }
 
-/** ตัวแปร ค้นหาขั้นสูง เรื่องร้องเรียน*/
-const formComplaint = reactive<{
-  dateReceived: [Date, Date] | null;
-  respondentType: string;
-  offenseDetails: string;
-  levelConsideration: string;
-  dateConsideration: [Date, Date] | null;
-}>({
-  dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0] - สิ้นสุด[1]
-  respondentType: "", // ผู้ถูกร้องเรียน
-  offenseDetails: "", // ลักษณะความผิด
-  levelConsideration: "", // ระดับการพิจารณา
-  dateConsideration: null, // วันที่เริ่มต้น[0] - สิ้นสุดการพิจารณา[1]
-});
-
-const formInvestigateFacts = reactive<{
-  respondentType: string;
-  offenseDetails: string;
-  investigationDetail: string;
-  investigationDate: [Date, Date] | null;
-  dateReceived: [Date, Date] | null;
-  investigationStatusResult: string;
-}>({
-  respondentType: "", // ผู้ถูกสืบสวน
-  offenseDetails: "", // ลักษณะความผิด
-  investigationDetail: "", // ลักษณะการสืบสวน
-  investigationDate: null, // วันที่สืบสวนเริ่มต้น[0] - สิ้นสุด[1]
-  dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0] - สิ้นสุด[1]
-  investigationStatusResult: "", // ผลการสืบสวน
-});
-
-const formInvestigateDisciplinary = reactive<{
-  respondentType: string;
-  offenseDetails: string;
-  disciplinaryFaultLevel: string;
-  disciplinaryCaseFault: string;
-  disciplinaryDate: [Date, Date] | null;
-  dateReceived: [Date, Date] | null;
-}>({
-  respondentType: "", // ผู้ถูกสอบสวน
-  offenseDetails: "", // ลักษณะความผิด
-  disciplinaryFaultLevel: "", // ระดับโทษความผิด
-  disciplinaryCaseFault: "", // กรณีความผิด
-  disciplinaryDate: null, // วันที่สอบสวนเริ่มต้น[0]-สิ้นสุด[1]
-  dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0]-สิ้นสุด[1]
-});
-
-const formResult = reactive<{
-  respondentType: string;
-  offenseDetails: string;
-  disciplinaryFaultLevel: string;
-  disciplinaryCaseFault: string;
-  disciplinaryDate: [Date, Date] | null;
-  resultDisciplineType: string;
-  resultTitleType: string;
-  resultOc: string;
-  resultYear: number | null;
-}>({
-  respondentType: "", // ผู้ถูกสอบสวน
-  offenseDetails: "", // ลักษณะความผิด
-  disciplinaryFaultLevel: "", // ระดับโทษความผิด
-  disciplinaryCaseFault: "", // กรณีความผิด
-  disciplinaryDate: null, // วันที่สอบสวนเริ่มต้น[0]-สิ้นสุด[1]
-  resultDisciplineType: "", // ประเภทวินัย input
-  resultTitleType: "", // ประเภทของเรื่อง
-  resultOc: "", // หน่วยงาน/ส่วนราชการ
-  resultYear: null, // ปีงบประมาณ
-});
-
-/** fn ค้นหาขั้นสูง */
-function complaintBody() {
-  return {
-    dateReceivedStart: formComplaint.dateReceived?.[0]
-      ? convertDateToAPI(formComplaint.dateReceived[0])
-      : null,
-    dateReceivedEnd: formComplaint.dateReceived?.[1]
-      ? convertDateToAPI(formComplaint.dateReceived[1])
-      : null,
-    respondentType: formComplaint.respondentType,
-    offenseDetails: formComplaint.offenseDetails,
-    levelConsideration: formComplaint.levelConsideration,
-    dateConsiderationStart: formComplaint.dateConsideration?.[0]
-      ? convertDateToAPI(formComplaint.dateConsideration[0])
-      : null,
-    dateConsiderationEnd: formComplaint.dateConsideration?.[1]
-      ? convertDateToAPI(formComplaint.dateConsideration[1])
-      : null,
-  };
-}
-
-function investigateFactsBody() {
-  return {
-    respondentType: formInvestigateFacts.respondentType,
-    offenseDetails: formInvestigateFacts.offenseDetails,
-    investigationDetail: formInvestigateFacts.investigationDetail,
-    investigationDateStart: formInvestigateFacts.investigationDate?.[0]
-      ? convertDateToAPI(formInvestigateFacts.investigationDate[0])
-      : null,
-    investigationDateEnd: formInvestigateFacts.investigationDate?.[1]
-      ? convertDateToAPI(formInvestigateFacts.investigationDate[1])
-      : null,
-    dateReceivedStart: formInvestigateFacts.dateReceived?.[0]
-      ? convertDateToAPI(formInvestigateFacts.dateReceived[0])
-      : null,
-    dateReceivedEnd: formInvestigateFacts.dateReceived?.[1]
-      ? convertDateToAPI(formInvestigateFacts.dateReceived[1])
-      : null,
-    investigationStatusResult: formInvestigateFacts.investigationStatusResult,
-  };
-}
-
-function disciplinaryBody() {
-  return {
-    respondentType: formInvestigateDisciplinary.respondentType,
-    offenseDetails: formInvestigateDisciplinary.offenseDetails,
-    disciplinaryFaultLevel: formInvestigateDisciplinary.disciplinaryFaultLevel,
-    disciplinaryCaseFault:
-      formInvestigateDisciplinary.disciplinaryCaseFault.trim(),
-    disciplinaryDateStart: formInvestigateDisciplinary.disciplinaryDate?.[0]
-      ? convertDateToAPI(formInvestigateDisciplinary.disciplinaryDate[0])
-      : null,
-    disciplinaryDateEnd: formInvestigateDisciplinary.disciplinaryDate?.[1]
-      ? convertDateToAPI(formInvestigateDisciplinary.disciplinaryDate[1])
-      : null,
-    dateReceivedStart: formInvestigateDisciplinary.dateReceived?.[0]
-      ? convertDateToAPI(formInvestigateDisciplinary.dateReceived[0])
-      : null,
-    dateReceivedEnd: formInvestigateDisciplinary.dateReceived?.[1]
-      ? convertDateToAPI(formInvestigateDisciplinary.dateReceived[1])
-      : null,
-  };
-}
-
-function resultBody() {
-  return {
-    respondentType: formResult.respondentType,
-    offenseDetails: formResult.offenseDetails,
-    disciplinaryFaultLevel: formResult.disciplinaryFaultLevel,
-    disciplinaryCaseFault: formResult.disciplinaryCaseFault.trim(),
-    disciplinaryDateStart: formResult.disciplinaryDate?.[0]
-      ? convertDateToAPI(formResult.disciplinaryDate[0])
-      : null,
-    disciplinaryDateEnd: formResult.disciplinaryDate?.[1]
-      ? convertDateToAPI(formResult.disciplinaryDate[1])
-      : null,
-    resultDisciplineType: formResult.resultDisciplineType.trim(),
-    resultTitleType: formResult.resultTitleType.trim(),
-    resultOc: formResult.resultOc.trim(),
-    resultYear: formResult.resultYear,
-  };
-}
-
 function fnSearch() {
-  let body: any;
+  props.getData?.(1);
-
-  switch (route.name) {
-    case "disciplineComplaints":
-      body = complaintBody();
-      break;
-    case "disciplineInvestigatefacts":
-      body = investigateFactsBody();
-      break;
-    case "disciplineDisciplinary":
-      body = disciplinaryBody();
-      break;
-    case "disciplineResult":
-      body = resultBody();
-      break;
-  }
-
-  props.getData?.(body);
   onClose();
 }
+
+function resetForms() {
+  store.formComplaint.dateReceived = null;
+  store.formComplaint.respondentType = "";
+  store.formComplaint.offenseDetails = "";
+  store.formComplaint.levelConsideration = "";
+  store.formComplaint.dateConsideration = null;
+
+  store.formInvestigateFacts.respondentType = "";
+  store.formInvestigateFacts.offenseDetails = "";
+  store.formInvestigateFacts.investigationDetail = "";
+  store.formInvestigateFacts.investigationDate = null;
+  store.formInvestigateFacts.dateReceived = null;
+  store.formInvestigateFacts.investigationStatusResult = "";
+
+  store.formInvestigateDisciplinary.respondentType = "";
+  store.formInvestigateDisciplinary.offenseDetails = "";
+  store.formInvestigateDisciplinary.disciplinaryFaultLevel = "";
+  store.formInvestigateDisciplinary.disciplinaryCaseFault = "";
+  store.formInvestigateDisciplinary.disciplinaryDate = null;
+  store.formInvestigateDisciplinary.dateReceived = null;
+
+  store.formResult.respondentType = "";
+  store.formResult.offenseDetails = "";
+  store.formResult.disciplinaryFaultLevel = "";
+  store.formResult.disciplinaryCaseFault = "";
+  store.formResult.disciplinaryDate = null;
+  store.formResult.resultDisciplineType = "";
+  store.formResult.resultTitleType = "";
+  store.formResult.resultOc = "";
+  store.formResult.resultYear = null;
+}
+
+watchEffect(() => {
+  resetForms();
+});
 </script>
 <template>
   <div>
@@ -262,7 +99,7 @@ function fnSearch() {
           >
             <div class="col-12">
               <datepicker
-                v-model="formComplaint.dateReceived"
+                v-model="store.formComplaint.dateReceived"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -284,8 +121,8 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formComplaint.dateReceived != null
+                      store.formComplaint.dateReceived != null
-                        ? dateThaiRange(formComplaint.dateReceived)
+                        ? dateThaiRange(store.formComplaint.dateReceived)
                         : null
                     "
                     :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
@@ -300,10 +137,12 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formComplaint.dateReceived !== null"
+                        v-if="store.formComplaint.dateReceived !== null"
                         name="clear"
                         class="cursor-pointer"
-                        @click.prevent.stop="formComplaint.dateReceived = null"
+                        @click.prevent.stop="
+                          store.formComplaint.dateReceived = null
+                        "
                       >
                       </q-icon>
                     </template>
@@ -313,7 +152,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formComplaint.respondentType"
+                v-model="store.formComplaint.respondentType"
                 :options="store.complainantoptionsMain"
                 option-label="name"
                 option-value="id"
@@ -328,7 +167,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formComplaint.offenseDetails"
+                v-model="store.formComplaint.offenseDetails"
                 :options="store.offenseDetailstOptions"
                 option-label="name"
                 option-value="id"
@@ -343,7 +182,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formComplaint.levelConsideration"
+                v-model="store.formComplaint.levelConsideration"
                 :options="complainstStore.levelConsiderationtOptions"
                 option-label="name"
                 option-value="id"
@@ -358,7 +197,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <datepicker
-                v-model="formComplaint.dateConsideration"
+                v-model="store.formComplaint.dateConsideration"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -379,8 +218,8 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formComplaint.dateConsideration != null
+                      store.formComplaint.dateConsideration != null
-                        ? dateThaiRange(formComplaint.dateConsideration)
+                        ? dateThaiRange(store.formComplaint.dateConsideration)
                         : null
                     "
                     :label="`${'วันที่เริ่มต้น-สิ้นสุดการพิจารณา'}`"
@@ -395,11 +234,11 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formComplaint.dateConsideration !== null"
+                        v-if="store.formComplaint.dateConsideration !== null"
                         name="clear"
                         class="cursor-pointer"
                         @click.prevent.stop="
-                          formComplaint.dateConsideration = null
+                          store.formComplaint.dateConsideration = null
                         "
                       >
                       </q-icon>
@@ -416,7 +255,7 @@ function fnSearch() {
           >
             <div class="col-12">
               <q-select
-                v-model="formInvestigateFacts.respondentType"
+                v-model="store.formInvestigateFacts.respondentType"
                 :options="store.complainantoptionsMain"
                 option-label="name"
                 option-value="id"
@@ -431,7 +270,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formInvestigateFacts.offenseDetails"
+                v-model="store.formInvestigateFacts.offenseDetails"
                 :options="store.offenseDetailstOptions"
                 option-label="name"
                 option-value="id"
@@ -446,7 +285,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formInvestigateFacts.investigationDetail"
+                v-model="store.formInvestigateFacts.investigationDetail"
                 :options="investigateStore.investigationDetailOp"
                 option-label="name"
                 option-value="id"
@@ -462,7 +301,7 @@ function fnSearch() {
 
             <div class="col-12">
               <datepicker
-                v-model="formInvestigateFacts.investigationDate"
+                v-model="store.formInvestigateFacts.investigationDate"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -483,8 +322,10 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formInvestigateFacts.investigationDate != null
+                      store.formInvestigateFacts.investigationDate != null
-                        ? dateThaiRange(formInvestigateFacts.investigationDate)
+                        ? dateThaiRange(
+                            store.formInvestigateFacts.investigationDate
+                          )
                         : null
                     "
                     :label="`${'วันที่สืบสวนเริ่มต้น-สิ้นสุด'}`"
@@ -499,11 +340,13 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formInvestigateFacts.investigationDate !== null"
+                        v-if="
+                          store.formInvestigateFacts.investigationDate !== null
+                        "
                         name="clear"
                         class="cursor-pointer"
                         @click.prevent.stop="
-                          formInvestigateFacts.investigationDate = null
+                          store.formInvestigateFacts.investigationDate = null
                         "
                       >
                       </q-icon>
@@ -514,7 +357,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <datepicker
-                v-model="formInvestigateFacts.dateReceived"
+                v-model="store.formInvestigateFacts.dateReceived"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -535,8 +378,8 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formInvestigateFacts.dateReceived != null
+                      store.formInvestigateFacts.dateReceived != null
-                        ? dateThaiRange(formInvestigateFacts.dateReceived)
+                        ? dateThaiRange(store.formInvestigateFacts.dateReceived)
                         : null
                     "
                     :label="`${'วันที่รับเรื่องเริ่มต้น-สิ้นสุด'}`"
@@ -551,11 +394,11 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formInvestigateFacts.dateReceived !== null"
+                        v-if="store.formInvestigateFacts.dateReceived !== null"
                         name="clear"
                         class="cursor-pointer"
                         @click.prevent.stop="
-                          formInvestigateFacts.dateReceived = null
+                          store.formInvestigateFacts.dateReceived = null
                         "
                       >
                       </q-icon>
@@ -566,7 +409,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formInvestigateFacts.investigationStatusResult"
+                v-model="store.formInvestigateFacts.investigationStatusResult"
                 :options="store.statusResultOptions"
                 option-label="name"
                 option-value="id"
@@ -587,7 +430,7 @@ function fnSearch() {
           >
             <div class="col-12">
               <q-select
-                v-model="formInvestigateDisciplinary.respondentType"
+                v-model="store.formInvestigateDisciplinary.respondentType"
                 :options="store.complainantoptionsMain"
                 option-label="name"
                 option-value="id"
@@ -602,7 +445,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formInvestigateDisciplinary.offenseDetails"
+                v-model="store.formInvestigateDisciplinary.offenseDetails"
                 :options="store.offenseDetailstOptions"
                 option-label="name"
                 option-value="id"
@@ -617,7 +460,9 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formInvestigateDisciplinary.disciplinaryFaultLevel"
+                v-model="
+                  store.formInvestigateDisciplinary.disciplinaryFaultLevel
+                "
                 :options="InvestigateDisStore.optionsfaultLevel"
                 option-label="name"
                 option-value="id"
@@ -632,7 +477,9 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-input
-                v-model="formInvestigateDisciplinary.disciplinaryCaseFault"
+                v-model="
+                  store.formInvestigateDisciplinary.disciplinaryCaseFault
+                "
                 dense
                 outlined
                 label="กรณีความผิด"
@@ -640,7 +487,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <datepicker
-                v-model="formInvestigateDisciplinary.disciplinaryDate"
+                v-model="store.formInvestigateDisciplinary.disciplinaryDate"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -661,9 +508,9 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formInvestigateDisciplinary.disciplinaryDate != null
+                      store.formInvestigateDisciplinary.disciplinaryDate != null
                         ? dateThaiRange(
-                            formInvestigateDisciplinary.disciplinaryDate
+                            store.formInvestigateDisciplinary.disciplinaryDate
                           )
                         : null
                     "
@@ -680,12 +527,14 @@ function fnSearch() {
                     <template v-slot:append>
                       <q-icon
                         v-if="
-                          formInvestigateDisciplinary.disciplinaryDate !== null
+                          store.formInvestigateDisciplinary.disciplinaryDate !==
+                          null
                         "
                         name="clear"
                         class="cursor-pointer"
                         @click.prevent.stop="
-                          formInvestigateDisciplinary.disciplinaryDate = null
+                          store.formInvestigateDisciplinary.disciplinaryDate =
+                            null
                         "
                       >
                       </q-icon>
@@ -696,7 +545,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <datepicker
-                v-model="formInvestigateDisciplinary.dateReceived"
+                v-model="store.formInvestigateDisciplinary.dateReceived"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -717,9 +566,9 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formInvestigateDisciplinary.dateReceived != null
+                      store.formInvestigateDisciplinary.dateReceived != null
                         ? dateThaiRange(
-                            formInvestigateDisciplinary.dateReceived
+                            store.formInvestigateDisciplinary.dateReceived
                           )
                         : null
                     "
@@ -735,11 +584,14 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formInvestigateDisciplinary.dateReceived !== null"
+                        v-if="
+                          store.formInvestigateDisciplinary.dateReceived !==
+                          null
+                        "
                         name="clear"
                         class="cursor-pointer"
                         @click.prevent.stop="
-                          formInvestigateDisciplinary.dateReceived = null
+                          store.formInvestigateDisciplinary.dateReceived = null
                         "
                       >
                       </q-icon>
@@ -755,7 +607,7 @@ function fnSearch() {
           >
             <div class="col-12">
               <q-select
-                v-model="formResult.respondentType"
+                v-model="store.formResult.respondentType"
                 :options="store.complainantoptionsMain"
                 option-label="name"
                 option-value="id"
@@ -770,7 +622,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formResult.offenseDetails"
+                v-model="store.formResult.offenseDetails"
                 :options="store.offenseDetailstOptions"
                 option-label="name"
                 option-value="id"
@@ -785,7 +637,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-select
-                v-model="formResult.disciplinaryFaultLevel"
+                v-model="store.formResult.disciplinaryFaultLevel"
                 :options="InvestigateDisStore.optionsfaultLevel"
                 option-label="name"
                 option-value="id"
@@ -800,7 +652,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-input
-                v-model="formResult.disciplinaryCaseFault"
+                v-model="store.formResult.disciplinaryCaseFault"
                 dense
                 outlined
                 label="กรณีความผิด"
@@ -808,7 +660,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <datepicker
-                v-model="formResult.disciplinaryDate"
+                v-model="store.formResult.disciplinaryDate"
                 :locale="'th'"
                 autoApply
                 borderless
@@ -829,8 +681,8 @@ function fnSearch() {
                     dense
                     class="full-width datepicker"
                     :model-value="
-                      formResult.disciplinaryDate != null
+                      store.formResult.disciplinaryDate != null
-                        ? dateThaiRange(formResult.disciplinaryDate)
+                        ? dateThaiRange(store.formResult.disciplinaryDate)
                         : null
                     "
                     :label="`${'วันที่สอบสวนเริ่มต้น-สิ้นสุด'}`"
@@ -845,10 +697,12 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formResult.disciplinaryDate !== null"
+                        v-if="store.formResult.disciplinaryDate !== null"
                         name="clear"
                         class="cursor-pointer"
-                        @click.prevent.stop="formResult.disciplinaryDate = null"
+                        @click.prevent.stop="
+                          store.formResult.disciplinaryDate = null
+                        "
                       >
                       </q-icon>
                     </template>
@@ -858,7 +712,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-input
-                v-model="formResult.resultDisciplineType"
+                v-model="store.formResult.resultDisciplineType"
                 dense
                 outlined
                 label="ประเภทวินัย"
@@ -866,7 +720,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-input
-                v-model="formResult.resultTitleType"
+                v-model="store.formResult.resultTitleType"
                 dense
                 outlined
                 label="ประเภทของเรื่อง"
@@ -874,7 +728,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <q-input
-                v-model="formResult.resultOc"
+                v-model="store.formResult.resultOc"
                 dense
                 outlined
                 label="หน่วยงาน/ส่วนราชการ"
@@ -882,7 +736,7 @@ function fnSearch() {
             </div>
             <div class="col-12">
               <datepicker
-                v-model="formResult.resultYear"
+                v-model="store.formResult.resultYear"
                 class="col-2"
                 :locale="'th'"
                 autoApply
@@ -898,9 +752,9 @@ function fnSearch() {
                     dense
                     outlined
                     :model-value="
-                      formResult.resultYear === null
+                      store.formResult.resultYear === null
                         ? null
-                        : Number(formResult.resultYear) + 543
+                        : Number(store.formResult.resultYear) + 543
                     "
                     :label="`${'ปีงบประมาณ'}`"
                   >
@@ -914,10 +768,10 @@ function fnSearch() {
                     </template>
                     <template v-slot:append>
                       <q-icon
-                        v-if="formResult.resultYear !== null"
+                        v-if="store.formResult.resultYear !== null"
                         name="clear"
                         class="cursor-pointer"
-                        @click.prevent.stop="formResult.resultYear = null"
+                        @click.prevent.stop="store.formResult.resultYear = null"
                       >
                       </q-icon>
                     </template>

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

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 import { defineStore } from "pinia";
 import type { QTableProps } from "quasar";
 
@@ -7,6 +7,74 @@ import type { FaultTypeOption } from "@/modules/11_discipline/interface/request/
 import type { ArrayPersonAdd } from "@/modules/11_discipline/interface/response/investigate";
 
 export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
+  const formComplaint = reactive<{
+    dateReceived: [Date, Date] | null;
+    respondentType: string;
+    offenseDetails: string;
+    levelConsideration: string;
+    dateConsideration: [Date, Date] | null;
+  }>({
+    dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0] - สิ้นสุด[1]
+    respondentType: "", // ผู้ถูกร้องเรียน
+    offenseDetails: "", // ลักษณะความผิด
+    levelConsideration: "", // ระดับการพิจารณา
+    dateConsideration: null, // วันที่เริ่มต้น[0] - สิ้นสุดการพิจารณา[1]
+  });
+
+  const formInvestigateFacts = reactive<{
+    respondentType: string;
+    offenseDetails: string;
+    investigationDetail: string;
+    investigationDate: [Date, Date] | null;
+    dateReceived: [Date, Date] | null;
+    investigationStatusResult: string;
+  }>({
+    respondentType: "", // ผู้ถูกสืบสวน
+    offenseDetails: "", // ลักษณะความผิด
+    investigationDetail: "", // ลักษณะการสืบสวน
+    investigationDate: null, // วันที่สืบสวนเริ่มต้น[0] - สิ้นสุด[1]
+    dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0] - สิ้นสุด[1]
+    investigationStatusResult: "", // ผลการสืบสวน
+  });
+
+  const formInvestigateDisciplinary = reactive<{
+    respondentType: string;
+    offenseDetails: string;
+    disciplinaryFaultLevel: string;
+    disciplinaryCaseFault: string;
+    disciplinaryDate: [Date, Date] | null;
+    dateReceived: [Date, Date] | null;
+  }>({
+    respondentType: "", // ผู้ถูกสอบสวน
+    offenseDetails: "", // ลักษณะความผิด
+    disciplinaryFaultLevel: "", // ระดับโทษความผิด
+    disciplinaryCaseFault: "", // กรณีความผิด
+    disciplinaryDate: null, // วันที่สอบสวนเริ่มต้น[0]-สิ้นสุด[1]
+    dateReceived: null, // วันที่รับเรื่องเริ่มต้น[0]-สิ้นสุด[1]
+  });
+
+  const formResult = reactive<{
+    respondentType: string;
+    offenseDetails: string;
+    disciplinaryFaultLevel: string;
+    disciplinaryCaseFault: string;
+    disciplinaryDate: [Date, Date] | null;
+    resultDisciplineType: string;
+    resultTitleType: string;
+    resultOc: string;
+    resultYear: number | null;
+  }>({
+    respondentType: "", // ผู้ถูกสอบสวน
+    offenseDetails: "", // ลักษณะความผิด
+    disciplinaryFaultLevel: "", // ระดับโทษความผิด
+    disciplinaryCaseFault: "", // กรณีความผิด
+    disciplinaryDate: null, // วันที่สอบสวนเริ่มต้น[0]-สิ้นสุด[1]
+    resultDisciplineType: "", // ประเภทวินัย input
+    resultTitleType: "", // ประเภทของเรื่อง
+    resultOc: "", // หน่วยงาน/ส่วนราชการ
+    resultYear: null, // ปีงบประมาณ
+  });
+
   /** option ผู้ถูกสอบสวน*/
   const complainantoptionsMain = ref<DataOption[]>([
     { id: "PERSON", name: "บุคคล" },
@@ -874,5 +942,9 @@ export const useDisciplineMainStore = defineStore("disciplineMainStore", () => {
     pathDirector,
     convertType,
     checkValueFaultT,
+    formComplaint,
+    formInvestigateFacts,
+    formInvestigateDisciplinary,
+    formResult,
   };
 });