From c48355b052fa24a37d754c70fe05531973139be2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 13 Jun 2024 11:43:38 +0700
Subject: [PATCH] =?UTF-8?q?KPI=20=3D>=20ui=20=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/14_KPI/views/report.vue | 325 +++++++++++++++++++++++++++-
 1 file changed, 324 insertions(+), 1 deletion(-)

diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 69797bfc7..0cc79434c 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -1,3 +1,326 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import axios from "axios";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
+  useCounterMixin();
+
+const year = ref<number | null>(new Date().getFullYear());
+const round = ref<string>("");
+const organization = ref<string>("");
+const roundOp = ref<DataOption[]>([]);
+const organizationOpsMain = ref<DataOption[]>([]);
+const organizationOps = ref<DataOption[]>([]);
+
+function fetchRoundOption() {
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then(async (res) => {
+      const data = await res.data.result.data;
+      if (res.data.result.data.length > 0) {
+        const list = await data.map((e: any) => ({
+          id: e.id,
+          name:
+            e.durationKPI === "OCT"
+              ? "รอบตุลาคม"
+              : e.durationKPI === "APR"
+              ? "รอบเมษายน"
+              : "",
+        }));
+        roundOp.value = list;
+      } else {
+        roundOp.value = [];
+        round.value = "";
+        organization.value = "";
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+function fetchActiveId() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchListOrg(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+function fetchListOrg(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id))
+    .then(async (res) => {
+      const data = await res.data.result.map((item: any) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
+      }));
+      organizationOpsMain.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function changRound() {}
+
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    organizationOps.value = organizationOpsMain.value.filter(
+      (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+    );
+  });
+}
+
+const splitterModel = ref(14);
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+const fileBlob = ref<any>();
+
+async function downloadReport(data: any, type: string) {
+  const link = document.createElement("a");
+  var fileName = "ประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก";
+  link.href = window.URL.createObjectURL(new Blob([data]));
+  link.setAttribute("download", `${fileName}.${type}`);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+onMounted(() => {
+  fetchRoundOption();
+  fetchActiveId();
+});
+</script>
+
 <template>
-  <div>จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก
+  </div>
+  <q-card flat bordered>
+    <q-card-section>
+      <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="changRound"
+          />
+          <q-select
+            :disable="roundOp.length === 0"
+            style="min-width: 100px"
+            dense
+            hide-bottom-space
+            outlined
+            option-label="name"
+            option-value="id"
+            map-options
+            v-model="organization"
+            :options="organizationOps"
+            label="หน่วยงาน"
+            use-input
+            @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn )"
+          />
+        </div>
+
+        <q-space />
+
+        <q-btn flat round color="primary" icon="download">
+          <q-menu>
+            <q-list style="min-width: 150px">
+              <q-item
+                clickable
+                v-close-popup
+                @click="downloadReport(fileBlob, 'pdf')"
+              >
+                <q-item-section avatar
+                  ><q-icon color="red" name="mdi-file-pdf"
+                /></q-item-section>
+                <q-item-section>ไฟล์ .PDF</q-item-section>
+              </q-item>
+              <q-item
+                clickable
+                v-close-popup
+                @click="downloadReport(fileBlob, 'docx')"
+              >
+                <q-item-section avatar
+                  ><q-icon color="blue" name="mdi-file-word"
+                /></q-item-section>
+                <q-item-section>ไฟล์ .docx</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </q-toolbar>
+
+      <q-splitter
+        v-model="splitterModel"
+        horizontal
+        style="
+          height: 75vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 5px;
+        "
+        before-class="overflow-hidden disable"
+        separator-class="bg-white disabled"
+      >
+        <template v-slot:before>
+          <div class="q-px-sm">
+            <div class="row items-start items-center">
+              <div class="col">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-left"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  class="my-auto"
+                  @click="backPage"
+                  :disable="page == 1"
+                />
+              </div>
+              <div class="col-12 col-md-auto">
+                <div class="q-pa-md flex">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </div>
+              </div>
+              <div class="col text-right">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-right"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  @click="nextPage"
+                  :disable="page === numOfPages"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-slot:after>
+          <div class="q-pa-md">
+            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+          </div>
+        </template>
+        <template v-slot:default>
+          <div class="q-pa-md">
+            <div class="row items-start items-center">
+              <div class="col">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-left"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  class="my-auto"
+                  @click="backPage"
+                  :disable="page == 1"
+                />
+              </div>
+
+              <div class="col-12 col-md-auto">
+                <div class="q-pa-md flex">
+                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                </div>
+              </div>
+              <div class="col text-right">
+                <q-btn
+                  padding="xs"
+                  icon="mdi-chevron-right"
+                  color="grey-2"
+                  text-color="grey-5"
+                  size="md"
+                  @click="nextPage"
+                  :disable="page === numOfPages"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </q-splitter>
+    </q-card-section>
+  </q-card>
 </template>
+
+<style scoped></style>