วินัยรองรับลูกจ้างประจำ กทม.

src/modules/04_registryPerson/components/DialogHistory.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
+import { useRouter,useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -22,6 +22,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 //use
 const myForm = ref<QForm>();
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
@@ -29,7 +30,7 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true }); //แสดง popup ประวัติถือครองตำแหน่ง
 
 //ตัวแปร
-const employeeClass = ref<string>(""); //ประเภทข้า่รายการ
+const employeeClass = ref<string>(route.name == "registryNew" ? 'officer':'perm'); //ประเภทข้า่รายการ
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
 const positionKeyword = ref<string>("");
@@ -252,23 +253,23 @@ function closeDialog() {
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 850px; max-width: 80vw">
+    <q-card style="width: 60vw; max-width: 80vw">
       <DialogHeader :tittle="'ประวัติถือครองตำแหน่ง'" :close="closeDialog" />
 
       <q-separator />
 
       <q-card-section class="q-pa-sm">
         <q-form ref="myForm">
-          <div class="col-12 bg-grey-2 q-pa-sm">
-            <div class="col-12 row q-pb-sm q-col-gutter-sm items-center"></div>
-            <q-toolbar>
-              <div class="row q-col-gutter-sm">
+          <div class="bg-grey-2 q-pa-sm">
+            <div class="row q-col-gutter-sm no-warp full-width">
+              <div class="col-3">
                 <q-select
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
                   outlined
                   dense
                   lazy-rules
+                  bg-color="white"
                   v-model="employeeClass"
                   emit-value
                   map-options
@@ -279,15 +280,17 @@ function closeDialog() {
                   use-input
                   input-debounce="0"
                   @update:model-value="changeEmployeeClass"
-                  style="width: 250px"
                 />
+              </div>
 
+              <div class="col-3">
                 <q-select
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
                   outlined
                   dense
                   lazy-rules
+                  bg-color="white"
                   v-model="typeKeyword"
                   emit-value
                   map-options
@@ -298,19 +301,61 @@ function closeDialog() {
                   use-input
                   input-debounce="0"
                   @update:model-value="selectTypeKeyword(typeKeyword)"
+                />
+              </div>
+              <div class="col-3" v-if="typeKeyword === 'no'">
+                <q-input
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="Keyword"
+                  placeholder="ตำแหน่งเลขที่"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก ตำแหน่งเลขที่'}`]"
+                  hide-bottom-space
                   style="width: 250px"
                 />
               </div>
 
-              <q-space />
-              <q-btn
-                outline
-                color="primary"
-                label="ค้นหา"
-                @click="clickSearch(employeeClass)"
-                icon="mdi-magnify"
-              />
-            </q-toolbar>
+              <div class="col-3" v-if="typeKeyword === 'position'">
+                <q-select
+                  hide-bottom-space
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
+                  outlined
+                  dense
+                  v-model="positionKeyword"
+                  emit-value
+                  bg-color="white"
+                  map-options
+                  :options="options"
+                  option-label="name"
+                  option-value="id"
+                  :label="`${' เลือกตำแหน่ง'}`"
+                  use-input
+                  input-debounce="0"
+                  @filter="filterFn"
+                  style="width: 250px"
+                  behavior="menu"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template></q-select
+                >
+              </div>
+              <div :class="typeKeyword ? 'col-3':'col-3 offset-3'">
+                <q-btn
+                  class="on-right bg-white full-width"
+                  outline
+                  color="primary"
+                  label="ค้นหา"
+                  @click="clickSearch(employeeClass)"
+                  icon="mdi-magnify"
+                />
+              </div>
+            </div>
           </div>
 
           <div class="col-12 q-mt-sm">

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

@@ -82,8 +82,9 @@ function fetchOptionGroup() {
 /**
  * function fetch รายชื่อข้อมูลทะเบียนประวัติ
  */
-function fetchDataPerson() {
+async function fetchDataPerson() {
   showLoader();
+  dataPersonMain.value = [];
   let queryParams: QueryParams = {
     page: store.formFilter.page,
     pageSize: store.formFilter.pageSize,
@@ -129,58 +130,67 @@ function fetchDataPerson() {
     queryParams.isAll = store.formFilter.isAll;
   }
 
-  http
+  await http
     .get(
       config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
       { params: queryParams }
     )
-    .then((res) => {
+    .then(async (res) => {
+      const dataList = await res.data.result.data;
       maxPage.value = Math.ceil(
         res.data.result.total / store.formFilter.pageSize
       );
-      dataPersonMain.value = res.data.result.data;
+      dataPersonMain.value = dataList;
       total.value = res.data.result.total;
       isShowBtnFilter.value = true;
-      insertAvatar(res.data.result.data);
+      if (dataList) {
+        insertAvatar(dataList).then(() => {
+          hideLoader();
+        });
+      }
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
       hideLoader();
-    });
+    })
+    .finally(() => {});
 }
 
 /**
  * function fetch รูปโปรไฟล์
  * @param items ข้อมูลคน
  */
-function insertAvatar(items: DataPerson[]) {
-  items.map((x: DataPerson, index: number) => {
-    if (x.avatarName != null) {
-      http
-        .get(
-          config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", x.id, x.avatarName)
-        )
-        .then((img) => {
+async function insertAvatar(items: DataPerson[]) {
+  await Promise.all(
+    items.map(async (x: DataPerson, index: number) => {
+      try {
+        if (x.avatarName != null) {
+          const img = await http.get(
+            config.API.fileByFile(
+              "ทะเบียนประวัติ",
+              "โปรไฟล์",
+              x.id,
+              x.avatarName
+            )
+          );
           dataPersonMain.value[index] = {
             ...x,
             avatar: img.data.downloadUrl,
           };
-        })
-        .catch(() => {
+        } else {
           dataPersonMain.value[index] = {
             ...x,
             avatar: avatar,
           };
-        });
-    } else {
-      dataPersonMain.value[index] = {
-        ...x,
-        avatar: avatar,
-      };
-    }
-  });
+        }
+      } catch (error) {
+        dataPersonMain.value[index] = {
+          ...x,
+          avatar: avatar,
+        };
+      }
+    })
+  );
 }
 
 /**