api เครื่องราช

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

@@ -1,8 +1,28 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
-const organization = ref<string>(1);
-const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
+const DataStore = useInsigniaDataStore();
+
+const props = defineProps({
+  tab: {
+    type: String,
+  },
+  roundId: {
+    type: String,
+  },
+  fecthInsigniaAll: {
+    type: Function,
+  },
+  fecthInsigniaByOc: {
+    type: Function,
+  },
+});
+
+const organization = ref<string>("1");
+const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -172,6 +192,33 @@ const rows = ref<any[]>([
     dateSend: "31 ม.ค. 2566",
   },
 ]);
+onMounted(async () => {
+  organizationOptions.value = DataStore.optionsTypeOc;
+  organization.value = organizationOptions.value[0].id;
+  // if (props.fecthInsigniaAll) {
+  //   await props.fecthInsigniaAll(props.roundId, props.tab);
+  // }
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+    }
+  }
+});
+const changtypeOc = () => {
+  if (props.fecthInsigniaByOc) {
+    props.fecthInsigniaByOc(
+      props.roundId,
+      organization.value,
+      "officer",
+      props.tab
+    );
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -211,6 +258,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :outlined="true"
           :hide-dropdown-icon="false"
           style="min-width: 150px"
+          @update:model-value="changtypeOc"
         />
         <!-- <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">