From bb60ab089cbd1d4cc4b448117e6bda4c408ac63d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 29 Apr 2024 15:05:24 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=92=E0=B8=99=E0=B8=B2=20=3D>=20=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/Record.vue      | 12 ++-
 .../15_development/views/EmployeeHistory.vue  | 65 ++++++++++++++---
 src/modules/15_development/views/History.vue  | 73 +++++++++++++++----
 src/plugins/genreportxlsx.ts                  | 17 +++--
 4 files changed, 136 insertions(+), 31 deletions(-)

diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index 249dab2c2..d118e270c 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -202,9 +202,10 @@ async function clickUpload(file: any) {
       formData.append("file", selectedFile);
       await http
         .post(config.API.developmentMainTab("tab6", id.value), formData)
-        .then((res) => {
+        .then(() => {
           success($q, "อัปโหลดไฟล์สำเร็จ");
           getData();
+          files.value = null;
         })
         .catch((err) => {
           messageError($q, err);
@@ -359,8 +360,13 @@ onMounted(() => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td v-if="props.row.isDone">
-          <q-icon name="mdi-check" color="green" size="xs">
+        <q-td>
+          <q-icon
+            name="mdi-check"
+            color="green"
+            size="xs"
+            v-if="props.row.isDone"
+          >
             <q-tooltip>ส่งไปบันทึกที่ทะเบียนประวัติแล้ว</q-tooltip>
           </q-icon>
         </q-td>
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index a7307a9e0..cdbbc345a 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -6,7 +6,10 @@ import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import { useRouter } from "vue-router";
 
-import type { NewPagination } from "@/modules/15_development/interface/index/Main";
+import type {
+  NewPagination,
+  ItemsMenu,
+} from "@/modules/15_development/interface/index/Main";
 
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
@@ -18,25 +21,36 @@ const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
 const maxPage = ref<number>(1);
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 
 const formFilter = reactive({
   root: null,
   page: 1,
-  pageSize: 20,
+  pageSize: 10,
   keyword: "",
   year: new Date().getFullYear(),
 });
 
-const rows = ref<any>([]);
+const rows = ref<any[]>([]);
 const agencyOp = ref<[]>([]);
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "ไฟล์ .xlsx",
+    value: "xlsx",
+    icon: "mdi-file-excel",
+    color: "green",
+  },
+  {
+    label: "ไฟล์ .PDF",
+    value: "pdf",
+    icon: "mdi-file-pdf",
+    color: "red",
+  },
+]);
 
 const visibleColumns = ref<string[]>([
+  "year",
   "citizenId",
   "name",
   "position",
@@ -47,6 +61,16 @@ const visibleColumns = ref<string[]>([
 ]);
 
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => v + 543,
+  },
   {
     name: "citizenId",
     align: "left",
@@ -122,7 +146,7 @@ function fetchListOrg() {
     });
 }
 
-function onDownload() {
+function onDownload(type: string) {
   showLoader();
   http
     .post(config.API.developmentReportHistoryOfficer(), {
@@ -131,7 +155,7 @@ function onDownload() {
     })
     .then((res) => {
       const dataList = res.data.result;
-      genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงานลูกจ้าง");
+      genReportXLSX(dataList, "รายการประวัติฝึกอบรม/ดูงานลูกจ้าง", type);
     })
     .catch((e) => {
       messageError($q, e);
@@ -166,6 +190,7 @@ function getData() {
         level: item.posLevel ? item.posLevel : null,
         positionSide: item.posExecutive ? item.posExecutive : null,
         projectName: item.projectName ? item.projectName : null,
+        year: item.year ? item.year : null,
       }));
     })
     .catch((e) => {
@@ -193,6 +218,11 @@ watch(
   }
 );
 
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
 onMounted(() => {
   fetchListOrg();
 });
@@ -271,13 +301,28 @@ onMounted(() => {
       <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
         <q-space />
         <q-btn
+          v-if="formFilter.root !== null"
           flat
           round
           dense
           icon="mdi-arrow-down-bold-circle-outline"
           color="blue"
-          @click="onDownload"
         >
+          <q-menu>
+            <q-list style="min-width: 150px">
+              <q-item
+                clickable
+                v-close-popup
+                v-for="items in itemMenu"
+                @click="onDownload(items.value)"
+              >
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section>{{ items.label }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
           <q-tooltip>ดาวน์โหลด</q-tooltip>
         </q-btn>
         <div class="col-4">
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 6f0d43816..363ce3ddd 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -5,23 +5,22 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import genReport from "@/plugins/genreport";
 
 /**importType*/
-import type { NewPagination } from "@/modules/15_development/interface/index/Main";
+import type {
+  NewPagination,
+  ItemsMenu,
+} from "@/modules/15_development/interface/index/Main";
 
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const formFilter = reactive({
   root: null,
   page: 1,
-  pageSize: 20,
+  pageSize: 10,
   keyword: "",
   year: new Date().getFullYear(),
 });
@@ -34,9 +33,10 @@ const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const rows = ref<any>([]);
+const rows = ref<any[]>([]);
 
 const visibleColumns = ref<string[]>([
+  "year",
   "citizenId",
   "name",
   "position",
@@ -47,6 +47,16 @@ const visibleColumns = ref<string[]>([
 ]);
 
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => v + 543,
+  },
   {
     name: "citizenId",
     align: "left",
@@ -112,8 +122,21 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 const agencyOp = ref<[]>([]);
+const itemMenu = ref<ItemsMenu[]>([
+  {
+    label: "ไฟล์ .xlsx",
+    value: "xlsx",
+    icon: "mdi-file-excel",
+    color: "green",
+  },
+  {
+    label: "ไฟล์ .PDF",
+    value: "pdf",
+    icon: "mdi-file-pdf",
+    color: "red",
+  },
+]);
 
 function fetchListOrg() {
   showLoader();
@@ -152,6 +175,7 @@ function getData() {
         level: item.posLevel ? item.posLevel : null,
         projectName: item.projectName ? item.projectName : null,
         positionSide: item.posExecutive ? item.posExecutive : null,
+        year: item.year ? item.year : null,
       }));
     })
     .catch((e) => {
@@ -162,7 +186,7 @@ function getData() {
     });
 }
 
-function onDownload() {
+function onDownload(type: string) {
   showLoader();
   http
     .post(config.API.developmentReportHistory(), {
@@ -171,9 +195,11 @@ function onDownload() {
     })
     .then((res) => {
       const dataList = res.data.result;
+
       genReportXLSX(
         dataList,
-        "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
+        "รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ",
+        type
       );
     })
     .catch((e) => {
@@ -206,6 +232,11 @@ watch(
   }
 );
 
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
+
 onMounted(() => {
   fetchListOrg();
 });
@@ -281,16 +312,32 @@ onMounted(() => {
           <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn> -->
       </q-toolbar>
-      <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
+      <q-toolbar class="col-4 q-pa-none q-gutter-x-sm">
         <q-space />
+
         <q-btn
+          v-if="formFilter.root !== null"
           flat
           round
           dense
           icon="mdi-arrow-down-bold-circle-outline"
           color="blue"
-          @click="onDownload"
         >
+          <q-menu>
+            <q-list style="min-width: 150px">
+              <q-item
+                clickable
+                v-close-popup
+                v-for="items in itemMenu"
+                @click="onDownload(items.value)"
+              >
+                <q-item-section avatar>
+                  <q-icon :color="items.color" :name="items.icon" />
+                </q-item-section>
+                <q-item-section>{{ items.label }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
           <q-tooltip>ดาวน์โหลด</q-tooltip>
         </q-btn>
         <div class="col-4">
diff --git a/src/plugins/genreportxlsx.ts b/src/plugins/genreportxlsx.ts
index ed37490c8..7b94e73d2 100644
--- a/src/plugins/genreportxlsx.ts
+++ b/src/plugins/genreportxlsx.ts
@@ -17,11 +17,18 @@ async function genReportXLSX(
   showLoader();
   await axios
     .post(`${config.API.reportTemplate}/xlsx`, data, {
-      headers: {
-        accept:
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-        "content-Type": "application/json",
-      },
+      headers:
+        type == "xlsx"
+          ? {
+              accept:
+                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+              "content-Type": "application/json",
+            }
+          : {
+              accept: "application/pdf",
+              "content-Type": "application/json",
+            },
+
       responseType: "blob",
     })
     .then((res) => {