@zat-design/sisyphus-react 3.0.13

package/es/ProEditTable/propsType.d.ts

@@ -0,0 +1,201 @@
+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 { 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 interface OptionsProps {
+    index: number;
+    form: FormInstance;
+    namePath: NamePath;
+}
+export interface SummaryColumnProps {
+    key: string;
+    index: number;
+    title?: string;
+    colSpan?: number;
+    valueType?: string;
+    precision?: number;
+    prefix?: ReactNode | string;
+}
+export interface BaseActionProps<T> {
+    /**
+     * @description       按钮类型
+     * @default           -
+     */
+    type?: ActionType;
+    /**
+     * @description       按钮名称
+     * @default           -
+     */
+    label?: string | ReactNode;
+    /**
+     * @description       是否显示按钮
+     * @default           true
+     */
+    show?: boolean | ShowFunction<T>;
+    /**
+     * @description       按钮是否禁止操作
+     * @default           -
+     */
+    isEditable?: boolean;
+    /**
+     * @description       按钮前置校验事件
+     * @default           -
+     */
+    onHandle?: ShowFunction<T>;
+    /**
+     * @description       按钮事件
+     * @default           -
+     */
+    onClick?: (record?: T, index?: number) => void;
+    /**
+     * @description       支持antd的Button属性
+     * @default           -
+     */
+    buttonProps?: Omit<ButtonProps, 'type' | 'onClick'>;
+}
+export type RulesFn<T> = (text?: any, record?: T, options?: OptionsProps) => Rule[] | 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> {
+    required?: boolean | RequiredFn<T>;
+    labelRequired?: boolean;
+    name?: NamePath;
+    names?: NamePath[];
+    cache?: boolean;
+    isEditable?: boolean;
+    valueType?: ProFormValueType;
+    tooltip?: string | ({
+        icon?: string | ReactNode;
+    } & TooltipProps);
+    component?: string | number | ReactNode | viewRenderFn<T>;
+    viewRender?: string | number | ReactNode | viewRenderFn<T>;
+    hiddenNames?: NamePath[] | NamePath[][];
+    rules?: Rule[] | RulesFn<T>;
+    [key: string]: any;
+}
+export type ProEditTableColumnsProps<K = any> = ProColumnsProps & ColumnPropsMap<K, 'ProEditTable'>;
+export interface State {
+    _columns: ProEditTableColumnsProps[];
+    cellNamePath: NamePath[];
+    forceUpdate: {};
+    editingKeys: string[];
+    selectedRowKeys: Key[];
+    selectedRows: any[];
+    virtualKey: string;
+}
+export interface ProEditTableRefProps {
+    getInternalState: () => State;
+}
+export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChange' | 'summary'> {
+    /**
+     * @description       可编辑表格的 form 实例，使用 Form.useForm 生成后使用
+     * @default           -
+     */
+    form?: FormInstance;
+    /**
+     * @description       可编辑表格的类型，单行、多行、单元格编辑
+     * @default           multiple
+     */
+    mode?: 'single' | 'multiple' | 'cell';
+    /**
+     * @description       可编辑表格的类型，单行编辑或者多行编辑
+     * @deprecated        将于下个版本 4.0.0 被弃用
+     * @default           multiple
+     */
+    type?: 'single' | 'multiple' | 'cell';
+    /**
+     * @description       必填对齐方式, 默认右对齐
+     * @default           right
+     */
+    requiredAlign?: 'left' | 'right';
+    /**
+     * @description       同 dataSource，传入一个数组,是 table 渲染的元数据
+     * @default           undefined
+     */
+    value?: T[];
+    /**
+     * @description       dataSource 修改时触发，删除和修改都会触发,如果设置了 value，ProEditTable 会成为一个受控组件
+     * @default           -
+     */
+    onChange?: (list: T[]) => void;
+    /**
+     * @description       表格列的配置描述，扩展了FormItemProps属性
+     * @default           []
+     */
+    columns: ProEditTableColumnsProps[];
+    /**
+     * @description       是否禁止编辑
+     * @default           false
+     */
+    disabled?: boolean;
+    /**
+     * @description       可编辑表格新增时数据插入方式，头部插入或者尾部插入
+     * @default           after
+     */
+    insertType?: 'before' | 'after';
+    /**
+     * @description       字段名，支持数组
+     * @default          -
+     */
+    name?: string | number | (string | number)[];
+    /**
+     * @description       是否可拖拽排序
+     * @default           -
+     */
+    draggable?: boolean;
+    /**
+     * @description       空列表状态时，自定义添加按钮
+     * @default          点击添加
+     */
+    emptyBtnText?: string;
+    /**
+     * @description       只能编辑一行的的提示
+     * @default          请先保存数据
+     */
+    onlyOneLineMsg?: string;
+    /**
+     * @description       单行删除时弹出的确认框提示消息
+     * @default          您确定要删除该行数据吗？
+     */
+    deletePoConfirmMsg?: string;
+    /**
+     * @description       多行删除时弹出的确认框提示消息
+     * @default          您确定要删除选中的数据吗？
+     */
+    mulDeletePoConfirmMsg?: string;
+    /**
+     * @description       自定义编辑模式的操作栏 单行编辑默认为编辑、删除、保存、取消；多行编辑为删除
+     * @default           -
+     */
+    actionWidth?: ColumnType<T>['width'];
+    /**
+     * @description       自定义编辑模式的操作栏 单行编辑默认为编辑、删除、保存、取消；多行编辑为删除
+     * @default           -
+     */
+    actionProps?: BaseActionProps<T>[] | boolean;
+    /**
+     * @description       自定义底部操作栏 默认为添加、删除（批量）
+     * @default           -
+     */
+    toolbarProps?: BaseActionProps<T>[] | boolean;
+    /**
+     * @description       formItem的props
+     * @default           -
+     */
+    otherProps?: any;
+    /**
+     * @description       底部合计配置
+     * @default           -
+     */
+    summary?: {
+        columns: SummaryColumnProps[];
+        total?: boolean;
+        fixed?: boolean | 'top' | 'bottom';
+    } | TableProps<T>['summary'];
+}

