linkmore-design 1.0.3 → 1.0.4

package/es/EditTable/EditTable.js

@@ -11,10 +11,6 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-require("antd/es/button/style");
-
-var _button = _interopRequireDefault(require("antd/es/button"));
-
 require("antd/es/table/style");
 
 var _table = _interopRequireDefault(require("antd/es/table"));
@@ -39,7 +35,7 @@ require("antd/es/input-number/style");
 
 var _inputNumber = _interopRequireDefault(require("antd/es/input-number"));
 
-var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
@@ -51,6 +47,10 @@ var _form = _interopRequireDefault(require("antd/es/form"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
 require("antd/es/input/style");
 
 var _input = _interopRequireDefault(require("antd/es/input"));
@@ -71,7 +71,7 @@ var _IconFont = _interopRequireDefault(require("../IconFont"));
 
 var _excluded = ["value", "onChange"],
     _excluded2 = ["index"],
-    _excluded3 = ["isEdit", "editEnum", "valueType", "editable", "children", "dataIndex", "record", "handleSave"],
+    _excluded3 = ["isEdit", "editEnum", "valueType", "editable", "children", "dataIndex", "record", "handleSave", "rowKey", "handleAdd", "handleDelete", "getLength", "itemProps", "setValid"],
     _excluded4 = ["value", "onChange", "columns", "isEdit", "isAdd", "rowKey"];
 var UploadBtn = _UploadOss.default.UploadBtn;
 
@@ -150,12 +150,51 @@ var InputRange = function InputRange(_ref) {
       return handleInput(e, 'next');
     }
   }, editEnum))));
+}; // 操作列
+
+
+var Opetate = function Opetate(_ref2) {
+  var record = _ref2.record,
+      rowKey = _ref2.rowKey,
+      handleAdd = _ref2.handleAdd,
+      handleDelete = _ref2.handleDelete,
+      getLength = _ref2.getLength,
+      removeEnum = _ref2.removeEnum,
+      addEnum = _ref2.addEnum;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({
+    type: "link",
+    size: "small",
+    icon: /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+      type: "lmweb-minus-circle",
+      style: {
+        fontSize: 16
+      }
+    }),
+    disabled: getLength() < 2 || !!(removeEnum === null || removeEnum === void 0 ? void 0 : removeEnum.disabled)
+  }, removeEnum, {
+    onClick: function onClick() {
+      return handleDelete(record[rowKey]);
+    }
+  })), /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({
+    type: "link",
+    size: "small",
+    icon: /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+      type: "lmweb-plus-circle",
+      style: {
+        fontSize: 16
+      }
+    })
+  }, addEnum, {
+    onClick: function onClick() {
+      return handleAdd(record);
+    }
+  })));
 }; // 表格行
 
 
-var EditableRow = function EditableRow(_ref2) {
-  var index = _ref2.index,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+var EditableRow = function EditableRow(_ref3) {
+  var index = _ref3.index,
+      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
 
   var _Form$useForm = _form.default.useForm(),
       _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
@@ -184,6 +223,12 @@ var EditableCell = function EditableCell(props) {
       dataIndex = props.dataIndex,
       record = props.record,
       handleSave = props.handleSave,
+      rowKey = props.rowKey,
+      handleAdd = props.handleAdd,
+      handleDelete = props.handleDelete,
+      getLength = props.getLength,
+      itemProps = props.itemProps,
+      setValid = props.setValid,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
 
   var _useState = (0, _react.useState)(true),
@@ -191,61 +236,76 @@ var EditableCell = function EditableCell(props) {
       editing = _useState2[0],
       setEditing = _useState2[1];
 
-  var form = (0, _react.useContext)(EditableContext); // useEffect(() => {
-  //   if (editing) {
-  //     inputRef.current.focus();
-  //   }
-  // }, [editing]);
-  // 出现死循环找我
+  var form = (0, _react.useContext)(EditableContext); // 出现死循环找我
 
   (0, _react.useEffect)(function () {
     if (isEdit && editable && record[dataIndex]) {
       form.setFieldsValue((0, _defineProperty2.default)({}, dataIndex, editable === 'date' ? (0, _dayjs.default)(record[dataIndex]) : record[dataIndex]));
     }
-  }, [record]); // 切换编辑状态
-
-  var toggleEdit = function toggleEdit() {
-    setEditing(!editing);
-    form.setFieldsValue((0, _defineProperty2.default)({}, dataIndex, record[dataIndex]));
-  };
+  }, [record]); // 校验保存
 
   var save = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(row) {
       var values;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              _context.next = 3;
-              return form.validateFields();
+              _context.t0 = row;
+
+              if (_context.t0) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 5;
+              return form.getFieldsValue();
 
-            case 3:
-              values = _context.sent;
-              // 传入服务器时格式化mount
-              // values.endTime = values.endTime.format('YYYY-MM-DD');
-              // toggleEdit();
-              handleSave((0, _objectSpread4.default)((0, _objectSpread4.default)({}, record), values));
+            case 5:
+              _context.t0 = _context.sent;
+
+            case 6:
+              values = _context.t0;
+              handleSave((0, _objectSpread5.default)((0, _objectSpread5.default)({}, record), values));
               _context.next = 10;
+              return form.validateFields();
+
+            case 10:
+              // 清空异常校验
+              setValid(function (old) {
+                var obj = (0, _objectSpread5.default)({}, old);
+                delete obj[record[rowKey]];
+                return obj;
+              });
+              _context.next = 16;
               break;
 
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              console.log('Save failedtext:', _context.t0);
+            case 13:
+              _context.prev = 13;
+              _context.t1 = _context["catch"](0);
+              // 加入异常校验
+              setValid(function (old) {
+                return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, old), {}, (0, _defineProperty2.default)({}, record[rowKey], _context.t1.errorFields));
+              });
 
-            case 10:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[0, 13]]);
     }));
 
