linkmore-design 1.0.3

package/lib/EditTable/EditTable.js

@@ -0,0 +1,489 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+
+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 _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+require("antd/es/form/style");
+
+var _form = _interopRequireDefault(require("antd/es/form"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/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"],
+    _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 EditableRow = function EditableRow(_ref2) {
+  var index = _ref2.index,
+      props = (0, _objectWithoutProperties2.default)(_ref2, _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,
+      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); // useEffect(() => {
+  //   if (editing) {
+  //     inputRef.current.focus();
+  //   }
+  // }, [editing]);
+  // 出现死循环找我
+
+  (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]));
+  };
+
+  var save = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      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();
+
+            case 3:
+              values = _context.sent;
+              // 传入服务器时格式化mount
+              // values.endTime = values.endTime.format('YYYY-MM-DD');
+              // toggleEdit();
+              handleSave((0, _objectSpread4.default)((0, _objectSpread4.default)({}, record), values));
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              console.log('Save failedtext:', _context.t0);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+
+    return function save() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var childNode = children; // 输入框
+
+  function Control(con) {
+    switch (con) {
+      case 'input':
+        return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+          onPressEnter: save,
+          onBlur: save,
+          placeholder: "\u8BF7\u8F93\u5165"
+        }, editEnum));
+
+      case 'inputRange':
+        return /*#__PURE__*/_react.default.createElement(InputRange, (0, _extends2.default)({
+          onChange: save
+        }, editEnum));
+
+      case 'number':
+        return /*#__PURE__*/_react.default.createElement(_inputNumber.default, (0, _extends2.default)({
+          onPressEnter: save,
+          onChange: save,
+          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: save
+        }, 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) {
+          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",
+          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) {
+          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, {
+          onChange: save
+        }, 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: save
+        }, 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: save
+        });
+
+      case 'render':
+        {
+          var render = editEnum.render;
+          return render === null || render === void 0 ? void 0 : render((0, _objectSpread4.default)((0, _objectSpread4.default)({}, record), {}, {
+            onChange: save
+          }));
+        }
+
+      default:
+        return /*#__PURE__*/_react.default.createElement(_input.default, {
+          onPressEnter: save,
+          onBlur: save
+        });
+    }
+  }
+
+  if (isEdit && editable) {
+    childNode = /*#__PURE__*/_react.default.createElement(_form.default.Item, {
+      style: {
+        margin: 0
+      },
+      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, _objectSpread4.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 handleDelete = function handleDelete(key) {
+    var nValue = dataSource.filter(function (item) {
+      return item.key !== key;
+    });
+    setDataSource(nValue);
+  };
+
+  var handleAdd = function handleAdd() {
+    var newData = (0, _defineProperty2.default)({}, _rowKey, count + 1);
+    var nValue = [].concat((0, _toConsumableArray2.default)(dataSource), [newData]);
+    setDataSource(nValue);
+    setCount(count + 1);
+  };
+
+  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, _objectSpread4.default)((0, _objectSpread4.default)({}, item), row));
+    setDataSource(newData);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newData);
+  };
+
+  var config = (0, _react.useMemo)(function () {
+    return (0, _objectSpread4.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, _objectSpread4.default)((0, _objectSpread4.default)({}, col), {}, {
+          onCell: function onCell(record) {
+            return {
+              record: record,
+              isEdit: isEdit,
+              editable: col.editable,
+              dataIndex: col.dataIndex,
+              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, _objectSpread4.default)((0, _defineProperty2.default)({}, _rowKey, "v".concat(idx + 1)), v);
+    }));
+  }, [defaultData]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      setRow: handleSave
+    };
+  });
+  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/lib/EditTable/index.js

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

package/lib/EditTable/style/index.js

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

package/lib/EditTable/style/style.css

