From 2f3eb105649ec76562158cfe0f30f0c239003cc3 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 12 Sep 2024 16:07:56 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20=E0=B8=AB=E0=B8=A1=E0=B8=A7=E0=B8=94=E0=B8=AB=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_command/interface/index/Main.ts        |  7 +++-
 src/modules/05_command/views/lists.vue        | 42 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/modules/05_command/interface/index/Main.ts b/src/modules/05_command/interface/index/Main.ts
index 5e8957ec..30ce3097 100644
--- a/src/modules/05_command/interface/index/Main.ts
+++ b/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 };
diff --git a/src/modules/05_command/views/lists.vue b/src/modules/05_command/views/lists.vue
index d52c8d4d..22b7bbf6 100644
--- a/src/modules/05_command/views/lists.vue
+++ b/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>