updates
This commit is contained in:
parent
cabc47c123
commit
610aacb010
|
@ -1,7 +1,6 @@
|
|||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useFetchData } from 'src/composables/useFetchData';
|
||||
|
||||
const $props = defineProps({
|
||||
autoLoad: {
|
||||
|
@ -36,7 +35,6 @@ const $props = defineProps({
|
|||
|
||||
const emit = defineEmits(['onFetch']);
|
||||
defineExpose({ fetch });
|
||||
// const fetchData = useFetchData({ ...$props });
|
||||
onMounted(async () => {
|
||||
if ($props.autoLoad) {
|
||||
await fetch();
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
<script setup>
|
||||
import { ref, toRefs, computed, watch, h, onMounted } from 'vue';
|
||||
import { ref, toRefs, computed, watch, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const emit = defineEmits(['update:modelValue', 'update:options']);
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import { useFetchData } from 'src/composables/useFetchData';
|
||||
|
||||
const $props = defineProps({
|
||||
modelValue: {
|
||||
|
@ -86,19 +85,18 @@ function setOptions(data, append = true) {
|
|||
myOptions.value = JSON.parse(JSON.stringify(data));
|
||||
if (append) myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
|
||||
}
|
||||
const useURL = computed(() => $props.url?.length > 0);
|
||||
const useURL = computed(() => $props.url);
|
||||
import { useAttrs } from 'vue';
|
||||
|
||||
const $attrs = useAttrs();
|
||||
const arrayDataKey = $props.url !== '' ? $props.url : $attrs.label;
|
||||
const arrayDataOptions =
|
||||
{
|
||||
url: $props.url,
|
||||
where: $props.where,
|
||||
limit: $props.limit,
|
||||
sortBy: $props.sortBy,
|
||||
fields: $props.fields,
|
||||
} ?? {};
|
||||
const arrayDataOptions = {
|
||||
url: $props.url,
|
||||
where: $props.where,
|
||||
limit: $props.limit,
|
||||
sortBy: $props.sortBy,
|
||||
fields: $props.fields,
|
||||
};
|
||||
const arrayData = useArrayData(arrayDataKey, arrayDataOptions);
|
||||
onMounted(async () => {
|
||||
setOptions(options.value);
|
||||
|
@ -106,7 +104,7 @@ onMounted(async () => {
|
|||
if (useURL.value) {
|
||||
arrayData.store.userFilter = $props.where;
|
||||
arrayData.store.filter.where = $props.where;
|
||||
const { data } = await arrayData.fetch({ append: true });
|
||||
const { data } = await arrayData.fetch({ append: true, updateRouter: false });
|
||||
setOptions(data);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,30 +0,0 @@
|
|||
// import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
export function useFetchData(props) {
|
||||
// const data = ref(null);
|
||||
|
||||
async function fetch(fetchFilter = {}) {
|
||||
try {
|
||||
const filter = Object.assign(fetchFilter, props.filter);
|
||||
if (props.where && !fetchFilter.where) filter.where = props.where;
|
||||
if (props.sortBy) filter.order = props.sortBy;
|
||||
if (props.limit) filter.limit = props.limit;
|
||||
|
||||
const response = await axios.get(props.url, {
|
||||
params: { filter: JSON.stringify(filter), ...props.params },
|
||||
});
|
||||
|
||||
// data.value = response.data;
|
||||
return response.data;
|
||||
} catch (e) {
|
||||
// Manejo de errores
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// data,
|
||||
fetch,
|
||||
};
|
||||
}
|
|
@ -1,7 +1,7 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
// import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
// import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
import VnInput from 'src/components/common/VnInput.vue';
|
||||
import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||
|
@ -15,26 +15,15 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const salespersons = ref();
|
||||
const countries = ref();
|
||||
const authors = ref();
|
||||
const departments = ref();
|
||||
// const salespersons = ref();
|
||||
// const countries = ref();
|
||||
// const authors = ref();
|
||||
// const departments = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData
|
||||
:filter="{ where: { role: 'salesPerson' } }"
|
||||
@on-fetch="(data) => (salespersons = data)"
|
||||
auto-load
|
||||
url="Workers/activeWithInheritedRole"
|
||||
/>
|
||||
<FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
|
||||
<FetchData
|
||||
@on-fetch="(data) => (authors = data)"
|
||||
auto-load
|
||||
url="Workers/activeWithInheritedRole"
|
||||
/>
|
||||
<FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />
|
||||
<!-- <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" /> -->
|
||||
<!-- <FetchData @on-fetch="(data) => (departments = data)" auto-load /> -->
|
||||
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
|
@ -64,6 +53,7 @@ const departments = ref();
|
|||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
|
@ -87,11 +77,11 @@ const departments = ref();
|
|||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="departments">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:input-debounce="0"
|
||||
:label="t('Departments')"
|
||||
:options="departments"
|
||||
url="Departments"
|
||||
dense
|
||||
emit-value
|
||||
hide-selected
|
||||
|
@ -105,40 +95,13 @@ const departments = ref();
|
|||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton class="full-width" type="QInput" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="departments">
|
||||
<VnSelect
|
||||
:input-debounce="0"
|
||||
:label="t('Departments')"
|
||||
:options="departments"
|
||||
dense
|
||||
emit-value
|
||||
hide-selected
|
||||
map-options
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
outlined
|
||||
rounded
|
||||
use-input
|
||||
v-model="params.departmentFk"
|
||||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton class="full-width" type="QInput" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
||||
<QItem class="q-mb-sm">
|
||||
<QItemSection v-if="countries">
|
||||
<QItemSection>
|
||||
<VnSelect
|
||||
:input-debounce="0"
|
||||
:label="t('Country')"
|
||||
:options="countries"
|
||||
url="Countries"
|
||||
dense
|
||||
emit-value
|
||||
hide-selected
|
||||
|
@ -152,9 +115,6 @@ const departments = ref();
|
|||
@update:model-value="searchFn()"
|
||||
/>
|
||||
</QItemSection>
|
||||
<QItemSection v-else>
|
||||
<QSkeleton class="full-width" type="QInput" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
||||
<QItem class="q-mb-sm">
|
||||
|
|
Loading…
Reference in New Issue