ระบบพัฒนา => ประวัติ

2024-04-29 15:05:24 +07:00 · 2024-04-29 15:05:24 +07:00 · bb60ab089c
commit bb60ab089c
parent ce19411e38
4 changed files with 136 additions and 31 deletions
--- 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>
--- 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">
--- 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">
--- 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) => {