From 0f5d772e53bc9965dd9a4f5b79b514e0fab30a57 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 11 Sep 2024 17:00:27 +0700
Subject: [PATCH] Refactoring code module 02_organization

---
 .../components/DialogAddPosition.vue          | 172 ++++---
 .../components/DialogFormAgency.vue           | 214 ++++----
 .../components/DialogFormDateTime.vue         |  84 ++--
 .../components/DialogFormPosition.vue         | 476 ++++++++----------
 .../components/DialogHistory.vue              |  76 +--
 .../components/DialogHistoryPos.vue           |  17 +-
 .../components/DialogMovePos.vue              |  49 +-
 .../components/DialogNewStructure.vue         |  67 +--
 .../components/DialogPositionDetail.vue       |   7 +-
 .../components/DialogSelectPerson.vue         |  81 ++-
 .../components/DialogSortAgency.vue           |   9 +-
 .../components/DialogSortPosition.vue         |   9 +-
 .../components/DialogStructureDetail.vue      |  28 +-
 .../components/DialogSuccession.vue           |  73 +--
 .../components/StructureMain.vue              |  70 +--
 .../components/StructureOrgMain.vue           |   8 +-
 .../02_organization/components/TreeMain.vue   |  14 +-
 .../02_organization/components/TreeTable.vue  |  52 +-
 .../02_organization/components/TreeView.vue   |  58 ++-
 .../02_organization/interface/index/Main.ts   |   7 +
 .../interface/response/Main.ts                |   4 +-
 .../02_organization/store/organizational.ts   |  49 +-
 .../views/ExampleSearchTree.vue               | 165 ------
 src/modules/02_organization/views/main.vue    |  49 +-
 24 files changed, 805 insertions(+), 1033 deletions(-)
 delete mode 100644 src/modules/02_organization/views/ExampleSearchTree.vue

diff --git a/src/modules/02_organization/components/DialogAddPosition.vue b/src/modules/02_organization/components/DialogAddPosition.vue
index 162f71512..737ec2177 100644
--- a/src/modules/02_organization/components/DialogAddPosition.vue
+++ b/src/modules/02_organization/components/DialogAddPosition.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -12,9 +13,12 @@ import type {
   DataOption,
   FormPositionSelect,
 } from "@/modules/02_organization/interface/index/Main";
+import type {
+  DataPosType,
+  DataLevel,
+} from "@/modules/02_organization/interface/response/Main";
 import type {
   OptionType,
-  OptionLevel,
   OptionExecutive,
 } from "@/modules/02_organization/interface/response/organizational";
 
@@ -33,9 +37,8 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 /**
  * props
  */
