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

src/modules/05_placement/views/06_appointPromoteMain.vue

@@ -22,8 +22,8 @@ import DialogOrgSelect from "@/components/Dialogs/DialogOrgSelect.vue"; // เ
 
 const $q = useQuasar();
 const router = useRouter();
-const storeFn = useTransferDataStore();
-const { statusText } = storeFn;
+const store = useTransferDataStore();
+const { statusText, filterOption } = useTransferDataStore();
 const {
   showLoader,
   hideLoader,
@@ -34,6 +34,8 @@ const {
   onSearchDataTable,
 } = useCounterMixin();
 
+const status = ref<string>("");
+
 const modal = ref<boolean>(false); //แสดง popup ส่งไปออกคำสั่ง
 const modalTree = ref<boolean>(false); //แสดง popup  เลือกหน่วยงานที่แต่งตั้ง - เลื่อน - ย้าย
 const posType = ref<string>(""); //ประเภทตำแหน่ง
@@ -176,7 +178,7 @@ const pagination = ref({
 async function fecthlistappointment() {
   showLoader();
   await http
-    .get(config.API.appointmentMain())
+    .get(config.API.appointmentMain()+`?status=${status.value}`)
     .then((res) => {
       let response = res.data.result;
       listRecevice.value = response;
@@ -316,6 +318,41 @@ onMounted(async () => {
     <div class="row q-pa-md">
       <div class="col-12">
         <div class="row col-12 q-col-gutter-sm">
+          <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),fecthlistappointment()}"
+            >
+              <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 = ''), fecthlistappointment()"
+                  class="cursor-pointer"
+                  style="opacity: 0.6"
+                />
+              </template>
+            </q-select>
+          </div>
           <div>
             <q-btn
               v-if="checkPermission($route)?.attrIsUpdate"