diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue index 3649ba8f5..920836a93 100644 --- a/src/components/ui/VnPaginate.vue +++ b/src/components/ui/VnPaginate.vue @@ -74,6 +74,10 @@ const props = defineProps({ type: Boolean, default: false, }, + mapKey: { + type: String, + default: '', + }, }); const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']); @@ -96,6 +100,7 @@ const arrayData = useArrayData(props.dataKey, { exprBuilder: props.exprBuilder, keepOpts: props.keepOpts, searchUrl: props.searchUrl, + mapKey: props.mapKey, }); const store = arrayData.store; diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index da62eee3e..6e685ee20 100644 --- a/src/composables/useArrayData.js +++ b/src/composables/useArrayData.js @@ -49,6 +49,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { 'exprBuilder', 'searchUrl', 'navigate', + 'mapKey', ]; if (typeof userOptions === 'object') { for (const option in userOptions) { @@ -119,17 +120,12 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { const { limit } = filter; store.hasMoreData = limit && response.data.length >= limit; - if (append) { - if (!store.data) store.data = []; - for (const row of response.data) store.data.push(row); - } else { - store.data = response.data; - if (!isDialogOpened()) updateRouter && updateStateParams(); - } + processData(response.data, { map: !!store.mapKey, append }); + if (!append && !isDialogOpened()) updateRouter && updateStateParams(); store.isLoading = false; - canceller = null; + return response; } @@ -288,6 +284,31 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) { router.replace(newUrl); } + function processData(data, { map = true, append = true }) { + if (!append) { + store.data = []; + store.map = new Map(); + } + + if (!Array.isArray(data)) store.data = data; + else if (!map && append) for (const row of data) store.data.push(row); + else + for (const row of data) { + const key = row[store.mapKey]; + const val = { ...row, key }; + if (store.map.has(key)) { + const { position } = store.map.get(key); + val.position = position; + store.map.set(key, val); + store.data[position] = val; + } else { + val.position = store.map.size; + store.map.set(key, val); + store.data.push(val); + } + } + } + const totalRows = computed(() => (store.data && store.data.length) || 0); const isLoading = computed(() => store.isLoading || false); diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue index 09fccfd6d..5ebf8a477 100644 --- a/src/pages/Item/ItemFixedPrice.vue +++ b/src/pages/Item/ItemFixedPrice.vue @@ -361,7 +361,7 @@ function handleOnDataSave({ CrudModelRef }) { @on-fetch="(data) => (warehousesOptions = data)" auto-load url="Warehouses" - :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }" + :filter="{ fields: ['id', 'name'], order: 'name ASC' }" /> - - - - + + + - + + - - - - - - - + + + + + - - - - - + + + + + + + + + + + + + +