เพิ่ม หมวดหมู่

src/modules/05_command/interface/index/Main.ts

@@ -2,6 +2,11 @@ interface Pagination {
   rowsPerPage: number;
 }
 
+interface DateOption {
+  name: string;
+  id: string;
+}
+
 interface ActiveOptions {
   value: boolean;
   label: string;
@@ -19,4 +24,4 @@ interface Tabs {
   value: string;
   label: string;
 }
-export type { Pagination, ActiveOptions, ListOrder, Tabs };
+export type { Pagination, DateOption, ActiveOptions, ListOrder, Tabs };

src/modules/05_command/views/lists.vue

@@ -11,6 +11,7 @@ import type {
   ActiveOptions,
   ListOrder,
   Tabs,
+  DateOption,
 } from "@/modules/05_command/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
@@ -58,9 +59,13 @@ const tabs = ref<Tabs[]>([
   },
 ]);
 
+const dataCategory = ref<DateOption[]>([]); //ข้อมูล หมดหมู่
+const categoryOP = ref<DateOption[]>([]); // options หมดหมู่
+
 const idOrder = ref<string>(""); // Id คำสั่ง
 const activeOrderId = ref<string>(""); // Id คำสั่งที่เลือก
 const name = ref<string>(""); // ชื่อคำสั่ง
+const category = ref<string>(""); // หมดหมู่
 const listOrder = ref<ListOrder[]>([]); // list คำสั่ง
 const status = ref<boolean>(false); // สถานะ
 const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
@@ -153,6 +158,15 @@ async function fetchOrderType() {
     });
 }
 
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    category.value = val ? "" : category.value;
+    categoryOP.value = dataCategory.value.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
 /** เริ่มเมื่อโหลดหน้านี้*/
 onMounted(() => {
   fetchOrderType();
@@ -353,6 +367,34 @@ onMounted(() => {
                 hide-bottom-space
               ></q-input>
             </div>
+            <div class="col-12">
+              <q-select
+                class="inputgreen"
+                v-model="category"
+                :label="`${'หมดหมู่'}`"
+                dense
+                emit-value
+                map-options
+                option-label="name"
+                :options="categoryOP"
+                option-value="id"
+                lazy-rules
+                use-input
+                hide-bottom-space
+                outlined
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกหมดหมู่'}`]"
+                @filter="(inputValue:string,
+                    doneFn:Function) => filterSelector(inputValue, doneFn) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
             <div class="col-12">
               <div class="row items-center justify-between border_custom">
                 <p class="q-ma-none">สถานะการใช้งาน</p>