From 81b6889eb01716cf66651f91679e9cd728c904cb Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 18 Jun 2024 16:42:40 +0700
Subject: [PATCH 01/11] =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=83=E0=B8=99=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=20=3D>?=
 =?UTF-8?q?=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts   |   7 +
 src/modules/17_acting/router.ts      |  14 +
 src/modules/17_acting/views/main.vue | 626 ++++++++++++++++++++++++++
 src/router/index.ts                  |   2 +
 src/views/TestManagement.vue         | 631 +++++++++++++++++++++++----
 5 files changed, 1203 insertions(+), 77 deletions(-)
 create mode 100644 src/modules/17_acting/router.ts
 create mode 100644 src/modules/17_acting/views/main.vue

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>

From 13370f2b706f4f45d8344490ee21c53ba8f00659 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 18 Jun 2024 17:30:51 +0700
Subject: [PATCH 02/11] updated

---
 src/modules/17_acting/views/main.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/17_acting/views/main.vue b/src/modules/17_acting/views/main.vue
index 35658b8c0..191a1a463 100644
--- a/src/modules/17_acting/views/main.vue
+++ b/src/modules/17_acting/views/main.vue
@@ -361,7 +361,7 @@ onMounted(() => {
         <q-card-section
           v-if="nodeId"
           class="col-lg-9 col-md-8 col-xs-12 scroll"
-          style="height: 70vh"
+          style="height: 80vh"
         >
           <div class="column q-col-gutter-sm">
             <div class="col">
@@ -598,12 +598,12 @@ onMounted(() => {
           </div>
         </q-card-section>
       </q-card-section>
-      <q-separator />
+      <!-- <q-separator />
       <q-card-actions align="right">
         <q-btn label="บันทึก" color="secondary" type="submit"
           ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
         >
-      </q-card-actions>
+      </q-card-actions> -->
     </q-form>
   </q-card>
 </template>

From 8ed23a95a96a0497b46a49dbe87f16375ef2c482 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Jun 2024 10:11:32 +0700
Subject: [PATCH 03/11] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B9=80?=
 =?UTF-8?q?=E0=B8=81=E0=B9=88=E0=B8=B2=20=3D>=20=E0=B9=80=E0=B8=9E?=
 =?UTF-8?q?=E0=B8=B4=E0=B9=88=E0=B8=A1=20template=20=E0=B8=95=E0=B8=B3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/04_registry/stores/salary.ts | 4 ++++
 1 file changed, 4 insertions(+)

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>([

From 85de8eba4f58476fab0e26fb92d8d4659589a6fd Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 19 Jun 2024 11:43:34 +0700
Subject: [PATCH 04/11] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=E0=B8=A3=E0=B8=B0=E0=B8=94=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9D=E0=B9=88=E0=B8=B2=E0=B8=A2/=E0=B8=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=87=E0=B8=B2=E0=B8=99=20"?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=B5=E0=B8=94=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=E0=B9=80=E0=B8=9E=E0=B8=A5=E0=B8=B4=E0=B8=87=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B0=E0=B8=81=E0=B8=B9=E0=B9=89=E0=B8=A0=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=A2"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_organizationalNew/components/DialogFormAgency.vue      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index 30f625473..cce3791da 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -303,6 +303,10 @@ function selectOrgLevele(val: string, status: boolean = true) {
           name: "กลุ่มงาน",
           id: "WORK",
         },
+        {
+          name: "สถานีดับเพลิงและกู้ภัย",
+          id: "FIRESTATION",
+        },
       ];
 
     default:

From 36ac4e7807d583d69347309b3afbc50be777fec6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 19 Jun 2024 15:51:15 +0700
Subject: [PATCH 05/11] KPI => report

---
 src/modules/14_KPI/views/report.vue | 261 +++++++++++++++++++++-------
 1 file changed, 195 insertions(+), 66 deletions(-)

diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 4cbb751f5..e438463dd 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -21,6 +21,48 @@ 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: "รายงานแผนพัฒนาการปฏิบัติราชการรายบุคคล",
+  },
+]);
+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 +154,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 +186,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);
@@ -184,60 +240,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 +255,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 +300,135 @@ 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'
+          "
+        >
+          <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;
         "

From 8d438e9bc76bb4deb26cd65f7a45f6e4d3e8505d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 20 Jun 2024 09:45:58 +0700
Subject: [PATCH 06/11] updated report kpi

---
 src/interface/request/main/main.ts  |  2 +-
 src/modules/14_KPI/views/report.vue | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 94b84afc0..8d89da985 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -568,7 +568,7 @@ const menuList = readonly<any[]>([
         role: "evaluateKPI",
       },
       {
-        label: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
+        label: "รายงาน",
         path: "KPIReport",
         role: "evaluateKPI",
       },
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index e438463dd..363c57f73 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -25,15 +25,15 @@ const typeReport = ref<string>("");
 const listReportMain = ref<DataOption[]>([
   {
     id: "1",
-    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล",
+    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงจำนวนผู้มีผลการประเมินระดับต่างๆ ในแต่ละรอบการประเมินรายหน่วยงาน/ส่วนราชการ",
   },
   {
     id: "2",
-    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล",
+    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผู้มีผลการประเมินระดับต่างๆ รายหน่วยงาน/ส่วนราชการ ",
   },
   {
     id: "3",
-    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล",
+    name: "รายงานสรุปผลการประเมินผลการปฏิบัติราชการระดับบุคคล แสดงรายละเอียดผลการประเมินของผู้ใต้บังคับบัญชา",
   },
   {
     id: "4",
@@ -55,6 +55,10 @@ const listReportMain = ref<DataOption[]>([
     id: "8",
     name: "รายงานแผนพัฒนาการปฏิบัติราชการรายบุคคล",
   },
+  {
+    id: "9",
+    name: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
+  },
 ]);
 const listReport = ref<DataOption[]>([]);
 const searchField = ref<string>("fullName");
@@ -215,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);
 }
 
@@ -311,7 +317,8 @@ onMounted(() => {
             typeReport === '1' ||
             typeReport === '2' ||
             typeReport === '3' ||
-            typeReport === '7'
+            typeReport === '7' ||
+            typeReport === '9'
           "
         >
           <datepicker

From 4c0c0551f8ce4212c11bb7bc3bde1bdf4862e7ac Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 20 Jun 2024 11:44:17 +0700
Subject: [PATCH 07/11] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AA=E0=B8=96?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=B0=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |  4 +-
 .../components/DialogFormAgency.vue           | 17 +++----
 .../components/probation/MainProbation.vue    | 45 +++++++++++--------
 3 files changed, 37 insertions(+), 29 deletions(-)

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/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index cce3791da..167b0f1c5 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -61,7 +61,10 @@ const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
 ]);
 
-const orgLevelSubOptionMain = ref<DataOption[]>([]);
+const orgLevelSubOptionMain = ref<DataOption[]>([
+  { name: "สำนัก/สำนักงาน", id: "OFFICER" },
+  { name: "สำนักงานเขต", id: "DISTRICT" },
+]);
 
 const orgLevelOption = ref<DataOption[]>([]);
 
@@ -143,8 +146,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 : "",
@@ -276,7 +278,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
   switch (val) {
     case "OFFICE":
       orgLevelSubOptionMain.value = [
-        { name: "ระดับกอง", id: "DIVISION" },
+        { name: "กอง", id: "DIVISION" },
         {
           name: "สำนักงาน",
           id: "OFFICE",
@@ -289,7 +291,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
       break;
     case "DIVISION":
       orgLevelSubOptionMain.value = [
-        { name: "ระดับส่วน", id: "SECTION" },
+        { name: "ส่วน", id: "SECTION" },
         {
           name: "กลุ่มภารกิจ",
           id: "MISSION",
@@ -298,7 +300,7 @@ function selectOrgLevele(val: string, status: boolean = true) {
 
     case "SECTION":
       orgLevelSubOptionMain.value = [
-        { name: "ระดับฝ่าย", id: "FACTION" },
+        { name: "ฝ่าย", id: "FACTION" },
         {
           name: "กลุ่มงาน",
           id: "WORK",
@@ -419,9 +421,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/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);

From 50d4d8e35181610a77b8130c4446fcd00f4e9a4a Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 20 Jun 2024 12:14:52 +0700
Subject: [PATCH 08/11] fixing bug

---
 .../components/DialogFormAgency.vue                    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index 167b0f1c5..b12cfcff2 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -219,8 +219,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 =
@@ -276,6 +276,12 @@ const tittleName = computed(() => {
 function selectOrgLevele(val: string, status: boolean = true) {
   formData.orgLevelSub = status ? "" : formData.orgLevelSub;
   switch (val) {
+    case "DEPARTMENT":
+      orgLevelSubOptionMain.value = [
+        { name: "สำนัก/สำนักงาน", id: "OFFICER" },
+        { name: "สำนักงานเขต", id: "DISTRICT" },
+      ];
+      break;
     case "OFFICE":
       orgLevelSubOptionMain.value = [
         { name: "กอง", id: "DIVISION" },

From d002599a69b21839525ed59db107b662533a422a Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 20 Jun 2024 14:48:32 +0700
Subject: [PATCH 09/11] fixing

---
 .../components/DialogFormAgency.vue                    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index b12cfcff2..5859b367a 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -61,10 +61,7 @@ const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
 ]);
 
-const orgLevelSubOptionMain = ref<DataOption[]>([
-  { name: "สำนัก/สำนักงาน", id: "OFFICER" },
-  { name: "สำนักงานเขต", id: "DISTRICT" },
-]);
+const orgLevelSubOptionMain = ref<DataOption[]>([]);
 
 const orgLevelOption = ref<DataOption[]>([]);
 
@@ -240,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;
@@ -278,7 +277,8 @@ function selectOrgLevele(val: string, status: boolean = true) {
   switch (val) {
     case "DEPARTMENT":
       orgLevelSubOptionMain.value = [
-        { name: "สำนัก/สำนักงาน", id: "OFFICER" },
+        { name: "สำนัก", id: "BUREAU" },
+        { name: "สำนักงาน", id: "OFFICE" },
         { name: "สำนักงานเขต", id: "DISTRICT" },
       ];
       break;

From 88500038364706e75239a4b5bf39c5c9042ab779 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 20 Jun 2024 14:48:49 +0700
Subject: [PATCH 10/11] =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=83=E0=B8=99=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=20=3D>?=
 =?UTF-8?q?=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   6 +
 src/modules/17_acting/interface/index/Main.ts |  10 +
 .../17_acting/interface/request/Main.ts       |   1 +
 .../17_acting/interface/response/Main.ts      |  35 +
 src/modules/17_acting/views/main.vue          | 853 ++++++++----------
 5 files changed, 452 insertions(+), 453 deletions(-)
 create mode 100644 src/modules/17_acting/interface/index/Main.ts
 create mode 100644 src/modules/17_acting/interface/request/Main.ts
 create mode 100644 src/modules/17_acting/interface/response/Main.ts

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/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/views/main.vue b/src/modules/17_acting/views/main.vue
index 191a1a463..7fc257311 100644
--- a/src/modules/17_acting/views/main.vue
+++ b/src/modules/17_acting/views/main.vue
@@ -6,26 +6,25 @@ 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,
-  dialogConfirm,
-  dialogRemove,
-  success,
-} = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogRemove } =
+  useCounterMixin();
 
 /** โครงสร้าง*/
 const expanded = ref<Array<string>>([]);
 const filter = ref<string>("");
-const nodeTree = ref<any[]>([]);
-const nodeId = ref<string>("");
+const nodeTree = ref<DataTree[]>([]);
+const posmasterId = ref<string>("");
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
 function fetchOrganizationActive() {
@@ -51,23 +50,10 @@ function fetchOrganizationActive() {
 function fetchOrganization(id: string) {
   showLoader();
   http
-    .get(config.API.orgByid(id.toString()))
+    .get(config.API.orgAct + `/${id}`)
     .then((res) => {
       const data = res.data.result;
-      nodeTree.value = data.map((e: any) => ({
-        ...e,
-        owner: [
-          {
-            name: "นางอัจฉรา ศรีปริวาทิน",
-            pos: "หัวหน้า",
-          },
-          {
-            name: "นางศรีปริวาทิน",
-            pos: "รองหัวหน้า",
-          },
-        ],
-      }));
-      console.log(nodeTree.value);
+      nodeTree.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -77,133 +63,20 @@ function fetchOrganization(id: string) {
     });
 }
 
-function updateSelected(data: any) {
-  nodeId.value = data;
+async function updateSelected(data: PosMaster) {
+  posmasterId.value = data.posmasterId;
+  await Promise.all([fetchPosMaster(), fetchListAct()]);
 }
 
 /** ตำแหน่ง*/
-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"]>([
+const rowPosition = ref<ListPerson[]>([]);
+const columns = 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,
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -220,60 +93,145 @@ const columnsPerson = ref<QTableProps["columns"]>([
     name: "name",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    field: "name",
+    field(row) {
+      return `${row.prefix}${row.firstName}  ${row.lastName}`;
+    },
     sortable: false,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posMasterNo",
+    name: "posNo",
     align: "left",
     label: "ตำแหน่งเลขที่",
     sortable: false,
-    field: "posMasterNo",
+    field: "posNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "positionName",
+    name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: false,
-    field: "positionName",
+    field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posTypeName",
+    name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
     sortable: false,
-    field: "posTypeName",
+    field: "posType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "posLevelName",
+    name: "posLevel",
     align: "left",
     label: "ระดับ",
     sortable: false,
-    field: "posLevelName",
+    field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
+const keyword = ref<string>("");
 
-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 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 onSubmit() {
-  dialogConfirm($q, () => {});
+/**
+ * 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(() => {
@@ -286,99 +244,96 @@ onMounted(() => {
     รักษาการในตำแหน่ง
   </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>
+    <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>
-                </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-item>
+            </template>
 
-        <q-separator :vertical="$q.screen.gt.xs" />
+            <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-card-section
-          v-if="nodeId"
-          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
+      <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="แสดงตำแหน่งทั้งหมด"
@@ -388,62 +343,61 @@ onMounted(() => {
                             >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</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">
+                      <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"
@@ -455,156 +409,149 @@ onMounted(() => {
                           direction-links
                         ></q-pagination>
                       </template> -->
-                    </d-table>
-                  </div>
+                  </d-table>
                 </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>
           </div>
-        </q-card-section>
+          <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-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-section>
   </q-card>
 </template>
 

From db0bdd161ec3f042685977b61ddcb5261ffba160 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 20 Jun 2024 17:03:16 +0700
Subject: [PATCH 11/11] fixing org

---
 .../02_organizationalNew/components/DialogFormAgency.vue      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/modules/02_organizationalNew/components/DialogFormAgency.vue b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
index 5859b367a..3ca95bea3 100644
--- a/src/modules/02_organizationalNew/components/DialogFormAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormAgency.vue
@@ -315,6 +315,10 @@ function selectOrgLevele(val: string, status: boolean = true) {
           name: "สถานีดับเพลิงและกู้ภัย",
           id: "FIRESTATION",
         },
+        {
+          name: "โรงเรียน",
+          id: "SCHOOL",
+        },
       ];
 
     default: