| | |
| | | watchEffect, |
| | | } from 'vue'; |
| | | import { useTimeoutFn } from '@vben/hooks'; |
| | | import { buildUUID } from '/@/utils/uuid'; |
| | | import { isFunction, isBoolean, isObject } from '/@/utils/is'; |
| | | import { buildUUID } from '@/utils/uuid'; |
| | | import { isFunction, isBoolean, isObject } from '@/utils/is'; |
| | | import { get, cloneDeep, merge } from 'lodash-es'; |
| | | import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const'; |
| | | import { parseRowKeyValue } from '../helper'; |
| | | import type { Key } from 'ant-design-vue/lib/table/interface'; |
| | | |
| | | interface ActionType { |
| | | getPaginationInfo: ComputedRef<boolean | PaginationProps>; |
| | |
| | | }); |
| | | const dataSourceRef = ref<Recordable[]>([]); |
| | | const rawDataSourceRef = ref<Recordable>({}); |
| | | const searchInfoRef = ref<Recordable>({}); |
| | | |
| | | watchEffect(() => { |
| | | tableData.value = unref(dataSourceRef); |
| | |
| | | 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]; |
| | | const getDataSourceRef: Ref<Recordable<any>[]> = ref([]); |
| | | |
| | | 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; |
| | | watch( |
| | | () => dataSourceRef.value, |
| | | () => { |
| | | const dataSource = unref(dataSourceRef); |
| | | if (!dataSource || dataSource.length === 0) { |
| | | getDataSourceRef.value = 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); |
| | | }); |
| | | getDataSourceRef.value = unref(dataSourceRef); |
| | | }, |
| | | { |
| | | deep: true, |
| | | immediate: true, |
| | | }, |
| | | ); |
| | | |
| | | async function updateTableData(index: number, key: string, value: any) { |
| | | async function updateTableData(index: number, key: Key, value: any) { |
| | | const record = dataSourceRef.value[index]; |
| | | if (record) { |
| | | dataSourceRef.value[index][key] = value; |
| | |
| | | return dataSourceRef.value[index]; |
| | | } |
| | | |
| | | function updateTableDataRecord( |
| | | rowKey: string | number, |
| | | record: Recordable, |
| | | ): Recordable | undefined { |
| | | const row = findTableDataRecord(rowKey); |
| | | function updateTableDataRecord(keyValue: Key, record: Recordable): Recordable | undefined { |
| | | const row = findTableDataRecord(keyValue); |
| | | |
| | | if (row) { |
| | | for (const field in row) { |
| | |
| | | } |
| | | } |
| | | |
| | | function deleteTableDataRecord(rowKey: string | number | string[] | number[]) { |
| | | function deleteTableDataRecord(keyValues: Key | Key[]) { |
| | | if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; |
| | | const rowKeyName = unref(getRowKey); |
| | | if (!rowKeyName) return; |
| | | const rowKeys = !Array.isArray(rowKey) ? [rowKey] : rowKey; |
| | | const delKeyValues = !Array.isArray(keyValues) ? [keyValues] : keyValues; |
| | | |
| | | function deleteRow(data, key) { |
| | | const row: { index: number; data: [] } = findRow(data, key); |
| | | function deleteRow(data, keyValue) { |
| | | const row: { index: number; data: [] } = findRow(data, keyValue); |
| | | if (row === null || row.index === -1) { |
| | | return; |
| | | } |
| | | row.data.splice(row.index, 1); |
| | | |
| | | function findRow(data, key) { |
| | | function findRow(data, keyValue) { |
| | | if (data === null || data === undefined) { |
| | | return null; |
| | | } |
| | | for (let i = 0; i < data.length; i++) { |
| | | const row = data[i]; |
| | | let targetKeyName: string = rowKeyName as string; |
| | | if (isFunction(rowKeyName)) { |
| | | targetKeyName = rowKeyName(row); |
| | | } |
| | | if (row[targetKeyName] === key) { |
| | | if (parseRowKeyValue(unref(getRowKey), row) === keyValue) { |
| | | return { index: i, data }; |
| | | } |
| | | if (row.children?.length > 0) { |
| | | const result = findRow(row.children, key); |
| | | const result = findRow(row.children, keyValue); |
| | | if (result != null) { |
| | | return result; |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | for (const key of rowKeys) { |
| | | deleteRow(dataSourceRef.value, key); |
| | | deleteRow(unref(propsRef).dataSource, key); |
| | | for (const keyValue of delKeyValues) { |
| | | deleteRow(dataSourceRef.value, keyValue); |
| | | deleteRow(unref(propsRef).dataSource, keyValue); |
| | | } |
| | | setPagination({ |
| | | total: unref(propsRef).dataSource?.length, |
| | |
| | | |
| | | function insertTableDataRecord( |
| | | record: Recordable | Recordable[], |
| | | index: number, |
| | | index?: number, |
| | | ): Recordable[] | undefined { |
| | | // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; |
| | | index = index ?? dataSourceRef.value?.length; |
| | |
| | | return unref(dataSourceRef); |
| | | } |
| | | |
| | | function findTableDataRecord(rowKey: string | number) { |
| | | if (!dataSourceRef.value || dataSourceRef.value.length == 0) return; |
| | | |
| | | const rowKeyName = unref(getRowKey); |
| | | if (!rowKeyName) return; |
| | | |
| | | function findTableDataRecord(keyValue: Key) { |
| | | if (!dataSourceRef.value || dataSourceRef.value.length === 0) return; |
| | | const { childrenColumnName = 'children' } = unref(propsRef); |
| | | |
| | | const findRow = (array: any[]) => { |
| | | let ret; |
| | | array.some(function iter(r) { |
| | | if (typeof rowKeyName === 'function') { |
| | | if ((rowKeyName(r) as string) === rowKey) { |
| | | ret = r; |
| | | return true; |
| | | } |
| | | } else { |
| | | if (Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey) { |
| | | ret = r; |
| | | return true; |
| | | } |
| | | if (parseRowKeyValue(unref(getRowKey), r) === keyValue) { |
| | | ret = r; |
| | | return true; |
| | | } |
| | | return r[childrenColumnName] && r[childrenColumnName].some(iter); |
| | | }); |
| | | return ret; |
| | | }; |
| | | |
| | | // const row = dataSourceRef.value.find(r => { |
| | | // if (typeof rowKeyName === 'function') { |
| | | // return (rowKeyName(r) as string) === rowKey |
| | | // } else { |
| | | // return Reflect.has(r, rowKeyName) && r[rowKeyName] === rowKey |
| | | // } |
| | | // }) |
| | | return findRow(dataSourceRef.value); |
| | | } |
| | | |
| | |
| | | if (beforeFetch && isFunction(beforeFetch)) { |
| | | params = (await beforeFetch(params)) || params; |
| | | } |
| | | |
| | | searchInfoRef.value = params; |
| | | const res = await api(params); |
| | | rawDataSourceRef.value = res; |
| | | |
| | |
| | | } |
| | | |
| | | function setTableData<T = Recordable>(values: T[]) { |
| | | dataSourceRef.value = values; |
| | | dataSourceRef.value = values as Recordable[]; |
| | | } |
| | | |
| | | function getDataSource<T = Recordable>() { |
| | |
| | | return await fetch(opt); |
| | | } |
| | | |
| | | function getSearchInfo<T = Recordable>() { |
| | | return searchInfoRef.value as T; |
| | | } |
| | | |
| | | onMounted(() => { |
| | | useTimeoutFn(() => { |
| | | unref(propsRef).immediate && fetch(); |
| | |
| | | }); |
| | | |
| | | return { |
| | | getDataSourceRef, |
| | | getDataSourceRef: computed(() => getDataSourceRef.value), |
| | | getDataSource, |
| | | getRawDataSource, |
| | | searchInfoRef, |
| | | getSearchInfo, |
| | | getRowKey, |
| | | setTableData, |
| | | getAutoCreateKey, |