From 94109a6f157cf7d36c45da0b538993aa7e7fc640 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 19 Sep 2024 15:57:40 +0700
Subject: [PATCH] Refactoring code module 16_positionEmployee

---
 .../components/DialogAddPosition.vue          | 146 ++++----
 .../components/DialogFormPosition.vue         | 238 ++++++-------
 .../components/DialogHistoryPos.vue           |  22 +-
 .../components/DialogSelectPerson.vue         |  25 +-
 .../components/DialogSortPosition.vue         |   9 +-
 .../components/DialogSuccession.vue           |  17 +-
 .../components/TreeMain.vue                   |  18 +-
 .../components/TreeTable.vue                  |   7 +-
 .../components/TreeView.vue                   | 330 ------------------
 .../16_positionEmployee/views/main.vue        | 315 ++++++++++++++++-
 10 files changed, 527 insertions(+), 600 deletions(-)
 delete mode 100644 src/modules/16_positionEmployee/components/TreeView.vue

diff --git a/src/modules/16_positionEmployee/components/DialogAddPosition.vue b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
index 5a4075017..fc51fc0a5 100644
--- a/src/modules/16_positionEmployee/components/DialogAddPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -11,7 +13,6 @@ import type {
   ResGroup,
   ResLevel,
 } from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
-import type { ObjectPosRef } from "@/modules/01_masterdata/interface/index/positionEmployee";
 import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
 
@@ -20,11 +21,6 @@ import type { OptionType } from "@/modules/16_positionEmployee/interface/respons
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -44,86 +40,58 @@ const props = defineProps({
   levelOp: Object,
 });
 
-const isDisValidate = ref<boolean>(false);
-const isSpecial = ref<boolean>(false);
+//ข้อมูลตำแหน่ง
 const formDataPos = reactive({
-  posName: "",
-  posTypeName: "",
-  posLevelName: "",
+  posName: "", //ชือตำแหน่ง
+  posTypeName: "", //กลุ่มงาน
+  posLevelName: "", //ระดับชั้นงาน
 });
 
-const posNameRef = ref<object | null>(null);
-const posTypeNameRef = ref<object | null>(null);
-const posLevelNameRef = ref<object | null>(null);
-const objectRef: ObjectPosRef = {
-  posName: posNameRef,
-  posTypeName: posTypeNameRef,
-  posLevelName: posLevelNameRef,
-};
-const posTypeMain = ref<ResGroup[]>([]);
-const posTypeOp = ref<DataOption[]>([]);
-const posLevelOp = ref<DataOption[]>([]);
+const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน
 
 /**
- * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ * ฟังก์ชันยืนยันการบันทึกข้อมุล
  */
-function validateFormPositionEdit() {
-  isDisValidate.value = false;
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    const body = {
+      posDictName: formDataPos.posName,
+      posTypeId: formDataPos.posTypeName,
+      posLevelId: formDataPos.posLevelName,
+    };
+    showLoader();
+    try {
+      const url = !isEditCheck.value
+        ? config.API.orgEmployeePos
+        : config.API.orgEmployeePosById(props?.data?.id);
+      await http[!isEditCheck.value ? "post" : "put"](url, body);
+      await props.emitSearch?.(formDataPos.posName, "positionName");
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
     }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
-}
-async function submit() {
-  const body = {
-    posDictName: formDataPos.posName,
-    posTypeId: formDataPos.posTypeName,
-    posLevelId: formDataPos.posLevelName,
-  };
-  showLoader();
-  try {
-    const url = !isEditCheck.value
-      ? config.API.orgEmployeePos
-      : config.API.orgEmployeePosById(props?.data?.id);
-    await http[!isEditCheck.value ? "post" : "put"](url, body);
-    await props.emitSearch?.(formDataPos.posName, "positionName");
-    await success($q, "บันทีกข้อมูลสำเร็จ");
-    await close();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
+  });
 }
 
