Refactoring code module 16_positionEmployee

2024-09-19 15:57:40 +07:00 · 2024-09-19 15:57:40 +07:00 · 94109a6f15
commit 94109a6f15
parent 4678ead38e
10 changed files with 527 additions and 600 deletions
--- a/src/modules/16_positionEmployee/components/DialogAddPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";

 /**
 * importType
@ -11,7 +13,6 @@ import type {
  ResGroup,
  ResLevel,
 } from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
-import type { ObjectPosRef } from "@/modules/01_masterdata/interface/index/positionEmployee";
 import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";

@ -20,11 +21,6 @@ import type { OptionType } from "@/modules/16_positionEmployee/interface/respons
 */
 import DialogHeader from "@/components/DialogHeader.vue";

-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
 * use
 */
@ -44,86 +40,58 @@ const props = defineProps({
  levelOp: Object,
 });

-const isDisValidate = ref<boolean>(false);
-const isSpecial = ref<boolean>(false);
+//ข้อมูลตำแหน่ง
 const formDataPos = reactive({
-  posName: "",
-  posTypeName: "",
-  posLevelName: "",
+  posName: "", //ชือตำแหน่ง
+  posTypeName: "", //กลุ่มงาน
+  posLevelName: "", //ระดับชั้นงาน
 });

-const posNameRef = ref<object | null>(null);
-const posTypeNameRef = ref<object | null>(null);
-const posLevelNameRef = ref<object | null>(null);
-const objectRef: ObjectPosRef = {
-  posName: posNameRef,
-  posTypeName: posTypeNameRef,
-  posLevelName: posLevelNameRef,
-};
-const posTypeMain = ref<ResGroup[]>([]);
-const posTypeOp = ref<DataOption[]>([]);
-const posLevelOp = ref<DataOption[]>([]);
+const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน

 /**
- * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ * ฟังก์ชันยืนยันการบันทึกข้อมุล
 */
-function validateFormPositionEdit() {
-  isDisValidate.value = false;
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    const body = {
+      posDictName: formDataPos.posName,
+      posTypeId: formDataPos.posTypeName,
+      posLevelId: formDataPos.posLevelName,
+    };
+    showLoader();
+    try {
+      const url = !isEditCheck.value
+        ? config.API.orgEmployeePos
+        : config.API.orgEmployeePosById(props?.data?.id);
+      await http[!isEditCheck.value ? "post" : "put"](url, body);
+      await props.emitSearch?.(formDataPos.posName, "positionName");
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
    }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
-}
-async function submit() {
-  const body = {
-    posDictName: formDataPos.posName,
-    posTypeId: formDataPos.posTypeName,
-    posLevelId: formDataPos.posLevelName,
-  };
-  showLoader();
-  try {
-    const url = !isEditCheck.value
-      ? config.API.orgEmployeePos
-      : config.API.orgEmployeePosById(props?.data?.id);
-    await http[!isEditCheck.value ? "post" : "put"](url, body);
-    await props.emitSearch?.(formDataPos.posName, "positionName");
-    await success($q, "บันทีกข้อมูลสำเร็จ");
-    await close();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
+  });
 }

-async function clearFormPositionSelect() {
+/**
+ * ฟังก์ชันปิด popup
+ */
+function close() {
+  modal.value = false;
  isEditCheck.value = false;
-  isDisValidate.value = true;
  formDataPos.posName = "";
  formDataPos.posTypeName = "";
  formDataPos.posLevelName = "";
-  isSpecial.value = false;
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
-function close() {
-  modal.value = false;
-  clearFormPositionSelect();
 }

+/**
+ * ฟังก์ชันดึงข้อมุลกลุ่มงาน
+ */
 async function fetchType() {
  showLoader();
  await http
@ -143,6 +111,10 @@ async function fetchType() {
    });
 }

+/**
+ * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
+ * @param id  กลุ่มงาน
+ */
 function updatePosTypeName(id: string) {
  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
  posLevelOp.value =
@ -153,6 +125,9 @@ function updatePosTypeName(id: string) {
  formDataPos.posLevelName = "";
 }

+/**
+ * ทำงานเมื่อ modal เป็น true
+ */
 watch(
  () => modal.value,
  async () => {
@ -175,14 +150,16 @@ watch(
 <template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 50vw">
-      <DialogHeader
-        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
-        :close="close"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`
+          }`"
+          :close="close"
+        />
+        <q-separator />

-      <q-card-section class="q-pa-none">
-        <form @submit.prevent="validateFormPositionEdit">
+        <q-card-section class="q-pa-none">
          <div class="row q-col-gutter-sm col-12 q-pa-md">
            <div class="col-12">
              <q-input
@ -194,7 +171,8 @@ watch(
                label="ชื่อตำแหน่ง"
                lazy-rules
                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
              />
            </div>

@ -212,8 +190,9 @@ watch(
                option-value="id"
                lazy-rules
                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
                @update:model-value="updatePosTypeName"
+                class="inputgreen"
              />
            </div>

@ -232,7 +211,8 @@ watch(
                option-value="id"
                lazy-rules
                hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
              />
            </div>
          </div>
@ -245,8 +225,8 @@ watch(
              color="public"
            />
          </q-card-actions>
-        </form>
-      </q-card-section>
+        </q-card-section>
+      </q-form>
    </q-card>
  </q-dialog>
 </template>
--- a/src/modules/16_positionEmployee/components/DialogFormPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -10,37 +12,15 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type {
  FormDataPosition,
-  FormPositionRef,
  DataOption,
  RowDetailPositions,
  ListMenu,
 } from "@/modules/16_positionEmployee/interface/index/Main";
 import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
+import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue"; //เพิ่มตำแหน่ง

-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  modal: Boolean,
-  close: Function,
-  orgLevel: Number,
-  treeId: String,
-  actionType: String,
-  rowId: { type: String, default: "" },
-  fetchDataTable: Function,
-  getSummary: Function,
-  shortName: { type: String, required: true },
-});
-
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
-const isPosition = ref<boolean>(false);
-
-const dataCopy = ref<any>();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@ -53,7 +33,28 @@ const {
  dialogMessageNotify,
 } = mixin;

-const search = ref<string>("");
+/**
+ * props
+ */
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+  orgLevel: Number,
+  treeId: String,
+  actionType: String,
+  rowId: { type: String, default: "" },
+  fetchDataTable: Function,
+  getSummary: Function,
+  shortName: { type: String, required: true },
+});
+
+const modalAdd = ref<boolean>(false); //เพิ่มข้อมูลตำแหน่ง
+const isEdit = ref<boolean>(false); //แก้ไขข้อมูล
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isPosition = ref<boolean>(false); //แสดงเลือกตำแหน่งที่ต้องการเพิ่ม
+const dataCopy = ref<RowDetailPositions>(); //ข้อมูลตำแหน่งที่ต้องการคัดลอก
+const search = ref<string>(""); //คำค้นหา
 const type = ref<string>("positionName");
 const optionFilter = ref<DataOption[]>([
  { id: "positionName", name: "ชื่อตำแหน่ง" },
@ -82,11 +83,8 @@ const listMenu = ref<ListMenu[]>([
  },
 ]);

-const rows = ref<RowDetailPositions[]>([]);
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-
-const prefixNoRef = ref<Object | null>(null);
-const positionNoRef = ref<Object | null>(null);
+const rows = ref<RowDetailPositions[]>([]); //รายกานข้อมูลอัตรากำลัง
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); //รายการตำแหน่ง

 const formData = reactive<FormDataPosition>({
  shortName: props.shortName,
@ -96,12 +94,6 @@ const formData = reactive<FormDataPosition>({
  reason: "",
 });

-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectPositionRef: FormPositionRef = {
-  prefixNo: prefixNoRef,
-  positionNo: positionNoRef,
-};
-
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -171,75 +163,59 @@ async function fetchPosition(id: string) {
    });
 }

-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectPositionRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
-      const property = objectPositionRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (rows.value.length == 0) {
-      dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
-    } else {
-      onSubmit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
+/**
+ *  ฟังก์ชันบันทึกข่อมูลอัตรากำลัง
+ */
 function onSubmit() {
-  dialogConfirm($q, async () => {
-    showLoader();
-    const positionsData = rows.value.map((e: any) => ({
-      posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
-      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
-    }));
-    const body = {
-      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-      posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
-      posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
-      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
-      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
-      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
-      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
-      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
-      positions: positionsData,
-      isDirector: false,
-      isOfficer: false,
-
-      // succession: succession.value,
-    };
-    try {
-      const url =
-        props.actionType === "ADD"
-          ? config.API.orgPosMasterEmp
-          : config.API.orgPosMasterByIdEmp(props.rowId);
-      await http[props.actionType === "ADD" ? "post" : "put"](url, body);
-      await props.getSummary?.();
-      await props.fetchDataTable?.(
-        reqMaster.value.id,
-        reqMaster.value.type,
-        false
-      );
-      await success($q, "บันทีกข้อมูลสำเร็จ");
-      close();
-    } catch (err) {
-      messageError($q, err);
-    } finally {
-      hideLoader();
-    }
-  });
+  if (rows.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const positionsData = rows.value.map((e: any) => ({
+        posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+        posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+        posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+      }));
+      const body = {
+        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+        posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
+        posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+        orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+        orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+        orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+        orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
+        positions: positionsData,
+        isDirector: false,
+      };
+      try {
+        const url =
+          props.actionType === "ADD"
+            ? config.API.orgPosMasterEmp
+            : config.API.orgPosMasterByIdEmp(props.rowId);
+        await http[props.actionType === "ADD" ? "post" : "put"](url, body);
+        await props.getSummary?.();
+        await props.fetchDataTable?.(
+          reqMaster.value.id,
+          reqMaster.value.type,
+          false
+        );
+        await success($q, "บันทีกข้อมูลสำเร็จ");
+        close();
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
 }

-/** input ค้นหา */
+/**
+ * ฟังก์ชันค้นหาข้อมูลตำแหน่ง
+ */
 const searchRef = ref<any>(null);
 async function searchInput() {
  searchRef.value.validate();
@ -281,20 +257,18 @@ function editDetiail(data: RowDetailPositions) {
 }

 /**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
+ * ฟังก์ชันเลือกตำแหน่ง
+ * @param data  ตำแหน่งที่เลือก
 */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
 function addPosition(data: RowDetailPositions) {
  rows.value = [];
  rows.value.push(data);
 }

+/**
+ * ฟังก์ชัยลบตำแหน่ง
+ * @param id  คำแหน่งีที่เลือก
+ */
 function deletePos(id: string) {
  dialogRemove($q, () => {
    showLoader();
@ -313,27 +287,36 @@ function deletePos(id: string) {
  });
 }

-function clearFormPositionSelect() {
-  isDisValidate.value = true;
-  search.value = "";
-  type.value = "positionName";
-
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
+/**
+ * ฟังก์ชันปืด Popup
+ */
 function close() {
  props.close?.();
  isPosition.value = false;
-  clearFormPositionSelect();
+  search.value = "";
+  type.value = "positionName";
 }

+/**
+ * ฟังก์ชันค้นหาตำแหน่ง
+ * @param keyword คำค้นหา
+ * @param typeSelect ค้นหาจาก
+ */
 async function emitSearch(keyword: string, typeSelect: string) {
  search.value = keyword;
  type.value = typeSelect;
  await searchInput();
 }
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}

 watch(
  () => props.modal,
@ -343,7 +326,6 @@ watch(
        rowsPositionSelect.value = [];
        search.value = "";
        rows.value = [];
-        clearFormPositionSelect();
        formData.prefixNo = "";
        formData.positionNo = "";
        formData.suffixNo = "";
@ -358,7 +340,7 @@ watch(
  () => modalAdd.value,
  () => {
    if (!modalAdd.value) {
-      dataCopy.value = [];
+      dataCopy.value = undefined;
    }
  }
 );
@ -374,7 +356,7 @@ watch(
        :close="close"
      />
      <q-separator />
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <q-card-section class="q-pa-sm fixed-height">
          <div class="row q-col-gutter-sm">
            <div class="col-12">
@ -725,15 +707,17 @@ watch(
            <q-tooltip>บันทึก</q-tooltip>
          </q-btn>
        </q-card-actions>
-      </form>
+      </q-form>
    </q-card>
  </q-dialog>
+
+  <!-- เพิ่มตำแหน่ง -->
  <DialogAddPosition
    v-model:modalAdd="modalAdd"
-    :emitSearch="emitSearch"
-    :data="dataCopy"
    v-model:is-edit="isEdit"
    :get-data="searchInput"
+    :emit-search="emitSearch"
+    :data="dataCopy"
  />
 </template>

--- a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
+++ b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -15,12 +18,6 @@ import type { HistoryPos } from "@/modules/16_positionEmployee/interface/respons
 */
 import Header from "@/components/DialogHeader.vue";

-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
 * use
 */
@ -38,6 +35,7 @@ const props = defineProps({
  },
 });

+const rows = ref<HistoryPos[]>([]); //รายการแก้ไขประวัติ
 const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
@ -61,7 +59,7 @@ const columns = ref<QTableProps["columns"]>([
    name: "lastUpdatedAt",
    align: "left",
    label: "วันที่แก้ไข",
-    field: "lastUpdatedAt",
+    field: (v) => date2Thai(v),
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
@ -93,7 +91,6 @@ const columns = ref<QTableProps["columns"]>([
    style: "font-size: 14px",
  },
 ]);
-const rows = ref<any[]>([]);

 /**
 *  function เรียกข้อมูลประวัติตำแหน่ง
@ -105,14 +102,7 @@ function fetchHistoryPos(id: string) {
    .get(config.API.orgPosHistory(id))
    .then((res) => {
      const data: HistoryPos[] = res.data.result;
-      const list = data.map((e: HistoryPos) => ({
-        ...e,
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
-        posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
-        posMasterNo: e.posMasterNo ?? "-",
-        posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
-      }));
-      rows.value = list;
+      rows.value = data;
    })
    .catch((err) => {
      messageError($q, err);
--- a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";

 /**
 * importType
@ -29,12 +32,6 @@ import type {
 */
 import DialogHeader from "@/components/DialogHeader.vue";

-/**
- * import*Store
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
 * use
 */
@ -70,12 +67,12 @@ const props = defineProps({
 });

 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const typeOpsMain = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]); //ข้อมูลกลุ่มงาน
+const levelOpsMain = ref<DataOption[]>([]); //ข้อมูลระดับกลุ่มงาน
+const typeOps = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const levelOps = ref<DataOption[]>([]); //รายการระดับกลุ่มงาน
 const dataLevel = ref<TypePos[]>([]);
-const selected = ref<Position[]>([]);
+const selected = ref<Position[]>([]); //ตำแหน่งที่เลือก
 const isSit = ref<boolean>(false);

 const formData = reactive<FormPositionFilter>({
@ -201,14 +198,15 @@ const columnsResult = ref<QTableProps["columns"]>([
 */
 function close() {
  modal.value = false;
+  clearForm();
 }

 /**
 *  function เรียกข้อมูลประเภทตำแหน่ง
 */
-function fetchType() {
+async function fetchType() {
  showLoader();
-  http
+  await http
    .get(config.API.orgEmployeeType)
    .then((res) => {
      dataLevel.value = res.data.result;
@ -377,7 +375,6 @@ watch(
  () => modal.value,
  async () => {
    if (modal.value == true) {
-      await clearForm();
      await fetchType();

      if (props.dataDetailPos) {
--- a/src/modules/16_positionEmployee/components/DialogSortPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";

 /**
 * importType
@ -15,12 +18,6 @@ import type { DataSortPos } from "@/modules/02_organization/interface/index/orga
 */
 import DialogHeader from "@/components/DialogHeader.vue";

-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
 /**
 * use
 */
--- a/src/modules/16_positionEmployee/components/DialogSuccession.vue
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
 import http from "@/plugins/http";
 import config from "@/app.config";

@ -20,11 +24,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";

-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useRoute } from "vue-router";
-
 /** use*/
 const $q = useQuasar();
 const store = usePositionEmp();
@ -82,10 +81,10 @@ function resetFilter() {
 * function เลือกหน่วยงาน
 */
 async function updateSelected(data: DataTree) {
-  levelTree.value = await data.orgLevel;
-  selectedTree.value = await data.orgTreeId;
-  reqMaster.id = await data.orgTreeId;
-  reqMaster.type = await data.orgLevel;
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = data.orgTreeId;
+  reqMaster.type = data.orgLevel;
  await fetchTable();
 }

--- a/src/modules/16_positionEmployee/components/TreeMain.vue
+++ b/src/modules/16_positionEmployee/components/TreeMain.vue
@ -18,7 +18,7 @@ const store = usePositionEmp();
 const {} = useCounterMixin();

 /** props*/
-const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeMain = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const nodeId = defineModel<string>("nodeId", { required: true });
 const shortName = defineModel<string>("shortName", { required: true });
 const props = defineProps({
@ -32,12 +32,10 @@ const props = defineProps({
  },
 });

-const filter = ref<string>("");
-const nodes = ref<Array<OrgTree>>([]);
+const filter = ref<string>(""); //ค้าหาข้อมูลโครงสร้าง
+const nodes = ref<Array<OrgTree>>([]); //ข้อมูลโครงสร้าง
 const lazy = ref(nodes);
-const expanded = ref<Array<any>>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
+const expanded = ref<Array<string[]>>([]);

 /**
 * funtion เลือกข้อมูล Tree
@ -82,9 +80,9 @@ function updateSelected(data: DataTree) {
 }

 watch(
-  () => nodeTEST.value,
+  () => nodeMain.value,
  () => {
-    nodes.value = nodeTEST.value;
+    nodes.value = nodeMain.value;
  }
 );
 </script>
@ -116,8 +114,8 @@ watch(
          node-key="orgTreeId"
          label-key="labelName"
          :filter="filter"
-          :no-results-label="notFound"
-          :no-nodes-label="noData"
+          no-results-label="ไม่พบข้อมูลที่ค้นหา"
+          no-nodes-label="ไม่มีข้อมูล"
          v-model:expanded="expanded"
        >
          <template v-slot:default-header="prop">
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 import config from "@/app.config";
 import http from "@/plugins/http";
-import { checkPermission } from "@/utils/permissions";

 /**
 * importType
@ -31,8 +34,6 @@ import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuc
 /**
 * importStore
 */
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";

 /**
 * ues
--- a/src/modules/16_positionEmployee/components/TreeView.vue
+++ b/src/modules/16_positionEmployee/components/TreeView.vue
@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useStructureTree } from "@/stores/structureTree";
-
-/** importType*/
-import type {
-  OrgTree,
-  PosMaster,
-  Position,
-  PosMaster2,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
-
-/** importComponents*/
-import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
-import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-
-/** use*/
-const store = usePositionEmp();
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-const route = useRoute();
-const { fetchStructureTree } = useStructureTree();
-const storeStructureTree = useStructureTree();
-
-const nodeTree = ref<OrgTree[]>([]); // ข้อมูล Tree
-const nodeId = ref<string>(""); // id ของ Tree
-const orgLevel = ref<number>(0); // levelTree
-const isLoad = ref<boolean>(false); // loadTable
-const isLoadTree = ref<boolean>(false); // loadTable
-const mainTree = ref<OrgTree>();
-const selected = ref<string>("");
-
-const reqMaster = reactive<FilterMaster>({
-  id: "",
-  type: 0,
-  isAll: false,
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  revisionId: "",
-});
-const totalPage = ref<number>(1);
-const action1 = ref<boolean>(false);
-const posMaster = ref<PosMaster2[]>([]);
-const shortName = ref<string>("");
-
-/**
- * function fetch ข้อมูลของ Tree
- * @param id id โครงสร้าง
- */
-async function fetchDataTree() {
-  isLoadTree.value = false;
-  const dataTree = await fetchStructureTree(route.meta.Key as string, true);
-  store.activeId = storeStructureTree.activeId;
-  if (dataTree) {
-    nodeTree.value = dataTree;
-    selected.value = "";
-    nodeId.value = "";
-    store.treeId = "";
-  }
-}
-
-/**
- * function fetch ข้อรายการตำแหน่ง
- * @param id  idTree
- * @param level  levelTree
- */
-function fetchDataTable(id: string, level: number, action: boolean) {
-  searchAndReplaceOrgName(nodeTree.value, id);
-  orgLevel.value = level;
-  reqMaster.id = id;
-  reqMaster.type = level;
-  action1.value = action;
-  if (action) {
-    setTimeout(() => {
-      action1.value = false;
-    }, 1000);
-    reqMaster.isAll = false;
-    reqMaster.page = 1;
-    reqMaster.pageSize = 10;
-    reqMaster.keyword = "";
-    reqMaster.revisionId = store.activeId;
-  }
-
-  if (action === true) {
-    isLoad.value = true;
-  }
-  http
-    .post(config.API.orgPosMasterListEmp, reqMaster)
-    .then(async (res) => {
-      posMaster.value = [];
-      const dataMain: PosMaster[] = [];
-      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
-      res.data.result.data.forEach((e: PosMaster) => {
-        const p = e.positions;
-        if (p.length !== 0) {
-          const a = p.find((el: Position) => el.positionIsSelected === true);
-          const { id, ...rest } = a ? a : p[0];
-          const test = { ...e, ...rest };
-          dataMain.push(test);
-        }
-      });
-      posMaster.value = await store.fetchPosMaster(dataMain);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      posMaster.value = [];
-    })
-    .finally(() => {
-      setTimeout(() => {
-        isLoad.value = false;
-      }, 500);
-    });
-}
-
-/**
- * ดึงข้อมูลสถิติจำนวนด้านบน
- */
-function getSummary() {
-  http
-    .post(config.API.orgSummaryEmp, {
-      id: reqMaster.id, //*Id node
-      type: reqMaster.type, //*ประเภทnode
-      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
-    })
-    .then(async (res: any) => {
-      const data = await res.data.result;
-      store.getSumPosition({
-        totalPosition: data.totalPosition,
-        totalPositionCurrentUse: data.totalPositionCurrentUse,
-        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalPositionNextUse: data.totalPositionNextUse,
-        totalPositionNextVacant: data.totalPositionNextVacant,
-        totalRootPosition: data.totalPosition,
-        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
-        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
-        totalRootPositionNextUse: data.totalPositionNextUse,
-        totalRootPositionNextVacant: data.totalPositionNextVacant,
-      });
-    });
-}
-
-/**
- * funcion ค้นหาข้อมูลใน Table
- */
-function filterKeyword() {
-  reqMaster.page = 1;
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-}
-
-/**
- * function ค้นหาชือ
- * @param data ข้อมูล Tree
- * @param targetId tree
- */
-function searchAndReplaceOrgName(data: any, targetId: string) {
-  for (const child of data) {
-    if (child.orgTreeId === targetId) {
-      mainTree.value = child;
-
-      return true; // Found the targetId in this level
-    }
-    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
-      return true; // Found the targetId in the nested children
-    }
-  }
-  return false; // Not found in this branch
-}
-
-/**
- * lifecycle Hook
- */
-onMounted(() => {
-  fetchDataTree();
-  // setTimeout(async () => {
-  //   store.activeId && (await );
-  // }, 200);
-});
-
-/**
- * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
- */
-watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-});
-
-/**
- *  callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด
- */
-watch(
-  () => reqMaster.isAll,
-  () => {
-    getSummary();
-    if (reqMaster.page !== 1) {
-      reqMaster.page = 1;
-    } else {
-      fetchDataTable(reqMaster.id, reqMaster.type, false);
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="col-12">
-    <q-card bordered class="col-12 row caedNone">
-      <div class="col-xs-12 col-sm-3 row">
-        <div class="col-12 row no-wrap bg-grey-1">
-          <TreeMain
-            v-model:nodeTree="nodeTree"
-            v-model:shortName="shortName"
-            v-model:nodeId="nodeId"
-            :fetchDataTree="fetchDataTree"
-            :fetchDataTable="fetchDataTable"
-          />
-
-          <div class="col-12 row">
-            <q-separator :vertical="!$q.screen.lt.md" />
-          </div>
-        </div>
-      </div>
-
-      <div class="col-xs-12 col-sm-9 q-pa-md row">
-        <div class="col-12 row">
-          <div
-            class="row col-12 justify-center"
-            v-if="isLoad"
-            style="height: 550px"
-          >
-            <div class="col-2">
-              <q-spinner color="primary" size="3em" />
-            </div>
-          </div>
-
-          <div v-else class="col-12 row">
-            <div class="col-12" v-if="nodeId !== ''">
-              <!-- summary -->
-              <q-card
-                bordered
-                v-if="nodeId"
-                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
-              >
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
-                  <q-space />
-                  <q-badge
-                    color="secondary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.total
-                        : store.sumPosition.totalRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
-                  <q-space />
-                  <q-badge
-                    color="primary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.use
-                        : store.sumPosition.useRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งว่าง</div>
-                  <q-space />
-                  <q-badge
-                    color="red"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.vacant
-                        : store.sumPosition.vacantRoot
-                    "
-                  />
-                </div>
-              </q-card>
-
-              <TreeTable
-                v-if="nodeId !== ''"
-                v-model:nodeTree="nodeTree"
-                v-model:orgLevel="orgLevel"
-                v-model:treeId="nodeId"
-                v-model:reqMaster="reqMaster"
-                v-model:totalPage="totalPage"
-                v-model:posMaster="posMaster"
-                :shortName="shortName"
-                :mainTree="mainTree"
-                :fetchDataTable="fetchDataTable"
-                :filterKeyword="filterKeyword"
-                :fetchDataTree="fetchDataTree"
-              />
-            </div>
-            <div class="row col-12 items-center" v-else>
-              <q-banner class="q-pa-lg col-12 text-center">
-                <q-icon
-                  name="mdi-hand-pointing-left"
-                  size="lg"
-                  color="primary"
-                />
-                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
-              </q-banner>
-            </div>
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
-
-<style scoped>
-.list-summary .item {
-  border: 1px solid rgb(231, 231, 231);
-  border-radius: 4px;
-  background-color: white;
-}
-</style>