src/pages/Zone/Card/ZoneBasicData.vue

@@ -1,35 +1,16 @@
 <script setup>
-import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-import FetchData from 'components/FetchData.vue';
 import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import { QCheckbox } from 'quasar';
 import VnInputTime from 'src/components/common/VnInputTime.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
-const route = useRoute();
 const { t } = useI18n();
-
-const agencyFilter = {
-    fields: ['id', 'name'],
-    order: 'name ASC',
-    limit: 30,
-};
-const agencyOptions = ref([]);
 </script>
 
 <template>
-    <FetchData
+    <FormModel :url="`Zones/${$route.params.id}`" auto-load model="zone">
-        :filter="agencyFilter"
-        @on-fetch="(data) => (agencyOptions = data)"
-        auto-load
-        url="AgencyModes/isActive"
-    />
-
-    <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
         <template #form="{ data, validate }">
             <VnRow>
                 <VnInput
@@ -42,16 +23,16 @@ const agencyOptions = ref([]);
 
             <VnRow>
                 <VnSelect
-                    option-label="name"
-                    option-value="id"
                     v-model="data.agencyModeFk"
                     :rules="validate('zone.agencyModeFk')"
-                    :options="agencyOptions"
+                     url="AgencyModes/isActive"
+                     :fields="['id', 'name']"
                     :label="t('Agency')"
                     emit-value
                     map-options
                     use-input
                     hide-bottom-space
+                    sort-by="name"
                 />
                 <VnInput
                     class="mw-10"