เพิ่ม 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