From 4df8c023e141f30727cd22ec7551e84c43b5856e Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 21 Feb 2025 14:06:14 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                               |   26 +-
 .../views/01_compete/CompeteReport.vue        |  182 +--
 .../21_report/views/02_reportRegistry.vue     | 1299 +++++++++--------
 3 files changed, 789 insertions(+), 718 deletions(-)

diff --git a/.env.production b/.env.production
index 76faebdd3..44e87c6b3 100644
--- a/.env.production
+++ b/.env.production
@@ -1,11 +1,15 @@
-VITE_COMPETITIVE_EXAM_PANEL=VITE_COMPETITIVE_EXAM_PANEL
-VITE_QUALIFY_DISABLE_EMAM_PANEL=VITE_QUALIFY_DISABLE_EMAM_PANEL
-VITE_QUALIFY_EXAM_PANEL=VITE_QUALIFY_EXAM_PANEL
-VITE_API_PUBLISH_URL=VITE_API_PUBLISH_URL
-VITE_API_REPORT_URL=VITE_API_REPORT_URL
-VITE_MANUAL_URL=VITE_MANUAL_URL
-VITE_URL_SSO=VITE_URL_SSO
-VITE_URL_LANDING=VITE_URL_LANDING
-VITE_API_URI_CONFIG=VITE_API_URI_CONFIG
-VITE_API_URI_REPORT_CONFIG=VITE_API_URI_REPORT_CONFIG
-VITE_DASHBOARD_PANEL=VITE_DASHBOARD_PANEL
\ No newline at end of file
+VITE_S3CLUSTER_PUBLIC_URL: "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/"
+ 
+VITE_COMPETITIVE_EXAM_PANEL: "https://hrms-dash.bangkok.go.th/goto/KO0GpSu4z?orgId=1"
+VITE_QUALIFY_DISABLE_EMAM_PANEL: "https://hrms-dash.bangkok.go.th/goto/dQQzpIX4z?orgId=1"
+VITE_QUALIFY_EXAM_PANEL: "https://hrms-dash.bangkok.go.th/goto/cj1ZtIX4z?orgId=1"
+ 
+VITE_API_PUBLISH_URL: "https://bma-ehr-publish.frappet.synology.me"
+VITE_API_REPORT_URL: "https://report-server.frappet.synology.me/api/v1/"
+VITE_MANUAL_URL: "https://bma-ehr-manual.frappet.synology.me"
+VITE_URL_SSO: "http://localhost:3002/sso"
+VITE_URL_LANDING: "http://localhost:3002"
+VITE_API_URI_CONFIG: "https://hrms.chin.in.th/api/v1"
+VITE_API_URI_REPORT_CONFIG: "https://bma-ehr.frappet.synology.me/api/v2/"
+ 
+VITE_DASHBOARD_PANEL: "https://bma-dashboard.frappet.synology.me" 
\ No newline at end of file
diff --git a/src/modules/03_recruiting/views/01_compete/CompeteReport.vue b/src/modules/03_recruiting/views/01_compete/CompeteReport.vue
index 15b852e44..5542b8d81 100644
--- a/src/modules/03_recruiting/views/01_compete/CompeteReport.vue
+++ b/src/modules/03_recruiting/views/01_compete/CompeteReport.vue
@@ -140,10 +140,10 @@ function filterFnOptions(val: any, update: Function) {
     รายงานสถิติสำหรับการสอบแข่งขัน
   </div>
 
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="q-pa-md q-gutter-y-sm">
-      <q-toolbar style="padding: 0">
-        <div class="q-pr-xs">
+  <div class="q-pa-sm q-gutter-sm">
+    <q-card flat bordered class="col-12">
+      <div class="row q-col-gutter-sm q-pa-sm">
+        <div class="row col-12  q-col-gutter-sm">
           <q-select
             outlined
             dense
@@ -166,8 +166,6 @@ function filterFnOptions(val: any, update: Function) {
               </q-item>
             </template>
           </q-select>
-        </div>
-        <div>
           <datepicker
             v-model="year"
             :locale="'th'"
@@ -199,9 +197,7 @@ function filterFnOptions(val: any, update: Function) {
               </q-input>
             </template>
           </datepicker>
-        </div>
-        <q-space />
-        <div class="q-py-xs">
+          <q-space />
           <q-btn
             flat
             round
@@ -239,95 +235,99 @@ function filterFnOptions(val: any, update: Function) {
             </q-menu>
           </q-btn>
         </div>
-      </q-toolbar>
-      <q-splitter
-        v-model="splitterModel"
-        horizontal
-        style="
-          height: 70vh;
-          border: 1px solid rgb(210, 210, 210);
-          border-radius: 5px;
-        "
-        before-class="overflow-hidden disable"
-        separator-class="bg-white disabled"
-      >
-        <template v-slot:before>
-          <div class="q-px-sm">
-            <div class="row items-start items-center">
-              <div class="col">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-left"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  class="my-auto"
-                  @click="backPage"
-                  :disable="page == 1"
-                />
-              </div>
-              <div class="col-12 col-md-auto">
-                <div class="q-pa-md flex">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+        </div>
+      </q-card>
+      <q-card flat bordered class="col-12">
+        <q-card-section class="col-lg-9 col-md-8 col-xs-12 scroll">
+          <q-splitter
+            v-model="splitterModel"
+            horizontal
+            style="
+              height: 70vh;
+              border: 1px solid rgb(210, 210, 210);
+              border-radius: 5px;
+            "
+            before-class="overflow-hidden disable"
+            separator-class="bg-white disabled"
+          >
+            <template v-slot:before>
+              <div class="q-px-sm">
+                <div class="row items-start items-center">
+                  <div class="col">
+                    <q-btn
+                      padding="xs"
+                      icon="mdi-chevron-left"
+                      color="grey-2"
+                      text-color="grey-5"
+                      size="md"
+                      class="my-auto"
+                      @click="backPage"
+                      :disable="page == 1"
+                    />
+                  </div>
+                  <div class="col-12 col-md-auto">
+                    <div class="q-pa-md flex">
+                      หน้าที่ {{ page }} จาก {{ numOfPages }}
+                    </div>
+                  </div>
+                  <div class="col text-right">
+                    <q-btn
+                      padding="xs"
+                      icon="mdi-chevron-right"
+                      color="grey-2"
+                      text-color="grey-5"
+                      size="md"
+                      @click="nextPage"
+                      :disable="page === numOfPages"
+                    />
+                  </div>
                 </div>
               </div>
-              <div class="col text-right">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-right"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  @click="nextPage"
-                  :disable="page === numOfPages"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-        <template v-slot:after>
-          <div class="q-pa-md">
-            <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-          </div>
-        </template>
-        <template v-slot:default>
-          <div class="q-pa-md">
-            <div class="row items-start items-center">
-              <div class="col">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-left"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  class="my-auto"
-                  @click="backPage"
-                  :disable="page == 1"
-                />
+            </template>
+            <template v-slot:after>
+              <div class="q-pa-md">
+                <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
               </div>
+            </template>
+            <template v-slot:default>
+              <div class="q-pa-md">
+                <div class="row items-start items-center">
+                  <div class="col">
+                    <q-btn
+                      padding="xs"
+                      icon="mdi-chevron-left"
+                      color="grey-2"
+                      text-color="grey-5"
+                      size="md"
+                      class="my-auto"
+                      @click="backPage"
+                      :disable="page == 1"
+                    />
+                  </div>
 
-              <div class="col-12 col-md-auto">
-                <div class="q-pa-md flex">
-                  หน้าที่ {{ page }} จาก {{ numOfPages }}
+                  <div class="col-12 col-md-auto">
+                    <div class="q-pa-md flex">
+                      หน้าที่ {{ page }} จาก {{ numOfPages }}
+                    </div>
+                  </div>
+                  <div class="col text-right">
+                    <q-btn
+                      padding="xs"
+                      icon="mdi-chevron-right"
+                      color="grey-2"
+                      text-color="grey-5"
+                      size="md"
+                      @click="nextPage"
+                      :disable="page === numOfPages"
+                    />
+                  </div>
                 </div>
               </div>
-              <div class="col text-right">
-                <q-btn
-                  padding="xs"
-                  icon="mdi-chevron-right"
-                  color="grey-2"
-                  text-color="grey-5"
-                  size="md"
-                  @click="nextPage"
-                  :disable="page === numOfPages"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-      </q-splitter>
+            </template>
+          </q-splitter>
+        </q-card-section>
+      </q-card>
     </div>
-  </q-card>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/21_report/views/02_reportRegistry.vue b/src/modules/21_report/views/02_reportRegistry.vue
index 5e996a521..a2b68c470 100644
--- a/src/modules/21_report/views/02_reportRegistry.vue
+++ b/src/modules/21_report/views/02_reportRegistry.vue
@@ -589,638 +589,705 @@ onMounted(async () => {
     รายงานทะเบียนประวัติ
   </div>
 
-  <div class="q-pa-sm q-gutter-sm">
-    <q-card flat bordered class="col-12">
+    <div class="col-12">
       <q-form
         greedy
         @submit.prevent
         @validation-success="onSearch"
-        class="q-px-sm q-pt-sm"
       >
-        <div class="row q-col-gutter-sm q-mb-sm">
-          <div class="col-3">
-            <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-8 col-md-7 col-sm-6">
-            <q-input
-              outlined
-              dense
-              :model-value="org"
-              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
-                    v-close-popup
-                    @click="
-                      genReportXLSX(
-                        detailReport,
-                        `${
-                          employeeClass == 'officer'
-                            ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
-                            : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
-                        }`,
-                        'pdf'
-                      )
-                    "
-                  >
-                    <q-item-section avatar
-                      ><q-icon color="red" name="mdi-file-pdf"
-                    /></q-item-section>
-                    <q-item-section>ไฟล์ .pdf</q-item-section>
-                  </q-item>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="
-                      genReportXLSX(
-                        detailReport,
-                        `${
-                          employeeClass == 'officer'
-                            ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
-                            : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
-                        }`,
-                        'xlsx'
-                      )
-                    "
-                  >
-                    <q-item-section avatar
-                      ><q-icon color="green" name="mdi-file-excel"
-                    /></q-item-section>
-                    <q-item-section>ไฟล์ .xlsx</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu> -->
-            </q-btn>
-          </div>
-        </div>
-
-        <q-card bordered class="filter-card q-pa-sm q-mb-sm">
-          <div class="row q-col-gutter-y-sm">
-            <div class="col-12">
-              <div class="row q-col-gutter-sm items-center">
-                <div class="col-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    class="bg-white"
-                    hide-bottom-space
-                    outlined
-                    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-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    class="bg-white"
-                    hide-bottom-space
-                    outlined
-                    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)"
-                  >
-                    <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-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    dense
-                    :model-value="position == '' ? 'ทั้งหมด' : position"
-                    label="ตำแหน่งในสายงาน"
-                    outlined
-                    emit-value
-                    map-options
-                    fill-input
-                    hide-selected
-                    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-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    label="ตำแหน่งทางการบริหาร"
-                    :model-value="
-                      positionExecutive == '' ? 'ทั้งหมด' : positionExecutive
-                    "
-                    :options="executiveOps"
-                    emit-value
-                    dense
-                    map-options
-                    outlined
-                    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-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    label="เพศ"
-                    :model-value="gender == '' ? 'ทั้งหมด' : gender"
-                    :options="genderOps"
-                    emit-value
-                    dense
-                    map-options
-                    outlined
-                    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-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    label="สถานภาพ"
-                    :model-value="status == '' ? 'ทั้งหมด' : status"
-                    :options="statusOps"
-                    emit-value
-                    dense
-                    map-options
-                    outlined
-                    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-lg-2 col-md-4 col-sm-12 col-12">
-                  <q-select
-                    label="วุฒิการศึกษา"
-                    :model-value="education == '' ? 'ทั้งหมด' : education"
-                    :options="educationOp"
-                    emit-value
-                    dense
-                    map-options
-                    outlined
-                    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-lg-2 col-md-4 col-sm-12 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
-                        outlined
-                        :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)"
-                          >
-                          </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-lg-2 col-md-4 col-sm-12 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"
-                        outlined
-                        :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)"
-                          >
-                          </q-icon>
-                        </template>
-                      </q-input>
-                    </template>
-                  </datepicker>
-                </div>
-              </div>
-            </div>
-            <div class="col-12">
-              <div class="row q-col-gutter-sm items-center">
-                <div class="col-lg-3 col-md-6 col-sm-12 col-12">
-                  <div class="q-px-lg">
-                    <q-range
-                      v-model="rangeAge"
-                      :min="18"
-                      :max="60"
-                      label
-                      :marker-labels="objMarkerLabel"
-                      color="primary"
-                    >
-                    </q-range>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-12">
-              <div class="row">
-                <div class="col-lg-4 col-md-6 col-sm-12 col-12">
-                  <q-toggle
-                    v-model="isProbation"
-                    label="ทดลองปฏิบัติหน้าที่ราชการ"
-                  />
-                </div>
-              </div>
-            </div>
-            <div class="col-12">
-              <div class="row q-gutter-sm">
-                <q-toggle
-                  v-model="isRetire"
-                  label="แสดงข้อมูลผู้พ้นจากราชการ"
-                  @update:model-value="(value:string)=>(!value ? retireType = '':retireType)"
-                />
-
+        <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
-                  v-if="isRetire"
-                  :label="`ประเภท${
-                    employeeClass == 'officer' ? `การพ้นจากราชการ` : ``
-                  }`"
-                  :model-value="retireType == '' ? 'ทั้งหมด' : retireType"
-                  :options="retireTypeOps"
-                  emit-value
-                  dense
-                  map-options
                   outlined
+                  dense
+                  v-model="employeeClass"
+                  :options="employeeClassOption"
+                  label="สภานภาพ"
+                  emit-value
+                  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)"
+                  @update:model-value="retireType = ''"
                 >
-                  <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>
-            <div class="col-12">
-              <q-btn-dropdown
-                :label="
-                  sortBy
-                    ? sortBy == 'DESC'
-                      ? `เรียงตามวันที่บรรจุเเต่งตั้ง
-                        (เก่า-ล่าสุด)`
-                      : `เรียงตามวันที่บรรจุเเต่งตั้ง
-                        (ล่าสุด-เก่า)`
-                    : 'ลำดับการเเสดงผล'
-                "
-                dropdown-icon="mdi-chevron-down"
-                rounded
-                text-color="primary"
-                dense
-                padding="xs md"
-                label-color="white"
-                outline
-              >
-                <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>
-            </div>
-          </div>
-        </q-card>
-
-        <div class="row items-center">
-          <div class="col-1">
-            <q-btn label="ค้นหา" unelevated color="public" type="submit">
-            </q-btn>
-          </div>
-          <div
-            class="offset-lg-8 offset-md-7 offset-sm-7 offset-xs-5 col-xs-6 col-sm-4 col-md-4 col-lg-3"
-          >
-            <div
-              class="row items-center q-pa-sm"
-              style="border: #c8d3db solid 1px; border-radius: 5px"
-            >
-              <div class="text-weight-medium">จำนวนที่พบทั้งหมด</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 />
-              <q-badge color="primary" class="q-pa-xs">
-                {{ total.toLocaleString() }}
-              </q-badge>
+              <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
+                        v-close-popup
+                        @click="
+                          genReportXLSX(
+                            detailReport,
+                            `${
+                              employeeClass == 'officer'
+                                ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
+                                : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
+                            }`,
+                            'pdf'
+                          )
+                        "
+                      >
+                        <q-item-section avatar
+                          ><q-icon color="red" name="mdi-file-pdf"
+                        /></q-item-section>
+                        <q-item-section>ไฟล์ .pdf</q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="
+                          genReportXLSX(
+                            detailReport,
+                            `${
+                              employeeClass == 'officer'
+                                ? 'รายงานสถิติข้อมูลข้าราชการ กทม. สามัญ'
+                                : 'รายงานสถิติข้อมูลลูกจ้างประจำ กทม.'
+                            }`,
+                            'xlsx'
+                          )
+                        "
+                      >
+                        <q-item-section avatar
+                          ><q-icon color="green" name="mdi-file-excel"
+                        /></q-item-section>
+                        <q-item-section>ไฟล์ .xlsx</q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu> -->
+                </q-btn>
+              </div>
             </div>
-          </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) =>
+                    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) =>
+                    filterOption(inputValue, doneFn,'level')
+                    
+                  "
+                          @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="ตำแหน่งในสายงาน"
+                          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>
+                          </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 row q-pl-sm items-center">
+                      <div class=" text-grey-8">แสดงผู้พ้นจากราชการ</div>
+                      <q-space />
+                      <q-toggle
+                        v-model="isRetire"
+                        size="sm"
+                        @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>
+                    </div>
+                    <div class="col-12">
+                     <!--  <q-btn-dropdown
+                        :label="
+                          sortBy
+                            ? sortBy == 'DESC'
+                              ? `เรียงตามวันที่บรรจุเเต่งตั้ง
+                                (เก่า-ล่าสุด)`
+                              : `เรียงตามวันที่บรรจุเเต่งตั้ง
+                                (ล่าสุด-เก่า)`
+                            : 'ลำดับการเเสดงผล'
+                        "
+                        dropdown-icon="mdi-chevron-down"
+                        rounded
+                        text-color="primary"
+                        dense
+                        padding="xs md"
+                        label-color="white"
+                        outline
+                      >
+                        <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> -->
+                    </div>
+                  </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>
+                  </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-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>
+                  </div>
+                    <d-table
+                      :columns="columns"
+                      :rows="rows"
+                      row-key="id"
+                      :visible-columns="visibleColumns"
+                      v-model:pagination="pagination"
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                            <span class="text-weight-medium">{{ col.label }}</span>
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props">
+                          <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>
-      <q-card-section class="q-pa-sm">
-        <d-table
-          :columns="columns"
-          :rows="rows"
-          row-key="id"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-          :rows-per-page-options="[10, 25, 50, 100]"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <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-section>
-    </q-card>
-  </div>
+    </div>
 
   <DialogOrg v-model:modal="modalOrg" v-model:name="org" />
 </template>