-    return function save() {
-      return _ref3.apply(this, arguments);
+    return function save(_x) {
+      return _ref4.apply(this, arguments);
     };
-  }();
+  }(); // 触发保存
+
+
+  var handleFormItemChange = function handleFormItemChange() {
+    save === null || save === void 0 ? void 0 : save();
+  };
 
   var childNode = children; // 输入框
 
@@ -253,20 +313,20 @@ var EditableCell = function EditableCell(props) {
     switch (con) {
       case 'input':
         return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
-          onPressEnter: save,
-          onBlur: save,
+          onPressEnter: handleFormItemChange,
+          onBlur: handleFormItemChange,
           placeholder: "\u8BF7\u8F93\u5165"
         }, editEnum));
 
       case 'inputRange':
         return /*#__PURE__*/_react.default.createElement(InputRange, (0, _extends2.default)({
-          onChange: save
+          onChange: handleFormItemChange
         }, editEnum));
 
       case 'number':
         return /*#__PURE__*/_react.default.createElement(_inputNumber.default, (0, _extends2.default)({
-          onPressEnter: save,
-          onChange: save,
+          onPressEnter: handleFormItemChange,
+          onBlur: handleFormItemChange,
           style: {
             width: (editEnum === null || editEnum === void 0 ? void 0 : editEnum.width) || '100%'
           },
@@ -275,20 +335,20 @@ var EditableCell = function EditableCell(props) {
 
       case 'date':
         return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
-          onChange: save
+          onChange: handleFormItemChange
         }, editEnum));
 
       case 'select':
         return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
-          onSelect: save,
-          onClear: save,
           showSearch: true,
           allowClear: true,
           placeholder: "\u8BF7\u9009\u62E9",
           filterOption: function filterOption(input, option) {
             return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
           }
-        }, valueType), editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
+        }, valueType, {
+          onChange: handleFormItemChange
+        }), editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
           return /*#__PURE__*/_react.default.createElement(_select.default.Option, {
             key: v.value,
             value: v.value
@@ -298,15 +358,16 @@ var EditableCell = function EditableCell(props) {
       case 'multiple':
         return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
           mode: "multiple",
-          onSelect: save,
-          onClear: save,
           showSearch: true,
           allowClear: true,
           placeholder: "\u8BF7\u9009\u62E9",
           filterOption: function filterOption(input, option) {
             return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
           }
-        }, valueType), editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
+        }, valueType, {
+          onChange: handleFormItemChange,
+          onDeselect: handleFormItemChange
+        }), editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
           return /*#__PURE__*/_react.default.createElement(_select.default.Option, {
             key: v.value,
             value: v.value
@@ -314,9 +375,9 @@ var EditableCell = function EditableCell(props) {
         }));
 
       case 'checkbox':
