From 66eb2bebcaef9fd17764e01250cb93c55fdc058e Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Thu, 6 Jun 2024 13:23:23 +0700
Subject: [PATCH] set file build

---
 .github/workflows/release.yaml                |  86 +++
 entrypoint.sh                                 |   2 +-
 src/api/index.ts                              | 111 ++-
 .../components/DialogAddPosition.vue          | 235 ++++++
 .../components/DialogFormPosition.vue         | 727 ++++++++++++++++++
 .../components/DialogHistoryPos.vue           | 168 ++++
 .../components/DialogMovePos.vue              | 349 +++++++++
 .../components/DialogPositionDetail.vue       |  76 ++
 .../components/DialogSelectPerson.vue         | 693 +++++++++++++++++
 .../components/DialogSortPosition.vue         | 158 ++++
 .../components/DialogSuccession.vue           | 411 ++++++++++
 .../components/TreeMain.vue                   | 168 ++++
 .../components/TreeTable.vue                  | 705 +++++++++++++++++
 .../components/TreeView.vue                   | 318 ++++++++
 .../interface/index/Main.ts                   | 147 ++++
 .../interface/index/organizational.ts         | 107 +++
 .../interface/request/Main.ts                 |  14 +
 .../interface/request/organizational.ts       |  21 +
 .../interface/response/organizational.ts      | 203 +++++
 src/modules/16_positionEmployee/router.ts     |  14 +
 .../store/organizational.ts                   | 137 ++++
 .../16_positionEmployee/views/main.vue        |  60 ++
 22 files changed, 4849 insertions(+), 61 deletions(-)
 create mode 100644 .github/workflows/release.yaml
 create mode 100644 src/modules/16_positionEmployee/components/DialogAddPosition.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogFormPosition.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogHistoryPos.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogMovePos.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogPositionDetail.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogSelectPerson.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogSortPosition.vue
 create mode 100644 src/modules/16_positionEmployee/components/DialogSuccession.vue
 create mode 100644 src/modules/16_positionEmployee/components/TreeMain.vue
 create mode 100644 src/modules/16_positionEmployee/components/TreeTable.vue
 create mode 100644 src/modules/16_positionEmployee/components/TreeView.vue
 create mode 100644 src/modules/16_positionEmployee/interface/index/Main.ts
 create mode 100644 src/modules/16_positionEmployee/interface/index/organizational.ts
 create mode 100644 src/modules/16_positionEmployee/interface/request/Main.ts
 create mode 100644 src/modules/16_positionEmployee/interface/request/organizational.ts
 create mode 100644 src/modules/16_positionEmployee/interface/response/organizational.ts
 create mode 100644 src/modules/16_positionEmployee/router.ts
 create mode 100644 src/modules/16_positionEmployee/store/organizational.ts
 create mode 100644 src/modules/16_positionEmployee/views/main.vue

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
new file mode 100644
index 00000000..d91fae54
--- /dev/null
+++ b/.github/workflows/release.yaml
@@ -0,0 +1,86 @@
+name: release-test
+run-name: release-test ${{ github.actor }}
+on:
+    push:
+        tags:
+            - "version-[0-9]+.[0-9]+.[0-9]+"
+    workflow_dispatch:
+env:
+    REGISTRY: docker.frappet.com
+    IMAGE_NAME: ehr/bma-ehr-admin
+    DEPLOY_HOST: 49.0.91.80
+    COMPOSE_PATH: /home/frappet/docker/bma/bma-ehr-admin
+
+jobs:
+    # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=test-v6.1 -s DOCKER_USER=sorawit -s DOCKER_PASS=P@ssword -s SSH_PASSWORD=P@ssw0rd
+    release-test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            # skip Set up QEMU because it fail on act and container
+            # Gen Version try to get version from tag or inut
+            - name: Set output tags
+              id: vars
+              run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
+            - name: Gen Version
+              id: gen_ver
+              run: |
+                  if [[ $GITHUB_REF == 'refs/tags/'* ]]; then
+                    IMAGE_VER=${{ steps.vars.outputs.tag }}
+                  else
+                    IMAGE_VER=${{ github.event.inputs.IMAGE_VER }}
+                  fi
+                  if [[ $IMAGE_VER == '' ]]; then
+                    IMAGE_VER='test-vBeta'
+                  fi
+                  echo '::set-output name=image_ver::'$IMAGE_VER
+            - name: Test Version
+              run: |
+                  echo $GITHUB_REF
+                  echo ${{ steps.gen_ver.outputs.image_ver }}
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v2
+            - name: Login in to registry
+              uses: docker/login-action@v2
+              with:
+                  registry: ${{env.REGISTRY}}
+                  username: ${{secrets.DOCKER_USER}}
+                  password: ${{secrets.DOCKER_PASS}}
+            - name: Build and load local docker image
+              uses: docker/build-push-action@v3
+              with:
+                  context: .
+                  platforms: linux/amd64
+                  push: true
+                  tags: ${{env.REGISTRY}}/${{env.IMAGE_NAME}}:${{ steps.gen_ver.outputs.image_ver }},${{env.REGISTRY}}/${{env.IMAGE_NAME}}:latest
+
+            - name: Reload docker compose
+              uses: appleboy/ssh-action@v0.1.8
+              with:
+                  host: ${{env.DEPLOY_HOST}}
+                  username: frappet
+                  password: ${{ secrets.SSH_PASSWORD }}
+                  port: 10102
+                  script: |
+                      cd "${{env.COMPOSE_PATH}}"
+                      docker compose pull
+                      docker compose up -d
+                      echo "${{ steps.gen_ver.outputs.image_ver }}"> success
+            - uses: snow-actions/line-notify@v1.1.0
+              if: success()
+              with:
+                  access_token: ${{ secrets.TOKEN_LINE }}
+                  message: |
+                      -Success✅✅✅
+                      Image: ${{env.IMAGE_NAME}}
+                      Version: ${{ steps.gen_ver.outputs.IMAGE_VER }}
+                      By: ${{secrets.DOCKER_USER}}
+            - uses: snow-actions/line-notify@v1.1.0
+              if: failure()
+              with:
+                  access_token: ${{ secrets.TOKEN_LINE }}
+                  message: |
+                      -Failure❌❌❌
+                      Image: ${{env.IMAGE_NAME}}
+                      Version: ${{ steps.gen_ver.outputs.IMAGE_VER }}
+                      By: ${{secrets.DOCKER_USER}}
diff --git a/entrypoint.sh b/entrypoint.sh
index 2a468c6b..57b20dee 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -4,7 +4,7 @@ ROOT_DIR=/app
 
 # Replace env vars in JavaScript files
 echo "Replacing env constants in JS"
