รายงาน

src/modules/21_report/components/01_org/Main.vue

@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
+import type {
+  OrgTree,
+  PosMaster,
+  Position,
+  PosMaster2,
+} from "@/modules/02_organization/interface/response/organizational";
+import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
+
+/** importComponents*/
+import TreeMain from "@/modules/21_report/components/01_org/TreeMain.vue";
+import TreeTable from "@/modules/21_report/components/01_org/TableMain.vue";
+import LoadView from "@/components/LoadView.vue";
+
+/** use*/
+const store = useOrganizational();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+/** props*/
+const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
+const count = defineModel<number>("count", { required: true });
+
+const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
+const nodeId = ref<string>(""); // id ของ Tree
+const orgRootId = ref<string>("");
+const orgLevel = ref<number>(0); // levelTree
+const isLoad = ref<boolean>(false); // loadTable
+const isLoadTree = ref<boolean>(false); // loadTable
+const mainTree = ref<OrgTree>();
+
+const selected = ref<string>("");
+
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: "",
+});
+const totalPage = ref<number>(1);
+const totalData = ref<number>(1);
+const action1 = ref<boolean>(false);
+const posMaster = ref<PosMaster2[]>([]);
+const shortName = ref<string>("");
+
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree(id: string) {
+  isLoadTree.value = false;
+  showLoader();
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data.data;
+      store.remark = data.remark;
+      selected.value = "";
+      nodeId.value = "";
+      store.treeId = "";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number, action: boolean) {
+  searchAndReplaceOrgName(nodeTree.value, id);
+  orgLevel.value = level;
+  reqMaster.id = id;
+  reqMaster.type = level;
+  action1.value = action;
+  if (action) {
+    setTimeout(() => {
+      action1.value = false;
+    }, 1000);
+    reqMaster.isAll = false;
+    reqMaster.page = 1;
+    reqMaster.pageSize = 10;
+    reqMaster.keyword = "";
+    reqMaster.revisionId =
+      store.typeOrganizational == "draft"
+        ? store.draftId
+        : store.typeOrganizational == "current"
+        ? store.activeId
+        : store.historyId;
+    isLoad.value = true;
+  }
+  posMaster.value = [];
+
+  await http
+    .post(config.API.orgPosMasterList, {
+      ...reqMaster,
+      keyword: reqMaster.keyword.trim(),
+    })
+    .then(async (res) => {
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      totalData.value = res.data.result.total;
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = {
+            ...e,
+            ...rest,
+          };
+          dataMain.push(test);
+        }
+      });
+      posMaster.value = store.fetchPosMaster(dataMain);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 1000);
+    });
+}
+
+/**  ดึงข้อมูลสถิติจำนวนด้านบน*/
+function getSummary() {
+  http
+    .post(config.API.orgSummary, {
+      id: reqMaster.id, //*Id node
+      type: reqMaster.type, //*ประเภทnode
+      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    });
+}
+
+/** funcion ค้นหาข้อมูลใน Table*/
+async function filterKeyword() {
+  reqMaster.page = 1;
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+}
+
+/**
+ * ค้นหาโครงสร้างในข้อมูลแบบลำดับชั้นเพื่อหาที่ตรงกับ orgTreeId
+ * @param data ข้อมูลโครงสร้าง
+ * @param targetId id ของโครงสร้างที่ต้องการค้นหา
+ */
+function searchAndReplaceOrgName(data: any, targetId: string) {
+  for (const child of data) {
+    if (child.orgTreeId === targetId) {
+      mainTree.value = child;
+
+      return true; // Found the targetId in this level
+    }
+    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
+      return true; // Found the targetId in the nested children
+    }
+  }
+  return false; // Not found in this branch
+}
+
+/** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
+watch(
+  () => count.value,
+  () => {
+    fetchDataTree(historyId.value);
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
+watch(
+  () => store.typeOrganizational,
+  () => {
+    nodeTree.value = [];
+    const id =
+      store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    id && store.typeOrganizational !== "old" && fetchDataTree(id);
+    nodeId.value = "";
+    store.treeId = "";
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า */
+watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+});
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
+watch(
+  () => reqMaster.isAll,
+  () => {
+    getSummary();
+    if (reqMaster.page !== 1) {
+      reqMaster.page = 1;
+    } else {
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+    }
+  }
+);
+
+watch(
+  () => store.draftId,
+  () => {
+    store.draftId && fetchDataTree(store.draftId?.toString());
+  }
+);
+
+/**
+ * lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
+ *
+ * ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
+ */
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : historyId.value;
+  id && (await fetchDataTree(id));
+});
+</script>
+
+<template>
+  <div class="col-12">
+    <q-card bordered class="col-12 row caedNone">
+      <div class="col-xs-12 col-sm-3 row">
+        <div class="col-12 row no-wrap bg-grey-1">
+          <TreeMain
+            v-model:node-tree="nodeTree"
+            v-model:short-name="shortName"
+            v-model:node-id="nodeId"
+            v-model:org-root-id="orgRootId"
+            :fetch-data-table="fetchDataTable"
+            :fetch-data-tree="fetchDataTree"
+          />
+
+          <div class="col-12 row">
+            <q-separator :vertical="!$q.screen.lt.md" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-9 q-pa-md row">
+        <div class="col-12 row">
+          <LoadView v-if="isLoad" />
+
+          <div v-else class="col-12 row">
+            <div class="col-12" v-if="nodeId !== ''">
+              <!-- summary -->
+              <q-card
+                bordered
+                v-if="nodeId"
+                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+              >
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                  <q-space />
+                  <q-badge
+                    color="secondary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.total
+                        : store.sumPosition.totalRoot
+                    "
+                  />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                  <q-space />
+                  <q-badge
+                    color="primary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.use
+                        : store.sumPosition.useRoot
+                    "
+                  />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งว่าง</div>
+                  <q-space />
+                  <q-badge
+                    color="red"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.vacant
+                        : store.sumPosition.vacantRoot
+                    "
+                  />
+                </div>
+              </q-card>
+
+              <q-card falt bordered class="q-mt-xs q-gutter-xs">
+                <div class="q-pa-sm">
+                  <TreeTable
+                    v-if="nodeId !== ''"
+                    v-model:node-tree="nodeTree"
+                    v-model:org-level="orgLevel"
+                    v-model:tree-id="nodeId"
+                    v-model:pos-master="posMaster"
+                    v-model:req-master="reqMaster"
+                    v-model:total-page="totalPage"
+                    v-model:org-root-id="orgRootId"
+                    v-model:total-data="totalData"
+                    :short-name="shortName"
+                    :main-tree="mainTree"
+                    :fetch-data-table="fetchDataTable"
+                    :filter-keyword="filterKeyword"
+                    :fetch-data-tree="fetchDataTree"
+                  />
+                </div>
+              </q-card>
+            </div>
+            <div class="row col-12 items-center" v-else>
+              <q-banner class="q-pa-lg col-12 text-center">
+                <q-icon
+                  name="mdi-hand-pointing-left"
+                  size="lg"
+                  color="primary"
+                />
+                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
+              </q-banner>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped>
+.list-summary .item {
+  border: 1px solid rgb(231, 231, 231);
+  border-radius: 4px;
+  background-color: white;
+}
+</style>

