filter ส่งไปออกคำสั่งอื่นๆ

src/modules/05_placement/components/Main.vue

@@ -425,7 +425,7 @@ function filterFnYear(val: string, update: any) {
               </template>
             </q-select>
             <q-select
-              class="col-xs-12 col-sm-3 col-md-2"
+              class="col-xs-12 col-sm-3 col-md-3"
               v-model="examType"
               label="ประเภทการสอบ"
               dense

src/modules/05_placement/components/Other/Dialogbody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed,watchEffect } from "vue";
+import { ref, computed, watchEffect } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
@@ -25,8 +25,8 @@ const props = defineProps({
   fecthlistOthet: Function,
   optionsType: Array,
   rows2: Array,
-  filterKeyword2:String,
+  filterKeyword2: String,
-  type:String,
+  type: String,
 });
 const visibleColumns2 = ref<string[]>([
   "no",
@@ -96,7 +96,6 @@ const emit = defineEmits([
   "update:filterKeyword2",
   "update:type",
   "update:selected",
-
 ]);
 const updateInput = (value: any) => {
   emit("update:filterKeyword2", value);
@@ -107,7 +106,7 @@ const updateInputType = (value: any) => {
 };
 //รีเซ็ตค่าในช่องค้นหา
 const Reset = () => {
-    emit("update:filterKeyword2", "");
+  emit("update:filterKeyword2", "");
 };
 //เปิด modal ยืนยัน
 const clickAddlist = () => {
@@ -117,7 +116,7 @@ const clickAddlist = () => {
 //อัพเดต ส่งไปออกคำสั่ง
 const addOther = async () => {
   let pId: string[] = [];
-  let Type = props.type as string
+  let Type = props.type as string;
   selected.value.forEach((e: any) => {
     pId.push(e.personalId);
   });
@@ -136,7 +135,7 @@ const addOther = async () => {
     .finally(() => {
       props.fecthlistOthet?.();
       selected.value = [];
-      props.clickClose?.()
+      props.clickClose?.();
     });
 };
 watchEffect(() => {
@@ -144,6 +143,23 @@ watchEffect(() => {
     selected.value = [];
   }
 });
+// filter OptionsType
+const OptionsTypeFn = ref<any>([]);
+function filterFnOptionsType(val: string, update: any) {
+  if (val == "") {
+    update(() => {
+      OptionsTypeFn.value = props.optionsType;
+    });
+  } else {
+    update(() => {
+      if (props.optionsType) {
+        OptionsTypeFn.value = props.optionsType.filter(
+          (e: any) => e.name.search(val) !== -1
+        );
+      }
+    });
+  }
+}
 </script>
 
 <template>
@@ -160,14 +176,23 @@ watchEffect(() => {
                 dense
                 :model-value="type"
                 @update:model-value="updateInputType"
-                :options="optionsType"
+                :options="OptionsTypeFn"
                 label="ประเภทคำสั่ง"
                 style="width: 400px; max-width: auto"
                 emit-value
                 map-options
                 option-label="name"
                 option-value="id"
-              />
+                use-input
+                @filter="filterFnOptionsType"
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </q-toolbar>
           </div>
           <div class="col-5">
@@ -232,7 +257,6 @@ watchEffect(() => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td>
-                
                 <q-checkbox
                   keep-color
                   color="primary"

src/modules/05_placement/components/probation/MainProbation.vue

@@ -393,7 +393,7 @@ function filterFn(val: string, update: any) {
         <div class="col-6">
           <div class="row">
             <q-select
-              class="col-5 q-mr-sm"
+              class="col-5 col-sm-3 col-md-8"
               v-model="fillter"
               label="สถานะ"
               dense