-for file in $ROOT_DIR/assets/app.*.js* $ROOT_DIR/js/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js $ROOT_DIR/assets/index*.js* $ROOT_DIR/assets/*.js*;
+for file in $ROOT_DIR/assets/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/assets/index*.js* $ROOT_DIR/assets/*.js*;
 do
   echo "Processing $file ...";
 
diff --git a/src/api/index.ts b/src/api/index.ts
index c0280387..478cc27a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,70 +1,61 @@
 /**config api */
-import { ref } from "vue";
+import { ref } from "vue"
 
-const env = ref<string>(process.env.NODE_ENV || "development");
-export const apiUrlConfigPublish = import.meta.env.VITE_API_PUBLISH_URL;
-export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
+const env = ref<string>(process.env.NODE_ENV || "development")
+// export const apiUrlConfigPublish = import.meta.env.VITE_API_PUBLISH_URL;
+// export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
 // if (process.env.VUE_APP_TEST) {
 //   env = "test";
 // }
 
 const config = ref<any>({
-  development: {
-    API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
-    API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
-    API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
-    API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    MEET_URI: "meet.frappet.com",
-    API_REPORT2_URI: "https://bma-ehr.frappet.synology.me/api/v2",
-    API_REPORT_TEMPLATE_URI:
-      "https://report-server.frappet.synology.me/api/v1/report-template",
-  },
-  test: {
-    API_URI: "http://localhost:5010/api/v1",
-    API_CANDIDATE_URI: "https://localhost:7007/api/v1",
-    API_REPORT_URI: "https://localhost:7007/api/v1",
-    MEET_URI: "meet.frappet.com",
-  },
-  production: {
-    // API_URI: "https://localhost:5010",
-    API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
-    API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
-    API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
-    API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
-    API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
-    MEET_URI: "meet.frappet.com",
-    API_REPORT2_URI: `${window.location.protocol}//${window.location.host}/api/v2`,
-    API_REPORT_TEMPLATE_URI: apiUrlConfigReport,
-  },
-});
+	development: {
+		API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+		API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
+		API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
+		API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
+		API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+		MEET_URI: "meet.frappet.com",
+		API_REPORT2_URI: "https://bma-ehr.frappet.synology.me/api/v2",
+		API_REPORT_TEMPLATE_URI: "https://report-server.frappet.synology.me/api/v1/report-template",
+	},
+	test: {
+		API_URI: "http://localhost:5010/api/v1",
+		API_CANDIDATE_URI: "https://localhost:7007/api/v1",
+		API_REPORT_URI: "https://localhost:7007/api/v1",
+		MEET_URI: "meet.frappet.com",
+	},
+	production: {
+		// API_URI: "https://localhost:5010",
+		API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
+		API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
+		API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
+		API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
+		API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
+		MEET_URI: "meet.frappet.com",
+		API_REPORT2_URI: `${window.location.protocol}//${window.location.host}/api/v2`,
+		// API_REPORT_TEMPLATE_URI: apiUrlConfigReport,
+	},
+})
 
