From 1a07ac17da88ba702a1ae0777f2f43db6e26577b Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 18 Oct 2023 12:13:55 +0700
Subject: [PATCH] =?UTF-8?q?UI=20-=20=E0=B8=A7=E0=B8=B4=E0=B8=99=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A2=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20any?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{reportDetail.vue => DetailPage.vue}      | 72 +++++--------------
 src/modules/11_discipline/router.ts           |  2 +-
 .../11_discipline/stroes/ReportStore.ts       | 68 ++++++++++++++----
 3 files changed, 70 insertions(+), 72 deletions(-)
 rename src/modules/11_discipline/components/5_Report/{reportDetail.vue => DetailPage.vue} (83%)

diff --git a/src/modules/11_discipline/components/5_Report/reportDetail.vue b/src/modules/11_discipline/components/5_Report/DetailPage.vue
similarity index 83%
rename from src/modules/11_discipline/components/5_Report/reportDetail.vue
rename to src/modules/11_discipline/components/5_Report/DetailPage.vue
index 4f36355c0..54b333f26 100644
--- a/src/modules/11_discipline/components/5_Report/reportDetail.vue
+++ b/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 dateEnd = ref<Date | null>(null);
+const date = ref<Date>();
+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 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 fault = ref<string>();
 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);
-  report && (titleReport.value = report.title);
+  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
+  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,
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index ac4781ad7..d81c6be67 100644
--- a/src/modules/11_discipline/router.ts
+++ b/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(
diff --git a/src/modules/11_discipline/stroes/ReportStore.ts b/src/modules/11_discipline/stroes/ReportStore.ts
index 3d003a224..201ce5b4c 100644
--- a/src/modules/11_discipline/stroes/ReportStore.ts
+++ b/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;
-    title: string;
-  }
-  const optionReport = ref<OptionReport[]>([
-    { id: "1", title: "รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี" },
-    { id: "2", title: "รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน" },
-    { id: "3", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด" },
-    { id: "4", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
-    { id: "5", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด" },
-    { id: "6", title: "รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด" },
-    { id: "7", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด" },
-    { id: "8", title: "รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง" },
+
+  const faultOp = ref<DataOption[]>();
+  const ocSelectOp = ref<DataOption[]>();
+  const governmentOp = ref<DataOption[]>();
+  const faultOps = ref<DataOption[]>([
+    { id: "001", name: "ยังไม่ระบุ" },
+    { id: "002", name: "ไม่ร้ายเเรง" },
+    { id: "003", name: "ร้ายเเรง" },
+  ]);
+  const ocSelectOps = ref<DataOption[]>([
+    { id: "001", name: "กทม" },
+    { id: "002", name: "กรุงเทพ" },
+  ]);
+  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,
   };
 });