From 36ac4e7807d583d69347309b3afbc50be777fec6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Jun 2024 15:51:15 +0700
Subject: [PATCH] KPI => report

---
 src/modules/14_KPI/views/report.vue | 261 +++++++++++++++++++++-------
 1 file changed, 195 insertions(+), 66 deletions(-)

diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 4cbb751f5..e438463dd 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -21,6 +21,48 @@ const organization = ref<string>("");
 const roundOp = ref<DataOption[]>([]);
 const organizationOpsMain = ref<DataOption[]>([]);
 const organizationOps = ref<DataOption[]>([]);
+const typeReport = ref<string>("");
+const listReportMain = 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: "รายงานแผนพัฒนาการปฏิบัติราชการรายบุคคล",
+  },
+]);
+const listReport = ref<DataOption[]>([]);
+const searchField = ref<string>("fullName");
+const search = ref<string>("");
+const typeFilter = ref<DataOption[]>([
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+]);
 
 function fetchRoundOption() {
   http
@@ -112,9 +154,9 @@ function fetchReport() {
  * function เรียกไฟล์ PDF
  * @param data  ข้อมูลบัญชีวันลา
  */
-async function genPDf(data: any) {
+function genPDf(data: any) {
   showLoader();
-  await axios
+  axios
     .post(config.API.reportTemplate + `/docx`, data, {
       headers: {
         accept: "application/pdf",
@@ -144,12 +186,26 @@ function changOption() {
   fetchReport();
 }
 
-function filterSelector(val: string, update: Function) {
-  update(() => {
-    organizationOps.value = organizationOpsMain.value.filter(
-      (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
-    );
-  });
+function filterSelector(val: string, update: Function, type: string) {
+  switch (type) {
+    case "typereport":
+      update(() => {
+        listReport.value = listReportMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    case "organization":
+      update(() => {
+        organizationOps.value = organizationOpsMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
 }
 
 const splitterModel = ref(14);
@@ -184,60 +240,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก
-  </div>
+  <div class="toptitle text-dark col-12 row items-center">รายงาน</div>
   <q-card flat bordered>
-    <q-card-section>
+    <q-card-section class="q-gutter-y-sm">
       <q-toolbar style="padding: 0">
         <div class="row q-gutter-sm">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="year"
-            style="width: 150px"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-            @update:model-value="fetchRoundOption()"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                dense
-                outlined
-                hide-bottom-space
-                :model-value="!!year ? year + 543 : null"
-                :label="`${'ปีงบประมาณ'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-          <q-select
-            v-model="round"
-            outlined
-            label="รอบการประเมิน"
-            dense
-            option-label="name"
-            option-value="id"
-            :options="roundOp"
-            style="min-width: 150px"
-            emit-value
-            map-options
-            :disable="roundOp.length === 0"
-            @update:model-value="changOption"
-          />
           <q-select
             :disable="roundOp.length === 0"
             style="min-width: 100px"
@@ -248,14 +255,12 @@ onMounted(() => {
             option-value="id"
             emit-value
             map-options
-            v-model="organization"
-            :options="organizationOps"
-            label="หน่วยงาน"
+            v-model="typeReport"
+            :options="listReport"
+            label="รายงาน"
             use-input
-            @update:model-value="changOption"
             @filter="(inputValue: string,
-            
-            doneFn: Function) => filterSelector(inputValue, doneFn )"
+            doneFn: Function) => filterSelector(inputValue, doneFn ,'typereport')"
           />
         </div>
 
@@ -295,11 +300,135 @@ onMounted(() => {
         </q-btn>
       </q-toolbar>
 
+      <q-toolbar
+        class="q-pa-sm bg-grey-2"
+        style="padding: 0; border-radius: 5px"
+        v-if="typeReport"
+      >
+        <div
+          class="row q-gutter-sm"
+          v-if="
+            typeReport === '1' ||
+            typeReport === '2' ||
+            typeReport === '3' ||
+            typeReport === '7'
+          "
+        >
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            style="width: 150px"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            @update:model-value="fetchRoundOption()"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                :model-value="!!year ? year + 543 : null"
+                :label="`${'ปีงบประมาณ'}`"
+                class="bg-white"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+          <q-select
+            class="bg-white"
+            v-model="round"
+            outlined
+            label="รอบการประเมิน"
+            dense
+            option-label="name"
+            option-value="id"
+            :options="roundOp"
+            style="min-width: 150px"
+            emit-value
+            map-options
+            :disable="roundOp.length === 0"
+            @update:model-value="changOption"
+          />
+          <q-select
+            class="bg-white"
+            :disable="roundOp.length === 0"
+            style="min-width: 100px"
+            dense
+            hide-bottom-space
+            outlined
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            v-model="organization"
+            :options="organizationOps"
+            label="หน่วยงาน"
+            use-input
+            @update:model-value="changOption"
+            @filter="(inputValue: string,
+            
+            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
+          />
+        </div>
+
+        <div class="row q-gutter-sm" v-else>
+          <q-select
+            class="bg-white"
+            style="width: 200px"
+            dense
+            hide-bottom-space
+            outlined
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            v-model="searchField"
+            :options="typeFilter"
+            label="ค้นหาจาก"
+          />
+
+          <q-input
+            class="bg-white"
+            v-model="search"
+            outlined
+            clearable
+            hide-bottom-space
+            dense
+            label="คำค้น"
+            style="width: 350px"
+          >
+            <template v-slot:after>
+              <q-btn
+                color="primary"
+                icon="search"
+                label="ค้นหา"
+                class="full-width q-py-sm q-px-md"
+              >
+              </q-btn>
+            </template>
+          </q-input>
+        </div>
+      </q-toolbar>
+
       <q-splitter
         v-model="splitterModel"
         horizontal
         style="
-          height: 75vh;
+          height: 70vh;
           border: 1px solid rgb(210, 210, 210);
           border-radius: 5px;
         "