-async function clearFormPositionSelect() {
+/**
+ * ฟังก์ชันปิด popup
+ */
+function close() {
+  modal.value = false;
   isEditCheck.value = false;
-  isDisValidate.value = true;
   formDataPos.posName = "";
   formDataPos.posTypeName = "";
   formDataPos.posLevelName = "";
-  isSpecial.value = false;
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
-function close() {
-  modal.value = false;
-  clearFormPositionSelect();
 }
 
+/**
+ * ฟังก์ชันดึงข้อมุลกลุ่มงาน
+ */
 async function fetchType() {
   showLoader();
   await http
@@ -143,6 +111,10 @@ async function fetchType() {
     });
 }
 
+/**
+ * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
+ * @param id  กลุ่มงาน
+ */
 function updatePosTypeName(id: string) {
   const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
   posLevelOp.value =
@@ -153,6 +125,9 @@ function updatePosTypeName(id: string) {
   formDataPos.posLevelName = "";
 }
 
+/**
+ * ทำงานเมื่อ modal เป็น true
+ */
 watch(
   () => modal.value,
   async () => {
@@ -175,14 +150,16 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 50vw">
-      <DialogHeader
-        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
-        :close="close"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`
+          }`"
+          :close="close"
+        />
+        <q-separator />
 
-      <q-card-section class="q-pa-none">
-        <form @submit.prevent="validateFormPositionEdit">
+        <q-card-section class="q-pa-none">
           <div class="row q-col-gutter-sm col-12 q-pa-md">
             <div class="col-12">
               <q-input
@@ -194,7 +171,8 @@ watch(
                 label="ชื่อตำแหน่ง"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
               />
             </div>
 
@@ -212,8 +190,9 @@ watch(
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                 @update:model-value="updatePosTypeName"
+                class="inputgreen"
               />
             </div>
 
@@ -232,7 +211,8 @@ watch(
                 option-value="id"
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
               />
             </div>
           </div>
@@ -245,8 +225,8 @@ watch(
               color="public"
             />
           </q-card-actions>
-        </form>
-      </q-card-section>
+        </q-card-section>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/16_positionEmployee/components/DialogFormPosition.vue b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
index 3702f6592..5207426af 100644
--- a/src/modules/16_positionEmployee/components/DialogFormPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -10,37 +12,15 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type {
   FormDataPosition,
-  FormPositionRef,
   DataOption,
   RowDetailPositions,
   ListMenu,
 } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
+import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue"; //เพิ่มตำแหน่ง
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  modal: Boolean,
-  close: Function,
-  orgLevel: Number,
-  treeId: String,
-  actionType: String,
-  rowId: { type: String, default: "" },
-  fetchDataTable: Function,
-  getSummary: Function,
-  shortName: { type: String, required: true },
-});
-
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
-const isPosition = ref<boolean>(false);
-
-const dataCopy = ref<any>();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -53,7 +33,28 @@ const {
   dialogMessageNotify,
 } = mixin;
 
-const search = ref<string>("");
+/**
+ * props
+ */
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+  orgLevel: Number,
+  treeId: String,
+  actionType: String,
+  rowId: { type: String, default: "" },
+  fetchDataTable: Function,
+  getSummary: Function,
+  shortName: { type: String, required: true },
+});
+
+const modalAdd = ref<boolean>(false); //เพิ่มข้อมูลตำแหน่ง
+const isEdit = ref<boolean>(false); //แก้ไขข้อมูล
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isPosition = ref<boolean>(false); //แสดงเลือกตำแหน่งที่ต้องการเพิ่ม
+const dataCopy = ref<RowDetailPositions>(); //ข้อมูลตำแหน่งที่ต้องการคัดลอก
+const search = ref<string>(""); //คำค้นหา
 const type = ref<string>("positionName");
 const optionFilter = ref<DataOption[]>([
   { id: "positionName", name: "ชื่อตำแหน่ง" },
@@ -82,11 +83,8 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
-const rows = ref<RowDetailPositions[]>([]);
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-
-const prefixNoRef = ref<Object | null>(null);
-const positionNoRef = ref<Object | null>(null);
+const rows = ref<RowDetailPositions[]>([]); //รายกานข้อมูลอัตรากำลัง
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); //รายการตำแหน่ง
 
 const formData = reactive<FormDataPosition>({
   shortName: props.shortName,
@@ -96,12 +94,6 @@ const formData = reactive<FormDataPosition>({
   reason: "",
 });
 
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectPositionRef: FormPositionRef = {
-  prefixNo: prefixNoRef,
-  positionNo: positionNoRef,
-};
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -171,75 +163,59 @@ async function fetchPosition(id: string) {
     });
 }
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectPositionRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
-      const property = objectPositionRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (rows.value.length == 0) {
-      dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
-    } else {
-      onSubmit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ *  ฟังก์ชันบันทึกข่อมูลอัตรากำลัง
+ */
 function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    const positionsData = rows.value.map((e: any) => ({
-      posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
-      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
-    }));
-    const body = {
-      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-      posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
-      posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
-      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
-      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
-      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
-      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
-      positions: positionsData,
-      isDirector: false,
-      isOfficer: false,
-
-      // succession: succession.value,
-    };
-    try {
-      const url =
-        props.actionType === "ADD"
-          ? config.API.orgPosMasterEmp
-          : config.API.orgPosMasterByIdEmp(props.rowId);
-      await http[props.actionType === "ADD" ? "post" : "put"](url, body);
-      await props.getSummary?.();
-      await props.fetchDataTable?.(
-        reqMaster.value.id,
-        reqMaster.value.type,
-        false
-      );
-      await success($q, "บันทีกข้อมูลสำเร็จ");
-      close();
-    } catch (err) {
-      messageError($q, err);
-    } finally {
-      hideLoader();
-    }
-  });
+  if (rows.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const positionsData = rows.value.map((e: any) => ({
+        posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+        posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+        posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+      }));
+      const body = {
+        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+        posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
+        posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+        orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+        orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+        orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+        orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
+        positions: positionsData,
+        isDirector: false,
+      };
+      try {
+        const url =
+          props.actionType === "ADD"
+            ? config.API.orgPosMasterEmp
+            : config.API.orgPosMasterByIdEmp(props.rowId);
+        await http[props.actionType === "ADD" ? "post" : "put"](url, body);
+        await props.getSummary?.();
+        await props.fetchDataTable?.(
+          reqMaster.value.id,
+          reqMaster.value.type,
+          false
+        );
+        await success($q, "บันทีกข้อมูลสำเร็จ");
+        close();
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
 }
 
-/** input ค้นหา */
+/**
+ * ฟังก์ชันค้นหาข้อมูลตำแหน่ง
+ */
 const searchRef = ref<any>(null);
 async function searchInput() {
   searchRef.value.validate();
@@ -281,20 +257,18 @@ function editDetiail(data: RowDetailPositions) {
 }
 
 /**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
+ * ฟังก์ชันเลือกตำแหน่ง
+ * @param data  ตำแหน่งที่เลือก
  */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 function addPosition(data: RowDetailPositions) {
   rows.value = [];
   rows.value.push(data);
 }
 
+/**
+ * ฟังก์ชัยลบตำแหน่ง
+ * @param id  คำแหน่งีที่เลือก
+ */
 function deletePos(id: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -313,27 +287,36 @@ function deletePos(id: string) {
   });
 }
 
-function clearFormPositionSelect() {
-  isDisValidate.value = true;
-  search.value = "";
-  type.value = "positionName";
-
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
+/**
+ * ฟังก์ชันปืด Popup
+ */
 function close() {
   props.close?.();
   isPosition.value = false;
-  clearFormPositionSelect();
+  search.value = "";
+  type.value = "positionName";
 }
 
+/**
+ * ฟังก์ชันค้นหาตำแหน่ง
+ * @param keyword คำค้นหา
+ * @param typeSelect ค้นหาจาก
+ */
 async function emitSearch(keyword: string, typeSelect: string) {
   search.value = keyword;
   type.value = typeSelect;
   await searchInput();
 }
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
 
 watch(
   () => props.modal,
@@ -343,7 +326,6 @@ watch(
         rowsPositionSelect.value = [];
         search.value = "";
         rows.value = [];
-        clearFormPositionSelect();
         formData.prefixNo = "";
         formData.positionNo = "";
         formData.suffixNo = "";
@@ -358,7 +340,7 @@ watch(
   () => modalAdd.value,
   () => {
     if (!modalAdd.value) {
-      dataCopy.value = [];
+      dataCopy.value = undefined;
     }
   }
 );
@@ -374,7 +356,7 @@ watch(
         :close="close"
       />
       <q-separator />
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <q-card-section class="q-pa-sm fixed-height">
           <div class="row q-col-gutter-sm">
             <div class="col-12">
@@ -725,15 +707,17 @@ watch(
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
+
+  <!-- เพิ่มตำแหน่ง -->
   <DialogAddPosition
     v-model:modalAdd="modalAdd"
-    :emitSearch="emitSearch"
-    :data="dataCopy"
     v-model:is-edit="isEdit"
     :get-data="searchInput"
+    :emit-search="emitSearch"
+    :data="dataCopy"
   />
 </template>
 
diff --git a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
index 4b6db61fb..ef79f4db4 100644
--- a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
+++ b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -15,12 +18,6 @@ import type { HistoryPos } from "@/modules/16_positionEmployee/interface/respons
  */
 import Header from "@/components/DialogHeader.vue";
 
-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
  * use
  */
@@ -38,6 +35,7 @@ const props = defineProps({
   },
 });
 
+const rows = ref<HistoryPos[]>([]); //รายการแก้ไขประวัติ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -61,7 +59,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
-    field: "lastUpdatedAt",
+    field: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -93,7 +91,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any[]>([]);
 
 /**
  *  function เรียกข้อมูลประวัติตำแหน่ง
@@ -105,14 +102,7 @@ function fetchHistoryPos(id: string) {
     .get(config.API.orgPosHistory(id))
     .then((res) => {
       const data: HistoryPos[] = res.data.result;
-      const list = data.map((e: HistoryPos) => ({
-        ...e,
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
-        posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
-        posMasterNo: e.posMasterNo ?? "-",
-        posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
-      }));
-      rows.value = list;
+      rows.value = data;
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
index 76e9525bd..015698610 100644
--- a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 
 /**
  * importType
@@ -29,12 +32,6 @@ import type {
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
  * use
  */
@@ -70,12 +67,12 @@ const props = defineProps({
 });
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const typeOpsMain = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]); //ข้อมูลกลุ่มงาน
+const levelOpsMain = ref<DataOption[]>([]); //ข้อมูลระดับกลุ่มงาน
+const typeOps = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const levelOps = ref<DataOption[]>([]); //รายการระดับกลุ่มงาน
 const dataLevel = ref<TypePos[]>([]);
-const selected = ref<Position[]>([]);
+const selected = ref<Position[]>([]); //ตำแหน่งที่เลือก
 const isSit = ref<boolean>(false);
 
 const formData = reactive<FormPositionFilter>({
@@ -201,14 +198,15 @@ const columnsResult = ref<QTableProps["columns"]>([
  */
 function close() {
   modal.value = false;
+  clearForm();
 }
 
 /**
  *  function เรียกข้อมูลประเภทตำแหน่ง
  */
-function fetchType() {
+async function fetchType() {
   showLoader();
-  http
+  await http
     .get(config.API.orgEmployeeType)
     .then((res) => {
       dataLevel.value = res.data.result;
@@ -377,7 +375,6 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value == true) {
-      await clearForm();
       await fetchType();
 
       if (props.dataDetailPos) {
diff --git a/src/modules/16_positionEmployee/components/DialogSortPosition.vue b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
index fe5f0cff8..73905f9e1 100644
--- a/src/modules/16_positionEmployee/components/DialogSortPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 
 /**
  * importType
@@ -15,12 +18,6 @@ import type { DataSortPos } from "@/modules/02_organization/interface/index/orga
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
  * use
  */
diff --git a/src/modules/16_positionEmployee/components/DialogSuccession.vue b/src/modules/16_positionEmployee/components/DialogSuccession.vue
index fedba3adc..156bb1a74 100644
--- a/src/modules/16_positionEmployee/components/DialogSuccession.vue
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -20,11 +24,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useRoute } from "vue-router";
-
 /** use*/
 const $q = useQuasar();
 const store = usePositionEmp();
@@ -82,10 +81,10 @@ function resetFilter() {
  * function เลือกหน่วยงาน
  */
 async function updateSelected(data: DataTree) {
-  levelTree.value = await data.orgLevel;
-  selectedTree.value = await data.orgTreeId;
-  reqMaster.id = await data.orgTreeId;
-  reqMaster.type = await data.orgLevel;
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = data.orgTreeId;
+  reqMaster.type = data.orgLevel;
   await fetchTable();
 }
 
diff --git a/src/modules/16_positionEmployee/components/TreeMain.vue b/src/modules/16_positionEmployee/components/TreeMain.vue
index e39127940..903180c2f 100644
--- a/src/modules/16_positionEmployee/components/TreeMain.vue
+++ b/src/modules/16_positionEmployee/components/TreeMain.vue
@@ -18,7 +18,7 @@ const store = usePositionEmp();
 const {} = useCounterMixin();
 
 /** props*/
-const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeMain = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const nodeId = defineModel<string>("nodeId", { required: true });
 const shortName = defineModel<string>("shortName", { required: true });
 const props = defineProps({
@@ -32,12 +32,10 @@ const props = defineProps({
   },
 });
 
-const filter = ref<string>("");
-const nodes = ref<Array<OrgTree>>([]);
+const filter = ref<string>(""); //ค้าหาข้อมูลโครงสร้าง
+const nodes = ref<Array<OrgTree>>([]); //ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
-const expanded = ref<Array<any>>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
+const expanded = ref<Array<string[]>>([]);
 
 /**
  * funtion เลือกข้อมูล Tree
@@ -82,9 +80,9 @@ function updateSelected(data: DataTree) {
 }
 
 watch(
-  () => nodeTEST.value,
+  () => nodeMain.value,
   () => {
-    nodes.value = nodeTEST.value;
+    nodes.value = nodeMain.value;
   }
 );
 </script>
@@ -116,8 +114,8 @@ watch(
           node-key="orgTreeId"
           label-key="labelName"
           :filter="filter"
-          :no-results-label="notFound"
-          :no-nodes-label="noData"
+          no-results-label="ไม่พบข้อมูลที่ค้นหา"
+          no-nodes-label="ไม่มีข้อมูล"
           v-model:expanded="expanded"
         >
           <template v-slot:default-header="prop">
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index a81fe9062..312972696 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -31,8 +34,6 @@ import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuc
 /**
  * importStore
  */
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * ues
diff --git a/src/modules/16_positionEmployee/components/TreeView.vue b/src/modules/16_positionEmployee/components/TreeView.vue
deleted file mode 100644
index 2d4006df8..000000000
--- a/src/modules/16_positionEmployee/components/TreeView.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useStructureTree } from "@/stores/structureTree";
-
-/** importType*/
-import type {
-  OrgTree,
-  PosMaster,
-  Position,
-  PosMaster2,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
-
-/** importComponents*/
-import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
-import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-
-/** use*/
-const store = usePositionEmp();
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-const route = useRoute();
-const { fetchStructureTree } = useStructureTree();
-const storeStructureTree = useStructureTree();
-
-const nodeTree = ref<OrgTree[]>([]); // ข้อมูล Tree
-const nodeId = ref<string>(""); // id ของ Tree
-const orgLevel = ref<number>(0); // levelTree
-const isLoad = ref<boolean>(false); // loadTable
-const isLoadTree = ref<boolean>(false); // loadTable
-const mainTree = ref<OrgTree>();
-const selected = ref<string>("");
-
-const reqMaster = reactive<FilterMaster>({
-  id: "",
-  type: 0,
-  isAll: false,
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  revisionId: "",
-});
-const totalPage = ref<number>(1);
-const action1 = ref<boolean>(false);
-const posMaster = ref<PosMaster2[]>([]);
-const shortName = ref<string>("");
-
-/**
- * function fetch ข้อมูลของ Tree
- * @param id id โครงสร้าง
- */
-async function fetchDataTree() {
-  isLoadTree.value = false;
-  const dataTree = await fetchStructureTree(route.meta.Key as string, true);
-  store.activeId = storeStructureTree.activeId;
-  if (dataTree) {
-    nodeTree.value = dataTree;
-    selected.value = "";
-    nodeId.value = "";
-    store.treeId = "";
-  }
-}
-
-/**
- * function fetch ข้อรายการตำแหน่ง
- * @param id  idTree
- * @param level  levelTree
- */
-function fetchDataTable(id: string, level: number, action: boolean) {
-  searchAndReplaceOrgName(nodeTree.value, id);
-  orgLevel.value = level;
-  reqMaster.id = id;
-  reqMaster.type = level;
-  action1.value = action;
-  if (action) {
-    setTimeout(() => {
-      action1.value = false;
-    }, 1000);
-    reqMaster.isAll = false;
-    reqMaster.page = 1;
-    reqMaster.pageSize = 10;
-    reqMaster.keyword = "";
-    reqMaster.revisionId = store.activeId;
-  }
-
-  if (action === true) {
-    isLoad.value = true;
-  }
-  http
-    .post(config.API.orgPosMasterListEmp, reqMaster)
-    .then(async (res) => {
-      posMaster.value = [];
-      const dataMain: PosMaster[] = [];
-      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
-      res.data.result.data.forEach((e: PosMaster) => {
-        const p = e.positions;
-        if (p.length !== 0) {
-          const a = p.find((el: Position) => el.positionIsSelected === true);
-          const { id, ...rest } = a ? a : p[0];
-          const test = { ...e, ...rest };
-          dataMain.push(test);
-        }
-      });
-      posMaster.value = await store.fetchPosMaster(dataMain);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      posMaster.value = [];
-    })
-    .finally(() => {
-      setTimeout(() => {
-        isLoad.value = false;
-      }, 500);
-    });
-}
-
-/**
- * ดึงข้อมูลสถิติจำนวนด้านบน
- */
-function getSummary() {
-  http
-    .post(config.API.orgSummaryEmp, {
-      id: reqMaster.id, //*Id node
-      type: reqMaster.type, //*ประเภทnode
-      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
-    })
-    .then(async (res: any) => {
-      const data = await res.data.result;
-      store.getSumPosition({
-        totalPosition: data.totalPosition,
-        totalPositionCurrentUse: data.totalPositionCurrentUse,
-        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalPositionNextUse: data.totalPositionNextUse,
-        totalPositionNextVacant: data.totalPositionNextVacant,
-        totalRootPosition: data.totalPosition,
-        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
-        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalRootPositionNextUse: data.totalPositionNextUse,
-        totalRootPositionNextVacant: data.totalPositionNextVacant,
-      });
-    });
-}
-
-/**
- * funcion ค้นหาข้อมูลใน Table
- */
-function filterKeyword() {
-  reqMaster.page = 1;
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-}
-
-/**
- * function ค้นหาชือ
- * @param data ข้อมูล Tree
- * @param targetId tree
- */
-function searchAndReplaceOrgName(data: any, targetId: string) {
-  for (const child of data) {
-    if (child.orgTreeId === targetId) {
-      mainTree.value = child;
-
-      return true; // Found the targetId in this level
-    }
-    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
-      return true; // Found the targetId in the nested children
-    }
-  }
-  return false; // Not found in this branch
-}
-
-/**
- * lifecycle Hook
- */
-onMounted(() => {
-  fetchDataTree();
-  // setTimeout(async () => {
-  //   store.activeId && (await );
-  // }, 200);
-});
-
-/**
- * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
- */
-watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-});
-
-/**
- *  callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
- */
-watch(
-  () => reqMaster.isAll,
-  () => {
-    getSummary();
-    if (reqMaster.page !== 1) {
-      reqMaster.page = 1;
-    } else {
-      fetchDataTable(reqMaster.id, reqMaster.type, false);
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="col-12">
-    <q-card bordered class="col-12 row caedNone">
-      <div class="col-xs-12 col-sm-3 row">
-        <div class="col-12 row no-wrap bg-grey-1">
-          <TreeMain
-            v-model:nodeTree="nodeTree"
-            v-model:shortName="shortName"
-            v-model:nodeId="nodeId"
-            :fetchDataTree="fetchDataTree"
-            :fetchDataTable="fetchDataTable"
-          />
-
-          <div class="col-12 row">
-            <q-separator :vertical="!$q.screen.lt.md" />
-          </div>
-        </div>
-      </div>
-
-      <div class="col-xs-12 col-sm-9 q-pa-md row">
-        <div class="col-12 row">
-          <div
-            class="row col-12 justify-center"
-            v-if="isLoad"
-            style="height: 550px"
-          >
-            <div class="col-2">
-              <q-spinner color="primary" size="3em" />
-            </div>
-          </div>
-
-          <div v-else class="col-12 row">
-            <div class="col-12" v-if="nodeId !== ''">
-              <!-- summary -->
-              <q-card
-                bordered
-                v-if="nodeId"
-                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
-              >
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
-                  <q-space />
-                  <q-badge
-                    color="secondary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.total
-                        : store.sumPosition.totalRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
-                  <q-space />
-                  <q-badge
-                    color="primary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.use
-                        : store.sumPosition.useRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งว่าง</div>
-                  <q-space />
-                  <q-badge
-                    color="red"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.vacant
-                        : store.sumPosition.vacantRoot
-                    "
-                  />
-                </div>
-              </q-card>
-
-              <TreeTable
-                v-if="nodeId !== ''"
-                v-model:nodeTree="nodeTree"
-                v-model:orgLevel="orgLevel"
-                v-model:treeId="nodeId"
-                v-model:reqMaster="reqMaster"
-                v-model:totalPage="totalPage"
-                v-model:posMaster="posMaster"
-                :shortName="shortName"
-                :mainTree="mainTree"
-                :fetchDataTable="fetchDataTable"
-                :filterKeyword="filterKeyword"
-                :fetchDataTree="fetchDataTree"
-              />
-            </div>
-            <div class="row col-12 items-center" v-else>
-              <q-banner class="q-pa-lg col-12 text-center">
-                <q-icon
-                  name="mdi-hand-pointing-left"
-                  size="lg"
-                  color="primary"
-                />
-                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
-              </q-banner>
-            </div>
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
-
-<style scoped>
-.list-summary .item {
-  border: 1px solid rgb(231, 231, 231);
-  border-radius: 4px;
-  background-color: white;
-}
-</style>
diff --git a/src/modules/16_positionEmployee/views/main.vue b/src/modules/16_positionEmployee/views/main.vue
index 9a9a0c6da..d1376e4e7 100644
--- a/src/modules/16_positionEmployee/views/main.vue
+++ b/src/modules/16_positionEmployee/views/main.vue
@@ -1,6 +1,210 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useStructureTree } from "@/stores/structureTree";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type {
+  OrgTree,
+  PosMaster,
+  Position,
+  PosMaster2,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+
 /** importComponents*/
-import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
+import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
+import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
+
+/** use*/
+const store = usePositionEmp();
+const $q = useQuasar();
+const { messageError } = useCounterMixin();
+const route = useRoute();
+const { fetchStructureTree } = useStructureTree();
+const storeStructureTree = useStructureTree();
+
+const nodeTree = ref<OrgTree[]>([]); // ข้อมูล Tree
+const nodeId = ref<string>(""); // id ของ Tree
+const orgLevel = ref<number>(0); // levelTree
+const isLoad = ref<boolean>(false); // loadTable
+const isLoadTree = ref<boolean>(false); // loadTable
+const mainTree = ref<OrgTree>();
+const selected = ref<string>("");
+
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: "",
+});
+const totalPage = ref<number>(1); //จำนวนหน้า
+const action1 = ref<boolean>(false);
+const posMaster = ref<PosMaster2[]>([]); //รายการตำแหน่ง
+const shortName = ref<string>(""); //ชื่อย่อย
+
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree() {
+  isLoadTree.value = false;
+  const dataTree = await fetchStructureTree(route.meta.Key as string, true);
+  store.activeId = storeStructureTree.activeId;
+  if (dataTree) {
+    nodeTree.value = dataTree;
+    selected.value = "";
+    nodeId.value = "";
+    store.treeId = "";
+  }
+}
+
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+function fetchDataTable(id: string, level: number, action: boolean) {
+  searchAndReplaceOrgName(nodeTree.value, id);
+  orgLevel.value = level;
+  reqMaster.id = id;
+  reqMaster.type = level;
+  action1.value = action;
+  if (action) {
+    setTimeout(() => {
+      action1.value = false;
+    }, 1000);
+    reqMaster.isAll = false;
+    reqMaster.page = 1;
+    reqMaster.pageSize = 10;
+    reqMaster.keyword = "";
+    reqMaster.revisionId = store.activeId;
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  http
+    .post(config.API.orgPosMasterListEmp, reqMaster)
+    .then(async (res) => {
+      posMaster.value = [];
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+        }
+      });
+      posMaster.value = await store.fetchPosMaster(dataMain);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 500);
+    });
+}
+
+/**
+ * ดึงข้อมูลสถิติจำนวนด้านบน
+ */
+function getSummary() {
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.id, //*Id node
+      type: reqMaster.type, //*ประเภทnode
+      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    });
+}
+
+/**
+ * funcion ค้นหาข้อมูลใน Table
+ */
+function filterKeyword() {
+  reqMaster.page = 1;
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+}
+
+/**
+ * function ค้นหาชือ
+ * @param data ข้อมูล Tree
+ * @param targetId tree
+ */
+function searchAndReplaceOrgName(data: any, targetId: string) {
+  for (const child of data) {
+    if (child.orgTreeId === targetId) {
+      mainTree.value = child;
+
+      return true; // Found the targetId in this level
+    }
+    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
+      return true; // Found the targetId in the nested children
+    }
+  }
+  return false; // Not found in this branch
+}
+
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
+watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+});
+
+/**
+ *  callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
+ */
+watch(
+  () => reqMaster.isAll,
+  () => {
+    getSummary();
+    if (reqMaster.page !== 1) {
+      reqMaster.page = 1;
+    } else {
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+    }
+  }
+);
+
+/**
+ * lifecycle Hook
+ */
+onMounted(() => {
+  fetchDataTree();
+});
 </script>
 
 <template>
@@ -13,7 +217,114 @@ import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
   <q-card flat bordered>
     <q-card class="my-card">
       <q-card-section style="padding: 0px">
-        <TreeView />
+        <div class="col-12">
+          <q-card bordered class="col-12 row caedNone">
+            <div class="col-xs-12 col-sm-3 row">
+              <div class="col-12 row no-wrap bg-grey-1">
+                <TreeMain
+                  v-model:node-tree="nodeTree"
+                  v-model:short-name="shortName"
+                  v-model:node-id="nodeId"
+                  :fetch-data-table="fetchDataTable"
+                  :fetch-data-tree="fetchDataTree"
+                />
+
+                <div class="col-12 row">
+                  <q-separator :vertical="!$q.screen.lt.md" />
+                </div>
+              </div>
+            </div>
+
+            <div class="col-xs-12 col-sm-9 q-pa-md row">
+              <div class="col-12 row">
+                <div
+                  class="row col-12 justify-center"
+                  v-if="isLoad"
+                  style="height: 550px"
+                >
+                  <div class="col-2">
+                    <q-spinner color="primary" size="3em" />
+                  </div>
+                </div>
+
+                <div v-else class="col-12 row">
+                  <div class="col-12" v-if="nodeId !== ''">
+                    <!-- summary -->
+                    <q-card
+                      bordered
+                      v-if="nodeId"
+                      class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+                    >
+                      <div class="row col q-pa-sm item">
+                        <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                        <q-space />
+                        <q-badge
+                          color="secondary"
+                          :label="
+                            reqMaster.isAll
+                              ? store.sumPosition.total
+                              : store.sumPosition.totalRoot
+                          "
+                        />
+                      </div>
+                      <div class="row col q-pa-sm item">
+                        <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                        <q-space />
+                        <q-badge
+                          color="primary"
+                          :label="
+                            reqMaster.isAll
+                              ? store.sumPosition.use
+                              : store.sumPosition.useRoot
+                          "
+                        />
+                      </div>
+                      <div class="row col q-pa-sm item">
+                        <div class="ellipsis">ตำแหน่งว่าง</div>
+                        <q-space />
+                        <q-badge
+                          color="red"
+                          :label="
+                            reqMaster.isAll
+                              ? store.sumPosition.vacant
+                              : store.sumPosition.vacantRoot
+                          "
+                        />
+                      </div>
+                    </q-card>
+
+                    <TreeTable
+                      v-if="nodeId !== ''"
+                      v-model:node-tree="nodeTree"
+                      v-model:org-level="orgLevel"
+                      v-model:tree-id="nodeId"
+                      v-model:pos-master="posMaster"
+                      v-model:req-master="reqMaster"
+                      v-model:total-page="totalPage"
+                      :short-name="shortName"
+                      :main-tree="mainTree"
+                      :fetch-data-table="fetchDataTable"
+                      :fetch-data-tree="fetchDataTree"
+                      :filter-keyword="filterKeyword"
+                    />
+                  </div>
+                  <div class="row col-12 items-center" v-else>
+                    <q-banner class="q-pa-lg col-12 text-center">
+                      <q-icon
+                        name="mdi-hand-pointing-left"
+                        size="lg"
+                        color="primary"
+                      />
+                      <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
+                    </q-banner>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <!-- <TreeView /> -->
       </q-card-section>
     </q-card>
   </q-card>