-        return /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
-          onChange: save
-        }, editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
+        return /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, (0, _extends2.default)({
+          onChange: handleFormItemChange
+        }, valueType), editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
           return /*#__PURE__*/_react.default.createElement(_checkbox.default, {
             key: v.value,
             value: v.value
@@ -325,7 +386,7 @@ var EditableCell = function EditableCell(props) {
 
       case 'radio':
         return /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
-          onChange: save
+          onChange: handleFormItemChange
         }, editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
           return /*#__PURE__*/_react.default.createElement(_radio.default, {
             key: v.value,
@@ -336,32 +397,42 @@ var EditableCell = function EditableCell(props) {
       case 'upload':
         return /*#__PURE__*/_react.default.createElement(UploadSingle, {
           editEnum: editEnum,
-          onChange: save
+          onChange: handleFormItemChange
         });
 
+      case 'operate':
+        return /*#__PURE__*/_react.default.createElement(Opetate, (0, _extends2.default)({}, editEnum, {
+          record: record,
+          rowKey: rowKey,
+          handleAdd: handleAdd,
+          handleDelete: handleDelete,
+          getLength: getLength
+        }));
+
       case 'render':
         {
           var render = editEnum.render;
-          return render === null || render === void 0 ? void 0 : render((0, _objectSpread4.default)((0, _objectSpread4.default)({}, record), {}, {
+          return render === null || render === void 0 ? void 0 : render((0, _objectSpread5.default)((0, _objectSpread5.default)({}, record), {}, {
             onChange: save
           }));
         }
 
       default:
         return /*#__PURE__*/_react.default.createElement(_input.default, {
-          onPressEnter: save,
-          onBlur: save
+          onPressEnter: handleFormItemChange,
+          onBlur: handleFormItemChange
         });
     }
   }
 
   if (isEdit && editable) {
-    childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+    childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, (0, _extends2.default)({
       style: {
         margin: 0
-      },
+      }
+    }, itemProps, {
       name: dataIndex
-    }, Control(editable));
+    }), Control(editable));
   }
 
   return /*#__PURE__*/_react.default.createElement("td", restProps, childNode);
@@ -380,7 +451,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var _useState3 = (0, _react.useState)(function () {
     return defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
-      return (0, _objectSpread4.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
+      return (0, _objectSpread5.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
     });
   }),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
@@ -395,16 +466,28 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var handleDelete = function handleDelete(key) {
     var nValue = dataSource.filter(function (item) {
-      return item.key !== key;
+      return item[_rowKey] !== key;
     });
-    setDataSource(nValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
   };
 
-  var handleAdd = function handleAdd() {
+  var handleAdd = function handleAdd(row) {
     var newData = (0, _defineProperty2.default)({}, _rowKey, count + 1);
-    var nValue = [].concat((0, _toConsumableArray2.default)(dataSource), [newData]);
-    setDataSource(nValue);
+    var nValue = [];
+
+    if (row) {
+      var arr = (0, _toConsumableArray2.default)(dataSource);
+      var index = arr.findIndex(function (item) {
+        return row[_rowKey] === item[_rowKey];
+      });
+      var map = arr.splice(0, index + 1);
+      nValue = [].concat((0, _toConsumableArray2.default)(map), [newData], (0, _toConsumableArray2.default)(arr));
+    } else {
+      nValue = [].concat((0, _toConsumableArray2.default)(dataSource), [newData]);
+    }
+
     setCount(count + 1);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
   };
 
   var handleSave = function handleSave(row) {
@@ -413,13 +496,13 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return row[_rowKey] === item[_rowKey];
     });
     var item = newData[index];
-    newData.splice(index, 1, (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), row));
+    newData.splice(index, 1, (0, _objectSpread5.default)((0, _objectSpread5.default)({}, item), row));
     setDataSource(newData);
     onChange === null || onChange === void 0 ? void 0 : onChange(newData);
   };
 
   var config = (0, _react.useMemo)(function () {
-    return (0, _objectSpread4.default)({
+    return (0, _objectSpread5.default)({
       size: 'small',
       pagination: false,
       tableLayout: 'fixed',
@@ -440,13 +523,21 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           return col;
         }
 
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, col), {}, {
+        return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, col), {}, {
           onCell: function onCell(record) {
             return {
+              getLength: function getLength() {
+                return dataSource.length;
+              },
+              setValid: setValid,
+              rowKey: _rowKey,
               record: record,
               isEdit: isEdit,
+              handleAdd: handleAdd,
+              handleDelete: handleDelete,
               editable: col.editable,
               dataIndex: col.dataIndex,
+              itemProps: col.itemProps,
               editEnum: typeof col.editEnum === 'function' ? col.editEnum(record) : col.editEnum,
               valueType: typeof col.valueType === 'function' ? col.valueType(record) : col.valueType,
               handleSave: handleSave
@@ -458,12 +549,25 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [columns, dataSource]);
   (0, _react.useEffect)(function () {
     setDataSource(defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
-      return (0, _objectSpread4.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
+      return (0, _objectSpread5.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
     }));
   }, [defaultData]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
-      setRow: handleSave
+      setRow: handleSave,
+      valid: function (_valid) {
+        function valid() {
+          return _valid.apply(this, arguments);
+        }
+
+        valid.toString = function () {
+          return _valid.toString();
+        };
+
+        return valid;
+      }(function () {
+        return valid;
+      })
     };
   });
   return /*#__PURE__*/_react.default.createElement("div", {