From 377a8dc7c18e4a8563b00b5e400e5c1fcaae115a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 6 Mar 2025 09:31:23 +0700
Subject: [PATCH] =?UTF-8?q?fix=20UI=20=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registryPerson/views/listView.vue      | 703 +++++++++---------
 1 file changed, 347 insertions(+), 356 deletions(-)

diff --git a/src/modules/04_registryPerson/views/listView.vue b/src/modules/04_registryPerson/views/listView.vue
index a766b7f07..62cae82ab 100644
--- a/src/modules/04_registryPerson/views/listView.vue
+++ b/src/modules/04_registryPerson/views/listView.vue
@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  ref,
-  reactive,
-  onMounted,
-  watch,
-  defineAsyncComponent,
-  computed,
-} from "vue";
+import { ref, reactive, onMounted, watch, defineAsyncComponent } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -340,9 +333,7 @@ function clearSelect(t: string) {
   fetchDataPerson();
 }
 
-/**
- * ฟังก์ชันดึงข้อโครงสร้าง
- */
+/** ฟังก์ชันดึงข้อโครงสร้าง*/
 async function fetchTree() {
   const data = await fetchStructureTree(route.meta.Key as string);
   if (store.routerName !== route.name) {
@@ -466,366 +457,366 @@ onMounted(async () => {
             </div>
           </q-form>
 
-          <div class="row q-mt-sm q-gutter-sm">
-            <q-btn-dropdown
-              flat
-              rounded
-              dense
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-pl-sm"
-              @click="() => ((selectNode = true), showLoader())"
-            >
-              <template v-slot:label>
-                {{
-                  `${
-                    store.labelOption.node !== "เลือกหน่วยงาน"
-                      ? store.labelOption.node
-                      : empType === "officer"
-                      ? "เลือกหน่วยงาน/ส่วนราชการ"
-                      : "เลือกหน่วยงาน"
-                  }`
-                }}
-                <q-btn
-                  v-if="
-                    store.labelOption.node !== 'เลือกหน่วยงาน' &&
-                    store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
+          <div class="row">
+            <div class="col-10">
+              <div class="row q-mt-sm q-gutter-sm">
+                <q-btn-dropdown
+                  flat
+                  rounded
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-pl-sm"
+                  @click="() => ((selectNode = true), showLoader())"
+                >
+                  <template v-slot:label>
+                    {{
+                      `${
+                        store.labelOption.node !== "เลือกหน่วยงาน"
+                          ? store.labelOption.node
+                          : empType === "officer"
+                          ? "เลือกหน่วยงาน/ส่วนราชการ"
+                          : "เลือกหน่วยงาน"
+                      }`
+                    }}
+                    <q-btn
+                      v-if="
+                        store.labelOption.node !== 'เลือกหน่วยงาน' &&
+                        store.labelOption.node !== 'เลือกหน่วยงาน/ส่วนราชการ'
+                      "
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('org')"
+                    />
+                  </template>
+                </q-btn-dropdown>
+
+                <q-toggle
+                  v-if="store.formFilter.nodeId"
+                  v-model="store.formFilter.isAll"
+                  color="primary"
+                  label="แสดงทุกตำแหน่ง"
+                  class="q-pr-sm"
+                  @update:model-value="getSearch"
+                >
+                  <q-tooltip
+                    >แสดงทุกตำแหน่งที่อยู่ภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                  >
+                </q-toggle>
+
+                <q-separator inset vertical class="lineFil" />
+
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                >
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.posType !== "ทั้งหมด"
+                        ? store.labelOption.posType
+                        : empType === "officer"
+                        ? `ตำแหน่งประเภท${store.labelOption.posType}`
+                        : `กลุ่มงาน${store.labelOption.posType}`
+                    }}
+                    <q-btn
+                      v-if="store.labelOption.posType !== 'ทั้งหมด'"
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('posType')"
+                    />
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.posTypeOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectPosType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+
+                <!-- <q-separator inset vertical class="lineFil" /> -->
+                <q-btn-dropdown
+                  flat
+                  dense
+                  rounded
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                  :disable="
+                    store.labelOption.posType === 'ทั้งหมด' ? true : false
                   "
-                  size="10px"
-                  flat
-                  round
-                  color="white"
-                  icon="close"
-                  @click.stop.prevent="clearSelect('org')"
-                />
-              </template>
-            </q-btn-dropdown>
+                >
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.posLevel !== "ทั้งหมด"
+                        ? store.labelOption.posLevel
+                        : empType === "officer"
+                        ? `ระดับ${store.labelOption.posLevel}`
+                        : `ระดับชั้นงาน${store.labelOption.posLevel}`
+                    }}
+                    <q-btn
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
+                      @click.stop.prevent="clearSelect('posLevel')"
+                    />
+                  </template>
+                  <q-list
+                    :style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
+                  >
+                    <q-item
+                      v-for="(item, index) in store.posLevelOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectPosLevel(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
 
-            <q-toggle
-              v-if="store.formFilter.nodeId"
-              v-model="store.formFilter.isAll"
-              color="primary"
-              label="แสดงทุกตำแหน่ง"
-              class="q-pr-sm"
-              @update:model-value="getSearch"
-            >
-              <q-tooltip
-                >แสดงทุกตำแหน่งที่อยู่ภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                <q-space />
+
+                <!-- <q-separator
+                  inset
+                  vertical
+                  class="lineFil"
+                  v-if="empType !== 'officer' && store.formFilter.nodeId"
+                /> -->
+
+                <!-- <q-toggle
+                  v-if="empType !== 'officer' && store.formFilter.nodeId"
+                  v-model="store.formFilter.isAll"
+                  color="primary"
+                  label="แสดงตำแหน่งทั้งหมด"
+                  @update:model-value="getSearch"
+                /> -->
+              </div>
+
+              <div
+                class="row q-gutter-sm justify-start"
+                v-if="empType !== 'officer'"
               >
-            </q-toggle>
-
-            <q-separator inset vertical class="lineFil" />
-
-            <q-btn-dropdown
-              rounded
-              flat
-              dense
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-px-sm"
-            >
-              <template v-slot:label>
-                {{
-                  store.labelOption.posType !== "ทั้งหมด"
-                    ? store.labelOption.posType
-                    : empType === "officer"
-                    ? `ตำแหน่งประเภท${store.labelOption.posType}`
-                    : `กลุ่มงาน${store.labelOption.posType}`
-                }}
-                <q-btn
-                  v-if="store.labelOption.posType !== 'ทั้งหมด'"
-                  size="10px"
-                  flat
-                  round
-                  color="white"
-                  icon="close"
-                  @click.stop.prevent="clearSelect('posType')"
+                <q-toggle
+                  v-model="store.formFilter.isShowRetire"
+                  color="primary"
+                  label="แสดงข้อมูลผู้พ้นจากราชการ"
+                  class="q-pr-sm"
+                  @update:model-value="getSearch"
                 />
-              </template>
-              <q-list>
-                <q-item
-                  v-for="(item, index) in store.posTypeOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectPosType(item)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ item.name }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-
-            <!-- <q-separator inset vertical class="lineFil" /> -->
-            <q-btn-dropdown
-              flat
-              dense
-              rounded
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-px-sm"
-              :disable="store.labelOption.posType === 'ทั้งหมด' ? true : false"
-            >
-              <template v-slot:label>
-                {{
-                  store.labelOption.posLevel !== "ทั้งหมด"
-                    ? store.labelOption.posLevel
-                    : empType === "officer"
-                    ? `ระดับ${store.labelOption.posLevel}`
-                    : `ระดับชั้นงาน${store.labelOption.posLevel}`
-                }}
-                <q-btn
-                  size="10px"
+                <q-btn-dropdown
+                  v-if="store.formFilter.isShowRetire"
+                  rounded
                   flat
-                  round
-                  color="white"
-                  icon="close"
-                  v-if="store.labelOption.posLevel !== 'ทั้งหมด'"
-                  @click.stop.prevent="clearSelect('posLevel')"
-                />
-              </template>
-              <q-list
-                :style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
-              >
-                <q-item
-                  v-for="(item, index) in store.posLevelOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectPosLevel(item)"
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
                 >
-                  <q-item-section>
-                    <q-item-label>{{ item.name }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.retireType !== "ทั้งหมด"
+                        ? store.labelOption.retireType
+                        : `${store.labelOption.retireType}`
+                    }}
+                    <q-btn
+                      v-if="store.labelOption.retireType !== 'ทั้งหมด'"
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('retireType')"
+                    />
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.retireTypeEmpOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectRetireType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
 
-            <q-space />
-            <div class="q-pt-sm q-pr-sm">
-              <!-- <a href="/report/registry" class="text-white">
-                การค้นหาขั้นสูง
-                <q-tooltip
-                  >ไปยังหน้าการค้นหาขั้นสูง (Advanced search)</q-tooltip
+                <q-separator inset vertical class="lineFil" />
+
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
                 >
-              </a> -->
-              <q-btn
-                flat
-                @click="goToAdvancedSearch"
-                class="text-white"
-                style="text-decoration: underline"
-                label="การค้นหาขั้นสูง"
+                  <template v-slot:label>
+                    {{
+                      `ลำดับการแสดผล ${
+                        store.formFilter.dateAppoint
+                          ? store.formFilter.dateAppoint === "ASC"
+                            ? "เก่า-ล่าสุด"
+                            : "ล่าสุด-เก่า"
+                          : ""
+                      }`
+                    }}
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.displayOrderOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectDisplayOrderType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </div>
+
+              <div
+                v-if="empType === 'officer'"
+                class="row q-gutter-sm justify-start"
               >
-                <q-tooltip
-                  >ไปยังหน้าการค้นหาขั้นสูง (Advanced search)</q-tooltip
+                <q-toggle
+                  v-model="store.formFilter.isProbation"
+                  color="primary"
+                  label="ทดลองปฏิบัติหน้าที่ราชการ"
+                  class="q-pr-sm"
+                  @update:model-value="getSearch"
+                />
+
+                <q-separator inset vertical class="lineFil" />
+
+                <q-toggle
+                  v-model="store.formFilter.isShowRetire"
+                  color="primary"
+                  label="แสดงข้อมูลผู้พ้นจากราชการ"
+                  class="q-pr-sm"
+                  @update:model-value="getSearch"
+                />
+
+                <q-btn-dropdown
+                  v-if="store.formFilter.isShowRetire"
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
                 >
-              </q-btn>
+                  <template v-slot:label>
+                    {{
+                      store.labelOption.retireType !== "ทั้งหมด"
+                        ? store.labelOption.retireType
+                        : `${store.labelOption.retireType}`
+                    }}
+                    <q-btn
+                      v-if="store.labelOption.retireType !== 'ทั้งหมด'"
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      @click.stop.prevent="clearSelect('retireType')"
+                    />
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.retireTypeOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectRetireType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+
+                <q-separator inset vertical class="lineFil" />
+
+                <!-- <q-toggle
+                  v-if="store.formFilter.nodeId"
+                  v-model="store.formFilter.isAll"
+                  color="primary"
+                  label="แสดงตำแหน่งทั้งหมด"
+                  @update:model-value="getSearch"
+                /> -->
+
+                <q-btn-dropdown
+                  rounded
+                  flat
+                  dense
+                  label-color="white"
+                  dropdown-icon="mdi-chevron-down"
+                  class="q-px-sm"
+                >
+                  <template v-slot:label>
+                    {{ store.labelOption.sortName }}
+                  </template>
+                  <q-list>
+                    <q-item
+                      v-for="(item, index) in store.displayOrderOps"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click="selectDisplayOrderType(item)"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ item.name }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </div>
             </div>
-
-            <!-- <q-separator
-              inset
-              vertical
-              class="lineFil"
-              v-if="empType !== 'officer' && store.formFilter.nodeId"
-            /> -->
-
-            <!-- <q-toggle
-              v-if="empType !== 'officer' && store.formFilter.nodeId"
-              v-model="store.formFilter.isAll"
-              color="primary"
-              label="แสดงตำแหน่งทั้งหมด"
-              @update:model-value="getSearch"
-            /> -->
-          </div>
-          <div
-            class="row q-gutter-sm justify-start"
-            v-if="empType !== 'officer'"
-          >
-            <q-toggle
-              v-model="store.formFilter.isShowRetire"
-              color="primary"
-              label="แสดงข้อมูลผู้พ้นจากราชการ"
-              class="q-pr-sm"
-              @update:model-value="getSearch"
-            />
-            <q-btn-dropdown
-              v-if="store.formFilter.isShowRetire"
-              rounded
-              flat
-              dense
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-px-sm"
-            >
-              <template v-slot:label>
-                {{
-                  store.labelOption.retireType !== "ทั้งหมด"
-                    ? store.labelOption.retireType
-                    : `${store.labelOption.retireType}`
-                }}
+            <div class="col-2">
+              <div class="q-pt-sm flex justify-end">
                 <q-btn
-                  v-if="store.labelOption.retireType !== 'ทั้งหมด'"
-                  size="10px"
                   flat
-                  round
-                  color="white"
-                  icon="close"
-                  @click.stop.prevent="clearSelect('retireType')"
-                />
-              </template>
-              <q-list>
-                <q-item
-                  v-for="(item, index) in store.retireTypeEmpOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectRetireType(item)"
+                  @click="goToAdvancedSearch"
+                  class="text-white"
+                  style="text-decoration: underline"
+                  label="การค้นหาขั้นสูง"
                 >
-                  <q-item-section>
-                    <q-item-label>{{ item.name }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-
-            <q-separator inset vertical class="lineFil" />
-
-            <q-btn-dropdown
-              rounded
-              flat
-              dense
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-px-sm"
-            >
-              <template v-slot:label>
-                {{
-                  `ลำดับการแสดผล ${
-                    store.formFilter.dateAppoint
-                      ? store.formFilter.dateAppoint === "ASC"
-                        ? "เก่า-ล่าสุด"
-                        : "ล่าสุด-เก่า"
-                      : ""
-                  }`
-                }}
-              </template>
-              <q-list>
-                <q-item
-                  v-for="(item, index) in store.displayOrderOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectDisplayOrderType(item)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ item.name }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
+                  <q-tooltip
+                    >ไปยังหน้าการค้นหาขั้นสูง (Advanced search)</q-tooltip
+                  >
+                </q-btn>
+              </div>
+            </div>
           </div>
-
-          <div
-            v-if="empType === 'officer'"
-            class="row q-gutter-sm justify-start"
-          >
-            <q-toggle
-              v-model="store.formFilter.isProbation"
-              color="primary"
-              label="ทดลองปฏิบัติหน้าที่ราชการ"
-              class="q-pr-sm"
-              @update:model-value="getSearch"
-            />
-
-            <q-separator inset vertical class="lineFil" />
-
-            <q-toggle
-              v-model="store.formFilter.isShowRetire"
-              color="primary"
-              label="แสดงข้อมูลผู้พ้นจากราชการ"
-              class="q-pr-sm"
-              @update:model-value="getSearch"
-            />
-
-            <q-btn-dropdown
-              v-if="store.formFilter.isShowRetire"
-              rounded
-              flat
-              dense
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-            >
-              <template v-slot:label>
-                {{
-                  store.labelOption.retireType !== "ทั้งหมด"
-                    ? store.labelOption.retireType
-                    : `${store.labelOption.retireType}`
-                }}
-                <q-btn
-                  v-if="store.labelOption.retireType !== 'ทั้งหมด'"
-                  size="10px"
-                  flat
-                  round
-                  color="white"
-                  icon="close"
-                  @click.stop.prevent="clearSelect('retireType')"
-                />
-              </template>
-              <q-list>
-                <q-item
-                  v-for="(item, index) in store.retireTypeOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectRetireType(item)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ item.name }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-
-            <q-separator inset vertical class="lineFil" />
-
-            <!-- <q-toggle
-              v-if="store.formFilter.nodeId"
-              v-model="store.formFilter.isAll"
-              color="primary"
-              label="แสดงตำแหน่งทั้งหมด"
-              @update:model-value="getSearch"
-            /> -->
-
-            <q-btn-dropdown
-              rounded
-              flat
-              dense
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-px-sm"
-            >
-              <template v-slot:label>
-                {{ store.labelOption.sortName }}
-              </template>
-              <q-list>
-                <q-item
-                  v-for="(item, index) in store.displayOrderOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectDisplayOrderType(item)"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ item.name }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-          </div>
-          <!-- <div class="row justify-center">
-            <a href="/report/registry" class="text-white"> Advanced search </a>
-          </div> -->
         </div>
       </div>
     </q-card-section>