refs #6677 dataRef

src/components/common/VnSelectFilter.vue

@@ -1,6 +1,8 @@
 <script setup>
+import FetchData from 'src/components/FetchData.vue';
 import { ref, toRefs, computed, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
+const dataRef = ref();
 
 const $props = defineProps({
     modelValue: {
@@ -15,6 +17,14 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    url: {
+        type: String,
+        default: '',
+    },
     filterOptions: {
         type: Array,
         default: () => [],
@@ -89,7 +99,14 @@ watch(options, (newValue) => {
 </script>
 
 <template>
+    <FetchData
+        ref="dataRef"
+        :url="$props.url"
+        @on-fetch="(data) => (dataRef = data)"
+        auto-load
+    />
     <QSelect
+        v-if="dataRef"
         v-model="value"
         :options="myOptions"
         :option-label="optionLabel"

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -6,7 +6,6 @@ import { useQuasar } from 'quasar';
 import { useArrayData } from 'src/composables/useArrayData';
 
 import { downloadFile } from 'src/composables/downloadFile';
-import FetchData from 'src/components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import axios from 'axios';
@@ -146,12 +145,12 @@ function supplierRefFilter(val) {
 }
 </script>
 <template>
-    <FetchData
+    <!-- <FetchData
         ref="suppliersRef"
         url="Suppliers"
         @on-fetch="(data) => (suppliers = data)"
-    />
+    /> -->
-    <FetchData
+    <!-- <FetchData
         ref="currenciesRef"
         url="Currencies"
         :filter="{ fields: ['id', 'code'] }"
@@ -193,21 +192,19 @@ function supplierRefFilter(val) {
         url="UserConfigs/getUserConfig"
         @on-fetch="(data) => (userConfig = data)"
         auto-load
-    />
+    /> -->
     <FormModel v-if="invoiceIn" :url="`InvoiceIns/${route.params.id}`" model="invoiceIn">
         <template #form="{ data }">
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        v-if="suppliersRef"
                         :label="t('supplierFk')"
                         v-model="data.supplierFk"
-                        :options="suppliers"
                         option-value="id"
                         option-label="nickname"
-                        :input-debounce="100"
+                        url="Suppliers"
-                        @input-value="supplierRefFilter"
+                        :filter="{ fields: ['id', 'code'], order: 'code' }"
-                        :default-filter="false"
+                        @update-options="(data) => (suppliersRef = data)"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -418,7 +415,7 @@ function supplierRefFilter(val) {
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        v-if="currenciesRef"
+                        url="Currencies"
                         :label="t('Currency')"
                         v-model="data.currencyFk"
                         :options="currencies"