เพิ่มฟิลเตอร์

src/modules/05_placement/views/08_otherMain.vue

@@ -19,8 +19,8 @@ import Dialogbody from "@/modules/05_placement/components/Other/DialogOrders.vue
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const storeFn = useTransferDataStore();
-const { statusText } = storeFn;
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const {
   showLoader,
   hideLoader,
@@ -32,6 +32,7 @@ const {
 } = useCounterMixin();
 
 const modal = ref<boolean>(false);
+const status = ref<string>("");
 
 /** Table*/
 const rows = ref<listMain[]>([]); //รายการอื่นๆ
@@ -133,7 +134,7 @@ const pagination = ref({
 async function fecthlistOthet() {
   showLoader();
   await http
-    .get(config.API.otherMain())
+    .get(config.API.otherMain() + `?status=${status.value}`)
     .then((res) => {
       let response = res.data.result;
       rows.value = response;
@@ -221,7 +222,42 @@ onMounted(() => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp.filter((item:any)=> item.id !== 'PENDING')"
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              fill-input
+              use-input
+              hide-selected
+              bg-color="white"
+              @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              @update:model-value="(value:string)=>{(status = value),fecthlistOthet()}"
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="status" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="(status = ''), fecthlistOthet()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="popup()"