diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 18e1cf255..94b84afc0 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",
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..35658b8c0
--- /dev/null
+++ b/src/modules/17_acting/views/main.vue
@@ -0,0 +1,626 @@
+<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";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogRemove,
+  success,
+} = 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: "นางอัจฉรา ศรีปริวาทิน",
+  },
+  {
+    id: "2",
+    posMasterNo: "สกก.1",
+    positionName: "นักบริหาร",
+    posTypeName: "บริหาร",
+    posLevelName: "สูง",
+    positionIsSelected: "นางศรีปริวาทิน",
+  },
+  {
+    id: "3",
+    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 reqMaster = reactive({
+  isAll: false,
+  keyword: "",
+});
+
+function selectPosition(data: any) {
+  const test = rowPosition.value.filter((e) => e.id !== data.id);
+  rowListPerson.value.push(data);
+  rowPosition.value = test;
+}
+
+/** รายชื่อคนรักษาการ*/
+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) {}
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    const test = rowListPerson.value.filter((e: any) => e.id !== id);
+    rowListPerson.value = test;
+  });
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+onMounted(() => {
+  fetchOrganizationActive();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    รักษาการในตำแหน่ง
+  </div>
+  <q-card style="height: 100%">
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+      <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.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: 70vh"
+        >
+          <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)"
+                          >
+                            <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">
+              <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-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>
+                              {{ 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-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
+  </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>