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

src/modules/05_placement/views/04_helpGovernmentMain.vue

@@ -18,8 +18,8 @@ import Dialogbody from "@/modules/05_placement/components/Help-Government/Dialog
 
 const $q = useQuasar();
 const router = useRouter();
-const transferStore = useTransferDataStore();
-const { statusText } = transferStore;
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -34,6 +34,8 @@ const {
 } = mixin;
 
 /** Table*/
+const status = ref<string>("");
+
 const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่งช่วยราชการ;
 const filterKeyword = ref<string>(""); //คำค้นหารายการช่วยราชการ
 const filterKeyword2 = ref<string>(""); //คำค้นหารายการออกคำสั่ง
@@ -182,7 +184,7 @@ const visibleColumns = ref<string[]>([
 async function getData() {
   showLoader();
   await http
-    .get(config.API.officerMain())
+    .get(config.API.officerMain() + `?status=${status.value}`)
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
@@ -268,7 +270,42 @@ onMounted(async () => {
   <q-card flat bordered class="col-12">
     <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),getData()}"
+            >
+              <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 = ''), getData()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"