Ben Lin
2024-09-12 a4ee6ba0ca28833cbbb8cf0e675561b10fa4c1af
src/components/Table/src/hooks/useDataSource.ts
@@ -12,10 +12,12 @@
  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>;
@@ -48,6 +50,7 @@
  });
  const dataSourceRef = ref<Recordable[]>([]);
  const rawDataSourceRef = ref<Recordable>({});
  const searchInfoRef = ref<Recordable>({});
  watchEffect(() => {
    tableData.value = unref(dataSourceRef);
@@ -111,34 +114,43 @@
    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;
@@ -146,11 +158,8 @@
    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) {
@@ -160,34 +169,28 @@
    }
  }
  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;
            }
@@ -197,9 +200,9 @@
      }
    }
    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,
@@ -208,7 +211,7 @@
  function insertTableDataRecord(
    record: Recordable | Recordable[],
    index: number,
    index?: number,
  ): Recordable[] | undefined {
    // if (!dataSourceRef.value || dataSourceRef.value.length == 0) return;
    index = index ?? dataSourceRef.value?.length;
@@ -217,40 +220,22 @@
    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);
  }
@@ -300,7 +285,7 @@
      if (beforeFetch && isFunction(beforeFetch)) {
        params = (await beforeFetch(params)) || params;
      }
      searchInfoRef.value = params;
      const res = await api(params);
      rawDataSourceRef.value = res;
@@ -349,7 +334,7 @@
  }
  function setTableData<T = Recordable>(values: T[]) {
    dataSourceRef.value = values;
    dataSourceRef.value = values as Recordable[];
  }
  function getDataSource<T = Recordable>() {
@@ -364,6 +349,10 @@
    return await fetch(opt);
  }
  function getSearchInfo<T = Recordable>() {
    return searchInfoRef.value as T;
  }
  onMounted(() => {
    useTimeoutFn(() => {
      unref(propsRef).immediate && fetch();
@@ -371,9 +360,11 @@
  });
  return {
    getDataSourceRef,
    getDataSourceRef: computed(() => getDataSourceRef.value),
    getDataSource,
    getRawDataSource,
    searchInfoRef,
    getSearchInfo,
    getRowKey,
    setTableData,
    getAutoCreateKey,