UI - วินัย รายงาน ปรับ any

src/modules/11_discipline/components/5_Report/DetailPage.vue

@@ -4,52 +4,31 @@ import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 import { useReportDataStore } from "@/modules/11_discipline/stroes/ReportStore";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-const date = ref<Date | null>(null);
+const date = ref<Date>();
-const dateEnd = ref<Date | null>(null);
+const dateEnd = ref<Date>();
 const route = useRoute();
 const typeReport = route.params.type.toString();
 const store = useReportDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, date2Thai } = mixin;
-const { optionReport } = store;
+const { filterFnOptionsType } = store;
 const $q = useQuasar();
 const ocSelect = ref<string>("");
-const ocSelectOp = ref<any>();
-const ocSelectOps = ref<any>([
-  { id: "001", value: "กทม" },
-  { id: "002", value: "กรุงเทพ" },
-]);
 const government = ref<string>("");
-const governmentOp = ref<any>();
+const fault = ref<string>();
-const governmentOps = ref<any>([
-  { id: "001", value: "กทม" },
-  { id: "002", value: "กรุงเทพ" },
-  { id: "003", value: "bankok" },
-]);
-const fault = ref<any>();
-const faultOp = ref<any>();
-const faultOps = ref<any>([
-  { id: "001", value: "ยังไม่ระบุ" },
-  { id: "002", value: "ไม่ร้ายเเรง" },
-  { id: "003", value: "ร้ายเเรง" },
-]);
 const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const titleReport = ref<string>("");
-interface OptionReport {
-  id: string;
-  title: string;
-}
 
 onMounted(async () => {
-  let report = optionReport.find((e: OptionReport) => e.id == typeReport);
+  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
-  report && (titleReport.value = report.title);
+  report && (titleReport.value = report.name);
 });
 
 const splitterModel = ref(14);
@@ -75,25 +54,6 @@ const backPage = () => {
     page.value--;
   }
 };
-
-function filterFnOptionsType(val: string, update: any, type: string) {
-  update(() => {
-    const needle = val.toLowerCase();
-    if (type === "ocSelectOp") {
-      ocSelectOp.value = ocSelectOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    } else if (type === "governmentOp") {
-      governmentOp.value = governmentOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    } else if (type === "faultOp") {
-      faultOp.value = faultOps.value.filter(
-        (v: any) => v.value.toLowerCase().indexOf(needle) > -1
-      );
-    }
-  });
-}
 </script>
 <template>
   <div class="toptitle">
@@ -133,7 +93,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                   dense
                   lazy-rules
                   borderless
-                  :model-value="date !== null ? date2Thai(date) : null"
+                  :model-value="date ? date2Thai(date) : null"
                   :label="`${'ตั้งเเต่วันที่'}`"
                 >
                   <template v-slot:prepend>
@@ -164,7 +124,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
                   dense
                   lazy-rules
                   borderless
-                  :model-value="dateEnd !== null ? date2Thai(dateEnd) : null"
+                  :model-value="dateEnd ? date2Thai(dateEnd) : null"
                   :label="`${'ถึงวันที่'}`"
                 >
                   <template v-slot:prepend>
@@ -194,11 +154,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
               outlined
               dense
               v-model="ocSelect"
-              :options="ocSelectOp"
+              :options="store.ocSelectOp"
               label="เลือกหน่วยงาน/สำนักงานเขต"
               emit-value
               map-options
-              option-label="value"
+              option-label="name"
               option-value="id"
               use-input
               @filter="(inputValue: any,
@@ -219,11 +179,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
               outlined
               dense
               v-model="government"
-              :options="governmentOp"
+              :options="store.governmentOp"
               label="เลือกหน่วยงาน/สำนักงานเขต"
               emit-value
               map-options
-              option-label="value"
+              option-label="name"
               option-value="id"
               use-input
               @filter="(inputValue: any,
@@ -240,15 +200,15 @@ function filterFnOptionsType(val: string, update: any, type: string) {
           </div>
           <div v-if="typeReport > '2'" class="q-pl-xs">
             <q-select
-            class="bg-white"
+              class="bg-white"
               outlined
               dense
               v-model="fault"
-              :options="faultOp"
+              :options="store.faultOp"
               label="เลือกลักษณะความผิด"
               emit-value
               map-options
-              option-label="value"
+              option-label="name"
               option-value="id"
               use-input
               @filter="(inputValue: any,

src/modules/11_discipline/router.ts

@@ -29,7 +29,7 @@ const channelAdd = () =>
 const complaintAdd = () =>
   import("@/modules/11_discipline/components/1_Complaint/AddComplaintPage.vue");
 const reportType = () =>
-  import("@/modules/11_discipline/components/5_Report/reportDetail.vue");
+  import("@/modules/11_discipline/components/5_Report/DetailPage.vue");
 
 const InvestigateDisciplinaryAdd = () =>
   import(

src/modules/11_discipline/stroes/ReportStore.ts

@@ -1,24 +1,62 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-
+import type { DataOption } from '@/modules/11_discipline/interface/index/Main'
 export const useReportDataStore = defineStore("DisciplineReport11", () => {
-  interface OptionReport {
+
-    id: string;
+  const faultOp = ref<DataOption[]>();
-    title: string;
+  const ocSelectOp = ref<DataOption[]>();
-  }
+  const governmentOp = ref<DataOption[]>();
-  const optionReport = ref<OptionReport[]>([
+  const faultOps = ref<DataOption[]>([
-    { id: "1", title: "รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี" },
+    { id: "001", name: "ยังไม่ระบุ" },
-    { id: "2", title: "รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน" },
+    { id: "002", name: "ไม่ร้ายเเรง" },
-    { id: "3", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด" },
+    { id: "003", name: "ร้ายเเรง" },
-    { id: "4", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+  ]);
-    { id: "5", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด" },
+  const ocSelectOps = ref<DataOption[]>([
-    { id: "6", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "001", name: "กทม" },
-    { id: "7", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด" },
+    { id: "002", name: "กรุงเทพ" },
-    { id: "8", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง" },
+  ]);
+  const governmentOps = ref<DataOption[]>([
+    { id: "001", name: "กทม" },
+    { id: "002", name: "กรุงเทพ" },
+    { id: "003", name: "bankok" },
+  ]);
+  const optionReport = ref<DataOption[]>([
+    { id: "1", name: "รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี" },
+    { id: "2", name: "รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน" },
+    { id: "3", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด" },
+    { id: "4", name: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "5", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด" },
+    { id: "6", name: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
+    { id: "7", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด" },
+    { id: "8", name: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง" },
   ]);
 
-
+  function filterFnOptionsType(val: string, update: any, type: string) {
+    update(() => {
+      const needle = val.toLowerCase();
+      if (type === "ocSelectOp") {
+        ocSelectOp.value = ocSelectOps.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+      } else if (type === "governmentOp") {
+        governmentOp.value = governmentOps.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+      } else if (type === "faultOp") {
+        faultOp.value = faultOps.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+      }
+    });
+  }
   return {
     optionReport,
+    filterFnOptionsType,
+    faultOp,
+    ocSelectOp,
+    governmentOp,
+    faultOps,
+    ocSelectOps,
+    governmentOps,
   };
 });