@uiw-admin/components/esm/ProTable/BaseTable.js

业务组件集合

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["style", "columns", "rowSelection", "onPageChange", "scroll", "paginationProps"],
  _excluded2 = ["props"];
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import { Table, Pagination, Checkbox, Radio, Empty } from 'uiw';
import { useStore } from './hooks';
import useSelections from './useSelections';
import { useReactMutation, fetchFn } from '@kkt/request';
import { jsx as _jsx } from "react/jsx-runtime";
var BaseTable = _ref => {
  var {
      columns,
      rowSelection = {
        selectKey: undefined,
        type: 'checkbox',
        defaultSelected: []
      },
      onPageChange: pageChange,
      scroll = {},
      paginationProps = {}
    } = _ref,
    tableProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var [pageIndex, setPageIndex] = useState(1);
  var [pgSize, setPgSize] = useState((paginationProps == null ? void 0 : paginationProps.pageSize) || 10);
  var [prevData, setPrevData] = useState({
    data: [],
    total: 0
  });
  var store = useStore();
  var {
    formatData,
    updateStore,
    query,
    key,
    searchValues,
    requestOptions,
    mutationOptions
  } = store;
  var {
    selectKey,
    type = 'checkbox',
    defaultSelected = []
  } = rowSelection;
  var {
    x
  } = scroll;
  var isCheckbox = type === 'checkbox';

  // 提出表单属性
  var defaultColumns = () => {
    return columns.map(item => {
      var others = _objectWithoutPropertiesLoose(item, _excluded2);
      return others;
    });
  };

  // 表单默认值
  var defaultValues = useMemo(() => {
    var defaultSearchValues = {};
    columns.forEach(col => {
      var _col$props;
      if (col != null && (_col$props = col.props) != null && _col$props.initialValue) {
        var name = col.props.key || col.key;
        defaultSearchValues[name] = col.props.initialValue;
      }
      if (Array.isArray(col.props)) {
        col.props.forEach(form => {
          var name = form.key || col.key;
          if (form.initialValue) {
            defaultSearchValues[name] = form.initialValue;
          }
        });
      }
    });
    return defaultSearchValues;
  }, [JSON.stringify(columns)]);

  // 是否首次调取数据
  var isFirstMountRef = useRef(false);
  // 格式化接口查询参数
  var formatQuery = () => {
    if (query) {
      var params = _extends({}, defaultValues, searchValues);
      return query(pageIndex, pgSize, params);
    } else {
      // 默认传参
      return {
        page: 1,
        pageSize: 10
      };
    }
  };
  var pageSize = formatQuery().pageSize || 10;

  // 调接口
  var {
    mutate,
    data,
    isLoading
  } = useReactMutation(_extends({
    mutationFn: function () {
      var _mutationFn = _asyncToGenerator(function* () {
        var url = key;
        var query = formatQuery();
        var params = _extends({
          method: 'POST',
          body: JSON.stringify(query)
        }, requestOptions);
        if (['get', 'GET'].includes(params.method)) {
          var searchParams = new URLSearchParams(query);
          url += '?' + searchParams.toString();
          delete params.body;
        }
        return fetchFn(url, params);
      });
      function mutationFn() {
        return _mutationFn.apply(this, arguments);
      }
      return mutationFn;
    }()
  }, mutationOptions));
  useEffect(() => {
    // 第一次加载
    mutate();
  }, [mutate]);

  // table数据
  var tableData = formatData && data ? formatData(data).data : (data == null ? void 0 : data.data) || (prevData == null ? void 0 : prevData.data);
  var selection = useSelections(
  // 有枚举值的话  设置枚举值
  selectKey ? tableData ? tableData.map(itm => itm[selectKey]) : [] : [], defaultSelected, type === 'radio');
  //  总数
  var total = formatData && data ? formatData(data).total : (data == null ? void 0 : data.total) || (prevData == null ? void 0 : prevData.total);
  // 分页
  var onPageChange = useCallback( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(function* (page) {
      if (pageChange) {
        pageChange(page);
      }
      yield setPageIndex(page);
      mutate(false);
    });
    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), [setPageIndex, pageChange]);
  useEffect(() => {
    // 获取表单默认值
    var defaultSearchValues = {};
    columns.forEach(col => {
      var _col$props2;
      if (col != null && (_col$props2 = col.props) != null && _col$props2.initialValue) {
        var name = col.props.key || col.key;
        defaultSearchValues[name] = col.props.initialValue;
      }
      if (Array.isArray(col.props)) {
        col.props.forEach(form => {
          var name = form.key || col.key;
          if (form.initialValue) {
            defaultSearchValues[name] = form.initialValue;
          }
        });
      }
    });
    var stores = {
      data: tableData,
      total,
      loading: isLoading,
      // onSearch,
      selection,
      pageIndex,
      setPageIndex,
      mutate
    };
    if (!isFirstMountRef.current) {
      isFirstMountRef.current = true;
      // 默认表单值
      stores.searchValues = defaultSearchValues;
    }
    updateStore(stores);

    // 上一次请求数据
    if (data) {
      setPrevData(tableData);
    }
  }, [JSON.stringify(tableData), isLoading, JSON.stringify(columns), pageIndex, JSON.stringify(selection), setPageIndex, mutate, total]);
  var selectionCol = [{
    title: isCheckbox ? () => {
      return /*#__PURE__*/_jsx(Checkbox, {
        checked: selection.allSelected,
        indeterminate: !selection.allSelected && selection.partiallySelected,
        onClick: () => {
          selection.toggleAll();
        }
      });
    } : null,
    key: 'checked',
    width: 35,
    render: (text, key, rowData) => {
      if (!selectKey) return null;
      return isCheckbox ? /*#__PURE__*/_jsx(Checkbox, {
        checked: selection.isSelected(rowData[selectKey]),
        onClick: () => {
          selection.toggle(rowData[selectKey]);
        }
      }) : /*#__PURE__*/_jsx(Radio, {
        onChange: () => {
          selection.toggle(rowData[selectKey]);
        },
        checked: selection.isSelected(rowData[selectKey])
      });
    }
  }];
  return /*#__PURE__*/_jsx("div", {
    style: {
      overflow: x ? 'scroll' : 'hidden'
    },
    children: /*#__PURE__*/_jsx("div", {
      style: {
        width: x || '100%'
      },
      children: /*#__PURE__*/_jsx(Table
      // 判断是否添加选择框
      , _extends({
        columns: selectKey ? selectionCol.concat(defaultColumns()) : defaultColumns(),
        data: tableData,
        empty: /*#__PURE__*/_jsx(Empty, {
          style: {
            padding: '40px 0'
          }
        }),
        footer: tableData && tableData.length > 0 && /*#__PURE__*/_jsx(Pagination, _extends({
          divider: true
        }, paginationProps, {
          current: pageIndex,
          pageSize: pageSize,
          total: total,
          onChange: page => {
            onPageChange(page);
          },
          onShowSizeChange: (current, pageSize) => {
            setPgSize(pageSize);
            onPageChange(1);
            paginationProps == null ? void 0 : paginationProps.onShowSizeChange == null ? void 0 : paginationProps.onShowSizeChange(current, pageSize);
          }
        }))
      }, tableProps))
    })
  });
};
export default BaseTable;