UI บรรจุแต่งตั้ง รายชื่อผู้สอบผ่าน popup เลือกหน่วยงาน และ filter คนหน้ารายชื่อตามสถานภาพ

src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -15,6 +15,8 @@ import type {
   PositionNo,
   Positions,
   TreeMain,
+  FormPosType,
+  FormPosLevel,
 } from "@/modules/05_placement/interface/response/SelectOrg";
 import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
 
@@ -67,14 +69,18 @@ const positionUse = ref<string[]>([]);
 const positionNo = ref<DataPositionNo[]>([]);
 const positionId = ref<string>("");
 const seletcId = ref<string>("");
+const posType = ref<FormPosType | null>(null);
+const posLevel = ref<string>("");
 const selectedPos = ref<any[]>([]);
 const datePos = ref<Date>(new Date());
 const posMasterMain = ref<any[]>([]);
 const orgRevisionId = ref<string>("");
+const optionPosType = ref<FormPosType[]>([]);
+const optionPosLevel = ref<FormPosLevel[]>([]);
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchStructure() {
-  const dataTree = await fetchStructureTree(route.meta.Key as string,false);
+  const dataTree = await fetchStructureTree(route.meta.Key as string, false);
   if (dataTree) {
     orgRevisionId.value = storeTree.activeId;
     nodes.value = dataTree;
@@ -110,6 +116,8 @@ function updateSelected(data: TreeMain) {
  */
 const isAll = ref<boolean>(false);
 const isBlank = ref<boolean>(true);
+const isPosition = ref<boolean>(true);
+const isPositionOld = ref<boolean>(false);
 async function fetchDataTable(id: string, level: number = 0) {
   showLoader();
   const body = {
@@ -125,6 +133,11 @@ async function fetchDataTable(id: string, level: number = 0) {
       : "",
     isAll: isAll.value,
     isBlank: isBlank.value,
+    isPosition: isPosition.value,
+    isPositionOld: isPositionOld.value,
+
+    positionType: posType.value ? posType.value.posTypeName : null,
+    positionLevel: posLevel.value ? posLevel.value : null,
   };
 
   await http
@@ -158,6 +171,7 @@ async function fetchDataTable(id: string, level: number = 0) {
     })
     .catch((err) => {
       messageError($q, err);
+      hideLoader();
     })
     .finally(() => {
       setTimeout(() => {
@@ -252,6 +266,9 @@ function closePopup() {
 function clearData() {
   nodeId.value = "";
   expanded.value = [];
+  posType.value = null;
+  posLevel.value = "";
+  isPositionOld.value = false;
 }
 
 /** callback function เมื่อมีการเปิด popup*/
@@ -294,6 +311,27 @@ function filterItemsTaps(data: TreeMain[]) {
   return orgTreeIds;
 }
 
+async function getOrgPosType() {
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      const data = await res.data.result;
+      optionPosType.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onPosType() {
+  posLevel.value = "";
+  if (posType.value) {
+    optionPosLevel.value = posType.value.posLevels;
+  }
+  fetchDataTable(nodeId.value, nodeLevel.value);
+}
+
 watch(
   () => isAll.value,
   (value, oldVal) => {
@@ -312,6 +350,16 @@ watch(
   }
 );
 
+watch(
+  () => isPositionOld.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      fetchDataTable(nodeId.value, nodeLevel.value);
+      getOrgPosType();
+    }
+  }
+);
+
 onMounted(() => {
   fetchStructure();
 });
@@ -414,6 +462,16 @@ onMounted(() => {
                   v-model:seletcId="seletcId"
                   v-model:is-all="isAll"
                   v-model:is-blank="isBlank"
+                  v-model:is-position="isPosition"
+                  v-model:is-position-old="isPositionOld"
+                  v-model:pos-type="posType as FormPosType"
+                  v-model:pos-level="posLevel"
+                  v-model:option-pos-type="optionPosType"
+                  v-model:option-pos-level="optionPosLevel"
+                  :fetch-data-table="fetchDataTable"
+                  :on-pos-type="onPosType"
+                  :node-id="nodeId"
+                  :node-level="nodeLevel"
                 />
               </q-tab-panel>
             </q-tab-panels>