BoundLink-Plate-UI/src/components/BsUi/Table/index.js

import BsTable from './Table.vue';
import { reactive, onMounted, onBeforeMount, toRaw, nextTick } from 'vue';
import { set, get, isEmpty, isUndefined, forEach, has } from 'lodash';
import { getTableDataApi } from '/@/api/system/table-api.js';
import { PAGE_NUM, PAGE_SIZE_OPTIONS } from '/@/components/BsUi/constant.js';
import { PAGE_SIZE } from '/@/constants/common-const.js';

export const useBsTable = (options, tableRef) => {
  let tableOptions = reactive(options.tableOptions);

  let gridRef = null;

  const initGridOptions = () => {
    const optCol = tableOptions?.gridOptions.columns.find((v) => v?.cellRender && v.cellRender.name === 'CellOption');
    // 操作初始化
    if (!isEmpty(optCol)) {
      optCol.fixed = 'right';
    }
    ['seq', 'checkbox', 'radio'].forEach((v) => {
      const itemCol = tableOptions?.gridOptions.columns.find((vv) => vv.type === v);
      // 序号初始化
      if (!isEmpty(itemCol)) {
        itemCol.align = 'center';
        itemCol.headerAlign = 'center';
        itemCol.width = '60px';
        itemCol.fixed = 'left';
      }
    });

    // 初始化列
    tableOptions?.gridOptions.columns.forEach((col) => {
      if (!has(col, 'headerAlign')) {
        col.headerAlign = 'center';
      }
    });

    set(tableOptions, 'gridOptions', {
      border: 'full',
      showHeaderOverflow: true,
      showOverflow: true,
      stripe: false,
      round: true,
      cellConfig: {
        height: '40px',
        ...tableOptions.gridOptions?.cellConfig,
      },
      customConfig: {
        mode: 'drawer',
        ...tableOptions.gridOptions?.customConfig,
      },
      headerCellConfig: {
        height: '40px',
        ...tableOptions.gridOptions?.headerCellConfig,
      },
      height: '100%',
      ...tableOptions?.gridOptions,
    });

    set(tableOptions, 'getGridRef', (value) => {
      gridRef = value;
    });
  };

  const initTableData = () => {
    const tableData = get(tableOptions.gridOptions, 'data', []);
    setTableData(tableData);
  };

  const handleSearchFields = () => {
    const fields = get(tableOptions, 'searchConfig.fields', []);

    const newFields = fields.map((el, index) => {
      return {
        ...el,
        visible: index < 1,
      };
    });

    set(tableOptions, 'searchConfig.fields', newFields);

    set(tableOptions, 'searchConfig.onSearch', async () => {
      setPageNum(1);
      await getTableData();
    });

    set(tableOptions, 'searchConfig.onReset', async () => {
      const searchFields = get(tableOptions, 'searchConfig.fields').map((el) => el.field);
      const searchParams = getSearchParams();
      forEach(searchParams, (value, key) => {
        if (searchFields.includes(key)) {
          searchParams[key] = undefined;
        }
      });
      setSearchParams(searchParams);
      setPageNum(1);
      await getTableData();
    });
  };

  const toggleSearchFields = () => {
    const fields = get(tableOptions, 'searchConfig.fields', []);

    if (!isEmpty(fields) && fields.length > 1) {
      fields.forEach((item, index) => {
        if (index > 0) {
          item.visible = !item.visible;
        }
      });
    }
  };

  const getGridRef = () => {
    return gridRef;
  };

  const getSearchParams = () => {
    return get(tableOptions, 'searchConfig.data', {});
  };

  const setSearchParams = (searchParams) => {
    set(tableOptions, 'searchConfig.data', searchParams);
  };

  const setLoading = (loading) => {
    set(tableOptions, 'gridOptions.loading', loading);
  };

  const setPageNum = (value) => {
    set(tableOptions, 'pagerConfig.pageNum', value);
  };

  const setPageSize = (value) => {
    set(tableOptions, 'pagerConfig.pageSize', value);
  };

  const setPageTotal = (value) => {
    set(tableOptions, 'pagerConfig.total', value);
  };

  const setPageSizeOptions = (value) => {
    set(tableOptions, 'pagerConfig.pageSizeOptions', value);
  };

  const setTableData = (data) => {
    set(tableOptions, 'gridOptions.data', data);
  };

  const setTableOptions = (options) => {
    tableOptions = options;
  };

  const getTableData = (customParams) => {
    tableOptions.tableSearchBeforeBiz && tableOptions.tableSearchBeforeBiz();
    const otherParams = !isEmpty(customParams) ? { ...customParams } : {};
    const oldSearchParams = getSearchParams();
    setSearchParams({ ...oldSearchParams, ...otherParams });
    const pageNum = tableOptions?.pagerConfig.pageNum;
    const pageSize = tableOptions?.pagerConfig.pageSize;
    const newSearchParams = getSearchParams();
    setLoading(true);
    return new Promise(async (resolve, reject) => {
      if (tableOptions?.request) {
        const { list, total } = await tableOptions?.request({ pageNum, pageSize, ...newSearchParams });
        setLoading(false);
        setTableData(list);
        setPageTotal(total);
        nextTick(() => {
          tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
        });
        resolve(list);
      } else {
        if (isEmpty(tableOptions?.url)) {
          setLoading(false);
          setPageTotal(tableOptions.gridOptions.data.length);
          setTableData(tableOptions.gridOptions.data);
          nextTick(() => {
            tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
          });
          resolve(tableOptions.gridOptions.data);
        } else {
          const resData = await getTableDataApi(tableOptions?.url, { pageNum, pageSize, ...newSearchParams });
          const { data } = resData;
          setLoading(false);
          setTableData(data.list);
          setPageTotal(data.total);
          nextTick(() => {
            tableOptions?.tableSearchAfterBiz && tableOptions.tableSearchAfterBiz({ gridRef });
          });
          resolve(data);
        }
      }
    });
  };

  const setTablePropsValue = (path, value) => {
    set(tableOptions, path, value);
  };

  const getTablePropsValue = (path) => {
    return toRaw(get(tableOptions, path, undefined));
  };

  const initPageEvent = () => {
    set(tableOptions, 'pagerConfig.onChange', async () => {
      await getTableData();
    });
  };

  const initSearchConfig = () => {
    handleSearchFields();
    isUndefined(tableOptions?.searchConfig?.data) && set(tableOptions, 'searchConfig.data', {});
    set(tableOptions, 'searchConfig.onToggle', toggleSearchFields);
    const visible = get(tableOptions, 'searchConfig.enable', true);
    setSearchVisible(visible);
  };

  const initPagerConfig = () => {
    setPageNum(tableOptions?.pagerConfig?.pageNum || PAGE_NUM);
    setPageSize(tableOptions?.pagerConfig?.pageSize || PAGE_SIZE);
    setPageSizeOptions(tableOptions?.pagerConfig?.pageSizeOptions || PAGE_SIZE_OPTIONS);
    setPagerVisible(tableOptions?.pagerConfig?.enable || true);
    initPageEvent();
  };

  const initToolbarConfig = () => {
    const visible = get(tableOptions, 'toolbarConfig.enable', true);
    setToolBarVisible(visible);

    set(tableOptions, 'toolbarConfig.onRefresh', async () => {
      setPageNum(1);
      await getTableData();
    });
  };

  onMounted(async () => {
    initTableData();
    initGridOptions();
    initToolbarConfig();
    initPagerConfig();
    initSearchConfig();
    tableOptions.beforeMount && tableOptions.beforeMount();
    if (get(tableOptions, 'isLoadRequest', true)) {
      await getTableData();
    }
  });

  const setToolBarVisible = (visible) => {
    set(tableOptions, 'toolbarConfig.enable', visible);
  };

  const setSearchVisible = (visible) => {
    set(tableOptions, 'searchConfig.enable', visible);
  };

  const setPagerVisible = (visible) => {
    set(tableOptions, 'pagerConfig.enable', visible);
  };

  const refreshTable = async () => {
    setPageNum(tableOptions.pagerConfig?.pageNum || PAGE_NUM);
    setPageSize(tableOptions.pagerConfig?.pageSize || PAGE_SIZE);
    await getTableData();
  };

  const fetchTableData = async (searchParams) => {
    setPageNum(searchParams?.pageNum || PAGE_NUM);
    setPageSize(searchParams?.pageSize || PAGE_SIZE);
    await getTableData(searchParams);
  };

  const getSelectedTableData = () => {
    return [];
  };

  return {
    tableOptions,
    setTablePropsValue,
    getTablePropsValue,
    setTableOptions,
    getGridRef,
    refreshTable,
    fetchTableData,
    getSelectedTableData,
  };
};
export default BsTable;