@zat-design/sisyphus-react 3.0.13 → 3.0.16-beta.4

package/es/ProTable/useAntdTable.js

@@ -2,13 +2,20 @@ import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["page", "filters", "sorter"];
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { usePrevious, useRequest, useSetState, useDeepCompareEffect } from 'ahooks';
-import { isEqual } from 'lodash';
+import { useRequest, useSetState, useDeepCompareEffect } from 'ahooks';
 import { defaultPage } from './index';
+var defaultResponse = {
+  data: _objectSpread(_objectSpread({}, defaultPage), {}, {
+    total: 0,
+    list: []
+  }),
+  status: '',
+  message: ''
+};
 var useDefaultOptions = function useDefaultOptions(options) {
   var _useState = useState((options === null || options === void 0 ? void 0 : options.page) || defaultPage),
     _useState2 = _slicedToArray(_useState, 2),
@@ -47,6 +54,8 @@ function useAntdTable(service, options, useRequestOptions) {
     rowSelections = _useDefaultOptions.rowSelections,
     _useDefaultOptions$is = _useDefaultOptions.isResetQuery,
     isResetQuery = _useDefaultOptions$is === void 0 ? false : _useDefaultOptions$is,
+    _useDefaultOptions$cr = _useDefaultOptions.crossPageSelect,
+    crossPageSelect = _useDefaultOptions$cr === void 0 ? false : _useDefaultOptions$cr,
     onPageChange = _useDefaultOptions.onPageChange,
     transformParams = _useDefaultOptions.transformParams,
     transformResponse = _useDefaultOptions.transformResponse;
@@ -85,25 +94,21 @@ function useAntdTable(service, options, useRequestOptions) {
     defaultParams: [getTransformParams()]
   }));
   var _result$data = result.data,
-    data = _result$data === void 0 ? {} : _result$data,
+    data = _result$data === void 0 ? defaultResponse : _result$data,
     run = result.run,
     refresh = result.refresh;
-  var _ref2 = data || {},
+  var _ref2 = transformResponse ? transformResponse(data) : data || {},
     _ref2$data = _ref2.data,
     dataSource = _ref2$data === void 0 ? {} : _ref2$data;
   var _ref3 = dataSource || {},
     _ref3$list = _ref3.list,
-    list = _ref3$list === void 0 ? [] : _ref3$list,
+    newList = _ref3$list === void 0 ? [] : _ref3$list,
     _ref3$total = _ref3.total,
     total = _ref3$total === void 0 ? 0 : _ref3$total;
-  var newList = transformResponse ? transformResponse(dataSource) : list;
   var curService = useMemo(function () {
     return service.toString();
   }, [service]);
   // service变化时触发 (禁止掉防止service变更时导致的死循环)
