เพิ่ม filter ตำแหน่งสามารถพิมพ์เพื่อนค้นหาได้

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

@@ -45,6 +45,7 @@ const props = defineProps({
 
 const posTypeOp = ref<DataOptions[]>([]);
 const posNameOp = ref<DataOptions[]>([]);
+const posNameOpMain = ref<DataOptions[]>([]);
 const groupOldOp = ref<DataOptions[]>([]);
 const posLevelOp = ref<any[]>([]);
 const posNameListOp = ref<DataListOptions[]>([]);
@@ -205,7 +206,7 @@ function getPosName() {
     .then((res) => {
       const dataOp = res.data.result;
       posNameListOp.value = res.data.result;
-      posNameOp.value = [
+      posNameOpMain.value = [
         ...new Map(
           dataOp.map((i: DataListOptions) => [i.posDictName, i])
         ).values(),
@@ -230,7 +231,7 @@ function getPosNameEdit() {
     .then((res) => {
       const dataOp = res.data.result;
       posNameListOp.value = res.data.result;
-      posNameOp.value = [
+      posNameOpMain.value = [
         ...new Map(
           dataOp.map((i: DataListOptions) => [i.posDictName, i])
         ).values(),
@@ -325,6 +326,20 @@ watch(
     }
   }
 );
+
+/**
+ * function ต้นหาข้อมูลของ Option
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+ function filterOption(val: any, update: Function) {
+  update(() => {
+    posNameOp.value = posNameOpMain.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -370,9 +385,17 @@ watch(
                 option-value="name"
                 emit-value
                 lazy-rules
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
                 hide-bottom-space
                 @update:model-value="getPosLevel()"
-              />
+              >
+              <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

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

@@ -5,7 +5,7 @@ import type {
   ListData,
   ResponseData,
 } from "@/modules/13_salary/interface/index/EmployeeChart";
-import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { NewPagination,DataOption } from "@/modules/13_salary/interface/index/Main";
 import DialogFormCriteria from "@/modules/13_salary/components/salaryEmployeeChart/DialogFormCriteria.vue";
 
 /** importType*/
@@ -17,6 +17,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const posTypeOp = ref<DataOption[]>([])
+const posType = ref<string>("");
 const maxPage = ref<number>(1);
 const $q = useQuasar();
 const {
@@ -162,10 +164,10 @@ function getData() {
   http
     .get(
       config.API.salaryFormula() +
-        `/?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
+        `/?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}&posTypeId=${posType.value}`
     )
     .then((res) => {
-      console.log(res.data.result);
+
       const data = res.data.result.data;
       const total = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
@@ -193,8 +195,6 @@ function getData() {
 function editPopup(params: any) {
   modalForm.value = true;
   isStatusEdit.value = true;
-  console.log(params);
-
   dataRow.value = params;
 }
 
@@ -228,13 +228,45 @@ watch(
   }
 );
 
+/** ดึงข้อมูลกลุ่มงาน */
+function getPosType(){
+  http
+  .get(config.API.salaryEmployeePosType())
+  .then((res)=>{
+    const data = res.data.result
+    posTypeOp.value = data.map((item:any)=>({
+      id:item.id,
+      name:item.posTypeName
+    }))
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+
+  })
+}
+
 onMounted(() => {
   getData();
+  getPosType()
 });
 </script>
 
 <template>
   <q-toolbar class="text-primary" style="padding: 0px">
+    <div class="col-3">
+      <q-select
+        v-model="posType"
+        label="กลุ่มงาน"
+        outlined
+        dense
+        :options="posTypeOp"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        @update:model-value="getData"
+      />
+    </div>
     <q-btn flat round dense icon="add" @click="() => (modalForm = true)">
       <q-tooltip>เพิ่ม </q-tooltip>
     </q-btn>
@@ -278,7 +310,7 @@ onMounted(() => {
     row-key="name"
     class="custom-header-table"
     v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100,200]"
+    :rows-per-page-options="[20, 50, 100, 200]"
     :visible-columns="visibleColumns"
     @update:pagination="updatePageSize"
   >