เพิ่ม filter ใน selecter

-พ้นราชการ
-ออกคำสั่ง

src/modules/06_retirement/views/Main.vue

@@ -21,6 +21,9 @@ const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 
 const fiscalyear = ref<number>();
+const yearOptionsFilter = ref<any>({
+  yearOptions: [],
+});
 const actionOption = ref<resMain[]>([]);
 
 const visibleColumns = ref<string[]>([
@@ -69,15 +72,19 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
-const yearOptions = reactive<any[]>([]);
+const yearOptions = ref<any[]>([]);
 
 onMounted(() => {
   filteryear();
 });
 // หาปีปัจจุบัน
 const filteryear = () => {
-  yearOptions.push({ id: currentYear, name: currentYear + 543 });
-  fiscalyear.value = yearOptions[0].id;
+  yearOptions.value = [{ id: currentYear, name: currentYear + 543 }];
+  yearOptions.value.push({ id: currentYear, name: currentYear + 543 });
+  //   fiscalyear.value = yearOptions[0].id;
+
+  yearOptionsFilter.value = [{ id: currentYear, name: currentYear + 543 }];
+  yearOptionsFilter.value.push({ id: currentYear, name: currentYear + 543 });
   fetchRetirement(type.value, currentYear);
 };
 // ประกาศเกษียณอายุราชการ
@@ -136,6 +143,15 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+const filterSelector = (val: any, update: Function, year: any) => {
+  update(() => {
+    yearOptions.value = yearOptionsFilter.value.filter(
+      (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+    );
+  });
+};
+
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -209,8 +225,12 @@ const typeReportChangeName = (val: string) => {
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
+                use-input
                 :hide-dropdown-icon="false"
                 style="min-width: 150px"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'yearOptions'
+                      ) "
               />
               <div>
                 <popupAdd

src/modules/10_order/views/Main.vue

@@ -18,6 +18,15 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const DataStore = useOrderPlacementDataStore();
 
+const OpsFilterYear = ref<any>({
+  fiscalyearOP: [],
+});
+const OpsFilterOrderType = ref<any>({
+  OrderTypeOption: [],
+});
+const OpsFilterOrderStatus = ref<any>({
+  OrderStatusOption: [],
+});
 const pagination = ref({
   descending: true,
   page: 1,
@@ -144,6 +153,16 @@ const OriginalDataFetch = async () => {
         OrderType: e.orderTypeName,
         orderTypeValue: e.orderTypeValue,
       }));
+      //   OpsFilterYear.value.fiscalYear = res.data.result.map((e: any) => ({
+      //     fiscalYear: Number(e.fiscalYear),
+      //   }));
+      OpsFilterOrderStatus.value.OrderStatus = res.data.result.map(
+        (e: any) => ({
+          OrderStatus: e.orderStatusName,
+        })
+      );
+      console.log(fiscalyear.value);
+      console.log(OrderStatus.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -180,26 +199,40 @@ const redirectToPage = (id?: string, status?: string) => {
 const clickAdd = () => {
   router.push({ name: "OrderAdd" });
 };
+const Ops = ref<any>({
+  fiscalyearOP: [],
+});
 
 // รายการข้อมูลปีงบประมาณ
 const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearOP = ref<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const fiscalyearFilter1 = ref<any>([]);
 const fiscalYearFilter = async () => {
   await http.get(config.API.yearOptionsOrder()).then((res) => {
     const response = res.data.result;
-    fiscalyearOP.push(...response);
+    fiscalyearOP.value = [{ id: 0, name: "ทั้งหมด" }];
+    fiscalyearOP.value.push(...response);
+
+    fiscalyearFilter1.value = [{ id: 0, name: "ทั้งหมด" }];
+    fiscalyearFilter1.value.push(...response);
   });
 };
 
 // รายการข้อมูลประเภทคำสั่ง
 const OrderType = ref<string>("");
-const OrderTypeOption = reactive<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
+const OrderTypeFilter1 = ref<any>([]);
+const OrderTypeOption = ref<DataOption1[]>([{ id: "", name: "ทั้งหมด" }]);
+
 const OrderTypeFilter = async () => {
   await http
     .get(config.API.typeOrder())
     .then((res) => {
       const response = res.data.result;
-      OrderTypeOption.push(...response);
+      OrderTypeOption.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeOption.value.push(...response);
+
+      OrderTypeFilter1.value = [{ id: "", name: "ทั้งหมด" }];
+      OrderTypeFilter1.value.push(...response);
     })
     .catch((e) => {
       messageError($q, e);
@@ -208,9 +241,10 @@ const OrderTypeFilter = async () => {
 
 // รายการข้อมูลสถานะคำสั่ง
 const OrderStatus = ref<string>("ทั้งหมด");
-const OrderStatusOption = reactive<DataOption1[]>([
+const OrderStatusOption = ref<DataOption1[]>([
   { id: "ทั้งหมด", name: "ทั้งหมด" },
 ]);
+const OrderStatusFilter1 = ref<any>([]);
 const addedOrderStatusValues: string[] = [];
 const OrderStatusFilter = async () => {
   for (let data of OriginalData.value) {
@@ -224,9 +258,16 @@ const OrderStatusFilter = async () => {
     }
 
     if (!addedOrderStatusValues.includes(OrderStatusValue)) {
-      OrderStatusOption.push({
+      OrderStatusOption.value = [{ id: "ทั้งหมด", name: "ทั้งหมด" }];
+      OrderStatusOption.value.push({
         // id: OrderStatusValue,
-        id: OrderStatusOption.length.toString(),
+        id: OrderStatusOption.value.length.toString(),
+        name: OrderStatusValue,
+      });
+      OrderStatusFilter1.value = [{ id: "ทั้งหมด", name: "ทั้งหมด" }];
+      OrderStatusFilter1.value.push({
+        // id: OrderStatusValue,
+        id: OrderStatusFilter1.value.length.toString(),
         name: OrderStatusValue,
       });
       addedOrderStatusValues.push(OrderStatusValue);
@@ -254,6 +295,34 @@ const searchFilterTable = async () => {
   UpdataData.value = DataStore.DataMainUpdateOrder;
 };
 
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "fiscalyearOP":
+      update(() => {
+        fiscalyearOP.value = fiscalyearFilter1.value.filter(
+          (v: any) => v.name.valueOf(val) > -1
+        );
+      });
+      break;
+    case "OrderTypeOption":
+      update(() => {
+        OrderTypeOption.value = OrderTypeFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "OrderStatusOption":
+      update(() => {
+        OrderStatusOption.value = OrderStatusFilter1.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
@@ -278,12 +347,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
             option-value="id"
             option-label="name"
             lazy-rules
+            use-input
             hide-bottom-space
             :readonly="false"
             :borderless="false"
             :outlined="true"
             :hide-dropdown-icon="false"
             @update:model-value="searchFilterTable"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
+                      ) "
           />
           <div>
             <q-btn
@@ -350,12 +423,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   :options="OrderTypeOption"
                   option-value="id"
                   lazy-rules
+                  use-input
                   hide-bottom-space
                   :readonly="false"
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
                   @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'OrderTypeOption'
+                    ) "
                 />
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3">
@@ -369,12 +446,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   :options="OrderStatusOption"
                   option-value="name"
                   lazy-rules
+                  use-input
                   hide-bottom-space
                   :readonly="false"
                   :borderless="false"
                   :outlined="true"
                   :hide-dropdown-icon="false"
                   @update:model-value="searchFilterTable"
+                  @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'OrderStatusOption'
+                      ) "
                 />
               </div>
               <q-space />