diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index f63a60e0f..b5371a1f9 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -4,6 +4,8 @@ const organization = `${env.API_URI}/org`;
 const orgPos = `${env.API_URI}/org/pos`;
 const orgProfile = `${env.API_URI}/org/profile`;
 const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
+const orgAct = `${env.API_URI}/org/act`;
+const orgPosAct = `${env.API_URI}/org/pos/act`;
 
 export default {
   keycloakPosition: () => `${organization}/profile/keycloak/position`,
@@ -100,4 +102,8 @@ export default {
   changePositionByIdProfile: `${organization}/placement/change-position/profile`,
 
   orgProfileReport: `${orgProfile}-employee/report`,
+
+  /** รักษาการตำแหน่ง*/
+  orgAct,
+  orgPosAct,
 };
diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index a4f54e3ea..c465ffb1d 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -34,8 +34,6 @@ export default {
   changestatusProbations: (personalId: string) =>
     `${evaluate}/report/change-status?personal_id=${personalId}`,
 
-  
-
   // probationGetAssignList: (personalId: string) =>
   //   `${finish}/probation-assign-list?personal_id=${personalId}`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
@@ -86,4 +84,6 @@ export default {
   summaryReportDetail: (id: string) => `${evaluate}/report?assign_id=${id}`,
 
   orgProfilePlacement: (id: string) => `${orgProfile}/profile/placement/${id}`,
+  orgProfileStatus: (profileId: string) =>
+    `${orgProfile}/profile/probation/${profileId}`,
 };
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 18e1cf255..8d89da985 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -134,6 +134,13 @@ const menuList = readonly<any[]>([
     path: "organizationalNew",
     role: "organization",
   },
+  {
+    key: 3,
+    icon: "mdi-account-convert",
+    label: "รักษาการในตำแหน่ง",
+    path: "acting",
+    role: "organization",
+  },
   {
     key: 3,
     icon: "o_groups",
@@ -561,7 +568,7 @@ const menuList = readonly<any[]>([
         role: "evaluateKPI",
       },
       {
-        label: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
+        label: "รายงาน",
         path: "KPIReport",
         role: "evaluateKPI",
       },
diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index 30f625473..3ca95bea3 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -143,8 +143,7 @@ function onSubmit() {
       ["org" + type + "PhoneIn"]: formData.orgPhoneIn,
       ["org" + type + "Fax"]: formData.orgFax,
       ["org" + type + "Rank"]: formData.orgLevel,
-      ["org" + type + "RankSub"]:
-        level.value !== 0 ? formData.orgLevelSub : undefined,
+      ["org" + type + "RankSub"]: formData.orgLevelSub,
       [nameId]: rootId,
       responsibility:
         formData.responsibility != null ? formData.responsibility : "",
@@ -217,8 +216,8 @@ watch(
   () => {
     if (props.modal === true) {
       if (actionType.value === "ADD") {
-        console.log(props.dataNode);
-        console.log(level.value);
+        // console.log(props.dataNode);
+        // console.log(level.value);
 
         if (props.dataNode) {
           formData.orgCode =
@@ -238,6 +237,8 @@ watch(
           orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
           formData.orgLevel = "";
         }
+
+        formData.orgLevel == "DEPARTMENT" ? selectOrgLevele("DEPARTMENT") : "";
       } else {
         if (props.dataNode) {
           formData.orgName = props.dataNode.orgTreeName;
@@ -274,9 +275,16 @@ const tittleName = computed(() => {
 function selectOrgLevele(val: string, status: boolean = true) {
   formData.orgLevelSub = status ? "" : formData.orgLevelSub;
   switch (val) {
+    case "DEPARTMENT":
+      orgLevelSubOptionMain.value = [
+        { name: "สำนัก", id: "BUREAU" },
+        { name: "สำนักงาน", id: "OFFICE" },
+        { name: "สำนักงานเขต", id: "DISTRICT" },
+      ];
+      break;
     case "OFFICE":
       orgLevelSubOptionMain.value = [
-        { name: "ระดับกอง", id: "DIVISION" },
+        { name: "กอง", id: "DIVISION" },
         {
           name: "สำนักงาน",
           id: "OFFICE",
@@ -289,7 +297,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
       break;
     case "DIVISION":
       orgLevelSubOptionMain.value = [
-        { name: "ระดับส่วน", id: "SECTION" },
+        { name: "ส่วน", id: "SECTION" },
         {
           name: "กลุ่มภารกิจ",
           id: "MISSION",
@@ -298,11 +306,19 @@ function selectOrgLevele(val: string, status: boolean = true) {
 
     case "SECTION":
       orgLevelSubOptionMain.value = [
-        { name: "ระดับฝ่าย", id: "FACTION" },
+        { name: "ฝ่าย", id: "FACTION" },
         {
           name: "กลุ่มงาน",
           id: "WORK",
         },
+        {
+          name: "สถานีดับเพลิงและกู้ภัย",
+          id: "FIRESTATION",
+        },
+        {
+          name: "โรงเรียน",
+          id: "SCHOOL",
+        },
       ];
 
     default:
@@ -415,9 +431,8 @@ function selectOrgLevele(val: string, status: boolean = true) {
                   lazy-rules
                 />
               </div>
-              <div class="col-4" v-if="formData.orgLevel !== '' && level !== 0">
+              <div class="col-4" v-if="formData.orgLevel !== ''">
                 <q-select
-                  :readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
                   ref="orgLevelSubRef"
                   dense
                   hide-bottom-space
diff --git a/src/modules/04_registry/stores/salary.ts b/src/modules/04_registry/stores/salary.ts
index 750d2889e..59e993edf 100644
--- a/src/modules/04_registry/stores/salary.ts
+++ b/src/modules/04_registry/stores/salary.ts
@@ -94,6 +94,10 @@ export const useSalaryDataStore = defineStore("salary", () => {
       id: 21,
       name: "โปรดเกล้าฯ แต่งตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
     },
+    {
+      id: 22,
+      name: "รักษาการในตำแหน่งหัวหน้าฝ่าย {ฝ่าย…} {หน่วยงาน/สำนัก} {ลำดับที่…} คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่/ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
   ]);
 
   const optionDoc = ref<any>([
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 4592a32f1..b81afd7a5 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -327,22 +327,22 @@ async function filterKeyword2Fn(page: number) {
  * @param id string
  * @param data type
  */
-async function fecthlistProbation(id: string, data: any) {
-  try {
-    probationlist.value = [];
-    const res = await http.post(
-      config.API.profileSearchNewOcIdType(id, "officer"),
-      {
-        criterias: data,
-      }
-    );
-    return res.data.result;
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
-}
+// async function fecthlistProbation(id: string, data: any) {
+//   try {
+//     probationlist.value = [];
+//     const res = await http.post(
+//       config.API.profileSearchNewOcIdType(id, "officer"),
+//       {
+//         criterias: data,
+//       }
+//     );
+//     return res.data.result;
+//   } catch (err) {
+//     messageError($q, err);
+//   } finally {
+//     hideLoader();
+//   }
+// }
 
 /**
  * ค้นหาข้อมูลตามไอดี
@@ -389,9 +389,16 @@ function clickAdd(data: any) {
 
       await http
         .post(config.API.personalAdd(), data)
-        .then(() => {
-          getpersonalList();
-          success($q, "เพิ่มข้อมูลสำเร็จ");
+        .then(async () => {
+          await http
+            .get(config.API.orgProfileStatus(data.id))
+            .then((res) => {
+              getpersonalList();
+              success($q, "เพิ่มข้อมูลสำเร็จ");
+            })
+            .catch((e) => {
+              messageError($q, e);
+            });
         })
         .catch((e) => {
           messageError($q, e);
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 4cbb751f5..363c57f73 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -21,6 +21,52 @@ const organization = ref<string>("");
 const roundOp = ref<DataOption[]>([]);
 const organizationOpsMain = ref<DataOption[]>([]);
 const organizationOps = ref<DataOption[]>([]);
+const typeReport = ref<string>("");
+const listReportMain = ref<DataOption[]>([
+  {
+    id: "1",
+    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงจำนวนผู้มีผลการประเมินระดับต่างๆ ในแต่ละรอบการประเมินรายหน่วยงาน/ส่วนราชการ",
+  },
+  {
+    id: "2",
+    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผู้มีผลการประเมินระดับต่างๆ รายหน่วยงาน/ส่วนราชการ ",
+  },
+  {
+    id: "3",
+    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผลการประเมินของผู้ใต้บังคับบัญชา",
+  },
+  {
+    id: "4",
+    name: "แบบสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล (รายบุคคล)",
+  },
+  {
+    id: "5",
+    name: "รายงานผลการประเมินผลการปฏิบัติราชการย้อนหลัง ๕ ปี",
+  },
+  {
+    id: "6",
+    name: "รายงานผลการประเมินผลการปฏิบัติราชการย้อนหลัง ๓ ปี",
+  },
+  {
+    id: "7",
+    name: "รายงานสรุปแผนพัฒนาการปฏิบัติราชการรายบุคคล",
+  },
+  {
+    id: "8",
+    name: "รายงานแผนพัฒนาการปฏิบัติราชการรายบุคคล",
+  },
+  {
+    id: "9",
+    name: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
+  },
+]);
+const listReport = ref<DataOption[]>([]);
+const searchField = ref<string>("fullName");
+const search = ref<string>("");
+const typeFilter = ref<DataOption[]>([
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+]);
 
 function fetchRoundOption() {
   http
@@ -112,9 +158,9 @@ function fetchReport() {
  * function เรียกไฟล์ PDF
  * @param data  ข้อมูลบัญชีวันลา
  */
-async function genPDf(data: any) {
+function genPDf(data: any) {
   showLoader();
-  await axios
+  axios
     .post(config.API.reportTemplate + `/docx`, data, {
       headers: {
         accept: "application/pdf",
@@ -144,12 +190,26 @@ function changOption() {
   fetchReport();
 }
 
-function filterSelector(val: string, update: Function) {
-  update(() => {
-    organizationOps.value = organizationOpsMain.value.filter(
-      (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
-    );
-  });
+function filterSelector(val: string, update: Function, type: string) {
+  switch (type) {
+    case "typereport":
+      update(() => {
+        listReport.value = listReportMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    case "organization":
+      update(() => {
+        organizationOps.value = organizationOpsMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
 }
 
 const splitterModel = ref(14);
@@ -159,7 +219,9 @@ const pdfSrc = ref<any>();
 const dataDownload = ref<any>();
 
 async function downloadReport(data: any, type: string) {
-  var fileName = "ประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก";
+  const name =
+    listReportMain.value.find((e) => e.id === typeReport.value)?.name ?? "";
+  var fileName = name;
   genReport(data, fileName, type);
 }
 
@@ -184,60 +246,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก
-  </div>
+  <div class="toptitle text-dark col-12 row items-center">รายงาน</div>
   <q-card flat bordered>
-    <q-card-section>
+    <q-card-section class="q-gutter-y-sm">
       <q-toolbar style="padding: 0">
         <div class="row q-gutter-sm">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="year"
-            style="width: 150px"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-            @update:model-value="fetchRoundOption()"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                dense
-                outlined
-                hide-bottom-space
-                :model-value="!!year ? year + 543 : null"
-                :label="`${'ปีงบประมาณ'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-          <q-select
-            v-model="round"
-            outlined
-            label="รอบการประเมิน"
-            dense
-            option-label="name"
-            option-value="id"
-            :options="roundOp"
-            style="min-width: 150px"
-            emit-value
-            map-options
-            :disable="roundOp.length === 0"
-            @update:model-value="changOption"
-          />
           <q-select
             :disable="roundOp.length === 0"
             style="min-width: 100px"
@@ -248,14 +261,12 @@ onMounted(() => {
             option-value="id"
             emit-value
             map-options
-            v-model="organization"
-            :options="organizationOps"
-            label="หน่วยงาน"
+            v-model="typeReport"
+            :options="listReport"
+            label="รายงาน"
             use-input
-            @update:model-value="changOption"
             @filter="(inputValue: string,
-            
-            doneFn: Function) => filterSelector(inputValue, doneFn )"
+            doneFn: Function) => filterSelector(inputValue, doneFn ,'typereport')"
           />
         </div>
 
@@ -295,11 +306,136 @@ onMounted(() => {
         </q-btn>
       </q-toolbar>
 
+      <q-toolbar
+        class="q-pa-sm bg-grey-2"
+        style="padding: 0; border-radius: 5px"
+        v-if="typeReport"
+      >
+        <div
+          class="row q-gutter-sm"
+          v-if="
+            typeReport === '1' ||
+            typeReport === '2' ||
+            typeReport === '3' ||
+            typeReport === '7' ||
+            typeReport === '9'
+          "
+        >
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="year"
+            style="width: 150px"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+            @update:model-value="fetchRoundOption()"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                :model-value="!!year ? year + 543 : null"
+                :label="`${'ปีงบประมาณ'}`"
+                class="bg-white"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+          <q-select
+            class="bg-white"
+            v-model="round"
+            outlined
+            label="รอบการประเมิน"
+            dense
+            option-label="name"
+            option-value="id"
+            :options="roundOp"
+            style="min-width: 150px"
+            emit-value
+            map-options
+            :disable="roundOp.length === 0"
+            @update:model-value="changOption"
+          />
+          <q-select
+            class="bg-white"
+            :disable="roundOp.length === 0"
+            style="min-width: 100px"
+            dense
+            hide-bottom-space
+            outlined
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            v-model="organization"
+            :options="organizationOps"
+            label="หน่วยงาน"
+            use-input
+            @update:model-value="changOption"
+            @filter="(inputValue: string,
+            
+            doneFn: Function) => filterSelector(inputValue, doneFn,'organization' )"
+          />
+        </div>
+
+        <div class="row q-gutter-sm" v-else>
+          <q-select
+            class="bg-white"
+            style="width: 200px"
+            dense
+            hide-bottom-space
+            outlined
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+            v-model="searchField"
+            :options="typeFilter"
+            label="ค้นหาจาก"
+          />
+
+          <q-input
+            class="bg-white"
+            v-model="search"
+            outlined
+            clearable
+            hide-bottom-space
+            dense
+            label="คำค้น"
+            style="width: 350px"
+          >
+            <template v-slot:after>
+              <q-btn
+                color="primary"
+                icon="search"
+                label="ค้นหา"
+                class="full-width q-py-sm q-px-md"
+              >
+              </q-btn>
+            </template>
+          </q-input>
+        </div>
+      </q-toolbar>
+
       <q-splitter
         v-model="splitterModel"
         horizontal
         style="
-          height: 75vh;
+          height: 70vh;
           border: 1px solid rgb(210, 210, 210);
           border-radius: 5px;
         "
diff --git a/src/modules/17_acting/interface/index/Main.ts b/src/modules/17_acting/interface/index/Main.ts
new file mode 100644
index 000000000..46133c9b9
--- /dev/null
+++ b/src/modules/17_acting/interface/index/Main.ts
@@ -0,0 +1,10 @@
+interface Pagination {
+  rowsPerPage: number;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { Pagination, DataOption };
diff --git a/src/modules/17_acting/interface/request/Main.ts b/src/modules/17_acting/interface/request/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/17_acting/interface/request/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/17_acting/interface/response/Main.ts b/src/modules/17_acting/interface/response/Main.ts
new file mode 100644
index 000000000..8a8c012be
--- /dev/null
+++ b/src/modules/17_acting/interface/response/Main.ts
@@ -0,0 +1,35 @@
+interface DataTree {
+  labelName: string;
+  orgCode: string;
+  orgLevel: 0;
+  orgName: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeShortName: string;
+  children: DataTree[];
+  posMaster: PosMaster[];
+}
+
+interface PosMaster {
+  fullNameCurrentHolder: string;
+  orgLevel: number;
+  orgTreeId: string;
+  posmasterId: string;
+}
+
+interface ListPerson {
+  citizenId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  posLevel: string;
+  posNo: string;
+  posType: string;
+  position: string;
+  prefix: string;
+  posMasterOrder?: string;
+}
+
+export type { DataTree, PosMaster, ListPerson };
diff --git a/src/modules/17_acting/router.ts b/src/modules/17_acting/router.ts
new file mode 100644
index 000000000..2a063dbf0
--- /dev/null
+++ b/src/modules/17_acting/router.ts
@@ -0,0 +1,14 @@
+const mainPage = () => import("@/modules/17_acting/views/main.vue");
+
+export default [
+  {
+    path: "/acting",
+    name: "acting",
+    component: mainPage,
+    meta: {
+      Auth: true,
+      Key: [1],
+      Role: "organization",
+    },
+  },
+];
diff --git a/src/modules/17_acting/views/main.vue b/src/modules/17_acting/views/main.vue
new file mode 100644
index 000000000..7fc257311
--- /dev/null
+++ b/src/modules/17_acting/views/main.vue
@@ -0,0 +1,573 @@
+<script setup lang="ts">
+import { ref, onMounted, 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 {
+  DataTree,
+  PosMaster,
+  ListPerson,
+} from "@/modules/17_acting/interface/response/Main";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, dialogRemove } =
+  useCounterMixin();
+
+/** โครงสร้าง*/
+const expanded = ref<Array<string>>([]);
+const filter = ref<string>("");
+const nodeTree = ref<DataTree[]>([]);
+const posmasterId = ref<string>("");
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
+function fetchOrganizationActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        fetchOrganization(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลโครงสร้าาง
+ * @param id id โครงสร้างปัจุบัน
+ */
+function fetchOrganization(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgAct + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function updateSelected(data: PosMaster) {
+  posmasterId.value = data.posmasterId;
+  await Promise.all([fetchPosMaster(), fetchListAct()]);
+}
+
+/** ตำแหน่ง*/
+const rowPosition = ref<ListPerson[]>([]);
+const columns = 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: false,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field(row) {
+      return `${row.prefix}${row.firstName}  ${row.lastName}`;
+    },
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: false,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: false,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: false,
+    field: "posType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: false,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const keyword = ref<string>("");
+
+/** function fetch รายชื่อ*/
+function fetchPosMaster() {
+  showLoader();
+  http
+    .post(config.API.orgPosAct + `/search`, { posmasterId: posmasterId.value })
+    .then((res) => {
+      const data = res.data.result;
+      rowPosition.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function เลือกราชชื่อรักษาการ
+ * @param data ข้อมูลรายชื่อ
+ */
+function selectPosition(data: ListPerson) {
+  showLoader();
+  http
+    .post(config.API.orgPosAct, {
+      posMasterId: posmasterId.value,
+      posMasterChildId: data.id,
+    })
+    .then(async () => {
+      await Promise.all([fetchPosMaster(), fetchListAct()]);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/** รายชื่อคนรักษาการ*/
+const rowListPerson = ref<ListPerson[]>([]);
+const keywordAct = ref<string>("");
+
+/** function fetch รายชื่อรักษาการ */
+function fetchListAct() {
+  showLoader();
+  http
+    .get(config.API.orgPosAct + `/${posmasterId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rowListPerson.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * funcion เลือกลำดับรายชื่อรักษาการ
+ * @param type up,down
+ * @param id รายชื่อรักษาการ
+ */
+function onSwapPerson(type: string, id: string) {
+  showLoader();
+  http
+    .get(config.API.orgPosAct + `/swap/${type}/${id}`)
+    .then(() => {
+      fetchListAct();
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function ลบรายชื่อรักษาการ
+ * @param id ชื่อรักษาการ
+ */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgPosAct + `/${id}`)
+      .then(async () => {
+        await Promise.all([fetchPosMaster(), fetchListAct()]);
+      })
+      .catch((err) => {
+        messageError($q, err);
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  fetchOrganizationActive();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รักษาการในตำแหน่ง
+  </div>
+  <q-card style="height: 100%">
+    <q-card-section :horizontal="$q.screen.gt.sm">
+      <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
+        <div>
+          <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 class="bg-white tree-container q-pa-xs">
+          <q-tree
+            class="q-pa-sm q-gutter-sm"
+            dense
+            :nodes="nodeTree"
+            node-key="orgTreeId"
+            label-key="labelName"
+            :filter="filter"
+            no-results-label="ไม่พบข้อมูลที่ค้นหา"
+            no-nodes-label="ไม่มีข้อมูล"
+            v-model:expanded="expanded"
+          >
+            <template v-slot:default-header="prop">
+              <q-item
+                clickable
+                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>
+
+            <template v-slot:default-body="prop">
+              <div v-if="prop.node.posMaster">
+                <q-list dense v-for="col in prop.node.posMaster">
+                  <q-item
+                    clickable
+                    :active="posmasterId == col.posmasterId"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    @click.stop="updateSelected(col)"
+                  >
+                    <q-item-section>
+                      {{ col.fullNameCurrentHolder }}
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <div></div>
+              </div>
+            </template>
+          </q-tree>
+        </div>
+      </q-card-section>
+
+      <q-separator :vertical="$q.screen.gt.xs" />
+
+      <q-card-section
+        v-if="posmasterId"
+        class="col-lg-9 col-md-8 col-xs-12 scroll"
+        style="height: 80vh"
+      >
+        <div class="column q-col-gutter-sm">
+          <div class="col">
+            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                รายชื่อ
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row q-pa-md">
+                <div class="col-12">
+                  <q-toolbar style="padding: 0">
+                    <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="keyword" label="ค้นหา">
+                          <template v-slot:append>
+                            <q-icon name="search" color="grey-5" />
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </q-toolbar>
+                </div>
+                <div class="col-12">
+                  <d-table
+                    ref="table"
+                    :columns="columns"
+                    :rows="rowPosition"
+                    :paging="true"
+                    :filter="keyword"
+                    row-key="id"
+                    flat
+                    bordered
+                    dense
+                    :rows-per-page-options="[10, 25, 50, 100]"
+                  >
+                    <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"
+                          @click="selectPosition(props.row)"
+                        >
+                          <div v-if="col.name === 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+                          <div v-else>
+                            {{ col.value ? 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>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col">
+            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                รายชื่อรักษาการ
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row q-pa-md">
+                <div class="col-12">
+                  <q-toolbar style="padding: 0">
+                    <q-space />
+                    <div class="row q-gutter-md">
+                      <div>
+                        <q-input
+                          outlined
+                          dense
+                          v-model="keywordAct"
+                          label="ค้นหา"
+                        >
+                          <template v-slot:append>
+                            <q-icon name="search" color="grey-5" />
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </q-toolbar>
+                </div>
+                <div class="col-12">
+                  <d-table
+                    ref="table"
+                    :columns="columns"
+                    :rows="rowListPerson"
+                    :paging="true"
+                    :filter="keywordAct"
+                    row-key="id"
+                    flat
+                    bordered
+                    dense
+                    :rows-per-page-options="[10, 25, 50, 100]"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th auto-width v-if="rowListPerson.length !== 1" />
+                        <q-th auto-width v-if="rowListPerson.length !== 1" />
+                        <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-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td auto-width v-if="rowListPerson.length !== 1">
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                            :disable="props.rowIndex + 1 == 1"
+                            icon="mdi-arrow-up-bold"
+                            @click="onSwapPerson('up', props.row.id)"
+                          >
+                            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+                          </q-btn>
+                        </q-td>
+                        <q-td auto-width v-if="rowListPerson.length !== 1">
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            :color="
+                              rowListPerson.length == props.rowIndex + 1
+                                ? 'grey'
+                                : 'red'
+                            "
+                            :disable="
+                              rowListPerson.length == props.rowIndex + 1
+                            "
+                            icon="mdi-arrow-down-bold"
+                            @click="onSwapPerson('down', props.row.id)"
+                          >
+                            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+                          </q-btn>
+                        </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 ? col.value : "-" }}
+                          </div>
+                        </q-td>
+                        <q-td>
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            color="red"
+                            icon="delete"
+                            @click="onDelete(props.row.id)"
+                          >
+                            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+                          </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>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 74vh;
+  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/router/index.ts b/src/router/index.ts
index c40e5cc50..6f2f6b949 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,6 +24,7 @@ import ModuleSalary from "@/modules/13_salary/router";
 import ModuleKPI from "@/modules/14_KPI/router";
 import ModuleDevelopment from "@/modules/15_development/router";
 import ModuleSupport from "@/modules/00_support/router";
+import ModuleActing from "@/modules/17_acting/router";
 
 // TODO: ใช้หรือไม่?
 import keycloak from "@/plugins/keycloak";
@@ -66,6 +67,7 @@ const router = createRouter({
         ...ModuleKPI,
         ...ModuleDevelopment,
         ...ModuleSupport,
+        ...ModuleActing,
       ],
     },
     /**
diff --git a/src/views/TestManagement.vue b/src/views/TestManagement.vue
index 80139f275..3fba0e280 100644
--- a/src/views/TestManagement.vue
+++ b/src/views/TestManagement.vue
@@ -1,89 +1,566 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-const splitterModel = ref<number>(15);
-const tab = ref<string>("admin");
-const active = ref<string>("role");
+/** importType*/
+import type { QTableProps } from "quasar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+
+/** โครงสร้าง*/
+const expanded = ref<Array<string>>([]);
+const filter = ref<string>("");
+const nodeTree = ref<any[]>([]);
+const nodeId = ref<string>("");
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
+function fetchOrganizationActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        fetchOrganization(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลโครงสร้าาง
+ * @param id id โครงสร้างปัจุบัน
+ */
+function fetchOrganization(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      nodeTree.value = data.map((e: any) => ({
+        ...e,
+        owner: [
+          {
+            name: "นางอัจฉรา ศรีปริวาทิน",
+            pos: "หัวหน้า",
+          },
+          {
+            name: "นางศรีปริวาทิน",
+            pos: "รองหัวหน้า",
+          },
+        ],
+      }));
+      console.log(nodeTree.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function updateSelected(data: any) {
+  nodeId.value = data;
+}
+
+/** ตำแหน่ง*/
+const rowPosition = ref<any[]>([
+  {
+    id: "1",
+    posMasterNo: "สกก.1",
+    positionName: "นักบริหาร",
+    posTypeName: "บริหาร",
+    posLevelName: "สูง",
+    positionIsSelected: "นางอัจฉรา ศรีปริวาทิน",
+  },
+]);
+const columnsPosition = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rowPosition.value.indexOf(row) + 1,
+    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 positionId = ref<string>("");
+
+const reqMaster = reactive({
+  isAll: false,
+  keyword: "",
+});
+
+function selectPosition(id: string) {
+  positionId.value = id;
+}
+
+/** รายชื่อคนรักษาการ*/
+const rowListPerson = ref<any[]>([
+  {
+    id: "1",
+    citizenId: "1101700019241",
+    name: "เรือตรีพนัส บิณศิรวานิช",
+    posMasterNo: "สพข.54",
+    positionName: "นายแพทย์",
+    posTypeName: "ทั่วไป",
+    posLevelName: "สูง",
+  },
+  {
+    id: "2",
+    citizenId: "1101700019241",
+    name: "เรือตรีพนัส บิณศิรวานิช",
+    posMasterNo: "สพข.54",
+    positionName: "นายแพทย์",
+    posTypeName: "ทั่วไป",
+    posLevelName: "สูง",
+  },
+]);
+const columnsPerson = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rowListPerson.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: false,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    field: "name",
+    sortable: false,
+    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: "ตำแหน่งในสายงาน",
+    sortable: false,
+    field: "positionName",
+    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",
+  },
+]);
+
+function onSwapPerson(type: string, id: string) {}
+
+onMounted(() => {
+  fetchOrganizationActive();
+});
 </script>
 
 <template>
-  <q-card
-    ><q-splitter v-model="splitterModel" disable>
-      <template v-slot:before>
-        <div class="">
-          <div class="text-h4 q-mb-md q-pa-md">Management</div>
-          <q-list separator>
-            <q-item
-              clickable
-              v-ripple
-              :active="active === 'role' ? true : false"
-              active-class="bg-primary text-grey-1"
-              @click="active = 'role'"
-            >
-              <q-item-section>Role Management</q-item-section>
-            </q-item>
-
-            <q-item
-              clickable
-              v-ripple
-              :active="active === 'user' ? true : false"
-              active-class="bg-primary text-grey-1"
-              @click="active = 'user'"
-            >
-              <q-item-section>
-                <q-item-label>User Management</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
+  <div class="toptitle text-dark col-12 row items-center">
+    รักษาการในตำแหน่ง
+  </div>
+  <q-card style="height: 100%">
+    <q-card-section :horizontal="$q.screen.gt.sm">
+      <q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
+        <div>
+          <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>
-      </template>
+        <div class="bg-white tree-container q-pa-xs">
+          <q-tree
+            class="q-pa-sm q-gutter-sm"
+            dense
+            :nodes="nodeTree"
+            node-key="orgTreeId"
+            label-key="labelName"
+            :filter="filter"
+            no-results-label="ไม่พบข้อมูลที่ค้นหา"
+            no-nodes-label="ไม่มีข้อมูล"
+            v-model:expanded="expanded"
+          >
+            <template v-slot:default-header="prop">
+              <q-item
+                clickable
+                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>
 
-      <template v-slot:after>
-        <div class="q-pa-md">
-          <div class="text-h4 q-mb-md">
-            {{ active === "role" ? "Role Management" : "User Management" }}
+            <template v-slot:default-body="prop">
+              <div v-if="prop.node.owner">
+                <q-list dense v-for="col in prop.node.owner">
+                  <q-item
+                    clickable
+                    :active="nodeId == col.name"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    @click.stop="updateSelected(col.name)"
+                  >
+                    <q-item-section>
+                      {{ col.name }} {{ col.pos }}</q-item-section
+                    >
+                  </q-item>
+                </q-list>
+                <div></div>
+              </div>
+            </template>
+          </q-tree>
+        </div>
+      </q-card-section>
+
+      <q-separator :vertical="$q.screen.gt.xs" />
+
+      <q-card-section
+        v-if="nodeId"
+        class="col-lg-9 col-md-8 col-xs-12 scroll"
+        style="height: 86vh"
+      >
+        <div class="column q-col-gutter-sm">
+          <div class="col">
+            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                เลือกตำแหน่ง
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row q-pa-md">
+                <div class="col-12">
+                  <q-toolbar style="padding: 0">
+                    <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="ค้นหา"
+                        >
+                          <template v-slot:append>
+                            <q-icon name="search" color="grey-5" />
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </q-toolbar>
+                </div>
+                <div class="col-12">
+                  <d-table
+                    ref="table"
+                    :columns="columnsPosition"
+                    :rows="rowPosition"
+                    :paging="true"
+                    row-key="id"
+                    flat
+                    bordered
+                    dense
+                    :rows-per-page-options="[10, 25, 50, 100]"
+                  >
+                    <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"
+                          @click="selectPosition(props.row.id)"
+                          :class="
+                            props.row.id === positionId ? 'bg-blue-2' : ''
+                          "
+                        >
+                          <div>
+                            {{ col.value ? 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>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col" v-if="positionId">
+            <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+                รายชื่อคนรักษาการ
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row q-pa-md">
+                <div class="col-12">
+                  <q-toolbar style="padding: 0">
+                    <q-space />
+                    <div class="row q-gutter-md">
+                      <div>
+                        <q-input
+                          outlined
+                          dense
+                          v-model="reqMaster.keyword"
+                          label="ค้นหา"
+                        >
+                          <template v-slot:append>
+                            <q-icon name="search" color="grey-5" />
+                          </template>
+                        </q-input>
+                      </div>
+                    </div>
+                  </q-toolbar>
+                </div>
+                <div class="col-12">
+                  <d-table
+                    ref="table"
+                    :columns="columnsPerson"
+                    :rows="rowListPerson"
+                    :paging="true"
+                    row-key="id"
+                    flat
+                    bordered
+                    dense
+                    :rows-per-page-options="[10, 25, 50, 100]"
+                  >
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th auto-width v-if="rowListPerson.length !== 1" />
+                        <q-th auto-width v-if="rowListPerson.length !== 1" />
+                        <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 auto-width v-if="rowListPerson.length !== 1">
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                            :disable="props.rowIndex + 1 == 1"
+                            icon="mdi-arrow-up-bold"
+                            @click="onSwapPerson('up', props.row.id)"
+                          >
+                            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+                          </q-btn>
+                        </q-td>
+                        <q-td auto-width v-if="rowListPerson.length !== 1">
+                          <q-btn
+                            dense
+                            size="12px"
+                            flat
+                            round
+                            :color="
+                              rowListPerson.length == props.rowIndex + 1
+                                ? 'grey'
+                                : 'red'
+                            "
+                            :disable="
+                              rowListPerson.length == props.rowIndex + 1
+                            "
+                            icon="mdi-arrow-down-bold"
+                            @click="onSwapPerson('down', props.row.id)"
+                          >
+                            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+                          </q-btn>
+                        </q-td>
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div>
+                            {{ col.value ? 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>
+                </div>
+              </div>
+            </q-card>
           </div>
         </div>
-        <div v-if="active === 'role'"></div>
-        <div v-else>
-          <q-tabs
-            v-model="tab"
-            class="text-grey"
-            active-color="primary"
-            indicator-color="primary"
-            align="justify"
-          >
-            <q-tab name="admin">
-              <div class="text-h7">
-                Admin
-                <q-badge align="top" color="red" rounded label="10"></q-badge>
-              </div>
-            </q-tab>
-            <q-tab name="user">
-              <div class="text-h7">
-                User
-                <q-badge align="top" color="red" rounded label="100"></q-badge>
-              </div>
-            </q-tab>
-          </q-tabs>
-
-          <q-separator />
-
-          <q-tab-panels v-model="tab" animated>
-            <q-tab-panel name="admin">
-              <div class="text-h6">Mails</div>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </q-tab-panel>
-
-            <q-tab-panel name="user">
-              <div class="text-h6">Alarms</div>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </q-tab-panel>
-          </q-tab-panels>
-        </div>
-      </template>
-    </q-splitter>
+      </q-card-section>
+    </q-card-section>
   </q-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 79vh;
+  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>