From 4c2e85b595fa7f27e8d513a67664aa05d6b0eeb5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 21 Feb 2025 17:04:49 +0700
Subject: [PATCH] =?UTF-8?q?filter=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../21_report/components/01_org/DialogOrg.vue |   13 +-
 .../21_report/views/02_reportRegistry.vue     | 1698 +++++++++--------
 2 files changed, 922 insertions(+), 789 deletions(-)

diff --git a/src/modules/21_report/components/01_org/DialogOrg.vue b/src/modules/21_report/components/01_org/DialogOrg.vue
index bb0c75997..84ab98fb3 100644
--- a/src/modules/21_report/components/01_org/DialogOrg.vue
+++ b/src/modules/21_report/components/01_org/DialogOrg.vue
@@ -73,6 +73,15 @@ watch(
   async () => {
     if (modal.value) {
       await fetchTree();
+
+      if (!orgName.value) {
+        nodeData.name = "";
+        nodeData.node = "";
+        nodeData.nodeId = "";
+        store.formFilter.node = null;
+        store.formFilter.nodeId = null;
+        expanded.value = [];
+      }
     }
   }
 );
@@ -143,8 +152,8 @@ watch(
       <q-separator />
 
       <q-card-actions align="right">
-        <q-btn label="ค้นหา" color="secondary" @click="sendNode">
-          <q-tooltip>ค้นหา</q-tooltip></q-btn
+        <q-btn label="เลือก" color="secondary" @click="sendNode">
+          <q-tooltip>เลือก</q-tooltip></q-btn
         >
       </q-card-actions>
     </q-card>
diff --git a/src/modules/21_report/views/02_reportRegistry.vue b/src/modules/21_report/views/02_reportRegistry.vue
index 0b8ca4730..ecaf4cca6 100644
--- a/src/modules/21_report/views/02_reportRegistry.vue
+++ b/src/modules/21_report/views/02_reportRegistry.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, watch, computed } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
-import axios from "axios";
-import genReportXLSX from "@/plugins/genreportxlsx";
 import * as XLSX from "xlsx";
 
 import http from "@/plugins/http";
@@ -11,6 +8,8 @@ import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useReportStore } from "@/modules/21_report/store";
+import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
+
 import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
 import type {
   RangeAge,
@@ -22,11 +21,11 @@ import type {
   DataEducationLevel,
 } from "@/modules/21_report/interface/Main";
 
-import LoadView from "@/components/LoadView.vue";
 import DialogOrg from "@/modules/21_report/components/01_org/DialogOrg.vue";
 
 const $q = useQuasar();
 const storeReport = useReportStore();
+const stroeRegistry = useRegistryNewDataStore();
 
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, date2Thai } = mixin;
@@ -45,9 +44,6 @@ const detailReport = ref<any>();
 /** ช่วงเวลา */
 const dateStart = ref<Date | null>(null); //บรรจุตั้งเเต่วันที่
 const dateEnd = ref<Date | null>(null); //บรรจุถึงวันที่
