รายการผังบัญชีเงินเดือน => fix bug

src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -59,7 +58,9 @@ const formData = reactive<FormData>({
 });
 
 const posType = ref<SalaryPosType[]>([]);
+const salaryPosTypeOptionMain = ref<DataOption[]>([]);
 const salaryPosTypeOption = ref<DataOption[]>([]);
+const salaryPosLevelOptionMain = ref<DataOption[]>([]);
 const salaryPosLevelOption = ref<DataOption[]>([]);
 
 const title = computed(() => {
@@ -73,7 +74,9 @@ const title = computed(() => {
   return name;
 });
 
-/** fiunction fetch ข้อมูลประเภทตำแหน่ง*/
+/**
+ * fiunction fetch ข้อมูลประเภทตำแหน่ง
+ */
 function fetchPosType() {
   http
     .get(config.API.salaryPosType)
@@ -83,6 +86,7 @@ function fetchPosType() {
         id: e.id,
         name: e.posTypeName,
       }));
+      salaryPosTypeOptionMain.value = listOption;
       salaryPosTypeOption.value = listOption;
     })
     .catch((err) => {
@@ -90,7 +94,9 @@ function fetchPosType() {
     });
 }
 
-/** fiunction fetch ข้อมูลระดับตำแหน่ง*/
+/**
+ * fiunction fetch ข้อมูลระดับตำแหน่ง
+ */
 function fetchPosLevel(id: string) {
   const filterLevel = posType.value.find((e: SalaryPosType) => e.id === id);
   const listOption =
@@ -99,6 +105,7 @@ function fetchPosLevel(id: string) {
       name: e.posLevelName,
     })) || [];
 
+  salaryPosLevelOptionMain.value = listOption;
   salaryPosLevelOption.value = listOption;
   if (!listOption.some((e: DataOption) => e.id === formData.posLevelId)) {
     formData.posLevelId = "";
@@ -134,14 +141,15 @@ function fetchSalaryDetail(id: string) {
     });
 }
 
-/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
+/**
+ * callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog
+ */
 watch(
   () => modal.value,
   () => {
     if (modal.value) {
-      if (salaryPosTypeOption.value.length === 0) {
+      fetchPosType();
-        fetchPosType();
+
-      }
       if (props.typeAction === "edit") {
         setTimeout(() => {
           if (props.data) {
@@ -155,13 +163,17 @@ watch(
   }
 );
 
-/** function ปืด Dialog*/
+/**
+ * function ปืด Dialog
+ */
 function closeDialog() {
   modal.value = !modal.value;
   clearFormData();
 }
 
-/** function เคลียข้อมูล form*/
+/**
+ * function เคลียข้อมูล form
+ */
 function clearFormData() {
   formData.name = "";
   formData.posTypeId = "";
@@ -175,7 +187,9 @@ function clearFormData() {
   isReadonly.value = false;
 }
 
-/** function บัยทึกข้อมูลผังบัญชีเงินเดือน*/
+/**
+ * function บัยทึกข้อมูลผังบัญชีเงินเดือน
+ */
 function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -196,7 +210,9 @@ function onSubmit() {
   });
 }
 
-/** function checkEndDate*/
+/**
+ *  function checkEndDate
+ */
 function checkEndDate() {
   if (formData.endDate !== null && formData.startDate !== null) {
     if (formData.endDate < formData.startDate) {
@@ -204,6 +220,47 @@ function checkEndDate() {
     }
   }
 }
+
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ * @param type ประเภท select
+ */
+function filterSelector(val: string, update: Function, type: string) {
+  switch (type) {
+    case "posType":
+      update(() => {
+        formData.posTypeId = "";
+        salaryPosTypeOption.value = salaryPosTypeOptionMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+    case "posLevel":
+      update(() => {
+        formData.posLevelId = "";
+        salaryPosLevelOption.value = salaryPosLevelOptionMain.value.filter(
+          (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+}
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 
 <template>
@@ -219,6 +276,7 @@ function checkEndDate() {
                 <div class="col-xs-12 col-md-4">
                   <q-input
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     ref="nameRef"
                     dense
                     hide-bottom-space
@@ -235,6 +293,7 @@ function checkEndDate() {
                 <div class="col-xs-12 col-md-4">
                   <q-select
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     ref="posTypeRef"
                     dense
                     hide-bottom-space
@@ -248,13 +307,25 @@ function checkEndDate() {
                     label="ประเภทตำแหน่ง/กลุ่ม"
                     :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
                     lazy-rules
+                    use-input
                     @update:model-value="fetchPosLevel"
-                  />
+                    @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn ,'posType')"
+                  >
+                    <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-xs-12 col-md-4">
                   <q-select
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     ref="posLevelRef"
                     dense
                     hide-bottom-space
@@ -268,8 +339,19 @@ function checkEndDate() {
                     label="ระดับ"
                     :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
                     lazy-rules
+                    use-input
                     :disable="formData.posTypeId === ''"
-                  />
+                    @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn ,'posLevel')"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template></q-select
+                  >
                 </div>
 
                 <div class="row col-12">
@@ -298,6 +380,7 @@ function checkEndDate() {
                     :enableTimePicker="false"
                     week-start="0"
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -334,6 +417,7 @@ function checkEndDate() {
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     menu-class-name="modalfix"
                     v-model="formData.startDate"
                     :locale="'th'"
@@ -378,6 +462,7 @@ function checkEndDate() {
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     menu-class-name="modalfix"
                     v-model="formData.endDate"
                     :locale="'th'"
@@ -420,6 +505,7 @@ function checkEndDate() {
 
                 <div class="col-12">
                   <q-input
+                    :class="getClass(!isReadonly)"
                     :readonly="isReadonly"
                     v-model="formData.details"
                     outlined

src/modules/13_salary/views/salaryChart.vue

@@ -122,7 +122,9 @@ const isActive = ref<boolean>(false);
 const typeAction = ref<string>("");
 const dataRow = ref<Salary>();
 
-/** function  fetch ข้อมูลรายการผังบัญชีเงินเดือน */
+/**
+ * function  fetch ข้อมูลรายการผังบัญชีเงินเดือน
+ */
 function fetchListSalaly() {
   showLoader();
   const page = formQuery.page.toString();
@@ -219,7 +221,9 @@ function onClickUpload(type: string, id: string, active: boolean) {
   isActive.value = active;
 }
 
-/** callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน่าหรือ แถว*/
+/**
+ * callbackFunction ทำงานเมื่อมีการ เปลี่ยนหน่าหรือ แถว
+ */
 watch([() => formQuery.page, () => formQuery.pageSize], () => {
   fetchListSalaly();
 });
@@ -233,7 +237,9 @@ function updatePagination(newPagination: NewPagination) {
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-/** function ค้นหาข้อมูลตาม keyword*/
+/**
+ * function ค้นหาข้อมูลตาม keyword
+ */
 function filterFn(page: number) {
   page !== 1 ? (formQuery.page = 1) : fetchListSalaly();
 }