แก้พัฒนา

src/modules/07_insignia/interface/index/Main.ts

@@ -174,6 +174,37 @@ interface DataManageList {
   statusMark: boolean;
 }
 
+interface ResOrg {
+  labelName: string;
+  orgCode: string;
+  orgLevel: number;
+  orgName: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeFax: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeOrder: number;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeRank: string;
+  orgTreeRankSub: string;
+  orgTreeShortName: string;
+  responsibility: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+  children: ResOrg[];
+}
+
 export type {
   DataOption,
   OptionData,
@@ -194,4 +225,5 @@ export type {
   DataProfileOtherSystem,
   Pagination,
   DataManageList,
+  ResOrg
 };

src/modules/15_development/views/MainPage.vue

@@ -168,7 +168,7 @@ function fetchListProjectNew() {
 function onDownload() {
   showLoader();
   http
-    .get(config.API.developmentReportMain())
+    .get(config.API.developmentReportMain() + `?rootId=${formQuery.nodeId}`)
     .then((res) => {
       const dataList = res.data.result;
       genReportXLSX(
@@ -436,6 +436,7 @@ onMounted(() => {
           <q-btn
             v-if="checkPermission($route)?.attrIsGet"
             flat
+            :disable="!formQuery.nodeId"
             round
             dense
             icon="download"

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

@@ -4,27 +4,32 @@ import { useQuasar } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import { useRoute } from "vue-router";
 
 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 type {
+  OptionData,
+  ResOrg,
+} from "@/modules/07_insignia/interface/index/Main";
 
 import LoadView from "@/components/LoadView.vue";
 
 const $q = useQuasar();
+const route = useRoute();
+
 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 typeReport = ref<string>("main");
+const organization = ref<string>("");
+const organizationOpsMain = ref<OptionData[]>([]);
+const organizationOps = ref<OptionData[]>([]);
+
+const typeReport = ref<string>("");
 const optionReport = ref<OptionData[]>([
   {
     id: "main",
@@ -70,23 +75,33 @@ function backPage() {
 }
 
 async function getReport() {
-  loadingBtn.value = true;
+  if (typeReport.value !== "main" && typeReport.value !== "report3") {
-  pdfSrc.value = undefined;
+    organization.value = "";
-  await http
+  }
-    .get(config.API.developmentReport() + `${typeReport.value}`)
+  if (
-    .then(async (res) => {
+    (typeReport.value &&
-      const data = res.data.result;
+      typeReport.value !== "main" &&
-      detailReport.value = data;
+      typeReport.value !== "report3") ||
-      await fetchDocumentTemplate(data);
+    (typeReport.value && organization.value)
-    })
+  ) {
-    .catch((e) => {
+    loadingBtn.value = true;
-      messageError($q, e);
+    pdfSrc.value = undefined;
-    })
+    await http
-    .finally(() => {
+      .get(config.API.developmentReport() + `${typeReport.value}${typeReport.value == 'main' || typeReport.value == 'report3' ? `?rootId=${organization.value}`:``}`)
-      setTimeout(() => {
+      .then(async (res) => {
-        loadingBtn.value = false;
+        const data = res.data.result;
-      }, 500);
+        detailReport.value = data;
-    });
+        await fetchDocumentTemplate(data);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          loadingBtn.value = false;
+        }, 500);
+      });
+  }
 }
 
 /**
@@ -117,9 +132,62 @@ async function fetchDocumentTemplate(data: any) {
     });
 }
 
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    organizationOps.value = organizationOpsMain.value.filter(
+      (v: OptionData) => v.name.toLowerCase().indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * function fetch ข้อมูลโครงสร้างปัจจุบัน
+ */
+function getActiveId() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      getOrg(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลหน่วยงาน
+ * @param id โครงสร้างปัจจุบัน
+ */
+async function getOrg(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
+    .then(async (res) => {
+      const data = await res.data.result.map((item: ResOrg) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
+      }));
+      organizationOpsMain.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   showLoader();
-  Promise.all([getReport()])
+  Promise.all([getReport(), getActiveId()])
     .then(() => {
       hideLoader();
     })
@@ -164,6 +232,11 @@ onMounted(async () => {
 
           <q-space />
           <q-btn
+            :disable="
+              !typeReport ||
+              ((typeReport == 'main' || typeReport == 'report3') &&
+                !organization)
+            "
             :loading="loadingBtn"
             flat
             round
@@ -210,41 +283,77 @@ onMounted(async () => {
           </q-btn>
         </div>
 
-        <div class="row col-12">
+        <div v-if="typeReport" class="row col-12">
           <q-card bordered class="col-12 filter-card q-pa-sm">
-            <div class="row col-md-3 col-xs-6">
+            <div class="row q-col-gutter-sm">
-              <datepicker
+              <div class="col-md-2 col-xs-6">
-                menu-class-name="modalfix"
+                <datepicker
-                v-model="year"
+                  menu-class-name="modalfix"
-                :locale="'th'"
+                  v-model="year"
-                autoApply
+                  :locale="'th'"
-                year-picker
+                  autoApply
-                :enableTimePicker="false"
+                  year-picker
-                @update:model-value="getReport"
+                  :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-3 col-xs-6"
+                v-if="typeReport == 'main' || typeReport == 'report3'"
               >
-                <template #year="{ year }">{{ year + 543 }}</template>
+                <q-select
-                <template #year-overlay-value="{ value }">{{
+                  class="bg-white"
-                  parseInt(value + 543)
+                  style="min-width: 100px"
-                }}</template>
+                  dense
-                <template #trigger>
+                  hide-selected
-                  <q-input
+                  fill-input
-                    dense
+                  hide-bottom-space
-                    outlined
+                  outlined
-                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                  option-label="name"
-                    :label="`${'ปีงบประมาณ'}`"
+                  option-value="id"
-                    bg-color="white"
+                  emit-value
-                  >
+                  map-options
-                    <template v-slot:prepend>
+                  v-model="organization"
-                      <q-icon
+                  :options="organizationOps"
-                        name="event"
+                  label="หน่วยงาน"
-                        class="cursor-pointer"
+                  use-input
-                        style="color: var(--q-primary)"
+                  @update:model-value="getReport"
-                      >
+                  @filter="(inputValue: string,
-                      </q-icon>
+            
-                    </template>
+            doneFn: Function) => filterSelector(inputValue, doneFn)"
-                  </q-input>
+                >
-                </template>
+                  <template v-slot:no-option>
-              </datepicker>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template></q-select
+                >
+              </div>
             </div>
           </q-card>
         </div>