-const objMarkerLabel = computed(() => {
-  return { 39: `ช่วงอายุ ${rangeAge.value.min}-${rangeAge.value.max} ปี` };
-});
 
 const rangeAge = ref<RangeAge>({
   min: 18,
@@ -92,31 +88,19 @@ const isProbation = ref<boolean>(false);
 const isRetire = ref<boolean>(false);
 
 const pagination = ref<any>({
+  sortBy: "dateAppoint",
+  descending: true,
   page: 1,
   rowsPerPage: 19,
 });
-const sortBy = ref<string>("ASC");
+const sortBy = ref<string>("DESC");
 const retireType = ref<string>("");
 const retireTypeOps = ref<DataOption[]>([]);
-const retireTypeOpsMain = ref<DataOption[]>([
-  { id: "RETIRE", name: "เกษียณ" },
-  { id: "RETIRE_RESIGN", name: "ลาออก" },
-  { id: "RETIRE_DECEASED", name: "ถึงแก่กรรม" },
-  { id: "RETIRE_OUT", name: "ให้ออกจากราชการ" },
-  { id: "DISCIPLINE_RESULT_REMOVE", name: "ปลดออกจากราชการ" },
-  { id: "DISCIPLINE_RESULT_DISMISS", name: "ไล่ออกจากราชการ" },
-  { id: "DISCIPLINE_SUSPEND", name: "ถูกพักจากราชการ" },
-  { id: "PROBATION_REPORT", name: "ไม่ผ่านทดลองงาน" },
-]);
+const retireTypeOpsMain = ref<DataOption[]>(stroeRegistry.retireTypeOps);
 
-const retireTypeOpsMainEMP = ref<DataOption[]>([
-  { id: "RETIRE", name: "เกษียณ" },
-  { id: "RETIRE_RESIGN_EMP", name: "ลาออก" },
-  { id: "RETIRE_DECEASED", name: "ถึงแก่กรรม" },
-  { id: "RETIRE_OUT_EMP", name: "ให้ออกจากราชการ" },
-]);
+const retireTypeOpsMainEMP = ref<DataOption[]>(stroeRegistry.retireTypeEmpOps);
 
-const visibleColumns = ref<string[]>([
+const visibleColumnsBase = ref<string[]>([
   "no",
   "fullName",
   "posNo",
@@ -134,173 +118,184 @@ const visibleColumns = ref<string[]>([
   "lengthPosition",
 ]);
 
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fullName",
-    align: "left",
-    label: "ชื่อ-นามสกุล",
-    sortable: true,
-    field: "fullName",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "ตำแหน่งเลขที่",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่งในสายงาน",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ตำแหน่งประเภท",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับ",
-    sortable: true,
-    field: "posLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "org",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "org",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionExecutive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "gender",
-    align: "left",
-    label: "เพศ",
-    sortable: true,
-    field: "gender",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานภาพ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "education",
-    align: "left",
-    label: "วุฒิการศึกษา",
-    sortable: true,
-    field: "education",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateAppoint",
-    align: "left",
-    label: "วันที่บรรจุ",
-    sortable: true,
-    field: "dateAppoint",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "age",
-    align: "left",
-    label: "อายุ",
-    sortable: true,
-    field: "age",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "currentPosition",
-    align: "left",
-    label: "ระยะเวลาดำรงตำแหน่งปัจจุบัน",
-    sortable: true,
-    field: "currentPosition",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lengthPosition",
-    align: "left",
-    label: "ระยะเวลาดำรงตำแหน่งในเเต่ละระดับ",
-    sortable: true,
-    field: "lengthPosition",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
+const columns = computed<QTableProps["columns"]>(() => {
+  return [
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: true,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "fullName",
+      align: "left",
+      label: "ชื่อ-นามสกุล",
+      sortable: true,
+      field: "fullName",
+      headerStyle: "font-size: 14px; min-width: 200px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "posNo",
+      align: "left",
+      label: "ตำแหน่งเลขที่",
+      sortable: true,
+      field: "posNo",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "position",
+      align: "left",
+      label: employeeClass.value === "officer" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง",
+      sortable: true,
+      field: "position",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "posType",
+      align: "left",
+      label: "ตำแหน่งประเภท",
+      sortable: true,
+      field: "posType",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "posLevel",
+      align: "left",
+      label: "ระดับ",
+      sortable: true,
+      field: "posLevel",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "org",
+      align: "left",
+      label: "สังกัด",
+      sortable: true,
+      field: "org",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "positionExecutive",
+      align: "left",
+      label: "ตำแหน่งทางการบริหาร",
+      sortable: true,
+      field: "positionExecutive",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "gender",
+      align: "left",
+      label: "เพศ",
+      sortable: true,
+      field: "gender",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "status",
+      align: "left",
+      label: "สถานภาพ",
+      sortable: true,
+      field: "status",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "education",
+      align: "left",
+      label: "วุฒิการศึกษา",
+      sortable: true,
+      field: "education",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "dateAppoint",
+      align: "left",
+      label: "วันที่บรรจุ",
+      sortable: true,
+      field: "dateAppoint",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      format(val, row) {
+        return val ? date2Thai(row.dateAppointFull) : "";
+      },
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "age",
+      align: "left",
+      label: "อายุ",
+      sortable: true,
+      field: "age",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "currentPosition",
+      align: "left",
+      label: "ระยะเวลาดำรงตำแหน่งปัจจุบัน",
+      sortable: true,
+      field: "currentPosition",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+      name: "lengthPosition",
+      align: "left",
+      label: "ระยะเวลาดำรงตำแหน่งในเเต่ละระดับ",
+      sortable: true,
+      field: "lengthPosition",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+      sort: (a: string, b: string) =>
+        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+  ];
+});
+
+const visibleColumns = computed<string[]>(() => {
+  return employeeClass.value === "officer"
+    ? visibleColumnsBase.value
+    : visibleColumnsBase.value.filter((e: string) => e !== "positionExecutive");
+});
 
 function onOpenOrg() {
   modalOrg.value = true;
@@ -362,7 +357,6 @@ function filterOption(val: string, update: any, typeOp: string) {
  */
 function updateLevel(val: string) {
   posType.value = val;
-
   if (val) {
     const listData: any = posTypeMainOp.value.find(
       (item: PosType) => item.posTypeName == val
@@ -420,9 +414,7 @@ async function getOptions() {
   });
 }
 
-/**
- * ฟังก์เรียกข้อมูลรายการตำแหน่งทางการบริหาร
- */
+/** ฟังก์เรียกข้อมูลรายการตำแหน่งทางการบริหาร*/
 async function getExecutive() {
   await http
     .get(config.API.orgPosExecutive)
@@ -529,6 +521,7 @@ async function onSearch() {
         status: item.relationship ?? "-",
         education: item.degree ?? "-",
         dateAppoint: item.dateAppoint ? date2Thai(item.dateAppoint) : "-",
+        dateAppointFull: item.dateAppoint,
         age: item.age ?? "-",
         currentPosition: item.currentPosition ?? "-",
         lengthPosition: item.lengthPosition ?? "-",
@@ -547,8 +540,13 @@ async function onSearch() {
 }
 
 function exportToExcel() {
+  const newData = rows.value.map((e: any) => {
+    const { dateAppointFull, ...rest } = e;
+    return rest;
+  });
+
   const headers = columns.value?.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
-  const worksheet = XLSX.utils.json_to_sheet(rows.value, {
+  const worksheet = XLSX.utils.json_to_sheet(newData, {
     header: visibleColumns.value,
   });
 
@@ -556,10 +554,48 @@ function exportToExcel() {
   XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
 
   const workbook = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(workbook, worksheet, "รายงานทะเบียนประวัติ"); //ชื่อไฟล เเละ ชื่อ sheet
-  XLSX.writeFile(workbook, "รายงานทะเบียนประวัติ.xlsx");
+  XLSX.utils.book_append_sheet(workbook, worksheet, `รายงานทะเบียนประวัติ`); //ชื่อไฟล เเละ ชื่อ sheet
+  XLSX.writeFile(
+    workbook,
+    `รายงานทะเบียนประวัติ${
+      employeeClass.value === "officer"
+        ? "(ข้าราชการ กทม. สามัญ)"
+        : "(ลูกจ้างประจำ กทม.)"
+    }.xlsx`
+  );
 }
 
+/** ฟังก์ชันล้างตัวกรองทั้งหมด*/
+function clearFilter() {
+  //สั้งกัด
+  org.value = "";
+  storeReport.formFilter.node = null;
+  storeReport.formFilter.nodeId = null;
+  posType.value = ""; //ประเภทตำแหน่ง, กลุ่มงาน
+  posLevel.value = ""; //ระดับตำแหน่ง, ชั้นงาน
+  position.value = ""; //ตำแหน่งในสายงาน
+  positionExecutive.value = ""; //ตำแหน่งทางการบริหาร
+  gender.value = ""; //เพศ
+  status.value = ""; //สถานภาพ
+  education.value = ""; //วุฒิการศึกษา
+  //ช่วงเวลาบรรจุ
+  dateStart.value = null; //ตั้งแต่วันที่
+  dateEnd.value = null; //ถึงวันที่
+  //ช่วงอายุ
+  rangeAge.value.min = 18;
+  rangeAge.value.max = 60;
+  isProbation.value = false; //ทดลองปฏิบัติราชการ
+  isRetire.value = false; //แสดงผู้พ้นจากราชการ
+  retireType.value = ""; //ประเภมการพ้นราชการ
+}
+
+watch(
+  () => pagination.value.descending,
+  () => {
+    sortBy.value = pagination.value.descending ? "DESC" : "ASC";
+  }
+);
+
 onMounted(async () => {
   showLoader();
   Promise.all([
@@ -569,16 +605,14 @@ onMounted(async () => {
     getDataPerson(),
     getEducationLevel(),
   ])
-    .then(() => {
-      hideLoader();
-    })
+
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
     .finally(() => {
       setTimeout(() => {
         loadingBtn.value = false;
+        hideLoader();
       }, 500);
     });
 });
@@ -589,65 +623,61 @@ onMounted(async () => {
     รายงานทะเบียนประวัติ
   </div>
 
-    <div class="col-12">
-      <q-form
-        greedy
-        @submit.prevent
-        @validation-success="onSearch"
-      >
-        <div class="row col-12 q-gutter-sm">
-          <q-card class="col-12 q-pa-sm">
-            <div class="row col-12 q-col-gutter-sm no-wrap">
-              <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
-                <q-select
-                  outlined
-                  dense
-                  v-model="employeeClass"
-                  :options="employeeClassOption"
-                  label="สภานภาพ"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  option-value="id"
-                  @update:model-value="retireType = ''"
-                >
-                </q-select>
-              </div>
-              <div class="col-lg-9 col-md-8 col-sm-8 col-xs-11">
-                <q-input
-                  outlined
-                  dense
-                  :model-value="org"
-                  autogrow
-                  label="สังกัด"
-                  @click="onOpenOrg"
-                >
-                  <template v-if="org" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="
-                        (org = ''),
-                          (storeReport.formFilter.node = null),
-                          (storeReport.formFilter.nodeId = null)
-                      "
-                      class="cursor-pointer"
-                    />
-                  </template>
-                </q-input>
-              </div>
-              <q-space />
-              <div>
-                <q-btn
-                  :loading="loadingBtn"
-                  flat
-                  round
-                  color="primary"
-                  icon="download"
-                  v-if="checkPermission($route)?.attrIsGet"
-                  :disable="rows.length == 0"
-                  @click="exportToExcel()"
-                >
-                  <!-- <q-menu>
+  <div class="col-12">
+    <q-form greedy @submit.prevent @validation-success="onSearch">
+      <div class="row col-12 q-gutter-sm">
+        <q-card class="col-12 q-pa-sm">
+          <div class="row col-12 q-col-gutter-sm no-wrap">
+            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
+              <q-select
+                outlined
+                dense
+                v-model="employeeClass"
+                :options="employeeClassOption"
+                label="สภานภาพ"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                @update:model-value="clearFilter(), getType()"
+              >
+              </q-select>
+            </div>
+            <!-- <div class="col-lg-9 col-md-8 col-sm-8 col-xs-11">
+              <q-input
+                outlined
+                dense
+                :model-value="org"
+                autogrow
+                label="สังกัด"
+                @click="onOpenOrg"
+              >
+                <template v-if="org" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      (org = ''),
+                        (storeReport.formFilter.node = null),
+                        (storeReport.formFilter.nodeId = null)
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-input>
+            </div> -->
+            <q-space />
+            <div>
+              <q-btn
+                :loading="loadingBtn"
+                flat
+                round
+                color="primary"
+                icon="download"
+                v-if="checkPermission($route)?.attrIsGet"
+                :disable="rows.length == 0"
+                @click="exportToExcel()"
+              >
+                <!-- <q-menu>
                     <q-list style="min-width: 150px">
                       <q-item
                         clickable
@@ -691,424 +721,490 @@ onMounted(async () => {
                       </q-item>
                     </q-list>
                   </q-menu> -->
-                </q-btn>
-              </div>
+              </q-btn>
             </div>
-          </q-card>
+          </div>
+        </q-card>
 
-          <q-card class="row col-12">
-            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <div class="col">
-                <q-card flat bordered class="col-12">
-                  <q-card-section bordered class="bg-primary text-subtitle2 text-white q-pa-sm row col-12 items-center">
-                    <q-icon name="mdi-filter" class="q-mr-xs" />
-                    ตัวกรอง
-                    <q-space />
-                    <q-btn dense size="12px" class="q-px-sm" rounded flat label="ล้างทั้งหมด" />
-                  </q-card-section>
-                  <q-separator  />
-                  <div class="row col-12">
-                    <div class="row col-12 q-col-x-gutter-xs items-center">
-                      <div class="col-12 q-px-sm">
-                        <q-select
-                          class="bg-white"
-                          hide-bottom-space
-                          dense
-                          lazy-rules
-                          borderless
-                          hide-selected
-                          :model-value="posType == '' ? 'ทั้งหมด' : posType"
-                          :label="`${
-                            employeeClass == 'officer' ? 'ประเภทตำแหน่ง' : 'กลุ่มงาน'
-                          }`"
-                          emit-value
-                          map-options
-                          :options="posTypeOp"
-                          option-value="posTypeName"
-                          option-label="posTypeName"
-                          use-input
-                          fill-input
-                          @update:model-value="(value:string)=>(posLevel = '',updateLevel(value))"
-                          @filter="(inputValue:any, doneFn:Function) =>
+        <q-card class="row col-12">
+          <div class="col-12 row q-pa-sm q-col-gutter-sm">
+            <div class="col">
+              <q-card flat bordered class="col-12">
+                <q-card-section
+                  bordered
+                  class="bg-primary text-subtitle2 text-white q-pa-sm row col-12 items-center"
+                >
+                  <q-icon name="mdi-filter" class="q-mr-xs" />
+                  ตัวกรอง
+                  <q-space />
+                  <q-btn
+                    dense
+                    size="12px"
+                    class="q-px-sm"
+                    rounded
+                    flat
+                    label="ล้างทั้งหมด"
+                    @click.stop.pervent="clearFilter"
+                  />
+                </q-card-section>
+                <q-separator />
+                <div class="row col-12">
+                  <div class="row col-12 q-col-x-gutter-xs items-center">
+                    <div class="col-12 q-px-sm">
+                      <q-input
+                        dense
+                        :model-value="org ? org : 'ทั้งหมด'"
+                        autogrow
+                        borderless
+                        label="สังกัด"
+                        class="bg-white"
+                        @click="onOpenOrg"
+                      >
+                        <template v-if="org" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="
+                              (org = ''),
+                                (storeReport.formFilter.node = null),
+                                (storeReport.formFilter.nodeId = null)
+                            "
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-px-sm">
+                      <q-select
+                        class="bg-white"
+                        hide-bottom-space
+                        dense
+                        lazy-rules
+                        borderless
+                        hide-selected
+                        :model-value="posType == '' ? 'ทั้งหมด' : posType"
+                        :label="`${
+                          employeeClass == 'officer'
+                            ? 'ประเภทตำแหน่ง'
+                            : 'กลุ่มงาน'
+                        }`"
+                        emit-value
+                        map-options
+                        :options="posTypeOp"
+                        option-value="posTypeName"
+                        option-label="posTypeName"
+                        use-input
+                        fill-input
+                        @update:model-value="(value:string)=>(posLevel = '',updateLevel(value))"
+                        @filter="(inputValue:any, doneFn:Function) =>
                     filterOption(inputValue, doneFn,'type')
                   "
-                        >
-                          <template v-if="posType" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="(posType = ''), (posLevel = '')"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
-                          </template>
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                        </q-select>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-px-sm">
-                        <q-select
-                          class="bg-white"
-                          hide-bottom-space
-                          dense
-                          :readonly="!posType"
-                          lazy-rules
-                          borderless
-                          hide-selected
-                          :model-value="posLevel == '' ? 'ทั้งหมด' : posLevel"
-                          :label="`${
-                            employeeClass == 'officer'
-                              ? 'ระดับตำแหน่ง'
-                              : 'ระดับชั้นงาน'
-                          }`"
-                          emit-value
-                          map-options
-                          :options="posLevelOp"
-                          option-value="posLevelName"
-                          option-label="posLevelName"
-                          use-input
-                          fill-input
-                          @filter="(inputValue:any, doneFn:Function) =>
+                      >
+                        <template v-if="posType" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="
+                              (posType = ''), (posLevel = '')
+                            "
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-px-sm">
+                      <q-select
+                        class="bg-white"
+                        hide-bottom-space
+                        dense
+                        :readonly="!posType"
+                        lazy-rules
+                        borderless
+                        hide-selected
+                        :model-value="posLevel == '' ? 'ทั้งหมด' : posLevel"
+                        :label="`${
+                          employeeClass == 'officer'
+                            ? 'ระดับตำแหน่ง'
+                            : 'ระดับชั้นงาน'
+                        }`"
+                        emit-value
+                        map-options
+                        :options="posLevelOp"
+                        option-value="posLevelName"
+                        option-label="posLevelName"
+                        use-input
+                        fill-input
+                        @filter="(inputValue:any, doneFn:Function) =>
                     filterOption(inputValue, doneFn,'level')
                     
                   "
-                          @update:model-value="(value:string)=>(posLevel = value)"
+                        @update:model-value="(value:string)=>(posLevel = value)"
+                      >
+                        <template v-if="posLevel" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="posLevel = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                      </q-select>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-px-sm">
+                      <q-select
+                        dense
+                        :model-value="position == '' ? 'ทั้งหมด' : position"
+                        :label="`${
+                          employeeClass == 'officer'
+                            ? 'ตำแหน่งในสายงาน'
+                            : 'ตำแหน่ง'
+                        }`"
+                        emit-value
+                        map-options
+                        fill-input
+                        hide-selected
+                        borderless
+                        lazy-rules
+                        bg-color="white"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
+                        hide-bottom-space
+                        option-label="name"
+                        option-value="name"
+                        :options="positionOp"
+                        use-input
+                        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'pos') "
+                        @update:model-value="(value:string)=>(position = value)"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-if="position" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="position = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          /> </template
+                      ></q-select>
+                    </div>
+                    <div class="col-12" v-if="employeeClass === 'officer'">
+                      <q-separator />
+                    </div>
+                    <div
+                      class="col-12 q-px-sm"
+                      v-if="employeeClass === 'officer'"
+                    >
+                      <q-select
+                        label="ตำแหน่งทางการบริหาร"
+                        :model-value="
+                          positionExecutive == ''
+                            ? 'ทั้งหมด'
+                            : positionExecutive
+                        "
+                        :options="executiveOps"
+                        emit-value
+                        dense
+                        borderless
+                        map-options
+                        option-label="name"
+                        option-value="name"
+                        fill-input
+                        use-input
+                        hide-selected
+                        bg-color="white"
+                        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'Executive') "
+                        @update:model-value="(value:string)=>(positionExecutive = value)"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-if="positionExecutive" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="positionExecutive = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-select>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-px-sm">
+                      <q-select
+                        label="เพศ"
+                        :model-value="gender == '' ? 'ทั้งหมด' : gender"
+                        :options="genderOps"
+                        emit-value
+                        dense
+                        map-options
+                        borderless
+                        option-label="name"
+                        option-value="name"
+                        fill-input
+                        use-input
+                        hide-selected
+                        bg-color="white"
+                        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'gender') "
+                        @update:model-value="(value:string)=>(gender = value)"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-if="gender" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="gender = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-select>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-px-sm">
+                      <q-select
+                        label="สถานภาพ"
+                        :model-value="status == '' ? 'ทั้งหมด' : status"
+                        :options="statusOps"
+                        emit-value
+                        dense
+                        borderless
+                        map-options
+                        option-label="name"
+                        option-value="name"
+                        fill-input
+                        use-input
+                        hide-selected
+                        bg-color="white"
+                        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'status') "
+                        @update:model-value="(value:string)=>(status = value)"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-if="status" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="status = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-select>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-px-sm">
+                      <q-select
+                        label="วุฒิการศึกษา"
+                        :model-value="education == '' ? 'ทั้งหมด' : education"
+                        :options="educationOp"
+                        emit-value
+                        dense
+                        borderless
+                        map-options
+                        option-label="name"
+                        option-value="name"
+                        fill-input
+                        use-input
+                        hide-selected
+                        bg-color="white"
+                        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'education') "
+                        @update:model-value="(value:string)=>(education = value)"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-if="education" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="education = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-select>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-pa-sm">
+                      <div class="text-grey-8 text-caption">ช่วงเวลาบรรจุ</div>
+                      <div class="col-12">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="dateStart"
+                          :locale="'th'"
+                          autoApply
+                          date-picker
+                          :enableTimePicker="false"
+                          @update:model-value="dateEnd = null"
                         >
-                          <template v-if="posLevel" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="posLevel = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              dense
+                              :model-value="
+                                dateStart === null ? '' : date2Thai(dateStart)
+                              "
+                              :label="`${'ตั้งเเต่วันที่'}`"
+                              bg-color="white"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  style="color: var(--q-primary)"
+                                  size="18px"
+                                >
+                                </q-icon>
+                              </template>
+                              <template v-if="dateStart" v-slot:append>
+                                <q-icon
+                                  name="cancel"
+                                  @click.stop.prevent="
+                                    (dateStart = null), (dateEnd = null)
+                                  "
+                                  class="cursor-pointer"
+                                  style="opacity: 0.6"
+                                />
+                              </template>
+                            </q-input>
                           </template>
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                        </q-select>
+                        </datepicker>
                       </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-px-sm">
-                        <q-select
+                      <div class="col-12">
+                        <datepicker
+                          menu-class-name="modalfix"
+                          v-model="dateEnd"
+                          :locale="'th'"
+                          autoApply
+                          :readonly="!dateStart"
+                          date-picker
+                          :enableTimePicker="false"
+                          :min-date="dateStart"
+                        >
+                          <template #year="{ year }">{{ year + 543 }}</template>
+                          <template #year-overlay-value="{ value }">{{
+                            parseInt(value + 543)
+                          }}</template>
+                          <template #trigger>
+                            <q-input
+                              dense
+                              :readonly="!dateStart"
+                              :model-value="
+                                dateEnd === null ? '' : date2Thai(dateEnd)
+                              "
+                              :label="`${'ถึงวันที่'}`"
+                              bg-color="white"
+                            >
+                              <template v-slot:prepend>
+                                <q-icon
+                                  name="event"
+                                  class="cursor-pointer"
+                                  style="color: var(--q-primary)"
+                                  size="18px"
+                                >
+                                </q-icon>
+                              </template>
+                            </q-input>
+                          </template>
+                        </datepicker>
+                      </div>
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+                    <div class="col-12 q-pa-sm">
+                      <div class="col-12 row">
+                        <div class="text-grey-8 text-caption">ช่วงอายุ</div>
+                        <q-space />
+                      </div>
+                      <div class="q-pa-sm row">
+                        <q-range
+                          v-model="rangeAge"
+                          :min="18"
+                          :max="60"
+                          label
+                          color="primary"
+                          track-size="4px"
+                          thumb-size="16px"
+                          switch-label-side
                           dense
-                          :model-value="position == '' ? 'ทั้งหมด' : position"
-                          label="ตำแหน่งในสายงาน"
-                          emit-value
-                          map-options
-                          fill-input
-                          hide-selected
-                          borderless
-                          lazy-rules
-                          bg-color="white"
-                          :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่งในสายงาน'}`,]"
-                          hide-bottom-space
-                          option-label="name"
-                          option-value="name"
-                          :options="positionOp"
-                          use-input
-                          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'pos') "
-                          @update:model-value="(value:string)=>(position = value)"
-                        >
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                          <template v-if="position" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="position = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            /> </template
-                        ></q-select>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-px-sm">
-                        <q-select
-                          label="ตำแหน่งทางการบริหาร"
-                          :model-value="
-                            positionExecutive == '' ? 'ทั้งหมด' : positionExecutive
-                          "
-                          :options="executiveOps"
-                          emit-value
-                          dense
-                          borderless
-                          map-options
-                          option-label="name"
-                          option-value="name"
-                          fill-input
-                          use-input
-                          hide-selected
-                          bg-color="white"
-                          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'Executive') "
-                          @update:model-value="(value:string)=>(positionExecutive = value)"
-                        >
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                          <template v-if="positionExecutive" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="positionExecutive = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
-                          </template>
-                        </q-select>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-px-sm">
-                        <q-select
-                          label="เพศ"
-                          :model-value="gender == '' ? 'ทั้งหมด' : gender"
-                          :options="genderOps"
-                          emit-value
-                          dense
-                          map-options
-                          borderless
-                          option-label="name"
-                          option-value="name"
-                          fill-input
-                          use-input
-                          hide-selected
-                          bg-color="white"
-                          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'gender') "
-                          @update:model-value="(value:string)=>(gender = value)"
-                        >
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                          <template v-if="gender" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="gender = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
-                          </template>
-                        </q-select>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-px-sm">
-                        <q-select
-                          label="สถานภาพ"
-                          :model-value="status == '' ? 'ทั้งหมด' : status"
-                          :options="statusOps"
-                          emit-value
-                          dense
-                          borderless
-                          map-options
-                          option-label="name"
-                          option-value="name"
-                          fill-input
-                          use-input
-                          hide-selected
-                          bg-color="white"
-                          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'status') "
-                          @update:model-value="(value:string)=>(status = value)"
-                        >
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                          <template v-if="status" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="status = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
-                          </template>
-                        </q-select>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-px-sm">
-                        <q-select
-                          label="วุฒิการศึกษา"
-                          :model-value="education == '' ? 'ทั้งหมด' : education"
-                          :options="educationOp"
-                          emit-value
-                          dense
-                          borderless
-                          map-options
-                          option-label="name"
-                          option-value="name"
-                          fill-input
-                          use-input
-                          hide-selected
-                          bg-color="white"
-                          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'education') "
-                          @update:model-value="(value:string)=>(education = value)"
-                        >
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                          <template v-if="education" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="education = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
-                          </template>
-                        </q-select>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-pa-sm">
-                        <div class=" text-grey-8 text-caption">ช่วงเวลาบรรจุ</div>
-                        <div class="col-12">
-                          <datepicker
-                            menu-class-name="modalfix"
-                            v-model="dateStart"
-                            :locale="'th'"
-                            autoApply
-                            date-picker
-                            :enableTimePicker="false"
-                            @update:model-value="dateEnd = null"
-                          >
-                            <template #year="{ year }">{{ year + 543 }}</template>
-                            <template #year-overlay-value="{ value }">{{
-                              parseInt(value + 543)
-                            }}</template>
-                            <template #trigger>
-                              <q-input
-                                dense
-                                
-                                :model-value="
-                                  dateStart === null ? '' : date2Thai(dateStart)
-                                "
-                                :label="`${'ตั้งเเต่วันที่'}`"
-                                bg-color="white"
-                              >
-                                <template v-slot:prepend>
-                                  <q-icon
-                                    name="event"
-                                    class="cursor-pointer"
-                                    style="color: var(--q-primary)"
-                                    size="18px"
-                                  >
-                                  </q-icon>
-                                </template>
-                                <template v-if="dateStart" v-slot:append>
-                                  <q-icon
-                                    name="cancel"
-                                    @click.stop.prevent="
-                                      (dateStart = null), (dateEnd = null)
-                                    "
-                                    class="cursor-pointer"
-                                    style="opacity: 0.6"
-                                  />
-                                </template>
-                              </q-input>
-                            </template>
-                          </datepicker>
-                        </div>
-                        <div class="col-12">
-                          <datepicker
-                            menu-class-name="modalfix"
-                            v-model="dateEnd"
-                            :locale="'th'"
-                            autoApply
-                            :readonly="!dateStart"
-                            date-picker
-                            :enableTimePicker="false"
-                            :min-date="dateStart"
-                          >
-                            <template #year="{ year }">{{ year + 543 }}</template>
-                            <template #year-overlay-value="{ value }">{{
-                              parseInt(value + 543)
-                            }}</template>
-                            <template #trigger>
-                              <q-input
-                                dense
-                                :readonly="!dateStart"
-                                
-                                :model-value="
-                                  dateEnd === null ? '' : date2Thai(dateEnd)
-                                "
-                                :label="`${'ถึงวันที่'}`"
-                                bg-color="white"
-                              >
-                                <template v-slot:prepend>
-                                  <q-icon
-                                    name="event"
-                                    class="cursor-pointer"
-                                    style="color: var(--q-primary)"
-                                    size="18px"
-                                  >
-                                  </q-icon>
-                                </template>
-                              </q-input>
-                            </template>
-                          </datepicker>
-                        </div>
-                      </div>
-                      <div class="col-12"> <q-separator /> </div>
-                      <div class="col-12 q-pa-sm">
-                        <div class="col-12 row">
-                          <div class=" text-grey-8 text-caption">ช่วงอายุ </div>
-                          <q-space />
-                          <!-- <div class="text-black">{{ rangeAge.min }} - {{ rangeAge.max }}</div> -->
-                        </div>
-                        <div class="q-pa-sm row">
-                          <q-range
-                            v-model="rangeAge"
-                            :min="18"
-                            :max="60"
-                            label
-                            color="primary"
-                            track-size="4px"
-                            thumb-size="16px"
-                            switch-label-side
-                            dense
                           ><!--   :marker-labels="objMarkerLabel" -->
-                          </q-range>
-                          <div class="col-12 justify-around items-center  row no-wrap q-pt-sm">
-                            <div><q-input type="number" style="max-width: 60px" v-model="rangeAge.min" dense  standout="bg-teal text-white"/></div>
-                            <div class="q-px-sm text-grey-8">-</div>
-                            <div><q-input type="number" style="max-width: 60px" v-model="rangeAge.max" dense  standout="bg-teal text-white"/></div>
+                        </q-range>
+                        <div
+                          class="col-12 justify-around items-center row no-wrap q-pt-sm"
+                        >
+                          <div>
+                            <q-input
+                              type="number"
+                              style="max-width: 60px"
+                              v-model="rangeAge.min"
+                              dense
+                              standout="bg-teal text-white"
+                            />
+                          </div>
+                          <div class="q-px-sm text-grey-8">-</div>
+                          <div>
+                            <q-input
+                              type="number"
+                              style="max-width: 60px"
+                              v-model="rangeAge.max"
+                              dense
+                              standout="bg-teal text-white"
+                            />
                           </div>
                         </div>
                       </div>
-                      <div class="col-12"> <q-separator /> </div>
-                    
-                    <div class="col-12 row  q-pl-sm items-center no-wrap">
-                        <div class=" text-grey-8">ทดลองปฏิบัติราชการ</div>
-                        <q-space />
-                        <q-toggle
-                          v-model="isProbation"
-                          size="sm"
-                        />
+                    </div>
+                    <div class="col-12"><q-separator /></div>
+
+                    <div
+                      class="col-12 row q-pl-sm items-center no-wrap"
+                      v-if="employeeClass === 'officer'"
+                    >
+                      <div class="text-grey-8">ทดลองปฏิบัติราชการ</div>
+                      <q-space />
+                      <q-toggle v-model="isProbation" size="sm" />
                     </div>
                     <div class="col-12 row q-pl-sm items-center">
-                      <div class=" text-grey-8">แสดงผู้พ้นจากราชการ</div>
+                      <div class="text-grey-8">แสดงผู้พ้นจากราชการ</div>
                       <q-space />
                       <q-toggle
                         v-model="isRetire"
@@ -1116,45 +1212,45 @@ onMounted(async () => {
                         @update:model-value="(value:string)=>(!value ? retireType = '':retireType)"
                       />
 
-                        <q-select
-                          class="col-12 q-pr-sm q-pb-md"
-                          v-if="isRetire"
-                          :label="`ประเภท${
-                            employeeClass == 'officer' ? `การพ้นจากราชการ` : ``
-                          }`"
-                          :model-value="retireType == '' ? 'ทั้งหมด' : retireType"
-                          :options="retireTypeOps"
-                          emit-value
-                          dense
-                          map-options
-                          option-label="name"
-                          option-value="id"
-                          fill-input
-                          use-input
-                          hide-selected
-                          bg-color="white"
-                          @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'retireType') "
-                          @update:model-value="(value:string)=>(retireType = value)"
-                        >
-                          <template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                          <template v-if="retireType" v-slot:append>
-                            <q-icon
-                              name="cancel"
-                              @click.stop.prevent="retireType = ''"
-                              class="cursor-pointer"
-                              style="opacity: 0.6"
-                            />
-                          </template>
-                        </q-select>
+                      <q-select
+                        class="col-12 q-pr-sm q-pb-md"
+                        v-if="isRetire"
+                        :label="`ประเภท${
+                          employeeClass == 'officer' ? `การพ้นจากราชการ` : ``
+                        }`"
+                        :model-value="retireType == '' ? 'ทั้งหมด' : retireType"
+                        :options="retireTypeOps"
+                        emit-value
+                        dense
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        fill-input
+                        use-input
+                        hide-selected
+                        bg-color="white"
+                        @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn,'retireType') "
+                        @update:model-value="(value:string)=>(retireType = value)"
+                      >
+                        <template v-slot:no-option>
+                          <q-item>
+                            <q-item-section class="text-grey">
+                              ไม่มีข้อมูล
+                            </q-item-section>
+                          </q-item>
+                        </template>
+                        <template v-if="retireType" v-slot:append>
+                          <q-icon
+                            name="cancel"
+                            @click.stop.prevent="retireType = ''"
+                            class="cursor-pointer"
+                            style="opacity: 0.6"
+                          />
+                        </template>
+                      </q-select>
                     </div>
                     <div class="col-12">
-                     <!--  <q-btn-dropdown
+                      <!--  <q-btn-dropdown
                         :label="
                           sortBy
                             ? sortBy == 'DESC'
@@ -1194,100 +1290,128 @@ onMounted(async () => {
                       </q-btn-dropdown> -->
                     </div>
                   </div>
-                  <div class="col-12"> <q-separator /> </div>
+                  <div class="col-12"><q-separator /></div>
                   <div class="col-12 row q-pa-sm">
                     <q-space />
-                    <q-btn dense class="q-px-md" label="ค้นหา" unelevated color="public" type="submit">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      label="ค้นหา"
+                      unelevated
+                      color="public"
+                      type="submit"
+                    >
                     </q-btn>
                   </div>
-                  </div>
-                </q-card>
-              </div>
-          
-              <div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex ">
-                  <q-card bordered class="col-12 ">
-                    <div class="row col-12 q-pa-sm items-center" >
-                    <div
-                      class="row items-center q-pa-sm no-wrap bg-grey-1"
-                      style="border: #c8d3db solid 1px; border-radius: 3px"
-                    >
-                      <div class="text-weight-medium q-pr-md">จำนวนที่พบทั้งหมด</div>
-                      <q-space />
-                      <q-badge color="primary" class="q-pa-xs">
-                        {{ total.toLocaleString() }}
-                      </q-badge>
+                </div>
+              </q-card>
+            </div>
+
+            <div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 col-xs-12 flex">
+              <q-card bordered class="col-12">
+                <div class="row col-12 q-pa-sm items-center">
+                  <div
+                    class="row items-center q-pa-sm no-wrap bg-grey-1"
+                    style="border: #c8d3db solid 1px; border-radius: 3px"
+                  >
+                    <div class="text-weight-medium q-pr-md">
+                      จำนวนที่พบทั้งหมด
                     </div>
                     <q-space />
-                    <div class="text-weight-medium q-pr-sm">เรียงตามวันที่บรรจุเเต่งตั้ง :</div>
-                    <q-btn-dropdown
-                          :label="
-                            sortBy
-                              ? sortBy == 'DESC'
-                                ? `(เก่า-ล่าสุด)`
-                                : `(ล่าสุด-เก่า)`
-                              : 'ลำดับการเเสดงผล'
-                          "
-                          dropdown-icon="mdi-chevron-down"
-                          text-color="primary"
-                          label-color="white"
-                          flat
-                          dense
-                          rounded
-                        >
-                          <q-list>
-                            <q-item clickable v-close-popup @click="sortBy = 'ASC'">
-                              <q-item-section>
-                                <q-item-label
-                                  >(ล่าสุด-เก่า)</q-item-label
-                                >
-                              </q-item-section>
-                            </q-item>
-
-                            <q-item clickable v-close-popup @click="sortBy = 'DESC'">
-                              <q-item-section>
-                                <q-item-label
-                                  >(เก่า-ล่าสุด)</q-item-label
-                                >
-                              </q-item-section>
-                            </q-item>
-                          </q-list>
-                    </q-btn-dropdown>
+                    <q-badge color="primary" class="q-pa-xs">
+                      {{ total.toLocaleString() }}
+                    </q-badge>
                   </div>
-                    <d-table
-                      :columns="columns"
-                      :rows="rows"
-                      row-key="id"
-                      :visible-columns="visibleColumns"
-                      v-model:pagination="pagination"
-                      :rows-per-page-options="[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">
-                          <q-td v-for="col in props.cols" :key="col.id">
-                            <div v-if="col.name === 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div v-else class="table_ellipsis">
-                              {{ col.value ? col.value : "-" }}
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </d-table>
-                  </q-card>
+                  <q-space />
+                  <div class="text-weight-medium q-pr-sm">
+                    เรียงตามวันที่บรรจุเเต่งตั้ง :
+                  </div>
+
+                  <q-btn-dropdown
+                    :label="
+                      sortBy
+                        ? sortBy == 'ASC'
+                          ? `(เก่า-ล่าสุด)`
+                          : `(ล่าสุด-เก่า)`
+                        : 'ลำดับการเเสดงผล'
+                    "
+                    dropdown-icon="mdi-chevron-down"
+                    text-color="primary"
+                    label-color="white"
+                    flat
+                    dense
+                    rounded
+                  >
+                    <q-list>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="
+                          (sortBy = 'DESC'),
+                            (pagination.sortBy = 'dateAppoint'),
+                            (pagination.descending = true)
+                        "
+                      >
+                        <q-item-section>
+                          <q-item-label>(ล่าสุด-เก่า)</q-item-label>
+                        </q-item-section>
+                      </q-item>
+
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="
+                          (sortBy = 'ASC'),
+                            (pagination.sortBy = 'dateAppoint'),
+                            (pagination.descending = false)
+                        "
+                      >
+                        <q-item-section>
+                          <q-item-label>(เก่า-ล่าสุด)</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-btn-dropdown>
                 </div>
-              </div>
-          </q-card>
-        </div>
-      </q-form>
-    </div>
+                <d-table
+                  :columns="columns"
+                  :rows="rows"
+                  row-key="id"
+                  :visible-columns="visibleColumns"
+                  v-model:pagination="pagination"
+                  :rows-per-page-options="[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">
+                      <q-td v-for="col in props.cols" :key="col.id">
+                        <div v-if="col.name === 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </div>
+                        <div v-else class="table_ellipsis">
+                          {{ col.value ? col.value : "-" }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                </d-table>
+              </q-card>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </q-form>
+  </div>
 
   <DialogOrg v-model:modal="modalOrg" v-model:name="org" />
 </template>