package/es/ProEditTable/propsType.js

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

package/es/ProEditTable/style/index.less

@@ -0,0 +1,227 @@
+.pro-edit-table {
+  .pro-edit-table-tooltip {
+    display    : inline-flex;
+    align-items: center;
+
+    .icon-tip {
+      svg {
+        margin-left   : 4px;
+        margin-bottom : 1px;
+        width         : 14px;
+        height        : 14px;
+        vertical-align: text-bottom;
+        fill          : #909090;
+      }
+    }
+  }
+
+  .com-empty {
+    text-align: center;
+
+    .img {
+      width : 80px;
+      height: 80px;
+    }
+
+    .content {
+      margin-top: var(--zaui-space-size-md, 16px);
+
+      .ant-btn-link {
+        padding: 0;
+      }
+    }
+  }
+
+  .is-hidden {
+    position: absolute;
+    left    : -9999px;
+  }
+
+
+  .is-cell .ant-form-item .ant-form-item-row .ant-form-item-control .ant-form-item-control-input  {
+    border: 1px solid transparent;
+    &:hover {
+      border: 1px solid #DEE0E3;
+      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;
+        }
+      }
+    }
+
+    .ant-table-selection-column {
+      padding-left: 30px !important;
+    }
+  }
+
+  .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-table-content {
+    >table {
+
+      .ant-table-cell-fix-right-first::after,
+      .ant-table-cell-fix-right-last::after {
+        width     : auto;
+        transform : none;
+        transition: none;
+        box-shadow: none;
+      }
+
+      td {
+        .pro-form-view-container_nowrap {
+          white-space: normal;
+        }
+      }
+
+      .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    : "*";
+        }
+
+        &.is-required-left {
+          &::after {
+            display: none;
+          }
+
+          &::before {
+            position   : static;
+            top        : 0;
+            display    : inline-block;
+            text-indent: -8px;
+            color      : #ff5050;
+            font-size  : 14px;
+            font-family: SimSun, sans-serif;
+            line-height: 1;
+            content    : "*";
+          }
+        }
+      }
+    }
+  }
+
+  .ant-table-cell {
+    .ant-form-item {
+      margin-bottom: 0px !important;
+    }
+  }
+
+  .ant-table.ant-table-bordered>.ant-table-container {
+    border: 0;
+  }
+
+  .ant-table-thead>tr>th {
+    border          : 0;
+    white-space     : nowrap;
+    background-color: #F6F7F8;
+  }
+
+  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+    height: 0;
+  }
+
+  .ant-table-tbody>tr:not(.ant-table-placeholder)>td {
+    border-bottom: 0;
+    border-right : 0;
+    border-top   : 0;
+  }
+
+  .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 {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .ant-table-tbody tr:nth-child(2n)>td {
+    background-color: #f7f9fc;
+  }
+
+  .ant-table-tbody>.ant-table-placeholder>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .ant-table-tbody {
+
+    >tr:hover:not(.ant-table-expanded-row, .ant-table-placeholder)>td,
+    .ant-table-row-hover,
+    .ant-table-row-hover>td {
+      background: #FAFAFA;
+    }
+  }
+
+  .ant-table-fixed {
+
+    .ant-table-row-hover,
+    .ant-table-row-hover>td {
+      background: #FAFAFA;
+    }
+  }
+
+  .ant-table-fixed-header {
+    .ant-table-tbody tr:nth-child(n)>td {
+      background-color: #FAFAFA;
+    }
+
+    .ant-table-tbody tr:nth-child(2n)>td {
+      background-color: var(--zaui-base-bg, #ffffff);
+    }
+  }
+
+  .ant-table-summary > tr > td {
+    border-bottom: none;
+  }
+}
+
+.pro-edit-table-toolbar {
+  .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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+export declare const defaultBtnNameMap: {
+    add: string;
+    edit: string;
+    copy: string;
+    delete: string;
+    mulDelete: string;
+    save: string;
+    cancel: string;
+    custom: string;
+};
+export declare const iconMap: {
+    add: JSX.Element;
+};
+export declare const defaultSingleActionKeys: string[];
+export declare const defaultMultipleActionKeys: string[];
+export declare const defaultEditingActionKeys: string[];
+export declare const defaultToolbarKeys: string[];
+export declare const actions: {
+    edit: ({ record, editingKeys, setState, form, virtualRowName, virtualKey, onlyOneLineMsg, }: any) => boolean;
+    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;
+    mulDelete: ({ form, name, virtualKey, setState, selectedRowKeys, editingKeys }: any) => void;
+};

package/es/ProEditTable/utils/config.js

@@ -0,0 +1,214 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import React from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { onDelete } from './tools';
+export var defaultBtnNameMap = {
+  add: '添加',
+  edit: '编辑',
+  copy: '复制',
+  delete: '删除',
+  mulDelete: '删除',
+  save: '保存',
+  cancel: '取消',
+  custom: '自定义'
+};
+// 默认按钮配置
+export var iconMap = {
+  add: /*#__PURE__*/React.createElement(PlusOutlined, null)
+};
+// 单行编辑 操作栏默认配置按钮
+export var defaultSingleActionKeys = ['edit', 'delete', 'save', 'cancel'];
+// 多行编辑 操作栏默认配置按钮
+export var defaultMultipleActionKeys = ['delete'];
+// 编辑状态下只显示保存、取消按钮
+export var defaultEditingActionKeys = ['save', 'cancel'];
+// 工具栏默认配置按钮
+export var defaultToolbarKeys = ['add', 'mulDelete'];
+// 操作枚举
+export var actions = {
+  edit: function edit(_ref) {
+    var record = _ref.record,
+      editingKeys = _ref.editingKeys,
+      setState = _ref.setState,
+      form = _ref.form,
+      virtualRowName = _ref.virtualRowName,
+      virtualKey = _ref.virtualKey,
+      onlyOneLineMsg = _ref.onlyOneLineMsg;
+    // 单行编辑时，需要先保存，才能进行下面的编辑
+    if (virtualKey && editingKeys.length >= 1) {
+      _message.warning(onlyOneLineMsg);
+      return false;
+    }
+    var nextEditingKeys = _toConsumableArray(editingKeys);
+    // 开启编辑状态
+    nextEditingKeys.push(record.rowKey);
+    // 编辑时赋值编辑状态，供validator做保存校验
+    record.isEditing = Boolean(nextEditingKeys.length);
+    // 复制当前行数据
+    form.setFieldValue(virtualRowName, record);
+    setState({
+      editingKeys: nextEditingKeys
+    });
+  },
+  save: function () {
+    var _save = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref2) {
+      var record, editingKeys, setState, form, rowName, virtualRowName, result, updateData, nextEditingKeys;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            record = _ref2.record, editingKeys = _ref2.editingKeys, setState = _ref2.setState, form = _ref2.form, rowName = _ref2.rowName, virtualRowName = _ref2.virtualRowName, result = _ref2.result;
+            // 保存返回数据与当前行内数据做合并
+            updateData = _typeof(result) === 'object' ? result : {};
+            record = _objectSpread(_objectSpread(_objectSpread({}, record), form.getFieldValue(virtualRowName)), updateData);
+            delete record.addFlag; // 删除第一次新增的标记
+            // 关闭当前保存行的编辑状态
+            nextEditingKeys = editingKeys.filter(function (key) {
+              return key !== record.rowKey;
+            }); // 保存后取消编辑状态，供validator做保存校验
+            record.isEditing = Boolean(nextEditingKeys.length);
+            form.setFieldValue(rowName, record);
+            setState({
+              editingKeys: nextEditingKeys
+            });
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    function save(_x) {
+      return _save.apply(this, arguments);
+    }
+    return save;
+  }(),
+  cancel: function cancel(_ref3) {
+    var name = _ref3.name,
+      record = _ref3.record,
+      editingKeys = _ref3.editingKeys,
+      setState = _ref3.setState,
+      form = _ref3.form,
+      virtualRowName = _ref3.virtualRowName,
+      virtualKey = _ref3.virtualKey;
+    var nextEditingKeys = editingKeys.filter(function (key) {
+      return key !== record.rowKey;
+    });
+    // 保存后取消编辑状态，供validator做保存校验
+    record.isEditing = Boolean(nextEditingKeys.length);
+    setState({
+      editingKeys: nextEditingKeys
+    }); // 关闭编辑状态
+    // 取消分两种，一编辑取消，二添加取消
+    if (record.addFlag) {
+      onDelete({
+        name: name,
+        form: form,
+        virtualKey: virtualKey,
+        selectedRowKeys: [record.rowKey]
+      });
+    } else {
+      form.setFieldValue(virtualRowName, record);
+    }
+  },
+  delete: function _delete(_ref4) {
+    var name = _ref4.name,
+      record = _ref4.record,
+      editingKeys = _ref4.editingKeys,
+      setState = _ref4.setState,
+      form = _ref4.form,
+      virtualKey = _ref4.virtualKey,
+      onlyOneLineMsg = _ref4.onlyOneLineMsg;
+    // 单行编辑时，需要先保存，才能进行下面的编辑
+    if (virtualKey && editingKeys.length >= 1) {
+      _message.warning(onlyOneLineMsg);
+      return false;
+    }
+    // 删除当前行数据
+    onDelete({
+      name: name,
+      form: form,
+      virtualKey: virtualKey,
+      selectedRowKeys: [record.rowKey]
+    });
+    if (virtualKey) {
+      // 关闭编辑状态
+      var nextEditingKeys = editingKeys.filter(function (key) {
+        return key === record.rowKey;
+      });
+      setState({
+        editingKeys: nextEditingKeys
+      });
+    }
+  },
+  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 = _toConsumableArray(form.getFieldValue(name) || []);
+    // 单行编辑时，需要先保存，才能进行下面的编辑
+    if (virtualKey && editingKeys.length >= 1) {
+      _message.warning(onlyOneLineMsg);
+      return false;
+    }
+    // 添加新增对象数据
+    var addData = _typeof(result) === 'object' ? result : {};
+    var rowKey = Math.random().toString(36).slice(-6);
+    insertType === 'before' ? nextData.unshift(_objectSpread(_objectSpread({}, addData), {}, {
+      addFlag: true,
+      isEditing: true,
+      rowKey: rowKey
+    })) : nextData.push(_objectSpread(_objectSpread({}, addData), {}, {
+      addFlag: true,
+      isEditing: true,
+      rowKey: rowKey
+    }));
+    form.setFieldValue(name, nextData);
+    // 当单选情况下，存储正在编辑值
+    if (virtualKey) {
+      var nextEditingKeys = _toConsumableArray(editingKeys);
+      // 开启编辑状态
+      nextEditingKeys.push(rowKey);
+      form.setFieldValue(virtualName, nextData);
+      setState({
+        editingKeys: nextEditingKeys
+      });
+    }
+  },
+  mulDelete: function mulDelete(_ref6) {
+    var form = _ref6.form,
+      name = _ref6.name,
+      virtualKey = _ref6.virtualKey,
+      setState = _ref6.setState,
+      selectedRowKeys = _ref6.selectedRowKeys,
+      _ref6$editingKeys = _ref6.editingKeys,
+      editingKeys = _ref6$editingKeys === void 0 ? [] : _ref6$editingKeys;
+    // 删除选中数据
+    onDelete({
+      name: name,
+      form: form,
+      virtualKey: virtualKey,
+      selectedRowKeys: selectedRowKeys
+    });
+    // 删除的选择数据包含单行编辑行时，清空可编辑key
+    if (virtualKey && selectedRowKeys.includes(editingKeys === null || editingKeys === void 0 ? void 0 : editingKeys[0])) {
+      setState({
+        editingKeys: []
+      });
+    }
+    setState({
+      selectedRowKeys: [],
+      selectedRows: []
+    });
+  }
+};

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

@@ -0,0 +1,10 @@
+/**
+ * 编辑模式分为 多行和单行两种
+ * 单行模式下，render 分为component和viewRender两种，对应编辑和非编辑状态下，edit状态不对外
+ * 多行模式下component设置即可
+ * render不对外暴露formItem，能自定渲染的尽是输入组件或者显示组件本身
+ * @param columns 表格配置数据
+ * @param config
+ * @param rowSelection 行选择数据
+ */
+export declare const transformColumns: (columns: any[], config: any, rowSelection: any) => any[];