แก้ไขฟอร์มการสืบสวนข้อเท็จจริง

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

@@ -10,6 +10,7 @@ const onSubmit = async () => {
   router.push(`/discipline/investigatefacts`);
 };
 </script>
+
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle text-dark col-12 row items-center">

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

@@ -17,23 +17,24 @@ const data = reactive<FormData>({
   complaintdetail: "",
   detail: "",
   fault: "",
-  results: "",
   other: "",
   evidenceFiles: null,
   fileComplaint: null,
   clickTime: false,
   date: null,
-  dateEnd: null,
+  dateEnd: new Date(),
   investigation: "",
-  daysExtend: "",
+  daysExtend: null,
+  statusResult: "",
+  causeText: "",
 });
+
 const fetchData = async () => {
   // ดึงค่าจาก api
   data.complaint = "เรื่องที่ 1";
   data.complaintdetail = "รายละเอียด";
   data.detail = "รายละเอียด";
   data.fault = "001";
-  data.results = "test";
   data.other = "";
   data.evidenceFiles = null;
   data.fileComplaint = null;
@@ -41,7 +42,9 @@ const fetchData = async () => {
   data.date = new Date("2023-11-07T14:58:00");
   data.dateEnd = new Date("2023-11-08T14:58:00");
   data.investigation = "002";
-  data.daysExtend = "";
+  data.daysExtend = null;
+  data.statusResult = "ไม่ระบุ";
+  data.causeText = "";
 };
 
 // แก้ไขข้อมูล
@@ -51,6 +54,7 @@ const onSubmit = async (id: string) => {
   router.push(`/discipline/investigatefacts`);
 };
 </script>
+
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">

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

@@ -8,11 +8,15 @@ import type {
   FormData,
   MyObjectInvestigateRef,
 } from "@/modules/11_discipline/interface/request/investigate";
-const investigateFactStore = useInvestigateFactStore();
+import { diffDates } from "@fullcalendar/core/internal";
-const { filterFnOptionsType } = investigateFactStore;
 
-const mixin = useCounterMixin();
+const $q = useQuasar();
-const { date2Thai, dialogConfirm } = mixin;
+
+const investigateFactStore = useInvestigateFactStore(); // เรียกใช้ store
+const { filterFnOptionsType } = investigateFactStore; // เรียกใช้ filterFnOptionsType จาก store
+
+const mixin = useCounterMixin(); // เรียกใช้ mixin
+const { date2Thai, dialogConfirm } = mixin; // เรียกใช้ date2Thai, dialogConfirm จาก mixin
 
 const props = defineProps({
   data: {
@@ -25,13 +29,13 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
+const complaintsOptions = ref<any>([]);
+const isUpdate = ref<boolean>(false);
 
 const complaintRef = ref<Object | null>(null);
 const complaintdetailRef = ref<Object | null>(null);
 const detailRef = ref<Object | null>(null);
 const faultRef = ref<Object | null>(null);
-const resultsRef = ref<Object | null>(null);
 const otherRef = ref<Object | null>(null);
 const evidenceFilesRef = ref<Object | null>(null);
 const fileComplaintRef = ref<Object | null>(null);
@@ -40,27 +44,31 @@ const dateRef = ref<Object | null>(null);
 const dateEndRef = ref<Object | null>(null);
 const investigationRef = ref<Object | null>(null);
 const daysExtendRef = ref<Object | null>(null);
+const statusResultRef = ref<Object | null>(null);
+const causeTextRef = ref<Object | null>(null);
+
 const formData = reactive<FormData>({
   complaint: "",
   complaintdetail: "",
   detail: "",
   fault: "",
-  results: "",
   other: "",
   evidenceFiles: null,
   fileComplaint: null,
   clickTime: false,
   date: null,
-  dateEnd: null,
+  dateEnd: new Date(),
   investigation: "",
-  daysExtend: "",
+  daysExtend: null,
+  statusResult: "ยังไม่ระบุ",
+  causeText: "",
 });
+
 const objectInvestigate: MyObjectInvestigateRef = {
   complaint: complaintRef,
   complaintdetail: complaintdetailRef,
   detail: detailRef,
   fault: faultRef,
-  results: resultsRef,
   other: otherRef,
   evidenceFiles: evidenceFilesRef,
   fileComplaint: fileComplaintRef,
@@ -68,8 +76,11 @@ const objectInvestigate: MyObjectInvestigateRef = {
   dateEnd: dateEndRef,
   investigation: investigationRef,
   daysExtend: daysExtendRef,
+  statusResult: statusResultRef,
+  causeText: causeTextRef,
 };
 
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
   const hasError = [];
   for (const key in objectInvestigate) {
@@ -81,6 +92,7 @@ function validateForm() {
       }
     }
   }
+
   if (hasError.every((result) => result === true)) {
     onSubmit();
   } else {
@@ -88,69 +100,389 @@ function validateForm() {
     console.log(hasError);
   }
 }
+
+/**
+ * ฟังก์ชั่นสำหรับบันทึกข้อมูล ระบบจะแสดง dialog ให้ยืนยันการบันทึก
+ * หากยืนยันจะส่งข้อมูลไปบันทึกที่ api
+ * หากยกเลิกจะกลับไปหน้าฟอร์ม
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      console.log(formData);
+      props.onSubmit(formData);
-      props.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)));
+}
+
 watch(props.data, async () => {
-  formData.complaint = props.data.complaint;
+  if (props.data !== null) {
-  formData.complaintdetail = props.data.complaintdetail;
+    isUpdate.value = true;
-  formData.detail = props.data.detail;
+    formData.complaint = props.data.complaint;
-  formData.fault = props.data.fault;
+    formData.complaintdetail = props.data.complaintdetail;
-  formData.results = props.data.results;
+    formData.detail = props.data.detail;
-  formData.other = props.data.other;
+    formData.fault = props.data.fault;
-  formData.evidenceFiles = props.data.evidenceFiles;
+    formData.other = props.data.other;
-  formData.fileComplaint = props.data.fileComplaint;
+    formData.evidenceFiles = props.data.evidenceFiles;
-  formData.clickTime = props.data.clickTime;
+    formData.fileComplaint = props.data.fileComplaint;
-  formData.date = props.data.date;
+    formData.clickTime = props.data.clickTime;
-  formData.dateEnd = props.data.dateEnd;
+    formData.date = props.data.date;
-  formData.investigation = props.data.investigation;
+    formData.dateEnd = props.data.dateEnd;
-  formData.daysExtend = props.data.daysExtend;
+    formData.investigation = props.data.investigation;
+    formData.daysExtend = props.data.daysExtend;
+    formData.statusResult = props.data.results;
+    formData.causeText = props.data.results;
+  }
 });
 </script>
 <template>
   <q-card flat bordered class="col-12 q-mt-sm">
-      <form @submit.prevent="validateForm">
+    <form @submit.prevent="validateForm">
-        <div class="q-pa-md">
+      <div class="q-pa-md">
-          <div class="col-xs-12 row items-center q-col-gutter-md">
+        <div class="col-xs-12 row items-center q-col-gutter-md">
-            <div class="col-12">
+          <div class="col-6">
-              <q-input
+            <q-select
-                for="#complaint"
+              for="#fault"
-                class="full-width inputgreen cursor-pointer"
+              outlined
-                ref="complaintRef"
+              dense
-                outlined
+              ref="complaintRef"
-                dense
+              v-model="formData.complaint"
-                lazy-rules
+              :rules="[(val) => !!val || `${'กรุณาเลือกเรื่องร้องเรียน'}`]"
-                borderless
+              :options="complaintsOptions"
-                v-model="formData.complaint"
+              label="เรื่องร้องเรียน"
-                :rules="[(val) => !!val || `${'กรุณากรอกเรื่องร้องเรียน'}`]"
+              emit-value
-                hide-bottom-space
+              map-options
-                :label="`${'เรื่องร้องเรียน'}`"
+              option-label="name"
-                type="textarea"
+              option-value="id"
-              />
+              use-input
-            </div>
+              @filter="(inputValue: any,
-            <div class="col-6">
+                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
+                )"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div class="col-3">
+            <q-select
+              for="#fault"
+              outlined
+              dense
+              ref="faultRef"
+              v-model="formData.fault"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+              :options="investigateFactStore.faultOp"
+              label="ลักษณะความผิด"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              use-input
+              @filter="(inputValue: any,
+                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
+                )"
+              ><template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div class="col-3">
+            <q-select
+              for="#investigation"
+              outlined
+              dense
+              ref="investigationRef"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`]"
+              v-model="formData.investigation"
+              :options="investigateFactStore.investigationOp"
+              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>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div v-if="formData.investigation === '003'" class="col-12">
+            <q-input
+              for="#other"
+              class="full-width cursor-pointer"
+              outlined
+              ref="otherRef"
+              dense
+              borderless
+              v-model="formData.other"
+              hide-bottom-space
+              :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
+              type="textarea"
+              :rules="[
+                (val) =>
+                  formData.investigation === '003'
+                    ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                    : true,
+              ]"
+            />
+          </div>
+          <div class="row col-12">
+            <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-sm q-px-md"
+              >
+                วันที่สืบสวน
+                <q-checkbox
+                  v-if="data != null"
+                  for="#clickTime"
+                  size="md"
+                  v-model="formData.clickTime"
+                  label="ขยายเวลา"
+                  color="primary"
+                  dense
+                  class="text-weight-medium q-ml-sm"
+                  keep-color
+                />
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-xs-12 col-sm-12 q-pa-sm row">
+                <div class="q-col-gutter-sm row">
+                  <datepicker
+                    v-if="!formData.clickTime"
+                    menu-class-name="modalfix"
+                    :readonly="isUpdate"
+                    v-model="formData.date"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        for="#date"
+                        class="full-width cursor-pointer"
+                        ref="dateRef"
+                        :readonly="isUpdate"
+                        outlined
+                        dense
+                        lazy-rules
+                        borderless
+                        hide-bottom-space
+                        :model-value="
+                          formData.date ? date2Thai(formData.date) : null
+                        "
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
+                        ]"
+                        :label="`${'วันที่เริ่มการสอบสวน'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            color="primary"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+
+                  <q-select
+                    v-if="formData.clickTime"
+                    for="#daysExtend"
+                    outlined
+                    dense
+                    lazy-rules
+                    ref="daysExtendRef"
+                    v-model="formData.daysExtend"
+                    :options="investigateFactStore.daysExtendOp"
+                    label="จำนวนวันที่ต้องการขยาย"
+                    emit-value
+                    hide-bottom-space
+                    map-options
+                    :rules="[
+                      (val) =>
+                        formData.clickTime
+                          ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                          : true,
+                    ]"
+                    option-label="name"
+                    option-value="id"
+                    use-input
+                    @update:model-value="calEndDate"
+                    ><template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.dateEnd"
+                    :readonly="isUpdate"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        for="#dateEnd"
+                        ref="dateEndRef"
+                        class="full-width cursor-pointer"
+                        :readonly="isUpdate"
+                        outlined
+                        dense
+                        lazy-rules
+                        hide-bottom-space
+                        borderless
+                        :model-value="
+                          formData.dateEnd ? date2Thai(formData.dateEnd) : null
+                        "
+                        :rules="[
+                          (val) =>
+                            !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
+                        ]"
+                        :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            color="primary"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <q-input
+              for="#complaintdetail"
+              class="full-width cursor-pointer"
+              outlined
+              ref="complaintdetailRef"
+              dense
+              lazy-rules
+              borderless
+              v-model="formData.complaintdetail"
+              :rules="[
+                (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
+              ]"
+              hide-bottom-space
+              :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-file
+              for="#fileComplaint"
+              outlined
+              ref="fileComplaintRef"
+              dense
+              v-model="formData.fileComplaint"
+              label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+          <div class="col-12">
+            <q-input
+              for="#detail"
+              class="full-width cursor-pointer"
+              outlined
+              ref="detailRef"
+              dense
+              lazy-rules
+              borderless
+              v-model="formData.detail"
+              :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+              hide-bottom-space
+              :label="`${'รายละเอียด'}`"
+              type="textarea"
+            />
+          </div>
+          <div class="col-12">
+            <q-file
+              for="#evidenceFiles"
+              outlined
+              dense
+              ref="evidenceFilesRef"
+              v-model="formData.evidenceFiles"
+              label="ไฟล์หลักฐานการรับ"
+              lazy-rules
+              :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+            </q-file>
+          </div>
+          <div class="row col-12 q-col-gutter-md">
+            <div class="col-3">
               <q-select
                 for="#fault"
                 outlined
                 dense
-                ref="faultRef"
+                ref="statusResultRef"
-                v-model="formData.fault"
+                v-model="formData.statusResult"
-                :rules="[(val) => !!val || `${'กรุณาเลือกลักษณะความผิด'}`]"
+                :rules="[(val) => !!val || `${'กรุณาเลือกผลการสืบสวน'}`]"
-                :options="investigateFactStore.faultOp"
+                :options="investigateFactStore.statusResultOptions"
-                label="ลักษณะความผิด"
+                label="ผลการสืบสวน"
                 emit-value
                 map-options
                 option-label="name"
                 option-value="id"
-                hide-bottom-space
                 use-input
                 @filter="(inputValue: any,
                 doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'faultOp'
@@ -164,27 +496,22 @@ watch(props.data, async () => {
                 </template>
               </q-select>
             </div>
-            <div class="col-6">
+
+            <div v-if="formData.statusResult == 'have_cause'" class="col-3">
               <q-select
-                for="#investigation"
+                for="#fault"
                 outlined
                 dense
-                ref="investigationRef"
+                ref="causeTextRef"
-                :rules="[
+                v-model="formData.causeText"
-                  (val) => !!val || `${'กรุณาเลือกลักษณะการสืบสวน'}`,
+                :rules="[(val) => !!val || `${'กรุณาเลือกร้ายแรง/ไม่ร้ายแรง'}`]"
-                ]"
+                :options="investigateFactStore.causeTextOptions"
-                v-model="formData.investigation"
+                label="ร้ายแรง/ไม่ร้ายแรง"
-                :options="investigateFactStore.investigationOp"
-                label="ลักษณะการสืบสวน"
                 emit-value
                 map-options
                 option-label="name"
                 option-value="id"
-                hide-bottom-space
                 use-input
-                @filter="(inputValue: any,
-        doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'investigationOp'
-        )"
                 ><template v-slot:no-option>
                   <q-item>
                     <q-item-section class="text-grey">
@@ -194,275 +521,20 @@ watch(props.data, async () => {
                 </template>
               </q-select>
             </div>
-            <div
-              v-if="formData.investigation === '003'"
-              class="col-12"
-            >
-              <q-input
-                for="#other"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                ref="otherRef"
-                dense
-                borderless
-                v-model="formData.other"
-                hide-bottom-space
-                :label="`${'รายการอื่นๆ(โปรดระบุ)'}`"
-                type="textarea"
-                :rules="[
-                  (val) =>
-                    formData.investigation === '003'
-                      ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                      : true,
-                ]"
-              />
-            </div>
-            <div class="row col-12">
-                <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-sm q-px-md">
-                    วันที่สืบสวน
-                    <q-checkbox
-                      for="#clickTime"
-                      size="md"
-                      v-model="formData.clickTime"
-                      label="ขยายเวลา"
-                      color="primary"
-                      dense
-                      class="text-weight-medium q-ml-sm"
-                      keep-color
-                    />
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="col-xs-12 col-sm-12 q-pa-sm row">
-                    <div v-if="formData.clickTime !== true" class="q-col-gutter-sm row">
-                        <datepicker
-                          menu-class-name="modalfix"
-                          v-model="formData.date"
-                          :locale="'th'"
-                          autoApply
-                          :enableTimePicker="false"
-                          week-start="0"
-                        >
-                          <template #year="{ year }">{{ year + 543 }}</template>
-                          <template #year-overlay-value="{ value }">{{
-                            parseInt(value + 543)
-                          }}</template>
-                          <template #trigger>
-                            <q-input
-                              for="#date"
-                              class="full-width inputgreen cursor-pointer"
-                              ref="dateRef"
-                              outlined
-                              dense
-                              lazy-rules
-                              borderless
-                              hide-bottom-space
-                              :model-value="
-                                formData.date ? date2Thai(formData.date) : null
-                              "
-                              :rules="[
-                                (val) =>
-                                  !!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
-                              ]"
-                              :label="`${'วันที่เริ่มการสอบสวน'}`"
-                            >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  color="primary"
-                                >
-                                </q-icon>
-                              </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
-                        <datepicker
-                          menu-class-name="modalfix"
-                          v-model="formData.dateEnd"
-                          :locale="'th'"
-                          autoApply
-                          :enableTimePicker="false"
-                          week-start="0"
-                        >
-                          <template #year="{ year }">{{ year + 543 }}</template>
-                          <template #year-overlay-value="{ value }">{{
-                            parseInt(value + 543)
-                          }}</template>
-                          <template #trigger>
-                            <q-input
-                              for="#dateEnd"
-                              ref="dateEndRef"
-                              class="full-width inputgreen cursor-pointer"
-                              outlined
-                              dense
-                              lazy-rules
-                              hide-bottom-space
-                              borderless
-                              :model-value="
-                                formData.dateEnd
-                                  ? date2Thai(formData.dateEnd)
-                                  : null
-                              "
-                              :rules="[
-                                (val) =>
-                                  !!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
-                              ]"
-                              :label="`${'วันที่สิ้นสุดการสอบสวน'}`"
-                            >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  color="primary"
-                                >
-                                </q-icon>
-                              </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
-                    </div>
-                    <div v-else class="q-mx-xs col-xs-12 col-sm-6">
-                      <q-select
-                        for="#daysExtend"
-                        outlined
-                        dense
-                        lazy-rules
-                        ref="daysExtendRef"
-                        v-model="formData.daysExtend"
-                        :options="investigateFactStore.daysExtendOp"
-                        label="จำนวนวันที่ต้องการขยาย"
-                        emit-value
-                        hide-bottom-space
-                        map-options
-                        :rules="[
-                          (val) =>
-                            formData.clickTime === true
-                              ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                              : true,
-                        ]"
-                        option-label="name"
-                        option-value="id"
-                        use-input
-                        @filter="(inputValue: any,
-                doneFn: Function) => filterFnOptionsType(inputValue, doneFn, 'daysExtendOp'
-                )"
-                        ><template v-slot:no-option>
-                          <q-item>
-                            <q-item-section class="text-grey">
-                              ไม่มีข้อมูล
-                            </q-item-section>
-                          </q-item>
-                        </template>
-                      </q-select>
-                    </div>
-                  </div>
-                </q-card>
-            </div>
-            <div class="col-12 ">
-              <q-input
-                for="#complaintdetail"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                ref="complaintdetailRef"
-                dense
-                lazy-rules
-                borderless
-                v-model="formData.complaintdetail"
-                :rules="[
-                  (val) => !!val || `${'กรุณากรอกรายละเอียดเรื่องร้องเรียน'}`,
-                ]"
-                hide-bottom-space
-                :label="`${'รายละเอียดเรื่องร้องเรียน'}`"
-                type="textarea"
-              />
-            </div>
-            <div class="col-12">
-              <q-file
-                for="#fileComplaint"
-                outlined
-                ref="fileComplaintRef"
-                dense
-                v-model="formData.fileComplaint"
-                label="ไฟล์เอกสารหลักฐานเรื่องร้องเรียน"
-                lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-                hide-bottom-space
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-            <div class="col-12">
-              <q-input
-                for="#detail"
-                class="full-width inputgreen cursor-pointer"
-                outlined
-                ref="detailRef"
-                dense
-                lazy-rules
-                borderless
-                v-model="formData.detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                hide-bottom-space
-                :label="`${'รายละเอียด'}`"
-                type="textarea"
-              />
-            </div>
-            <div class="col-12">
-              <q-file
-                for="#evidenceFiles"
-                outlined
-                dense
-                ref="evidenceFilesRef"
-                v-model="formData.evidenceFiles"
-                label="ไฟล์หลักฐานการรับ"
-                lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
-                hide-bottom-space
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" color="primary" />
-                </template>
-              </q-file>
-            </div>
-            <div class="row col-12 items-start">
-              <div class="col-4">
-                <q-input
-                  for="#results"
-                  standout
-                  dense
-                  ref="resultsRef"
-                  :rules="[(val) => !!val || `${'กรุณากรอกผลการสืบสวน'}`]"
-                  v-model="formData.results"
-                  outlined
-                  debounce="300"
-                  placeholder="ผลการสืบสวน"
-                  hide-bottom-space
-                >
-                </q-input>
-              </div>
-              <div class="col-4">
-                <q-btn
-                  id="#confirm"
-                  label="ยืนยันผลการสืบสวน"
-                  color="primary"
-                  class="q-py-sm q-ml-sm"
-                >
-                  <q-tooltip>ยืนยันผลการสืบสวน</q-tooltip>
-                </q-btn>
-              </div>
-            </div>
           </div>
         </div>
-        <q-separator />
+      </div>
-        <div class="row col-12 q-pa-sm">
+      <q-separator />
-          <q-space />
+      <div class="row col-12 q-pa-sm">
-          <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
+        <q-space />
-            ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+        <q-btn
-          >
+          id="onSubmit"
-        </div>
+          type="submit"
-      </form>
+          label="ยืนยันผลการสืบสวน"
+          color="secondary"
+          ><q-tooltip>ยืนยันผลการสืบสวน</q-tooltip></q-btn
+        >
+      </div>
+    </form>
   </q-card>
 </template>

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

@@ -2,6 +2,12 @@ interface DataOption {
   id: string;
   name: string;
 }
+
+interface DataNumberOption {
+  id: number;
+  name: string;
+}
+
 interface investigatefactsDataRowType {
   id:string,
   subject: string;
@@ -37,4 +43,5 @@ export type {
   investigatefactsDataRowType,
   investigateDisDataRowType,
   directorType,
+  DataNumberOption
 };

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

@@ -1,34 +1,32 @@
-
 interface FormData {
-    complaint: string
+  complaint: string;
-    complaintdetail: string
+  complaintdetail: string;
-    detail: string
+  detail: string;
-    fault: string
+  fault: string;
-    results: string
+  other: string;
-    other: string
+  evidenceFiles: File | null;
-    evidenceFiles: File | null
+  fileComplaint: File | null;
-    fileComplaint: File | null
+  clickTime: boolean;
-    clickTime: boolean
+  date: Date | null;
-    date: Date | null
+  dateEnd: Date;
-    dateEnd: Date | null
+  daysExtend: number | null;
-    daysExtend: string
+  investigation: string;
-    investigation: string
+  statusResult: string;
+  causeText: string;
 }
 interface MyObjectInvestigateRef {
-    complaint: object | null;
+  complaint: object | null;
-    complaintdetail: object | null;
+  complaintdetail: object | null;
-    detail: object | null;
+  detail: object | null;
-    fault: object | null;
+  fault: object | null;
-    results: object | null;
+  evidenceFiles: object | null;
-    evidenceFiles: object | null;
+  fileComplaint: object | null;
-    fileComplaint: object | null;
+  date: object | null;
-    date: object | null;
+  dateEnd: object | null;
-    dateEnd: object | null;
+  investigation: object | null;
-    investigation: object | null;
+  daysExtend: object | null;
-    daysExtend: object | null;
+  statusResult: object | null;
-    [key: string]: any;
+  causeText: object | null;
+  [key: string]: any;
 }
-export type {
+export type { FormData, MyObjectInvestigateRef };
-    FormData,
-    MyObjectInvestigateRef
-}

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

@@ -1,16 +1,17 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type { investigatefactsDataRowType, DataOption } from '@/modules/11_discipline/interface/index/Main'
+import type { investigatefactsDataRowType, DataOption, DataNumberOption } from '@/modules/11_discipline/interface/index/Main'
 
+/*** store ของข้อมูลสืบสวนข้อเท็จจริง */
 export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact", () => {
     const rows = ref<investigatefactsDataRowType[]>([])
 
-    const daysExtendOps = ref<DataOption[]>([
+    const daysExtendOps = ref<DataNumberOption[]>([
-        { id: "000", name: "15 วัน" },
+        { id: 15, name: "15 วัน" },
-        { id: "001", name: "30 วัน" },
+        { id: 30, name: "30 วัน" },
-        { id: "002", name: "45 วัน" },
+        { id: 45, name: "45 วัน" },
-        { id: "003", name: "60 วัน" },
+        { id: 60, name: "60 วัน" },
     ]);
     const investigationOps = ref<DataOption[]>([
         { id: "001", name: "เเต่งตั้งการสืบสวน" },
@@ -22,7 +23,17 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         { id: "002", name: "ไม่ร้ายเเรง" },
         { id: "003", name: "ร้ายเเรง" },
     ]);
-    const daysExtendOp = ref<DataOption[]>(daysExtendOps.value);
+    const statusResultOptions = ref<DataOption[]>([
+        { id: "not_specified", name: "ยังไม่ระบุ" },
+        { id: "have_cause", name: "มีมูล" },
+        { id: "no_cause", name: "ไม่มีมูล" },
+    ]);
+    const causeTextOptions = ref<DataOption[]>([
+        { id: "ร้ายแรง", name: "ร้ายแรง" },
+        { id: "ไม่ร้ายแรง", name: "ไม่ร้ายแรง" },
+    ]);
+
+    const daysExtendOp = ref<DataNumberOption[]>(daysExtendOps.value);
     const investigationOp = ref<DataOption[]>(investigationOps.value);
     const faultOp = ref<DataOption[]>(faultOps.value);
     const visibleColumns = ref<string[]>([
@@ -85,22 +96,20 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
             style: "font-size: 14px",
         },
     ]);
-    function filterFnOptionsType(val: string, update: any, type: string) {
+    function filterFnOptionsType(val: string | number, update: any, type: string) {
         update(() => {
-            const needle = val.toLowerCase();
-
             if (type === "faultOp") {
                 faultOp.value = faultOps.value.filter(
-                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+                    (v: any) => v.name.toLowerCase().indexOf(val) > -1
                 );
 
             } else if (type === "investigationOp") {
                 investigationOp.value = investigationOps.value.filter(
-                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+                    (v: any) => v.name.toLowerCase().indexOf(val) > -1
                 );
             } else if (type === "daysExtendOp") {
                 daysExtendOp.value = daysExtendOps.value.filter(
-                    (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+                    (v: any) => v.id.indexOf(val) > -1
                 );
             }
 
@@ -154,6 +163,8 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
         daysExtendOp,
         investigationOp,
         visibleColumns,
-        columns
+        columns,
+        statusResultOptions,
+        causeTextOptions
     };
 })