tav-ui
Version:
336 lines (333 loc) • 10.5 kB
JavaScript
import { reactive, ref, watchEffect, unref, watch, computed, nextTick, onMounted } from 'vue';
import { cloneDeep, merge, get } from 'lodash-es';
import { useTimeoutFn } from '../../../../hooks/core/useTimeout2.mjs';
import { isFunction, isBoolean } from '../../../../utils/is2.mjs';
import { buildUUID } from '../../../../utils/uuid2.mjs';
import { ROW_KEY, FETCH_SETTING, PAGE_SIZE } from '../const2.mjs';
import { useTableFullHeight } from './useTableFullHeight2.mjs';
function useDataSource(tableElRef, propsRef, {
getPaginationInfo,
setPagination,
setLoading,
getFieldsValue,
clearSelectedRowKeys,
tableData
}, emit, filterRef) {
const searchState = reactive({
sortInfo: {},
filterInfo: {}
});
const dataSourceRef = ref([]);
const rawDataSourceRef = ref({});
watchEffect(() => {
tableData.value = unref(dataSourceRef);
});
watch(() => unref(propsRef).dataSource, () => {
const { dataSource, api } = unref(propsRef);
!api && dataSource && (dataSourceRef.value = dataSource);
}, {
immediate: true
});
function handleTableChange(pagination, filters, sorter) {
const { clearSelectOnPageChange, paginationControl, sortFn, filterFn } = unref(propsRef);
if (clearSelectOnPageChange) {
clearSelectedRowKeys();
}
const params = {};
if (pagination && paginationControl === "backend") {
params.searchInfo = {
model: {
page: pagination.current,
limit: pagination.pageSize
}
};
}
setPagination(pagination);
if (sorter && isFunction(sortFn)) {
const sortInfo = sortFn(sorter);
searchState.sortInfo = sortInfo;
params.sortInfo = sortInfo;
params.searchInfo = {
model: {
page: pagination.current,
limit: pagination.pageSize,
...sortInfo
}
};
}
if (filters && isFunction(filterFn)) {
const filterInfo = filterFn(filters);
searchState.filterInfo = filterInfo;
params.filterInfo = filterInfo;
params.searchInfo = {
filter: {
...Object.keys(filterInfo).reduce((result, k) => {
result[k] = filterInfo[k].join(",");
return result;
}, {})
},
model: {
page: pagination.current,
limit: pagination.pageSize
}
};
}
fetch(params);
}
function setTableKey(items) {
if (!items || !Array.isArray(items))
return;
items.forEach((item) => {
if (!item[ROW_KEY]) {
item[ROW_KEY] = buildUUID();
}
if (item.children && item.children.length) {
setTableKey(item.children);
}
});
}
const getAutoCreateKey = computed(() => {
return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
});
const getRowKey = computed(() => {
const { rowKey } = unref(propsRef);
return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
});
const getDataSourceRef = computed(() => {
const dataSource = unref(dataSourceRef);
if (!dataSource || dataSource.length === 0) {
return unref(dataSourceRef);
}
if (unref(getAutoCreateKey)) {
const firstItem = dataSource[0];
const lastItem = dataSource[dataSource.length - 1];
if (firstItem && lastItem) {
if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
const data = cloneDeep(unref(dataSourceRef));
data.forEach((item) => {
if (!item[ROW_KEY]) {
item[ROW_KEY] = buildUUID();
}
if (item.children && item.children.length) {
setTableKey(item.children);
}
});
dataSourceRef.value = data;
}
}
}
return unref(dataSourceRef);
});
async function updateTableData(index, key, value) {
const record = dataSourceRef.value[index];
if (record) {
dataSourceRef.value[index][key] = value;
}
return dataSourceRef.value[index];
}
function updateTableDataRecord(rowKey, record) {
const row = findTableDataRecord(rowKey);
if (row) {
for (const field in row) {
if (Reflect.has(record, field))
row[field] = record[field];
}
return row;
}
}
function deleteTableDataRecord(rowKey) {
if (!dataSourceRef.value || dataSourceRef.value.length == 0)
return;
const rowKeyName = unref(getRowKey);
if (!rowKeyName)
return;
const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey;
for (const key of rowKeys) {
let index = dataSourceRef.value.findIndex((row) => {
let targetKeyName;
if (typeof rowKeyName === "function") {
targetKeyName = rowKeyName(row);
} else {
targetKeyName = rowKeyName;
}
return row[targetKeyName] === key;
});
if (index >= 0) {
dataSourceRef.value.splice(index, 1);
}
index = unref(propsRef).dataSource?.findIndex((row) => {
let targetKeyName;
if (typeof rowKeyName === "function") {
targetKeyName = rowKeyName(row);
} else {
targetKeyName = rowKeyName;
}
return row[targetKeyName] === key;
});
if (typeof index !== "undefined" && index !== -1)
unref(propsRef).dataSource?.splice(index, 1);
}
setPagination({
total: unref(propsRef).dataSource?.length
});
}
function insertTableDataRecord(record, index) {
index = index ?? dataSourceRef.value?.length;
unref(dataSourceRef).splice(index, 0, record);
return unref(dataSourceRef);
}
function findTableDataRecord(rowKey) {
if (!dataSourceRef.value || dataSourceRef.value.length == 0)
return;
const rowKeyName = unref(getRowKey);
if (!rowKeyName)
return;
const { childrenColumnName = "children" } = unref(propsRef);
const findRow = (array) => {
let ret;
array.some(function iter(r) {
if (typeof rowKeyName === "function") {
if (rowKeyName(r) === rowKey) {
ret = r;
return true;
}
} else {
if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) {
ret = r;
return true;
}
}
return r[childrenColumnName] && r[childrenColumnName].some(iter);
});
return ret;
};
return findRow(dataSourceRef.value);
}
async function fetch(opt) {
const {
api,
searchInfo,
defSort,
fetchSetting,
beforeFetch,
afterFetch,
useSearchForm,
pagination,
paginationControl
} = unref(propsRef);
if (!api || !isFunction(api))
return;
if (opt?.clearSelect)
clearSelectedRowKeys();
await nextTick();
const tableFilterSearchParams = filterRef.value ? JSON.parse(filterRef.value.$el.dataset.filterParams) : {};
const tableFilterSearchInfo = {
filter: tableFilterSearchParams
};
try {
setLoading(true);
const { pageField, sizeField, listField, totalField } = Object.assign({}, FETCH_SETTING, fetchSetting);
let pageParams = {};
const { current = 1, pageSize = PAGE_SIZE } = unref(getPaginationInfo);
if (isBoolean(pagination) && !pagination || isBoolean(getPaginationInfo)) {
pageParams = {};
} else {
pageParams[pageField] = opt && opt.page || current;
pageParams[sizeField] = pageSize;
pageParams["model"] = {
page: opt && opt.page || current,
limit: pageSize
};
}
const { sortInfo = {}, filterInfo } = searchState;
pageParams.model = { ...pageParams.model, ...sortInfo };
let params = merge(pageParams, useSearchForm ? getFieldsValue() : {}, searchInfo, tableFilterSearchInfo, opt?.searchInfo ?? {}, defSort, sortInfo, filterInfo, opt?.sortInfo ?? {}, opt?.filterInfo ?? {});
if (beforeFetch && isFunction(beforeFetch)) {
params = await beforeFetch(params) || params;
}
console.log("hijack table api \u{1F602}");
const { data: res } = await api(params);
rawDataSourceRef.value = res;
const isArrayResult = Array.isArray(res);
let resultItems = isArrayResult ? res : get(res, listField);
const resultTotal = isArrayResult ? 0 : get(res, totalField);
if (afterFetch && isFunction(afterFetch)) {
resultItems = await afterFetch(resultItems) || resultItems;
}
dataSourceRef.value = resultItems;
setPagination({
total: resultTotal || 0
});
if (opt && (opt.page || opt.searchInfo?.model?.page)) {
setPagination({
current: opt.page || opt.searchInfo?.model?.page || 1
});
}
if (paginationControl === "backend" && !isArrayResult) {
setPagination({
pageSize: rawDataSourceRef.value[sizeField] || pageSize
});
nextTick(() => {
const els = tableElRef.value?.$el?.querySelectorAll(".ant-table-pagination .ant-pagination-item");
els?.forEach((el) => {
const page = Number(el.title);
if (rawDataSourceRef.value.navigatePageNumbers && rawDataSourceRef.value.navigatePageNumbers.includes(page)) {
el.style.display = "inline-block";
} else {
el.style.display = "none";
}
});
});
}
useTableFullHeight(propsRef, tableElRef);
emit("fetch-success", {
items: unref(resultItems),
total: resultTotal
});
return resultItems;
} catch (error) {
emit("fetch-error", error);
dataSourceRef.value = [];
setPagination({
total: 0
});
} finally {
setLoading(false);
}
}
function setTableData(values) {
dataSourceRef.value = values;
}
function getDataSource() {
return getDataSourceRef.value;
}
function getRawDataSource() {
return rawDataSourceRef.value;
}
async function reload(opt) {
return await fetch(opt);
}
onMounted(() => {
useTimeoutFn(() => {
unref(propsRef).immediate && fetch();
}, 16);
});
return {
getDataSourceRef,
getDataSource,
getRawDataSource,
getRowKey,
setTableData,
getAutoCreateKey,
fetch,
reload,
updateTableData,
updateTableDataRecord,
deleteTableDataRecord,
insertTableDataRecord,
findTableDataRecord,
handleTableChange
};
}
export { useDataSource };
//# sourceMappingURL=useDataSource2.mjs.map