-  // const prevService = usePrevious(curService);
-  // extraParams变化时触发
-  var prevExtraParams = usePrevious(extraParams);
   var clearSelected = useCallback(function () {
     setState({
       allSelected: false,
@@ -111,13 +116,7 @@ function useAntdTable(service, options, useRequestOptions) {
       selectedRowKeys: []
     });
   }, []);
-  // 分页变更
-  var handlePageChange = useCallback(function (current, pageSize) {
-    var page = {
-      pageNum: current,
-      pageSize: pageSize
-    };
-    onPageChange(page);
+  useEffect(function () {
     if (allSelected) {
       var filterList = newList.filter(function (item) {
         return !selectedRowKeys.includes(item === null || item === void 0 ? void 0 : item[rowKey]);
@@ -128,7 +127,16 @@ function useAntdTable(service, options, useRequestOptions) {
           return item === null || item === void 0 ? void 0 : item[rowKey];
         })))
       });
-    } else {
+    }
+  }, [allSelected, newList]);
+  // 分页变更
+  var handlePageChange = useCallback(function (current, pageSize) {
+    var page = {
+      pageNum: current,
+      pageSize: pageSize
+    };
+    onPageChange(page);
+    if (!rowSelections && !crossPageSelect) {
       setState({
         selectedRecords: [],
         selectedRowKeys: []
@@ -200,9 +208,12 @@ function useAntdTable(service, options, useRequestOptions) {
       pageSize: page.pageSize
     };
     resetParams(newPage);
-    isResetQuery && run(getTransformParams({
-      page: newPage
-    }));
+    if (isResetQuery) {
+      onPageChange(newPage);
+      run(getTransformParams({
+        page: newPage
+      }));
+    }
   }, [page.pageSize, run, resetParams, getTransformParams]);
   var handleRefresh = function handleRefresh() {
     setState({
@@ -216,40 +227,56 @@ function useAntdTable(service, options, useRequestOptions) {
     if (!manual && curService) {
       // service改变时重新请求
       resetParams();
+      onPageChange(initPage);
       run(getTransformParams());
     }
   }, [curService]);
-  useEffect(function () {
-    if (!manual && prevExtraParams && !isEqual(prevExtraParams, extraParams)) {
+  useDeepCompareEffect(function () {
+    if (!manual && extraParams) {
       var newPage = {
         pageNum: 1,
         pageSize: page.pageSize
       };
+      onPageChange(newPage);
       resetParams(newPage);
       run(getTransformParams({
         page: newPage
       }));
     }
-  }, [manual, prevExtraParams, extraParams, run, resetParams, getTransformParams]);
+  }, [extraParams]);
   var rowSelection = {
     type: rowSelectType,
     selectedRowKeys: selectedRowKeys,
-    onChange: function onChange(selectedRowKeys, rows) {
-      setState({
-        selectedRecords: rows,
-        selectedRowKeys: selectedRowKeys
-      });
-    },
-    onSelectAll: function onSelectAll(selected, selectedRows) {
-      if (selected) {
+    onChange: function onChange(rowKeys, rows) {
+      if (crossPageSelect) {
+        var _newList$map, _Array$from, _ref4;
+        var removeKeys = newList === null || newList === void 0 ? void 0 : (_newList$map = newList.map(function (item) {
+          return item === null || item === void 0 ? void 0 : item[rowKey];
+        })) === null || _newList$map === void 0 ? void 0 : _newList$map.filter(function (key) {
+          return !rowKeys.includes(key);
+        });
+        var newSelectedKeys = (_Array$from = Array.from(new Set([].concat(_toConsumableArray(selectedRowKeys), _toConsumableArray(rowKeys))))) === null || _Array$from === void 0 ? void 0 : _Array$from.filter(function (item) {
+          return !removeKeys.includes(item);
+        });
+        var selectedRecordObj = (_ref4 = [].concat(_toConsumableArray(selectedRecords), _toConsumableArray(rows))) === null || _ref4 === void 0 ? void 0 : _ref4.reduce(function (acc, cur) {
+          acc[cur === null || cur === void 0 ? void 0 : cur[rowKey]] = cur;
+          return acc;
+        }, {});
         setState({
-          allSelected: true,
-          selectedRecords: selectedRows,
-          selectedRowKeys: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (item) {
-            return item === null || item === void 0 ? void 0 : item.productId;
-          })
+          selectedRecords: newSelectedKeys === null || newSelectedKeys === void 0 ? void 0 : newSelectedKeys.map(function (item) {
+            return selectedRecordObj === null || selectedRecordObj === void 0 ? void 0 : selectedRecordObj[item];
+          }),
+          selectedRowKeys: newSelectedKeys
         });
       } else {
+        setState({
+          selectedRecords: rows,
+          selectedRowKeys: rowKeys
+        });
+      }
+    },
+    onSelectAll: function onSelectAll(selected) {
+      if (rowSelections && allSelected && !selected) {
         setState({
           allSelected: false,
           selectedRecords: [],

package/es/ProTable/utils.js

@@ -6,7 +6,7 @@ import _Typography from "antd/es/typography";
 import React from 'react';
 import moment from 'moment';
 import { multiply } from 'lodash';
-import { ProForm } from 'zat-design-pro-component';
+import { ProForm } from '@zat-design/sisyphus-react';
 import { ReactSVG } from 'react-svg';
 import { CheckOutlined } from '@ant-design/icons';
 import copySvg from '../assets/copy.svg';
@@ -14,13 +14,22 @@ import getEnumLabel from '../ProEnum/getEnumLabel';
 import tipSvg from '../assets/tip.svg';
 var Paragraph = _Typography.Paragraph,
   Text = _Typography.Text;
+/**
+ * 获取小数点后的位数
+ * @param num 数字
+ * @returns 位数
+ */
+var getDecimalDigits = function getDecimalDigits(num) {
+  var match = num.toString().match(/\.(\d+)/);
+  return match ? match[1].length : 0;
+};
 export var formatColumn = function formatColumn(column) {
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
     format = _column$format === void 0 ? 'YYYY-MM-DD HH:mm:ss' : _column$format,
     _column$precision = column.precision,
-    precision = _column$precision === void 0 ? 0 : _column$precision,
+    precision = _column$precision === void 0 ? 2 : _column$precision,
     ellipsis = column.ellipsis,
     code = column.code,
     copyable = column.copyable,
@@ -50,7 +59,12 @@ export var formatColumn = function formatColumn(column) {
         if (!value && value !== 0) {
           return '-';
         }
-        var renderValue = multiply(value, 100);
+        var renderValue = multiply(Number(value), 100);
+        // 获取真实数据的小数位数
+        var decimalDigits = getDecimalDigits(value);
+        if (decimalDigits > precision) {
+          return renderValue;
+        }
         return renderValue.toFixed(precision);
       };
       break;
@@ -60,7 +74,12 @@ export var formatColumn = function formatColumn(column) {
         if (!value && value !== 0) {
           return '-';
         }
-        var renderValue = multiply(value, 1000);
+        var renderValue = multiply(Number(value), 1000);
+        // 获取真实数据的小数位数
+        var decimalDigits = getDecimalDigits(value);
+        if (decimalDigits > precision) {
+          return renderValue;
+        }
         return renderValue.toFixed(precision);
       };
       break;
@@ -71,7 +90,7 @@ export var formatColumn = function formatColumn(column) {
           return '-';
         }
         if (precision) {
-          return "".concat(value.toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+          return "".concat(Number(value).toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         }
         return "".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       };
@@ -83,7 +102,7 @@ export var formatColumn = function formatColumn(column) {
           return '-';
         }
         if (precision) {
-          return "CNY ".concat(value.toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+          return "CNY ".concat(Number(value).toFixed(precision)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         }
         return "CNY ".concat(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
       };

package/es/ProTabs/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CardProps } from '../../propType';
+declare const Card: (props: CardProps) => React.JSX.Element;
+export default Card;

package/es/ProTabs/components/Card/index.js

@@ -0,0 +1,24 @@
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import React from 'react';
+import { tools } from '@zat-design-pro-component/utils';
+var Card = function Card(props) {
+  var total = props.total,
+    label = props.label,
+    icon = props.icon;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pro-tabs-card"
+  }, /*#__PURE__*/React.createElement(_Space, {
+    size: 8,
+    align: "center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pro-tabs-card-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pro-tabs-card-left-total"
+  }, tools.formatAmount(total, 0) || 0), /*#__PURE__*/React.createElement("div", {
+    className: "pro-tabs-card-left-label"
+  }, label)), /*#__PURE__*/React.createElement("div", {
+    className: "pro-tabs-card-right"
+  }, icon || '-')));
+};
+export default Card;

package/es/ProTabs/components/index.d.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card';

package/es/ProTabs/components/index.js

@@ -0,0 +1 @@
+export { default as Card } from './Card';

package/es/ProTabs/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ProTabsProps } from './propType';
+declare const _default: React.ForwardRefExoticComponent<Pick<ProTabsProps, keyof ProTabsProps> & React.RefAttributes<unknown>>;
+export default _default;

package/es/ProTabs/index.js

@@ -0,0 +1,98 @@
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "className", "dataSource", "onChange", "transformResponse", "useRequest", "tabSearch"];
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
+import React, { useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
+import classNames from 'classnames';
+import { omit } from 'lodash';
+import { Card } from './components';
+var ProTabs = function ProTabs(props, ref) {
+  var style = props.style,
+    className = props.className,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    onChange = props.onChange,
+    transformResponse = props.transformResponse,
+    useRequest = props.useRequest,
+    _props$tabSearch = props.tabSearch,
+    tabSearch = _props$tabSearch === void 0 ? false : _props$tabSearch,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(dataSource || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectList = _useState2[0],
+    setSelectList = _useState2[1];
+  var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
+    manual: true,
+    onSuccess: function onSuccess(data) {
+      if (transformResponse && typeof transformResponse === 'function') {
+        // 转换数据
+        var responseData = transformResponse(data);
+        if (!Array.isArray(responseData) || !responseData.every(function (item) {
+          return typeof item === 'number';
+        })) {
+          return console.error('transformResponse must return a number array, like [1, 2, 3]');
+        }
+        var result = selectList.map(function (item, index) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            total: responseData[index]
+          });
+        });
+        setSelectList(result);
+      }
+    },
+    debounceWait: 300
+  }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
+  var _items = useMemo(function () {
+    return selectList.map(function (itemProps) {
+      var cardItemProps = {
+        total: itemProps.total,
+        label: itemProps.label,
+        icon: itemProps.icon
+      };
+      return _objectSpread(_objectSpread({}, omit(itemProps, ['total', 'label', 'icon'])), {}, {
+        label: /*#__PURE__*/React.createElement(Card, _objectSpread({}, cardItemProps))
+      });
+    });
+  }, [selectList]);
+  var cls = classNames(_defineProperty({
+    'pro-tabs': true
+  }, className, className));
+  var handleChange = function handleChange(key) {
+    var onChange = props.onChange;
+    // 开启tab切换查询
+    if (tabSearch) {
+      fetchFunction.refresh();
+    }
+    onChange && onChange(key, fetchFunction);
+  };
+  // manual为false时，自动执行
+  useDeepCompareEffect(function () {
+    var _ref = (useRequest === null || useRequest === void 0 ? void 0 : useRequest.options) || {},
+      defaultParams = _ref.defaultParams,
+      manual = _ref.manual;
+    if (manual || !useRequest) {
+      return;
+    }
+    fetchFunction.run(defaultParams);
+  }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options]);
+  useImperativeHandle(ref, function () {
+    return {
+      useRequestRef: fetchFunction
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: cls
+  }, /*#__PURE__*/React.createElement(_Tabs, _objectSpread(_objectSpread({
+    animated: false
+  }, rest), {}, {
+    items: _items,
+    onChange: handleChange
+  })));
+};
+export default /*#__PURE__*/forwardRef(ProTabs);

package/es/ProTabs/propType.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { TabsProps } from 'antd';
+import { Service, Options, Result } from 'ahooks/lib/useRequest/src/types';
+export interface CardProps {
+    total: number;
+    label: string | React.ReactNode;
+    icon: React.ReactNode;
+    [key: string]: any;
+}
+export interface ProTabsItemsProps extends CardProps {
+    key: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export interface ProTabsAction {
+    /** 获取发生请求的 useRequest 的 ref */
+    useRequestRef: Result<any, any>;
+}
+export interface ProTabsProps extends Omit<TabsProps, 'items' | 'onChange'> {
+    dataSource: ProTabsItemsProps[];
+    /** 是否开启tab切换查询 */
+    tabSearch?: boolean;
+    onChange?: (activeKey: string, useRequest: Result<any, any>) => void;
+    /** 远程请求接口 */
+    useRequest?: {
+        service: Service<any, any>;
+        options?: Options<any, any>;
+    };
+    [key: string]: any;
+}

package/es/ProTabs/propType.js

@@ -0,0 +1 @@
+export {};

package/es/ProTabs/style/index.less

@@ -0,0 +1,68 @@
+.pro-tabs {
+  .ant-tabs .ant-tabs-nav-list .ant-tabs-tab {
+    padding: 0;
+  }
+
+  .ant-tabs-top>.ant-tabs-nav::before,
+  .ant-tabs-bottom>.ant-tabs-nav::before,
+  .ant-tabs-top>div>.ant-tabs-nav::before,
+  .ant-tabs-bottom>div>.ant-tabs-nav::before {
+    border: none;
+  }
+
+
+  .ant-tabs-nav-list {
+    .ant-tabs-tab {
+      &:first-child {
+        .pro-tabs-card {
+          border-left: 1px solid var(--zaui-line, #dddddd);
+        }
+      }
+    }
+  }
+
+  .ant-tabs-tab-active {
+    .pro-tabs-card {
+      background: var(--ant-primary-color-active-deprecated-f-30, rgba(230, 247, 255, 0.3));
+    }
+  }
+
+  .ant-tabs-ink-bar {
+    top   : 0;
+    height: 3px !important;
+  }
+
+  .pro-tabs-card {
+    width      : 200px;
+    padding    : 14px 16px 14px 24px;
+    border     : 1px solid var(--zaui-line, #dddddd);
+    border-left: none;
+
+
+
+    .pro-tabs-card-left {
+      width      : 104px;
+      text-shadow: none;
+
+      .pro-tabs-card-left-total {
+        font-size  : 26px;
+        font-weight: 600;
+        color      : var(--zaui-text, #343434);
+      }
+
+      .pro-tabs-card-left-label {
+        font-size  : var(--zaui-font-size, 14px);
+        font-weight: 400;
+        color      : var(--aui-text, #343434);
+      }
+    }
+
+    .pro-tabs-card-right {
+      display: flex;
+
+      img {
+        width: 48px;
+      }
+    }
+  }
+}

package/es/ProThemeTools/component/PrdTools/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DevToolsPropsType } from '../../propsType';
+declare const PrdTools: ({ onReset, onClose, setState, visible, state }: DevToolsPropsType) => React.JSX.Element;
+export default PrdTools;