@zat-design/sisyphus-react 3.0.13

package/lib/ProTable/index.js

@@ -0,0 +1,324 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultPage = exports.default = exports.TableContext = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _antd = require("antd");
+var _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactSvg = require("react-svg");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _zatDesignProComponent = require("zat-design-pro-component");
+var _utils = require("@zat-design-pro-component/utils");
+var _utils2 = require("@/ProUtils/utils");
+var _components = require("./components");
+var _useAntdTable = _interopRequireDefault(require("./useAntdTable"));
+var _empty = _interopRequireDefault(require("../assets/empty.png"));
+var _reset = _interopRequireDefault(require("../assets/reset.svg"));
+var _customColumn = _interopRequireDefault(require("../assets/customColumn.svg"));
+var _utils3 = require("./utils");
+var _excluded = ["tableId", "headerRender", "footerRender", "quickConfig", "stripe", "columns", "className", "summary"],
+  _excluded2 = ["resizeColumn", "columnConfig", "cacheTime", "storage"];
+var defaultCacheTime = 1; // columns 配置保存时间为一天
+// 全局上下文
+var TableContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.TableContext = TableContext;
+var defaultPage = {
+  pageNum: 1,
+  pageSize: 10
+};
+exports.defaultPage = defaultPage;
+function ProTable(props) {
+  var _curTableConfig$pathK;
+  var _ref = (0, _zatDesignProComponent.useProConfig)('globalConfig') || {},
+    configStorage = _ref.storage; // 获取全局缓存位置配置
+  var _ref2 = (0, _zatDesignProComponent.useProConfig)('ProTable') || {},
+    configResizeColumn = _ref2.resizeColumn,
+    configTColumnConfig = _ref2.columnConfig,
+    configCacheTime = _ref2.cacheTime;
+  var tableId = props.tableId,
+    headerRender = props.headerRender,
+    footerRender = props.footerRender,
+    quickConfig = props.quickConfig,
+    stripe = props.stripe,
+    _props$columns = props.columns,
+    propsColumns = _props$columns === void 0 ? [] : _props$columns,
+    className = props.className,
+    summary = props.summary,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var quickTableConfig = quickConfig ? (0, _objectSpread4.default)({
+    // resizeColumn: true,
+    columnConfig: true,
+    cacheTime: true
+  }, restProps) : (restProps === null || restProps === void 0 ? void 0 : restProps.columnConfig) ? (0, _objectSpread4.default)({
+    cacheTime: true
+  }, restProps) : restProps;
+  var _quickTableConfig$res = quickTableConfig.resizeColumn,
+    resizeColumn = _quickTableConfig$res === void 0 ? configResizeColumn : _quickTableConfig$res,
+    _quickTableConfig$col = quickTableConfig.columnConfig,
+    columnConfig = _quickTableConfig$col === void 0 ? configTColumnConfig : _quickTableConfig$col,
+    _quickTableConfig$cac = quickTableConfig.cacheTime,
+    cacheTime = _quickTableConfig$cac === void 0 ? configCacheTime : _quickTableConfig$cac,
+    _quickTableConfig$sto = quickTableConfig.storage,
+    storage = _quickTableConfig$sto === void 0 ? configStorage : _quickTableConfig$sto,
+    tableProps = (0, _objectWithoutProperties2.default)(quickTableConfig, _excluded2);
+  var propsColumnObj = (0, _react.useMemo)(function () {
+    return propsColumns.reduce(function (acc, cur) {
+      // @ts-ignore
+      acc[(0, _utils3.getColumnDataIndex)(cur.dataIndex)] = (0, _objectSpread4.default)({}, cur);
+      return acc;
+    }, {});
+  }, [propsColumns]);
+  var pathname = window.location.pathname;
+  // 以pathname + tableId作为缓存配置key
+  var pathKey = "".concat(pathname, "/").concat(tableId || '');
+  var Storage = storage === 'sessionStorage' ? sessionStorage : localStorage;
+  var tableConfig = Storage.getItem('tableConfig');
+  var curTableConfig = tableConfig ? JSON.parse(tableConfig) : {};
+  var startTime = (_curTableConfig$pathK = curTableConfig[pathKey]) === null || _curTableConfig$pathK === void 0 ? void 0 : _curTableConfig$pathK.startTime;
+  var _useState = (0, _react.useState)(propsColumns),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    curColumns = _useState2[0],
+    setCurColumns = _useState2[1];
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    var localColumns;
+    var duration = (typeof cacheTime === 'number' ? cacheTime : defaultCacheTime) * 86400000;
+    // 开启缓存配置功能且缓存存在时，从缓存中获取缓存配置
+    if (cacheTime && startTime && new Date().getTime() - startTime < duration) {
+      var _curTableConfig$pathK2, _curTableConfig$pathK3, _localColumns;
+      localColumns = (_curTableConfig$pathK2 = curTableConfig[pathKey]) === null || _curTableConfig$pathK2 === void 0 ? void 0 : (_curTableConfig$pathK3 = _curTableConfig$pathK2.columns) === null || _curTableConfig$pathK3 === void 0 ? void 0 : _curTableConfig$pathK3.map(function (item) {
+        var _propsColumnObj$getCo;
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, propsColumnObj[(0, _utils3.getColumnDataIndex)(item.dataIndex)]), {}, {
+          dataIndex: item.dataIndex,
+          width: resizeColumn ? item === null || item === void 0 ? void 0 : item.width : (_propsColumnObj$getCo = propsColumnObj[(0, _utils3.getColumnDataIndex)(item.dataIndex)]) === null || _propsColumnObj$getCo === void 0 ? void 0 : _propsColumnObj$getCo.width
+        });
+      });
+      localColumns = ((_localColumns = localColumns) === null || _localColumns === void 0 ? void 0 : _localColumns.length) === 0 ? undefined : localColumns;
+      setCurColumns((0, _lodash.cloneDeep)(localColumns || propsColumns));
+    } else {
+      setCurColumns((0, _lodash.cloneDeep)(propsColumns));
+    }
+  }, [pathKey, cacheTime, propsColumns]);
+  (0, _react.useEffect)(function () {
+    if (!cacheTime && JSON.stringify(curTableConfig) !== '{}') {
+      // 关闭缓存时，清理对应table缓存
+      Storage.setItem('tableConfig', JSON.stringify((0, _objectSpread4.default)((0, _objectSpread4.default)({}, curTableConfig), {}, (0, _defineProperty2.default)({}, pathKey, undefined))));
+    }
+  }, [cacheTime, curTableConfig, storage]);
+  // 重置列宽，恢复至props的columns列宽
+  var resetColumnWidth = function resetColumnWidth() {
+    var nextColumns = (0, _toConsumableArray2.default)(curColumns);
+    nextColumns === null || nextColumns === void 0 ? void 0 : nextColumns.forEach(function (item) {
+      var _propsColumnObj$item$;
+      if ((_propsColumnObj$item$ = propsColumnObj[item.dataIndex]) === null || _propsColumnObj$item$ === void 0 ? void 0 : _propsColumnObj$item$.width) {
+        var _propsColumnObj$item$2;
+        item.width = (_propsColumnObj$item$2 = propsColumnObj[item.dataIndex]) === null || _propsColumnObj$item$2 === void 0 ? void 0 : _propsColumnObj$item$2.width;
+      } else {
+        delete item.width;
+      }
+    });
+    setCurColumns(nextColumns);
+  };
+  // 列宽resize函数
+  var handleResize = function handleResize(index) {
+    return function (e, _ref3) {
+      var size = _ref3.size;
+      var nextColumns = (0, _toConsumableArray2.default)(curColumns);
+      nextColumns[index] = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, nextColumns[index]), {}, {
+        width: size.width
+      });
+      setCurColumns(nextColumns);
+    };
+  };
+  var columns = (0, _react.useMemo)(function () {
+    var newColumns = curColumns.map(function (item, index) {
+      var _propsColumnObj$getCo2;
+      if ((_propsColumnObj$getCo2 = propsColumnObj[(0, _utils3.getColumnDataIndex)(item.dataIndex)]) === null || _propsColumnObj$getCo2 === void 0 ? void 0 : _propsColumnObj$getCo2.render) {
+        item.render = propsColumnObj[(0, _utils3.getColumnDataIndex)(item.dataIndex)].render;
+      }
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({
+        ellipsis: resizeColumn
+      }, item), {}, {
+        width: item.width,
+        onHeaderCell: function onHeaderCell(column) {
+          return {
+            width: column.width,
+            minwidth: column.minWidth,
+            onDrag: handleResize(index)
+          };
+        }
+      });
+    }).filter(function (item) {
+      return !(item === null || item === void 0 ? void 0 : item.delete);
+    });
+    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item) {
+      (0, _utils3.formatColumn)(item);
+    });
+    return newColumns;
+  }, [curColumns, handleResize]);
+  var handleColumnConfig = function handleColumnConfig(checkList) {
+    var newColumns = checkList === null || checkList === void 0 ? void 0 : checkList.map(function (item) {
+      return (0, _objectSpread4.default)({}, propsColumnObj[item.dataIndex]);
+    });
+    setCurColumns(newColumns);
+  };
+  (0, _ahooks.useDebounceEffect)(function () {
+    if (cacheTime) {
+      var newTableConfig = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, curTableConfig), {}, (0, _defineProperty2.default)({}, pathKey, {
+        startTime: new Date().getTime(),
+        columns: curColumns.map(function (item) {
+          return {
+            dataIndex: item.dataIndex,
+            width: Math.round(Number(item.width))
+          };
+        })
+      }));
+      Storage.setItem('tableConfig', JSON.stringify(newTableConfig));
+    }
+  }, [cacheTime, storage, pathKey, curColumns], {
+    wait: 100
+  });
+  var customColumns = (0, _react.useMemo)(function () {
+    return propsColumns.map(function (item) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
+        disabled: item.fixed
+      });
+    });
+  }, [propsColumns]);
+  var checkColumns = (0, _react.useMemo)(function () {
+    return curColumns.map(function (item) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
+        disabled: item.fixed
+      });
+    });
+  }, [curColumns]);
+  var Empty = /*#__PURE__*/_react.default.createElement("div", {
+    className: "ant-empty ant-empty-normal"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "ant-empty-image"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _empty.default,
+    alt: "\u6682\u65E0\u6570\u636E"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "ant-empty-description"
+  }, "\u6682\u65E0\u6570\u636E"));
+  var renderSummary = function renderSummary() {
+    var _ref4 = summary || {},
+      columns = _ref4.columns,
+      _ref4$total = _ref4.total,
+      total = _ref4$total === void 0 ? true : _ref4$total,
+      _ref4$fixed = _ref4.fixed,
+      fixed = _ref4$fixed === void 0 ? true : _ref4$fixed;
+    var _ref5 = tableProps || {},
+      dataSource = _ref5.dataSource;
+    // 没有数据时，不展示合计栏
+    if (!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length)) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_antd.Table.Summary, {
+      fixed: fixed
+    }, /*#__PURE__*/_react.default.createElement(_antd.Table.Summary.Row, null, columns === null || columns === void 0 ? void 0 : columns.map(function (_ref6) {
+      var key = _ref6.key,
+        index = _ref6.index,
+        colSpan = _ref6.colSpan,
+        prefix = _ref6.prefix,
+        title = _ref6.title,
+        precision = _ref6.precision,
+        valueType = _ref6.valueType;
+      var text = null;
+      if (title) {
+        text = title;
+      } else if (total && key) {
+        var _dataSource$reduce;
+        var format = _utils2.valueTypeRender === null || _utils2.valueTypeRender === void 0 ? void 0 : _utils2.valueTypeRender[valueType];
+        var sum = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$reduce = dataSource.reduce) === null || _dataSource$reduce === void 0 ? void 0 : _dataSource$reduce.call(dataSource, function (pre, cur) {
+          var _cur$key;
+          return _utils.tools.calc(pre, '+', (_cur$key = cur[key]) !== null && _cur$key !== void 0 ? _cur$key : 0);
+        }, 0);
+        text = format ? format(sum, precision !== null && precision !== void 0 ? precision : 2) : sum;
+      }
+      return /*#__PURE__*/_react.default.createElement(_antd.Table.Summary.Cell, {
+        key: key,
+        index: index,
+        colSpan: colSpan
+      }, prefix, text);
+    })));
+  };
+  var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
+    'pro-table': true,
+    'pro-table-no-stripe': !stripe
+  }, className, className));
+  return /*#__PURE__*/_react.default.createElement(TableContext.Provider, {
+    value: {
+      pathKey: pathKey,
+      tableConfig: tableConfig,
+      Storage: Storage
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cls
+  }, (headerRender || columnConfig || resizeColumn) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-config"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "left-contain"
+  }, headerRender ? headerRender() : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "right-actions"
+  }, resizeColumn && /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    icon: /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
+      className: "anticon",
+      wrapper: "span",
+      src: _reset.default
+    }),
+    onClick: resetColumnWidth
+  }, "\u91CD\u7F6E\u5217\u5BBD"), columnConfig && /*#__PURE__*/_react.default.createElement(_zatDesignProComponent.ProTransferModal, {
+    label: "\u5217",
+    title: "\u81EA\u5B9A\u4E49\u5217",
+    draggable: true,
+    span: 8,
+    defaultValue: checkColumns,
+    clearCheckedOnClose: false,
+    fieldNames: {
+      value: 'dataIndex',
+      label: 'title'
+    },
+    dataSource: customColumns,
+    onOk: handleColumnConfig
+  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    className: "custom-column-btn",
+    icon: /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
+      className: "anticon",
+      wrapper: "span",
+      src: _customColumn.default
+    })
+  }, "\u81EA\u5B9A\u4E49\u5217")))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-table-container"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Table, (0, _objectSpread4.default)({
+    components: resizeColumn ? _components.TableResizable.components : undefined,
+    // @ts-ignore
+    columns: columns,
+    locale: {
+      emptyText: Empty
+    },
+    summary: (0, _typeof2.default)(summary) === 'object' ? function () {
+      return renderSummary();
+    } : summary
+  }, tableProps)), /*#__PURE__*/_react.default.createElement(_components.ResizableLine, null)), footerRender ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-table-footer ".concat((tableProps === null || tableProps === void 0 ? void 0 : tableProps.pagination) ? 'has-page' : 'no-page')
+  }, footerRender()) : null));
+}
+ProTable.defaultProps = {
+  quickConfig: false,
+  stripe: true
+};
+ProTable.useAntdTable = _useAntdTable.default;
+var _default = ProTable;
+exports.default = _default;

