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

import BsTable from './Table.vue';
import { reactive, onMounted, onBeforeMount, toRaw } from 'vue';
import { set, get, isEmpty, isUndefined } from 'lodash';
import {getTableDataApi} from "/@/api/system/table-api.js";


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

  let gridRef = null;

  const initGridOptions = () => {
    set(tableOptions, 'gridOptions', {
      border: 'none',
      size: 'mini',
      showHeaderOverflow: true,
      showOverflow: true,
      stripe: true,
      round: true,
      ...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 () => {
      setSearchParams({});
      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 setTableData = (data) => {
    set(tableOptions, 'gridOptions.data', data);
  };

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

  const getTableData = () => {
    tableOptions.tableSearchBeforeBiz && tableOptions.tableSearchBeforeBiz();
    setLoading(true);
    return new Promise(async (resolve, reject) => {
      const pageNum = tableOptions?.pagerConfig.pageNum;
      const pageSize = tableOptions?.pagerConfig.pageSize;
      const searchParams = getSearchParams();

      if (isEmpty(tableOptions?.url)) {
        setTimeout(() => {
          setLoading(false);
          setPageTotal(tableOptions.gridOptions.data.length);
          setPagerVisible(false);
          resolve(tableOptions.gridOptions.data);
        }, 500);
      } else {

        console.log("入参为 =====>", { pageNum, pageSize, ...searchParams })
        const resData = await getTableDataApi(tableOptions?.url,{ pageNum, pageSize, ...searchParams });
        const { data } = resData;
        setLoading(false);
        setTableData(data.list);
        setPageTotal(data.total);
        resolve(data);

        // setTimeout(() => {
        //   setLoading(false);
        //   setTableData([{name: "12334"}]);
        //   setPageTotal(1000);
        //   resolve();
        // }, 1000);

      }
    });
  };

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

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

  const initPageEvent = () => {
    const visible = get(tableOptions, 'pagerConfig.enable', true);
    setPagerVisible(visible);

    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 = () => {
    initPageEvent();
  };

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

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

  };

  const onTableBeforeMount = (callback) => {
    onBeforeMount(() => {
      if (typeof callback === 'function') {
        callback();
      }
    });
  };

  const onTableMounted = (callback) => {
    onMounted(() => {
      if (typeof callback === 'function') {
        const gridRef = getGridRef();
        callback(gridRef);
      }
    });
  };

  onMounted(async () => {
    initTableData();
    initGridOptions();
    initToolbarConfig();
    initPagerConfig();
    initSearchConfig();
    onTableBeforeMount();
    options.beforeMount && options.beforeMount();
    await getTableData();
    onTableMounted();
    options.mounted && options.mounted();
  });

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

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

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

  return {
    tableOptions,
    onTableMounted,
    onTableBeforeMount,
    setTablePropsValue,
    getTablePropsValue,
    setTableOptions,
    getGridRef,
  };
};
export default BsTable;