-
-const modal = defineModel<boolean>("modalAdd", { required: true });
-const isEditCheck = defineModel<boolean>("isEdit", { required: true });
+const modal = defineModel<boolean>("modalAdd", { required: true }); // เปิด,ปิด popup
+const isEditCheck = defineModel<boolean>("isEdit", { required: true }); // สถานะแก้ไข
 const props = defineProps({
   emitSearch: Function,
   getData: Function,
@@ -43,20 +46,20 @@ const props = defineProps({
   levelOp: Object,
 });
 
-const dataLevel = ref<any>();
-const posExecutive = ref<string>("");
-const isSpecial = ref<boolean>(false);
-const shape = ref<string>("false");
-
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+
+const dataLevel = ref<DataPosType[]>([]); // ข้อมูลประเภทตำแหน่ง
+const posExecutive = ref<string>(""); // ชื่อตำแหน่งทางการบริหาร
+const isSpecial = ref<boolean>(false); // เฉพาะสายงานที่กำหนด
+const shape = ref<string>("false"); // ตำแหน่งทางการบริหาร
 const isDisValidate = ref<boolean>(false);
 
-const typeOpsMain = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const executiveOpsMain = ref<DataOption[]>([]);
-const executiveOps = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]); //ตัวเลือกประเภทตำแหน่ง
+const levelOpsMain = ref<DataOption[]>([]); //ตัวเลือกระดับตำแหน่ง
+const executiveOpsMain = ref<DataOption[]>([]); //ตัวเลือกรายการตำแหน่งทางการบริหาร
+const typeOps = ref<DataOption[]>([]); //ตัวเลือกประเภทตำแหน่ง
+const levelOps = ref<DataOption[]>([]); //ตัวเลือกระดับตำแหน่ง
+const executiveOps = ref<DataOption[]>([]); //ตัวเลือกรายการตำแหน่งทางการบริหาร
 const shapeOp = ref<DataOption[]>([
   {
     id: "false",
@@ -67,6 +70,8 @@ const shapeOp = ref<DataOption[]>([
     name: "เพิ่มใหม่",
   },
 ]);
+
+//ฟอร์มข้อมูลตำแหน่ง
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
   positionName: "",
@@ -92,7 +97,7 @@ function validateFormPositionEdit() {
 }
 
 /**
- * ฟังชั่น บันทึกการแก้ไข
+ * ฟังก์ชั่นบันทึกการแก้ไขตำแหน่ง
  */
 function saveSelectEdit() {
   dialogConfirm(
@@ -150,7 +155,7 @@ function saveSelectEdit() {
   );
 }
 /**
- * ฟังชั่น บันทึก
+ * ฟังชั่นบันทึกการเพิ่มข้อมูลตำแหน่ง
  */
 function onSubmitSelectEdit() {
   dialogConfirm(
@@ -212,11 +217,13 @@ function onSubmitSelectEdit() {
 }
 
 /**
- * ฟังชั่น เครียลฟอร์ม
+ * ฟังชั่นเคลียร์ฟอร์มข้อมูล
+ *
+ * กำหนดค่าฟอร์มข้อมูลเป็นค่า Default
  */
 async function clearFormPositionSelect() {
   isEditCheck.value = false;
-  isDisValidate.value = await true;
+  isDisValidate.value = true;
   formPositionSelect.positionId = "";
   formPositionSelect.positionName = "";
   formPositionSelect.positionField = "";
@@ -227,10 +234,76 @@ async function clearFormPositionSelect() {
   formPositionSelect.positionArea = "";
   isSpecial.value = false;
   setTimeout(async () => {
-    isDisValidate.value = await false;
+    isDisValidate.value = false;
   }, 1000);
 }
 
+/**
+ * ฟังก์เรียกข้อมูลรายการประเภทตำแหน่ง
+ */
+async function fetchType() {
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      dataLevel.value = await res.data.result;
+      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันกำหนดตัวเลือกประเภทตำแหน่งตาม id ประเภทตำแหน่ง
+ * @param val id ประเภทตำแหน่ง
+ */
+async function updateSelectType(val: string) {
+  // หาระดับตำแหน่ง
+  const listLevel = dataLevel.value.find((e: DataPosType) => e.id === val);
+  levelOpsMain.value =
+    listLevel?.posLevels.map((e: DataLevel) => ({
+      id: e.id,
+      name: e.posLevelName ? e.posLevelName.toString() : "",
+    })) || [];
+
+  levelOps.value = levelOpsMain.value;
+  formPositionSelect.positionLevel = "";
+}
+
+/**
+ * ฟังก์เรียกข้อมูลรายการตำแหน่งทางการบริหาร
+ */
+async function fetchExecutive() {
+  await http
+    .get(config.API.orgPosExecutive)
+    .then(async (res) => {
+      executiveOpsMain.value = await res.data.result.map(
+        (e: OptionExecutive) => ({
+          id: e.id,
+          name: e.posExecutiveName,
+        })
+      );
+      executiveOps.value = executiveOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * ฟังก์ชันปิด Popup
+ *
+ * และเรียก clearFormPositionSelect() เพื่อกำหนดฟอร์มข่้อมูลเป็น Default
+ */
+function close() {
+  modal.value = false;
+  clearFormPositionSelect();
+}
+
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
  * @param val true/false
@@ -243,57 +316,11 @@ function inputEdit(val: boolean) {
 }
 
 /**
- * function เลือกประเภทตำแหน่ง
- * @param val id ประเภทตำแหน่ง
+ * ดูการเปลี่ยนแปลงของ modal.value
+ *
+ * ถ้าเป็น true ทำการเรียกข้อมูลรายการประเภทตำแหน่ง และ ข้อมูลรายการตำแหน่งทางการบริหาร
+ * และถ้ามี props.data จะกำหนด formPositionSelect เป็นตาม props.data
  */
-function updateSelectType(val: string) {
-  // หาระดับตำแหน่ง
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-    id: e.id,
-    name: e.posLevelName,
-  }));
-  levelOps.value = levelOpsMain.value;
-  formPositionSelect.positionLevel = "";
-}
-
-function close() {
-  modal.value = false;
-  clearFormPositionSelect();
-}
-
-async function fetchType() {
-  http
-    .get(config.API.orgPosType)
-    .then((res) => {
-      dataLevel.value = res.data.result;
-      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
-        id: e.id,
-        name: e.posTypeName,
-      }));
-      typeOps.value = typeOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
-/** function เรียกรายการตำแหน่งทางการบริหาร */
-function fetchExecutive() {
-  http
-    .get(config.API.orgPosExecutive)
-    .then((res) => {
-      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
-        id: e.id,
-        name: e.posExecutiveName,
-      }));
-      executiveOps.value = executiveOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 watch(
   () => modal.value,
   async () => {
@@ -303,8 +330,7 @@ watch(
       hideLoader();
       if (props.data) {
         const dataList = props.data;
-
-        updateSelectType(dataList.posTypeId);
+        await updateSelectType(dataList.posTypeId);
         formPositionSelect.positionId = dataList.id;
         formPositionSelect.positionName = dataList.positionName;
         formPositionSelect.positionField = dataList.positionField;
diff --git a/src/modules/02_organization/components/DialogFormAgency.vue b/src/modules/02_organization/components/DialogFormAgency.vue
index 611bd8b37..aed8c1514 100644
--- a/src/modules/02_organization/components/DialogFormAgency.vue
+++ b/src/modules/02_organization/components/DialogFormAgency.vue
@@ -1,20 +1,30 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   FormDataAgency,
-  FormAgencyRef,
   DataOption,
 } from "@/modules/02_organization/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = useOrganizational();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
+/**
+ * props
+ */
 const level = defineModel<number>("orgLevel", { required: true });
 const actionType = defineModel<string>("actionType", { required: true });
 const props = defineProps({
@@ -46,11 +56,7 @@ const props = defineProps({
   },
 });
 
-const $q = useQuasar();
-const store = useOrganizational();
-const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
-
+//ตัวเลือกระดับส่วนราชการหลัก
 const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับสำนัก", id: "DEPARTMENT" },
   {
@@ -60,18 +66,10 @@ const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
   { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
 ]);
+const orgLevelOption = ref<DataOption[]>([]); //ตัวเลือกระดับส่วนราชการ
+const orgLevelSubOptionMain = ref<DataOption[]>([]); //ตัวเลือกระดับส่วนราชการซับ
 
-const orgLevelSubOptionMain = ref<DataOption[]>([]);
-
-const orgLevelOption = ref<DataOption[]>([]);
-
-const orgNameRef = ref<Object | null>(null);
-const orgShortNameRef = ref<Object | null>(null);
-const orgCodeRef = ref<Object | null>(null);
-
-const orgLevelRef = ref<Object | null>(null);
-const orgLevelSubRef = ref<Object | null>(null);
-
+// ฟอร์มข้อมูล
 const formData = reactive<FormDataAgency>({
   orgName: "",
   orgShortName: "",
@@ -84,35 +82,11 @@ const formData = reactive<FormDataAgency>({
   responsibility: "",
 });
 
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectComplaintsRef: FormAgencyRef = {
-  orgName: orgNameRef,
-  orgShortName: orgShortNameRef,
-  orgCode: orgCodeRef,
-
-  orgLevel: orgLevelRef,
-  orgLevelSub: orgLevelSubRef,
-};
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectComplaintsRef) {
-    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
-      const property = objectComplaintsRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  } else {
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ * ฟังก์ชันบันทึกข้อมูลส่วนราชการ
+ *
+ * ถ้า actionType.value === "ADD" จะบันทึกการเพิ่มข้อมูลส่วนราชการ ไม่ จะบันทึกการแก้ไขข้อมูลส่วนราชการ
+ **/
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -156,7 +130,7 @@ function onSubmit() {
         .then(async () => {
           await props.fetchDataTree(store.draftId);
           await success($q, "บันทึกข้อมูลสำเร็จ");
-          await closeClear();
+          closeClear();
         })
         .catch((err) => {
           messageError($q, err);
@@ -189,7 +163,7 @@ function onSubmit() {
               false
             );
             await success($q, "บันทึกข้อมูลสำเร็จ");
-            await closeClear();
+            closeClear();
           })
           .catch((err) => {
             messageError($q, err);
@@ -202,7 +176,7 @@ function onSubmit() {
 }
 
 /**
- * function เช็ต formdata  กลับไปค่าว่าง และปิด popup
+ * ฟังก์ชันเช็ต formdata กลับไปค่าว่าง และปิด popup
  */
 function closeClear() {
   formData.orgName = "";
@@ -217,73 +191,11 @@ function closeClear() {
 }
 
 /**
- * callback function ทำงานเมื่อมีการเปิด popup
- */
-watch(
-  () => props.modal,
-  () => {
-    if (props.modal === true) {
-      if (actionType.value === "ADD") {
-        if (props.dataNode) {
-          formData.orgCode =
-            props?.dataNode?.orgLevel !== 0
-              ? props?.dataNode.orgTreeCode
-              : undefined;
-          formData.orgShortName =
-            props?.dataNode?.orgLevel !== 0
-              ? props?.dataNode.orgTreeShortName
-              : undefined;
-        }
-
-        if (level.value === 0) {
-          formData.orgLevel = "DEPARTMENT";
-          orgLevelOption.value = orgLevelOptionMain.value;
-        } else {
-          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
-          formData.orgLevel = "";
-        }
-
-        formData.orgLevel == "DEPARTMENT" ? selectOrgLevele("DEPARTMENT") : "";
-      } else {
-        if (props.dataNode) {
-          formData.orgName = props.dataNode.orgTreeName;
-          formData.orgShortName = props.dataNode.orgTreeShortName;
-          formData.orgCode = props.dataNode.orgTreeCode;
-          formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
-          formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
-          formData.orgFax = props.dataNode.orgTreeFax;
-          formData.orgLevel = props.dataNode.orgTreeRank;
-          formData.orgLevelSub = props.dataNode.orgTreeRankSub;
-          formData.responsibility = props.dataNode.responsibility;
-          orgLevelOption.value =
-            props.dataNode.orgTreeRank === "DEPARTMENT"
-              ? orgLevelOptionMain.value
-              : orgLevelOptionMain.value.slice(1, 4);
-          selectOrgLevele(formData.orgLevel, false);
-        }
-      }
-    }
-  }
-);
-
-/**
- * title ของ popup
- */
-const tittleName = computed(() => {
-  let name = "";
-  if (actionType.value === "ADD") {
-    name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
-  } else {
-    name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
-  }
-
-  return name;
-});
-
-/**
- * function เลือกระดับของส่วนราชการ
- * @param val
+ * ฟังก์ชันเลือกระดับของส่วนราชการ
+ * @param val ระดับของส่วนราชการ
  * @param status
+ *
+ * กำหนดตัวเลือกของระดับของส่วนราชการ(ซับ )ตามประเภทระดับของส่วนราชการ
  */
 function selectOrgLevele(val: string, status: boolean = true) {
   formData.orgLevelSub = status ? "" : formData.orgLevelSub;
@@ -338,13 +250,77 @@ function selectOrgLevele(val: string, status: boolean = true) {
       break;
   }
 }
+
+/**
+ * กำหนด Title ของ popup จะถูกตั้งตามประเภทการดำเนินการและระดับที่กำหนด
+ */
+const tittleName = computed(() => {
+  let name = "";
+  if (actionType.value === "ADD") {
+    name = level.value === 0 ? "เพิ่มหน่วยงาน" : "เพิ่มส่วนราชการ";
+  } else {
+    name = level.value === 0 ? "แก้ไขหน่วยงาน" : "แก้ไขส่วนราชการ";
+  }
+
+  return name;
+});
+
+/**
+ * callback function ทำงานเมื่อ props.modal เป็น true
+ */
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      if (actionType.value === "ADD") {
+        if (props.dataNode) {
+          formData.orgCode =
+            props?.dataNode?.orgLevel !== 0
+              ? props?.dataNode.orgTreeCode
+              : undefined;
+          formData.orgShortName =
+            props?.dataNode?.orgLevel !== 0
+              ? props?.dataNode.orgTreeShortName
+              : undefined;
+        }
+
+        if (level.value === 0) {
+          formData.orgLevel = "DEPARTMENT";
+          orgLevelOption.value = orgLevelOptionMain.value;
+        } else {
+          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
+          formData.orgLevel = "";
+        }
+
+        formData.orgLevel == "DEPARTMENT" ? selectOrgLevele("DEPARTMENT") : "";
+      } else {
+        if (props.dataNode) {
+          formData.orgName = props.dataNode.orgTreeName;
+          formData.orgShortName = props.dataNode.orgTreeShortName;
+          formData.orgCode = props.dataNode.orgTreeCode;
+          formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
+          formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
+          formData.orgFax = props.dataNode.orgTreeFax;
+          formData.orgLevel = props.dataNode.orgTreeRank;
+          formData.orgLevelSub = props.dataNode.orgTreeRankSub;
+          formData.responsibility = props.dataNode.responsibility;
+          orgLevelOption.value =
+            props.dataNode.orgTreeRank === "DEPARTMENT"
+              ? orgLevelOptionMain.value
+              : orgLevelOptionMain.value.slice(1, 4);
+          selectOrgLevele(formData.orgLevel, false);
+        }
+      }
+    }
+  }
+);
 </script>
 
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 60vw">
-        <form @submit.prevent="validateForm">
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
           <DialogHeader :tittle="tittleName" :close="closeClear" />
           <q-separator />
           <q-card-section>
@@ -517,7 +493,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
               <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
             >
           </q-card-actions>
-        </form>
+        </q-form>
       </q-card>
     </q-dialog>
   </template>
diff --git a/src/modules/02_organization/components/DialogFormDateTime.vue b/src/modules/02_organization/components/DialogFormDateTime.vue
index 0140a1431..ca89468f7 100644
--- a/src/modules/02_organization/components/DialogFormDateTime.vue
+++ b/src/modules/02_organization/components/DialogFormDateTime.vue
@@ -1,13 +1,28 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { FormDateTimeRef } from "@/modules/02_organization/interface/index/Main";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useOrganizational();
+const {
+  dialogConfirm,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+/**
+ * porps
+ */
 const props = defineProps({
   modal: Boolean,
   close: Function,
@@ -18,51 +33,20 @@ const props = defineProps({
   },
 });
 
-const store = useOrganizational();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  date2Thai,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
+const dateTime = ref<Date | null>(null); //เวลาเผยแพร่
 
+/**
+ * กำหนดวันที่เผยแพร่ไม่ให้น้อยกว่าวันปัจจุบัน
+ */
 const minDate = computed(() => {
   const date = new Date();
   date.setDate(date.getDate() + 1);
   return date;
 });
-const dateTimeRef = ref<Object | null>(null);
 
-const dateTime = ref<Date | null>();
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectRef: FormDateTimeRef = {
-  dateTime: dateTimeRef,
-};
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  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);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  } else {
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ * ฟังก์ชันบันทึกการตั้งเวลาเผยแพร่
+ */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -72,8 +56,8 @@ function onSubmit() {
       })
       .then(async () => {
         await props.fetchActive();
-        await props.close?.();
         await success($q, "บันทึกข้อมูลสำเร็จ");
+        props.close?.();
       })
       .catch((e) => {
         messageError($q, e);
@@ -84,6 +68,9 @@ function onSubmit() {
   });
 }
 
+/**
+ * ฟังก์ชันยืนยันการเผยแพร่โครงาสร้าง
+ */
 function onClickPublish() {
   dialogConfirm(
     $q,
@@ -106,20 +93,25 @@ function onClickPublish() {
     "ต้องการยืนยันการเผยเเพร่ข้อมูลนี้ใช่หรือไม่?"
   );
 }
+
+/**
+ * ดูการเปลี่ยนแปลงของ props.modal
+ */
 watch(
   () => props.modal,
   () => {
-    if (props.modal === true) {
+    if (props.modal) {
       dateTime.value = store.orgPublishDate ? store.orgPublishDate : null;
     }
   }
 );
 </script>
+
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 18vw">
-        <form @submit.prevent="validateForm">
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
           <DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
           <q-separator />
 
@@ -179,7 +171,7 @@ watch(
             <q-space />
             <q-btn type="submit" :label="`บันทึก`" color="public" />
           </q-card-actions>
-        </form>
+        </q-form>
       </q-card>
     </q-dialog>
   </template>
diff --git a/src/modules/02_organization/components/DialogFormPosition.vue b/src/modules/02_organization/components/DialogFormPosition.vue
index a96d04593..22d155045 100644
--- a/src/modules/02_organization/components/DialogFormPosition.vue
+++ b/src/modules/02_organization/components/DialogFormPosition.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
@@ -10,16 +12,11 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type {
   FormDataPosition,
-  FormPositionRef,
   DataOption,
   FormPositionSelect,
   RowDetailPositions,
   ListMenu,
 } from "@/modules/02_organization/interface/index/Main";
-import type {
-  OptionType,
-  OptionExecutive,
-} from "@/modules/02_organization/interface/response/organizational";
 import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
 
 /**
@@ -28,11 +25,6 @@ import type { FilterMaster } from "@/modules/02_organization/interface/request/o
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogAddPosition from "@/modules/02_organization/components/DialogAddPosition.vue"; //เพิ่มข้อมูลตำแหน่ง
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -51,7 +43,7 @@ const {
 /**
  * props
  */
-const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true }); // qurey
 const props = defineProps({
   modal: Boolean,
   close: Function,
@@ -64,14 +56,15 @@ const props = defineProps({
   shortName: { type: String, required: true },
 });
 
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
-const isPosition = ref<boolean>(false);
-const dataCopy = ref<any>();
-const search = ref<string>("");
-const type = ref<string>("positionName");
+const isEdit = ref<boolean>(false); //การแก้ไข
+const modalAdd = 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: "ตำแหน่งในสายงาน" },
   { id: "positionField", name: "สายงาน" },
@@ -81,37 +74,8 @@ const optionFilter = ref<DataOption[]>([
   { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
   { id: "positionArea", name: "ด้าน/สาขา" },
 ]);
-const typeOpsMain = ref<DataOption[]>([]);
-const executiveOpsMain = ref<DataOption[]>([]);
-const executiveOps = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "คัดลอก",
-    icon: "mdi-content-copy",
-    type: "copy",
-    color: "blue-6",
-  },
-  {
-    label: "แก้ไข",
-    icon: "mdi-pencil",
-    type: "edit",
-    color: "edit",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "remove",
-    color: "red",
-  },
-]);
-
-const rows = ref<RowDetailPositions[]>([]);
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-
-const prefixNoRef = ref<Object | null>(null);
-const positionNoRef = ref<Object | null>(null);
 
+//ฟอร์มอัตรากำลัง
 const formData = reactive<FormDataPosition>({
   shortName: props.shortName,
   prefixNo: "",
@@ -122,6 +86,7 @@ const formData = reactive<FormDataPosition>({
   isOfficer: false,
 });
 
+//ฟอร์มตำแหน่ง
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
   positionName: "",
@@ -132,12 +97,10 @@ const formPositionSelect = reactive<FormPositionSelect>({
   positionExecutiveField: "",
   positionArea: "",
 });
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectPositionRef: FormPositionRef = {
-  prefixNo: prefixNoRef,
-  positionNo: positionNoRef,
-};
 
+//Table
+const rows = ref<RowDetailPositions[]>([]); //ข้อมูลรายการอัตรากำลัง
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); //ข้อมูลรายากรตำแหน่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -222,6 +185,27 @@ const visibleColumns = ref<string[]>([
   "positionExecutiveField",
   "positionArea",
 ]);
+//รายการเมนู
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "blue-6",
+  },
+  {
+    label: "แก้ไข",
+    icon: "mdi-pencil",
+    type: "edit",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
 
 /**
  * function fetch ข้อมูลอัตรากำลัง
@@ -249,219 +233,132 @@ async function fetchPosition(id: string) {
     });
 }
 
-const dataLevel = ref<any>();
-/** function เรียกรายการประเภทตำแหน่ง */
-async function fetchType() {
-  // showLoader();
-  await http
-    .get(config.API.orgPosType)
-    .then((res) => {
-      dataLevel.value = res.data.result;
-      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
-        id: e.id,
-        name: e.posTypeName,
-      }));
-      typeOps.value = typeOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      // hideLoader();
-    });
-}
-
-/** function เรียกรายการตำแหน่งทางการบริหาร */
-async function fetchExecutive() {
-  // showLoader();
-  await http
-    .get(config.API.orgPosExecutive)
-    .then((res) => {
-      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
-        id: e.id,
-        name: e.posExecutiveName,
-      }));
-      executiveOps.value = executiveOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      // hideLoader();
-    });
-}
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-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();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ * ฟังก์ชั่นยืนยันการบันทึกข้อมูลอัตรากำลัง
+ *
+ * ถ้า  props.actionType เป็น "ADD" หรือ "COPY" จะเพิ่มรายการตำแหน่ง ไม่จะเป็นการแก้ไขข้อมูล
+ *
+ */
 function onSubmit() {
-  dialogConfirm($q, async () => {
-    const positionsData = rows.value.map((e: any) => ({
-      posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-      posDictField: e.positionField, //สายงาน
-      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
-      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
-      posExecutiveId: e.posExecutiveId ? e.posExecutiveId : "", //ตำแหน่งทางการบริหาร
-      posDictExecutiveField: e.positionExecutiveField, //ด้านทางการบริหาร
-      posDictArea: e.positionArea, //ด้าน/สาขา
-      isSpecial: e.isSpecial,
-      positionIsSelected: e.positionIsSelected,
-    }));
-    const body = {
-      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-      posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
-      posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      isDirector: formData.isDirector,
-      isOfficer: formData.isOfficer ? formData.isOfficer : false,
-      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,
-    };
+  //ตราจสอบรายการตำแหน่งถ้าไม่มีแสดงข้อความแจ้งเตือน
+  if (rows.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
+  } else {
+    //ถ้ามีแสดง dialog ยืนยัน
+    dialogConfirm($q, async () => {
+      const positionsData = rows.value.map((e: RowDetailPositions) => ({
+        posDictName: e.positionName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+        posDictField: e.positionField, //สายงาน
+        posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+        posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+        posExecutiveId: e.posExecutiveId ? e.posExecutiveId : "", //ตำแหน่งทางการบริหาร
+        posDictExecutiveField: e.positionExecutiveField, //ด้านทางการบริหาร
+        posDictArea: e.positionArea, //ด้าน/สาขา
+        isSpecial: e.isSpecial,
+        positionIsSelected: e.positionIsSelected,
+      }));
+      const body = {
+        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+        posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
+        posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        isDirector: formData.isDirector,
+        isOfficer: formData.isOfficer ? formData.isOfficer : false,
+        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,
+      };
 
-    showLoader();
-    props.actionType === "ADD" || props.actionType === "COPY"
-      ? await http
-          .post(config.API.orgPosMaster, body)
-          .then(async () => {
-            await props.fetchDataTable?.(
-              reqMaster.value.id,
-              reqMaster.value.type,
-              false
-            );
-            await props.getSummary?.();
-            await close();
-            await success($q, "เพิ่มข้อมูลสำเร็จ");
-          })
-          .catch((err) => {
-            messageError($q, err);
-          })
-          .finally(() => {
-            hideLoader();
-          })
-      : props.rowId &&
-        (await http
-          .put(config.API.orgPosMasterById(props.rowId), body)
-          .then(async () => {
-            await props.fetchDataTable?.(
-              reqMaster.value.id,
-              reqMaster.value.type,
-              false
-            );
-            await close();
-            await success($q, "แก้ไขข้อมูลสำเร็จ");
-          })
-          .catch((err) => {
-            messageError($q, err);
-          })
-          .finally(() => {
-            hideLoader();
-          }));
-  });
-}
-
-/** input ค้นหา */
-const searchRef = ref<any>(null);
-async function searchInput() {
-  searchRef.value.validate();
-  if (!searchRef.value.hasError) {
-    showLoader();
-    await http
-      .get(
-        config.API.orgPosPosition +
-          `?keyword=${search.value}&type=${type.value}`
-      )
-      .then((res) => {
-        rowsPositionSelect.value = res.data.result;
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
+      showLoader();
+      props.actionType === "ADD" || props.actionType === "COPY"
+        ? await http
+            .post(config.API.orgPosMaster, body)
+            .then(async () => {
+              await props.fetchDataTable?.(
+                reqMaster.value.id,
+                reqMaster.value.type,
+                false
+              );
+              await props.getSummary?.();
+              await success($q, "เพิ่มข้อมูลสำเร็จ");
+              close();
+            })
+            .catch((err) => {
+              messageError($q, err);
+            })
+            .finally(() => {
+              hideLoader();
+            })
+        : props.rowId &&
+          (await http
+            .put(config.API.orgPosMasterById(props.rowId), body)
+            .then(async () => {
+              await props.fetchDataTable?.(
+                reqMaster.value.id,
+                reqMaster.value.type,
+                false
+              );
+              await success($q, "แก้ไขข้อมูลสำเร็จ");
+              close();
+            })
+            .catch((err) => {
+              messageError($q, err);
+            })
+            .finally(() => {
+              hideLoader();
+            }));
+    });
   }
 }
 
 /**
- * คัดลอกข้อมูล
- * @param data ข้อมูลตำแหน่ง
+ * ฟังก์ชันต้นหาตำแหน่งที่ต้องการเพิ่ม
+ */
+async function searchInput() {
+  showLoader();
+  await http
+    .get(
+      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+    )
+    .then((res) => {
+      rowsPositionSelect.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันคัดลอกข้อมูลตำแหน่ง
+ * @param data ข้อมูลตำแหน่งที่ต้องการคัดลอก
  */
 function copyDetiail(data: RowDetailPositions) {
   modalAdd.value = true;
   dataCopy.value = data;
 }
 /**
- * แก้ไขข้อมูล
- * @param data ข้อมูลตำแหน่ง
+ * ฟังก์ชันแก้ไขข้อมูลตำแหน่ง
+ * @param data ข้อมูลตำแหน่งที่ต้องการแก้ไข
  */
 function editDetiail(data: RowDetailPositions) {
   isEdit.value = true;
   modalAdd.value = true;
   dataCopy.value = data;
-  console.log(isEdit.value);
 }
 
 /**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
+ * ฟังก์ชันเพิ่มข้อมูลรายการอัตรากำลัง
+ * @param data ข้อมูลตำแหน่งที่ต้องการเพิ่ม
  */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
-watch(
-  () => props.modal,
-  async () => {
-    if (props.modal === true) {
-      props.actionType === "ADD" && showLoader();
-      await Promise.all([fetchType(), fetchExecutive()]);
-      props.actionType === "ADD" && hideLoader();
-
-      if (props.actionType === "ADD") {
-        rowsPositionSelect.value = [];
-        search.value = "";
-        rows.value = [];
-        clearFormPositionSelect();
-        formData.prefixNo = "";
-        formData.positionNo = "";
-        formData.suffixNo = "";
-        formData.reason = "";
-      } else {
-        props.rowId && fetchPosition(props.rowId);
-      }
-    }
-  }
-);
-
 async function addPosition(data: RowDetailPositions) {
-  const isIdExist = await rows.value.some(
-    (item: any) =>
+  const isIdExist = rows.value.some(
+    (item: RowDetailPositions) =>
       item.posExecutiveId == data.posExecutiveId &&
       item.positionField == data.positionField &&
       item.posLevelId == data.posLevelId &&
@@ -478,18 +375,20 @@ async function addPosition(data: RowDetailPositions) {
 }
 
 /**
- * function ลบข้อมูลอัตรากำลัง
- * @param id ข้อมูลอัตรากำลัง
+ * ฟังก์ชันลบรายการข้อมูลอัตรากำลัง
+ * @param id รายการข้อมูลอัตรากำลังที่จ้องการลบ
  */
 function deleteData(id: string) {
   const dataRow = rows.value;
-  const updatedRows = dataRow.filter((item: any) => item.id !== id);
+  const updatedRows = dataRow.filter(
+    (item: RowDetailPositions) => item.id !== id
+  );
   rows.value = updatedRows;
 }
 
 /**
- * function ลบตำแหน่ง
- * @param id ตำแหน่ง
+ * ฟังก์ชันลบข้อมูลรายการตำแหน่ง
+ * @param id ข้อมูลรายการตำแหน่งที่ต้องการลบ
  */
 function deletePos(id: string) {
   dialogRemove($q, () => {
@@ -510,10 +409,9 @@ function deletePos(id: string) {
 }
 
 /**
- * function เคลียร์ formData
+ * ฟังก์ชันกำหนดตัวแปรทั้งหมดให้เป็นค่า Default
  */
 async function clearFormPositionSelect() {
-  isDisValidate.value = await true;
   formPositionSelect.positionId = "";
   formPositionSelect.positionName = "";
   formPositionSelect.positionField = "";
@@ -522,27 +420,64 @@ async function clearFormPositionSelect() {
   formPositionSelect.positionExecutive = "";
   formPositionSelect.positionExecutiveField = "";
   formPositionSelect.positionArea = "";
-
-  setTimeout(async () => {
-    isDisValidate.value = await false;
-  }, 1000);
-}
-
-/**
- * function ปิด popup
- */
-function close() {
-  clearFormPositionSelect();
-  props.close?.();
+  search.value = "";
+  rows.value = [];
+  formData.prefixNo = "";
+  formData.positionNo = "";
+  formData.suffixNo = "";
+  formData.reason = "";
+  formData.isDirector = false;
+  rowsPositionSelect.value = [];
   isPosition.value = false;
 }
 
-async function emitSearch(keyword: string, typeSelect: string) {
-  search.value = await keyword;
-  type.value = await typeSelect;
+/**
+ * ฟังก์ชัน ปิด popup
+ *
+ * และกำหนดตัวแปรทั้งหมดให้เป็นค่า Default
+ */
+function close() {
+  props.close?.();
+  clearFormPositionSelect();
+}
 
+/**
+ *  ฟังก์ชันค้นหาข้อมูลตำแหน่ง
+ * @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,
+  };
+}
+
+/**
+ * ดูการเปลี่ยยนแปลง props.modal
+ *
+ * เมื่อ props.modal เป็น true
+ */
+watch(
+  () => props.modal,
+  async () => {
+    if (props.modal === true) {
+      if (props.actionType !== "ADD" && props.rowId) {
+        fetchPosition(props.rowId);
+      }
+    }
+  }
+);
 </script>
 
 <template>
@@ -555,7 +490,7 @@ async function emitSearch(keyword: string, typeSelect: string) {
         :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">
@@ -754,7 +689,7 @@ async function emitSearch(keyword: string, typeSelect: string) {
                     flat
                     round
                     color="teal"
-                    @click="() => ((modalAdd = true), (dataCopy = null))"
+                    @click="() => ((modalAdd = true), (dataCopy = undefined))"
                     ><q-tooltip>สร้างตำแหน่ง</q-tooltip></q-btn
                   >
                 </div>
@@ -777,16 +712,15 @@ async function emitSearch(keyword: string, typeSelect: string) {
 
                     <div class="col-12 col-sm-6 col-md-6">
                       <q-input
-                        ref="searchRef"
                         :class="inputEdit(isReadonly)"
                         v-model="search"
                         outlined
                         clearable
+                        @clear="search = ''"
                         dense
                         lazy-rules
                         label="คำค้น"
                         hide-bottom-space
-                        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
                         @keydown.enter.prevent="searchInput()"
                       />
                     </div>
@@ -929,7 +863,7 @@ async function emitSearch(keyword: string, typeSelect: string) {
             ><q-tooltip>บันทึก</q-tooltip></q-btn
           >
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 
diff --git a/src/modules/02_organization/components/DialogHistory.vue b/src/modules/02_organization/components/DialogHistory.vue
index 0433109e7..de6458110 100644
--- a/src/modules/02_organization/components/DialogHistory.vue
+++ b/src/modules/02_organization/components/DialogHistory.vue
@@ -1,8 +1,10 @@
 <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";
 
 /**
  * importType
@@ -15,11 +17,6 @@ import type { HistoryPostType } from "@/modules/02_organization/interface/index/
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -37,14 +34,14 @@ const orgId = defineModel<string>("orgId", { required: true });
 /**
  * ข้อมุล Table
  */
-const rows = ref<HistoryPostType[]>([]);
+const rows = ref<HistoryPostType[]>([]); //ข้อมูลรายการประวัติหน่วยงาน
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: "no",
+    field: (row) => rows.value.indexOf(row) + 1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -72,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
-    field: "lastUpdatedAt",
+    field: (v) => date2Thai(v),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -85,26 +82,18 @@ const visibleColumns = ref<string[]>([
 ]);
 
 /**
- * function เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
+ * function เรียกข้อมูลประวัติหน่วยงาน,ประวัติส่วนราชการ
  */
-function postData() {
+async function fetchHistory() {
   showLoader();
-  http
+  await http
     .post(config.API.organizationHistoryPostNew, {
       id: orgId.value,
       type: type.value,
     })
-    .then((res) => {
-      const dataList = res.data.result;
-      const dataMap = dataList.map((item: HistoryPostType) => ({
-        id: item.id ? item.id : "-",
-        name: item.name ? item.name : "-",
-        lastUpdatedAt: item.lastUpdatedAt
-          ? date2Thai(item.lastUpdatedAt as Date, false, true)
-          : "-",
-        orgRevisionName: item.orgRevisionName ? item.orgRevisionName : "-",
-      }));
-      rows.value = dataMap;
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -115,13 +104,13 @@ function postData() {
 }
 
 /**
- * callback function  เมื่อ modal = true เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
+ * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true จะเรียกข้อมูลประวัติหน่วยงาน,ประวัติส่วนราชการ
  */
 watch(
   () => modal.value,
   () => {
     if (modal.value == true) {
-      postData();
+      fetchHistory();
     }
   }
 );
@@ -177,43 +166,8 @@ watch(
                       :key="col.name"
                       :props="props"
                     >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
-
-                      <div v-else-if="col.name == 'orgRevisionIsCurrent'">
-                        <q-icon
-                          :name="
-                            props.row.orgRevisionIsCurrent == true
-                              ? 'mdi-check'
-                              : ''
-                          "
-                          :color="
-                            props.row.orgRevisionIsCurrent == true
-                              ? 'positive'
-                              : ''
-                          "
-                          class="text-h5"
-                        />
-                      </div>
-                      <div v-else-if="col.name == 'orgRevisionIsDraft'">
-                        <q-icon
-                          :name="
-                            props.row.orgRevisionIsDraft == true
-                              ? 'mdi-check'
-                              : ''
-                          "
-                          :color="
-                            props.row.orgRevisionIsDraft == true
-                              ? 'positive'
-                              : ''
-                          "
-                          class="text-h5"
-                        />
-                      </div>
-
-                      <div v-else>
-                        {{ col.value }}
+                      <div>
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
diff --git a/src/modules/02_organization/components/DialogHistoryPos.vue b/src/modules/02_organization/components/DialogHistoryPos.vue
index 7e1e624f9..e8f0eff7b 100644
--- a/src/modules/02_organization/components/DialogHistoryPos.vue
+++ b/src/modules/02_organization/components/DialogHistoryPos.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 { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /**
  * import Type
@@ -15,16 +18,10 @@ import type { HistoryPos } from "@/modules/02_organization/interface/response/or
  */
 import Header from "@/components/DialogHeader.vue";
 
-/**
- * import Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /** Use*/
+const $q = useQuasar();
 const store = useOrganizational();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
-const $q = useQuasar();
 
 /**
  * props
@@ -39,7 +36,7 @@ const props = defineProps({
 /**
  * ข้อมูล Table
  */
-const rows = ref<HistoryPos[]>([]);
+const rows = ref<HistoryPos[]>([]); //ข้อมูลรายการประวัติตำแหน่ง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -156,7 +153,7 @@ function fetchHistoryPos(id: string) {
   http
     .get(config.API.orgPosHistory(id))
     .then((res) => {
-      const data: HistoryPos[] = res.data.result;
+      const data = res.data.result;
       rows.value = data;
     })
     .catch((err) => {
@@ -168,7 +165,7 @@ function fetchHistoryPos(id: string) {
 }
 
 /**
- * callback function ทำงานเมื่อ   modal === true
+ * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true จะเรียกเรียกข้อมูลประวัติตำแหน่ง
  */
 watch(
   () => modal.value,
diff --git a/src/modules/02_organization/components/DialogMovePos.vue b/src/modules/02_organization/components/DialogMovePos.vue
index b81992dbf..8a37ad70a 100644
--- a/src/modules/02_organization/components/DialogMovePos.vue
+++ b/src/modules/02_organization/components/DialogMovePos.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /**
  * importType
@@ -24,12 +27,6 @@ import type { DataTree } from "@/modules/02_organization/interface/index/organiz
  */
 import HeaderDialog from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
@@ -72,19 +69,24 @@ const props = defineProps({
   },
 });
 
-const title = ref<string>("ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน");
-const filterTree = ref<string>("");
-const filterRef = ref();
-const selectedTree = ref<string>("");
-const levelTree = ref<number>(0);
-const filterTable = ref<string>("");
-const selectedFilter = ref<PosMaster2[]>([]);
+const title = ref<string>("ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน"); //title Dialog
+const filterTree = ref<string>(""); //ค้นหาหน่วยงาน/ส่วนราชการปลายทาง
+const filterRef = ref(); //
+const selectedTree = ref<string>(""); //หน่วยงานที่ต้องการย้าย
+const levelTree = ref<number>(0); //ระดับหน่วยงานที่ต้องการย้าย
+const filterTable = ref<string>(""); //ค้นหาตำแหน่งที่ต้องการย้าย
+const selectedFilter = ref<PosMaster2[]>([]); //ตำแหน่งที่ต้องการย้าย
 
 const pagination = ref({
   page: reqMaster.value.page,
   rowsPerPage: reqMaster.value.pageSize,
 });
 
+/**
+ * ปิดปุ่มย้ายตำแหน่ง
+ *
+ * เมื่อไม่ได้เลือกตำแหน่งที่ต้องการย้ายและหน่วยงานที่ต้องการย้ายปุ่มย้ายตำแหน่งจะปืด
+ */
 const isDisable = computed(() => {
   if (selectedTree.value === "" && selectedFilter.value.length === 0) {
     return true;
@@ -146,6 +148,18 @@ function onClickMovePos() {
   }
 }
 
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+/**
+ * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true
+ */
 watch(
   () => modal.value,
   () => {
@@ -164,15 +178,6 @@ watch(
     }
   }
 );
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  reqMaster.value.pageSize = newPagination.rowsPerPage;
-  reqMaster.value.page = 1;
-}
 </script>
 
 <template>
diff --git a/src/modules/02_organization/components/DialogNewStructure.vue b/src/modules/02_organization/components/DialogNewStructure.vue
index e3c5def52..31ae5f228 100644
--- a/src/modules/02_organization/components/DialogNewStructure.vue
+++ b/src/modules/02_organization/components/DialogNewStructure.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 { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /**
  * importType
@@ -17,12 +20,6 @@ import type {
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
@@ -45,6 +42,7 @@ const props = defineProps({
   },
 });
 
+//ตัวเลือกการเพิ่มโครงสร้าง
 const typeOp = ref<DataOption[]>([
   {
     id: "NEW",
@@ -64,10 +62,7 @@ const typeOp = ref<DataOption[]>([
   },
 ]);
 
-const orgRevisionNameRef = ref<Object | null>(null);
-const typeRef = ref<Object | null>(null);
-const orgRevisionIdRef = ref<Object | null>(null);
-
+//ฟอร์มเพิ่มโครงสร้าง
 const formData = reactive<FormDataNewStructure>({
   orgRevisionId: "",
   orgRevisionName: "",
@@ -75,42 +70,14 @@ const formData = reactive<FormDataNewStructure>({
 });
 
 /**
- * maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ
- */
-const objectRef: FormNewStructureRef = {
-  orgRevisionName: orgRevisionNameRef,
-  type: typeRef,
-  orgRevisionId: orgRevisionIdRef,
-};
-
-/**
- * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
- */
-function validateForm() {
-  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);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
-}
-
-/**
- * ฟังชั่น บันทึก
+ * ฟังก์ชันยืนยันการบันทึกการกสร้างโครงสร้าง
  */
 function onSubmit() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      http
+      await http
         .post(config.API.createOrganization, formData)
         .then(async (res) => {
           await props.fetchActive();
@@ -119,14 +86,13 @@ function onSubmit() {
           store.draftId = res.data.result.id;
           store.statusView = "list";
           success($q, "บันทึกข้อมูลสำเร็จ");
+          close();
         })
         .catch((err) => {
           messageError($q, err);
         })
         .finally(() => {
-          modal.value = false;
           hideLoader();
-          close();
         });
     },
     "ยืนยันการเพิ่มโครงสร้าง",
@@ -137,7 +103,7 @@ function onSubmit() {
 }
 
 /**
- * ฟังชั่น ปิด popup
+ * ฟังก์ชัน ปิด popup และกำหนดฟอร์มเพิ่มโครงสร้างเป็น Default
  */
 function close() {
   modal.value = false;
@@ -147,7 +113,7 @@ function close() {
 }
 
 /**
- * เรียกข้อมูล
+ * ฟังก์ชันเรียกข้อมูลประวัติโครงสร้าง
  */
 function fetchOrgRevision() {
   showLoader();
@@ -159,7 +125,7 @@ function fetchOrgRevision() {
       );
       if (data) {
         const currentStr = await data.find(
-          (x: any) => x.orgRevisionIsCurrent === true
+          (x: HistoryType) => x.orgRevisionIsCurrent === true
         );
         formData.orgRevisionId = currentStr ? currentStr.orgRevisionId : null;
       }
@@ -172,6 +138,11 @@ function fetchOrgRevision() {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลง  modal เมื่อเป็น true
+ *
+ * type ไม่เป็นการสร้างใหม่ให้เรียกข้อมูลประวัติโครงสร้าง
+ */
 watch(
   () => modal.value,
   () => {
@@ -184,7 +155,7 @@ watch(
   <template>
     <q-dialog v-model="modal" persistent>
       <q-card style="min-width: 50vw">
-        <form @submit.prevent="validateForm">
+        <q-form greedy @submit.prevent @validation-success="onSubmit">
           <DialogHeader :tittle="`เพิ่มโครงสร้าง`" :close="close" />
           <q-separator />
 
@@ -227,7 +198,7 @@ watch(
           <q-card-actions align="right" class="bg-white text-teal">
             <q-btn type="submit" :label="`บันทึก`" color="public" />
           </q-card-actions>
-        </form>
+        </q-form>
       </q-card>
     </q-dialog>
   </template>
diff --git a/src/modules/02_organization/components/DialogPositionDetail.vue b/src/modules/02_organization/components/DialogPositionDetail.vue
index 850faf3e7..38c3e3ad5 100644
--- a/src/modules/02_organization/components/DialogPositionDetail.vue
+++ b/src/modules/02_organization/components/DialogPositionDetail.vue
@@ -2,6 +2,8 @@
 import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+
 /**
  * import type
  */
@@ -12,11 +14,6 @@ import type { FormDetailPosition } from "@/modules/02_organization/interface/ind
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
diff --git a/src/modules/02_organization/components/DialogSelectPerson.vue b/src/modules/02_organization/components/DialogSelectPerson.vue
index 19964e8fe..6fea3d1fa 100644
--- a/src/modules/02_organization/components/DialogSelectPerson.vue
+++ b/src/modules/02_organization/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 { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /**
  * importType
@@ -29,12 +32,6 @@ import type {
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
@@ -70,13 +67,13 @@ 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 dataLevel = ref<TypePos[]>([]);
-const selected = ref<Position[]>([]);
-const isSit = ref<boolean>(false);
+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 isSit = ref<boolean>(false); //นั่งทับตำแหน่ง
 
 const formData = reactive<FormPositionFilter>({
   positionNo: "", //*ตำแหน่งเลขที่
@@ -230,13 +227,6 @@ const columnsResult = ref<QTableProps["columns"]>([
   },
 ]);
 
-/**
- * function closePopup
- */
-function close() {
-  modal.value = false;
-}
-
 /**
  * function เรียกข้อมูลประเภทตำแหน่ง
  */
@@ -260,17 +250,6 @@ function fetchType() {
     });
 }
 
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 /**
  * function เรียกข้แมูลระดับตำแหน่ง
  */
@@ -317,7 +296,7 @@ function onSubmit() {
           await props.fetchDataTable?.(store.treeId, store.level, false);
           await props.getSummary();
           success($q, "บันทึกข้อมูลสำเร็จ");
-          modal.value = false;
+          close();
         })
         .catch((err) => {
           messageError($q, err);
@@ -381,7 +360,7 @@ function updatePagination(newPagination: NewPagination) {
 }
 
 /**
- * function เคลียร์Form
+ * function เคลียร์ตัวแปรเป็นค่า Default
  */
 function clearForm() {
   formData.positionType = "";
@@ -396,13 +375,39 @@ function clearForm() {
 }
 
 /**
- * function เคลียร์ตำแหน่ง
+ * function เคลียร์ประเภทตำแหน่งและระดับตำแหน่ง
  */
 function clearPosition() {
   formData.positionType = "";
   formData.positionLevel = "";
 }
 
+/**
+ * function ปิด popup
+ */
+function close() {
+  modal.value = false;
+  clearForm();
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination
+ */
+watch([() => page.value, () => pageSize.value], () => {
+  searchData();
+});
+
 /**
  * callback function ทำงานเมื่อเปิด popup
  */
@@ -410,7 +415,6 @@ watch(
   () => modal.value,
   async () => {
     if (modal.value == true) {
-      await clearForm();
       await fetchType();
 
       if (props.dataDetailPos) {
@@ -440,13 +444,6 @@ watch(
     }
   }
 );
-
-/**
- * callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination
- */
-watch([() => page.value, () => pageSize.value], () => {
-  searchData();
-});
 </script>
 
 <template>
diff --git a/src/modules/02_organization/components/DialogSortAgency.vue b/src/modules/02_organization/components/DialogSortAgency.vue
index ebb7377a1..0df57ec48 100644
--- a/src/modules/02_organization/components/DialogSortAgency.vue
+++ b/src/modules/02_organization/components/DialogSortAgency.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 { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /**
  * importType
@@ -15,12 +18,6 @@ import type { DataSortAgency } from "@/modules/02_organization/interface/index/o
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
diff --git a/src/modules/02_organization/components/DialogSortPosition.vue b/src/modules/02_organization/components/DialogSortPosition.vue
index 1e328db74..b15e655f9 100644
--- a/src/modules/02_organization/components/DialogSortPosition.vue
+++ b/src/modules/02_organization/components/DialogSortPosition.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/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 { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /**
  * use
  */
diff --git a/src/modules/02_organization/components/DialogStructureDetail.vue b/src/modules/02_organization/components/DialogStructureDetail.vue
index 5168ed11b..ddb743660 100644
--- a/src/modules/02_organization/components/DialogStructureDetail.vue
+++ b/src/modules/02_organization/components/DialogStructureDetail.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useOrganizational();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 
 const modal = defineModel<boolean>("structureDetail", { required: true });
 const treeId = defineModel<string>("treeId", { required: true });
@@ -30,12 +30,17 @@ const formData = reactive<any>({
   orgShortName: "",
 });
 
+/**
+ * function ดึงข้อมูลรายละเอียดโหนดขอโครงสร้างตาม ID โหนดโครงสร้าง
+ * @param id id โหนดโครงสร้าง
+ * @param type ระดับโหนดของโครงอสร้าง
+ */
 async function fetchDetailTree(id: string, type: string) {
   showLoader();
   await http
     .get(config.API.orgLevelByid(type.toLocaleLowerCase(), id))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       const range = data[`org${type}Rank`];
       formData.orgName = data.orgRootName ? data.orgRootName : "-";
       formData.agencyName = data.orgName ? data.orgName : "-";
@@ -60,10 +65,19 @@ async function fetchDetailTree(id: string, type: string) {
     });
 }
 
+/**
+ * function ปิด popup
+ */
 function close() {
   modal.value = false;
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * เมื่อ modal เป็น true จะส่งระดับของโหนดไปเช็ค
+ * และจะดึงข้อมูลรายละเอียดโหนดขอโครงสร้างตาม ID และ ระดับ โหนดโครงสร้าง
+ */
 watch(
   () => modal.value,
   async () => {
diff --git a/src/modules/02_organization/components/DialogSuccession.vue b/src/modules/02_organization/components/DialogSuccession.vue
index 3361210e9..abd5ee000 100644
--- a/src/modules/02_organization/components/DialogSuccession.vue
+++ b/src/modules/02_organization/components/DialogSuccession.vue
@@ -3,6 +3,8 @@ import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,10 +22,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-
 /** use*/
 const $q = useQuasar();
 const store = useOrganizational();
@@ -49,7 +47,9 @@ const selectedTree = ref<string>("");
 const filterRef = ref();
 const levelTree = ref<number>(0);
 
-/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
+/**
+ * function เรียกข้อมูล Tree แบบ ปัจจุบัน
+ */
 async function fetchTree() {
   showLoader();
   const id: string = store.activeId ? store.activeId?.toString() : "";
@@ -66,23 +66,28 @@ async function fetchTree() {
     });
 }
 
-/** resetFilterTree*/
+/**
+ * resetFilterTree
+ */
 function resetFilter() {
   filterTree.value = "";
   filterRef.value.focus();
 }
 
-/** function เลือกหน่วยงาน*/
+/**
+ * function เลือกหน่วยงาน
+ *
+ * และโหลดช้อมูลตำแหน่ง
+ */
 async function updateSelected(data: DataTree) {
   levelTree.value = data.orgLevel;
   selectedTree.value = data.orgTreeId;
-  reqMaster.id = await data.orgTreeId;
-  reqMaster.type = await data.orgLevel;
+  reqMaster.id = data.orgTreeId;
+  reqMaster.type = data.orgLevel;
   await fetchTable();
 }
 
 /*************************** TABLE ***********************************/
-/** columns*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -103,7 +108,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<PosMaster[]>([]);
+const rows = ref<PosMaster[]>([]); //รายการตำแหน่ง
 const reqMaster = reactive<FilterMaster>({
   id: "",
   type: 0,
@@ -116,7 +121,9 @@ const reqMaster = reactive<FilterMaster>({
 const totalRow = ref<number>(0);
 const selectedPos = ref<PosMaster[]>([]);
 
-/** function เรียกข้อมูล Table Position*/
+/**
+ * function เรียกข้อมูลรายการตำแหน่ง
+ */
 async function fetchTable() {
   selectedPos.value = [];
   await http
@@ -149,13 +156,17 @@ function updatePagination(newPagination: NewPagination) {
   reqMaster.page = 1;
 }
 
-/** funcion ค้นหาข้อมูลใน Table*/
+/**
+ * funcion ค้นหาข้อมูลใน Table
+ */
 async function filterKeyword() {
   reqMaster.page = 1;
   fetchTable();
 }
 
-/** function ยืนยันกาสืบทอดตำแหน่ง */
+/**
+ * function ยืนยันกาสืบทอดตำแหน่ง
+ */
 function onClickConfirm() {
   if (selectedPos.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
@@ -187,20 +198,9 @@ function onClickConfirm() {
   }
 }
 
-/** callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*/
-watch(
-  () => modal.value,
-  async () => {
-    modal.value ? await fetchTree() : clearForm();
-  }
-);
-
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
-watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
-  await fetchTable();
-});
-
-/** function clear ข้อมูล*/
+/**
+ * function clear ข้อมูล
+ */
 function clearForm() {
   nodeTree.value = [];
   rows.value = [];
@@ -212,6 +212,23 @@ function clearForm() {
   reqMaster.pageSize = 10;
   reqMaster.keyword = "";
 }
+
+/**
+ * callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup*
+ */
+watch(
+  () => modal.value,
+  async () => {
+    modal.value ? await fetchTree() : clearForm();
+  }
+);
+
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
+watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
+  await fetchTable();
+});
 </script>
 
 <template>
diff --git a/src/modules/02_organization/components/StructureMain.vue b/src/modules/02_organization/components/StructureMain.vue
index 375cc20ac..c6da85fa5 100644
--- a/src/modules/02_organization/components/StructureMain.vue
+++ b/src/modules/02_organization/components/StructureMain.vue
@@ -1,46 +1,45 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+import { StructChart } from "structure-chart";
+import "structure-chart/structure-chart.css";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import { StructChart } from "structure-chart";
-import "structure-chart/structure-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
 
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useOrganizational();
 const { showLoader, hideLoader, messageError } = mixin;
-const $q = useQuasar(); // show dialog
 
-// import chartData from '@/assets/structChartData'
-// const dataSource = ref(chartData)
 const dataSource = ref(); // ข้อมูล Chart
 const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
-const savePNG = () => {
-  chartRef.value.savePNG();
-};
-const savePDF = () => {
-  chartRef.value.savePDF();
-};
-
 const loader = ref<boolean>(false); // Loader
 
-onMounted(async () => {
-  const id =
-    store.typeOrganizational === "current"
-      ? store.activeId
-      : store.typeOrganizational === "draft"
-      ? store.draftId
-      : store.historyId;
+/**
+ * function ดาวน์โหลดไฟล์โครงสร้าง PNG
+ */
+function savePNG() {
+  chartRef.value.savePNG();
+}
 
-  id && (await fetchStructChart(id, "0"));
-});
+/**
+ * function ดาวน์โหลดไฟล์โครงสร้าง PDF
+ */
+function savePDF() {
+  chartRef.value.savePDF();
+}
 
+/**
+ * function ดึงข้อมูลโครงสร้าง
+ * @param id id โครงสร้าง
+ * @param type
+ * @param status
+ */
 async function fetchStructChart(
   id: string,
   type: string,
@@ -49,9 +48,9 @@ async function fetchStructChart(
   showLoader();
   await http
     .get(config.API.orgStructChart(id, type))
-    .then((res) => {
+    .then(async (res) => {
       if (res.data.result.length > 0) {
-        const data = res.data.result[0];
+        const data = await res.data.result[0];
         const struct = [];
         struct.push({ ...data, officer: [], heads: [] });
         dataSource.value = struct[0];
@@ -72,14 +71,14 @@ async function fetchStructChart(
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
-const refreshChart = async (data: any, type: number) => {
+async function refreshChart(data: any, type: number) {
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
     rootOrgID.value = data;
   } else {
     searchAndReplace(dataSource.value, data.value);
   }
-};
+}
 
 function searchAndReplace(data: any, id: string) {
   if (data.deptID === id) {
@@ -100,7 +99,7 @@ function searchAndReplace(data: any, id: string) {
  * @param id OrgID ของหน่วยงานที่ต้องการหา
  * @param chart Array ของ Object ของหน่วยงานย่อยใน Tree นั้น ๆ
  */
-const chartTraverse = (id: any, chart: any): any => {
+function chartTraverse(id: any, chart: any): any {
   let _returnPath = [];
   for (const child of chart) {
     if (child.deptID === id) {
@@ -128,7 +127,7 @@ const chartTraverse = (id: any, chart: any): any => {
       }
     }
   }
-};
+}
 
 const findPath = (id: any) => {
   let _path = [];
@@ -149,13 +148,13 @@ const theBreadcrumb = ref();
 /**
  * สร้าง Path Breadcrumbs
  */
-const breadcrumbsGen = () => {
+function breadcrumbsGen() {
   if (rootOrgID.value !== 0) {
     theBreadcrumb.value = [];
     const newPath = findPath(rootOrgID.value);
     theBreadcrumb.value = newPath;
   }
-};
+}
 
 watch(
   () => store.typeOrganizational,
@@ -178,6 +177,17 @@ watch(
     store.historyId && (await fetchStructChart(store.historyId, "0", true));
   }
 );
+
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : store.historyId;
+
+  id && (await fetchStructChart(id, "0"));
+});
 </script>
 
 <template>
diff --git a/src/modules/02_organization/components/StructureOrgMain.vue b/src/modules/02_organization/components/StructureOrgMain.vue
index 25900001b..b976f7927 100644
--- a/src/modules/02_organization/components/StructureOrgMain.vue
+++ b/src/modules/02_organization/components/StructureOrgMain.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { OrgChart } from "bma-org-chart";
+import "bma-org-chart/org-chart.css";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { OrgChart } from "bma-org-chart";
-import "bma-org-chart/org-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
 import avatar from "@/assets/avatar_user.jpg";
@@ -26,10 +26,10 @@ const chartRef = ref(); // อ้างอิงไปที่ตัว chart
 /**
  * fetch ข้อมูล Chart โครงสร้าง
  */
-function fetchOrgChart() {
+async function fetchOrgChart() {
   showLoader();
   let urlRequest = config.API.orgChart(rootOrgID.value);
-  http
+  await http
     .get(urlRequest)
     .then(async (response) => {
       if (response.data.result.length > 0) {
diff --git a/src/modules/02_organization/components/TreeMain.vue b/src/modules/02_organization/components/TreeMain.vue
index 4e483ff02..0bfabe68b 100644
--- a/src/modules/02_organization/components/TreeMain.vue
+++ b/src/modules/02_organization/components/TreeMain.vue
@@ -23,14 +23,8 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const $q = useQuasar();
 const store = useOrganizational();
-const {
-  dialogRemove,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  date2Thai,
-} = useCounterMixin();
+const { dialogRemove, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
 
 /** props*/
 const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
@@ -298,8 +292,8 @@ async function onClickEdit(node: OrgTree) {
  * @param id  ID โครงสร้าง
  * @param rootId RootID
  */
-function onClickDel(type: number, id: string, rootId: string) {
-  const level = store.checkLevel(type);
+async function onClickDel(type: number, id: string, rootId: string) {
+  const level = await store.checkLevel(type);
   dialogRemove($q, async () => {
     showLoader();
     await http
diff --git a/src/modules/02_organization/components/TreeTable.vue b/src/modules/02_organization/components/TreeTable.vue
index 9b0cfdd89..b395639ac 100644
--- a/src/modules/02_organization/components/TreeTable.vue
+++ b/src/modules/02_organization/components/TreeTable.vue
@@ -1,22 +1,23 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 import genreport from "@/plugins/genreportxlsx";
 import { checkPermission } from "@/utils/permissions";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type { QTableProps } from "quasar";
 import type {
   ListMenu,
   NewPagination,
+  DataDocument,
 } from "@/modules/02_organization/interface/index/Main";
 import type { FilterMaster } from "@/modules/02_organization/interface/request/organizational";
-import type {
-  PosMaster2,
-  OrgTree,
-} from "@/modules/02_organization/interface/response/organizational";
+import type { PosMaster2 } from "@/modules/02_organization/interface/response/organizational";
 import type { DataPosition } from "@/modules/02_organization/interface/index/organizational";
 
 /** importComponents*/
@@ -29,8 +30,6 @@ import DialogSelectPerson from "@/modules/02_organization/components/DialogSelec
 import DialogSuccession from "@/modules/02_organization/components/DialogSuccession.vue"; // สืบทอดตำแหน่ง
 
 /** importStore*/
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const store = useOrganizational();
@@ -64,9 +63,9 @@ const props = defineProps({
   },
 });
 
-const modalSelectPerson = ref<boolean>(false);
-const rowId = ref<string>("");
-const actionType = ref<string>("");
+const modalSelectPerson = ref<boolean>(false); //เลือกคนครอล
+const rowId = ref<string>(""); //id ที่ต้องการกระทำ
+const actionType = ref<string>(""); //ประเภทการกระทำ
 /** ListMenu Table*/
 const listMenu = ref<ListMenu[]>([
   {
@@ -106,7 +105,7 @@ const listMenu = ref<ListMenu[]>([
     color: "deep-purple",
   },
 ]);
-const document = ref<any>([
+const document = ref<DataDocument[]>([
   {
     name: "บัญชี 1",
     val: "report1",
@@ -254,7 +253,7 @@ const columnsExpand = ref<QTableProps["columns"]>([
   },
 ]);
 
-const dialogPosition = ref<boolean>(false);
+const dialogPosition = ref<boolean>(false); //ตำแหน่ง
 /**
  * function  openPopup เพิ่มอัตรากำลัง
  * @param type ประเภท
@@ -266,14 +265,19 @@ function onClickPosition(type: string, id: string) {
   dialogPosition.value = !dialogPosition.value;
 }
 
+/**
+ *  function เปิด popup เพิ่มแก้ไข อัตรากำลัง
+ * @param type ประเภทการกระทำ
+ * @param id  id ที่ต้องการกระทำ
+ */
 function onClickCopyPosition(type: string, id: string) {
   rowId.value = id ? id : "";
   actionType.value = type;
   dialogPosition.value = !dialogPosition.value;
 }
 
-const dialogDetail = ref<boolean>(false);
-const dataDetailPos = ref<DataPosition[]>([]);
+const dialogDetail = ref<boolean>(false); //ดูรายละเอียดประวัติตำแหน่ง
+const dataDetailPos = ref<DataPosition[]>([]); //รายละเอียดตำแหน่ง
 /**
  * function ดูรายละเอียดประวัติตำแหน่ง
  * @param data ข้อมูล ประวัติตำแหน่ง
@@ -351,13 +355,19 @@ function updatePagination(newPagination: NewPagination) {
   reqMaster.value.page = 1;
 }
 
-/** function openPopup เลือกตนครอง*/
+/**
+ * function เปิด pop เลือกตนครอง
+ * @param data  ข้อมูลตำแหน่งที่ต้องการเพิ่มคนครอง
+ */
 function openSelectPerson(data: DataPosition[]) {
   modalSelectPerson.value = true;
   dataDetailPos.value = data;
 }
 
-/** ลบคนครอง */
+/**
+ * function ยืนยันการลบข้อมูลคนครอง
+ * @param id รายการที่ต้องการลบ
+ */
 function removePerson(id: string) {
   dialogRemove(
     $q,
@@ -389,13 +399,17 @@ function removePerson(id: string) {
 }
 
 const modalDialogSuccession = ref<boolean>(false);
-/** function openPopup สืบทอดตำแหน่ง*/
+/**
+ * function openPopup สืบทอดตำแหน่ง
+ */
 function onClickInherit(id: string) {
   modalDialogSuccession.value = !modalDialogSuccession.value;
   rowId.value = id;
 }
 
-/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+/**
+ * ดึงข้อมูลสถิติจำนวนด้านบน
+ */
 function getSummary() {
   showLoader();
   http
@@ -428,7 +442,9 @@ function getSummary() {
     });
 }
 
-/** function DownloadReport*/
+/**
+ * function DownloadReport
+ */
 async function onClickDownloadReport(val: string, name: string) {
   showLoader();
   await http
diff --git a/src/modules/02_organization/components/TreeView.vue b/src/modules/02_organization/components/TreeView.vue
index 6d50dc253..4196e510f 100644
--- a/src/modules/02_organization/components/TreeView.vue
+++ b/src/modules/02_organization/components/TreeView.vue
@@ -1,8 +1,11 @@
 <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 { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type {
@@ -17,10 +20,6 @@ import type { FilterMaster } from "@/modules/02_organization/interface/request/o
 import TreeMain from "@/modules/02_organization/components/TreeMain.vue";
 import TreeTable from "@/modules/02_organization/components/TreeTable.vue";
 
-/** importStore*/
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const store = useOrganizational();
 const $q = useQuasar();
@@ -133,7 +132,9 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     });
 }
 
-/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+/**
+ *  ดึงข้อมูลสถิติจำนวนด้านบน
+ */
 function getSummary() {
   http
     .post(config.API.orgSummary, {
@@ -158,13 +159,20 @@ function getSummary() {
     });
 }
 
-/** funcion ค้นหาข้อมูลใน Table*/
+/**
+ * funcion ค้นหาข้อมูลใน Table
+ */
 async function filterKeyword() {
   reqMaster.page = 1;
   action1.value === false &&
     fetchDataTable(reqMaster.id, reqMaster.type, false);
 }
 
+/**
+ * ค้นหาโครงสร้างในข้อมูลแบบลำดับชั้นเพื่อหาที่ตรงกับ orgTreeId
+ * @param data ข้อมูลโครงสร้าง
+ * @param targetId id ของโครงสร้างที่ต้องการค้นหา
+ */
 function searchAndReplaceOrgName(data: any, targetId: string) {
   for (const child of data) {
     if (child.orgTreeId === targetId) {
@@ -179,17 +187,6 @@ function searchAndReplaceOrgName(data: any, targetId: string) {
   return false; // Not found in this branch
 }
 
-/**lifecycle Hook*/
-onMounted(async () => {
-  const id =
-    store.typeOrganizational === "current"
-      ? store.activeId
-      : store.typeOrganizational === "draft"
-      ? store.draftId
-      : historyId.value;
-  id && (await fetchDataTree(id));
-});
-
 /** callback function ทำงาน ทำการ fetch ข้อมูล Tree เมื่อมีการเลือกประวัติโครงสร้าง*/
 watch(
   () => count.value,
@@ -198,7 +195,9 @@ watch(
   }
 );
 
-/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
+/**
+ *  callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง
+ */
 watch(
   () => store.typeOrganizational,
   () => {
@@ -210,13 +209,17 @@ watch(
   }
 );
 
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
 watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
   action1.value === false &&
     fetchDataTable(reqMaster.id, reqMaster.type, false);
 });
 
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
+ */
 watch(
   () => reqMaster.isAll,
   () => {
@@ -235,6 +238,21 @@ watch(
     store.draftId && fetchDataTree(store.draftId?.toString());
   }
 );
+
+/**
+ * lifecycle Hook ทำเมือ่ Components ถูกเรียกใช้งาน
+ *
+ * ุ และดึงช้อมูลโครงสร้างตาม ID ของประเภทโครงสร้าง ปัจจุบัน,แบบร่าง
+ */
+onMounted(async () => {
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : historyId.value;
+  id && (await fetchDataTree(id));
+});
 </script>
 
 <template>
diff --git a/src/modules/02_organization/interface/index/Main.ts b/src/modules/02_organization/interface/index/Main.ts
index bc69b1890..284caa057 100644
--- a/src/modules/02_organization/interface/index/Main.ts
+++ b/src/modules/02_organization/interface/index/Main.ts
@@ -7,6 +7,11 @@ interface DataOption {
   name: string;
 }
 
+interface DataDocument {
+  name: string;
+  val: string;
+}
+
 interface ListMenu {
   label: string;
   icon: string;
@@ -121,6 +126,7 @@ interface RowDetailPositions {
   posLevelId: string;
   posExecutiveId: string;
   isSpecial: boolean;
+  positionIsSelected: string;
 }
 
 interface NewPagination {
@@ -147,4 +153,5 @@ export type {
   HistoryPostType,
   FormPositionSelectRef,
   NewPagination,
+  DataDocument,
 };
diff --git a/src/modules/02_organization/interface/response/Main.ts b/src/modules/02_organization/interface/response/Main.ts
index 696a5b0f7..8a8d51f88 100644
--- a/src/modules/02_organization/interface/response/Main.ts
+++ b/src/modules/02_organization/interface/response/Main.ts
@@ -8,10 +8,10 @@ interface DataPosType {
 
 interface DataLevel {
   id: string;
-  posLevelName: number;
+  posLevelName: number | string;
   posTypeName: string;
   posTypeId: string;
   posLevelAuthority: string;
 }
 
-export type { DataPosType };
+export type { DataPosType, DataLevel };
diff --git a/src/modules/02_organization/store/organizational.ts b/src/modules/02_organization/store/organizational.ts
index aafd96375..3b0ff5230 100644
--- a/src/modules/02_organization/store/organizational.ts
+++ b/src/modules/02_organization/store/organizational.ts
@@ -9,17 +9,17 @@ import type {
 } from "@/modules/02_organization/interface/response/organizational";
 
 export const useOrganizational = defineStore("organizationalStore", () => {
-  const typeOrganizational = ref<string>("current");
-  const statusView = ref<string>("list");
+  const typeOrganizational = ref<string>("current"); // ประเภทโครงสร้าง
+  const statusView = ref<string>("list"); // การแสดงผล รายการ,map
 
-  const dataActive = ref<DataActive>();
-  const activeId = ref<string>();
-  const draftId = ref<string>();
-  const historyId = ref<string>();
-  const treeId = ref<string>();
-  const level = ref<number>();
-  const isPublic = ref<boolean>(false);
-  const orgPublishDate = ref<Date | null>(null);
+  const dataActive = ref<DataActive>(); //ข้อมูลโครงสร้าง
+  const activeId = ref<string>(); // id โครงสร้างปัจจุบัน
+  const draftId = ref<string>(); // id แบบร่างโครงสร้าง
+  const historyId = ref<string>(); // id ประวัติโครงสร้าง
+  const isPublic = ref<boolean>(false); // การเผยแพร่
+  const treeId = ref<string>(); // id โหนด
+  const level = ref<number>(); // ระดับโหนด
+  const orgPublishDate = ref<Date | null>(null); // วันเผยแพร่
   const sumPosition = reactive({
     total: 0,
     use: 0,
@@ -29,6 +29,10 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     vacantRoot: 0,
   });
 
+  /**
+   * ฟังก์ชันกำหนดจำนวนข้อมูลตำแหน่ง
+   * @param data ข้อมุลจำนวนตำแหน่ง
+   */
   function getSumPosition(data: SumPosition) {
     sumPosition.total = data.totalPosition;
     sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
@@ -56,14 +60,23 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     }
   }
 
-  function fetchDataActive(data: DataActive) {
+  /**
+   * ฟังก์ชันกำหนดข้อมูลโครงสร้าง
+   * @param data ข้อมูลโครงสร้าง
+   */
+  async function fetchDataActive(data: DataActive) {
+    dataActive.value = data;
     activeId.value = data.activeId;
     draftId.value = data.draftId;
-    dataActive.value = data;
     isPublic.value = data.isPublic;
     orgPublishDate.value = data.orgPublishDate;
   }
 
+  /**
+   * ฟังก์ชันประมวลผลข้อมูลตำแหน่ง
+   * @param data ข้อมูลตำแหน่ง
+   * @returns ข้อมูลตำแหน่งที่ผ่านการประมวลผลแล้ว
+   */
   function fetchPosMaster(data: PosMaster[]) {
     const newPosMaster = data.map((e: PosMaster) => ({
       ...e,
@@ -89,7 +102,12 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     return newPosMaster;
   }
 
-  function checkLevel(type: number) {
+  /**
+   * ฟังก์ชันตรวจสอบและแปลงค่าประเภทระดับ
+   * @param type ประเภทระดับ
+   * @returns ชื่อประเภทระดับ
+   */
+  async function checkLevel(type: number) {
     switch (type) {
       case 0:
         return "Root";
@@ -104,6 +122,11 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     }
   }
 
+  /**
+   * ฟังก์ชันตรวจสอบและแปลงค่าระดับหน่วยงาน
+   * @param type ระดับหน่วยงาน
+   * @returns ชื่อประระดับหน่วยงาน
+   */
   function convertType(type: string) {
     switch (type) {
       case "DEPARTMENT":
diff --git a/src/modules/02_organization/views/ExampleSearchTree.vue b/src/modules/02_organization/views/ExampleSearchTree.vue
deleted file mode 100644
index c47e063b9..000000000
--- a/src/modules/02_organization/views/ExampleSearchTree.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { ListMenu } from "@/modules/02_organization/interface/index/Main";
-import type { OrgTree } from "@/modules/02_organization/interface/response/organizational";
-
-/** importStore*/
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
-const store = useOrganizational();
-const { dialogRemove, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-const $q = useQuasar();
-
-const filter = ref<string>("");
-const nodes = ref<Array<any>>([]);
-const lazy = ref(nodes);
-const expanded = ref<Array<any>>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
-const selected = ref("");
-
-const idVal = ref("");
-async function fetchDataTree(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgByid(id))
-    .then((res) => {
-      const data = res.data.result;
-      nodes.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-const breakLoop = ref<boolean>(false);
-const dataObject = ref([]);
-async function onSort(orgRootId: string) {
-  if (orgRootId) {
-    idVal.value = "children => " + orgRootId;
-    breakLoop.value = false;
-
-    const targetNodeId = orgRootId;
-
-    for (let index = 0; index < nodes.value.length; index++) {
-      const element = nodes.value[index];
-      searchAndReplace(element, targetNodeId);
-      if (breakLoop.value) break;
-    }
-  } else {
-    idVal.value = "root";
-  }
-}
-
-function searchAndReplace(treeNode: any, organizationId: string) {
-  if (treeNode.orgTreeId === organizationId) {
-    dataObject.value = treeNode.children;
-    breakLoop.value = true;
-  } else if (treeNode.children) {
-    for (const child of treeNode.children) {
-      searchAndReplace(child, organizationId);
-    }
-  }
-}
-
-const listAdd = ref<ListMenu[]>([
-  {
-    label: "จัดลำดับ",
-    icon: "filter_list",
-    type: "SORT",
-    color: "green-7",
-  },
-]);
-
-onMounted(async () => {
-  await fetchDataTree("a449eac0-93a5-4ccc-8fbc-2974ca8ee61b");
-});
-</script>
-
-<template>
-  <div class="col-12 q-py-md q-px-lg">
-    <q-tree
-      class="q-pa-md q-gutter-sm"
-      dense
-      default-expand-all
-      selected-color="primary"
-      :nodes="lazy"
-      node-key="orgTreeId"
-      label-key="orgTreeName"
-      :filter="filter"
-      :no-results-label="notFound"
-      :no-nodes-label="noData"
-      v-model:expanded="expanded"
-      v-model:selected="selected"
-    >
-      <template v-slot:default-header="prop">
-        <!-- {{ prop.node.orgTreeName }} -->
-
-        <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-          <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-          <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>
-        </div>
-
-        <q-btn
-          flat
-          dense
-          icon="mdi-dots-vertical"
-          class="q-pa-none q-ml-xs"
-          color="grey-13"
-        >
-          <q-menu>
-            <q-list
-              dense
-              v-for="(item, index) in prop.node.orgLevel === 4
-                ? listAdd.slice(1, 6)
-                : listAdd"
-              :key="index"
-              style="min-width: 100px"
-            >
-              <q-item
-                clickable
-                v-close-popup
-                @click="onSort(prop.node.orgRootId)"
-              >
-                <q-item-section avatar>
-                  <q-icon :color="item.color" :name="item.icon" />
-                </q-item-section>
-                <div>
-                  <q-item-section> {{ item.label }}หน่วยงาน </q-item-section>
-                </div>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-      </template>
-    </q-tree>
-
-    <h5>orgRootId = {{ idVal }}</h5>
-    <div>
-      {{ dataObject }}
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/02_organization/views/main.vue b/src/modules/02_organization/views/main.vue
index 40056bae8..ff58ff683 100644
--- a/src/modules/02_organization/views/main.vue
+++ b/src/modules/02_organization/views/main.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { checkPermission } from "@/utils/permissions";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -20,12 +23,6 @@ import StructureOrgMain from "@/modules/02_organization/components/StructureOrgM
 import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
 
-/**
- * importStore
- */
-import { useOrganizational } from "@/modules/02_organization/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -46,9 +43,7 @@ const historyId = ref<string>(""); // ID ประวัติโครงสร
 const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
 const count = ref<number>(0);
 
-/**
- * List เพิ่มโครงสร้าง
- */
+// รายการเมนูเพิ่มโครงสร้าง
 const itemStructure = ref<DataOption[]>([
   {
     id: "NEW",
@@ -70,15 +65,17 @@ const itemStructure = ref<DataOption[]>([
 
 /**
  * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
+ *
+ * เก็บข่อมูลใน store
  */
-function fetchOrganizationActive() {
+async function fetchOrganizationActive() {
   showLoader();
-  http
+  await http
     .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       if (data) {
-        store.fetchDataActive(data);
+        await store.fetchDataActive(data);
         if (data.activeName === null && data.draftName === null) {
           isStatusData.value = false;
         } else {
@@ -100,13 +97,13 @@ function fetchOrganizationActive() {
 }
 
 /**
- * function เรียกข้อมูลประวัติโครงสร้าง
+ * function เรียกข้อมูรายการลประวัติโครงสร้าง
  */
-function fetchHistory() {
-  http
+async function fetchHistory() {
+  await http
     .get(config.API.organizationHistoryNew)
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       const filterData = data.filter(
         (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
       );
@@ -150,12 +147,13 @@ function onClickHistory(id: string, name: string) {
 }
 
 /**
- * lifecycleHook
+ * lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
+ *
+ * ดึงข้อมูลโครงสร้างและรายการประวัติโครงสร้าง
  */
 onMounted(async () => {
   store.typeOrganizational = "current";
-  await fetchOrganizationActive();
-  await fetchHistory();
+  await Promise.all([fetchOrganizationActive(), fetchHistory()]);
 });
 </script>
 <template>
@@ -370,11 +368,8 @@ onMounted(async () => {
   <DialogDateTime
     :modal="modalDateTime"
     :close="onClickDateTime"
-    :fetchActive="fetchOrganizationActive"
+    :fetch-active="fetchOrganizationActive"
   />
-
-  <!-- รายละเอียดตำแหน่ง -->
-  <!-- <DialogPositionDetail v-model:position-detail="modalPositionDetail" /> -->
 </template>
 
 <style scoped></style>