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

src/modules/05_placement/views/03_receiveMain.vue

@@ -23,8 +23,8 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const {
   showLoader,
   hideLoader,
@@ -35,6 +35,7 @@ const {
   onSearchDataTable,
 } = mixin;
 
+const status = ref<string>("");
 const dataRecevice = ref<ResponseData[]>([]); //ข้อมูลรายการรับโอน
 const filters = ref<ResponseRow[]>([]); //ข้อมูลรายการรับโอน
 const dataRows = ref<ResponseRow>(); //ข้อมูลที่ต้องการเลือกหน่วยงานที่รับโอน
@@ -166,7 +167,7 @@ const columns = ref<QTableProps["columns"]>([
 async function fecthlistRecevice() {
   showLoader();
   await http
-    .get(config.API.receiveData())
+    .get(config.API.receiveData() + `?status=${status.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       dataRecevice.value = data;
@@ -353,7 +354,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12 q-mt-sm">
     <div class="row q-pa-md">
       <div class="col-12 q-gutter-sm">
-        <div class="row col-12">
+        <div class="row">
+          <div class="col-2">
+            <q-select
+              :model-value="status ? status : 'ทั้งหมด'"
+              outlined
+              dense
+              label="สถานะ"
+              :options="store.statusOp"
+              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),fecthlistRecevice()}"
+            >
+              <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 = ''), fecthlistRecevice()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsCreate"
             flat