src/modules/21_report/components/01_org/TableMain.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import { useCounterMixin } from "@/stores/mixin";
+import genReportXLSX from "@/plugins/genreportxlsx";
+
+import type { DataDocument } from "@/modules/02_organization/interface/index/Main";
+import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
+import type { PosMaster2 } from "@/modules/02_organization/interface/response/organizational";
+
+/** importComponents*/
+
+import LoadView from "@/components/LoadView.vue";
+
+const $q = useQuasar();
+const { hideLoader, messageError } = useCounterMixin();
+
+/** View*/
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+
+/** prosp*/
+const isLoadPDF = ref<boolean>(false);
+const detailReport = ref<any>();
+
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
+const orgRootId = defineModel<string>("orgRootId", { required: true });
+const props = defineProps({
+  filterKeyword: { type: Function, require: true, default: () => {} },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  shortName: { type: String, required: true },
+  fetchDataTree: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  mainTree: {
+    type: Object,
+    require: true,
+  },
+});
+
+const title = ref<string>("");
+
+/** ListMenu Table*/
+
+const baseDocument = ref<DataDocument[]>([
+  {
+    name: "บัญชี 2",
+    val: "report2",
+  },
+
+  {
+    name: "รายงานสรุปจำนวนกรอบอัตรากำลังของข้าราชการกรุงเทพมหานครสามัญ",
+    val: "report4",
+  },
+]);
+
+const modalDialogMMove = ref<boolean>(false);
+
+/**
+ * function DownloadReport
+ */
+async function getReport(list: string) {
+  const listFind = baseDocument.value.find(
+    (item: DataDocument) => item.val == list
+  )?.val;
+  const newReport = listFind === "report2" ? "report2-history" : listFind;
+  isLoadPDF.value = true;
+  if (newReport) {
+    await http
+      .get(config.API.orgReport(newReport) + `/${orgRootId.value}`)
+      .then(async (res) => {
+        const data = res.data.result;
+        detailReport.value = data;
+        await fetchDocumentTemplate(data);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        isLoadPDF.value = false;
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * function เรียกไฟล์ PDF
+ * @param data  ข้อมูลบัญชีวันลา
+ */
+async function fetchDocumentTemplate(data: any) {
+  await axios
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
+      headers: {
+        accept: "application/pdf",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      const pdfData = usePDF(`${objectUrl}`);
+
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    });
+}
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+watch(
+  () => modalDialogMMove.value,
+  () => {
+    if (!modalDialogMMove.value) {
+      if (posMaster.value.length === 0) {
+        props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <!-- TOOLBAR -->
+  <div class="col-12 q-mb-sm">
+    <q-toolbar style="padding: 0">
+      <!-- v-if="store.typeOrganizational === 'draft'" -->
+      <q-select
+        outlined
+        dense
+        :options="baseDocument"
+        option-value="val"
+        option-label="name"
+        style="width: 500px"
+        label="รายงาน"
+        v-model="title"
+        @update:model-value="(val:string) => getReport(val)"
+        emit-value
+        map-options
+      >
+      </q-select>
+
+      <q-space />
+      <q-btn
+        :loading="isLoadPDF"
+        flat
+        round
+        :disable="!title"
+        color="primary"
+        icon="download"
+      >
+        <q-menu>
+          <q-list style="min-width: 150px">
+            <q-item
+              clickable
+              v-close-popup
+              @click.stop.pervent="
+                genReportXLSX(
+                  detailReport,
+                  `${baseDocument.find((e) => e.val === title)?.name}`,
+                  '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.stop.pervent="
+                genReportXLSX(
+                  detailReport,
+                  `${baseDocument.find((e) => e.val === title)?.name}`
+                )
+              "
+            >
+              <q-item-section avatar
+                ><q-icon color="green" name="mdi-file-excel"
+              /></q-item-section>
+              <q-item-section>ไฟล์ .xlsx</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+    </q-toolbar>
+  </div>
+
+  <!-- TABLE -->
+  <div class="col-12">
+    <q-card>
+      <q-splitter
+        horizontal
+        style="
+          height: 65vh;
+          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">
+            <LoadView v-if="isLoadPDF" />
+            <VuePDF
+              v-else
+              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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table-expand {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: white;
+  }
+
+  .q-table thead tr {
+    background: white;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+    padding: 0px;
+  }
+}
+</style>

src/modules/21_report/components/01_org/TreeMain.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+
+/** importType*/
+import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";
+import type { DataTree } from "@/modules/02_organization/interface/index/organizational";
+
+/** importComponents*/
+import DialogStructureDetail from "@/modules/02_organization/components/DialogStructureDetail.vue";
+
+/** importStore*/
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = useOrganizational();
+const { showLoader } = useCounterMixin();
+
+/** props*/
+const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { required: true });
+const orgRootId = defineModel<string | undefined>("orgRootId", {
+  required: true,
+});
+const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
+
+const filter = ref<string>("");
+const nodes = ref<Array<OrgTree>>([]);
+const lazy = ref(nodes);
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const orgLevel = ref<number>(0);
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  orgRootId.value = data?.orgLevel === 0 ? data?.orgTreeId : data?.orgRootId;
+  store.rootId = (
+    data.orgLevel === 0 ? data.orgTreeId : data.orgRootId
+  ) as string;
+  shortName.value = data.orgTreeShortName;
+
+  if (!store.treeId || store.treeId != data.orgTreeId) {
+    store.treeId = data.orgTreeId;
+    store.level = data.orgLevel;
+
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
+    http
+      .post(config.API.orgSummary, {
+        id: data.orgTreeId, //*Id node
+        type: data.orgLevel, //*ประเภทnode
+        isNode: false, //*นับทั้ง node ไหม
+      })
+      .then(async (res: any) => {
+        const data = await res.data.result;
+        if (data) {
+          store.getSumPosition({
+            totalPosition: data.totalPosition,
+            totalPositionCurrentUse: data.totalPositionCurrentUse,
+            totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalPositionNextUse: data.totalPositionNextUse,
+            totalPositionNextVacant: data.totalPositionNextVacant,
+            totalRootPosition: data.totalPosition,
+            totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+            totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalRootPositionNextUse: data.totalPositionNextUse,
+            totalRootPositionNextVacant: data.totalPositionNextVacant,
+          });
+        }
+      });
+  }
+}
+
+const treeId = ref<string>("");
+
+const dialogDetail = ref<boolean>(false);
+/**
+ * funtion ดูรายละเอียดโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
+function onClickDetail(id: string, level: number) {
+  showLoader();
+  treeId.value = id;
+  dialogDetail.value = !dialogDetail.value;
+  orgLevel.value = level;
+}
+
+watch(
+  () => nodeTEST.value,
+  () => {
+    nodes.value = nodeTEST.value;
+  }
+);
+</script>
+
+<template>
+  <div class="col-12 q-py-sm q-px-sm">
+    <div class="q-gutter-sm">
+      <div class="row q-col-gutter-sm q-pl-sm">
+        <div class="col-12">
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <div class="bg-white tree-container q-pa-xs">
+        <q-tree
+          class="q-pa-sm q-gutter-sm"
+          dense
+          default-expand-all
+          :nodes="lazy"
+          node-key="orgTreeId"
+          label-key="labelName"
+          :filter="filter.trim()"
+          :no-results-label="notFound"
+          :no-nodes-label="noData"
+          v-model:expanded="expanded"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              :active="nodeId == prop.node.orgTreeId"
+              @click.stop="updateSelected(prop.node)"
+              active-class="my-list-link text-primary text-weight-medium"
+              class="row col-12 text-dark items-center q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div
+                  :class="
+                    prop.node.isOfficer || prop.node.isInformation
+                      ? 'text-weight-medium text-blue'
+                      : 'text-weight-medium'
+                  "
+                >
+                  <div
+                    v-if="
+                      (prop.node.isDeputy == true && prop.node.orgLevel == 0) ||
+                      (prop.node.isCommission == true &&
+                        prop.node.orgLevel == 0)
+                    "
+                    class="text-info"
+                  >
+                    {{ prop.node.orgTreeName
+                    }}{{
+                      prop.node.isCommission == true && prop.node.orgLevel == 0
+                        ? ` (กก.)`
+                        : ""
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ prop.node.orgTreeName }}
+                  </div>
+                  {{ prop.node.isOfficer ? "(สกจ.)" : "" }}
+                </div>
+                <div class="text-weight-light text-grey-8">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                @click.stop
+                flat
+                dense
+                color="grey-13"
+                icon="mdi-dots-vertical"
+                round
+              >
+                <q-menu>
+                  <q-list dense>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="
+                        onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
+                      "
+                    >
+                      <q-item-section avatar style="min-width: 20px">
+                        <q-icon size="xs" color="blue-9" name="mdi-eye" />
+                      </q-item-section>
+                      <q-item-section>ดูรายละเอียด</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
+    </div>
+  </div>
+
+  <!-- รายละเอียดโครงสร้าง -->
+  <DialogStructureDetail
+    v-model:structure-detail="dialogDetail"
+    v-model:treeId="treeId"
+    v-model:orgLevel="orgLevel"
+  />
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/21_report/interface/Main.ts

@@ -0,0 +1,89 @@
+interface ListDataText {
+  value: string;
+  label: string;
+}
+
+interface DataSurvey {
+  answer1: string;
+  answer2: string;
+  answer3: number;
+  status: boolean;
+}
+
+interface TabPermissions {
+  isEdit: boolean;
+  isView: boolean;
+}
+
+interface DataPermissions {
+  tab1: TabPermissions;
+  tab2: TabPermissions;
+  tab3: TabPermissions;
+  tab4: TabPermissions;
+  tab5: TabPermissions;
+  tab6: TabPermissions;
+  tab7: TabPermissions;
+}
+
+interface AppointTopic {
+  id: string;
+  appointId: string;
+  profileId: string;
+  name: string;
+  position: string;
+  positionType: string;
+  positionLevel: string;
+  role: string;
+}
+
+interface AppointTopicMain {
+  id: string;
+  profileId: string;
+  topic: string;
+  commandNo: string;
+  status: string;
+  directors: AppointTopic[];
+}
+
+interface ProbationReportType {
+  develop_orientation_score: number;
+  develop_self_learning_score: number;
+  develop_training_seminar_score: number;
+  develop_other_training_score: number;
+  develop_total_score: number;
+  develop_orientation_percent: number;
+  develop_self_learning_percent: number;
+  develop_training_seminar_percent: number;
+  develop_other_training_percent: number;
+  develop_total_percent: number;
+  develop_result: number;
+  achievement_score: number;
+  achievement_score_total: number;
+  achievement_percent: number;
+  achievement_result: number;
+  behavior_score: number;
+  behavior_score_total: number;
+  behavior_percent: number;
+  behavior_result: number;
+  sum_score: number;
+  sum_percent: number;
+  reason: string;
+  pass_result: number;
+  evaluate_date: Date;
+}
+
+interface FileType{
+  path:string
+  pathname:string
+  fileName:string
+  title:string
+}
+export type {
+  ListDataText,
+  DataSurvey,
+  DataPermissions,
+  AppointTopicMain,
+  AppointTopic,
+  ProbationReportType,
+  FileType
+};

src/modules/21_report/router.ts

@@ -0,0 +1,132 @@
+const reportOrg = () => import("@/modules/21_report/views/01_reportOrg.vue");
+const reportRegistry = () =>
+  import("@/modules/21_report/views/02_reportRegistry.vue");
+const reportLeave = () => import("@/modules/09_leave/views/06_ReportMain.vue");
+const reportPlacement = () =>
+  import("@/modules/05_placement/views/09_reportMain.vue");
+const reportRetire = () =>
+  import("@/modules/06_retirement/views/07_report.vue");
+const reportDiscipline = () =>
+  import("@/modules/11_discipline/components/9_DisciplineReport/Main.vue");
+
+const reportDevelop = () =>
+  import("@/modules/21_report/views/03_reportDevelopment.vue");
+// const reportSalary = () => import("");
+const reportKpi = () => import("@/modules/14_KPI/views/report.vue");
+const reportInsignia = () =>
+  import("@/modules/07_insignia/views/06_ReportMain.vue");
+const reportExam = () =>
+  import("@/modules/03_recruiting/views/01_compete/CompeteReport.vue");
+
+export default [
+  {
+    path: "/report/org",
+    name: "reportOrg",
+    component: reportOrg,
+    meta: {
+      Auth: true,
+      Key: "REPORT_ORG",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/registry",
+    name: "reportRegistry",
+    component: reportRegistry,
+    meta: {
+      Auth: true,
+      Key: "REPORT_REGISTRY",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/leave",
+    name: "reportLeave",
+    component: reportLeave,
+    meta: {
+      Auth: true,
+      Key: "REPORT_LEAVE",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/placement",
+    name: "reportPlacement",
+    component: reportPlacement,
+    meta: {
+      Auth: true,
+      Key: "REPORT_PLACEMENT",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/retire",
+    name: "reportRetire",
+    component: reportRetire,
+    meta: {
+      Auth: true,
+      Key: "REPORT_RETIRE",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/discipline",
+    name: "reportDiscipline",
+    component: reportDiscipline,
+    meta: {
+      Auth: true,
+      Key: "REPORT_DISCIPLINE",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/develop",
+    name: "reportDevelop",
+    component: reportDevelop,
+    meta: {
+      Auth: true,
+      Key: "REPORT_DEVELOP",
+      Role: "STAFF",
+    },
+  },
+  // {
+  //   path: "/report/salary",
+  //   name: "reportSalary",
+  //   component: reportSalary,
+  //   meta: {
+  //     Auth: true,
+  //     Key: "REPORT_SALARY",
+  //     Role: "STAFF",
+  //   },
+  // },
+  {
+    path: "/report/kpi",
+    name: "reportKpi",
+    component: reportKpi,
+    meta: {
+      Auth: true,
+      Key: "REPORT_KPI",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/insignia",
+    name: "reportInsignia",
+    component: reportInsignia,
+    meta: {
+      Auth: true,
+      Key: "REPORT_INSIGNIA",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/report/exam",
+    name: "reportExam",
+    component: reportExam,
+    meta: {
+      Auth: true,
+      Key: "REPORT_EXAM",
+      Role: "STAFF",
+    },
+  },
+];

src/modules/21_report/views/01_reportOrg.vue

@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
+import type { DataOrgRevision } from "@/modules/02_organization/interface/index/Main";
+import type { OrgRevision } from "@/modules/02_organization/interface/response/organizational";
+
+/** importComponents*/
+import TreeView from "@/modules/21_report/components/01_org/Main.vue";
+import StructureView from "@/modules/02_organization/components/StructureMain.vue";
+import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const store = useOrganizational();
+
+/** ตัวแปร*/
+const modalNewStructure = ref<boolean>(false); // เพิ่มโครงสร้าง
+const modalDateTime = ref<boolean>(false); //  ตั้งเวลาเผยแพร่
+const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
+const typeStructure = ref<string>(""); // ประเภทการเพิ่มโครงสร้าง
+/** ประวัติโครงสร้าง*/
+const itemHistory = ref<DataOrgRevision[]>([]); // List ประวัติโครงสร้าง
+const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
+const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
+const count = ref<number>(0);
+
+const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
+const modalRemark = ref<boolean>(false); // หมายเหตุ
+
+/**
+ * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
+ * เก็บข่อมูลใน store
+ */
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then(async (res) => {
+      const data = await res.data.result;
+      if (data) {
+        await store.fetchDataActive(data);
+        // ต้องมี id ของแบบร่างถึงจะเช็ค isLock
+        if (data.draftId) {
+          await fetchCheckIslock(data.draftId);
+        } else {
+          store.isLosck = false;
+        }
+
+        if (data.activeName === null && data.draftName === null) {
+          isStatusData.value = false;
+        } else {
+          isStatusData.value = true;
+          if (isStatusData.value) {
+            if (data.activeName === null) {
+              store.typeOrganizational = "draft";
+            } else if (data.draftName === null) {
+              store.typeOrganizational = "current";
+            }
+          }
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/** function เรียกข้อมูรายการลประวัติโครงสร้าง*/
+async function fetchHistory() {
+  await http
+    .get(config.API.organizationHistoryNew)
+    .then(async (res) => {
+      const data = await res.data.result;
+      const filterData = data.filter(
+        (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
+      );
+
+      itemHistory.value = filterData.map((e: OrgRevision) => ({
+        id: e.orgRevisionId,
+        name: e.orgRevisionName,
+        orgRevisionCreatedAt: e.orgRevisionCreatedAt
+          ? date2Thai(e.orgRevisionCreatedAt)
+          : "",
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function openPopup เพิ่มโครงสร้าง
+ * @param type ประเภทการเพิ่มโครงาสร้าง
+ */
+function ocClickAddStructure(type: string) {
+  modalNewStructure.value = !modalNewStructure.value;
+  typeStructure.value = type;
+}
+
+/** function openPopup ตั้งเวลาเผยแพร่ */
+function onClickDateTime() {
+  modalDateTime.value = !modalDateTime.value;
+}
+
+/**
+ * function เปิดประวัติโครงสร้าง
+ * @param id id โครงสร้าง
+ * @param name ชื่อโครงสร้าง
+ */
+function onClickHistory(id: string, name: string) {
+  historyId.value = id;
+  store.historyId = id;
+  labelHistory.value = name;
+  count.value++;
+}
+
+async function workflowSystem() {
+  http
+    .get(config.API.workflowKeycloakSystem("SYS_ORG"))
+    .then((res) => {
+      const data = res.data.result;
+      store.isOfficer = data.isOfficer;
+      store.isStaff = data.isStaff;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+async function fetchCheckIslock(id: string) {
+  http
+    .get(config.API.orgIsLock + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      store.isLosck = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+watch(
+  () => store.typeOrganizational,
+  () => {
+    if (
+      store.typeOrganizational === "draft" &&
+      store.isOfficer === null &&
+      store.isStaff === null
+    ) {
+      workflowSystem();
+    } else if (store.typeOrganizational === "draft") {
+      store.rootId = "";
+    }
+  }
+);
+
+/**
+ * lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
+ * ดึงข้อมูลโครงสร้างและรายการประวัติโครงสร้าง
+ */
+onMounted(async () => {
+  store.typeOrganizational = "current";
+  await Promise.all([fetchOrganizationActive(), fetchHistory()]);
+});
+</script>
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายงานโครงสร้างอัตรากำลัง
+    </div>
+    <q-space />
+
+    <div
+      class="toptitle row items-center"
+      v-if="store.typeOrganizational === 'draft'"
+    >
+      <div
+        v-if="store.isPublic && store.orgPublishDate"
+        class="q-pr-md text-caption"
+      >
+        วันที่เผยแพร่ :
+        <strong>{{ date2Thai(store.orgPublishDate) }}</strong>
+      </div>
+      <q-btn
+        v-if="checkPermission($route)?.attrOwnership == 'OWNER'"
+        dense
+        class="q-px-md"
+        color="indigo-9"
+        icon="alarm"
+        label="ตั้งเวลาเผยแพร่"
+        @click="onClickDateTime"
+      >
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <div class="q-pa-xl" v-if="!isStatusData">
+      <q-card
+        flat
+        bordered
+        style="
+          height: 70vh;
+          border: 1px solid rgb(210, 210, 210);
+          border-radius: 5px;
+        "
+      >
+        <div
+          class="text-center row"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+          "
+        >
+          <div>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsCreate"
+              flat
+              style="background-color: #d8f5f2"
+              round
+              color="primary"
+              size="lg"
+              icon="add"
+              @click="ocClickAddStructure('NEW')"
+            >
+              <q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
+            </q-btn>
+            <div class="q-mt-sm">เพิ่มโครงสร้าง</div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+
+    <div v-else>
+      <q-card class="my-card">
+        <q-card-section class="q-pa-sm">
+          <q-toolbar class="q-gutter-md items-center" style="padding: 0px">
+            <q-btn-group outline>
+              <q-btn
+                dense
+                class="q-px-md"
+                :outline="store.typeOrganizational === 'current' ? false : true"
+                color="blue"
+                label="ปัจจุบัน"
+                :disable="store.activeId == '' || store.activeId == null"
+                @click="
+                  (store.typeOrganizational = 'current'),
+                    (labelHistory = 'ประวัติโครงสร้าง')
+                "
+              />
+
+              <q-btn-dropdown
+                v-if="
+                  checkPermission($route)?.attrOwnership == 'OWNER' &&
+                  itemHistory.length > 0
+                "
+                dense
+                class="q-px-md"
+                color="blue"
+                :label="labelHistory"
+                @click="store.typeOrganizational = 'old'"
+                :outline="store.typeOrganizational === 'old' ? false : true"
+              >
+                <q-list>
+                  <q-item
+                    dense
+                    clickable
+                    v-close-popup
+                    v-for="(item, index) in itemHistory"
+                    :key="index"
+                    @click="onClickHistory(item.id, item.name)"
+                  >
+                    <q-item-section>
+                      <q-item-label
+                        >{{ item.orgRevisionCreatedAt }}
+                        {{ item.name }}</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </q-btn-group>
+
+            <q-btn
+              v-if="store.remark"
+              flat
+              round
+              color="info"
+              icon="info"
+              @click="modalRemark = true"
+            >
+              <q-tooltip>หมายเหตุ</q-tooltip>
+            </q-btn>
+
+            <q-space />
+            <q-btn
+              flat
+              dense
+              :color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
+              icon="mdi-file-tree"
+              @click="store.statusView = 'list'"
+            />
+            <q-separator inset vertical />
+            <q-btn
+              flat
+              dense
+              icon="mdi-sitemap"
+              :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
+              @click="store.statusView = 'tree'"
+            />
+            <q-separator inset vertical />
+            <q-btn
+              flat
+              dense
+              icon="mdi-account-group"
+              :color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
+              @click="store.statusView = 'org'"
+            />
+          </q-toolbar>
+        </q-card-section>
+        <q-separator />
+        <q-card-section style="padding: 0px">
+          <q-tab-panels v-model="store.statusView" animated>
+            <q-tab-panel name="list" style="padding: 0px">
+              <TreeView
+                v-if="store.statusView === 'list'"
+                v-model:historyId="historyId"
+                v-model:count="count"
+              />
+            </q-tab-panel>
+
+            <q-tab-panel name="tree" style="padding: 0px">
+              <StructureView v-if="store.statusView === 'tree'" />
+            </q-tab-panel>
+
+            <q-tab-panel name="org" style="padding: 0px">
+              <StructureOrgMain v-if="store.statusView === 'org'" />
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-card-section>
+      </q-card>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modalRemark">
+    <q-card style="width: 300px">
+      <DialogHeader tittle="หมายเหตุ" :close="() => (modalRemark = false)" />
+
+      <q-separator />
+      <q-card-section>
+        <div class="row">
+          <div class="col">
+            {{ store.remark }}
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/21_report/views/02_reportRegistry.vue

@@ -0,0 +1,442 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import axios from "axios";
+import genReportXLSX from "@/plugins/genreportxlsx";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+
+import LoadView from "@/components/LoadView.vue";
+
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+const loadingBtn = ref<boolean>(false);
+const year = ref<number>(new Date().getFullYear());
+const employeeClass = ref<string>("officer");
+const employeeClassOption = ref<OptionData[]>([
+  { id: "officer", name: "ข้าราชการ กทม. สามัญ" },
+  { id: "employee", name: "ลูกจ้างประจำ กทม." },
+]);
+
+const splitterModel = ref(14);
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+
+interface RangeAge {
+  min: number;
+  max: number;
+}
+
+const objMarkerLabel = computed(() => {
+  return { 39: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
+});
+
+const rangeAge = ref<RangeAge>({
+  min: 18,
+  max: 60,
+});
+
+const detailReport = ref<any>();
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+async function getReport() {
+  loadingBtn.value = true;
+  await http
+    .get(
+      config.API.reportOrgByType(
+        employeeClass.value == "officer" ? "officer" : "emp"
+      ) +
+        `?rootId=&year=${year.value}&ageMin=${rangeAge.value.min}&ageMax=${rangeAge.value.max}`
+    )
+    .then(async (res) => {
+      const data = res.data.result;
+      detailReport.value = data;
+      await fetchDocumentTemplate(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+}
+
+/**
+ * function เรียกไฟล์ PDF
+ * @param data  ข้อมูลบัญชีวันลา
+ */
+async function fetchDocumentTemplate(data: any) {
+  await axios
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
+      headers: {
+        accept: "application/pdf",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      const pdfData = usePDF(`${objectUrl}`);
+
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    });
+}
+
+onMounted(async () => {
+  showLoader();
+  Promise.all([getReport()])
+    .then(() => {
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายงานทะเบียนประวัติ
+  </div>
+
+  <div class="q-pa-sm q-gutter-sm">
+    <q-card flat bordered class="col-12">
+      <div class="row q-col-gutter-sm q-pa-sm">
+        <div class="row col-12">
+          <q-select
+            outlined
+            dense
+            v-model="employeeClass"
+            :options="employeeClassOption"
+            label="สภานภาพ"
+            emit-value
+            map-options
+            option-label="name"
+            option-value="id"
+            style="width: 230px"
+            @update:model-value="getReport"
+          >
+          </q-select>
+
+          <q-space />
+          <q-btn
+            :loading="loadingBtn"
+            flat
+            round
+            color="primary"
+            icon="download"
+            v-if="checkPermission($route)?.attrIsGet"
+          >
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="
+                    genReportXLSX(
+                      detailReport,
+                      `${
+                        employeeClass == 'officer'
+                          ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
+                          : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
+                      }`,
+                      '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="
+                    genReportXLSX(
+                      detailReport,
+                      `${
+                        employeeClass == 'officer'
+                          ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
+                          : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
+                      }`,
+                      'xlsx'
+                    )
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon color="green" name="mdi-file-excel"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .xlsx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+
+        <div class="row col-12">
+          <q-card bordered class="col-12 filter-card q-pa-sm">
+            <div class="row col-12 q-col-gutter-sm items-center">
+              <div class="col-md-4 col-xs-12">
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="year"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  @update:model-value="getReport"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      outlined
+                      :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                      :label="`${'ปีงบประมาณ'}`"
+                      bg-color="white"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-md-4 col-xs-12">
+                <div class="q-px-lg">
+                  <q-range
+                    v-model="rangeAge"
+                    :min="18"
+                    :max="60"
+                    label
+                    :marker-labels="objMarkerLabel"
+                    color="primary"
+                    @change="getReport"
+                  >
+                  </q-range>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+      </div>
+    </q-card>
+    <q-card flat bordered class="col-12">
+      <q-card-section :horizontal="$q.screen.gt.sm">
+        <!-- <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
+          <div class="col">
+            <q-input dense outlined v-model="filterTree" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </div>
+
+          <div class="bg-white tree-container q-pa-xs">
+            <q-tree
+              dense
+              :nodes="node"
+              node-key="orgTreeId"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filterTree.trim()"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  @click.stop="
+                    onSelectedNode(prop.node.orgTreeId, prop.node.orgLevel)
+                  "
+                  :active="nodeId === prop.node.orgTreeId"
+                  clickable
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light text-grey-8">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </div>
+        </q-card-section> -->
+
+        <q-separator :vertical="$q.screen.gt.xs" />
+
+        <q-card-section class="col-lg-12 col-md-12 col-xs-12 scroll">
+          <q-splitter
+            v-model="splitterModel"
+            horizontal
+            style="
+              height: 65vh;
+              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">
+                <LoadView v-if="loadingBtn" />
+                <VuePDF
+                  v-else
+                  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-section>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.q-item.hover-green:hover {
+  background-color: #d5f1ee57;
+  border-radius: 2px;
+}
+.q-item.hover-green {
+  padding: 10px;
+}
+
+.tree-container {
+  overflow: auto;
+  height: 60vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/21_report/views/03_reportDevelopment.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import axios from "axios";
+import genReportXLSX from "@/plugins/genreportxlsx";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+
+import LoadView from "@/components/LoadView.vue";
+
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+const loadingBtn = ref<boolean>(false);
+const year = ref<number>(new Date().getFullYear());
+const employeeClass = ref<string>("officer");
+const employeeClassOption = ref<OptionData[]>([
+  { id: "officer", name: "ข้าราชการ กทม. สามัญ" },
+  { id: "employee", name: "ลูกจ้างประจำ กทม." },
+]);
+
+const splitterModel = ref(14);
+const numOfPages = ref<number>(0);
+const page = ref<number>(1);
+const pdfSrc = ref<any>();
+
+interface RangeAge {
+  min: number;
+  max: number;
+}
+
+const objMarkerLabel = computed(() => {
+  return { 39: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
+});
+
+const rangeAge = ref<RangeAge>({
+  min: 18,
+  max: 60,
+});
+
+const detailReport = ref<any>();
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage() {
+  if (page.value < numOfPages.value) {
+    page.value++;
+  }
+}
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage() {
+  if (page.value !== 1) {
+    page.value--;
+  }
+}
+
+async function getReport() {
+  loadingBtn.value = true;
+  await http
+    .get(config.API.developmentReportMain())
+    .then(async (res) => {
+      const data = res.data.result;
+      detailReport.value = data;
+      await fetchDocumentTemplate(data);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+}
+
+/**
+ * function เรียกไฟล์ PDF
+ * @param data  ข้อมูลบัญชีวันลา
+ */
+async function fetchDocumentTemplate(data: any) {
+  await axios
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
+      headers: {
+        accept: "application/pdf",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      const objectUrl = URL.createObjectURL(blob);
+      const pdfData = usePDF(`${objectUrl}`);
+
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    });
+}
+
+onMounted(async () => {
+  showLoader();
+  Promise.all([getReport()])
+    .then(() => {
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายงานโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
+  </div>
+
+  <div class="q-pa-sm q-gutter-sm">
+    <q-card flat bordered class="col-12">
+      <div class="row q-col-gutter-sm q-pa-sm">
+        <div class="row col-12">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            @update:model-value="getReport"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+                bg-color="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-space />
+          <q-btn
+            :loading="loadingBtn"
+            flat
+            round
+            color="primary"
+            icon="download"
+            v-if="checkPermission($route)?.attrIsGet"
+          >
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item
+                  clickable
+                  v-close-popup
+                  @click="
+                    genReportXLSX(
+                      detailReport,
+                      `รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด`,
+                      '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="
+                    genReportXLSX(
+                      detailReport,
+                      `รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด`,
+                      'xlsx'
+                    )
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon color="green" name="mdi-file-excel"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .xlsx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </div>
+    </q-card>
+    <q-card flat bordered class="col-12">
+      <q-card-section :horizontal="$q.screen.gt.sm">
+        <q-separator :vertical="$q.screen.gt.xs" />
+
+        <q-card-section class="col-lg-12 col-md-12 col-xs-12 scroll">
+          <q-splitter
+            v-model="splitterModel"
+            horizontal
+            style="
+              height: 65vh;
+              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">
+                <LoadView v-if="loadingBtn" />
+                <VuePDF
+                  v-else
+                  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-section>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scope>
+.q-item.hover-green:hover {
+  background-color: #d5f1ee57;
+  border-radius: 2px;
+}
+.q-item.hover-green {
+  padding: 10px;
+}
+
+.tree-container {
+  overflow: auto;
+  height: 60vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>