linkmore-design 1.0.30 → 1.0.31

package/es/EditTable/EditTable.js

@@ -0,0 +1,588 @@
+"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.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+require("antd/es/table/style");
+
+var _table = _interopRequireDefault(require("antd/es/table"));
+
+require("antd/es/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+require("antd/es/checkbox/style");
+
+var _checkbox = _interopRequireDefault(require("antd/es/checkbox"));
+
+require("antd/es/select/style");
+
+var _select = _interopRequireDefault(require("antd/es/select"));
+
+require("antd/es/date-picker/style");
+
+var _datePicker = _interopRequireDefault(require("antd/es/date-picker"));
+
+require("antd/es/input-number/style");
+
+var _inputNumber = _interopRequireDefault(require("antd/es/input-number"));
+
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+require("antd/es/form/style");
+
+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"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _UploadOss = _interopRequireDefault(require("../UploadOss"));
+
+var _IconFont = _interopRequireDefault(require("../IconFont"));
+
+var _excluded = ["value", "onChange"],
+    _excluded2 = ["index"],
+    _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;
+
+var EditableContext = /*#__PURE__*/_react.default.createContext(null);
+
+var UploadSingle = function UploadSingle(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      editEnum = props.editEnum;
+
+  var handleDelete = function handleDelete() {
+    onChange === null || onChange === void 0 ? void 0 : onChange();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_single"
+  }, value ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-link",
+    style: {
+      fontSize: 14,
+      color: '#1890ff'
+    }
+  }), /*#__PURE__*/_react.default.createElement("a", {
+    href: "".concat(value === null || value === void 0 ? void 0 : value.externalUrl, "/").concat(value === null || value === void 0 ? void 0 : value.filePath).concat(value === null || value === void 0 ? void 0 : value.realFileName),
+    target: "_blank",
+    rel: "noreferrer"
+  }, value === null || value === void 0 ? void 0 : value.fileName), /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-delete",
+    style: {
+      fontSize: 14,
+      color: '#1890ff'
+    },
+    onClick: handleDelete
+  })) : /*#__PURE__*/_react.default.createElement(UploadBtn, (0, _extends2.default)({}, editEnum, {
+    value: value,
+    onChange: onChange
+  })));
+};
+
+var InputRange = function InputRange(_ref) {
+  var _ref$value = _ref.value,
+      value = _ref$value === void 0 ? ['', ''] : _ref$value,
+      onChange = _ref.onChange,
+      editEnum = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  // 输入值改变
+  var handleInput = function handleInput(e, type) {
+    var v = e.target.value;
+    var nValue = (0, _toConsumableArray2.default)(value);
+
+    if (type === 'prev') {
+      nValue[0] = v;
+    }
+
+    if (type === 'next') {
+      nValue[1] = v;
+    }
+
+    onChange(nValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_base_editTable_wrapperRange"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "inputRange"
+  }, /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+    value: value === null || value === void 0 ? void 0 : value[0],
+    placeholder: "\u8BF7\u8F93\u5165",
+    onChange: function onChange(e) {
+      return handleInput(e, 'prev');
+    }
+  }, editEnum)), "~", /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+    value: value === null || value === void 0 ? void 0 : value[1],
+    placeholder: "\u8BF7\u8F93\u5165",
+    onChange: function onChange(e) {
+      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(_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),
+      form = _Form$useForm2[0];
+
+  return /*#__PURE__*/_react.default.createElement(_form.default, {
+    form: form,
+    component: false
+  }, /*#__PURE__*/_react.default.createElement(EditableContext.Provider, {
+    value: form
+  }, /*#__PURE__*/_react.default.createElement("tr", props)));
+};
+/*
+  表格单元格
+  editEnum： 下拉框时的数据数组（非数组时是配置设置）
+  valueType: 编辑框配置（多选）
+*/
+
+
+var EditableCell = function EditableCell(props) {
+  var isEdit = props.isEdit,
+      editEnum = props.editEnum,
+      valueType = props.valueType,
+      editable = props.editable,
+      children = props.children,
+      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),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      editing = _useState2[0],
+      setEditing = _useState2[1];
+
+  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 save = /*#__PURE__*/function () {
+    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.t0 = row;
+
+              if (_context.t0) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 5;
+              return form.getFieldsValue();
+
+            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 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 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 13]]);
+    }));
+
+    return function save(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }(); // 触发保存
+
+
+  var handleFormItemChange = function handleFormItemChange() {
+    save === null || save === void 0 ? void 0 : save();
+  };
+
+  var childNode = children; // 输入框
+
+  function Control(con) {
+    switch (con) {
+      case 'input':
+        return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+          onPressEnter: handleFormItemChange,
+          onBlur: handleFormItemChange,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, editEnum));
+
+      case 'inputRange':
+        return /*#__PURE__*/_react.default.createElement(InputRange, (0, _extends2.default)({
+          onChange: handleFormItemChange
+        }, editEnum));
+
+      case 'number':
+        return /*#__PURE__*/_react.default.createElement(_inputNumber.default, (0, _extends2.default)({
+          onPressEnter: handleFormItemChange,
+          onBlur: handleFormItemChange,
+          style: {
+            width: (editEnum === null || editEnum === void 0 ? void 0 : editEnum.width) || '100%'
+          },
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, editEnum));
+
+      case 'date':
+        return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({
+          onChange: handleFormItemChange
+        }, editEnum));
+
+      case 'select':
+        return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
+          showSearch: true,
+          allowClear: true,
+          placeholder: "\u8BF7\u9009\u62E9",
+          filterOption: function filterOption(input, option) {
+            return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+          }
+        }, 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
+          }, v.label);
+        }));
+
+      case 'multiple':
+        return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
+          mode: "multiple",
+          showSearch: true,
+          allowClear: true,
+          placeholder: "\u8BF7\u9009\u62E9",
+          filterOption: function filterOption(input, option) {
+            return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+          }
+        }, 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
+          }, v.label);
+        }));
+
+      case 'checkbox':
+        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
+          }, v.label);
+        }));
+
+      case 'radio':
+        return /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+          onChange: handleFormItemChange
+        }, editEnum === null || editEnum === void 0 ? void 0 : editEnum.map(function (v) {
+          return /*#__PURE__*/_react.default.createElement(_radio.default, {
+            key: v.value,
+            value: v.value
+          }, v.label);
+        }));
+
+      case 'upload':
+        return /*#__PURE__*/_react.default.createElement(UploadSingle, {
+          editEnum: editEnum,
+          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, _objectSpread5.default)((0, _objectSpread5.default)({}, record), {}, {
+            onChange: save
+          }));
+        }
+
+      default:
+        return /*#__PURE__*/_react.default.createElement(_input.default, {
+          onPressEnter: handleFormItemChange,
+          onBlur: handleFormItemChange
+        });
+    }
+  }
+
+  if (isEdit && editable) {
+    childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, (0, _extends2.default)({
+      style: {
+        margin: 0
+      }
+    }, itemProps, {
+      name: dataIndex
+    }), Control(editable));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("td", restProps, childNode);
+};
+
+var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var defaultData = props.value,
+      onChange = props.onChange,
+      columns = props.columns,
+      isEdit = props.isEdit,
+      _props$isAdd = props.isAdd,
+      isAdd = _props$isAdd === void 0 ? true : _props$isAdd,
+      _props$rowKey = props.rowKey,
+      _rowKey = _props$rowKey === void 0 ? '_ID' : _props$rowKey,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded4);
+
+  var _useState3 = (0, _react.useState)(function () {
+    return defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
+      return (0, _objectSpread5.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
+    });
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      dataSource = _useState4[0],
+      setDataSource = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(2),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      count = _useState6[0],
+      setCount = _useState6[1];
+
+  var _useState7 = (0, _react.useState)({}),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      _valid = _useState8[0],
+      setValid = _useState8[1]; // 删除
+
+
+  var handleDelete = function handleDelete(key) {
+    var nValue = dataSource.filter(function (item) {
+      return item[_rowKey] !== key;
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+  };
+
+  var handleAdd = function handleAdd(row) {
+    var newData = (0, _defineProperty2.default)({}, _rowKey, count + 1);
+    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) {
+    var newData = (0, _toConsumableArray2.default)(dataSource);
+    var index = newData.findIndex(function (item) {
+      return row[_rowKey] === item[_rowKey];
+    });
+    var item = newData[index];
+    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, _objectSpread5.default)({
+      size: 'small',
+      pagination: false,
+      tableLayout: 'fixed',
+      scroll: {
+        x: '100%'
+      },
+      rowKey: function rowKey(record) {
+        return record[_rowKey] || record.index || Math.random();
+      },
+      components: {
+        body: {
+          row: EditableRow,
+          cell: EditableCell
+        }
+      },
+      columns: columns.map(function (col) {
+        if (!col.editable) {
+          return 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
+            };
+          }
+        });
+      })
+    }, resetProps);
+  }, [columns, dataSource]);
+  (0, _react.useEffect)(function () {
+    setDataSource(defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
+      return (0, _objectSpread5.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
+    }));
+  }, [defaultData]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setRow: handleSave,
+      valid: function valid() {
+        return _valid;
+      }
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_base_editTable_warpper"
+  }, /*#__PURE__*/_react.default.createElement(_table.default, (0, _extends2.default)({}, config, {
+    rowClassName: function rowClassName() {
+      return 'editable-row';
+    },
+    bordered: true,
+    dataSource: dataSource
+  })), isEdit && isAdd && /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "dashed",
+    block: true,
+    onClick: handleAdd,
+    style: {
+      marginTop: 8
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont lmweb-plus"
+  }), "\u65B0\u589E"));
+});
+var _default = EditTable;
+exports.default = _default;

package/es/EditTable/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _EditTable = _interopRequireDefault(require("./EditTable"));
+
+var _default = _EditTable.default;
+exports.default = _default;

package/es/EditTable/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style.css");