-const API_URI = ref<string>(config.value[env.value].API_URI);
-const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
-const API_URI_ORG_SERVICE = ref<string>(
-  config.value[env.value].API_URI_ORG_SERVICE
-);
-const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(
-  config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE
-);
-const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
-const API_URI_PROFILE_SERVICE = ref<string>(
-  config.value[env.value].API_URI_PROFILE_SERVICE
-);
-const API_REPORT2_URI = ref<string>(config.value[env.value].API_REPORT2_URI);
-const API_REPORT_TEMPLATE_URI = ref<string>(
-  config.value[env.value].API_REPORT_TEMPLATE_URI
-);
+const API_URI = ref<string>(config.value[env.value].API_URI)
+const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI)
+const API_URI_ORG_SERVICE = ref<string>(config.value[env.value].API_URI_ORG_SERVICE)
+const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE)
+const MEET_URI = ref<string>(config.value[env.value].MEET_URI)
+const API_URI_PROFILE_SERVICE = ref<string>(config.value[env.value].API_URI_PROFILE_SERVICE)
+const API_REPORT2_URI = ref<string>(config.value[env.value].API_REPORT2_URI)
+const API_REPORT_TEMPLATE_URI = ref<string>(config.value[env.value].API_REPORT_TEMPLATE_URI)
 
 export default {
-  env: env.value,
-  config: config.value,
-  API_URI: API_URI.value,
-  API_REPORT_URI: API_REPORT_URI.value,
-  API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
-  API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
-  API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
-  MEET_URI: MEET_URI.value,
-  API_REPORT2_URI: API_REPORT2_URI.value,
-  API_REPORT_TEMPLATE_URI: API_REPORT_TEMPLATE_URI.value,
-};
+	env: env.value,
+	config: config.value,
+	API_URI: API_URI.value,
+	API_REPORT_URI: API_REPORT_URI.value,
+	API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
+	API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
+	API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
+	MEET_URI: MEET_URI.value,
+	API_REPORT2_URI: API_REPORT2_URI.value,
+	API_REPORT_TEMPLATE_URI: API_REPORT_TEMPLATE_URI.value,
+}
diff --git a/src/modules/16_positionEmployee/components/DialogAddPosition.vue b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
new file mode 100644
index 00000000..7bee3f75
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogAddPosition.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { ref, reactive, watch, defineProps } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { ObjectPosRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
+
+import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+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 $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+
+const isDisValidate = ref<boolean>(false);
+const formDataPos = reactive({
+  posName: "",
+  posTypeName: "",
+  posLevelName: "",
+});
+
+const posNameRef = ref<object | null>(null);
+const posTypeNameRef = ref<object | null>(null);
+const posLevelNameRef = ref<object | null>(null);
+const objectRef: ObjectPosRef = {
+  posName: posNameRef,
+  posTypeName: posTypeNameRef,
+  posLevelName: posLevelNameRef,
+};
+const posTypeMain = ref<ResGroup[]>([]);
+const posTypeOp = ref<DataOption[]>([]);
+const posLevelOp = ref<DataOption[]>([]);
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  isDisValidate.value = false;
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      submit();
+    });
+  }
+}
+async function submit() {
+  const body = {
+    posDictName: formDataPos.posName,
+    posTypeId: formDataPos.posTypeName,
+    posLevelId: formDataPos.posLevelName,
+  };
+  showLoader();
+  try {
+    const url = !isEditCheck.value
+      ? config.API.orgEmployeePos
+      : config.API.orgEmployeePosById(props?.data?.id);
+    await http[!isEditCheck.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    props.emitSearch?.(formDataPos.posName, "positionName");
+    close();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+async function clearFormPositionSelect() {
+  isEditCheck.value = false;
+  isDisValidate.value = true;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
+  isSpecial.value = false;
+  setTimeout(() => {
+    isDisValidate.value = false;
+  }, 1000);
+}
+
+function close() {
+  modal.value = false;
+  clearFormPositionSelect();
+}
+
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      posTypeMain.value = res.data.result;
+      posTypeOp.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formDataPos.posLevelName = "";
+}
+
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      await fetchType();
+
+      if (props.data) {
+        const dataList = props.data;
+        updatePosTypeName(dataList.posTypeId);
+
+        formDataPos.posName = dataList.posDictName;
+        formDataPos.posTypeName = dataList.posTypeId;
+        formDataPos.posLevelName = dataList.posLevelId;
+      }
+    }
+  }
+);
+</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-md">
+            <div class="col-12">
+              <q-input
+                ref="posNameRef"
+                v-model="formDataPos.posName"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+              />
+            </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>
diff --git a/src/modules/16_positionEmployee/components/DialogFormPosition.vue b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
new file mode 100644
index 00000000..29b766e0
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@@ -0,0 +1,727 @@
+<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 { QTableProps } from "quasar";
+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 DialogHeader from "@/components/DialogHeader.vue";
+import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+  orgLevel: Number,
+  treeId: String,
+  actionType: String,
+  rowId: { type: String, default: "" },
+  fetchDataTable: Function,
+  getSummary: Function,
+  shortName: { type: String, required: true },
+});
+
+const isEdit = ref<boolean>(false);
+const modalAdd = ref<boolean>(false);
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+const isPosition = ref<boolean>(false);
+
+const dataCopy = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+  dialogMessageNotify,
+} = mixin;
+
+const search = ref<string>("");
+const type = ref<string>("positionName");
+const optionFilter = ref<DataOption[]>([
+  { id: "positionName", name: "ชื่อตำแหน่ง" },
+  { id: "positionType", name: "กลุ่มงาน" },
+  { id: "positionLevel", name: "ระดับชั้นงาน" },
+]);
+
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "blue-6",
+  },
+  {
+    label: "แก้ไข",
+    icon: "mdi-pencil",
+    type: "edit",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
+
+const rows = ref<RowDetailPositions[]>([]);
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+
+const prefixNoRef = ref<Object | null>(null);
+const positionNoRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataPosition>({
+  shortName: props.shortName,
+  prefixNo: "",
+  positionNo: "",
+  suffixNo: "",
+  reason: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectPositionRef: FormPositionRef = {
+  prefixNo: prefixNoRef,
+  positionNo: positionNoRef,
+};
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posDictName",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    sortable: true,
+    field: "posDictName",
+    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",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "posDictName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+async function fetchPosition(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgPosPositionEmpById(id))
+    .then((res) => {
+      const data = res.data.result;
+
+      formData.prefixNo = data.posMasterNoPrefix;
+      formData.positionNo = data.posMasterNo;
+      formData.suffixNo = data.posMasterNoSuffix;
+      formData.reason = data.reason;
+      rows.value = data.positions.map((e: any) => ({
+        ...e,
+        posDictName: e.positionName,
+      }));
+    })
+    .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 onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    const positionsData = rows.value.map((e: any) => ({
+      posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+      posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+      posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+    }));
+    const body = {
+      posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+      posMasterNo: Number(formData.positionNo), //*เลขที่ตำแหน่ง เป็นตัวเลข
+      posMasterNoSuffix: formData.suffixNo, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+      reason: formData.reason, //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+      orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+      orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+      orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+      orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+      orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
+      positions: positionsData,
+      // succession: succession.value,
+    };
+    try {
+      const url =
+        props.actionType === "ADD"
+          ? config.API.orgPosMasterEmp
+          : config.API.orgPosMasterByIdEmp(props.rowId);
+      await http[props.actionType === "ADD" ? "post" : "put"](url, body);
+      success($q, "บันทีกข้อมูลสำเร็จ");
+      props.getSummary?.();
+      props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+      close();
+    } 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.orgEmployeePos +
+          `?keyword=${search.value}&type=${type.value}`
+      )
+      .then((res) => {
+        rowsPositionSelect.value = res.data.result;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  modalAdd.value = true;
+  dataCopy.value = data;
+}
+/**
+ * แก้ไขข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function editDetiail(data: RowDetailPositions) {
+  isEdit.value = true;
+  modalAdd.value = true;
+  dataCopy.value = data;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+function addPosition(data: RowDetailPositions) {
+  rows.value = [];
+  rows.value.push(data);
+}
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgEmployeePosById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        searchInput();
+        hideLoader();
+      });
+  });
+}
+
+function clearFormPositionSelect() {
+  isDisValidate.value = true;
+  search.value = "";
+  type.value = "positionName";
+
+  setTimeout(() => {
+    isDisValidate.value = false;
+  }, 1000);
+}
+
+function close() {
+  props.close?.();
+  isPosition.value = false;
+  clearFormPositionSelect();
+}
+
+async function emitSearch(keyword: string, typeSelect: string) {
+  search.value = keyword;
+  type.value = typeSelect;
+  await searchInput();
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      if (props.actionType === "ADD") {
+        rowsPositionSelect.value = [];
+        search.value = "";
+        rows.value = [];
+        clearFormPositionSelect();
+        formData.prefixNo = "";
+        formData.positionNo = "";
+        formData.suffixNo = "";
+      } else {
+        props.rowId && fetchPosition(props.rowId);
+      }
+    }
+  }
+);
+</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="row col-8 q-col-gutter-sm">
+                    <div class="col-12">
+                      <q-input
+                        v-model="formData.shortName"
+                        dense
+                        outlined
+                        readonly
+                        for="#shortName"
+                        label="อักษรย่อ"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.prefixNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="prefixNoRef"
+                        dense
+                        outlined
+                        for="#prefixNo"
+                        label="Prefix เลขที่ตำเเหน่ง"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <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-4">
+                      <q-input
+                        v-model="formData.suffixNo"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#suffixNo"
+                        label="Suffix เลขที่ตำแหน่ง"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-4">
+                    <q-input
+                      v-model="formData.reason"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#reason"
+                      label="หมายเหตุ"
+                      type="textarea"
+                      rows="4"
+                    />
+                  </div>
+
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rows"
+                      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"
+                          >
+                            <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-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>
diff --git a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
new file mode 100644
index 00000000..1e047116
--- /dev/null
+++ b/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>
diff --git a/src/modules/16_positionEmployee/components/DialogMovePos.vue b/src/modules/16_positionEmployee/components/DialogMovePos.vue
new file mode 100644
index 00000000..dff18423
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@@ -0,0 +1,349 @@
+<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) {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
+  } else if (selectedFilter.value.length === 0) {
+    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.orgPosMoveEmp, body)
+          .then(() => {
+            props.fetchDataTree?.(store.activeId);
+            modal.value = false;
+            success($q, "ย้ายตำแหน่งสำเร็จ");
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการย้ายตำแหน่ง",
+      "ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
+
+watch(
+  () => modal.value,
+  () => {
+    reqMaster.value.page = 1;
+    filterTree.value = "";
+    pagination.value.rowsPerPage = reqMaster.value.pageSize;
+
+    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-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 90vh"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <HeaderDialog :tittle="title" :close="() => (modal = false)" />
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
+
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <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"
+                :rows-per-page-options="[10, 25, 50, 100]"
+                v-model:pagination="pagination"
+                @update:pagination="updatePagination"
+              >
+                <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"
+                    :max-pages="5"
+                    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: 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
+                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-page>
+      </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            unelevated
+            label="ย้ายตำแหน่ง"
+            color="public"
+            @click="onClickMovePos"
+            class="q-px-md"
+            :disable="isDisable"
+          >
+            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
+    </q-layout>
+  </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>
diff --git a/src/modules/16_positionEmployee/components/DialogPositionDetail.vue b/src/modules/16_positionEmployee/components/DialogPositionDetail.vue
new file mode 100644
index 00000000..1c2b1a59
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogPositionDetail.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**use*/
+const $q = useQuasar();
+
+/**Props*/
+const modal = defineModel<boolean>("positionDetail", { required: true });
+const prosp = defineProps({
+  dataDetailPos: { type: Object, require: true },
+});
+
+/** function ปิด popup*/
+function close() {
+  modal.value = false;
+}
+</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>{{ prosp?.dataDetailPos?.posMasterNo }}</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>{{ prosp?.dataDetailPos?.posTypeName }}</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>{{ prosp?.dataDetailPos?.positionName }}</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>{{ prosp?.dataDetailPos?.posLevelName }}</p>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
new file mode 100644
index 00000000..59095264
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -0,0 +1,693 @@
+<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: "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",
+  },
+]);
+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: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    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",
+  },
+]);
+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.orgEmployeeType)
+    .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.orgProfileEmp, 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.orgSearchProfileEmp, 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"
+                          :max-pages="5"
+                          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>
diff --git a/src/modules/16_positionEmployee/components/DialogSortPosition.vue b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
new file mode 100644
index 00000000..6f796c65
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
@@ -0,0 +1,158 @@
+<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.orgPosSortEmp, {
+        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.orgPosMasterListEmp, {
+      id: store.treeId,
+      type: store.level,
+      isAll: false,
+      page: 1,
+      pageSize: 100,
+      keyword: "",
+      revisionId: store.activeId,
+    })
+    .then((res) => {
+      const dataList = res.data.result.data;
+      const dataMap = dataList.map((item: any) => ({
+        id: item.id,
+        name: `${item.orgShortname}${
+          item.posMasterNoPrefix ? item.posMasterNoPrefix : ""
+        }${item.posMasterNo ? item.posMasterNo : ""}${
+          item.posMasterNoSuffix ? item.posMasterNoSuffix : ""
+        } ${item.fullNameNextHolder ? item.fullNameNextHolder : ""}`,
+        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>
diff --git a/src/modules/16_positionEmployee/components/DialogSuccession.vue b/src/modules/16_positionEmployee/components/DialogSuccession.vue
new file mode 100644
index 00000000..3334c340
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@@ -0,0 +1,411 @@
+<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) => {
+      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 !== null ? e.orgShortname : "") +
+          (e.posMasterNoPrefix ? e.posMasterNoPrefix : "") +
+          (e.posMasterNo !== null ? e.posMasterNo : "") +
+          (e.posMasterNoSuffix !== null ? e.posMasterNoPrefix : ""),
+      }));
+      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 () => {
+        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>
diff --git a/src/modules/16_positionEmployee/components/TreeMain.vue b/src/modules/16_positionEmployee/components/TreeMain.vue
new file mode 100644
index 00000000..b72ff449
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/TreeMain.vue
@@ -0,0 +1,168 @@
+<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 { 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 {} = 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,
+  },
+});
+
+const filter = ref<string>("");
+const nodes = ref<Array<OrgTree>>([]);
+const lazy = ref(nodes);
+const expanded = ref<Array<any>>([]);
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่มีข้อมูล");
+
+/**
+ * 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,
+          });
+        }
+      });
+  }
+}
+
+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-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-item>
+          </template>
+        </q-tree>
+      </div>
+    </div>
+  </div>
+</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>
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
new file mode 100644
index 00000000..e022d9b4
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -0,0 +1,705 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import genreport from "@/plugins/genreportxlsx";
+
+/** 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 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);
+    });
+}
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
+
+watch(
+  () => modalDialogMMove.value,
+  () => {
+    if (!modalDialogMMove.value) {
+      pagination.value.page = 1;
+      pagination.value.rowsPerPage = reqMaster.value.pageSize;
+    }
+  }
+);
+</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"
+      v-model:pagination="pagination"
+    >
+      <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-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'">
+              {{
+                (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 == 'ว่าง'"
+                    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 != 'ว่าง'"
+                    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 listMenu"
+                    :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>
+      </template>
+      <template v-slot:pagination="scope">
+        <q-pagination
+          v-model="reqMaster.page"
+          active-color="primary"
+          color="dark"
+          :max="totalPage"
+          :max-pages="5"
+          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>
diff --git a/src/modules/16_positionEmployee/components/TreeView.vue b/src/modules/16_positionEmployee/components/TreeView.vue
new file mode 100644
index 00000000..659a8ab4
--- /dev/null
+++ b/src/modules/16_positionEmployee/components/TreeView.vue
@@ -0,0 +1,318 @@
+<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();
+
+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.activeId;
+  }
+
+  if (action === true) {
+    isLoad.value = true;
+  }
+  await http
+    .post(config.API.orgPosMasterListEmp, reqMaster)
+    .then(async (res) => {
+      posMaster.value = [];
+      const dataMain: PosMaster[] = [];
+      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      res.data.result.data.forEach((e: PosMaster) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const test = { ...e, ...rest };
+          dataMain.push(test);
+        }
+      });
+      posMaster.value = await store.fetchPosMaster(dataMain);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      posMaster.value = [];
+    })
+    .finally(() => {
+      setTimeout(() => {
+        isLoad.value = false;
+      }, 500);
+    });
+}
+
+/** ดึงข้อมูลสถิติจำนวนด้านบน*/
+function getSummary() {
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.id, //*Id node
+      type: reqMaster.type, //*ประเภทnode
+      isNode: reqMaster.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    });
+}
+
+/** funcion ค้นหาข้อมูลใน Table*/
+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(() => {
+  setTimeout(async () => {
+    store.activeId && (await fetchDataTree(store.activeId));
+  }, 200);
+});
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
+watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+});
+
+/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
+watch(
+  () => reqMaster.isAll,
+  () => {
+    getSummary();
+    if (reqMaster.page !== 1) {
+      reqMaster.page = 1;
+    } else {
+      fetchDataTable(reqMaster.id, reqMaster.type, false);
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="col-12">
+    <q-card bordered class="col-12 row caedNone">
+      <div class="col-xs-12 col-sm-3 row">
+        <div class="col-12 row no-wrap bg-grey-1">
+          <TreeMain
+            v-model:nodeTree="nodeTree"
+            v-model:shortName="shortName"
+            v-model:nodeId="nodeId"
+            :fetchDataTree="fetchDataTree"
+            :fetchDataTable="fetchDataTable"
+          />
+
+          <div class="col-12 row">
+            <q-separator :vertical="!$q.screen.lt.md" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-9 q-pa-md row">
+        <div class="col-12 row">
+          <div
+            class="row col-12 justify-center"
+            v-if="isLoad"
+            style="height: 550px"
+          >
+            <div class="col-2">
+              <q-spinner color="primary" size="3em" />
+            </div>
+          </div>
+
+          <div v-else class="col-12 row">
+            <div class="col-12" v-if="nodeId !== ''">
+              <!-- summary -->
+              <q-card
+                bordered
+                v-if="nodeId"
+                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
+              >
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
+                  <q-space />
+                  <q-badge
+                    color="secondary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.total
+                        : store.sumPosition.totalRoot
+                    "
+                  />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
+                  <q-space />
+                  <q-badge
+                    color="primary"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.use
+                        : store.sumPosition.useRoot
+                    "
+                  />
+                </div>
+                <div class="row col q-pa-sm item">
+                  <div class="ellipsis">ตำแหน่งว่าง</div>
+                  <q-space />
+                  <q-badge
+                    color="red"
+                    :label="
+                      reqMaster.isAll
+                        ? store.sumPosition.vacant
+                        : store.sumPosition.vacantRoot
+                    "
+                  />
+                </div>
+              </q-card>
+
+              <TreeTable
+                v-if="nodeId !== ''"
+                v-model:nodeTree="nodeTree"
+                v-model:orgLevel="orgLevel"
+                v-model:treeId="nodeId"
+                v-model:reqMaster="reqMaster"
+                v-model:totalPage="totalPage"
+                v-model:posMaster="posMaster"
+                :shortName="shortName"
+                :mainTree="mainTree"
+                :fetchDataTable="fetchDataTable"
+                :filterKeyword="filterKeyword"
+                :fetchDataTree="fetchDataTree"
+              />
+            </div>
+            <div class="row col-12 items-center" v-else>
+              <q-banner class="q-pa-lg col-12 text-center">
+                <q-icon
+                  name="mdi-hand-pointing-left"
+                  size="lg"
+                  color="primary"
+                />
+                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
+              </q-banner>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style scoped>
+.list-summary .item {
+  border: 1px solid rgb(231, 231, 231);
+  border-radius: 4px;
+  background-color: white;
+}
+</style>
diff --git a/src/modules/16_positionEmployee/interface/index/Main.ts b/src/modules/16_positionEmployee/interface/index/Main.ts
new file mode 100644
index 00000000..95adf29d
--- /dev/null
+++ b/src/modules/16_positionEmployee/interface/index/Main.ts
@@ -0,0 +1,147 @@
+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;
+  reason: 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,
+};
diff --git a/src/modules/16_positionEmployee/interface/index/organizational.ts b/src/modules/16_positionEmployee/interface/index/organizational.ts
new file mode 100644
index 00000000..f6f21bd6
--- /dev/null
+++ b/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,
+};
diff --git a/src/modules/16_positionEmployee/interface/request/Main.ts b/src/modules/16_positionEmployee/interface/request/Main.ts
new file mode 100644
index 00000000..b5eb23bd
--- /dev/null
+++ b/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 };
diff --git a/src/modules/16_positionEmployee/interface/request/organizational.ts b/src/modules/16_positionEmployee/interface/request/organizational.ts
new file mode 100644
index 00000000..074095c3
--- /dev/null
+++ b/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 };
diff --git a/src/modules/16_positionEmployee/interface/response/organizational.ts b/src/modules/16_positionEmployee/interface/response/organizational.ts
new file mode 100644
index 00000000..d674b577
--- /dev/null
+++ b/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,
+};
diff --git a/src/modules/16_positionEmployee/router.ts b/src/modules/16_positionEmployee/router.ts
new file mode 100644
index 00000000..9865b0d1
--- /dev/null
+++ b/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",
+    },
+  },
+];
diff --git a/src/modules/16_positionEmployee/store/organizational.ts b/src/modules/16_positionEmployee/store/organizational.ts
new file mode 100644
index 00000000..3db85426
--- /dev/null
+++ b/src/modules/16_positionEmployee/store/organizational.ts
@@ -0,0 +1,137 @@
+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: e.fullNameCurrentHolder
+        ? e.fullNameCurrentHolder
+        : "ว่าง",
+      posMasterNo:
+        e.orgShortname +
+        (e.posMasterNoPrefix ? e.posMasterNoPrefix : "") +
+        (e.posMasterNo ? e.posMasterNo : "") +
+        (e.posMasterNoSuffix ? 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,
+  };
+});
diff --git a/src/modules/16_positionEmployee/views/main.vue b/src/modules/16_positionEmployee/views/main.vue
new file mode 100644
index 00000000..cc797634
--- /dev/null
+++ b/src/modules/16_positionEmployee/views/main.vue
@@ -0,0 +1,60 @@
+<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();
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        store.fetchDataActive(data);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** lifecycleHook */
+onMounted(async () => {
+  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 />
+      </q-card-section>
+    </q-card>
+  </q-card>
+</template>
+
+<style scoped></style>