From d9af8f551459faa0b6bf7112028aac63a5bf820a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 16 Sep 2024 10:42:57 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87=20=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2=20?=
 =?UTF-8?q?=E0=B9=82=E0=B8=AD=E0=B8=99=20=3D=3D>=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/DialogOrgSelect.vue    |   63 +-
 .../Dialogs/DialogOrgSelectEmployee.vue       |   71 +-
 .../PersonalList/DialogSelectOrg.vue          |   81 +-
 .../components/Receive/receiveMain.vue        |    3 +-
 .../components/Receive/receiveModal.vue       | 1053 -----------------
 5 files changed, 60 insertions(+), 1211 deletions(-)
 delete mode 100644 src/modules/05_placement/components/Receive/receiveModal.vue

diff --git a/src/components/Dialogs/DialogOrgSelect.vue b/src/components/Dialogs/DialogOrgSelect.vue
index 668e78ccc..4f66b1488 100644
--- a/src/components/Dialogs/DialogOrgSelect.vue
+++ b/src/components/Dialogs/DialogOrgSelect.vue
@@ -1,11 +1,12 @@
 <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 { 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 {
@@ -19,6 +20,7 @@ import type {
   TreeMain,
 } from "@/interface/request/orgSelect/org";
 
+import DialogHeader from "@/components/DialogHeader.vue";
 const props = defineProps({
   dataRows: {
     type: Object,
@@ -28,6 +30,8 @@ const props = defineProps({
 });
 const $q = useQuasar();
 const route = useRoute();
+const storeTree = useStructureTree();
+const { fetchStructureTree } = useStructureTree();
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -232,13 +236,10 @@ const visibleColumns = ref<string[]>([
 /** ปิด dialog */
 function close() {
   modal.value = false;
-
   type.value = null;
   filter.value = "";
   isAll.value = false;
   isBlank.value = false;
-
-  nodes.value = [];
   expanded.value = [];
   nodeLevel.value = 0;
   nodeId.value = "";
@@ -341,44 +342,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, true);
+  if (dataTree) {
+    formActive.activeId = storeTree.activeId;
+    nodes.value = dataTree;
+    filterItemsTaps(dataTree);
+  }
 }
 
 function filterItemsTaps(data: TreeMain[]) {
@@ -449,7 +419,6 @@ watch(
   () => modal.value,
   async (n) => {
     if (n == true) {
-      getActive();
       fetchPositionUes();
 
       if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
@@ -542,6 +511,10 @@ function onSubmit() {
     });
   }
 }
+
+onMounted(() => {
+  fetchTree();
+});
 </script>
 <template>
   <q-dialog v-model="modal" persistent full-width>
diff --git a/src/components/Dialogs/DialogOrgSelectEmployee.vue b/src/components/Dialogs/DialogOrgSelectEmployee.vue
index 6829cf5fa..8440c9599 100644
--- a/src/components/Dialogs/DialogOrgSelectEmployee.vue
+++ b/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>
diff --git a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
index 5439e276c..ee113bdc8 100644
--- a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSelectOrgStore } from "@/modules/05_placement/stores/storeSelect";
+import { useStructureTree } from "@/stores/structureTree";
 
 /** importType*/
 import type {
@@ -17,15 +22,10 @@ import type { DataPositionNo } from "@/modules/05_placement/interface/index/Sele
 import Header from "@/components/DialogHeader.vue";
 import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSelectOrgStore } from "@/modules/05_placement/stores/storeSelect";
-import { useRoute } from "vue-router";
-
 const route = useRoute();
-
-/** use*/
 const $q = useQuasar();
+const storeTree = useStructureTree();
+const { fetchStructureTree } = useStructureTree();
 const store = useSelectOrgStore();
 const {
   success,
@@ -73,45 +73,13 @@ const posMasterMain = ref<any[]>([]);
 const orgRevisionId = ref<string>("");
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
-async function fetchOrganizationActive() {
-  showLoader();
-  await http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        orgRevisionId.value = data.activeId;
-        fetchDataTree(data.activeId);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
-/**
- * function fetch ข้อมูลของ Tree
- * @param id id โครงสร้าง
- */
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        nodes.value = data;
-        filterItemsTaps(data);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
+async function fetchStructure() {
+  const dataTree = await fetchStructureTree(route.meta.Key as string);
+  if (dataTree) {
+    orgRevisionId.value = storeTree.activeId;
+    nodes.value = dataTree;
+    filterItemsTaps(dataTree);
+  }
 }
 
 /**
@@ -291,7 +259,6 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value) {
-      await fetchOrganizationActive();
       await fetchPositionUes();
 
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
@@ -327,20 +294,6 @@ function filterItemsTaps(data: TreeMain[]) {
   return orgTreeIds;
 }
 
-function filterNodeFn(data: any, id: string) {
-  for (const child of data) {
-    if (child.orgTreeId === id) {
-      return child;
-    } else if (child.children) {
-      const result: any = filterNodeFn(child.children, id);
-      if (result !== null) {
-        return result;
-      }
-    }
-  }
-  return null;
-}
-
 watch(
   () => isAll.value,
   (value, oldVal) => {
@@ -358,6 +311,10 @@ watch(
     }
   }
 );
+
+onMounted(() => {
+  fetchStructure();
+});
 </script>
 
 <template>
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index b1df76ae6..cf7a39a55 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -11,7 +11,6 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 
 import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
-// import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -189,7 +188,7 @@ const SaveData = async () => {
 const fecthlistRecevice = async () => {
   showLoader();
   await http
-    .get(config.API.receiveData()+`?keyword=`)
+    .get(config.API.receiveData() + `?keyword=`)
     .then((res: any) => {
       const response = res.data.result;
 
diff --git a/src/modules/05_placement/components/Receive/receiveModal.vue b/src/modules/05_placement/components/Receive/receiveModal.vue
deleted file mode 100644
index d0e9db52c..000000000
--- a/src/modules/05_placement/components/Receive/receiveModal.vue
+++ /dev/null
@@ -1,1053 +0,0 @@
-<script setup lang="ts">
-import { useQuasar, QForm } from "quasar";
-import { onMounted, reactive, ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
-
-import CardPosition from "@/modules/05_placement/components/PersonalList/CardPosition.vue";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type {
-  DataActive,
-  OrgTree,
-  DataTree,
-  SumPosition,
-  PositionMaim,
-  PositionNo,
-  Positions,
-  DataPositionNo,
-  TreeMain,
-} from "@/modules/05_placement/interface/response/Receive";
-import { useRoute } from "vue-router";
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  date2Thai,
-  hideLoader,
-  messageError,
-  showLoader,
-  success,
-  dialogConfirm,
-} = mixin; //ฟังก์ชันกลางที่เรียกใช้
-
-const nodeLevel = ref<number>(0);
-const route = useRoute();
-
-const isAll = ref<boolean>(false);
-const isBlank = ref<boolean>(false);
-const positionNo = ref<DataPositionNo[]>();
-const posMasterMain = ref<any>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
-const level = ref<number>();
-const id = ref<string>("");
-const search = ref<string>("");
-const selected = ref<string>("");
-const personal = ref<any>();
-const treeData = ref<Array<any>>([]);
-const expanded = ref<string[]>([]);
-const filterRef = ref<any>(null);
-const dataRespone = ref<any>();
-const selectedFile = ref<string>("");
-const checkValidate = ref<boolean>(false);
-const myFormPosition = ref<any>();
-const editDataStatus = ref<boolean>(false);
-const placementPosition = ref<any>([]);
-const filter = ref<string>("");
-const shortName = ref<string>("");
-const nodes = ref<Array<OrgTree>>([]);
-const lazy = ref(nodes);
-const treeId = ref<string>();
-const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
-const nodeId = ref<string>(""); // id ของ Tree
-const itemTaps = ref<string[]>();
-const selectedPos = ref<any[]>([]);
-const positionId = ref<string>("");
-const datePos = ref<Date>(new Date());
-const seletcId = ref<string>("");
-const sumPosition = reactive({
-  total: 0,
-  use: 0,
-  vacant: 0,
-  totalRoot: 0,
-  useRoot: 0,
-  vacantRoot: 0,
-});
-
-// ตำแหน่งเลขที่
-const posNoOptions = ref<Object[]>([{ label: "", value: "" }]);
-
-// ตำแหน่ง
-const positionOptions = ref<Object[]>([{ label: "", value: "" }]);
-
-// ด้าน/สาขา
-const positionPathSideOptions = ref<Object[]>([{ label: "", value: "" }]);
-
-// ประเภทตำแหน่ง
-const positionTypeOptions = ref<Object[]>([{ label: "", value: "" }]);
-
-// สายงาน
-const positionLineOptions = ref<Object[]>([{ label: "", value: "" }]);
-
-// ระดับ
-const positionLevelOptions = ref<Object[]>([{ label: "", value: "" }]);
-
-const props = defineProps({
-  personalId: String,
-  dataRows: {
-    type: Object,
-    require: true,
-  },
-  modal: Boolean,
-  close: {
-    type: Function,
-    default: () => console.log("close modal"),
-  },
-  personal: Object,
-});
-// Set form field
-let dataForm = reactive({
-  personalId: "",
-  containDate: new Date(),
-  posNoId: "",
-  positionId: "",
-  positionLevelId: "",
-  positionLineId: "",
-  positionPathSideId: "",
-  positionTypeId: "",
-});
-
-// const fetchPublishFile = async () => {
-//   await http
-//     .get(config.API.getPublishFileHistory)
-//     .then((res) => {
-//       let data = res.data.result;
-//       selectedFile.value = data[0].fileName;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(async () => {
-//       hideLoader();
-//     });
-// };
-
-// โหลดข้อมูลโครงสร้างจาก json
-// const loadTreeData = async () => {
-//   expanded.value = [];
-//   await http
-//     .get(`${config.s3ClusterUrl}${selectedFile.value}`)
-//     .then((res: any) => {
-//       treeData.value = res.data;
-//       dataRespone.value = res.data;
-//       // Filter objects with "name" null
-//       const filteredData = res.data.filter(filterByPersonIdNull);
-//       treeData.value = filteredData;
-//     })
-//     .catch((e: any) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-function filterByPersonIdNull(obj: any) {
-  if (obj.name === null && obj.isCondition != true) {
-    return true;
-  }
-  if (obj.children && obj.children.length > 0) {
-    obj.children = obj.children.filter(filterByPersonIdNull);
-    return obj.children.length > 0;
-  }
-  return false;
-}
-
-// โหลด position
-// const fetchplacementPosition = async () => {
-//   await http
-//     .get(config.API.receiveDataPosition())
-//     .then((res: any) => {
-//       placementPosition.value = res.data.result;
-//     })
-//     .catch((e: any) => {
-//       messageError($q, e);
-//     });
-// };
-
-const myFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-  return (
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1)
-  );
-};
-
-const validateData = async () => {
-  checkValidate.value = true;
-  await myFormPosition.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
-};
-
-const saveAppoint = async () => {
-  myFormPosition.value.validate().then(async (result: boolean) => {
-    if (props.personalId !== undefined) {
-      id.value = props.personalId.toString();
-    }
-    if (result) {
-      const dataAppoint = await {
-        recruitDate: dataForm.containDate,
-        posNoId: dataForm.posNoId,
-        positionId: dataForm.positionId,
-        positionLevelId: dataForm.positionLevelId,
-        positionLineId: dataForm.positionLineId,
-        positionPathSideId: dataForm.positionPathSideId,
-        positionTypeId: dataForm.positionTypeId,
-      };
-      showLoader();
-      await http
-        .put(config.API.receivePosition(id.value), dataAppoint)
-        .then((res) => {
-          success($q, "บันทึกสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await closeAndClear();
-          // await fetchPublishFile();
-          // await loadTreeData();
-          // await fetchplacementPosition();
-          hideLoader();
-        });
-    }
-  });
-};
-
-// const closeModal = () => {
-//   if (editDataStatus.value == true) {
-//     dialogConfirm(
-//       $q,
-//       async () => {
-//         editDataStatus.value = false;
-//         await closeAndClear();
-//       },
-//       `ข้อมูลมีการแก้ไข`,
-//       `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`
-//     );
-//   } else {
-//     closeAndClear();
-//   }
-// };
-
-/** function closePopup*/
-async function closeModal() {
-  await props.close();
-  clearData();
-}
-
-/** function clearData*/
-function clearData() {
-  nodeId.value = "";
-  expanded.value = [];
-}
-
-const closeAndClear = async () => {
-  await props.close();
-  editDataStatus.value = false;
-  selected.value = "";
-  dataForm.personalId = "";
-  dataForm.containDate = new Date();
-  dataForm.posNoId = "";
-  dataForm.positionId = "";
-  dataForm.positionLevelId = "";
-  dataForm.positionLineId = "";
-  dataForm.positionPathSideId = "";
-  dataForm.positionTypeId = "";
-};
-
-const selectedPosition = async (data: any) => {
-  if (data.name == null && selected.value != data.keyId) {
-    editDataStatus.value = true;
-    selected.value = data.keyId;
-
-    // posNo Options
-    posNoOptions.value = [
-      {
-        label: data.positionNum,
-        value: data.positionNumId,
-      },
-    ];
-    dataForm.posNoId = data.positionNumId;
-
-    // position Options
-    positionOptions.value = [
-      {
-        label: data.positionName,
-        value: data.positionNameId,
-      },
-    ];
-    dataForm.positionId = data.positionNameId;
-
-    // positionPathSide Options
-    let positionPathSideArr: any = [];
-    if (data.positionSideNameObj && data.positionSideNameObj != null) {
-      data.positionSideNameObj.map((x: any) => {
-        positionPathSideArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionPathSideOptions.value = positionPathSideArr;
-      dataForm.positionPathSideId =
-        positionPathSideArr.length > 1 || positionPathSideArr.length == 0
-          ? ""
-          : positionPathSideArr[0].value;
-    }
-
-    // positionType Options
-    positionTypeOptions.value = [
-      {
-        label: data.positionType,
-        value: data.positionTypeId,
-      },
-    ];
-    dataForm.positionTypeId = data.positionTypeId;
-
-    // positionLine Options
-    positionLineOptions.value = [
-      {
-        label: data.positionLine,
-        value: data.positionLineId,
-      },
-    ];
-    dataForm.positionLineId = data.positionLineId;
-
-    // positionLevel Options
-    let positionLevelsArr: any = [];
-    if (data.positionLevelObj != null) {
-      data.positionLevelObj.map((x: any) => {
-        positionLevelsArr.push({
-          label: x.Name,
-          value: x.Id,
-        });
-      });
-      positionLevelOptions.value = positionLevelsArr;
-      dataForm.positionLevelId =
-        positionLevelsArr.length > 1 || positionLevelsArr.length == 0
-          ? ""
-          : positionLevelsArr[0].value;
-      dataForm.positionLevelId = data.positionLevelObj[0].Id;
-    }
-  } else if (selected.value == data.keyId) {
-    selected.value = "";
-    dataForm.posNoId = "";
-    dataForm.positionId = "";
-    dataForm.positionLevelId = "";
-    dataForm.positionLineId = "";
-    dataForm.positionPathSideId = "";
-    dataForm.positionTypeId = "";
-  }
-};
-
-const checkPosition = (val: string) => {
-  const num = placementPosition.value.findIndex((e: string) => e === val);
-  return num;
-};
-
-watch(props, () => {
-  expanded.value = [];
-  const dataPersonal = props.personal;
-
-  if (dataPersonal) {
-    dataPersonal.map((data: any) => {
-      personal.value = data;
-    });
-  }
-
-  if (personal.value) {
-    let findData: any = null;
-    dataRespone.value.map((x: any) => {
-      findData = findByPerson(x);
-
-      if (findData != null) {
-        selectedPosition(findData);
-        for (let i = 3; i <= findData.keyId.length; i += 2) {
-          expanded.value.push(findData.keyId.slice(0, i));
-        }
-      }
-    });
-  }
-});
-
-function findByPerson(element: any): any {
-  if (
-    element.positionNumId &&
-    element.positionLineId === personal.value.positionLineId &&
-    element.positionTypeId === personal.value.positionTypeId &&
-    element.positionNumId === personal.value.posNoId &&
-    (element.positionLevelObj === null ||
-      element.positionLevelObj[0].Id === personal.value.positionLevelId)
-  ) {
-    return element;
-  } else if (element.children) {
-    var i;
-    var result = null;
-    for (i = 0; result == null && i < element.children.length; i++) {
-      result = findByPerson(element.children[i]);
-    }
-    return result;
-  }
-  return null;
-}
-const activeId = ref<string>();
-const draftId = ref<string>();
-
-const dataActive = ref<DataActive>();
-const isPublic = ref<boolean>(false);
-const orgPublishDate = ref<Date | null>(null);
-/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
-
-async function fetchOrganizationActive() {
-  showLoader();
-  await http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      activeId.value = data.activeId;
-      draftId.value = data.draftId;
-      dataActive.value = data;
-      isPublic.value = data.isPublic;
-      orgPublishDate.value = data.orgPublishDate;
-
-      fetchDataTree(data.activeId);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function getSumPosition(data: SumPosition) {
-  sumPosition.total = data.totalPosition;
-  sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
-
-  sumPosition.use = data.totalPositionCurrentUse;
-  sumPosition.useRoot = data.totalRootPositionCurrentUse
-    ? data.totalRootPositionCurrentUse
-    : 0;
-
-  sumPosition.vacant = data.totalPositionCurrentVacant;
-  sumPosition.vacantRoot = data.totalRootPositionCurrentVacant
-    ? data.totalRootPositionCurrentVacant
-    : 0;
-}
-
-/**
- * function fetch ข้อมูลของ Tree
- * @param id id โครงสร้าง
- */
-async function fetchDataTree(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();
-    });
-}
-
-/**
- * funtion เลือกข้อมูล Tree
- * @param data ข่อมูล Tree
- */
-function updateSelected(data: DataTree) {
-  // positionId.value = "";
-  // seletcId.value = "";
-  // selectedPos.value = [];
-  // datePos.value = new Date();
-
-  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
-  nodeLevel.value = data.orgLevel;
-  fetchDataTable(data.orgTreeId, data.orgLevel);
-}
-
-async function fetchDataTable(id: string, level: number = 0) {
-  showLoader();
-  const body = {
-    node: level,
-    nodeId: id,
-    position: props?.dataRows?.positionPath,
-    typeCommand: null,
-    posLevel: props.dataRows?.positionLevelId,
-    posType: props.dataRows?.positionTypeId,
-    isAll: isAll.value,
-    isBlank: isBlank.value,
-  };
-
-  await http
-    .post(config.API.orgPosPlacement, body)
-    .then((res) => {
-      const dataMain: PositionMaim[] = [];
-      posMasterMain.value = res.data.result.data;
-
-      res.data.result.data.forEach((e: PositionNo) => {
-        const p = e.positions;
-        if (p.length !== 0) {
-          const a = p.find((el: Positions) => el.positionIsSelected === true);
-          const { id, ...rest } = a ? a : p[0];
-          const data: any = { ...e, ...rest };
-          dataMain.push(data);
-        }
-      });
-      const listPosNo: DataPositionNo[] = dataMain.map((e: PositionMaim) => ({
-        id: e.id,
-        isPosition: e.isPosition,
-        posMasterNo:
-          e.orgShortname +
-          (e.posMasterNoPrefix != null ? e.posMasterNoPrefix : "") +
-          e.posMasterNo +
-          (e.posMasterNoSuffix != null ? e.posMasterNoSuffix : ""),
-        positionName: e.positionName,
-        posTypeName: e.posTypeName,
-        posLevelName: e.posLevelName,
-        positionIsSelected: e.positionIsSelected
-          ? e.fullNameCurrentHolder
-          : "-",
-        isSit: e.isSit,
-        positions: e.positions,
-        node: e.node,
-        nodeId: e.nodeId,
-      }));
-
-      positionNo.value = listPosNo;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 1000);
-    });
-}
-
-function filterItemsTaps(data: TreeMain[]) {
-  let orgTreeIds: string[] = [];
-  for (const child of data) {
-    orgTreeIds.push(child.orgTreeId);
-    if (child.children) {
-      orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
-    }
-  }
-  itemTaps.value = orgTreeIds;
-  return orgTreeIds;
-}
-
-/**
- * function fetch ข้อมูล expanded tree
- * @param level levelTree
- * @param id treeId
- */
-async function fetchPosFind(level: number, id: string) {
-  showLoader();
-  const body = {
-    node: level,
-    nodeId: id,
-  };
-  await http
-    .post(config.API.orgPosFind, body)
-    .then((res) => {
-      const data = res.data.result;
-      expanded.value = data;
-      nodeId.value = id;
-      positionId.value = props?.dataRows?.posmasterId;
-      seletcId.value = props?.dataRows?.positionId;
-      datePos.value = props?.dataRows?.reportingDateFullDate;
-
-      fetchDataTable(nodeId.value, level);
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-}
-
-watch(
-  () => props.modal,
-  async () => {
-    if (props.modal) {
-      await fetchOrganizationActive();
-      if (props?.dataRows?.node !== null && props?.dataRows?.nodeId !== null) {
-        await fetchPosFind(props?.dataRows?.node, props?.dataRows?.nodeId);
-      } else {
-        expanded.value = [];
-      }
-    }
-  }
-);
-
-watch(
-  () => isAll.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      fetchDataTable(nodeId.value, nodeLevel.value);
-    }
-  }
-);
-
-watch(
-  () => isBlank.value,
-  (value, oldVal) => {
-    if (value !== oldVal) {
-      fetchDataTable(nodeId.value, nodeLevel.value);
-    }
-  }
-);
-
-onMounted(async () => {
-  // await fetchPublishFile();
-  // await loadTreeData();
-  // await fetchplacementPosition();
-});
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent full-width>
-    <q-card>
-      <DialogHeader title="เลือกหน่วยงานที่รับโอน" :close="closeModal" />
-      <q-separator />
-      <q-card-section class="q-pt-none q-pa-sm bg-grey-2">
-        <div class="row">
-          <q-card
-            bordered
-            class="col-12 col-sm-3 scroll q-pa-sm"
-            style="height: 75vh"
-          >
-            <q-toolbar style="padding: 0">
-              <q-toolbar-title class="text-subtitle2 text-bold"
-                >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
-              >
-            </q-toolbar>
-
-            <q-input
-              ref="filterRef"
-              dense
-              outlined
-              v-model="filter"
-              label="ค้นหา"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="filter !== ''"
-                  name="clear"
-                  class="cursor-pointer"
-                  @click="filter = ''"
-                />
-              </template>
-            </q-input>
-            <q-tree
-              class="q-pa-sm q-gutter-sm"
-              dense
-              default-expand-all
-              :nodes="lazy"
-              node-key="orgTreeId"
-              label-key="orgTreeName"
-              :filter="filter"
-              no-results-label="ไม่พบข้อมูลที่ค้นหา"
-              no-nodes-label="ไม่มีข้อมูล"
-              v-model:expanded="expanded"
-            >
-              <template v-slot:default-header="prop">
-                <q-item
-                  @click.stop="updateSelected(prop.node)"
-                  clickable
-                  :active="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">
-                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
-                      {{
-                        prop.node.orgTreeShortName == null
-                          ? null
-                          : prop.node.orgTreeShortName
-                      }}
-                    </div>
-                  </div>
-                </q-item>
-              </template>
-            </q-tree>
-          </q-card>
-
-          <q-card bordered class="col-12 col-sm-9 q-pa-sm">
-            <q-tab-panels
-              v-model="nodeId"
-              animated
-              transition-prev="jump-up"
-              transition-next="jump-up"
-            >
-              <q-tab-panel
-                v-for="(item, index) in itemTaps"
-                :key="index"
-                :name="item"
-              >
-                <CardPosition
-                  v-model:position="positionNo"
-                  v-model:selectedPos="selectedPos"
-                  v-model:datePos="datePos"
-                  v-model:positionId="positionId"
-                  v-model:seletcId="seletcId"
-                  v-model:is-all="isAll"
-                  v-model:is-blank="isBlank"
-                />
-              </q-tab-panel>
-            </q-tab-panels>
-          </q-card>
-        </div>
-      </q-card-section>
-
-      <!-- <q-card-section class="q-pa-sm bg-grey-1">
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-12 col-sm-7 row">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <q-input
-                    outlined
-                    dense
-                    ref="filterRef"
-                    v-model="search"
-                    placeholder="ค้นหา"
-                    class="q-mb-sm"
-                  >
-                    <template v-slot:append>
-                      <q-icon name="mdi-magnify" />
-                    </template>
-                  </q-input>
-                  <div class="q-pa-sm q-gutter-sm">
-                    <q-tree
-                      no-transition
-                      dense
-                      :nodes="treeData"
-                      node-key="keyId"
-                      :filter="search"
-                      :no-results-label="notFound"
-                      :no-nodes-label="noData"
-                      :filter-method="myFilterMethod"
-                      v-model:expanded="expanded"
-                    >
-                      <template v-slot:header-organization="prop">
-                        <div class="col">
-                          <div
-                            class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-                          >
-                            <div class="text-weight-medium">
-                              {{ prop.node.organizationName }}
-                            </div>
-                            <q-badge
-                              v-if="prop.node.totalPositionVacant > 0"
-                              rounded
-                              color="red"
-                              outline
-                              :label="prop.node.totalPositionVacant"
-                            />
-
-                            <q-space />
-                          </div>
-                          <div class="col items-center q-px-xs q-pt-xs">
-                            <div class="text-weight-medium text-grey-7">
-                              {{ prop.node.governmentCode }}
-                              {{ prop.node.organizationShortName }}
-                            </div>
-                          </div>
-                        </div>
-                      </template>
-
-                      <template v-slot:header-person="prop">
-                        <q-item
-                          clickable
-                          :active="selected == prop.node.keyId"
-                          @click="selectedPosition(prop.node)"
-                          :disable="
-                            prop.node.name != null ||
-                            checkPosition(prop.node.positionNumId) != -1
-                          "
-                          active-class="my-list-link text-primary text-weight-medium"
-                          class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-                        >
-                          <img
-                            v-if="
-                              prop.node.avatar == '' ||
-                              prop.node.avatar ==
-                                'https://cdn.quasar.dev/img/boy-avatar.png'
-                            "
-                            src="@/assets/avatar_user.jpg"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-                          <img
-                            v-else
-                            :src="prop.node.avatar"
-                            class="col-xs-1 col-sm-2"
-                            style="
-                              width: 28px;
-                              height: 28px;
-                              border-radius: 50%;
-                            "
-                          />
-
-                          <div
-                            v-if="prop.node.name == null"
-                            class="q-px-sm text-weight-medium text-red"
-                          >
-                            ว่าง
-                          </div>
-
-                          <div v-else-if="prop.node.positionLeaderFlag">
-                            <div
-                              class="q-px-sm text-weight-medium text-primary"
-                            >
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-
-                          <div v-else>
-                            <div class="q-px-sm text-weight-medium">
-                              {{ prop.node.name }}
-                            </div>
-                          </div>
-
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionName }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionNum }}
-                          </div>
-                          <div class="q-pr-sm">
-                            {{ prop.node.positionLevel }}
-                          </div>
-                          <q-icon
-                            v-if="prop.node.positionLeaderFlag"
-                            class="q-mr-sm"
-                            size="15px"
-                            color="primary"
-                            name="mdi-bookmark"
-                          ></q-icon>
-
-                          <q-space />
-                        </q-item>
-                      </template>
-                    </q-tree>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-5">
-              <q-card flat bordered class="fit q-pa-sm">
-                <q-scroll-area visible style="height: 70vh">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <div class="col-xs-12 col-sm-12 col-md-12"></div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <datepicker
-                        menu-class-name="modalfix"
-                        v-model="dataForm.containDate"
-                        :locale="'th'"
-                        autoApply
-                        :enableTimePicker="false"
-                        week-start="0"
-                      >
-                        <template #year="{ year }">{{ year + 543 }}</template>
-                        <template #year-overlay-value="{ value }">{{
-                          parseInt(value + 543)
-                        }}</template>
-                        <template #trigger>
-                          <q-input
-                            class="full-width inputgreen cursor-pointer"
-                            outlined
-                            dense
-                            :model-value="
-                              date2Thai(new Date(dataForm.containDate))
-                            "
-                            :rules="[ (val: string) =>!!val ||`${'วันที่รายงานตัว'}`,]"
-                            :label="`${'วันที่รายงานตัว'}`"
-                            hide-bottom-space
-                          >
-                            <template v-slot:prepend>
-                              <q-icon
-                                name="event"
-                                class="cursor-pointer"
-                                style="color: var(--q-primary)"
-                              >
-                              </q-icon>
-                            </template>
-                          </q-input>
-                        </template>
-                      </datepicker>
-                    </div>
-                    <q-space />
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        outlined
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="posNoOptions"
-                        v-model="dataForm.posNoId"
-                        :label="`${'ตำแหน่งเลขที่'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionOptions"
-                        v-model="dataForm.positionId"
-                        :label="`${'ตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionPathSideOptions"
-                        v-model="dataForm.positionPathSideId"
-                        :label="`${'ด้าน/สาขา'}`"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionTypeOptions"
-                        v-model="dataForm.positionTypeId"
-                        :label="`${'ประเภทตำแหน่ง'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        hide-bottom-space
-                        lazy-rules
-                        :options="positionLineOptions"
-                        v-model="dataForm.positionLineId"
-                        :label="`${'สายงาน'}`"
-                        map-options
-                      />
-                    </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
-                      <q-select
-                        outlined
-                        class="full-width inputgreen cursor-pointer custom-input"
-                        standout
-                        dense
-                        lazy-rules
-                        :options="positionLevelOptions"
-                        v-model="dataForm.positionLevelId"
-                        :label="`${'ระดับ'}`"
-                        hide-bottom-space
-                        :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
-                        emit-value
-                        map-options
-                      />
-                    </div>
-                  </div>
-                </q-scroll-area>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section> -->
-      <q-separator />
-
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="บันทึก" color="secondary" type="submit"
-          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-        >
-      </q-card-actions>
-      <!-- <q-separator />
-        <DialogFooter
-          :editvisible="true"
-          :validate="validateData"
-          :save="saveAppoint"
-          v-model:modalEdit="editDataStatus"
-        /> -->
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.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>