แยกการลา

src/modules/09_leave/components/2_Leave/ToolBarLeave.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -22,6 +22,7 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  dataToobar: Array,
 });
 
 const emit = defineEmits(["update:querySting"]);
@@ -102,28 +103,6 @@ const optionStatusMain = ref<DataOption[]>(
   leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
 );
 
-/** function เรียกข้อมูลสถานะ*/
-async function fetchOption() {
-  await http
-    .get(config.API.leaveType())
-    .then((res) => {
-      const data = res.data.result;
-      leaveStore.leaveType = data;
-      optionTypeMain.value = [
-        { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
-      ];
-      const option = data.map((e: DataOption) => ({
-        id: e.id,
-        name: e.name,
-      }));
-      optionTypeMain.value.push(...option);
-      optionType.value = optionTypeMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 /**
  * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
  * @param val คำที่ค้นหา
@@ -145,9 +124,26 @@ function filterOption(val: string, update: any, name: string) {
   });
 }
 
-onMounted(async () => {
-  await fetchOption();
-});
+watch(
+  async () => props.dataToobar,
+  () => {
+    if (props.dataToobar) {
+      const data = props.dataToobar;
+      leaveStore.leaveType = data;
+      optionTypeMain.value = [
+        { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
+      ];
+
+      const option = data.map((e: any) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      
+      optionTypeMain.value.push(...option);
+      optionType.value = optionTypeMain.value;
+    }
+  }
+);
 </script>
 
 <template>
@@ -210,11 +206,19 @@ onMounted(async () => {
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
         </template>
-        <template v-if="leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'" v-slot:append>
+        <template
+          v-if="
+            leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'
+          "
+          v-slot:append
+        >
           <q-icon
             name="cancel"
             @click.stop.prevent="
-              (optionType = optionTypeMain), (leaveStore.filter.type = '00000000-0000-0000-0000-000000000000'), filterListLeave()
+              (optionType = optionTypeMain),
+                (leaveStore.filter.type =
+                  '00000000-0000-0000-0000-000000000000'),
+                filterListLeave()
             "
             class="cursor-pointer"
           />
@@ -249,13 +253,14 @@ onMounted(async () => {
           <q-icon
             name="cancel"
             @click.stop.prevent="
-              (optionStatus = optionStatusMain), (leaveStore.filter.status = 'ALL'), filterListLeave()
+              (optionStatus = optionStatusMain),
+                (leaveStore.filter.status = 'ALL'),
+                filterListLeave()
             "
             class="cursor-pointer"
           />
         </template>
-        </q-select
-      >
+      </q-select>
     </div>
     <q-space />
     <div class="col-xs-12 col-sm-3 col-md-2">