บรรจุ แต่งตั้ง ย้าย โอน ==> ปรับ โครงสร้าง

src/components/Dialogs/DialogOrgSelectEmployee.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, watch, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { ref, watch, reactive } from "vue";
-import type { QTableProps } from "quasar";
-import { useRoute } from "vue-router";
 
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useStructureTree } from "@/stores/structureTree";
 
+import type { QTableProps } from "quasar";
 import type {
   OrgTree,
   DataTree,
@@ -20,6 +20,8 @@ import type {
   TreeMain,
 } from "@/interface/request/orgSelect/org";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const props = defineProps({
   dataRows: {
     type: Object,
@@ -29,6 +31,8 @@ const props = defineProps({
 });
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const storeTree = useStructureTree();
+const { fetchStructureTree } = useStructureTree();
 const {
   dialogConfirm,
   showLoader,
@@ -42,7 +46,7 @@ const route = useRoute();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const title = defineModel<string>("title", { required: true });
-const type = defineModel<any>("type", { required: true });
+const type = defineModel<string>("type", { required: true });
 const posType = defineModel<any>("posType", { required: true });
 const posLevel = defineModel<any>("posLevel", { required: true });
 const position = defineModel<any>("position", { required: true });
@@ -217,8 +221,7 @@ function close() {
   filter.value = "";
   isAll.value = false;
   isBlank.value = false;
-  type.value = null;
-  nodes.value = [];
+  type.value = "";
   expanded.value = [];
   nodeLevel.value = 0;
   nodeId.value = "";
@@ -321,44 +324,13 @@ function updateSelected(data: DataTree) {
 }
 
 /** ดึงข้อมูล active */
-async function getActive() {
-  showLoader();
-  await http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-
-      formActive.activeId = data.activeId;
-      formActive.activeName = data.activeName;
-      formActive.draftId = data.draftId;
-      formActive.draftName = data.draftName;
-      formActive.orgPublishDate = data.orgPublishDate;
-      formActive.isPublic = data.isPublic;
-
-      getTreeData(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      hideLoader();
-    });
-}
-
-/** ดึงข้อมูล หน่วยงาน */
-async function getTreeData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      nodes.value = data;
-      filterItemsTaps(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function fetchTree() {
+  const dataTree = await fetchStructureTree(route.meta.Key as string);
+  if (dataTree) {
+    formActive.activeId = storeTree.activeId;
+    nodes.value = dataTree;
+    filterItemsTaps(dataTree);
+  }
 }
 
 function filterItemsTaps(data: TreeMain[]) {
@@ -429,7 +401,6 @@ watch(
   () => modal.value,
   async (n) => {
     if (n == true) {
-      getActive();
       fetchPositionUes();
       if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
         await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
@@ -487,8 +458,6 @@ function onSubmit() {
   const dataPosMaster = posMasterMain.value?.find(
     (e: any) => e.id === positionId.value
   );
-
-  console.log(dataPosMaster);
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
   } else {
@@ -514,6 +483,10 @@ function onSubmit() {
     });
   }
 }
+
+onMounted(() => {
+  fetchTree();
+});
 </script>
 <template>
   <q-dialog v-model="modal" persistent full-width>