ผังบัญชีค่าจ้างลูกจ้างประจำ => fix bug

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -132,6 +132,17 @@ watch(
     }
   }
 );
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -153,6 +164,7 @@ watch(
                 <div class="col-xs-12 col-md-4">
                   <q-input
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     ref="nameRef"
                     dense
                     hide-bottom-space
@@ -171,12 +183,14 @@ watch(
                     ref="groupRef"
                     week-start="0"
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     dense
                     outlined
                     v-model="formData.group"
                     label="กลุ่มของผังบัญชีอัตราค่าจ้าง"
                     hide-bottom-space
-                    mask="########"
+                    mask="#"
+                    reverse-fill-mask
                     :rules="[
                       (val) => !!val || 'กรุณากรอกกลุ่มของผังบัญชีอัตราค่าจ้าง',
                     ]"
@@ -206,6 +220,7 @@ watch(
                     :enableTimePicker="false"
                     week-start="0"
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                   >
                     <template #year="{ year }">
                       {{ year + 543 }}
@@ -242,6 +257,7 @@ watch(
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     menu-class-name="modalfix"
                     v-model="formData.startDate"
                     :locale="'th'"
@@ -286,6 +302,7 @@ watch(
                 <div class="col-xs-12 col-md-4">
                   <datepicker
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     menu-class-name="modalfix"
                     v-model="formData.endDate"
                     :locale="'th'"
@@ -329,6 +346,7 @@ watch(
                 <div class="col-12">
                   <q-input
                     :readonly="isReadonly"
+                    :class="getClass(!isReadonly)"
                     v-model="formData.details"
                     outlined
                     dense

src/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue

@@ -32,9 +32,11 @@ const props = defineProps({
 });
 
 const posTypeOp = ref<DataOptions[]>([]);
+const posTypeOpMain = ref<DataOptions[]>([]);
 const posNameOp = ref<DataOptions[]>([]);
 const posNameOpMain = ref<DataOptions[]>([]);
 const groupOldOp = ref<DataOptions[]>([]);
+const groupOldOpMain = ref<DataOptions[]>([]);
 const posLevelOp = ref<any[]>([]);
 const posNameListOp = ref<DataListOptions[]>([]);
 
@@ -123,10 +125,12 @@ function getPosType() {
     .get(config.API.salaryEmployeePosType())
     .then((res) => {
       const dataOp = res.data.result;
-      posTypeOp.value = dataOp.map((item: any) => ({
+      const option = dataOp.map((item: any) => ({
         id: item.id,
         name: item.posTypeName,
       }));
+      posTypeOpMain.value = option;
+      posTypeOp.value = option;
     })
     .catch((e) => {
       messageError($q, e);
@@ -138,29 +142,31 @@ function getPosType() {
 
 /** ดึงข้อมูล ตำแหน่ง */
 function getPosName() {
-  formData.posName = "";
+  if (formData.posType) {
-  formData.posLevel = "";
+    formData.posName = "";
-  showLoader();
+    formData.posLevel = "";
-  http
+    showLoader();
-    .get(config.API.salaryEmployeePositionType(formData.posType.name))
+    http
-    .then((res) => {
+      .get(config.API.salaryEmployeePositionType(formData.posType.name))
-      const dataOp = res.data.result;
+      .then((res) => {
-      posNameListOp.value = res.data.result;
+        const dataOp = res.data.result;
-      posNameOpMain.value = [
+        posNameListOp.value = res.data.result;
-        ...new Map(
+        posNameOpMain.value = [
-          dataOp.map((i: DataListOptions) => [i.posDictName, i])
+          ...new Map(
-        ).values(),
+            dataOp.map((i: DataListOptions) => [i.posDictName, i])
-      ].map((i: any) => ({
+          ).values(),
-        id: i.id,
+        ].map((i: any) => ({
-        name: i.posDictName,
+          id: i.id,
-      }));
+          name: i.posDictName,
-    })
+        }));
-    .catch((e) => {
+      })
-      messageError($q, e);
+      .catch((e) => {
-    })
+        messageError($q, e);
-    .finally(() => {
+      })
-      hideLoader();
+      .finally(() => {
-    });
+        hideLoader();
+      });
+  }
 }
 
 /** ดึงข้อมูล ตำแหน่ง */
@@ -218,10 +224,12 @@ function getSalaryGroup() {
     .then((res) => {
       const list = res.data.result;
       const data = list.sort((a: any, b: any) => a.group - b.group);
-      groupOldOp.value = data.map((item: any) => ({
+      const option = data.map((item: any) => ({
         id: item.id,
         name: `กลุ่มที่ ${item.group}`,
       }));
+      groupOldOp.value = option;
+      groupOldOpMain.value = option;
     })
     .catch((e) => {
       messageError($q, e);
@@ -272,13 +280,47 @@ watch(
  * @param update  อัพเดทค่า
  * @param refData ดาต้าที่ต้องการฟิลเตอร์
  */
-function filterOption(val: any, update: Function) {
+function filterOption(val: any, update: Function, type: string) {
-  update(() => {
+  switch (type) {
-    posNameOp.value = posNameOpMain.value.filter(
+    case "group":
-      (v: any) => v.name.indexOf(val) > -1
+      update(() => {
-    );
+        formData.posType = "";
-  });
+        posTypeOp.value = posTypeOpMain.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "pos":
+      update(() => {
+        formData.posName = "";
+        posNameOp.value = posNameOpMain.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "groupOld":
+      update(() => {
+        groupOldOp.value = groupOldOpMain.value.filter(
+          (v: any) => v.name.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>
@@ -296,6 +338,7 @@ function filterOption(val: any, update: Function) {
               <div class="col-4">
                 <q-select
                   ref="posTypeRef"
+                  :class="getClass(true)"
                   dense
                   outlined
                   v-model="formData.posType"
@@ -307,12 +350,23 @@ function filterOption(val: any, update: Function) {
                   map-options
                   lazy-rules
                   hide-bottom-space
+                  use-input
                   @update:model-value="getPosName()"
-                />
+                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'group') "
+                >
+                  <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-4">
                 <q-select
                   ref="posNameRef"
+                  :class="getClass(true)"
                   dense
                   :readonly="formData.posType"
                   outlined
@@ -325,7 +379,7 @@ function filterOption(val: any, update: Function) {
                   emit-value
                   lazy-rules
                   use-input
-                  @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'pos')"
                   hide-bottom-space
                   @update:model-value="getPosLevel()"
                 >
@@ -341,6 +395,7 @@ function filterOption(val: any, update: Function) {
               <div class="col-4">
                 <q-select
                   :readonly="formData.posName"
+                  :class="getClass(true)"
                   ref="posLevelRef"
                   dense
                   outlined
@@ -353,11 +408,20 @@ function filterOption(val: any, update: Function) {
                   :rules="[(val) => !!val || 'กรุณาเลือกระดับชั้นงาน']"
                   lazy-rules
                   hide-bottom-space
-                />
+                >
+                  <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-8">
                 <q-input
+                  :class="getClass(true)"
                   dense
                   outlined
                   v-model="formData.reson"
@@ -368,12 +432,13 @@ function filterOption(val: any, update: Function) {
               <div class="col-12 text-bold">อัตราค่าจ้าง</div>
               <div class="col-4">
                 <q-input
+                  :class="getClass(true)"
                   ref="rateOldMinRef"
                   dense
                   outlined
                   v-model="formData.rateOldMin"
                   label="ขั้นต่ำสุด"
-                  mask="###,###,###,###"
+                  mask="###,###,###,###,###,###,###,###"
                   reverse-fill-mask
                   :rules="[
                     (val) => !!val || `${'กรุณากรอกอัตราค่าจ้าง ขั้นต่ำสุด'}`,
@@ -384,6 +449,7 @@ function filterOption(val: any, update: Function) {
               </div>
               <div class="col-4">
                 <q-select
+                  :class="getClass(true)"
                   ref="groupOldRef"
                   dense
                   outlined
@@ -401,16 +467,27 @@ function filterOption(val: any, update: Function) {
                   option-value="id"
                   lazy-rules
                   hide-bottom-space
-                />
+                  use-input
+                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
+                >
+                  <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-4">
                 <q-input
+                  :class="getClass(true)"
                   ref="rateMaxOldRef"
                   dense
                   outlined
                   v-model="formData.rateMaxOld"
                   label="ขั้นสูงสุดเดิม"
-                  mask="###,###,###,###"
+                  mask="###,###,###,###,###,###,###,###"
                   reverse-fill-mask
                   :rules="[
                     (val) =>
@@ -426,6 +503,7 @@ function filterOption(val: any, update: Function) {
               </div>
               <div class="col-4">
                 <q-select
+                  :class="getClass(true)"
                   ref="groupRateHighRef"
                   dense
                   outlined
@@ -441,16 +519,27 @@ function filterOption(val: any, update: Function) {
                   option-value="id"
                   emit-value
                   hide-bottom-space
-                />
+                  use-input
+                  @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn,'groupOld')"
+                >
+                  <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-4">
                 <q-input
+                  :class="getClass(true)"
                   ref="rateHighMaxRef"
                   dense
                   outlined
                   v-model="formData.rateHighMax"
                   label="อัตราค่าจ้างขั้นสูงใหม่"
-                  mask="###,###,###,###"
+                  mask="###,###,###,###,###,###,###,###"
                   reverse-fill-mask
                   :rules="[
                     (val) => !!val || `${'กรุณากรอกอัตราค่าจ้างขั้นสูงใหม่'}`,

src/modules/13_salary/components/salaryEmployeeChart/TabCriteria.vue

@@ -144,8 +144,9 @@ const modalForm = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const dataRow = ref<ListData>();
 
+const posTypeOpMain = ref<DataOption[]>([]);
 const posTypeOp = ref<DataOption[]>([]);
-const posType = ref<string>("");
+const posType = ref<string | null>("");
 const maxPage = ref<number>(1);
 const totalList = ref<number>(0);
 
@@ -168,6 +169,7 @@ function getPosType() {
 
       option.push(...test);
       posTypeOp.value = option;
+      posTypeOpMain.value = option;
     })
     .catch((e) => {
       messageError($q, e);
@@ -254,6 +256,20 @@ function onClickDelete(id: string) {
   });
 }
 
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    posType.value = null;
+    posTypeOp.value = posTypeOpMain.value.filter(
+      (v: DataOption) => v.name.toLowerCase().indexOf(val) > -1
+    );
+  });
+}
+
 /** callbackFuntioon ทำงานเมื่อมี่การอัปเดทแถว */
 watch(
   () => formFilter.pageSize,
@@ -292,7 +308,10 @@ onMounted(() => {
         option-value="id"
         emit-value
         map-options
+        use-input
         @update:model-value="filterFn"
+        @filter="(inputValue: string,
+            doneFn: Function) => filterSelector(inputValue, doneFn )"
       >
         <template v-if="posType" v-slot:append>
           <q-icon
@@ -304,6 +323,11 @@ onMounted(() => {
             class="cursor-pointer"
           />
         </template>
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
       </q-select>
     </div>
     <q-btn flat round dense icon="add" @click="() => (modalForm = true)">