From 8c0befa186a983bba6220b0ec697456ecd530c93 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 17 May 2024 15:50:22 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/04_registryNew/store.ts       |  10 +-
 src/modules/04_registryNew/views/list.vue | 282 ++++++----------------
 2 files changed, 88 insertions(+), 204 deletions(-)

diff --git a/src/modules/04_registryNew/store.ts b/src/modules/04_registryNew/store.ts
index 746c39ad8..5f15cf775 100644
--- a/src/modules/04_registryNew/store.ts
+++ b/src/modules/04_registryNew/store.ts
@@ -38,7 +38,15 @@ export const useRegistryNewDataStore = defineStore("registryNew", () => {
       id: e.id,
       name: e.posLevelName,
     }));
-    posLevelOps.value = list;
+    const seen = new Set();
+    posLevelOps.value = list.filter((item: DataOption) => {
+      if (seen.has(item.name)) {
+        return false;
+      } else {
+        seen.add(item.name);
+        return true;
+      }
+    });
   }
   return {
     fetchType,
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index 5118a2721..e0860579e 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch } from "vue";
+import { ref, reactive, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
-import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
 import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
 import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
@@ -64,36 +63,62 @@ const conditionTotal = computed(() => {
 
 /** function เรียกข้อมูลประเภทตำแหน่ง*/
 function fetchType() {
-  if (store.posTypeOps.length === 0) {
-    http
-      .get(config.API.orgPosType)
-      .then((res) => {
-        store.fetchType(res.data.result);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
+  http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      store.fetchType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** function เรียกข้อมูลระดับตำแหน่ง*/
 function fetchLevel() {
-  if (store.posLevelOps.length === 0) {
-    http
-      .get(config.API.orgPosLevel)
-      .then((res) => {
-        store.fetchLevel(res.data.result);
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
+  http
+    .get(config.API.orgPosLevel)
+    .then((res) => {
+      store.fetchLevel(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchOptionGroup() {
+  showLoader();
+  http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      store.fetchType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchLevelGroup() {
+  showLoader();
+  http
+    .get(config.API.orgEmployeelevel)
+    .then((res) => {
+      store.fetchLevel(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function fetchYearOption() {
@@ -146,7 +171,6 @@ async function fetchDataPerson(search: boolean = false) {
     queryParams.isRetire = formFilter.isShowRetire;
   }
 
-  // check type person empType.value
   http
     .get(
       config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
@@ -162,9 +186,7 @@ async function fetchDataPerson(search: boolean = false) {
       messageError($q, err);
     })
     .finally(() => {
-      // setTimeout(() => {
       hideLoader();
-      // }, 500);
     });
 }
 
@@ -188,18 +210,6 @@ function insertAvatar(items: DataPerson[]) {
       });
   });
 }
-// const convertImageProfile = (id: string) => {
-//   return http
-//     .get(
-//       config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, "profile-" + id)
-//     )
-//     .then((res) => {
-//       return res.data.downloadUrl;
-//     })
-//     .catch(() => {
-//       return avatar;
-//     });
-// };
 
 function onClickShowFilter() {
   isShowFilter.value = !isShowFilter.value;
@@ -226,6 +236,19 @@ function onclickSearch() {
 function selectType(item: DataOption) {
   labelOption.type = item.name;
   empType.value = item.id;
+
+  labelOption.posType = "ทั้งหมด";
+  labelOption.posLevel = "ทั้งหมด";
+  if (item.id !== "officer") {
+    formFilter.isShowRetire = null;
+    formFilter.isProbation = null;
+    fetchOptionGroup();
+    fetchLevelGroup();
+  } else {
+    fetchType();
+    fetchLevel();
+  }
+
   fetchDataPerson();
 }
 
@@ -239,10 +262,6 @@ function selectPosLevel(item: DataOption) {
   fetchDataPerson();
 }
 
-function selectRetireYear(item: DataOption) {
-  labelOption.retireYear = item.name;
-}
-
 function clearSelect(t: string) {
   if (t === "posType") {
     labelOption.posType = "ทั้งหมด";
@@ -263,10 +282,6 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <!-- <div class="toptitle text-dark col-12 row items-center">
-    ข้อมูลทะเบียนประวัติ
-  </div> -->
-
   <q-card class="q-mt-md">
     <q-card-section class="card-img q-pb-lg">
       <div class="text-h5 text-center q-py-md text-weight-medium">
@@ -349,16 +364,6 @@ onMounted(async () => {
             >
               <template v-slot:label>
                 {{ `${labelOption.type}` }}
-
-                <!-- <q-btn
-                  size="10px"
-                  flat
-                  round
-                  color="white"
-                  icon="close"
-                  v-if="labelOption.type !== 'ประเภททั้งหมด'"
-                  @click.stop.prevent="clearSelect('type')"
-                /> -->
               </template>
               <q-list>
                 <q-item
@@ -384,7 +389,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              ><!-- class="custom-btn" -->
+            >
               <template v-slot:label>
                 {{
                   labelOption.posType !== "ทั้งหมด"
@@ -427,7 +432,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              ><!-- class="custom-btn" -->
+            >
               <template v-slot:label>
                 {{
                   labelOption.posLevel !== "ทั้งหมด"
@@ -446,7 +451,9 @@ onMounted(async () => {
                   @click.stop.prevent="clearSelect('posLevel')"
                 />
               </template>
-              <q-list style="height: 300px">
+              <q-list
+                :style="store.posLevelOps.length > 9 ? 'height: 450px' : ''"
+              >
                 <q-item
                   v-for="(item, index) in store.posLevelOps"
                   :key="index"
@@ -461,146 +468,15 @@ onMounted(async () => {
               </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"
-              >
-              <template v-slot:label>
-                {{ `ปีเกษียณ${labelOption.retireYear}` }}
-                <q-btn
-                  size="10px"
-                  flat
-                  round
-                  color="white"
-                  icon="close"
-                  v-if="labelOption.retireYear !== ''"
-                  @click.stop.prevent="clearSelect('retireYear')"
-                />
-              </template>
-              <q-list style="height: 300px">
-                <q-item
-                  v-for="(item, index) in store.yearOps"
-                  :key="index"
-                  clickable
-                  v-close-popup
-                  @click="selectRetireYear(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" /> -->
-
-            <!-- <datepicker
-              menu-class-name="modalfix"
-              v-model="formFilter.retireYear"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              clearable
-              style="width: 120px"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  class="cursor-pointer custom-select"
-                  rounded
-                  label-color="white"
-                  outlined
-                  dense
-                  input-style="color:white;"
-                  borderless
-                  :model-value="
-                    formFilter.retireYear === null
-                      ? null
-                      : formFilter.retireYear + 543
-                  "
-                  :label="`${'ปีเกษียณ'}`"
-                >
-                  <template v-slot:append>
-                    <q-btn
-                      size="10px"
-                      flat
-                      round
-                      color="white"
-                      icon="close"
-                      v-if="formFilter.retireYear !== null"
-                      @click.stop.prevent="clearSelect('retireYear')"
-                    />
-                  </template>
-                </q-input>
-              </template>
-            </datepicker> -->
-
-            <!-- <q-btn-dropdown
-              flat
-              dense
-              rounded
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              class="q-px-sm"
-              >
-              <template v-slot:label>
-                {{
-                  `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
-                }}
-                <q-btn
-                  size="10px"
-                  flat
-                  round
-                  color="white"
-                  icon="close"
-                  v-if="
-                    formFilter.rangeYear.min !== 0 ||
-                    formFilter.rangeYear.max !== 60
-                  "
-                  @click.stop.prevent="clearSelect('rangeYear')"
-                />
-              </template>
-              <div class="row justify-center">
-                <div class="col-12 q-pa-md text-center">
-                  <div>
-                    <span>จำนวนปี</span>
-                    <q-badge
-                      color="grey-4"
-                      text-color="black"
-                      class="q-ml-sm"
-                      :label="`${formFilter.rangeYear.min}-${formFilter.rangeYear.max}`"
-                    />
-                  </div>
-                  <div class="q-mt-lg">
-                    <q-range
-                      v-model="formFilter.rangeYear"
-                      :min="0"
-                      :max="60"
-                      :step="1"
-                      label
-                      color="primary"
-                      selection-color="blue"
-                      label-color="primary"
-                      thumb-color="blue"
-                    />
-                  </div>
-                </div>
-              </div>
-            </q-btn-dropdown> -->
-
-            <!-- <q-separator inset vertical class="lineFil" /> -->
+            <q-separator
+              inset
+              vertical
+              class="lineFil"
+              v-if="empType === 'officer'"
+            />
 
             <q-btn-dropdown
+              v-if="empType === 'officer'"
               flat
               dense
               rounded
@@ -608,7 +484,7 @@ onMounted(async () => {
               dropdown-icon="mdi-chevron-down"
               :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
               class="q-px-sm"
-              ><!-- class="custom-btn" -->
+            >
               <q-list>
                 <q-item clickable v-close-popup>
                   <q-item-section>