ค้นหาข้อมูลทะเบียนประวัติผู้พ้นจากราชการ

src/modules/04_registryPerson/router.ts

@@ -1,6 +1,8 @@
 // ค้นหาข้อมูลทะเบียนประวัติ
 const listPage = () => import("@/modules/04_registryPerson/views/listView.vue");
 
+const listPageRetire  = () => import('@/modules/04_registryPerson/views/listRetire.vue')
+
 // ทะเบียนประวัติ
 const detailPage = () =>
   import("@/modules/04_registryPerson/views/detailView.vue");
@@ -34,6 +36,26 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/registry-retire-officer",
+    name: "registryRetireOfficer",
+    component: listPageRetire,
+    meta: {
+      Auth: true,
+      Key: "SYS_REGISTRY_RETIRE_OFFICER",
+      Role: "STAFF",
+    },
+  },
+  {
+    path: "/registry-retire-employee",
+    name: "registryRetireEmployee",
+    component: listPageRetire,
+    meta: {
+      Auth: true,
+      Key: "SYS_REGISTRY_RETIRE_EMP",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/registry-officer/:id",
     name: "registryNewByid",

src/modules/04_registryPerson/views/listRetire.vue

@@ -0,0 +1,956 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch, defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import avatar from "@/assets/avatar_user.jpg";
+import { useStructureTree } from "@/stores/structureTree";
+
+/** importType*/
+import type {
+  DataNodeData,
+  QueryParams,
+} from "@/modules/04_registryPerson/interface/request/Main";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataStructureTree } from "@/interface/main";
+import type {
+  DataPerson,
+  DataType,
+} from "@/modules/04_registryPerson/interface/response/Main";
+
+/** importComponents*/
+const TableView = defineAsyncComponent(
+  () => import("@/modules/04_registryPerson/components/TableView.vue")
+);
+import DialogHeader from "@/components/DialogHeader.vue";
+import LoadView from "@/components/LoadView.vue";
+
+const $q = useQuasar();
+const store = useRegistryNewDataStore();
+const { fetchStructureTree } = useStructureTree();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const route = useRoute();
+const router = useRouter();
+
+const empType = ref<string>(
+  route.name == "registryRetireOfficer" ? "officer" : "employee"
+); // officer / employee / perm
+const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
+const maxPage = ref<number>(1); //จำนวนหน้า
+const total = ref<number>(0); //จำนวนข้อมูล
+const isShowBtnFilter = ref<boolean>(false);
+
+const filterMain = ref<string>(""); //หน่วยงาน/ส่วนราชการ
+const node = ref<DataStructureTree[]>([]); //รายการโครางสร้าง
+const expanded = ref<string[]>([]); //แสดงข้อมูลในโครงสร้าง
+
+const selectNode = ref<boolean>(false); //แสดงโครงสร้าง
+
+const isLoad = ref<boolean>(true); //โหลดข้อมูลโครงสร้าง
+const nodeData = reactive<DataNodeData>({
+  name: "เลือกหน่วยงาน/ส่วนราชการ",
+  nodeId: null,
+  node: null,
+});
+
+/** function เรียกข้อมูลตำแหน่งประเภท*/
+function fetchType() {
+  http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      store.fetchType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function เรียกข้อมูลกลุ่มงาน*/
+function fetchOptionGroup() {
+  http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      store.fetchType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/** function fetch รายชื่อข้อมูลทะเบียนประวัติ*/
+async function fetchDataPerson() {
+  showLoader();
+  dataPersonMain.value = [];
+  let queryParams: QueryParams = {
+    page: store.formFilter.page,
+    pageSize: store.formFilter.pageSize,
+  };
+
+  if (store.formFilter.keyword) {
+    queryParams = Object.assign({}, queryParams, {
+      searchField: store.formFilter.searchType,
+      searchKeyword: store.formFilter.keyword.trim(),
+    });
+  }
+
+  if (store.labelOption.posLevel != "ทั้งหมด") {
+    queryParams = Object.assign({}, queryParams, {
+      posLevel: store.labelOption.posLevel,
+    });
+  }
+
+  if (store.labelOption.posType != "ทั้งหมด") {
+    queryParams = Object.assign({}, queryParams, {
+      posType: store.labelOption.posType,
+    });
+  }
+
+  if (store.formFilter.isProbation != null) {
+    queryParams.isProbation = store.formFilter.isProbation;
+  }
+
+  if (store.formFilter.isShowRetire != null) {
+    queryParams.isRetire = store.formFilter.isShowRetire;
+    queryParams.retireType = queryParams.isRetire
+      ? store.formFilter.retireType
+      : undefined;
+  }
+
+  if (empType.value !== "officer") {
+    queryParams.type = empType.value;
+  }
+
+  if (store.formFilter.node !== null && store.formFilter.nodeId !== null) {
+    queryParams.node = store.formFilter.node;
+    queryParams.nodeId = store.formFilter.nodeId;
+  }
+
+  if (store.formFilter.nodeId) {
+    queryParams.isAll = store.formFilter.isAll;
+  }
+
+  if (store.formFilter.dateAppoint) {
+    queryParams.sortBy =
+      empType.value !== "officer"
+        ? "profileEmployee.dateAppoint"
+        : "profile.dateAppoint";
+    queryParams.sort = store.formFilter.dateAppoint;
+  }
+
+  await http
+    .get(
+      config.API.registryNewLeave(empType.value !== "officer" ? "-employee" : ""),
+      { params: queryParams }
+    )
+    .then(async (res) => {
+      const dataList = await res.data.result.data;
+      dataPersonMain.value = dataList;
+
+      maxPage.value = Math.ceil(
+        res.data.result.total / store.formFilter.pageSize
+      );
+      total.value = res.data.result.total;
+      isShowBtnFilter.value = true;
+      if (dataList) {
+        insertAvatar(dataList).then(() => {
+          hideLoader();
+        });
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+/**
+ * function fetch รูปโปรไฟล์
+ * @param items ข้อมูลคน
+ */
+async function insertAvatar(items: DataPerson[]) {
+  await Promise.all(
+    items.map(async (x: DataPerson, index: number) => {
+      try {
+        if (x.avatarName != null) {
+          const img = await http.get(
+            config.API.fileByFile(
+              "ทะเบียนประวัติ",
+              "โปรไฟล์",
+              x.id,
+              x.avatarName
+            )
+          );
+          dataPersonMain.value[index] = {
+            ...x,
+            avatar: img.data.downloadUrl,
+          };
+        } else {
+          dataPersonMain.value[index] = {
+            ...x,
+            avatar: avatar,
+          };
+        }
+      } catch (error) {
+        dataPersonMain.value[index] = {
+          ...x,
+          avatar: avatar,
+        };
+      }
+    })
+  );
+}
+
+/** funciotn ค้นหาข้อมูล */
+function onclickSearch() {
+  store.formFilter.page = 1;
+  store.formFilter.keyword =
+    store.formFilter.keyword === null ? "" : store.formFilter.keyword;
+  fetchDataPerson();
+}
+
+/**
+ * function เลือกประเภทข้าราชการ
+ * @param item ประเภทข้าราชการ
+ */
+function selectType() {
+  store.formFilter.isShowRetire = true;
+  store.labelOption.retireType = "ทั้งหมด";
+  store.formFilter.retireType = null;
+  store.formFilter.keyword = "";
+  if (empType.value !== "officer") {
+    store.formFilter.isProbation = null;
+    fetchOptionGroup();
+  } else {
+    store.formFilter.isProbation = false;
+    fetchType();
+  }
+
+  // เช็ค store ถ้าเปลี่ยนประเภททะเบียนประวัติ ให้ล่างค่า filter ใหม่
+  if (store.formFilter.type != empType.value) {
+    store.labelOption.posType = "ทั้งหมด";
+    store.labelOption.posLevel = "ทั้งหมด";
+    store.labelOption.sortName = "ลำดับการแสดงผล";
+    store.formFilter.type = empType.value;
+    store.formFilter.dateAppoint = "";
+    store.labelOption.node =
+      empType.value === "officer"
+        ? "เลือกหน่วยงาน/ส่วนราชการ"
+        : "เลือกหน่วยงาน";
+    store.formFilter.searchType = "fullName";
+  } else {
+    // แต่ถ้าประเภทเดิมระบบจะใช้ filter เดิมที่เคยค้นหาไว้
+    if (
+      store.formFilter.keyword != "" ||
+      store.labelOption.posType != "ทั้งหมด" ||
+      store.labelOption.posLevel != "ทั้งหมด" ||
+      store.formFilter.isShowRetire ||
+      store.formFilter.isProbation ||
+      store.formFilter.nodeId != null ||
+      store.formFilter.dateAppoint != ""
+    ) {
+      store.formFilter.page = 1;
+      fetchDataPerson();
+    }
+  }
+}
+
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param item ประเภทตำแหน่ง
+ */
+function selectPosType(item: DataOption) {
+  const dataType = store.posTypeMain.find((e: DataType) => e.id === item.id);
+  const shortName =
+    empType.value === "officer" ? "" : dataType?.posTypeShortName;
+
+  store.fetchLevel(dataType?.posLevels, shortName);
+  store.labelOption.posType = item.name;
+  store.labelOption.posLevel = "ทั้งหมด";
+  store.formFilter.page = 1;
+  fetchDataPerson();
+}
+
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param item ประเภทระดับ
+ */
+function selectPosLevel(item: DataOption) {
+  store.labelOption.posLevel = item.name;
+  store.formFilter.page = 1;
+  fetchDataPerson();
+}
+
+/**
+ * function เลือกประเภทตำแหน่ง
+ * @param item ประเภทระดับ
+ */
+function selectRetireType(item: DataOption) {
+  store.labelOption.retireType = item.name;
+  store.formFilter.page = 1;
+  store.formFilter.retireType = item.id;
+  fetchDataPerson();
+}
+
+function selectDisplayOrderType(item: DataOption) {
+  store.labelOption.sortName = item.name;
+  store.formFilter.page = 1;
+  store.formFilter.dateAppoint = item.id;
+  fetchDataPerson();
+}
+
+/**
+ * function เคลีย์ตัวเลือก
+ * @param t ประเภทตัวเลือก
+ */
+function clearSelect(t: string) {
+  if (t === "posType") {
+    store.labelOption.posType = "ทั้งหมด";
+    store.labelOption.posLevel = "ทั้งหมด";
+  } else if (t === "posLevel") {
+    store.labelOption.posLevel = "ทั้งหมด";
+  } else if (t === "retireYear") {
+    store.labelOption.retireYear = "";
+  } else if (t === "rangeYear") {
+    store.formFilter.rangeYear.min = 0;
+    store.formFilter.rangeYear.max = 60;
+  } else if (t === "org") {
+    nodeData.node = null;
+    nodeData.nodeId = null;
+    store.formFilter.node = null;
+    store.formFilter.nodeId = null;
+    store.labelOption.node =
+      empType.value === "officer"
+        ? "เลือกหน่วยงาน/ส่วนราชการ"
+        : "เลือกหน่วยงาน";
+  } else if (t === "retireType") {
+    store.labelOption.retireType = "ทั้งหมด";
+    store.formFilter.retireType = null;
+  }
+  store.formFilter.page = 1;
+  fetchDataPerson();
+}
+
+/** ฟังก์ชันดึงข้อโครงสร้าง*/
+async function fetchTree() {
+  const data = await fetchStructureTree(route.meta.Key as string);
+  if (store.routerName !== route.name) {
+    store.formFilter.node = null;
+    store.formFilter.nodeId = null;
+    store.routerName = route.name ? route.name : "";
+  }
+  if (data) {
+    isLoad.value = false;
+    node.value = data;
+    // hideLoader();
+  }
+}
+
+/** ค้นหาข้อมูลรายชื่อข้อมูลทะเบียนประวัติตามหน่วยงาน/ส่วนราชการ*/
+function sendNode() {
+  nodeData.node = store.formFilter.node;
+  nodeData.nodeId = store.formFilter.nodeId;
+  store.labelOption.node = nodeData.name;
+  selectNode.value = false;
+  fetchDataPerson();
+}
+
+/**
+ * ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
+ * @param data  ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
+ * เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
+ */
+function updateSelectedTreeMain(data: DataStructureTree) {
+  if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
+    store.formFilter.node = null;
+    store.formFilter.nodeId = null;
+    nodeData.name =
+      empType.value === "officer"
+        ? "เลือกหน่วยงาน/ส่วนราชการ"
+        : "เลือกหน่วยงาน";
+  } else {
+    store.formFilter.node = data.orgLevel;
+    store.formFilter.nodeId = data.orgTreeId;
+    nodeData.name = data.orgName;
+  }
+}
+
+/** callback function เมื่อมีการเปิด popup*/
+watch(selectNode, () => {
+  if (selectNode.value) {
+    isLoad.value = node.value.length !== 0 ? false : true;
+  }
+});
+
+function getSearch() {
+  store.formFilter.page = 1;
+  fetchDataPerson();
+}
+
+function goToAdvancedSearch() {
+  router.push("/report/registry");
+}
+
+/** hook เมื่อมีการเรียกใช้ Components*/
+onMounted(async () => {
+  await Promise.all([selectType(), fetchTree()]);
+});
+</script>
+
+<template>
+  <q-card class="q-mt-md">
+    <q-card-section class="card-img q-pb-lg">
+      <div class="text-h5 text-center q-py-md text-weight-medium">
+        ค้นหาข้อมูลทะเบียนประวัติผู้พ้นจากราชการ
+        {{
+          empType === "officer" ? "ข้าราชการ กทม. สามัญ" : "ลูกจ้างประจำ กทม."
+        }}
+      </div>
+      <div class="row justify-center">
+        <div
+          class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
+        >
+          <q-form @submit="onclickSearch">
+            <div class="bg-white row col-12 q-pa-none rounded-borders">
+              <div class="row col-11">
+                <div class="col-3 row wrap">
+                  <q-select
+                    borderless
+                    bg-color="white"
+                    v-model="store.formFilter.searchType"
+                    :options="store.searchTypeOption"
+                    emit-value
+                    dense
+                    emit-option
+                    option-label="name"
+                    option-value="id"
+                    map-options
+                    class="selectS col-11 q-px-md"
+                    color="deep-orange"
+                    dropdown-icon="mdi-chevron-down"
+                  />
+                  <q-separator vertical />
+                </div>
+                <q-input
+                  borderless
+                  dense
+                  bg-color="white"
+                  v-model="store.formFilter.keyword"
+                  clearable
+                  placeholder="ค้นหา"
+                  class="col-9 q-pr-md"
+                  @clear="store.formFilter.keyword = ''"
+                >
+                  <template v-slot:before>
+                    <q-icon name="search" color="deep-orange" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="row col-1">
+                <q-btn
+                  class="fit btnSearch"
+                  unelevated
+                  color="deep-orange"
+                  label="ค้นหา"
+                  type="submit"
+                />
+              </div>
+            </div>
+          </q-form>
+
+          <div class="row">
+            <div class="col-10">
+              <div class="row q-mt-sm q-gutter-sm">
+                <q-btn-dropdown
+                  flat
+                  rounded
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-pl-sm"
+                  @click="() => (selectNode = true)"
+                >
+                  <template v-slot:label>
+                    {{
+                      `${
+                        store.labelOption.node !== "เลือกหน่วยงาน"
+                          ? store.labelOption.node
+                          : empType === "officer"
+                          ? "เลือกหน่วยงาน/ส่วนราชการ"
+                          : "เลือกหน่วยงาน"
+                      }`
+                    }}
+                    <q-btn
+                      v-if="
+                        store.labelOption.node !== 'เลือกหน่วยงาน' &&
+                        store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
+                      "
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('org')"
+                    />
+                  </template>
+                </q-btn-dropdown>
+
+                <q-toggle
+                  v-if="store.formFilter.nodeId"
+                  v-model="store.formFilter.isAll"
+                  color="primary"
+                  label="แสดงทุกตำแหน่ง"
+                  class="q-pr-sm"
+                  @update:model-value="getSearch"
+                >
+                  <q-tooltip
+                    >แสดงทุกตำแหน่งที่อยู่ภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                  >
+                </q-toggle>
+
+                <q-separator inset vertical class="lineFil" />
+
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                >
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.posType !== "ทั้งหมด"
+                        ? store.labelOption.posType
+                        : empType === "officer"
+                        ? `ตำแหน่งประเภท${store.labelOption.posType}`
+                        : `กลุ่มงาน${store.labelOption.posType}`
+                    }}
+                    <q-btn
+                      v-if="store.labelOption.posType !== 'ทั้งหมด'"
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('posType')"
+                    />
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.posTypeOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectPosType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+
+                <!-- <q-separator inset vertical class="lineFil" /> -->
+                <q-btn-dropdown
+                  flat
+                  dense
+                  rounded
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                  :disable="
+                    store.labelOption.posType === 'ทั้งหมด' ? true : false
+                  "
+                >
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.posLevel !== "ทั้งหมด"
+                        ? store.labelOption.posLevel
+                        : empType === "officer"
+                        ? `ระดับ${store.labelOption.posLevel}`
+                        : `ระดับชั้นงาน${store.labelOption.posLevel}`
+                    }}
+                    <q-btn
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
+                      @click.stop.prevent="clearSelect('posLevel')"
+                    />
+                  </template>
+                  <q-list
+                    :style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
+                  >
+                    <q-item
+                      v-for="(item, index) in store.posLevelOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectPosLevel(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+
+                <q-space />
+
+                <!-- <q-separator
+                  inset
+                  vertical
+                  class="lineFil"
+                  v-if="empType !== 'officer' && store.formFilter.nodeId"
+                /> -->
+
+                <!-- <q-toggle
+                  v-if="empType !== 'officer' && store.formFilter.nodeId"
+                  v-model="store.formFilter.isAll"
+                  color="primary"
+                  label="แสดงตำแหน่งทั้งหมด"
+                  @update:model-value="getSearch"
+                /> -->
+              </div>
+
+              <div
+                class="row q-gutter-sm justify-start"
+                v-if="empType !== 'officer'"
+              >
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                >
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.retireType !== "ทั้งหมด"
+                        ? store.labelOption.retireType
+                        : `เหตุผลการพ้นจากราชการทั้งหมด`
+                    }}
+                    <q-btn
+                      v-if="store.labelOption.retireType !== 'ทั้งหมด'"
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('retireType')"
+                    />
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.retireTypeEmpOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectRetireType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+
+                <q-separator inset vertical class="lineFil" />
+
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                >
+                  <template v-slot:label>
+                    {{
+                      `ลำดับการแสดผล ${
+                        store.formFilter.dateAppoint
+                          ? store.formFilter.dateAppoint === "ASC"
+                            ? "เก่า-ล่าสุด"
+                            : "ล่าสุด-เก่า"
+                          : ""
+                      }`
+                    }}
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.displayOrderOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectDisplayOrderType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </div>
+
+              <div
+                v-if="empType === 'officer'"
+                class="row q-gutter-sm justify-start"
+              >
+                <q-toggle
+                  v-model="store.formFilter.isProbation"
+                  color="primary"
+                  label="ทดลองปฏิบัติหน้าที่ราชการ"
+                  class="q-pr-sm"
+                  @update:model-value="getSearch"
+                />
+
+                <q-separator inset vertical class="lineFil" />
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                >
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.retireType !== "ทั้งหมด"
+                        ? store.labelOption.retireType
+                        : `เหตุผลการพ้นจากราชการทั้งหมด`
+                    }}
+                    <q-btn
+                      v-if="store.labelOption.retireType !== 'ทั้งหมด'"
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('retireType')"
+                    />
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.retireTypeOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectRetireType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+
+                <q-separator inset vertical class="lineFil" />
+
+                <!-- <q-toggle
+                  v-if="store.formFilter.nodeId"
+                  v-model="store.formFilter.isAll"
+                  color="primary"
+                  label="แสดงตำแหน่งทั้งหมด"
+                  @update:model-value="getSearch"
+                /> -->
+
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                >
+                  <template v-slot:label>
+                    {{ store.labelOption.sortName }}
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.displayOrderOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectDisplayOrderType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </div>
+            </div>
+            <div class="col-2">
+              <div class="q-pt-sm flex justify-end">
+                <q-btn
+                  flat
+                  @click="goToAdvancedSearch"
+                  class="text-white"
+                  style="text-decoration: underline"
+                  label="การค้นหาขั้นสูง"
+                >
+                  <q-tooltip
+                    >ไปยังหน้าการค้นหาขั้นสูง (Advanced search)</q-tooltip
+                  >
+                </q-btn>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section>
+      <!-- Components รายการข้อมูลทะเบียนประวัติ -->
+      <!-- v-model:mode="mode" -->
+      <div>
+        <TableView
+          v-model:form-filter="store.formFilter"
+          v-model:max-page="maxPage"
+          :rows="dataPersonMain"
+          :fetch-data="fetchDataPerson"
+          :fetch-type="fetchType"
+          :total="total"
+          :is-filter="isShowBtnFilter"
+          :emp-type="empType"
+        />
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <!-- แสดง dialog เลือกหน่วยงาน/ส่วนราชการ -->
+  <q-dialog v-model="selectNode" persistent>
+    <q-card style="width: 850px; max-width: 80vw">
+      <DialogHeader
+        tittle="เลือกหน่วยงาน/ส่วนราชการ"
+        :close="() => (selectNode = false)"
+      />
+
+      <q-separator />
+
+      <q-card-section class="q-pa-sm">
+        <LoadView v-if="isLoad" />
+        <div class="row q-col-gutter-sm" v-else>
+          <div class="col-12">
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterMain !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filterMain = ''"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <q-tree
+              loading
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filterMain.trim()"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="nodeData.nodeId"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  @click.stop="updateSelectedTreeMain(prop.node)"
+                  :active="store.formFilter.nodeId === prop.node.orgTreeId"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light text-grey-8">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn label="ค้นหา" color="secondary" @click="sendNode">
+          <q-tooltip>ค้นหา</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.card-img {
+  background: url("@/assets/registry-banner.png");
+  background-size: cover;
+  color: white;
+}
+
+:deep(.custom-select.q-field--outlined .q-field__control) {
+  color: white;
+  background-color: #36969f;
+}
+:deep(.custom-select.q-field--outlined .q-field__control::before) {
+  border: 1px solid #fff;
+}
+
+:deep(.custom-btn.q-btn--outline::before) {
+  background-color: #36969f;
+}
+
+.btnSearch {
+  border-radius: 0px 4px 4px 0px;
+}
+.bg-Search {
+  background: #00000015;
+}
+.lineFil {
+  transform: rotate(30deg);
+  height: 20px;
+  margin-top: 15px;
+  background: #ffffff7b !important;
+}
+.selectS .q-field__control .q-field__append .q-icon {
+  color: #ff5722 !important;
+}
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/04_registryPerson/views/listView.vue

