@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/lib/ProEditTable/propsType.d.ts

@@ -1,13 +1,17 @@
 import { Key, ReactNode } from 'react';
-import type { ButtonProps } from 'antd/lib/button';
-import type { TooltipProps } from 'antd/lib/tooltip';
-import type { NamePath } from 'antd/lib/form/interface';
-import type { ColumnType } from 'antd/es/table';
-import type { TableProps } from 'antd/lib/table';
-import type { FormInstance, FormItemProps, Rule } from 'antd/lib/Form';
+import type { ButtonProps } from 'antd/es/button';
+import type { TooltipProps } from 'antd/es/tooltip';
+import type { NamePath } from 'antd/es/form/interface';
+import type { ColumnType, TableProps } from 'antd/es/table';
+import type { FormInstance, FormItemProps } from 'antd/es/form';
+import type { ProRule } from '../ProForm/propsType';
 import { ProFormValueType, ColumnPropsMap } from '../ProForm/components/render/propsType';
 export type ActionType = 'edit' | 'delete' | 'save' | 'cancel' | 'add' | 'mulDelete' | 'custom';
-export type ShowFunction<T> = (record?: T, index?: number) => Promise<any> | boolean | void;
+export type ShowFunction<T> = (record?: T, options?: {
+    index?: number;
+    form?: FormInstance;
+    namePath?: NamePath;
+}) => Promise<any> | boolean | void;
 export interface OptionsProps {
     index: number;
     form: FormInstance;
@@ -22,7 +26,7 @@ export interface SummaryColumnProps {
     precision?: number;
     prefix?: ReactNode | string;
 }
-export interface BaseActionProps<T> {
+export interface BaseActionProps<T = any> {
     /**
      * @description       按钮类型
      * @default           -
@@ -38,6 +42,16 @@ export interface BaseActionProps<T> {
      * @default           true
      */
     show?: boolean | ShowFunction<T>;
+    /**
+     * @description       是否禁止操作
+     * @default           true
+     */
+    disabled?: boolean | ShowFunction<T>;
+    /**
+     * @description       添加是否自定义打开弹框
+     * @default           false
+     */
+    isSelectModal?: boolean;
     /**
      * @description       删除是否开启二次确认
      * @default           true
@@ -52,19 +66,19 @@ export interface BaseActionProps<T> {
      * @description       按钮前置校验事件
      * @default           -
      */
-    onHandle?: ShowFunction<T>;
+    onClick?: ShowFunction<T>;
     /**
-     * @description       按钮事件
+     * @description       按钮前置校验事件
      * @default           -
      */
-    onClick?: (record?: T, index?: number) => void;
+    onHandle?: ShowFunction<T>;
     /**
      * @description       支持antd的Button属性
      * @default           -
      */
     buttonProps?: Omit<ButtonProps, 'type' | 'onClick'>;
 }
-export type RulesFn<T> = (text?: any, record?: T, options?: OptionsProps) => Rule[] | void;
+export type RulesFn<T> = (text?: any, record?: T, options?: OptionsProps) => ProRule[] | void;
 export type RequiredFn<T> = (text?: any, record?: T, options?: OptionsProps) => boolean | void;
 export type viewRenderFn<T> = (text?: any, record?: T, options?: OptionsProps) => string | number | ReactNode | void;
 export interface ProColumnsProps<Values = any, T = any> extends Omit<FormItemProps<Values>, 'rules' | 'required'>, ColumnType<Values> {
@@ -73,7 +87,7 @@ export interface ProColumnsProps<Values = any, T = any> extends Omit<FormItemPro
     name?: NamePath;
     names?: NamePath[];
     cache?: boolean;
-    isEditable?: boolean;
+    isEditable?: boolean | RequiredFn<T>;
     valueType?: ProFormValueType;
     tooltip?: string | ({
         icon?: string | ReactNode;
@@ -81,7 +95,7 @@ export interface ProColumnsProps<Values = any, T = any> extends Omit<FormItemPro
     component?: string | number | ReactNode | viewRenderFn<T>;
     viewRender?: string | number | ReactNode | viewRenderFn<T>;
     hiddenNames?: NamePath[] | NamePath[][];
-    rules?: Rule[] | RulesFn<T>;
+    rules?: ProRule[] | RulesFn<T>;
     [key: string]: any;
 }
 export type ProEditTableColumnsProps<K = any> = ProColumnsProps & ColumnPropsMap<K, 'ProEditTable'>;
@@ -93,6 +107,10 @@ export interface State {
     selectedRowKeys: Key[];
     selectedRows: any[];
     virtualKey: string;
+    page: {
+        pageNum: number;
+        pageSize: number;
+    };
 }
 export interface ProEditTableRefProps {
     getInternalState: () => State;
@@ -139,6 +157,11 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
      * @default           false
      */
     disabled?: boolean;
+    /**
+     * @description       是否开启斑马纹
+     * @default           true
+     */
+    stripe?: boolean;
     /**
      * @description       可编辑表格新增时数据插入方式，头部插入或者尾部插入
      * @default           after
@@ -189,6 +212,11 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
      * @default           -
      */
     toolbarProps?: BaseActionProps<T>[] | boolean;
+    /**
+     * @description       最大可添加数量
+     * @default           -
+     */
+    max?: number;
     /**
      * @description       formItem的props
      * @default           -
@@ -203,4 +231,9 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
         total?: boolean;
         fixed?: boolean | 'top' | 'bottom';
     } | TableProps<T>['summary'];
+    /**
+     * @description       底部合计配置
+     * @default           -
+     */
+    headerRender?: ReactNode;
 }

package/lib/ProEditTable/style/index.less

@@ -4,13 +4,20 @@
     align-items: center;
 
     .icon-tip {
+      height        : 16px;
+      margin-left   : var(--zaui-space-size-xs, 4px);
+      > div {
+        height        : 16px;
+        svg {
+          width         : 16px;
+          height        : 16px;
+          fill          : var(--zaui-aide-text, #909090);
+        }
+      }
       svg {
-        margin-left   : 4px;
-        margin-bottom : 1px;
-        width         : 14px;
-        height        : 14px;
-        vertical-align: text-bottom;
-        fill          : #909090;
+        width         : 16px;
+        height        : 16px;
+        fill          : var(--zaui-aide-text, #909090);
       }
     }
   }
@@ -24,6 +31,8 @@
     }
 
     .content {
+      display: flex;
+      justify-content: center;
       margin-top: var(--zaui-space-size-md, 16px);
 
       .ant-btn-link {
@@ -43,34 +52,22 @@
 
     &:hover {
       border       : 1px solid #DEE0E3;
-      border-radius: 4px;
+      border-radius: var(--zaui-border-radius, 4px);
       text-indent  : 5px;
     }
   }
-
-  &.pro-edit-table-drag {
-    tr {
-      position: relative;
-    }
-
-    .is-drag {
-      position: absolute;
-      left    : 2px;
-      padding : 0 !important;
-      top     : 13px;
-      z-index : 1;
-
-      .drag-handle {
-        padding: 4px;
-
-        div {
-          height: 20px;
-        }
-      }
+  
+  .drag-wrapper {
+    display: flex;
+    .drag-icon {
+      margin-right: var(--zaui-space-size-xs, 4px);
+      cursor: pointer;
     }
+  }
 
-    .ant-table-selection-column {
-      padding-left: 30px !important;
+  &.pro-table-no-stripe {
+    .ant-table-tbody tr:nth-child(n)>td {
+      background-color: var(--zaui-base-bg, #fff);
     }
   }
 
@@ -86,11 +83,58 @@
     }
   }
 
+  .ant-table-header>table .ant-table-thead>tr>th.ant-table-selection-column {
+    padding-left: var(--zaui-space-size-md, 16px);
+    padding-right: var(--zaui-space-size-md, 16px);
+  }
+
+  .ant-table-header>table .ant-table-thead>tr>th:not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan]).is-required {
+    &::after {
+      content: "";
+    }
+
+    &.is-required-left {
+      &::before {
+        content: "";
+      }
+    }
+    .pro-edit-table-title {
+      &::after {
+        width: auto;
+        position   : static;
+        top        : 0;
+        display    : inline-block;
+        margin-left: var(--zaui-space-size-xs, 4px);
+        color      : #ff5050;
+        font-size  : 14px;
+        line-height: 1;
+        content    : "*";
+      }
+    
+      &.is-required-left {
+        &::after {
+          display: none;
+        }
+    
+        &::before {
+          position   : static;
+          top        : 0;
+          display    : inline-block;
+          text-indent: -8px;
+          color      : #ff5050;
+          font-size  : var(--zaui-font-size-md, 14px);
+          line-height: 1;
+          content    : "*";
+        }
+      }
+    }
+  }
+
   .ant-table-content {
     >table {
       .ant-table-summary {
         background-color: var(--zaui-table-header-bg, #f2f3f5);
-        color           : #343434;
+        color           : var(--zaui-text, #343434);
         font-weight     : 600;
 
         .ant-table-cell-fix-left,
@@ -99,6 +143,10 @@
         }
       }
 
+      th.ant-table-selection-column {
+        width: 48px;
+      }
+
       td {
         .pro-form-view-container_nowrap {
           white-space: normal;
@@ -107,33 +155,43 @@
 
       .ant-table-thead>tr>th:not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan]).is-required {
         &::after {
-          position   : static;
-          top        : 0;
-          display    : inline-block;
-          margin-left: 2px;
-          color      : #ff5050;
-          font-size  : 14px;
-          font-family: SimSun, sans-serif;
-          line-height: 1;
-          content    : "*";
+          content: "";
         }
 
         &.is-required-left {
-          &::after {
-            display: none;
-          }
-
           &::before {
+            content: "";
+          }
+        }
+        .pro-edit-table-title {
+          &::after {
+            width: auto;
             position   : static;
             top        : 0;
             display    : inline-block;
-            text-indent: -8px;
+            margin-left: var(--zaui-space-size-xs, 4px);
             color      : #ff5050;
-            font-size  : 14px;
-            font-family: SimSun, sans-serif;
+            font-size  : var(--zaui-font-size-md, 14px);
             line-height: 1;
             content    : "*";
           }
+        
+          &.is-required-left {
+            &::after {
+              display: none;
+            }
+        
+            &::before {
+              position   : static;
+              top        : 0;
+              display    : inline-block;
+              text-indent: -8px;
+              color      : #ff5050;
+              font-size  : var(--zaui-font-size-md, 14px);
+              line-height: 1;
+              content    : "*";
+            }
+          }
         }
       }
     }
@@ -168,7 +226,6 @@
   .ant-table-tbody>.is-editing:not(.ant-table-measure-row)>td {
     border-bottom : 0;
     vertical-align: top;
-    padding       : var(--zaui-space-size-md, 16px);
   }
 
   .ant-table-tbody tr:nth-child(n)>td {
@@ -213,18 +270,51 @@
   .ant-table-summary>tr>td {
     border-bottom: none;
   }
+
+  .ant-table-pagination {
+    .ant-pagination-options {
+      .ant-select.ant-select-in-form-item {
+        width: auto;
+      }
+    }
+  }
+
+}
+
+.pro-edit-table-header {
+  margin-bottom: var(--zaui-space-size-md, 16px);
+}
+
+.pro-edit-table-toolbar-fixed {
+  position: absolute;
+  bottom: var(--zaui-space-size-md, 16px);
 }
 
 .pro-edit-table-toolbar {
+  margin-top: var(--zaui-space-size-md, 16px);
   .ant-space {
     gap: var(--zaui-space-size-sm, 8px);
 
-    .ant-btn-link {
-      padding: 0 var(--zaui-space-size-xs, 4px);
-
-      &:first-child {
-        padding-left: 0;
+    .ant-space-item {
+      .ant-btn-link {
+        display: flex;
+        align-items: center;
+        padding: 0 var(--zaui-space-size-xs, 4px);
+  
+        &:first-child {
+          padding-left: 0;
+        }
+  
+        span:nth-child(2) {
+          margin-left: var(--zaui-space-size-xs, 4px);
+        }
       }
     }
   }
-}
+}
+
+.pro-edit-table-drag {
+  table tr th.ant-table-selection-column.ant-table-cell-fix-left{
+    text-align: right;
+  }
+}

package/lib/ProEditTable/utils/config.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare const defaultBtnNameMap: {
     add: string;
     edit: string;
@@ -10,7 +9,7 @@ export declare const defaultBtnNameMap: {
     custom: string;
 };
 export declare const iconMap: {
-    add: React.JSX.Element;
+    add: JSX.Element;
 };
 export declare const defaultSingleActionKeys: string[];
 export declare const defaultMultipleActionKeys: string[];
@@ -21,6 +20,6 @@ export declare const actions: {
     save: ({ record, editingKeys, setState, form, rowName, virtualRowName, result }: any) => Promise<void>;
     cancel: ({ name, record, editingKeys, setState, form, virtualRowName, virtualKey }: any) => void;
     delete: ({ name, record, editingKeys, setState, form, virtualKey, onlyOneLineMsg }: any) => boolean;
-    add: ({ result, insertType, editingKeys, setState, form, name, virtualName, virtualKey, onlyOneLineMsg, }: any) => boolean;
+    add: ({ result, insertType, editingKeys, setState, form, name, virtualName, virtualKey, onlyOneLineMsg, tableRef, }: any) => Promise<boolean>;
     mulDelete: ({ form, name, virtualKey, setState, selectedRowKeys, editingKeys }: any) => void;
 };

package/lib/ProEditTable/utils/config.js

@@ -10,11 +10,11 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _tools = require("./tools");
-var defaultBtnNameMap = {
+var defaultBtnNameMap = exports.defaultBtnNameMap = {
   add: '添加',
   edit: '编辑',
   copy: '复制',
@@ -25,25 +25,19 @@ var defaultBtnNameMap = {
   custom: '自定义'
 };
 // 默认按钮配置
-exports.defaultBtnNameMap = defaultBtnNameMap;
-var iconMap = {
-  add: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null)
+var iconMap = exports.iconMap = {
+  add: (0, _jsxRuntime.jsx)(_icons.PlusOutlined, {})
 };
 // 单行编辑 操作栏默认配置按钮
-exports.iconMap = iconMap;
-var defaultSingleActionKeys = ['edit', 'delete', 'save', 'cancel'];
+var defaultSingleActionKeys = exports.defaultSingleActionKeys = ['edit', 'delete', 'save', 'cancel'];
 // 多行编辑 操作栏默认配置按钮
-exports.defaultSingleActionKeys = defaultSingleActionKeys;
-var defaultMultipleActionKeys = ['delete'];
+var defaultMultipleActionKeys = exports.defaultMultipleActionKeys = ['delete'];
 // 编辑状态下只显示保存、取消按钮
-exports.defaultMultipleActionKeys = defaultMultipleActionKeys;
-var defaultEditingActionKeys = ['save', 'cancel'];
+var defaultEditingActionKeys = exports.defaultEditingActionKeys = ['save', 'cancel'];
 // 工具栏默认配置按钮
-exports.defaultEditingActionKeys = defaultEditingActionKeys;
-var defaultToolbarKeys = ['add', 'mulDelete'];
+var defaultToolbarKeys = exports.defaultToolbarKeys = ['add', 'mulDelete'];
 // 操作枚举
-exports.defaultToolbarKeys = defaultToolbarKeys;
-var actions = {
+var actions = exports.actions = {
   edit: function edit(_ref) {
     var record = _ref.record,
       editingKeys = _ref.editingKeys,
@@ -169,45 +163,58 @@ var actions = {
       });
     }
   },
-  add: function add(_ref5) {
-    var result = _ref5.result,
-      insertType = _ref5.insertType,
-      editingKeys = _ref5.editingKeys,
-      setState = _ref5.setState,
-      form = _ref5.form,
-      name = _ref5.name,
-      virtualName = _ref5.virtualName,
-      virtualKey = _ref5.virtualKey,
-      onlyOneLineMsg = _ref5.onlyOneLineMsg;
-    var nextData = (0, _toConsumableArray2.default)(form.getFieldValue(name) || []);
-    // 单行编辑时，需要先保存，才能进行下面的编辑
-    if (virtualKey && editingKeys.length >= 1) {
-      _antd.message.warning(onlyOneLineMsg);
-      return false;
-    }
-    var rowKey = (0, _tools.getRandom)();
-    // 添加新增对象数据
-    var addData = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _typeof2.default)(result) === 'object' ? result : {}), {}, {
-      rowKey: rowKey
-    });
-    // 单行编辑时，需要操作一下数据结构，判断是否第一次新增，以及是否是编辑状态
-    if (virtualKey) {
-      addData.addFlag = true;
-      addData.isEditing = true;
-    }
-    insertType === 'before' ? nextData.unshift(addData) : nextData.push(addData);
-    form.setFieldValue(name, nextData);
-    // 当单选情况下，存储正在编辑值
-    if (virtualKey) {
-      var nextEditingKeys = (0, _toConsumableArray2.default)(editingKeys);
-      // 开启编辑状态
-      nextEditingKeys.push(rowKey);
-      form.setFieldValue(virtualName, nextData);
-      setState({
-        editingKeys: nextEditingKeys
-      });
+  add: function () {
+    var _add = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(_ref5) {
+      var _tableRef$current$que, _tableRef$current$que2;
+      var result, insertType, editingKeys, setState, form, name, virtualName, virtualKey, onlyOneLineMsg, tableRef, nextData, rowKey, addData, nextEditingKeys;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            result = _ref5.result, insertType = _ref5.insertType, editingKeys = _ref5.editingKeys, setState = _ref5.setState, form = _ref5.form, name = _ref5.name, virtualName = _ref5.virtualName, virtualKey = _ref5.virtualKey, onlyOneLineMsg = _ref5.onlyOneLineMsg, tableRef = _ref5.tableRef;
+            nextData = (0, _toConsumableArray2.default)(form.getFieldValue(name) || []); // 单行编辑时，需要先保存，才能进行下面的编辑
+            if (!(virtualKey && editingKeys.length >= 1)) {
+              _context2.next = 5;
+              break;
+            }
+            _antd.message.warning(onlyOneLineMsg);
+            return _context2.abrupt("return", false);
+          case 5:
+            rowKey = (0, _tools.getRandom)(); // 添加新增对象数据
+            addData = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _typeof2.default)(result) === 'object' ? result : {}), {}, {
+              rowKey: rowKey
+            }); // 单行编辑时，需要操作一下数据结构，判断是否第一次新增，以及是否是编辑状态
+            if (virtualKey) {
+              addData.addFlag = true;
+              addData.isEditing = true;
+            }
+            insertType === 'before' ? nextData.unshift(addData) : nextData.push(addData);
+            form.setFieldValue(name, nextData);
+            (_tableRef$current$que = tableRef.current.querySelector('.ant-table-body')) === null || _tableRef$current$que === void 0 ? void 0 : (_tableRef$current$que2 = _tableRef$current$que.scrollTo) === null || _tableRef$current$que2 === void 0 ? void 0 : _tableRef$current$que2.call(_tableRef$current$que, {
+              top: 10000,
+              behavior: 'smooth'
+            });
+            // 当单选情况下，存储正在编辑值
+            if (virtualKey) {
+              nextEditingKeys = (0, _toConsumableArray2.default)(editingKeys); // 开启编辑状态
+              nextEditingKeys.push(rowKey);
+              form.setFieldValue(virtualName, nextData);
+              setState({
+                editingKeys: nextEditingKeys
+              });
+            }
+            _context2.next = 14;
+            return form.validateFields([name]);
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    function add(_x2) {
+      return _add.apply(this, arguments);
     }
-  },
+    return add;
+  }(),
   mulDelete: function mulDelete(_ref6) {
     var form = _ref6.form,
       name = _ref6.name,
@@ -234,5 +241,4 @@ var actions = {
       selectedRows: []
     });
   }
-};
-exports.actions = actions;
+};

package/lib/ProEditTable/utils/index.d.ts

@@ -5,6 +5,5 @@
  * render不对外暴露formItem，能自定渲染的尽是输入组件或者显示组件本身
  * @param columns 表格配置数据
  * @param config
- * @param rowSelection 行选择数据
  */
-export declare const transformColumns: (columns: any[], config: any, rowSelection: any) => any[];
+export declare const transformColumns: (columns: any[], config: any) => any[];