package/lib/ProTable/propsType.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { TableProps } from 'antd/lib/table/Table';
+import { ColumnType, GetRowKey, RowSelectionType } from 'antd/lib/table/interface';
+import { FormInstance } from 'antd';
+interface SummaryColumnProps {
+    key: string;
+    index: number;
+    title?: string;
+    colSpan?: number;
+    valueType?: string;
+    precision?: number;
+    prefix?: ReactNode | string;
+}
+export interface SummaryProps {
+    columns: SummaryColumnProps[];
+    total?: boolean;
+    fixed?: boolean;
+}
+export type ProTableProps = TableProps<any> & {
+    tableId?: string;
+    rowKey?: string | GetRowKey<any>;
+    headerRender?: () => ReactNode;
+    quickConfig?: boolean;
+    resizeColumn?: boolean;
+    sortRow?: boolean | 'drag' | 'move';
+    columnConfig?: boolean;
+    cacheTime?: number | boolean;
+    sortColumnText?: string;
+    storage?: 'localStorage' | 'sessionStorage';
+    footerRender?: () => ReactNode;
+    summary?: SummaryProps | TableProps<any>['summary'];
+    /**
+     * 斑马纹设置
+     */
+    stripe?: boolean;
+};
+export type ProTableValueType = 'percentage' | 'permillage' | 'thousandth' | 'datePicker' | 'enumName' | 'enumCodeName' | 'address' | 'thousandthCNY' | 'date' | 'dateTime' | 'dateStartTime' | 'dateEndTime' | 'dateStartEndTime';
+export interface ProTableColumn extends ColumnType<any> {
+    dataIndex: string | string[];
+    width?: number | string;
+    minWidth?: number;
+    valueType?: ProTableValueType;
+    format?: string;
+    precision?: number;
+    code?: string | (() => string);
+    copyable?: boolean;
+    tooltip?: ReactNode | {
+        title?: ReactNode;
+        icon?: ReactNode;
+    };
+    transform?: (value: any, record?: any) => string[];
+}
+export interface Response<T = any> {
+    data: T;
+    status: number;
+    message: string;
+}
+export interface PaginationProps {
+    pageNum: number;
+    pageSize: number;
+}
+export interface RequestOptions<T, R> {
+    form?: FormInstance;
+    isResetQuery?: boolean;
+    rowKey?: string | GetRowKey<R>;
+    rowSelection?: boolean;
+    rowSelectType?: RowSelectionType;
+    rowSelections?: boolean;
+    extraParams?: Partial<T>;
+    page?: PaginationProps;
+    onPageChange?: (page: PaginationProps) => void;
+    transformParams?: (params: any) => any;
+    transformResponse?: (data: any) => R[];
+}
+export interface Params<T = any> extends PaginationProps {
+    queryBean?: Partial<T>;
+    [key: string]: any;
+}
+export interface List<T> {
+    pageNum: number;
+    pageSize: number;
+    total: number;
+    list: T[];
+}
+export type ListResponse<T> = Response<List<T>>;
+export type Service<Req, Res> = (params?: Params<Req>) => Promise<ListResponse<Res>>;
+export {};

package/lib/ProTable/propsType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});