ปรับ เครื่องราง

src/modules/07_insignia/components/2_Manage/Tab2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import type { QTableProps } from "quasar";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 import http from "@/plugins/http";
@@ -207,6 +207,7 @@ onMounted(async () => {
         "officer",
         props.tab
       );
+      filtertypeInsignia();
     }
   }
 });
@@ -220,23 +221,35 @@ const changtypeOc = () => {
     );
   }
 };
-// const fecthInsigniaAll = async () => {
-//   let data: any = [];
-//   for (const item of DataStore.optionsTypeOc) {
-//     await http
-//       .get(
-//         config.API.insigniaList(props.roundId, item["id"], "officer", props.tab)
-//       )
-//       .then((res) => {
-//         // console.log(res);
-//         data.push(res.data.result);
-//       })
-//       .catch((err) => {
-//         console.log(err);
-//       });
-//   }
-//   console.log(data);
-// };
+
+const typeinsignia = ref<number | string>("all");
+const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
+const typeinsigniaValues: Set<number> = new Set();
+const listinsignia = ref<any>([]);
+const filtertypeInsignia = async () => {
+  listinsignia.value = rows.value;
+  for (const data of listinsignia.value) {
+    const Type = data.insigniaType;
+    if (Type !== null && !typeinsigniaValues.has(Type)) {
+      typeinsigniaOptions.push({
+        id: Type.toString(),
+        name: Type.toString(),
+      });
+      typeinsigniaValues.add(Type);
+    }
+  }
+};
+const searchFilterTable = async () => {
+  if (typeinsignia.value !== undefined && typeinsignia.value !== null) {
+    if (typeinsignia.value === "all") {
+      rows.value = listinsignia.value;
+    } else {
+      rows.value = listinsignia.value.filter(
+        (e) => e.insigniaType === typeinsignia.value
+      );
+    }
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -278,14 +291,24 @@ const paginationLabel = (start: string, end: string, total: string) => {
           style="min-width: 150px"
           @update:model-value="changtypeOc"
         />
-        <!-- <div>
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </div> -->
+        <q-select
+          v-model="typeinsignia"
+          label="ปรเภทเครื่องราชฯ"
+          dense
+          emit-value
+          map-options
+          :options="typeinsigniaOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="searchFilterTable"
+        />
         <q-space />
 
         <q-input