@@ -0,0 +1,165 @@
+.ant-layout-sider {
+  min-height: 100vh;
+  background-color: #022766;
+}
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+  box-shadow: none;
+}
+.ant-menu-submenu-placement-rightTop {
+  display: none;
+}
+.ant-table .row-active .ant-table-cell {
+  background-color: #FEFFD3 !important;
+}
+.ant-dropdown-menu-item {
+  font-size: 12px;
+  height: 32px;
+}
+.ant-tabs .ant-tabs-nav .ant-tabs-tab {
+  font-size: 14px;
+}
+.ant-tabs.auto_tabs {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+.ant-tabs.auto_tabs .ant-tabs-nav {
+  height: 48px;
+}
+.ant-tabs.auto_tabs .ant-tabs-content-holder {
+  flex: 1;
+  overflow: auto;
+}
+.ant-drawer.drawer_wrapper .ant-drawer-header {
+  padding: 0 24px;
+}
+.ant-drawer.drawer_wrapper .ant-drawer-body {
+  position: relative;
+  flex: 1;
+  padding: 0 24px;
+}
+.ant-modal-wrap.plugin_modal {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end;
+}
+.ant-modal-wrap.plugin_modal .ant-modal {
+  left: 56px;
+  top: 0;
+  margin: 0 0 8px 8px;
+  padding: 0;
+}
+.ant-modal-wrap.lm_modal_confirm .anticon {
+  margin-top: -1px;
+  margin-right: 8px;
+}
+.ant-modal-wrap.lm_modal_confirm .ant-modal-body {
+  padding: 16px 24px;
+}
+.ant-popover.pop_img .ant-popover-inner-content {
+  line-height: 1;
+  padding: var(--gap);
+}
+@font-face {
+  font-family: 'iconfont';
+  /* Project id 2966019 */
+  src: url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.woff2?t=1641546077924') format('woff2'), url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.woff?t=1641546077924') format('woff'), url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.ttf?t=1641546077924') format('truetype');
+}
+.icon_ {
+  font-family: 'iconfont';
+  font-size: 14px;
+}
+.iconfont {
+  font-size: 12px;
+}
+.icon_home::before {
+  content: '\e7fc';
+}
+:root {
+  --them-color: #1890fc;
+  --main-color: #1890fc;
+  --primary-color: #1890fc;
+  --primary2-color: rgba(24, 144, 252, 0.08);
+  --success-color: #56C22D;
+  --warning-color: #FD9727;
+  --error-color: #FA4F53;
+  --aside-bg-color: #022766;
+  --font-color: rgba(0, 0, 0, 0.85);
+  --font2-color: rgba(0, 0, 0, 0.65);
+  --text-color: rgba(0, 0, 0, 0.45);
+  --box-shadow-color: rgba(0, 0, 0, 0.15);
+  --background-color: rgba(0, 0, 0, 0.04);
+  --background-color-hover: rgba(0, 0, 0, 0.08);
+  --border-color: #f0f0f0;
+  --stripe-color: #f5f5f5;
+  --border-hover-color: #f2f5f7;
+  --gap: 8px;
+  --basic-height: 24px;
+}
+.ant-input,
+.ant-select {
+  font-size: 12px;
+}
+.ant-select-dropdown .ant-select-item {
+  font-size: 12px;
+  align-items: center;
+}
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+.react-resizable-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  width: 3px;
+  height: 40px;
+  cursor: col-resize;
+}
+.react-resizable-handle:hover {
+  background-color: var(--primary-color);
+}
+.react-resizable-handle:active {
+  background-color: var(--primary-color);
+}
+.yf_resizable_bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  height: 0;
+}
+.resizable_line {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--primary-color);
+  z-index: 1;
+}
+.handle_resizable {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  z-index: 2;
+}
+.lm_base_editTable_warpper .ant-picker {
+  width: 100%;
+}
+.lm_base_editTable_warpper .upload_single {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  gap: 8px;
+}
+.lm_base_editTable_warpper .ant-table-cell:empty::before {
+  content: '-';
+}
+.lm_base_editTable_wrapperRange .inputRange {
+  display: inline-flex;
+  align-items: center;
+}