@@ -623,55 +623,6 @@ onMounted(async () => {
                 class="row q-gutter-sm justify-start"
                 v-if="empType !== 'officer'"
               >
-                <q-toggle
-                  v-model="store.formFilter.isShowRetire"
-                  color="primary"
-                  label="แสดงข้อมูลผู้พ้นจากราชการ"
-                  class="q-pr-sm"
-                  @update:model-value="getSearch"
-                />
-                <q-btn-dropdown
-                  v-if="store.formFilter.isShowRetire"
-                  rounded
-                  flat
-                  dense
-                  label-color="white"
-                  dropdown-icon="mdi-chevron-down"
-                  class="q-px-sm"
-                >
-                  <template v-slot:label>
-                    {{
-                      store.labelOption.retireType !== "ทั้งหมด"
-                        ? store.labelOption.retireType
-                        : `${store.labelOption.retireType}`
-                    }}
-                    <q-btn
-                      v-if="store.labelOption.retireType !== 'ทั้งหมด'"
-                      size="10px"
-                      flat
-                      round
-                      color="white"
-                      icon="close"
-                      @click.stop.prevent="clearSelect('retireType')"
-                    />
-                  </template>
-                  <q-list>
-                    <q-item
-                      v-for="(item, index) in store.retireTypeEmpOps"
-                      :key="index"
-                      clickable
-                      v-close-popup
-                      @click="selectRetireType(item)"
-                    >
-                      <q-item-section>
-                        <q-item-label>{{ item.name }}</q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-btn-dropdown>
-
-                <q-separator inset vertical class="lineFil" />
-
                 <q-btn-dropdown
                   rounded
                   flat
@@ -721,55 +672,6 @@ onMounted(async () => {
 
                 <q-separator inset vertical class="lineFil" />
 
-                <q-toggle
-                  v-model="store.formFilter.isShowRetire"
-                  color="primary"
-                  label="แสดงข้อมูลผู้พ้นจากราชการ"
-                  class="q-pr-sm"
-                  @update:model-value="getSearch"
-                />
-
-                <q-btn-dropdown
-                  v-if="store.formFilter.isShowRetire"
-                  rounded
-                  flat
-                  dense
-                  label-color="white"
-                  dropdown-icon="mdi-chevron-down"
-                >
-                  <template v-slot:label>
-                    {{
-                      store.labelOption.retireType !== "ทั้งหมด"
-                        ? store.labelOption.retireType
-                        : `${store.labelOption.retireType}`
-                    }}
-                    <q-btn
-                      v-if="store.labelOption.retireType !== 'ทั้งหมด'"
-                      size="10px"
-                      flat
-                      round
-                      color="white"
-                      icon="close"
-                      @click.stop.prevent="clearSelect('retireType')"
-                    />
-                  </template>
-                  <q-list>
-                    <q-item
-                      v-for="(item, index) in store.retireTypeOps"
-                      :key="index"
-                      clickable
-                      v-close-popup
-                      @click="selectRetireType(item)"
-                    >
-                      <q-item-section>
-                        <q-item-label>{{ item.name }}</q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-btn-dropdown>
-
-                <q-separator inset vertical class="lineFil" />
-
                 <!-- <q-toggle
                   v-if="store.formFilter.nodeId"
                   v-model="store.formFilter.isAll"