เพิ่มอัตรากำลังลูกจ้างประจำ

src/api/02_organizational/api.organization.ts

@@ -69,4 +69,11 @@ export default {
   orgEmployeeTypeById: (id: string) => `${orgEmployeePos}/type/${id}`,
   orgEmployeelevel: `${orgEmployeePos}/level`,
   orgEmployeelevelById: (id: string) => `${orgEmployeePos}/level/${id}`,
+
+  /** อัตรากำลังลูกจ้างประจำ*/
+  orgSummaryEmp: `${orgEmployeePos}/summary`,
+  orgReportEmp: (report: string) => `${orgEmployeePos}/report/${report}`,
+  orgDeleteProfileEmp: (id: string) => `${orgEmployeePos}/profile/delete/${id}`,
+  orgPosMasterByIdEmp: (id: string) => `${orgEmployeePos}/master/${id}`,
+  orgPosMasterListEmp: `${orgEmployeePos}/master/list`,
 };

src/interface/request/main/main.ts

@@ -131,6 +131,14 @@ const menuList = readonly<any[]>([
     //   },
     // ],
   },
+  {
+    key: 4,
+    icon: "o_groups",
+    activeIcon: "groups",
+    label: "อัตรากำลังลูกจ้างประจำฯ",
+    path: "positionEmployee",
+    role: "positionEmployee",
+  },
   {
     key: 4,
     icon: "o_contact_page",

src/modules/16_positionEmployee/components/DialogAddPosition.vue

@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import { ref, reactive, watch, defineProps } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type {
+  FormDataPosition,
+  FormPositionRef,
+  DataOption,
+  FormPositionSelect,
+  RowDetailPositions,
+  FormPositionSelectRef,
+  ListMenu,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+
+import type {
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+
+const isSpecial = ref<boolean>(false);
+const props = defineProps({
+  emitSearch: Function,
+  getData: Function,
+  data: Object,
+  levelOp: Object,
+});
+const modal = defineModel<boolean>("modalAdd", { required: true });
+const isEditCheck = defineModel<boolean>("isEdit", { required: true });
+const dataLevel = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+const positionNameRef = ref<Object | null>(null);
+const positionFieldRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+const positionExecutiveRef = ref<Object | null>(null);
+const positionExecutiveFieldRef = ref<Object | null>(null);
+const positionAreaRef = ref<Object | null>(null);
+
+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 formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+});
+
+const objectPositionSelectRef: FormPositionSelectRef = {
+  positionName: positionNameRef,
+  positionField: positionFieldRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+  positionExecutive: positionExecutiveRef,
+  positionExecutiveField: positionExecutiveFieldRef,
+  positionArea: positionAreaRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  isDisValidate.value = false;
+  const hasError = [];
+  for (const key in objectPositionSelectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+      const property = objectPositionSelectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    if (isEditCheck.value == true) {
+      saveSelectEdit();
+    } else {
+      onSubmitSelectEdit();
+    }
+  }
+}
+
+function saveSelectEdit() {
+  console.log(formPositionSelect.positionExecutive);
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const body = {
+        posDictName: formPositionSelect.positionName,
+        posDictField: formPositionSelect.positionField, //สายงาน
+        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+        isSpecial: isSpecial.value,
+      };
+      await http
+        .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+
+          props.getData?.();
+          close();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการแก้ไขตำแหน่ง",
+    "ต้องการยืนยันแก้ไขตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+/** ฟังชั่น บันทึก */
+function onSubmitSelectEdit() {
+  console.log(formPositionSelect.positionExecutive);
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const body = {
+        posDictName: formPositionSelect.positionName,
+        posDictField: formPositionSelect.positionField, //สายงาน
+        posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+        posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+        isSpecial: isSpecial.value,
+      };
+      await http
+        .post(config.API.orgPosPosition, body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+
+          props.emitSearch?.(formPositionSelect.positionName, "positionName");
+          close();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+async function clearFormPositionSelect() {
+  isEditCheck.value = false;
+  isDisValidate.value = await true;
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionField = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+  formPositionSelect.positionExecutive = "";
+  formPositionSelect.positionExecutiveField = "";
+  formPositionSelect.positionArea = "";
+  isSpecial.value = false;
+  setTimeout(async () => {
+    isDisValidate.value = await false;
+  }, 1000);
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+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() {
+  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();
+    });
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      await fetchType();
+      await fetchExecutive();
+      if (props.data) {
+        const dataList = props.data;
+        console.log(dataList);
+        updateSelectType(dataList.posTypeId);
+        formPositionSelect.positionId = dataList.id;
+        formPositionSelect.positionName = dataList.positionName;
+        formPositionSelect.positionField = dataList.positionField;
+        formPositionSelect.positionType = dataList.posTypeId;
+        formPositionSelect.positionLevel = dataList.posLevelId;
+        formPositionSelect.positionExecutive = dataList.posExecutiveId;
+        formPositionSelect.positionExecutiveField =
+          dataList.positionExecutiveField;
+        formPositionSelect.positionArea = dataList.positionArea;
+        isSpecial.value = dataList.isSpecial;
+      }
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <DialogHeader
+        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
+        :close="close"
+      />
+      <q-separator />
+
+      <q-card-section class="q-pa-none">
+        <form @submit.prevent="validateFormPositionEdit">
+          <div class="row q-col-gutter-sm col-12 q-pa-sm">
+            <div class="col-6">
+              <q-input
+                ref="positionNameRef"
+                v-model="formPositionSelect.positionName"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionName"
+                label="ตำแหน่งในสายงาน"
+                lazy-rules
+                hide-bottom-space
+                :rules="
+                  !isDisValidate
+                    ? [(val) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]
+                    : []
+                "
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="positionFieldRef"
+                v-model="formPositionSelect.positionField"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionField"
+                label="สายงาน"
+                lazy-rules
+                hide-bottom-space
+                :rules="
+                  !isDisValidate
+                    ? [(val) => !!val || `${'กรุณากรอกสายงาน'}`]
+                    : []
+                "
+              />
+            </div>
+            <div class="col-6">
+              <q-select
+                ref="positionTypeRef"
+                :class="inputEdit(isReadonly)"
+                label="ประเภทตำแหน่ง"
+                v-model="formPositionSelect.positionType"
+                :options="typeOps"
+                emit-value
+                dense
+                @update:model-value="updateSelectType"
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="
+                  !isDisValidate
+                    ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                    : []
+                "
+              />
+            </div>
+            <div class="col-6">
+              <q-select
+                ref="positionLevelRef"
+                :class="inputEdit(isReadonly)"
+                label="ระดับตำแหน่ง"
+                v-model="formPositionSelect.positionLevel"
+                :disable="formPositionSelect.positionType === ''"
+                :options="levelOps"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="
+                  !isDisValidate
+                    ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                    : []
+                "
+              />
+            </div>
+            <div class="col-6">
+              <q-select
+                ref="positionExecutiveRef"
+                :class="inputEdit(isReadonly)"
+                label="ตำแหน่งทางการบริหาร"
+                v-model="formPositionSelect.positionExecutive"
+                :options="executiveOps"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                clearable
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="positionExecutiveFieldRef"
+                v-model="formPositionSelect.positionExecutiveField"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionExecutiveField"
+                label="ด้านทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="positionAreaRef"
+                v-model="formPositionSelect.positionArea"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionArea"
+                label="ด้าน/สาขา"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6 self-center">
+              <q-checkbox size="md" v-model="isSpecial" label="ฉ" />
+            </div>
+          </div>
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
+            <q-btn
+              type="submit"
+              :label="`${isEditCheck ? 'แก้ไขตำแหน่ง' : 'เพิ่มตำแหน่ง'}`"
+              color="public"
+            />
+          </q-card-actions>
+        </form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/16_positionEmployee/components/DialogFormPosition.vue

@@ -0,0 +1,980 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
+
+import type {
+  FormDataPosition,
+  FormPositionRef,
+  DataOption,
+  FormPositionSelect,
+  RowDetailPositions,
+  FormPositionSelectRef,
+  ListMenu,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+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 succession = ref<boolean>(false); // id ของตำแหน่งที่จะสืบทอด
+const dataCopy = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+  dialogMessageNotify,
+} = mixin;
+const selected = ref<any>([]);
+const search = ref<string>("");
+const type = ref<string>("positionName");
+const optionFilter = ref<DataOption[]>([
+  { id: "positionName", name: "ตำแหน่งในสายงาน" },
+  { id: "positionField", name: "สายงาน" },
+  { id: "positionType", name: "ประเภทตำแหน่ง" },
+  { id: "positionLevel", name: "ระดับตำแหน่ง" },
+  { id: "positionExecutive", name: "ตำแหน่งทางการบริหาร" },
+  { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
+  { id: "positionArea", name: "ด้าน/สาขา" },
+]);
+
+const typeOpsMain = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const executiveOpsMain = ref<DataOption[]>([]);
+const executiveOps = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const levelOps = ref<any[]>([]);
+
+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 ocLevelOp = ref<DataOption[]>([]);
+
+const prefixNoRef = ref<Object | null>(null);
+const positionNoRef = ref<Object | null>(null);
+
+const positionNameRef = ref<Object | null>(null);
+const positionFieldRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+const positionExecutiveRef = ref<Object | null>(null);
+const positionExecutiveFieldRef = ref<Object | null>(null);
+const positionAreaRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataPosition>({
+  shortName: props.shortName,
+  prefixNo: "",
+  positionNo: "",
+  suffixNo: "",
+});
+
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+});
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectPositionRef: FormPositionRef = {
+  prefixNo: prefixNoRef,
+  positionNo: positionNoRef,
+};
+
+const objectPositionSelectRef: FormPositionSelectRef = {
+  positionName: positionNameRef,
+  positionField: positionFieldRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+  positionExecutive: positionExecutiveRef,
+  positionExecutiveField: positionExecutiveFieldRef,
+  positionArea: positionAreaRef,
+};
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "positionName",
+  "positionField",
+  "posTypeName",
+  "posLevelName",
+  "posExecutiveName",
+  "positionExecutiveField",
+  "positionArea",
+]);
+
+async function fetchPosition(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgPosPositionById(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.prefixNo = data.posMasterNoPrefix;
+      formData.positionNo = data.posMasterNo;
+      formData.suffixNo = data.posMasterNoSuffix;
+      rows.value = data.positions;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+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 fetchLevel() {
+//   showLoader();
+//   await http
+//     .get(config.API.orgPosLevel)
+//     .then((res) => {
+//       levelOpsMain.value = res.data.result.map((e: OptionLevel) => ({
+//         id: e.id,
+//         name: e.posLevelName,
+//       }));
+//       levelOps.value = levelOpsMain.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();
+    }
+  }
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+// function validateFormPositionEdit() {
+//   isDisValidate.value = false;
+//   const hasError = [];
+//   for (const key in objectPositionSelectRef) {
+//     if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+//       const property = objectPositionSelectRef[key];
+//       if (property.value && typeof property.value.validate === "function") {
+//         const isValid = property.value.validate();
+//         hasError.push(isValid);
+//       }
+//     }
+//   }
+//   if (hasError.every((result) => result === true)) {
+//     onSubmitSelectEdit();
+//   }
+// }
+
+/** ฟังชั่น บันทึก */
+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,
+    }));
+    const body = {
+      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+      posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
+      posMasterNoSuffix: formData.suffixNo, //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,
+      // succession: succession.value,
+    };
+
+    showLoader();
+    props.actionType === "ADD"
+      ? await http
+          .post(config.API.orgPosMaster, body)
+          .then(() => {
+            success($q, "เพิ่มข้อมูลสำเร็จ");
+            props.fetchDataTable?.(
+              reqMaster.value.id,
+              reqMaster.value.type,
+              false
+            );
+            props.getSummary?.();
+            close();
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          })
+      : props.rowId &&
+        (await http
+          .put(config.API.orgPosMasterById(props.rowId), body)
+          .then(() => {
+            success($q, "แก้ไขข้อมูลสำเร็จ");
+            props.fetchDataTable?.(
+              reqMaster.value.id,
+              reqMaster.value.type,
+              false
+            );
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            close();
+            hideLoader();
+          }));
+  });
+}
+/** ฟังชั่น บันทึก */
+// function onSubmitSelectEdit() {
+//   dialogConfirm(
+//     $q,
+//     async () => {
+//       showLoader();
+//       const body = {
+//         posDictName: formPositionSelect.positionName,
+//         posDictField: formPositionSelect.positionField, //สายงาน
+//         posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+//         posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+//         posExecutiveId:
+//           formPositionSelect.positionExecutive !== ""
+//             ? formPositionSelect.positionExecutive
+//             : null, //ตำแหน่งทางการบริหาร
+//         posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+//         posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+//       };
+//       await http
+//         .post(config.API.orgPosPosition, body)
+//         .then(() => {
+//           success($q, "เพิ่มข้อมูลสำเร็จ");
+
+//           clearFormPositionSelect();
+//         })
+//         .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();
+      });
+  }
+}
+
+// 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 = "";
+// }
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  modalAdd.value = true;
+  dataCopy.value = 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
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      fetchType();
+      // fetchLevel();
+      fetchExecutive();
+
+      if (props.actionType === "ADD") {
+        rowsPositionSelect.value = [];
+        search.value = "";
+        rows.value = [];
+        clearFormPositionSelect();
+        formData.prefixNo = "";
+        formData.positionNo = "";
+        formData.suffixNo = "";
+      } else {
+        props.rowId && fetchPosition(props.rowId);
+      }
+    }
+  }
+);
+
+async function addPosition(data: RowDetailPositions) {
+  const isIdExist = await rows.value.some(
+    (item: any) =>
+      item.posExecutiveId == data.posExecutiveId &&
+      item.positionField == data.positionField &&
+      item.posLevelId == data.posLevelId &&
+      item.posTypeId == data.posTypeId &&
+      item.positionArea == data.positionArea &&
+      item.positionExecutiveField == data.positionExecutiveField &&
+      item.positionName == data.positionName &&
+      item.isSpecial == data.isSpecial
+  );
+
+  if (!isIdExist) {
+    rows.value = [...rows.value, data];
+    // rows.value.push(data);
+  }
+}
+
+function deleteData(id: string) {
+  const dataRow = rows.value;
+  const updatedRows = dataRow.filter((item: any) => item.id !== id);
+  rows.value = updatedRows;
+}
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosPositionById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        searchInput();
+        hideLoader();
+      });
+  });
+}
+
+async function clearFormPositionSelect() {
+  isDisValidate.value = await true;
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionField = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+  formPositionSelect.positionExecutive = "";
+  formPositionSelect.positionExecutiveField = "";
+  formPositionSelect.positionArea = "";
+
+  setTimeout(async () => {
+    isDisValidate.value = await false;
+  }, 1000);
+}
+
+function close() {
+  props.close?.();
+  isPosition.value = false;
+}
+
+async function emitSearch(keyword: string, typeSelect: string) {
+  search.value = await keyword;
+  type.value = await typeSelect;
+
+  await searchInput();
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 80vw">
+      <DialogHeader
+        :tittle="
+          props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
+        "
+        :close="close"
+      />
+      <q-separator />
+      <form @submit.prevent="validateForm">
+        <q-card-section class="q-pa-sm fixed-height">
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                >
+                  ข้อมูลอัตรากำลัง
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="row q-col-gutter-sm col-12 q-pa-sm">
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.shortName"
+                      dense
+                      outlined
+                      readonly
+                      for="#shortName"
+                      label="อักษรย่อ"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.prefixNo"
+                      :class="inputEdit(isReadonly)"
+                      ref="prefixNoRef"
+                      dense
+                      outlined
+                      for="#prefixNo"
+                      label="Prefix เลขที่ตำเเหน่ง"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.positionNo"
+                      :class="inputEdit(isReadonly)"
+                      ref="positionNoRef"
+                      dense
+                      outlined
+                      for="#positionNo"
+                      label="เลขที่ตำแหน่ง"
+                      lazy-rules
+                      hide-bottom-space
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                      mask="########################"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.suffixNo"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#suffixNo"
+                      label="Suffix เลขที่ตำแหน่ง"
+                    />
+                  </div>
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rows"
+                      row-key="idcard"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="visibleColumns"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else-if="col.name === 'posExecutiveName'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'positionExecutiveField'"
+                            >
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else-if="col.name === 'posLevelName'">
+                              {{
+                                props.row.posLevelName
+                                  ? props.row.isSpecial == true
+                                    ? `${props.row.posLevelName} (ฉ)`
+                                    : props.row.posLevelName
+                                  : "-"
+                              }}
+                            </div>
+                            <div v-else-if="col.name === 'positionArea'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              flat
+                              dense
+                              icon="mdi-delete"
+                              class="q-pa-none q-ml-xs"
+                              color="red"
+                              @click="deleteData(props.row.id)"
+                            >
+                              <q-tooltip>ลบข้อมูล</q-tooltip>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+                <q-separator />
+
+                <q-card-actions class="bg-white q-pa-xs">
+                  <q-btn
+                    :icon="!isPosition ? 'mdi-menu-right' : 'mdi-menu-down'"
+                    flat
+                    color="teal"
+                    class="q-ml-sm"
+                    label="เพิ่มตำแหน่ง"
+                    @click="isPosition = !isPosition"
+                    ><q-tooltip>{{
+                      !isPosition
+                        ? "คลิกเพื่อแสดงส่วนของการเพิ่มตำแหน่ง"
+                        : "ปิดหน้าต่างการเพิ่มตำแหน่ง"
+                    }}</q-tooltip></q-btn
+                  >
+                  <q-space />
+                </q-card-actions>
+              </q-card>
+            </div>
+          </div>
+
+          <div v-if="isPosition" class="row q-col-gutter-sm q-mt-sm">
+            <div class="col-12">
+              <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+                <div
+                  class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                >
+                  เลือกตำแหน่งที่ต้องการเพิ่ม
+                  <q-btn
+                    icon="mdi-plus"
+                    flat
+                    round
+                    color="teal"
+                    @click="() => (modalAdd = true)"
+                    ><q-tooltip>สร้างตำแหน่ง</q-tooltip></q-btn
+                  >
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="q-pa-sm">
+                  <div class="row col-12 q-col-gutter-sm items-start">
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-select
+                        label="ค้นหาจาก"
+                        v-model="type"
+                        :options="optionFilter"
+                        emit-value
+                        dense
+                        map-options
+                        outlined
+                        option-label="name"
+                        option-value="id"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-6">
+                      <q-input
+                        ref="searchRef"
+                        :class="inputEdit(isReadonly)"
+                        v-model="search"
+                        outlined
+                        clearable
+                        dense
+                        lazy-rules
+                        label="คำค้น"
+                        hide-bottom-space
+                        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
+                        @keydown.enter.prevent="searchInput()"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-pa-sm"
+                        @click="searchInput()"
+                      >
+                      </q-btn>
+                    </div>
+                  </div>
+
+                  <div class="full-width q-mt-sm">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rowsPositionSelect"
+                      row-key="id"
+                      flat
+                      bordered
+                      :paging="true"
+                      dense
+                      class="custom-header-table"
+                      :visible-columns="visibleColumns"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            style="color: #000000; font-weight: 500"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                          <q-th auto-width></q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            @click="addPosition(props.row)"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else-if="col.name === 'posExecutiveName'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'positionExecutiveField'"
+                            >
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else-if="col.name === 'posLevelName'">
+                              {{
+                                props.row.posLevelName
+                                  ? props.row.isSpecial == true
+                                    ? `${props.row.posLevelName} (ฉ)`
+                                    : props.row.posLevelName
+                                  : "-"
+                              }}
+                            </div>
+
+                            <div v-else-if="col.name === 'positionArea'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                          <q-td auto-width>
+                            <q-btn
+                              flat
+                              dense
+                              icon="mdi-dots-vertical"
+                              class="q-pa-none q-ml-xs"
+                              color="grey-13"
+                            >
+                              <q-menu anchor="bottom middle" self="top middle">
+                                <q-list
+                                  dense
+                                  v-for="(item, index) in listMenu"
+                                  :key="index"
+                                >
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="
+                                      item.type === 'copy'
+                                        ? copyDetiail(props.row)
+                                        : item.type === 'edit'
+                                        ? editDetiail(props.row)
+                                        : deletePos(props.row.id)
+                                    "
+                                  >
+                                    <q-item-section avatar>
+                                      <q-icon
+                                        :color="item.color"
+                                        :name="item.icon"
+                                        size="sm"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section>{{
+                                      item.label
+                                    }}</q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+  <DialogAddPosition
+    v-model:modalAdd="modalAdd"
+    :emitSearch="emitSearch"
+    :data="dataCopy"
+    v-model:is-edit="isEdit"
+    :get-data="searchInput"
+  />
+</template>
+
+<style scoped>
+.fixed-height {
+  overflow-y: auto;
+  height: 80vh;
+}
+</style>

src/modules/16_positionEmployee/components/DialogHistoryPos.vue

@@ -0,0 +1,168 @@
+<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 type { QTableProps } from "quasar";
+import type { HistoryPos } from "@/modules/16_positionEmployee/interface/response/organizational";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgShortName",
+    align: "left",
+    label: "อักษรย่อ",
+    sortable: true,
+    field: "orgShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoPrefix",
+    align: "left",
+    label: " Prefix เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoPrefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoSuffix",
+    align: "left",
+    label: "Suffix เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoSuffix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>();
+
+const props = defineProps({
+  rowId: {
+    type: String,
+  },
+});
+
+async function fetchHistoryPos(id: string) {
+  showLoader();
+  await http
+    .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;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && props.rowId && fetchHistoryPos(props.rowId);
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <Header
+        :tittle="'ประวัติตำแหน่ง'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm">
+        <d-table
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="id"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{
+                    store.typeOrganizational === "current"
+                      ? props.rowIndex + 1
+                      : props.rowIndex + 1 == 1
+                      ? "1 (แบบร่าง)"
+                      : props.rowIndex + 1 == 2
+                      ? "2 (ปัจจุบัน)"
+                      : props.rowIndex + 1
+                  }}
+                </div>
+
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/16_positionEmployee/components/DialogMovePos.vue

@@ -0,0 +1,318 @@
+<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 type { QTableProps } from "quasar";
+import type {
+  OrgTree,
+  PosMaster2,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type {
+  MovePos,
+  FilterMaster,
+} from "@/modules/16_positionEmployee/interface/request/organizational";
+import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
+
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
+const columns = defineModel<QTableProps[]>("columns", {});
+const rows = defineModel<PosMaster2[]>("rows", { required: true });
+
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  rowId: {
+    type: String,
+    required: true,
+  },
+  mainTree: {
+    type: Object,
+    required: true,
+  },
+});
+
+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[]>([]);
+
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+}
+
+const isDisable = computed(() => {
+  if (selectedTree.value === "" && selectedFilter.value.length === 0) {
+    return true;
+  } else return false;
+});
+
+function onClickMovePos() {
+  if (selectedTree.value === "" || selectedTree.value === null) {
+    console.log("เลือกหน่วยงาน");
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
+  } else if (selectedFilter.value.length === 0) {
+    console.log("เลือกตำแห่นง");
+    dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        const position = selectedFilter.value.map((e: PosMaster2) => e.id);
+        const body: MovePos = {
+          id: selectedTree.value,
+          type: levelTree.value,
+          positionMaster: position,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosMove, body)
+          .then(() => {
+            props.fetchDataTree?.(store.draftId);
+            modal.value = false;
+            success($q, "ย้ายตำแหน่งสำเร็จ");
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการย้ายตำแหน่ง",
+      "ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    reqMaster.value.page = 1;
+    filterTree.value = "";
+
+    title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
+    if (modal.value && props.type === "SINGER") {
+      const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
+      selectedFilter.value = data;
+      selectedTree.value = "";
+    } else {
+      selectedFilter.value = [];
+      selectedTree.value = "";
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+      <q-separator />
+
+      <q-card-section class="q-pt-none bg-grey-2 q-pa-sm">
+        <div class="row">
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
+              >
+              <q-space />
+
+              <div>
+                <q-input outlined dense v-model="filterTable" label="ค้นหา" />
+              </div>
+            </q-toolbar>
+
+            <d-table
+              flat
+              bordered
+              :rows="rows"
+              :columns="columns"
+              row-key="id"
+              :filter="filterTable"
+              no-data-label="ไม่มีข้อมูล"
+              selection="multiple"
+              v-model:selected="selectedFilter"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name == 'no'">
+                      {{
+                        (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="reqMaster.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="totalPage"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </d-table>
+          </q-card>
+
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="height: 750px"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="labelName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn
+          unelevated
+          label="ย้ายตำแหน่ง"
+          color="public"
+          @click="onClickMovePos"
+          class="q-px-md"
+          :disable="isDisable"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/16_positionEmployee/components/DialogPositionDetail.vue

@@ -0,0 +1,325 @@
+<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 type*/
+import type { QTableProps } from "quasar";
+import type {
+  FormDetailPosition,
+  Position,
+} from "@/modules/16_positionEmployee/interface/index/organizational";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+/**use*/
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+/**Props*/
+const modal = defineModel<boolean>("positionDetail", { required: true });
+const prosp = defineProps({
+  dataDetailPos: { type: Object, require: true },
+});
+
+/** formData*/
+const formData = reactive<FormDetailPosition>({
+  positionNo: "", //*เลขที่ตำแหน่ง
+  positionType: "", //*ตำแหน่งประเภท
+  positionPathSide: "", //*ตำแหน่งในสายงาน
+  positionLine: "", //*สายงาน
+  positionSide: "", //*ด้าน/สาขา
+  positionLevel: "", //*ระดับตำแหน่ง
+  positionExecutive: "", //*ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "", //*ด้านทางการบริหาร
+  status: "", //*สถานะตำแหน่ง
+});
+
+// const columns = ref<QTableProps["columns"]>([
+//   {
+//     name: "no",
+//     align: "left",
+//     label: "ลำดับ",
+//     sortable: false,
+//     field: "no",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionName",
+//     align: "left",
+//     label: "ตำแหน่งในสายงาน",
+//     sortable: true,
+//     field: "positionName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionField",
+//     align: "left",
+//     label: "สายงาน",
+//     sortable: true,
+//     field: "positionField",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posTypeName",
+//     align: "left",
+//     label: "ประเภทตำเเหน่ง",
+//     sortable: true,
+//     field: "posTypeName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posLevelName",
+//     align: "left",
+//     label: "ระดับตำแหน่ง",
+//     sortable: true,
+//     field: "posLevelName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "posExecutiveName",
+//     align: "left",
+//     label: "ตำแหน่งทางการบริหาร",
+//     sortable: true,
+//     field: "posExecutiveName",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionExecutiveField",
+//     align: "left",
+//     label: "ด้านทางการบริหาร",
+//     sortable: true,
+//     field: "positionExecutiveField",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+//   {
+//     name: "positionArea",
+//     align: "left",
+//     label: "ด้าน/สาขา",
+//     sortable: true,
+//     field: "positionArea",
+//     headerStyle: "font-size: 14px",
+//     style: "font-size: 14px",
+//   },
+// ]);
+// const row = ref<Position[]>([]);
+
+/** function ปิด popup*/
+function close() {
+  modal.value = false;
+}
+
+/** callblack function ทำเมื่อเปิด popup set เลขที่ตำแหน่ง และสถานะตำแหน่ง */
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      if (prosp.dataDetailPos) {
+        formData.positionNo = prosp.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        formData.positionType = prosp.dataDetailPos.posTypeName;
+        formData.positionPathSide = prosp.dataDetailPos.positionName;
+        formData.positionLine = prosp.dataDetailPos.positionField;
+        formData.positionSide = prosp.dataDetailPos.positionArea
+          ? prosp.dataDetailPos.positionArea
+          : "-";
+        formData.positionLevel = prosp.dataDetailPos.posLevelName;
+        formData.positionExecutive = prosp.dataDetailPos.posExecutiveName
+          ? prosp.dataDetailPos.posExecutiveName
+          : "-";
+        formData.positionExecutiveSide = prosp.dataDetailPos
+          .positionExecutiveField
+          ? prosp.dataDetailPos.positionExecutiveField
+          : "-";
+
+        // row.value = prosp.dataDetailPos.positions.map((e: Position) => ({
+        //   ...e,
+        //   positionName: e.positionName ? e.positionName : "-",
+        //   positionField: e.positionField ? e.positionField : "-",
+        //   posTypeName: e.posTypeName ? e.posTypeName : "-",
+        //   posLevelName: e.posLevelName ? e.posLevelName : "-",
+        //   posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+        //   positionExecutiveField: e.positionExecutiveField
+        //     ? e.positionExecutiveField
+        //     : "-",
+        //   positionArea: e.positionArea ? e.positionArea : "-",
+        // }));
+      }
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 80vw'">
+        <DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>เลขที่ตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งประเภท</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionType }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งในสายงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionPathSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สายงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionLine }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ด้าน/สาขา</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ระดับตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionLevel }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่งทางการบริหาร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionExecutive }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ด้านทางการบริหาร</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.positionExecutiveSide }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>สถานะตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ formData.status }}</p>
+              </div>
+            </div>
+
+            <!-- <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-bottom
+                  class="custom-header-table-expand"
+                >
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </div> -->
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/16_positionEmployee/components/DialogSelectPerson.vue

@@ -0,0 +1,726 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  Position,
+  SeaechResult,
+  FormPositionFilter,
+} from "@/modules/16_positionEmployee/interface/index/organizational";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  SelectPerson,
+  TypePos,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+
+/** importCompoonents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** import*Store*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  dialogConfirm,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchActive: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    required: true,
+  },
+  getSummary: {
+    type: Function,
+    required: true,
+  },
+  dataDetailPos: { type: Object, require: true },
+});
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = 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: "", //*เลขที่ตำแหน่ง
+  positionType: "", //*เลขที่ตำแหน่ง
+  positionLevel: "", //*เลขที่ตำแหน่ง
+  personal: "", //*เลขที่ตำแหน่ง
+  position: "", //*เลขที่ตำแหน่ง
+  status: "",
+});
+
+/** Table*/
+const visibleColumnsResult = ref<String[]>([
+  "no",
+  "citizenId",
+  "name",
+  "posTypeName",
+  "posLevelName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsResult = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const row = ref<Position[]>([]);
+const rowResult = ref<SeaechResult[]>([]);
+
+/** function closePopup*/
+function close() {
+  modal.value = false;
+}
+
+/** 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();
+    });
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/** function เรียกข้แมูลระดับตำแหน่ง*/
+function updateSelectType(val: string) {
+  const listLevel: any = dataLevel.value.find((e: TypePos) => e.id === val);
+  levelOpsMain.value = listLevel?.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+  formData.positionLevel = "";
+}
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  if (selected.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกรายการตำแหน่ง");
+  } else if (selectedProfile.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกคนครอง");
+  } else {
+    onSubmit();
+  }
+}
+
+/** function ยืนยันการบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        posMaster: props.dataDetailPos?.id, //*id อัตรากำลัง
+        position: selected.value[0]?.id, //*id ตำแหน่ง
+        profileId: selectedProfile.value[0]?.id, //*id profile
+        isSit: isSit.value, //*นั่งทับที่ไหม
+      };
+      showLoader();
+      http
+        .post(config.API.orgProfile, body)
+        .then(() => {
+          props.fetchDataTable?.(store.treeId, store.level, false);
+          props.getSummary();
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          modal.value = await false;
+          close();
+          hideLoader();
+        });
+    },
+    "ยืนยันการเลือกคนครอง",
+    "ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const totalPage = ref<number>(0);
+const selectedProfile = ref<SeaechResult[]>([]);
+/** functiuon ค้นหาคนครอง */
+async function searchData() {
+  showLoader();
+  const reqBody = {
+    posTypeId: formData.positionType, // id ประเภทตำแหน่ง
+    posLevelId: formData.positionLevel, // id ระดับตำแหน่ง
+    position: formData.position, // ตำแหน่ง
+    page: page.value, //*หน้า
+    pageSize: pageSize.value, //*จำนวนแถวต่อหน้า
+    keyword: formData.personal, //นามสกุล ชื่อ สกุล เลขบัตร
+  };
+  await http
+    .post(config.API.orgSearchProfile, reqBody)
+    .then((res) => {
+      totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      const list = res.data.result.data.map((e: SelectPerson) => ({
+        id: e.id,
+        citizenId: e.citizenId,
+        name: `${e.prefix + e.firstName + " " + e.lastName}`,
+        posTypeName: e.posType ?? "-",
+        positionName: e.position ?? "-",
+        posLevelName: e.posLevel ?? "-",
+      }));
+      rowResult.value = list;
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function update PageSize*/
+function updatePagination(newPagination: NewPagination) {
+  pageSize.value = newPagination.rowsPerPage;
+  page.value = 1;
+}
+
+/** function เคลียร์Form*/
+function clearForm() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+  formData.personal = "";
+  formData.position = "";
+  row.value = [];
+  rowResult.value = [];
+  selected.value = [];
+  selectedProfile.value = [];
+  isSit.value = false;
+}
+
+/** function เคลียร์ตำแหน่ง*/
+function clearPosition() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+}
+
+/** callback function ทำงานเมื่อเปิด popup*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value == true) {
+      await clearForm();
+      await fetchType();
+
+      if (props.dataDetailPos) {
+        formData.positionNo = props.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        row.value = props.dataDetailPos.positions.map((e: Position) => ({
+          ...e,
+          positionName: e.positionName ? e.positionName : "-",
+          positionField: e.positionField ? e.positionField : "-",
+          posTypeName: e.posTypeName ? e.posTypeName : "-",
+          posLevelName: e.posLevelName ? e.posLevelName : "-",
+          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+          positionExecutiveField: e.positionExecutiveField
+            ? e.positionExecutiveField
+            : "-",
+          positionArea: e.positionArea ? e.positionArea : "-",
+        }));
+        if (row.value.length === 1) {
+          selected.value.push(row.value[0]);
+        }
+      }
+    }
+  }
+);
+
+/** callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination*/
+watch([() => page.value, () => pageSize.value], () => {
+  searchData();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80vw">
+      <form @submit.prevent="validateForm">
+        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="fixed-height">
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="text-bold text-body1">
+                <p>เลขที่ตำแหน่ง</p>
+              </div>
+              <div class="text-grey-8 q-ml-sm text-body1">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                รายการตำแหน่ง
+              </div>
+              <div class="col-12"><q-separator /></div>
+
+              <div class="q-pa-sm col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-pagination
+                  class="custom-header-table"
+                  selection="single"
+                  v-model:selected="selected"
+                >
+                  <template v-slot:header-selection="scope">
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="scope.checkBox"
+                    />
+                  </template>
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th class="text-center"> </q-th>
+
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td class="text-center">
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </div>
+            </q-card>
+
+            <q-card
+              bordered
+              class="row col-12 q-mt-sm"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ค้นหาคนครอง
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12">
+                <div class="row q-col-gutter-sm q-pa-sm">
+                  <div class="col-2">
+                    <q-input
+                      ref="positionExecutiveFieldRef"
+                      v-model="formData.personal"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#search"
+                      label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      ref="positionRef"
+                      v-model="formData.position"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#position"
+                      label="ตำแหน่งในสายงาน"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-2">
+                    <q-select
+                      ref="positionTypeRef"
+                      :class="inputEdit(isReadonly)"
+                      label="ประเภทตำแหน่ง"
+                      v-model="formData.positionType"
+                      :options="typeOps"
+                      emit-value
+                      dense
+                      @update:model-value="updateSelectType"
+                      map-options
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      lazy-rules
+                      hide-bottom-space
+                      ><template v-if="formData.positionType" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="clearPosition()"
+                          class="cursor-pointer"
+                        /> </template
+                    ></q-select>
+                  </div>
+                  <div class="col-2">
+                    <q-select
+                      ref="positionLevelRef"
+                      :class="inputEdit(isReadonly)"
+                      label="ระดับตำแหน่ง"
+                      v-model="formData.positionLevel"
+                      :disable="formData.positionType == ''"
+                      :options="levelOps"
+                      emit-value
+                      dense
+                      map-options
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      lazy-rules
+                      hide-bottom-space
+                    >
+                      <template v-if="formData.positionLevel" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="formData.positionLevel = ''"
+                          class="cursor-pointer"
+                        /> </template
+                    ></q-select>
+                  </div>
+                  <div class="col-2">
+                    <q-btn
+                      label="ค้นหา"
+                      color="teal-5"
+                      class="full-height"
+                      icon="search"
+                      @click="searchData"
+                    />
+                  </div>
+
+                  <q-select
+                    for="#select"
+                    v-model="visibleColumnsResult"
+                    multiple
+                    outlined
+                    dense
+                    options-dense
+                    :display-value="$q.lang.table.columns"
+                    emit-value
+                    map-options
+                    :options="columnsResult"
+                    option-value="name"
+                    options-cover
+                    style="min-width: 150px"
+                    class="col-xs-12 col-sm-3 col-md-2"
+                  />
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      flat
+                      :columns="columnsResult"
+                      :rows="rowResult"
+                      row-key="id"
+                      dense
+                      class="custom-header-table"
+                      :paging="true"
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                      @update:pagination="updatePagination"
+                      selection="single"
+                      v-model:selected="selectedProfile"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width />
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td>
+                            <q-checkbox
+                              keep-color
+                              color="primary"
+                              dense
+                              v-model="props.selected"
+                            />
+                          </q-td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{
+                                (page - 1) * Number(pageSize) +
+                                props.rowIndex +
+                                1
+                              }}
+                            </div>
+
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                      <template v-slot:pagination="scope">
+                        <q-pagination
+                          v-model="page"
+                          active-color="primary"
+                          color="dark"
+                          :max="totalPage"
+                          size="sm"
+                          boundary-links
+                          direction-links
+                        ></q-pagination>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+
+            <div class="row col-12 q-pa-sm">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isSit"
+                label="ทับที่"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`ยืนยัน`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.fixed-height {
+  overflow-y: auto;
+  height: 80vh;
+}
+</style>

src/modules/16_positionEmployee/components/DialogSortPosition.vue

@@ -0,0 +1,154 @@
+<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 type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+const $q = useQuasar();
+const store = usePositionEmp();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("sortPosition", { required: true });
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    required: true,
+    label: "ชื่อ",
+    align: "left",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+const props = defineProps({
+  fetchDataTable: Function,
+});
+
+function onDrop(from: any, to: any) {
+  onDropRow(from, to);
+}
+
+function onDropRow(from: any, to: any) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+function save() {
+  dialogConfirm($q, () => {
+    const data = rows.value;
+    const dataId = data.map((item: any) => item.id);
+    showLoader();
+    http
+      .post(config.API.orgPosSort, {
+        id: store.treeId,
+        type: store.level,
+        sortId: dataId,
+      })
+      .then((res) => {
+        modal.value = false;
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchDataTable?.(store.treeId, store.level, false);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function getData() {
+  showLoader();
+  http
+    .post(config.API.orgPosMasterList, {
+      id: store.treeId,
+      type: store.level,
+      isAll: false,
+      page: 1,
+      pageSize: 100,
+      keyword: "",
+      revisionId: store.draftId,
+    })
+    .then((res) => {
+      const dataList = res.data.result.data;
+      const dataMap = dataList.map((item: any) => ({
+        id: item.id,
+        name: `${item.orgShortname}${item.posMasterNoPrefix}${item.posMasterNo}${item.posMasterNoSuffix}`,
+        posMasterNoPrefix: item.posMasterNoPrefix,
+        posMasterNo: item.posMasterNo,
+        posMasterNoSuffix: item.posMasterNoSuffix,
+      }));
+      rows.value = dataMap;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <DialogHeader
+          :tittle="`จัดลำดับตำแหน่ง`"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <q-table
+            v-if="rows.length > 0"
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'th,td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[100]"
+            row-key="orgTreeId"
+            hide-bottom
+            hide-pagination
+            hide-header
+          />
+          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            :disable="rows.length === 0"
+            type="submit"
+            :label="`บันทึก`"
+            color="public"
+            @click="save"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/16_positionEmployee/components/DialogSuccession.vue

@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/16_positionEmployee/interface/index/Main";
+import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
+import type {
+  OrgTree,
+  PosMaster,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type {
+  FilterMaster,
+  Inherit,
+} from "@/modules/16_positionEmployee/interface/request/organizational";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  rowId: { type: String, default: "" },
+});
+
+/*************************** Tree ***********************************/
+const filterTree = ref<string>("");
+const nodeTree = ref<OrgTree[]>([]);
+const selectedTree = ref<string>("");
+const filterRef = ref();
+const levelTree = ref<number>(0);
+
+/** function เรียกข้อมูล Tree แบบ ปัจจุบัน*/
+async function fetchTree() {
+  showLoader();
+  const id: string = store.activeId ? store.activeId?.toString() : "";
+  await http
+    .get(config.API.orgByid(id))
+    .then((res) => {
+      console.log(res);
+      nodeTree.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** resetFilterTree*/
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+/** function เลือกหน่วยงาน*/
+async function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = await data.orgTreeId;
+  reqMaster.type = await data.orgLevel;
+  await fetchTable();
+}
+
+/*************************** TABLE ***********************************/
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<PosMaster[]>([]);
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: store.activeId,
+});
+const totalRow = ref<number>(0);
+const selectedPos = ref<PosMaster[]>([]);
+
+/** function เรียกข้อมูล Table Position*/
+async function fetchTable() {
+  selectedPos.value = [];
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then((res) => {
+      totalRow.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      const data = res.data.result.data;
+      const list = data.map((e: PosMaster) => ({
+        ...e,
+        posMasterNo:
+          e.orgShortname +
+          e.posMasterNoPrefix +
+          e.posMasterNo +
+          e.posMasterNoSuffix,
+      }));
+      rows.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.pageSize = newPagination.rowsPerPage;
+  reqMaster.page = 1;
+}
+
+/** funcion ค้นหาข้อมูลใน Table*/
+async function filterKeyword() {
+  reqMaster.page = 1;
+  fetchTable();
+}
+
+/** function ยืนยันกาสืบทอดตำแหน่ง */
+function onClickConfirm() {
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log(props.rowId, selectedPos.value[0].id);
+        const body: Inherit = {
+          draftPositionId: props.rowId,
+          publishPositionId: selectedPos.value[0].id,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosDNA, body)
+          .then(() => {
+            success($q, "การสืบทอดตำแหน่งสำเร็จ");
+            modal.value = false;
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการสืบทอดตำแหน่ง",
+      "ต้องการยืนยันการสืบทอดตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+/** 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 clearForm() {
+  nodeTree.value = [];
+  rows.value = [];
+  selectedTree.value = "";
+  reqMaster.id = "";
+  reqMaster.type = 0;
+  reqMaster.isAll = false;
+  reqMaster.page = 1;
+  reqMaster.pageSize = 10;
+  reqMaster.keyword = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <Header
+        :tittle="'เลือกตำแหน่งที่ต้องการสืบทอดจากโครงสร้างปัจจุบัน'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm bg-grey-2">
+        <div class="row">
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="height: 75vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="labelName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการสืบทอด</q-toolbar-title
+              >
+              <q-space />
+
+              <div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="reqMaster.keyword"
+                  label="ค้นหา"
+                  @keyup.enter="filterKeyword"
+                />
+              </div>
+            </q-toolbar>
+            <div class="col-12">
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                no-data-label="ไม่มีข้อมูล"
+                ref="table"
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
+                selection="single"
+                v-model:selected="selectedPos"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </q-td>
+
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalRow"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/16_positionEmployee/components/TreeMain.vue

@@ -0,0 +1,625 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { ListMenu } from "@/modules/16_positionEmployee/interface/index/Main";
+import type { OrgTree } from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+/** props*/
+const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { required: true });
+const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
+
+/** ListMenuTree*/
+const listAdd = ref<ListMenu[]>([
+  {
+    label: "เพิ่ม",
+    icon: "add",
+    type: "ADD",
+    color: "primary",
+  },
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+
+  {
+    label: "ประวัติ",
+    icon: "history",
+    type: "HISTORY",
+    color: "purple",
+  },
+  {
+    label: "จัดลำดับ",
+    icon: "mdi-sort",
+    type: "SORT",
+    color: "blue-6",
+  },
+  {
+    label: "ดูรายละเอียด",
+    icon: "mdi-eye",
+    type: "DETAIL",
+    color: "blue-9",
+  },
+]);
+
+const filter = ref<string>("");
+const nodes = ref<Array<OrgTree>>([]);
+const dataSort = ref<Array<any>>([]);
+const lazy = ref(nodes);
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+const orgLevel = ref<number>(0);
+const type = ref<number>(0);
+const orgId = ref<string>("");
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  shortName.value = data.orgTreeShortName;
+
+  if (!store.treeId || store.treeId != data.orgTreeId) {
+    store.treeId = data.orgTreeId;
+    store.level = data.orgLevel;
+
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
+    http
+      .post(config.API.orgSummaryEmp, {
+        id: data.orgTreeId, //*Id node
+        type: data.orgLevel, //*ประเภทnode
+        isNode: false, //*นับทั้ง node ไหม
+      })
+      .then(async (res: any) => {
+        const data = await res.data.result;
+        if (data) {
+          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,
+          });
+        }
+      });
+  }
+}
+
+const breakLoop = ref<boolean>(false);
+
+/**
+ * function แก้ไขโครสร้าง
+ * @param id ID โครงสร้าง
+ * @param type ละดับโครงสร้าง
+ * @param data ข้อมูลโครงสร้าง
+ * @param orgRootCode
+ */
+async function edit(id: string, type: string, data: any, orgRootCode: string) {
+  breakLoop.value = false;
+  const targetNodeId = id;
+
+  for (let index = 0; index < nodes.value.length; index++) {
+    const element = nodes.value[index];
+
+    searchAndReplace(element, targetNodeId, data, type, orgRootCode);
+
+    if (breakLoop.value) break;
+  }
+}
+
+/**
+ * function แก้ไขโครสร้าง
+ * @param treeNode
+ * @param organizationId ID โครงสร้าง
+ * @param data ข้อมูลโครงสร้าง
+ * @param type ละดับโครงสร้าง
+ * @param orgRootCode
+ */
+function searchAndReplace(
+  treeNode: any,
+  organizationId: string,
+  data: any,
+  type: string,
+  orgRootCode: string
+) {
+  if (treeNode.orgTreeId === organizationId) {
+    let newData = {
+      ...treeNode,
+      orgTreeName: data[`org${type}Name`],
+      orgTreeShortName: data[`org${type}ShortName`],
+      orgCode:
+        data.orgRootRank == "DEPARTMENT"
+          ? data[`org${type}Code`] + "00"
+          : orgRootCode + data[`org${type}Code`],
+      orgTreeCode: data[`org${type}Code`],
+      orgTreePhoneEx: data[`org${type}PhoneEx`],
+      orgTreePhoneIn: data[`org${type}PhoneIn`],
+      orgTreeFax: data[`org${type}Fax`],
+      orgTreeRank: data[`org${type}Rank`],
+    };
+
+    Object.assign(treeNode, newData);
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      searchAndReplace(child, organizationId, data, type, orgRootCode);
+    }
+  }
+}
+
+/**
+ * function ลบข้อมูลโครงสร้าง
+ * @param rootId RootID
+ * @param treeId TreeID
+ */
+async function deleteUpdate(rootId: string, treeId: string) {
+  breakLoop.value = false;
+  if (rootId) {
+    for (let index = 0; index < nodes.value.length; index++) {
+      const element = nodes.value[index];
+      deleteNode(element, rootId, treeId);
+
+      if (breakLoop.value) break;
+    }
+  } else {
+    nodes.value = nodes.value.filter((x: any) => x.orgTreeId != treeId);
+  }
+}
+
+/**
+ * function ลบข้อมูลโครงสร้าง
+ * @param treeNode ข้อมูล Tree
+ * @param rootId RootID
+ * @param treeId TreeID
+ */
+function deleteNode(treeNode: any, rootId: string, treeId: string): boolean {
+  if (treeNode.orgTreeId === rootId) {
+    const childrenNew = treeNode.children.filter(
+      (x: any) => x.orgTreeId != treeId
+    );
+    let newData = {
+      ...treeNode,
+      children: childrenNew,
+    };
+    Object.assign(treeNode, newData);
+
+    breakLoop.value = true;
+  } else if (treeNode.children) {
+    for (const child of treeNode.children) {
+      deleteNode(child, rootId, treeId);
+    }
+  }
+
+  return false;
+}
+
+const modalHistory = ref<boolean>(false);
+const modalSortAgency = ref<boolean>(false);
+const dialogAgency = ref<boolean>(false);
+const actionType = ref<string>("");
+const dataNode = ref<any>();
+const treeId = ref<string>("");
+
+/**
+ * funcion openPopup เพิ่มหน่วยงาน
+ * @param level ระดับโครงสร้าง
+ * @param node ข้อมูล โครงสร้าง
+ */
+function onClickAgency(level: number, node: OrgTree | {}) {
+  dialogAgency.value = !dialogAgency.value;
+  orgLevel.value = level;
+  dataNode.value = node;
+  actionType.value = "ADD";
+}
+
+const dialogDetail = ref<boolean>(false);
+/**
+ * funtion ดูรายละเอียดโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
+function onClickDetail(id: string, level: number) {
+  showLoader();
+  treeId.value = id;
+  dialogDetail.value = !dialogDetail.value;
+  orgLevel.value = level;
+}
+
+/**
+ * function openPopup แก้ไขข้อมูลโครงสร้าง
+ * @param node ข้อมูล โครงสร้าง
+ */
+async function onClickEdit(node: OrgTree) {
+  console.log(node);
+
+  dialogAgency.value = !dialogAgency.value;
+  actionType.value = "EDIT";
+  orgLevel.value = node.orgLevel;
+  dataNode.value = node;
+}
+
+/**
+ * function ยื่นยันการลบโครงสร้าง
+ * @param type  ระดับโครงสร้าง
+ * @param id  ID โครงสร้าง
+ * @param rootId RootID
+ */
+async function onClickDel(type: number, id: string, rootId: string) {
+  const level = store.checkLevel(type);
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgLevelByid(level.toLocaleLowerCase(), id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        deleteUpdate(rootId, id);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function การจัดลำดับโครงสร้าง
+ * @param id ID โครงสร้าง
+ * @param level ระดับโครงสร้าง
+ */
+async function onClickSort(id: string, level: number) {
+  type.value = level;
+  modalSortAgency.value = true;
+  if (id) {
+    breakLoop.value = false;
+    const orgId = id;
+    for (let index = 0; index < nodes.value.length; index++) {
+      const data = nodes.value[index];
+      searchAndReplace(data, orgId);
+      if (breakLoop.value) break;
+    }
+  } else {
+    const dataList = nodes.value;
+    const dataMap = dataList.map((item: any) => ({
+      orgTreeId: item.orgTreeId,
+      orgLevel: item.orgLevel,
+      orgTreeName: item.orgTreeName,
+      orgTreeShortName: item.orgTreeShortName,
+      orgRevisionId: item.orgRevisionId,
+    }));
+
+    dataSort.value = dataMap;
+  }
+
+  function searchAndReplace(data: any, id: string) {
+    if (data.orgTreeId === id) {
+      dataSort.value = data.children;
+      breakLoop.value = true;
+    } else if (data.children) {
+      for (const child of data.children) {
+        searchAndReplace(child, id);
+      }
+    }
+  }
+}
+
+/**
+ *  function ดูประวัดโครงสร้าง
+ * @param level ระดับโครงสร้าง
+ * @param id ID โครงสร้าง
+ */
+function onClickHistory(level: number, id: string) {
+  type.value = level;
+  orgId.value = id;
+  modalHistory.value = true;
+}
+
+watch(
+  () => nodeTEST.value,
+  () => {
+    nodes.value = nodeTEST.value;
+  }
+);
+</script>
+
+<template>
+  <div class="col-12 q-py-sm q-px-sm">
+    <div class="q-gutter-sm">
+      <div class="row q-col-gutter-sm q-pl-sm">
+        <div class="col-2" v-if="store.typeOrganizational === 'draft'">
+          <q-btn
+            dense
+            flat
+            round
+            color="primary"
+            icon="add"
+            @click="onClickAgency(0, {})"
+          >
+            <q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
+          </q-btn>
+        </div>
+
+        <div
+          :class="store.typeOrganizational === 'draft' ? 'col-10' : 'col-12'"
+        >
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <div class="bg-white tree-container q-pa-xs">
+        <q-tree
+          class="q-pa-sm q-gutter-sm"
+          dense
+          default-expand-all
+          :nodes="lazy"
+          node-key="orgTreeId"
+          label-key="labelName"
+          :filter="filter"
+          :no-results-label="notFound"
+          :no-nodes-label="noData"
+          v-model:expanded="expanded"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              :active="nodeId == prop.node.orgTreeId"
+              @click.stop="updateSelected(prop.node)"
+              active-class="my-list-link text-primary text-weight-medium"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light text-grey-8">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+
+              <q-btn
+                v-if="store.typeOrganizational === 'draft'"
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-ml-xs"
+                color="grey-13"
+                size="12px"
+                round
+              >
+                <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="
+                        item.type === 'EDIT'
+                          ? onClickEdit(prop.node)
+                          : item.type === 'ADD'
+                          ? onClickAgency(prop.node.orgLevel + 1, prop.node)
+                          : item.type === 'DETAIL'
+                          ? onClickDetail(
+                              prop.node.orgTreeId,
+                              prop.node.orgLevel
+                            )
+                          : item.type === 'DEL'
+                          ? onClickDel(
+                              prop.node.orgLevel,
+                              prop.node.orgTreeId,
+                              prop.node.orgRootId
+                            )
+                          : item.type === 'SORT'
+                          ? onClickSort(prop.node.orgRootId, prop.node.orgLevel)
+                          : item.type === 'HISTORY'
+                          ? onClickHistory(
+                              prop.node.orgLevel,
+                              prop.node.orgTreeId
+                            )
+                          : null
+                      "
+                    >
+                      <q-item-section avatar style="min-width: 20px">
+                        <q-icon
+                          size="17px"
+                          :color="item.color"
+                          :name="item.icon"
+                        />
+                      </q-item-section>
+                      <div v-if="prop.node.orgLevel === 0">
+                        <q-item-section
+                          v-if="
+                            item.type === 'EDIT' ||
+                            item.type === 'DEL' ||
+                            item.type === 'HISTORY' ||
+                            item.type === 'SORT'
+                          "
+                        >
+                          {{ item.label }}หน่วยงาน
+                        </q-item-section>
+                        <q-item-section v-else-if="item.type === 'ADD'">
+                          {{ item.label }}ส่วนราชการ
+                        </q-item-section>
+                        <q-item-section v-else>
+                          {{ item.label }}
+                        </q-item-section>
+                      </div>
+
+                      <div v-else>
+                        <q-item-section
+                          v-if="
+                            item.type === 'ADD' ||
+                            item.type === 'EDIT' ||
+                            item.type === 'DEL' ||
+                            item.type === 'HISTORY' ||
+                            item.type === 'SORT'
+                          "
+                          >{{ item.label }}ส่วนราชการ</q-item-section
+                        >
+                        <q-item-section v-else>{{ item.label }}</q-item-section>
+                      </div>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+
+              <q-btn
+                v-else
+                flat
+                dense
+                icon="mdi-dots-vertical"
+                class="q-pa-none q-ml-xs"
+                color="grey-13"
+                size="12px"
+                round
+              >
+                <q-menu>
+                  <q-list
+                    dense
+                    v-for="(item, index) in listAdd.slice(5, 6)"
+                    :key="index"
+                    style="min-width: 100px"
+                  >
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="
+                        onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
+                      "
+                    >
+                      <q-item-section avatar style="min-width: 20px">
+                        <q-icon
+                          size="17px"
+                          :color="item.color"
+                          :name="item.icon"
+                        />
+                      </q-item-section>
+                      <q-item-section>{{ item.label }}</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
+    </div>
+  </div>
+
+  <!-- เพิ่มหน่วยงาน -->
+  <DialogAgency
+    :modal="dialogAgency"
+    :close="onClickAgency"
+    v-model:orgLevel="orgLevel"
+    :fetchDataTree="props.fetchDataTree"
+    :fetchDataTable="props.fetchDataTable"
+    v-model:actionType="actionType"
+    :dataNode="dataNode"
+    :edit="edit"
+  />
+
+  <!-- รายละเอียดโครงสร้าง -->
+  <DialogStructureDetail
+    v-model:structure-detail="dialogDetail"
+    v-model:treeId="treeId"
+    v-model:orgLevel="orgLevel"
+  />
+
+  <DialogSortAgency
+    v-model:sort-agency="modalSortAgency"
+    v-model:data="dataSort"
+    :fetchDataTree="props.fetchDataTree"
+    v-model:type="type"
+  />
+  <DialogHistory
+    v-model:history="modalHistory"
+    v-model:type="type"
+    v-model:org-id="orgId"
+  />
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/16_positionEmployee/components/TreeTable.vue

@@ -0,0 +1,853 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import genreport from "@/plugins/genreportxlsx";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ListMenu,
+  NewPagination,
+} from "@/modules/16_positionEmployee/interface/index/Main";
+import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
+import type {
+  PosMaster2,
+  OrgTree,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+import type { DataPosition } from "@/modules/16_positionEmployee/interface/index/organizational";
+
+/** importComponents*/
+import DialogFormPosotion from "@/modules/16_positionEmployee/components/DialogFormPosition.vue";
+import DialogPositionDetail from "@/modules/16_positionEmployee/components/DialogPositionDetail.vue";
+import DialogSort from "@/modules/16_positionEmployee/components/DialogSortPosition.vue";
+import DialogMovePos from "@/modules/16_positionEmployee/components/DialogMovePos.vue";
+import DialogHistoryPos from "@/modules/16_positionEmployee/components/DialogHistoryPos.vue";
+import DialogSelectPerson from "@/modules/16_positionEmployee/components/DialogSelectPerson.vue";
+import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuccession.vue";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
+
+/** prosp*/
+const nodeTree = defineModel<any>("nodeTree", { required: true });
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
+// const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  filterKeyword: { type: Function, require: true, default: () => {} },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  shortName: { type: String, required: true },
+  fetchDataTree: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  mainTree: {
+    type: Object,
+    require: true,
+  },
+});
+
+const modalSelectPerson = ref<boolean>(false);
+const rowId = ref<string>("");
+const actionType = ref<string>("");
+/** ListMenu Table*/
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+  {
+    label: "ย้ายตำแหน่ง",
+    icon: "mdi-cursor-move",
+    type: "MOVE",
+    color: "blue-10",
+  },
+  {
+    label: "สืบทอดตำแหน่ง",
+    icon: "mdi-account-multiple-outline",
+    type: "INHERIT",
+    color: "deep-orange",
+  },
+  {
+    label: "ประวัติตำแหน่ง",
+    icon: "history",
+    type: "HISTORY",
+    color: "deep-purple",
+  },
+]);
+const document = ref<any>([
+  {
+    name: "บัญชี 1",
+    val: "report1",
+  },
+  {
+    name: "บัญชี 2",
+    val: "report2",
+  },
+  {
+    name: "บัญชี 3",
+    val: "report3",
+  },
+]);
+
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: false,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: false,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: false,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: false,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const columnsExpand = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const dialogPosition = ref<boolean>(false);
+/**
+ * function  openPopup เพิ่มอัตรากำลัง
+ * @param type ประเภท
+ * @param id id
+ */
+function onClickPosition(type: string, id: string) {
+  rowId.value = id ? id : "";
+  actionType.value = type;
+  dialogPosition.value = !dialogPosition.value;
+}
+
+const dialogDetail = ref<boolean>(false);
+const dataDetailPos = ref<DataPosition[]>([]);
+/**
+ * function ดูรายละเอียดประวัติตำแหน่ง
+ * @param data ข้อมูล ประวัติตำแหน่ง
+ */
+function onClickViewDetail(data: DataPosition[]) {
+  dialogDetail.value = !dialogDetail.value;
+  dataDetailPos.value = data;
+}
+
+/**
+ * function ยืนยันการลบตำแหน่ง
+ * @param id id ตำแหน่ง
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgPosMasterByIdEmp(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+        getSummary();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+const modalSort = ref<boolean>(false);
+/** fdunction จัดลำดับตำแหน่ง */
+function onClickSort() {
+  modalSort.value = true;
+}
+
+const modalDialogMMove = ref<boolean>(false);
+const typeMove = ref<string>("");
+/**
+ * function openPopup  ย้ายตำแหน่ง
+ * @param id ID ตำแหน่ง
+ * @param type ประเภท [ALL,SINGER]
+ */
+function onClickMovePos(id: string, type: string) {
+  modalDialogMMove.value = !modalDialogMMove.value;
+  typeMove.value = type;
+  rowId.value = id;
+}
+
+const modalDialogHistoryPos = ref<boolean>(false);
+/**
+ * function ดูประวัติตำแหน่ง
+ * @param id ID ตำแหน่ง
+ */
+function onClickHistoryPos(id: string) {
+  modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
+  rowId.value = id;
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+/** function openPopup เลือกตนครอง*/
+function openSelectPerson(data: DataPosition[]) {
+  modalSelectPerson.value = true;
+  dataDetailPos.value = data;
+}
+
+/** ลบคนครอง */
+function removePerson(id: string) {
+  dialogRemove(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.orgDeleteProfileEmp(id))
+        .then(() => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          props.fetchDataTable?.(
+            reqMaster.value.id,
+            reqMaster.value.type,
+            false
+          );
+          getSummary();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการลบคนครอง",
+    "ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
+  );
+}
+
+const modalDialogSuccession = ref<boolean>(false);
+/** function openPopup สืบทอดตำแหน่ง*/
+function onClickInherit(id: string) {
+  modalDialogSuccession.value = !modalDialogSuccession.value;
+  rowId.value = id;
+}
+
+/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+function getSummary() {
+  showLoader();
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.value.id, //*Id node
+      type: reqMaster.value.type, //*ประเภทnode
+      isNode: reqMaster.value.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,
+      });
+    })
+    .catch((err) => {
+      // messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function DownloadReport*/
+async function onClickDownloadReport(val: string, name: string) {
+  showLoader();
+  await http
+    .get(config.API.orgReportEmp(val))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        genreport(data, name);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+</script>
+
+<template>
+  <!-- TOOLBAR -->
+  <div class="col-12">
+    <q-toolbar style="padding: 0">
+      <div>
+        <q-btn
+          flat
+          round
+          dense
+          color="primary"
+          icon="add"
+          @click="onClickPosition('ADD', '')"
+        >
+          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          flat
+          round
+          dense
+          color="blue"
+          icon="mdi-sort"
+          @click="onClickSort()"
+        >
+          <q-tooltip>จัดลำดับ</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          flat
+          round
+          dense
+          color="blue-10"
+          icon="mdi-cursor-move"
+          @click="onClickMovePos('', 'All')"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-btn
+        v-if="store.typeOrganizational === 'draft'"
+        flat
+        round
+        dense
+        color="deep-purple"
+        icon="save_alt"
+      >
+        <q-menu>
+          <q-list
+            dense
+            style="min-width: 100px"
+            v-for="(item, index) in document"
+            :key="index"
+          >
+            <q-item
+              clickable
+              v-close-popup
+              @click.stop="onClickDownloadReport(item.val, item.name)"
+            >
+              <q-item-section>{{ item.name }}</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+        <q-tooltip>ดาวน์โหลด</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="row q-gutter-md">
+        <div>
+          <q-checkbox
+            keep-color
+            v-model="reqMaster.isAll"
+            label="แสดงตำแหน่งทั้งหมด"
+            color="primary"
+          >
+            <q-tooltip
+              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+            >
+          </q-checkbox>
+        </div>
+        <div>
+          <q-input
+            outlined
+            dense
+            v-model="reqMaster.keyword"
+            label="ค้นหา"
+            @keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
+          >
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+    </q-toolbar>
+  </div>
+
+  <!-- TABLE -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="posMaster"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      @update:pagination="updatePagination"
+      class="tableTb"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width></q-th>
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width></q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td>
+            <q-btn
+              flat
+              size="14px"
+              color="primary"
+              round
+              dense
+              @click="props.expand = !props.expand"
+              :icon="props.expand ? 'mdi-menu-down' : 'mdi-menu-right'"
+            />
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{
+                (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                props.rowIndex +
+                1
+              }}
+            </div>
+            <div v-else-if="col.name === 'posMasterNo'">
+              {{ props.row.isSit ? col.value + " " + "(ทับที่)" : col.value }}
+            </div>
+            <div v-else-if="col.name === 'posLevelName'">
+              {{
+                props.row.posLevelName
+                  ? props.row.isSpecial == true
+                    ? `${props.row.posLevelName} (ฉ)`
+                    : props.row.posLevelName
+                  : "-"
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+              size="12px"
+            >
+              <q-menu>
+                <q-list dense style="min-width: 150px">
+                  <!-- เลือกคนครอง -->
+                  <q-item
+                    v-if="
+                      props.row.positionIsSelected == 'ว่าง' &&
+                      store.typeOrganizational === 'draft'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="openSelectPerson(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="secondary"
+                          size="17px"
+                          name="mdi-account"
+                        />
+                        <div class="q-pl-md">เลือกคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-else-if="
+                      props.row.positionIsSelected != 'ว่าง' &&
+                      store.typeOrganizational === 'draft'
+                    "
+                    clickable
+                    v-close-popup
+                    @click="removePerson(props.row.id)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="red"
+                          size="17px"
+                          name="mdi-account-remove"
+                        />
+                        <div class="q-pl-md">ลบคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-for="(item, index) in store.typeOrganizational === 'draft'
+                      ? listMenu
+                      : listMenu.filter((e) => e.type === 'HISTORY')"
+                    :key="index"
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'EDIT'
+                        ? onClickPosition('EDIT', props.row.id)
+                        : item.type === 'DEL'
+                        ? onClickDelete(props.row.id)
+                        : item.type === 'MOVE'
+                        ? onClickMovePos(props.row.id, 'SINGER')
+                        : item.type === 'HISTORY'
+                        ? onClickHistoryPos(props.row.id)
+                        : item.type === 'INHERIT'
+                        ? onClickInherit(props.row.id)
+                        : null
+                    "
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          :color="item.color"
+                          size="17px"
+                          :name="item.icon"
+                        />
+                        <div class="q-pl-md">{{ item.label }}</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.positionIsSelected != 'ว่าง'"
+                    clickable
+                    v-close-popup
+                    @click="onClickViewDetail(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon color="blue" size="17px" name="mdi-eye" />
+                        <div class="q-pl-md">ดูรายละเอียด</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+
+        <q-tr v-show="props.expand" :props="props">
+          <q-td colspan="100%" class="bg-grey-1">
+            <q-card flat bordered class="text-left q-ma-sm">
+              <d-table
+                flat
+                :columns="columnsExpand"
+                :rows="props.row.positions"
+                table-class="text-grey-9"
+                row-key="id"
+                dense
+                hide-bottom
+                bordered
+                separator="vertical"
+                class="custom-header-table-expand"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props" class="bg-grey-2">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="q-px-sm text-body2 text-black">{{
+                        col.label
+                      }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'" class="text-body2">
+                        {{ props.rowIndex + 1 }}
+                      </div>
+                      <div
+                        v-else-if="col.name === 'posExecutiveName'"
+                        class="text-body2"
+                      >
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+
+                      <div
+                        v-else-if="col.name === 'positionExecutiveField'"
+                        class="text-body2"
+                      >
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+
+                      <div
+                        v-else-if="col.name === 'positionArea'"
+                        class="text-body2"
+                      >
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+
+                      <div v-else class="text-body2">
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+              </d-table>
+            </q-card>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="reqMaster.page"
+          active-color="primary"
+          color="dark"
+          :max="totalPage"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+
+  <!-- รายละเอียดตำแหน่ง -->
+  <DialogPositionDetail
+    v-model:position-detail="dialogDetail"
+    :dataDetailPos="dataDetailPos"
+  />
+
+  <!-- อัตรากำลัง -->
+  <DialogFormPosotion
+    :modal="dialogPosition"
+    :shortName="shortName"
+    :close="onClickPosition"
+    :orgLevel="orgLevel"
+    :treeId="treeId"
+    :actionType="actionType"
+    :rowId="rowId"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTable="props.fetchDataTable"
+    :getSummary="getSummary"
+  />
+
+  <!-- จัดลำดับ -->
+  <DialogSort
+    v-model:sort-position="modalSort"
+    :fetchDataTable="props.fetchDataTable"
+  />
+
+  <!-- ย้ายตำแหน่ง -->
+  <DialogMovePos
+    v-model:modal="modalDialogMMove"
+    v-model:nodeTree="nodeTree"
+    v-model:columns="columns as QTableProps[]"
+    v-model:rows="posMaster"
+    v-model:totalPage="totalPage"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTree="props.fetchDataTree"
+    :type="typeMove"
+    :rowId="rowId"
+    :mainTree="props.mainTree ? props.mainTree : []"
+  />
+
+  <!-- ประวัติตำแหน่ง -->
+  <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
+
+  <!-- เลือกคนครอง -->
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :dataDetailPos="dataDetailPos"
+    :fetchDataTable="props.fetchDataTable"
+    :getSummary="getSummary"
+  />
+
+  <!-- สืบทอดตำแหน่ง -->
+  <DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table-expand {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: white;
+  }
+
+  .q-table thead tr {
+    background: white;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+    padding: 0px;
+  }
+}
+</style>

src/modules/16_positionEmployee/components/TreeView.vue

@@ -0,0 +1,358 @@
+<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";
+
+/** 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";
+
+/** use*/
+const store = usePositionEmp();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+/** props*/
+const historyId = defineModel<string>("historyId", { required: true }); // id ประวัติโครงสร้าง
+const count = defineModel<number>("count", { required: true });
+
+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(id: string) {
+  isLoadTree.value = false;
+  showLoader();
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data;
+      selected.value = "";
+      nodeId.value = "";
+      store.treeId = "";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async 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.typeOrganizational == "draft"
+        ? store.draftId
+        : store.typeOrganizational == "current"
+        ? store.activeId
+        : store.historyId;
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  await http
+    .post(config.API.orgPosMasterListEmp, reqMaster)
+    .then((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 = 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*/
+async function filterKeyword() {
+  reqMaster.page = 1;
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+}
+
+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(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,
+  () => {
+    fetchDataTree(historyId.value);
+  }
+);
+
+/** callblck function ทำการ fetch ข้อมูล Tree เมื่อมีการเปลี่ยนโครงสร้าง*/
+watch(
+  () => store.typeOrganizational,
+  () => {
+    const id =
+      store.typeOrganizational === "current" ? store.activeId : store.draftId;
+    id && store.typeOrganizational !== "old" && fetchDataTree(id);
+    nodeId.value = "";
+    store.treeId = "";
+  }
+);
+
+/** 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);
+    }
+  }
+);
+
+watch(
+  () => store.draftId,
+  () => {
+    store.draftId && fetchDataTree(store.draftId?.toString());
+  }
+);
+</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>

src/modules/16_positionEmployee/interface/index/Main.ts

@@ -0,0 +1,146 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+interface ListMenu {
+  label: string;
+  icon: string;
+  type: string;
+  color: string;
+}
+
+interface FormDataAgency {
+  orgName: string;
+  orgShortName: string;
+  orgCode: string;
+  orgPhoneEx: string;
+  orgPhoneIn: string;
+  orgFax: string;
+  orgLevel: string;
+  orgLevelSub: string;
+}
+
+interface FormDataPosition {
+  shortName: string;
+  prefixNo: string;
+  positionNo: string;
+  suffixNo: string;
+}
+
+interface FormDataNewStructure {
+  orgRevisionId: string;
+  orgRevisionName: string;
+  typeDraft: string;
+}
+
+interface FormAgencyRef {
+  orgName: object | null;
+  orgShortName: object | null;
+  orgCode: object | null;
+  // orgPhoneEx: object | null;
+  // orgPhoneIn: object | null;
+  // orgFax: object | null;
+  orgLevel: object | null;
+  [key: string]: any;
+}
+
+interface FormPositionRef {
+  prefixNo: object | null;
+  positionNo: object | null;
+  [key: string]: any;
+}
+
+interface FormDateTimeRef {
+  dateTime: object | null;
+  [key: string]: any;
+}
+
+interface FormNewStructureRef {
+  orgRevisionName: object | null;
+  orgRevisionId: object | null;
+  type: object | null;
+  [key: string]: any;
+}
+
+interface HistoryType {
+  orgRevisionId: string;
+  orgRevisionName: string;
+  orgRevisionIsCurrent: boolean;
+  orgRevisionIsDraft: boolean;
+  orgRevisionCreatedAt: Date | string;
+}
+interface HistoryPostType {
+  id: string;
+  name: string;
+  lastUpdatedAt: Date;
+  orgRevisionName: string;
+}
+
+interface FormPositionSelect {
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+}
+
+interface FormPositionSelectRef {
+  positionName: object | null;
+  positionField: object | null;
+  positionType: object | null;
+  positionLevel: object | null;
+  positionExecutive: object | null;
+  positionExecutiveField: object | null;
+  positionArea: object | null;
+  [key: string]: any;
+}
+
+interface RowDetailPositions {
+  id: string;
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  posTypeId: string;
+  posLevelId: string;
+  posExecutiveId: string;
+  isSpecial: boolean;
+}
+
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type {
+  Pagination,
+  DataOption,
+  FormDataAgency,
+  FormDataPosition,
+  FormAgencyRef,
+  FormPositionRef,
+  FormDateTimeRef,
+  FormDataNewStructure,
+  FormNewStructureRef,
+  HistoryType,
+  ListMenu,
+  FormPositionSelect,
+  RowDetailPositions,
+  HistoryPostType,
+  FormPositionSelectRef,
+  NewPagination,
+};

src/modules/16_positionEmployee/interface/index/organizational.ts

@@ -0,0 +1,107 @@
+interface DataPosition {
+  id: string;
+  orgRootId: string;
+  orgChild1Id: string | null;
+  orgChild2Id: string | null;
+  orgChild3Id: string | null;
+  orgChild4Id: string | null;
+  posMasterNoPrefix: string;
+  posMasterNo: string;
+  posMasterNoSuffix: string;
+  orgShortname: string;
+  positions: Position[];
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  positionIsSelected: string | boolean;
+}
+
+interface Position {
+  id: string;
+  positionName: string;
+  positionField: string;
+  posTypeId: string;
+  posTypeName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  positionIsSelected: boolean;
+}
+
+interface FormDetailPosition {
+  positionNo: string;
+  positionType: string;
+  positionPathSide: string;
+  positionLine: string;
+  positionSide: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveSide: string;
+  status: string;
+}
+
+interface DataTree {
+  orgTreeId: string;
+  orgRootId?: string;
+  orgLevel: number;
+  orgName: string;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number;
+  orgRootCode?: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+
+  children?: DataTree[];
+}
+
+interface SeaechResult {
+  id: string;
+  citizenId: string;
+  name: string;
+  posTypeName: string;
+  posLevelName: string;
+}
+interface FormPositionFilter {
+  positionNo: string;
+  positionType: string;
+  positionLevel: string;
+  personal: string;
+  position: string;
+  status: string;
+}
+
+export type {
+  DataPosition,
+  Position,
+  FormDetailPosition,
+  DataTree,
+  SeaechResult,
+  FormPositionFilter,
+};

src/modules/16_positionEmployee/interface/request/Main.ts

@@ -0,0 +1,14 @@
+interface DataSumCalendarObject {
+  id: number;
+  monthFull: String;
+  count: number;
+  color: String;
+}
+
+interface DataListsObject {
+  id: number;
+  count: number;
+  name: string;
+}
+
+export type { DataSumCalendarObject, DataListsObject };

src/modules/16_positionEmployee/interface/request/organizational.ts

@@ -0,0 +1,21 @@
+interface FilterMaster {
+  id: string; //*Id node
+  type: number; //*ประเภทnode
+  isAll: boolean; //*(true->ทั้งหมด, false->ในระดับตัวเอง)
+  page: number; //*หน้า
+  pageSize: number; //*จำนวนแถวต่อหน้า
+  keyword: string; //ข้อความที่ต้องการค้นหา
+  revisionId?: string
+}
+interface MovePos {
+  id: string;
+  type: number;
+  positionMaster: string[];
+}
+
+interface Inherit {
+  draftPositionId: string;
+  publishPositionId: string;
+}
+
+export type { FilterMaster, MovePos, Inherit };

src/modules/16_positionEmployee/interface/response/organizational.ts

@@ -0,0 +1,203 @@
+interface DataActive {
+  activeId: string;
+  activeName: string;
+  draftId: string;
+  draftName: string;
+  isPublic: boolean;
+  orgPublishDate: Date | null;
+}
+
+interface SumPosition {
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+}
+
+interface OrgTree {
+  orgTreeId: string;
+  orgRootId: string;
+  orgLevel: number;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  orgTreeCode: string;
+  orgCode: string;
+  orgTreeRank: string;
+  orgTreeOrder: number | null;
+  orgRootCode: string;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeFax: string;
+  orgRevisionId: string;
+  children: OrgTree[];
+}
+
+interface OrgRevision {
+  orgRevisionCreatedAt: string | null;
+  orgRevisionId: string;
+  orgRevisionIsCurrent: boolean;
+  orgRevisionIsDraft: boolean;
+  orgRevisionName: string;
+}
+
+interface OptionType {
+  id: string;
+  posTypeName: string;
+}
+
+interface OptionLevel {
+  id: string;
+  posLevelName: string;
+}
+
+interface OptionExecutive {
+  id: string;
+  posExecutiveName: string;
+}
+
+interface DataPosition {
+  id: string;
+  posExecutiveId: string;
+  posExecutiveName: string;
+  posLevelId: string;
+  posLevelName: string;
+  posTypeId: string;
+  posTypeName: string;
+  positionArea: string;
+  positionExecutiveField: string;
+  positionField: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+interface Position {
+  id: string; // id ตำแหน่ง
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+}
+
+interface PosMaster {
+  id: string; // id อัตรากำลัง posmaster
+  orgShortname: string; // อักษรย่อตำแหน่ง
+  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  fullNameCurrentHolder: string | null;
+  fullNameNextHolder: string | null;
+  positions: Position[]; // ตำแหน่ง
+  isSit: boolean;
+  profilePosition: string;
+  profilePostype: string;
+  profilePoslevel: string;
+}
+interface Position2 {
+  id: string; // id ตำแหน่ง
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+}
+
+interface PosMaster2 {
+  id: string; // id อัตรากำลัง posmaster
+  orgShortname: string; // อักษรย่อตำแหน่ง
+  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+  positionField: string; // สายงาน
+  posTypeId: string; // ประเภทตำแหน่ง
+  posTypeName: string; // ประเภทตำแหน่ง
+  posLevelId: string; // ระดับตำแหน่ง
+  posLevelName: string; // ระดับตำแหน่ง
+  posExecutiveId: string; // ตำแหน่งทางการบริหาร
+  posExecutiveName: string; // ตำแหน่งทางการบริหาร
+  positionExecutiveField: string; // ด้านทางการบริหาร
+  positionArea: string; // ด้าน/สาขา
+  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
+  positions: Position[]; // ตำแหน่ง
+}
+
+interface HistoryPos {
+  id: string; //id node
+  orgShotName: string; //ชื่อย่อส่วนราชการ
+  lastUpdatedAt: Date; //วันที่แก้ไข
+  posMasterNoPrefix: string; //Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number; //เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string; //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+}
+
+interface SelectPerson {
+  citizenId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+  prefix: string;
+}
+
+interface PosLevels {
+  id: string;
+  posLevelAuthority: null;
+  posLevelName: string;
+  posLevelRank: number;
+}
+interface TypePos {
+  id: string;
+  PosLevels: PosLevels[];
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+export type {
+  DataActive,
+  OrgTree,
+  OrgRevision,
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+  PosMaster,
+  PosMaster2,
+  Position,
+  Position2,
+  SumPosition,
+  HistoryPos,
+  SelectPerson,
+  TypePos,
+};

src/modules/16_positionEmployee/router.ts

@@ -0,0 +1,14 @@
+const mainPage = () => import("@/modules/16_positionEmployee/views/main.vue");
+
+export default [
+  {
+    path: "/position-employee",
+    name: "positionEmployee",
+    component: mainPage,
+    meta: {
+      Auth: true,
+      Key: [1],
+      Role: "positionEmployee",
+    },
+  },
+];

src/modules/16_positionEmployee/store/organizational.ts

@@ -0,0 +1,141 @@
+import { defineStore } from "pinia";
+import { reactive, ref } from "vue";
+
+/** importType*/
+import type {
+  DataActive,
+  SumPosition,
+  PosMaster,
+} from "@/modules/16_positionEmployee/interface/response/organizational";
+
+export const usePositionEmp = defineStore("positionEmpStore", () => {
+  const typeOrganizational = ref<string>("current");
+  const statusView = ref<string>("list");
+
+  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 sumPosition = reactive({
+    total: 0,
+    use: 0,
+    vacant: 0,
+    totalRoot: 0,
+    useRoot: 0,
+    vacantRoot: 0,
+  });
+
+  function getSumPosition(data: SumPosition) {
+    sumPosition.total = data.totalPosition;
+    sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
+
+    if (typeOrganizational.value == "draft") {
+      sumPosition.use = data.totalPositionNextUse;
+      sumPosition.useRoot = data.totalRootPositionNextUse
+        ? data.totalRootPositionNextUse
+        : 0;
+
+      sumPosition.vacant = data.totalPositionNextVacant;
+      sumPosition.vacantRoot = data.totalRootPositionNextVacant
+        ? data.totalRootPositionNextVacant
+        : 0;
+    } else {
+      sumPosition.use = data.totalPositionCurrentUse;
+      sumPosition.useRoot = data.totalRootPositionCurrentUse
+        ? data.totalRootPositionCurrentUse
+        : 0;
+
+      sumPosition.vacant = data.totalPositionCurrentVacant;
+      sumPosition.vacantRoot = data.totalRootPositionCurrentVacant
+        ? data.totalRootPositionCurrentVacant
+        : 0;
+    }
+  }
+
+  function fetchDataActive(data: DataActive) {
+    activeId.value = data.activeId;
+    draftId.value = data.draftId;
+    dataActive.value = data;
+    isPublic.value = data.isPublic;
+    orgPublishDate.value = data.orgPublishDate;
+  }
+
+  function fetchPosMaster(data: PosMaster[]) {
+    const newPosMaster = data.map((e: PosMaster) => ({
+      ...e,
+      positionIsSelected:
+        typeOrganizational.value === "draft" && e.fullNameNextHolder !== null
+          ? e.fullNameNextHolder
+          : typeOrganizational.value !== "draft" &&
+            e.fullNameCurrentHolder !== null
+          ? e.fullNameCurrentHolder
+          : "ว่าง",
+      posMasterNo:
+        e.orgShortname +
+        e.posMasterNoPrefix +
+        e.posMasterNo +
+        e.posMasterNoSuffix,
+      positionName: e.isSit ? e.profilePosition : e.positionName,
+      posTypeName: e.isSit ? e.profilePostype : e.posTypeName,
+      posLevelName: e.isSit ? e.profilePoslevel : e.posLevelName,
+      posExecutiveName: e.posExecutiveName,
+      isSit: e.isSit,
+    }));
+
+    return newPosMaster;
+  }
+
+  function checkLevel(type: number) {
+    switch (type) {
+      case 0:
+        return "Root";
+      case 1:
+        return "Child1";
+      case 2:
+        return "Child2";
+      case 3:
+        return "Child3";
+      default:
+        return "Child4";
+    }
+  }
+
+  function convertType(type: string) {
+    switch (type) {
+      case "DEPARTMENT":
+        return "ระดับสำนัก";
+      case "OFFICE":
+        return "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง";
+      case "DIVISION":
+        return "ระดับส่วน/กลุ่มภารกิจ";
+      case "SECTION":
+        return "ระดับฝ่าย/กลุ่มงาน";
+      default:
+        return "-";
+    }
+  }
+
+  return {
+    typeOrganizational,
+    statusView,
+
+    //
+    fetchDataActive,
+    checkLevel,
+    convertType,
+    draftId,
+    activeId,
+    historyId,
+    treeId,
+    level,
+    isPublic,
+    orgPublishDate,
+    fetchPosMaster,
+    sumPosition,
+    getSumPosition,
+  };
+});

src/modules/16_positionEmployee/views/main.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importComponents*/
+import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const store = usePositionEmp();
+
+/** สถานะ*/
+const isStatusData = ref<boolean>(false); // แสดงตั้งเวลาเผยแพร่
+
+/** ประวัติโครงสร้าง*/
+const historyId = ref<string>(""); // ID ประวัติโครงสร้าง
+const count = ref<number>(0);
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        store.fetchDataActive(data);
+        if (data.activeName === null && data.draftName === null) {
+          isStatusData.value = false;
+        } else {
+          isStatusData.value = true;
+          if (isStatusData.value) {
+            if (data.activeName === null) {
+              // ishasActive.value = true;
+              store.typeOrganizational = "draft";
+            } else if (data.draftName === null) {
+              // ishasDraft.value = true;
+              store.typeOrganizational = "current";
+            }
+          }
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** lifecycleHook */
+onMounted(async () => {
+  store.typeOrganizational = "current";
+  await fetchOrganizationActive();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      อัตรากำลังลูกจ้างประจำฯ
+    </div>
+  </div>
+
+  <q-card flat bordered>
+    <q-card class="my-card">
+      <q-card-section style="padding: 0px">
+        <TreeView v-model:historyId="historyId" v-model:count="count" />
+      </q-card-section>
+    </q-card>
+  </q-card>
+</template>
+
+<style scoped></style>

src/router/index.ts

@@ -8,6 +8,7 @@ import ModuleMetadata from "@/modules/01_metadata/router";
 import ModuleMetadataNew from "@/modules/01_metadataNew/router";
 import ModuleOrganizational from "@/modules/02_organizational/router";
 import ModuleOrganizationalNew from "@/modules/02_organizationalNew/router";
+import ModulePositionEmployee from "@/modules/16_positionEmployee/router";
 import ModuleRecruiting from "@/modules/03_recruiting/router";
 import ModuleRecruitingNew from "@/modules/04_registryNew/router";
 import ModuleRegistry from "@/modules/04_registry/router";
@@ -49,6 +50,7 @@ const router = createRouter({
         ...ModuleMetadataNew,
         ...ModuleOrganizational,
         ...ModuleOrganizationalNew,
+        ...ModulePositionEmployee,
         ...ModuleRecruiting,
         ...ModuleRecruitingNew,
         ...ModuleRegistry,