UI รายงานทะเบียนประวัติ

src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue

@@ -13,7 +13,7 @@ const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError, showLoader, hideLoader, dialogMessageNotify } = mixin;
 
 const profile_id = ref<string>("");
 const birthdate = ref<string>("");
@@ -75,6 +75,8 @@ async function fetchData() {
           scoreSum.value = data.scoreResult.scoreSum;
           examResultinscore.value = data.scoreResult.examResult;
         }
+      } else {
+        dialogMessageNotify($q, "แข่งขัน ไม่พบข้อมูล");
       }
     })
     .catch((e) => {

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useRoute } from "vue-router";
+import { useStructureTree } from "@/stores/structureTree";
+
+import { useReportStore } from "@/modules/21_report/store";
+
+import type {
+  DataStructureTree,
+  DataNodeData,
+} from "@/modules/21_report/interface/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const store = useReportStore();
+const route = useRoute();
+const { fetchStructureTree } = useStructureTree();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const orgName = defineModel<string>("name", { required: true });
+
+const filter = ref<string>("");
+
+const node = ref<DataStructureTree[]>([]);
+const expanded = ref<string[]>([]);
+const nodeData = reactive<DataNodeData>({
+  name: "",
+  nodeId: null,
+  node: null,
+});
+
+/** ปิด dialog */
+function close() {
+  modal.value = false;
+}
+
+async function fetchTree() {
+  const data = await fetchStructureTree(route.meta.Key as string, true);
+  if (data) {
+    node.value = data;
+    store.formFilter.node = nodeData.node;
+    store.formFilter.nodeId = nodeData.nodeId;
+  }
+}
+
+/** ค้นหาข้อมูลรายชื่อข้อมูลทะเบียนประวัติตามหน่วยงาน/ส่วนราชการ*/
+function sendNode() {
+  nodeData.node = store.formFilter.node;
+  nodeData.nodeId = store.formFilter.nodeId;
+  orgName.value = nodeData.name;
+  modal.value = false;
+}
+
+/**
+ * ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
+ * @param data  ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
+ * เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
+ */
+function updateSelectedTreeMain(data: DataStructureTree) {
+  if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
+    store.formFilter.node = null;
+    store.formFilter.nodeId = null;
+    nodeData.name = "";
+  } else {
+    store.formFilter.node = data.orgLevel;
+    store.formFilter.nodeId = data.orgTreeId;
+    nodeData.name = data.orgName;
+  }
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await fetchTree();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 850px; max-width: 80vw">
+      <DialogHeader tittle="เลือกหน่วยงาน/ส่วนราชการ" :close="close" />
+
+      <q-separator />
+
+      <q-card-section class="q-pa-sm">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input dense outlined v-model="filter" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filter = ''"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <q-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filter.trim()"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="nodeData.nodeId"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  @click.stop="updateSelectedTreeMain(prop.node)"
+                  :active="store.formFilter.nodeId === prop.node.orgTreeId"
+                  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>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn label="ค้นหา" color="secondary" @click="sendNode">
+          <q-tooltip>ค้นหา</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

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

@@ -84,6 +84,112 @@ interface DataOption {
   name: string;
 }
 
+interface RangeAge {
+  min: number;
+  max: number;
+}
+
+interface DataStructureTree {
+  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: DataStructureTree[];
+  orgRootCode: string;
+  orgRootShortName: string;
+}
+
+interface DataNodeData {
+  name: string;
+  nodeId: string | null | undefined;
+  node: string | null | undefined | number;
+}
+
+interface FormFilter {
+  page: number;
+  pageSize: number;
+  keyword: string;
+  type: string;
+  searchType?: string;
+  posType: string;
+  posLevel: string;
+  retireYear: string | null;
+  rangeYear: { min: number; max: number };
+  isShowRetire: boolean | null;
+  isProbation: boolean | null;
+  isAll?: boolean;
+  nodeId?: string | null;
+  node?: string | null | number;
+  retireType?: null | string;
+}
+
+interface PosType {
+  id: string;
+  posTypeName: string;
+  posTypeRank: number;
+  posLevels: PosLevel[];
+  createdAt: Date | null;
+  lastUpdatedAt: Date | null;
+  lastUpdateFullName: string;
+}
+
+interface PosLevel {
+  id: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posLevelAuthority: string;
+  createdAt: Date | null;
+  lastUpdatedAt: Date | null;
+  lastUpdateFullName: string;
+}
+
+interface OptionExecutive {
+  id: string;
+  posExecutiveName: string;
+}
+
+interface ResOptionPerson {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  name: string;
+}
+
+interface DataEducationLevel {
+  createdAt: string;
+  createdFullName: string;
+  id: string;
+  lastUpdatedAt: string;
+  name: string;
+  rank: number;
+}
 export type {
   ListDataText,
   DataSurvey,
@@ -93,4 +199,13 @@ export type {
   ProbationReportType,
   FileType,
   DataOption,
+  RangeAge,
+  DataStructureTree,
+  DataNodeData,
+  FormFilter,
+  PosType,
+  PosLevel,
+  OptionExecutive,
+  ResOptionPerson,
+  DataEducationLevel
 };

src/modules/21_report/store.ts

@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+import { ref, reactive } from "vue";
+
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type {
+  DataType,
+  DataLevel,
+} from "@/modules/04_registryPerson/interface/response/Main";
+import type { FormFilter } from "@/modules/21_report/interface/Main";
+
+export const useReportStore = defineStore("reportStore", () => {
+  const formFilter = reactive<FormFilter>({
+    page: 1,
+    pageSize: 12,
+    keyword: "",
+    type: "officer",
+    posType: "",
+    posLevel: "",
+    retireYear: "",
+    rangeYear: { min: 0, max: 60 },
+    isShowRetire: false,
+    isProbation: false,
+    isAll: true,
+    nodeId: null,
+    node: null,
+    searchType: "fullName",
+    retireType: null,
+  });
+
+  return {
+    formFilter,
+  };
+});