dlt-for-react 1.0.3 → 1.0.5

package/lib/components/KyEditableTable/index.js

@@ -0,0 +1,1537 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _table = require('antd/lib/table');
+
+var _table2 = _interopRequireDefault(_table);
+
+var _dropdown = require('antd/lib/dropdown');
+
+var _dropdown2 = _interopRequireDefault(_dropdown);
+
+var _button = require('antd/lib/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _tooltip = require('antd/lib/tooltip');
+
+var _tooltip2 = _interopRequireDefault(_tooltip);
+
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _NHConfirm2 = require('xgui-for-react/lib/components/NHConfirm');
+
+var _NHConfirm3 = _interopRequireDefault(_NHConfirm2);
+
+var _menu = require('antd/lib/menu');
+
+var _menu2 = _interopRequireDefault(_menu);
+
+var _NHCheckBox2 = require('xgui-for-react/lib/components/NHCheckBox');
+
+var _NHCheckBox3 = _interopRequireDefault(_NHCheckBox2);
+
+var _set = require('babel-runtime/core-js/set');
+
+var _set2 = _interopRequireDefault(_set);
+
+var _modal = require('antd/lib/modal');
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
+var _message2 = require('antd/lib/message');
+
+var _message3 = _interopRequireDefault(_message2);
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _spin = require('antd/lib/spin');
+
+var _spin2 = _interopRequireDefault(_spin);
+
+var _popconfirm = require('antd/lib/popconfirm');
+
+var _popconfirm2 = _interopRequireDefault(_popconfirm);
+
+var _divider = require('antd/lib/divider');
+
+var _divider2 = _interopRequireDefault(_divider);
+
+var _regenerator = require('babel-runtime/regenerator');
+
+var _regenerator2 = _interopRequireDefault(_regenerator);
+
+var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');
+
+var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
+
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
+var _form = require('antd/lib/form');
+
+var _form2 = _interopRequireDefault(_form);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+require('antd/lib/table/style');
+
+require('antd/lib/dropdown/style');
+
+require('antd/lib/button/style');
+
+require('antd/lib/tooltip/style');
+
+require('antd/lib/icon/style');
+
+require('antd/lib/menu/style');
+
+require('antd/lib/modal/style');
+
+require('antd/lib/message/style');
+
+require('antd/lib/spin/style');
+
+require('antd/lib/popconfirm/style');
+
+require('antd/lib/divider/style');
+
+require('antd/lib/form/style');
+
+require('../../../assets/components/KyEditableTable/index.less');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _utils = require('../../utils');
+
+var _common = require('../../utils/common');
+
+var _component = require('./component');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var EditableContext = _react2.default.createContext();
+
+/**
+ * columns:
+  {
+    title: string,
+    dataIndex: string,
+    required: boolean,
+    render: (value,record) => Element,
+    edit: (record,disabled) => Element,
+    editType?: 'text' | 'select' | 'switch' | '',
+    config:{列配置：样式，pattern正则(只校验验展示)}
+    validator: [函数、正则表达式、正则字符串]==>表单校验
+  }
+
+  tableProps:
+    columns       表头配置   []
+    dataSource    数据      []
+    init          是否需要初始化 false
+    initCallback  初始化后的回调
+    loading       加载中    false
+    onRowSave     操作行的回调
+    pagination    分页配置
+    refreshRow    是否初始化行
+    refreshRowCallback  初始化行的回调
+    rowKey    数据唯一id
+    title     表格标题
+ *
+ *
+ */
+
+/**
+ * 单元格
+ */
+/*
+ * @Description:KyEditableTable-可编辑table
+ */
+
+var EditableCell = function (_Component) {
+  (0, _inherits3.default)(EditableCell, _Component);
+
+  function EditableCell() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3.default)(this, EditableCell);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EditableCell.__proto__ || (0, _getPrototypeOf2.default)(EditableCell)).call.apply(_ref, [this].concat(args))), _this), _this.judgeDisabled = function (params) {
+      var _this$props = _this.props,
+          dataIndex = _this$props.dataIndex,
+          record = _this$props.record;
+      var func = params.func,
+          specialFunc = params.specialFunc;
+
+      var flag = false;
+      var specialFlag = false;
+      if (func) {
+        flag = func(dataIndex, record);
+      }
+      if (specialFunc) {
+        specialFlag = specialFunc(dataIndex, record);
+      }
+      return flag || specialFlag;
+    }, _this.getComponent = function (form) {
+      var _this$props2 = _this.props,
+          dataIndex = _this$props2.dataIndex,
+          editing = _this$props2.editing,
+          editType = _this$props2.editType,
+          edit = _this$props2.edit,
+          record = _this$props2.record,
+          defaultRender = _this$props2.defaultRender,
+          config = _this$props2.config,
+          func = _this$props2.func,
+          params = _this$props2.params,
+          selectOptions = _this$props2.selectOptions;
+
+      var disabled = !editing;
+      if (params) {
+        // 自定义列限制
+        disabled = _this.judgeDisabled(params) || disabled;
+      }
+      // 内置组件
+      if (editing) {
+        // 编辑
+        if (edit) return edit(record, disabled);
+        if (editType) {
+          return (0, _component.SwitchComponents)(editType, dataIndex, form, record, func, (0, _extends3.default)({ disabled: disabled }, config), selectOptions);
+        }
+      } else {
+        // 显示
+        if (defaultRender) return false;
+        if (editType) return (0, _component.SwitchComponents)(editType, dataIndex, form, record, func, (0, _extends3.default)({ disabled: disabled }, config), selectOptions);
+        if (edit) return edit(record, disabled);
+        return _this.props.children;
+      }
+    }, _this.renderCell = function (form) {
+      _this.form = form;
+      var getFieldDecorator = form.getFieldDecorator;
+      var _this$props3 = _this.props,
+          editing = _this$props3.editing,
+          dataIndex = _this$props3.dataIndex,
+          title = _this$props3.title,
+          _this$props3$record = _this$props3.record,
+          record = _this$props3$record === undefined ? {} : _this$props3$record,
+          children = _this$props3.children,
+          required = _this$props3.required,
+          editType = _this$props3.editType,
+          edit = _this$props3.edit,
+          defaultRender = _this$props3.defaultRender,
+          parent = _this$props3.parent,
+          config = _this$props3.config,
+          restProps = (0, _objectWithoutProperties3.default)(_this$props3, ['editing', 'dataIndex', 'title', 'record', 'children', 'required', 'editType', 'edit', 'defaultRender', 'parent', 'config']);
+      // 编辑状态：有edit显示edit的内容。否则显示editType的内容，否则显示文字
+
+      if (!edit && !editType) {
+        return _react2.default.createElement(
+          'td',
+          restProps,
+          children
+        );
+      }
+      // 显示状态：有render显示render，否则显示edit/editType的disabled，否则显示文字
+
+      if (!editing && defaultRender && editType) {
+        return _react2.default.createElement(
+          'td',
+          restProps,
+          children
+        );
+      }
+
+      if (dataIndex && parent) {
+        var dom = _this.getComponent(form);
+        if (!dom) {
+          return _react2.default.createElement(
+            'td',
+            restProps,
+            defaultRender(record[dataIndex], record, !editing)
+          );
+        }
+        var initialValue = editType === 'date' ? record[dataIndex] ? (0, _moment2.default)(record[dataIndex]) : null : record[dataIndex];
+        var rules = [{
+          required: required,
+          message: '\u8BF7\u8F93\u5165' + title + '!'
+        }];
+        if (config.pattern) rules.push(config.pattern);
+        var params = {
+          rules: rules,
+          initialValue: initialValue,
+          valuePropName: editType === 'switch' ? 'checked' : 'value'
+        };
+        return _react2.default.createElement(
+          'td',
+          restProps,
+          (children || edit || editType) && _react2.default.createElement(
+            _form2.default.Item,
+            { style: { margin: 0 } },
+            getFieldDecorator(record[parent] + '.' + dataIndex, params)(dom)
+          )
+        );
+      }
+
+      return children;
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
+  }
+
+  (0, _createClass3.default)(EditableCell, [{
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        EditableContext.Consumer,
+        null,
+        this.renderCell
+      );
+    }
+  }]);
+  return EditableCell;
+}(_react.Component);
+
+/**
+ * 行
+ */
+
+
+var EditableRow = function EditableRow(_ref2) {
+  var form = _ref2.form,
+      refresh = _ref2.refresh,
+      callback = _ref2.callback,
+      props = (0, _objectWithoutProperties3.default)(_ref2, ['form', 'refresh', 'callback']);
+
+  (0, _react.useEffect)(function () {
+    if (refresh) {
+      form.resetFields();
+      if (callback) callback();
+    }
+  }, [refresh]);
+  return _react2.default.createElement(
+    EditableContext.Provider,
+    { value: form },
+    _react2.default.createElement('tr', props)
+  );
+};
+var EditableFormRow = _form2.default.create()(EditableRow);
+
+/**
+ * 操作列
+ */
+var OperationColumn = function OperationColumn(props) {
+  var onOK = props.onOK,
+      onCancel = props.onCancel,
+      onDel = props.onDel,
+      onEdit = props.onEdit,
+      record = props.record,
+      disabledDelete = props.disabledDelete,
+      hideSaveBtn = props.hideSaveBtn,
+      hideDeleteBtn = props.hideDeleteBtn,
+      hideEditBtn = props.hideEditBtn,
+      hideResetBtn = props.hideResetBtn,
+      editable = props.editable,
+      disableSingleLineSaving = props.disableSingleLineSaving;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+  // 关闭loading
+
+
+  var onLoad = function onLoad() {
+    setLoading(false);
+  };
+  // 提交
+  var onSubmit = function () {
+    var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
+      return _regenerator2.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+
+              if (!onOK) {
+                _context.next = 4;
+                break;
+              }
+
+              _context.next = 4;
+              return onOK(function () {
+                return onLoad();
+              });
+
+            case 4:
+              onLoad();
+
+            case 5:
+            case 'end':
+              return _context.stop();
+          }
+        }
+      }, _callee, undefined);
+    }));
+
+    return function onSubmit() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  // 删除
+  var onDelete = function onDelete() {
+    setLoading(true);
+    if (onDel) onDel(function () {
+      return onLoad();
+    });
+    onLoad();
+  };
+  return _react2.default.createElement(
+    _spin2.default,
+    { spinning: loading },
+    !disableSingleLineSaving && !record.nonEditableOperationFlag && !editable && !hideEditBtn && _react2.default.createElement(
+      _react2.default.Fragment,
+      null,
+      _react2.default.createElement(
+        'a',
+        { onClick: onEdit },
+        '\u7F16\u8F91'
+      ),
+      _react2.default.createElement(_divider2.default, { type: 'vertical' })
+    ),
+    !disableSingleLineSaving && editable && !hideSaveBtn && _react2.default.createElement(
+      _react2.default.Fragment,
+      null,
+      _react2.default.createElement(
+        'a',
+        { onClick: onSubmit, type: 'link' },
+        '\u4FDD\u5B58'
+      ),
+      _react2.default.createElement(_divider2.default, { type: 'vertical' })
+    ),
+    !disableSingleLineSaving && editable && !hideResetBtn && _react2.default.createElement(
+      _react2.default.Fragment,
+      null,
+      _react2.default.createElement(
+        _popconfirm2.default,
+        { cancelText: '\u5426', okText: '\u662F', onConfirm: onCancel, title: '\u662F\u5426\u53D6\u6D88\u7F16\u8F91?' },
+        _react2.default.createElement(
+          'a',
+          null,
+          '\u53D6\u6D88'
+        )
+      ),
+      _react2.default.createElement(_divider2.default, { type: 'vertical' })
+    ),
+    !disabledDelete && !hideDeleteBtn && _react2.default.createElement(
+      _react2.default.Fragment,
+      null,
+      _react2.default.createElement(
+        _popconfirm2.default,
+        { cancelText: '\u5426', okText: '\u662F', onConfirm: onDelete, title: '\u662F\u5426\u5220\u9664\u5F53\u524D\u884C\u6570\u636E?' },
+        _react2.default.createElement(
+          'a',
+          null,
+          '\u5220\u9664'
+        )
+      )
+    )
+  );
+};
+
+/**
+ * 表
+ */
+
+var KyEditableTable = function (_Component2) {
+  (0, _inherits3.default)(KyEditableTable, _Component2);
+
+  function KyEditableTable(props) {
+    var _this3 = this;
+
+    (0, _classCallCheck3.default)(this, KyEditableTable);
+
+    var _this2 = (0, _possibleConstructorReturn3.default)(this, (KyEditableTable.__proto__ || (0, _getPrototypeOf2.default)(KyEditableTable)).call(this, props));
+
+    _this2.initData = function (dataSource, tableModel, rowColumn) {
+      if (dataSource && dataSource.length > 0) {
+        (0, _common.setRowId)(dataSource, rowColumn ? rowColumn.dataIndex : 'rowId'); //设置序号列
+        var showBtnFlag = 'edit';
+        var editingKeys = [];
+        // 是否全部数据可编辑
+        if (tableModel === 'edit') {
+          showBtnFlag = 'save';
+          editingKeys = _this2.deepTreeEditing(dataSource, []);
+        }
+        _this2.setState({ editingKeys: editingKeys, data: dataSource, showBtnFlag: showBtnFlag });
+      }
+    };
+
+    _this2.deepTreeEditing = function (tree, arr) {
+      var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'readOnly';
+      var id = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'id';
+      var children = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'children';
+
+      tree && tree.length > 0 && tree.map(function (x) {
+        if (!x[key]) {
+          arr.push(x[id]);
+        }
+        if (x && x[children]) {
+          (0, _common.deepTree)(x[children], arr, key, children);
+        }
+        return x;
+      });
+      return arr;
+    };
+
+    _this2.update = function (key, value) {
+      _this2.setState((0, _defineProperty3.default)({}, key, value));
+    };
+
+    _this2.isEditing = function (record) {
+      var editingKeys = _this2.state.editingKeys;
+
+      return _this2.props.hideEditBtn || editingKeys.includes(record[_this2.props.rowKey || 'key']);
+    };
+
+    _this2.isDisabledDelete = function (record) {
+      var disabledDeleteKeys = _this2.props.disabledDeleteKeys;
+
+      if (disabledDeleteKeys.length == 0) {
+        return false;
+      }
+      return disabledDeleteKeys.includes(record[_this2.props.rowKey || 'key']);
+    };
+
+    _this2.add = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2() {
+      var data, columns, rowKey, dataSourceName, dataIndexList, obj, key, temp;
+      return _regenerator2.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!_this2.props.handleAdd) {
+                _context2.next = 3;
+                break;
+              }
+
+              _this2.props.handleAdd();
+              return _context2.abrupt('return');
+
+            case 3:
+              data = _this2.state.data;
+              columns = _this2.props.columns;
+              rowKey = _this2.props.rowKey;
+              dataSourceName = _this2.props.dataSourceName;
+              dataIndexList = columns && columns.length > 0 ? columns.map(function (item) {
+                return item.dataIndex;
+              }) : [];
+
+              if (!(dataIndexList && dataIndexList.length > 0)) {
+                _context2.next = 19;
+                break;
+              }
+
+              obj = { readOnly: false }; //新增-默认可编辑
+
+              dataIndexList.map(function (item) {
+                return obj[item] = undefined;
+              });
+              key = (0, _utils.createUuid)();
+
+              obj[rowKey] = key;
+              temp = [].concat((0, _toConsumableArray3.default)(data), [obj]);
+
+              _this2.setState({
+                data: temp
+              });
+              _this2.addEditingKey(key);
+
+              if (!_this2.props.setPropsState) {
+                _context2.next = 19;
+                break;
+              }
+
+              _context2.next = 19;
+              return _this2.props.setPropsState(dataSourceName ? dataSourceName : 'dataSource', temp);
+
+            case 19:
+            case 'end':
+              return _context2.stop();
+          }
+        }
+      }, _callee2, _this3);
+    }));
+
+    _this2.save = function (form, record) {
+      var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+      var key = record[_this2.props.rowKey || 'key'];
+      form.validateFields(function () {
+        var _ref5 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3(error, row) {
+          var _Object$values, _Object$values2, rowData, newData, index, item, dataSourceName;
+
+          return _regenerator2.default.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  if (!error) {
+                    _context3.next = 5;
+                    break;
+                  }
+
+                  _message3.default.warning('请完善表单信息！');
+                  delete record.loading;
+                  if (callback) callback();
+                  return _context3.abrupt('return');
+
+                case 5:
+                  _Object$values = (0, _values2.default)(row), _Object$values2 = (0, _slicedToArray3.default)(_Object$values, 1), rowData = _Object$values2[0];
+                  newData = [].concat((0, _toConsumableArray3.default)(_this2.state.data));
+                  index = newData.findIndex(function (item) {
+                    return key === item[_this2.props.rowKey || 'key'];
+                  });
+
+                  if (!~index) {
+                    _context3.next = 20;
+                    break;
+                  }
+
+                  item = newData[index];
+
+                  rowData.readOnly = true;
+                  newData[index] = (0, _extends3.default)({}, item, rowData);
+
+                  if (!_this2.props.onRowSave) {
+                    _context3.next = 15;
+                    break;
+                  }
+
+                  _context3.next = 15;
+                  return _this2.props.onRowSave((0, _extends3.default)({}, record, newData[index]), index);
+
+                case 15:
+                  if (_this2.props.setPropsState) {
+                    dataSourceName = _this2.props.dataSourceName;
+
+                    _this2.props.setPropsState(dataSourceName || 'dataSource', newData);
+                  }
+                  _this2.setState({ data: newData });
+                  _this2.removeEditingKey(key);
+                  delete record.loading;
+                  if (callback) callback();
+
+                case 20:
+                case 'end':
+                  return _context3.stop();
+              }
+            }
+          }, _callee3, _this3);
+        }));
+
+        return function (_x5, _x6) {
+          return _ref5.apply(this, arguments);
+        };
+      }());
+    };
+
+    _this2.handleSave = function () {
+      var _ref6 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee4(rowData) {
+        var key, newData, index, item, dataSourceName;
+        return _regenerator2.default.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                key = rowData[_this2.props.rowKey || 'key'];
+                newData = [].concat((0, _toConsumableArray3.default)(_this2.state.data));
+                index = newData.findIndex(function (item) {
+                  return key === item[_this2.props.rowKey || 'key'];
+                });
+
+                if (!~index) {
+                  _context4.next = 11;
+                  break;
+                }
+
+                item = newData[index];
+
+                newData[index] = (0, _extends3.default)({}, item, rowData);
+
+                if (!_this2.props.onRowSave) {
+                  _context4.next = 9;
+                  break;
+                }
+
+                _context4.next = 9;
+                return _this2.props.onRowSave(newData[index], index);
+
+              case 9:
+                if (_this2.props.setPropsState) {
+                  dataSourceName = _this2.props.dataSourceName;
+
+                  _this2.props.setPropsState(dataSourceName || 'dataSource', newData);
+                }
+                _this2.setState({ data: newData });
+
+              case 11:
+              case 'end':
+                return _context4.stop();
+            }
+          }
+        }, _callee4, _this3);
+      }));
+
+      return function (_x7) {
+        return _ref6.apply(this, arguments);
+      };
+    }();
+
+    _this2.del = function () {
+      var _ref7 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee5(form, record, callback) {
+        var key, newData, index;
+        return _regenerator2.default.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                key = record[_this2.props.rowKey || 'key'];
+
+                if (!key) {
+                  _context5.next = 12;
+                  break;
+                }
+
+                newData = [].concat((0, _toConsumableArray3.default)(_this2.state.data));
+                index = newData.findIndex(function (item) {
+                  return key === item[_this2.props.rowKey || 'key'];
+                });
+
+                if (~index) {
+                  newData.splice(index, 1);
+                }
+
+                if (!_this2.props.onBathDel) {
+                  _context5.next = 8;
+                  break;
+                }
+
+                _context5.next = 8;
+                return _this2.props.onBathDel([key]);
+
+              case 8:
+                _this2.setState({ data: newData });
+                _this2.removeEditingKey(key);
+                delete record.loading;
+                if (callback) callback();
+
+              case 12:
+              case 'end':
+                return _context5.stop();
+            }
+          }
+        }, _callee5, _this3);
+      }));
+
+      return function (_x8, _x9, _x10) {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+
+    _this2.edit = function () {
+      var _ref8 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee6(key) {
+        var newData, index, item;
+        return _regenerator2.default.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                newData = [].concat((0, _toConsumableArray3.default)(_this2.state.data));
+                index = newData.findIndex(function (item) {
+                  return key === item[_this2.props.rowKey || 'key'];
+                });
+
+                if (~index) {
+                  item = newData[index];
+
+                  if (_this2.props.onRowSave) {
+                    _this2.props.onRowSave((0, _extends3.default)({}, item, { readOnly: false }), index);
+                  }
+                  _this2.addEditingKey(key);
+                }
+
+              case 3:
+              case 'end':
+                return _context6.stop();
+            }
+          }
+        }, _callee6, _this3);
+      }));
+
+      return function (_x11) {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+
+    _this2.cancel = function (form, key) {
+      form.validateFields(function () {
+        var _ref9 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee7(error, row) {
+          var newData, index, item;
+          return _regenerator2.default.wrap(function _callee7$(_context7) {
+            while (1) {
+              switch (_context7.prev = _context7.next) {
+                case 0:
+                  if (!error) {
+                    _context7.next = 3;
+                    break;
+                  }
+
+                  _message3.default.info('请填写表单信息！');
+                  return _context7.abrupt('return');
+
+                case 3:
+                  form.resetFields(key);
+                  newData = [].concat((0, _toConsumableArray3.default)(_this2.state.data));
+                  index = newData.findIndex(function (item) {
+                    return key === item[_this2.props.rowKey || 'key'];
+                  });
+
+                  if (!~index) {
+                    _context7.next = 12;
+                    break;
+                  }
+
+                  item = newData[index];
+
+                  if (!_this2.props.onRowSave) {
+                    _context7.next = 11;
+                    break;
+                  }
+
+                  _context7.next = 11;
+                  return _this2.props.onRowSave((0, _extends3.default)({}, item, { readOnly: true }), index);
+
+                case 11:
+                  _this2.removeEditingKey(key);
+
+                case 12:
+                case 'end':
+                  return _context7.stop();
+              }
+            }
+          }, _callee7, _this3);
+        }));
+
+        return function (_x12, _x13) {
+          return _ref9.apply(this, arguments);
+        };
+      }());
+    };
+
+    _this2.addEditingKey = function (key) {
+      var editingKeys = [].concat((0, _toConsumableArray3.default)(_this2.state.editingKeys));
+      if (!editingKeys.includes(key)) {
+        _this2.setState({ editingKeys: [].concat((0, _toConsumableArray3.default)(editingKeys), [key]) });
+      }
+    };
+
+    _this2.removeEditingKey = function (key) {
+      var editingKeys = [].concat((0, _toConsumableArray3.default)(_this2.state.editingKeys));
+      var index = editingKeys.indexOf(key);
+      if (~index) {
+        editingKeys.splice(index, 1);
+        _this2.setState({ editingKeys: editingKeys });
+      }
+    };
+
+    _this2.verifyDataSource = function (dataSource, callback) {
+      if (callback) {
+        callback(_this2.verifyData(dataSource));
+      } else {
+        return _this2.verifyData(dataSource);
+      }
+    };
+
+    _this2.verifyData = function (dataSource) {
+      var newColumns = [].concat((0, _toConsumableArray3.default)(_this2.columns));
+      var fieldList = newColumns.map(function (column) {
+        var title = column.title;
+        var dataIndex = column.dataIndex;
+        var required = column.required;
+        var validator = column.validator;
+        return {
+          title: title,
+          dataIndex: dataIndex,
+          required: required,
+          validator: validator
+        };
+      });
+      // 校验数据、是否必填校验、方法校验、校验字段名称
+
+      var _this2$validateFields = _this2.validateFields(dataSource, fieldList),
+          requiredErrorMsg = _this2$validateFields.requiredErrorMsg,
+          validatorErrorMsg = _this2$validateFields.validatorErrorMsg,
+          customErrorMsg = _this2$validateFields.customErrorMsg;
+
+      var requiredFlag = requiredErrorMsg.length > 0;
+      var validatorFlag = validatorErrorMsg.length > 0;
+      var customFlag = customErrorMsg.length > 0;
+      var status = requiredFlag || validatorFlag || customFlag;
+      var requiredMsg = requiredFlag ? _this2.join(requiredErrorMsg) + '不能为空！' : '';
+      var validatorMsg = validatorFlag ? _this2.join(validatorErrorMsg) + '格式不符合！' : '';
+      var customMsg = customFlag ? _this2.join(customErrorMsg) : '';
+      if (status) {
+        _modal2.default.warning({
+          content: _react2.default.createElement(
+            'div',
+            null,
+            requiredMsg && _react2.default.createElement(
+              'p',
+              null,
+              requiredMsg
+            ),
+            validatorMsg && _react2.default.createElement(
+              'p',
+              null,
+              validatorMsg
+            ),
+            customMsg && _react2.default.createElement(
+              'p',
+              null,
+              customMsg
+            )
+          )
+        });
+      }
+      return !status;
+    };
+
+    _this2.validateFields = function (treeList, fieldList) {
+      var requiredErrorMsg = [];
+      var validatorErrorMsg = [];
+      var customErrorMsg = [];
+      var loops = function loops(array, field) {
+        //validatorParent:父级节点是否需要校验标识
+        var title = field.title,
+            dataIndex = field.dataIndex,
+            required = field.required,
+            validator = field.validator,
+            validatorParent = field.validatorParent;
+
+        array.some(function (item) {
+          if ((0, _common.isEmpty)(item[dataIndex]) && required && (!(item.children && item.children.length > 0) || item.children && item.children.length > 0 && validatorParent)) {
+            /**
+             * 必填项---且数据为空
+             * 最后节点 或者 在父级节点中---且父级要求校验
+             */
+            requiredErrorMsg.push(title);
+            return true;
+          } else if (validator && (!(item.children && item.children.length > 0) || item.children && item.children.length > 0 && validatorParent)) {
+            /**
+             * 存在校验方法
+             * 最后节点 或者 在父级节点中---且父级要求校验
+             */
+            switch (validator.constructor) {
+              case Function:
+                //函数
+                if (typeof validator(item[dataIndex]) === 'boolean') {
+                  !validator(item[dataIndex]) && validatorErrorMsg.push(title);
+                } else {
+                  validator(item[dataIndex]) && customErrorMsg.push(validator(item[dataIndex]));
+                }
+                break;
+              case RegExp:
+                //正则表达式
+                !validator.test(item[dataIndex]) && validatorErrorMsg.push(title);
+                break;
+              case String:
+                //正则字符串
+                !new RegExp(validator).test(item[dataIndex]) && validatorErrorMsg.push(title);
+                break;
+              default:
+                break;
+            }
+            if (validatorErrorMsg.length > 0) return true;
+          } else if (item.children && item.childrens.length > 0) {
+            loops(item.children, field);
+          }
+        });
+      };
+      fieldList.forEach(function (field) {
+        loops(treeList, field);
+      });
+      return {
+        requiredErrorMsg: requiredErrorMsg,
+        validatorErrorMsg: validatorErrorMsg,
+        customErrorMsg: customErrorMsg
+      };
+    };
+
+    _this2.join = function (arr) {
+      var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '、';
+
+      return [].concat((0, _toConsumableArray3.default)(new _set2.default(arr))).join(separator);
+    };
+
+    _this2.getMenuData = function (data) {
+      var plainOptions = data && data.length > 0 && data.filter(function (r) {
+        return r.checked === undefined || r.checked !== 'unchecked';
+      }).map(function (item, index) {
+        return { label: item.title, value: item.dataIndex };
+      });
+      return _react2.default.createElement(
+        _menu2.default,
+        { selectable: true },
+        _react2.default.createElement(
+          'div',
+          { className: 'NHCheckBoxStyle' },
+          plainOptions && plainOptions.length > 0 && _react2.default.createElement(_NHCheckBox3.default, {
+            gridLayout: true,
+            columnsNum: 1,
+            value: _this2.state.checkedColumns || [],
+            dataSource: plainOptions,
+            onChange: _this2.handleColumn
+          })
+        )
+      );
+    };
+
+    _this2.handleColumn = function (checkedColumns) {
+      _this2.setState({ tableFlag: false });
+      _this2.columns = _this2.columns.map(function (col) {
+        if (!col.dataIndex || col.dataIndex === 'operation') {
+          return col;
+        }
+        if (col.dataIndex && checkedColumns.includes(col.dataIndex)) {
+          col.checked = true;
+        } else {
+          col.checked = false;
+        }
+        return col;
+      });
+      _this2.setState({ checkedColumns: checkedColumns, tableFlag: true });
+    };
+
+    _this2.onSelectChange = function (selectedRowKeys) {
+      // console.log('selectedRowKeys changed: ', selectedRowKeys);
+      _this2.setState({
+        selectedRowKeys: selectedRowKeys,
+        showDeleteBtn: !!selectedRowKeys && selectedRowKeys.length > 0
+      });
+    };
+
+    _this2.deleteBtnClick = function () {
+      var selectedRowKeys = _this2.state.selectedRowKeys;
+      var _this2$props = _this2.props,
+          disabledDeleteKeys = _this2$props.disabledDeleteKeys,
+          onBathDel = _this2$props.onBathDel;
+
+      if (selectedRowKeys && selectedRowKeys.length > 0) {
+        if (disabledDeleteKeys && disabledDeleteKeys.length > 0) {
+          if (selectedRowKeys.find(function (item) {
+            return disabledDeleteKeys.includes(item);
+          })) {
+            _message3.default.info('存在不能删除的数据！');
+            return false;
+          }
+        }
+        (0, _NHConfirm3.default)('是否确定删除所选中的数据？', (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee8() {
+          return _regenerator2.default.wrap(function _callee8$(_context8) {
+            while (1) {
+              switch (_context8.prev = _context8.next) {
+                case 0:
+                  _this2.update('loading', true);
+
+                  if (!onBathDel) {
+                    _context8.next = 4;
+                    break;
+                  }
+
+                  _context8.next = 4;
+                  return onBathDel(selectedRowKeys);
+
+                case 4:
+                  _this2.setState({ selectedRowKeys: [], showDeleteBtn: false, loading: false });
+
+                case 5:
+                case 'end':
+                  return _context8.stop();
+              }
+            }
+          }, _callee8, _this3);
+        })), 'warn');
+      }
+    };
+
+    _this2.state = {
+      editTableFlag: true,
+      showBtnFlag: 'edit',
+      tableLoading: false,
+      data: [],
+      editingKeys: [],
+      showDeleteBtn: false,
+      selectedRowKeys: [],
+      checkedColumns: props.columns.filter(function (r) {
+        return r.checked === undefined || r.checked === true;
+      }).map(function (item) {
+        return item.dataIndex;
+      }) || []
+    };
+    _this2.columns = [{
+      title: _this2.props.rowColumn.title,
+      dataIndex: _this2.props.rowColumn.dataIndex,
+      width: _this2.props.rowColumn.width || 80,
+      checked: 'unchecked',
+      // fixed: 'left',
+      render: function render(text) {
+        return text;
+      }
+    }].concat((0, _toConsumableArray3.default)(_this2.props.columns), [{
+      title: '操作',
+      dataIndex: 'operation',
+      key: 'operation',
+      width: 250,
+      checked: 'unchecked',
+      // fixed: "right",
+      render: function render(_, record) {
+        var editable = _this2.isEditing(record);
+        var disabledDelete = _this2.isDisabledDelete(record);
+        var prop = {
+          hideSaveBtn: !Boolean(props.onRowSave),
+          hideResetBtn: props.hideResetBtn,
+          hideDeleteBtn: !Boolean(props.onBathDel),
+          hideEditBtn: props.hideEditBtn,
+          disableSingleLineSaving: props.disableSingleLineSaving,
+          editable: editable
+        };
+        return _react2.default.createElement(
+          EditableContext.Consumer,
+          null,
+          function (form) {
+            return _react2.default.createElement(OperationColumn, (0, _extends3.default)({
+              onEdit: function onEdit() {
+                _this2.edit(record[_this2.props.rowKey || 'key']);
+              },
+              onCancel: function onCancel() {
+                _this2.cancel(form, record[_this2.props.rowKey || 'key']);
+              },
+              onOK: function onOK(callback) {
+                record.loading = true;
+                _this2.save(form, record, callback);
+              },
+              onDel: function onDel(callback) {
+                record.loading = true;
+                _this2.del(form, record, callback);
+              },
+              record: record,
+              disabledDelete: disabledDelete
+            }, prop));
+          }
+        );
+      }
+    }]);
+    return _this2;
+  }
+
+  (0, _createClass3.default)(KyEditableTable, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _props = this.props,
+          dataSource = _props.dataSource,
+          tableModel = _props.tableModel,
+          rowColumn = _props.rowColumn;
+
+      this.initData(dataSource, tableModel, rowColumn);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var dataSource = nextProps.dataSource,
+          tableModel = nextProps.tableModel,
+          rowColumn = nextProps.rowColumn;
+
+      if (dataSource === this.props.dataSource) return;
+      this.initData(dataSource, tableModel, rowColumn);
+    }
+
+    /**
+     * 初始化可编辑行com
+     * 递归遍历数据对象中readOnly：true不可编辑
+     */
+
+
+    // 替身函数
+
+
+    // 是否编辑状态
+
+
+    // 行新增
+
+
+    // 行保存
+
+
+    // 保存
+
+
+    // 行删除
+
+
+    // 行编辑
+
+
+    // 行取消
+    /* 除非深克隆一份数据对象，不然取消没有什么意义---摆烂吧 */
+
+
+    // 添加编辑key
+
+
+    // 移除编辑key
+
+
+    //可编辑表格-KyEditableTable数据校验
+
+
+    /*******
+     * @description: 验证数据
+     * @author: 琴时
+     * @param {*} treeList [校验的数组对象]
+     * @param {*} fieldList [校验指定的字段-数组形式]
+     * @return {bool} [true:表单验证通过;false:验证不通过]
+     */
+
+
+    /*******
+     * @description: 校验表单数据
+     * @author: 琴时
+     * @param {*} treeList [校验的数组对象]
+     * @param {*} fieldList [校验指定的字段-数组形式]
+     * @return {*} {requiredErrorMsg,validatorErrorMsg}
+     */
+
+    // 展开列数据下拉菜单
+
+
+    // saveBtnClick = () => {
+    //     this.update("loading", true);
+    //     if (this.props.onBathSave) {
+    //         this.props.onBathSave(this.state.data);
+    //     }
+    //     this.setState({ editingKeys: [], showBtnFlag: "edit", loading: false, });
+    // }
+
+    // editBtnClick = () => {
+    //     this.update("loading", true);
+    //     let editingKeys = [];
+    //     editingKeys = deepTree(this.state.data, editingKeys);
+    //     this.setState({ editingKeys, showBtnFlag: "save", loading: false, });
+    // }
+
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this4 = this;
+
+      var _state = this.state,
+          editTableFlag = _state.editTableFlag,
+          data = _state.data,
+          showBtnFlag = _state.showBtnFlag,
+          showDeleteBtn = _state.showDeleteBtn,
+          tableLoading = _state.tableLoading,
+          selectedRowKeys = _state.selectedRowKeys,
+          _props2 = this.props,
+          dataSource = _props2.dataSource,
+          init = _props2.init,
+          initCallback = _props2.initCallback,
+          rowId = _props2.rowId,
+          rowKey = _props2.rowKey,
+          addBtnName = _props2.addBtnName,
+          topBtnGroup = _props2.topBtnGroup,
+          reveal = _props2.reveal,
+          operationColumnHidden = _props2.operationColumnHidden,
+          bordered = _props2.bordered,
+          defaultExpandAllRows = _props2.defaultExpandAllRows,
+          refreshRow = _props2.refreshRow,
+          refreshRowCallback = _props2.refreshRowCallback,
+          pagination = _props2.pagination,
+          scroll = _props2.scroll,
+          specialParams = _props2.specialParams,
+          checkbox = _props2.checkbox,
+          enAdd = _props2.enAdd,
+          tableModel = _props2.tableModel;
+
+      var readOnly = tableModel === 'view';
+      var components = {
+        body: {
+          row: EditableFormRow,
+          cell: EditableCell
+        }
+      };
+      var temp = [].concat((0, _toConsumableArray3.default)(this.columns));
+      if (!rowId) {
+        temp.shift();
+      }
+      var columns = temp.map(function (col) {
+        if (col.dataIndex === 'operation' && (readOnly || operationColumnHidden)) {
+          return;
+        }
+        if (!col.dataIndex || col.dataIndex === 'operation') {
+          return col;
+        }
+        if (col.checked === false) {
+          return;
+        }
+
+        var tip = '';
+        if (col.tip) {
+          tip = _react2.default.createElement(
+            'span',
+            { style: { marginLeft: 4 } },
+            _react2.default.createElement(
+              _tooltip2.default,
+              { title: col.tip },
+              _react2.default.createElement(_icon2.default, { type: 'question-circle-o' })
+            )
+          );
+        }
+
+        return (0, _extends3.default)({}, col, {
+          title: col.required ? _react2.default.createElement(
+            _react2.default.Fragment,
+            null,
+            _react2.default.createElement(
+              'font',
+              { className: 'editableTable-item-required' },
+              col.title
+            ),
+            tip
+          ) : _react2.default.createElement(
+            _react2.default.Fragment,
+            null,
+            col.title,
+            tip
+          ),
+          onCell: function onCell(record) {
+            return {
+              record: record,
+              editType: col.editType || '',
+              dataIndex: col.dataIndex,
+              title: col.title,
+              editing: _this4.isEditing(record),
+              required: col.required,
+              edit: col.edit,
+              parent: rowKey,
+              defaultRender: col.render,
+              config: col.config || {},
+              func: _this4.handleSave,
+              params: specialParams,
+              selectOptions: col.selectOptions || []
+            };
+          }
+        });
+      }).filter(function (item) {
+        return item;
+      });
+      var rowSelection = {
+        selectedRowKeys: selectedRowKeys,
+        onChange: this.onSelectChange
+      };
+      var title = function title() {
+        return _react2.default.createElement(
+          'div',
+          { className: 'self-table-title' },
+          showBtnFlag === 'save' && _react2.default.createElement(
+            _button2.default,
+            { type: 'primary', onClick: _this4.saveBtnClick },
+            '\u4E00\u952E\u4FDD\u5B58'
+          ),
+          showBtnFlag === 'edit' && _react2.default.createElement(
+            _button2.default,
+            { type: 'primary', onClick: _this4.editBtnClick },
+            '\u7EF4\u62A4\u6570\u636E'
+          ),
+          titleBtnGroup,
+          showDeleteBtn && _react2.default.createElement(
+            _button2.default,
+            { type: 'danger', ghost: true, style: { marginLeft: 8 }, onClick: _this4.deleteBtnClick },
+            '\u5220\u9664'
+          ),
+          reveal && _react2.default.createElement(
+            _dropdown2.default,
+            {
+              overlay: function overlay() {
+                return _this4.getMenuData(_this4.columns);
+              },
+              placement: 'bottomLeft',
+              trigger: 'click',
+              overlayStyle: { minWidth: 150 }
+            },
+            _react2.default.createElement(
+              _button2.default,
+              { type: 'link', style: { float: 'right' } },
+              '\u5217\u5C55\u793A'
+            )
+          )
+        );
+      };
+      return _react2.default.createElement(
+        'div',
+        null,
+        !readOnly && _react2.default.createElement(
+          'div',
+          { layout: 'inline', className: 'operation' },
+          topBtnGroup,
+          showDeleteBtn && _react2.default.createElement(
+            _button2.default,
+            { type: 'danger', ghost: true, style: { marginRight: 8 }, onClick: this.deleteBtnClick },
+            '\u5220\u9664'
+          )
+        ),
+        _react2.default.createElement(_table2.default, {
+          size: 'small',
+          rowKey: rowKey,
+          className: 'self-editable-table',
+          rowClassName: 'self-editable-row',
+          bordered: bordered,
+          columns: columns,
+          components: components,
+          rowSelection: checkbox && !readOnly ? rowSelection : null,
+          dataSource: data,
+          loading: tableLoading,
+          key: data,
+          defaultExpandAllRows: defaultExpandAllRows,
+          onRow: function onRow() {
+            return {
+              refresh: refreshRow,
+              callback: refreshRowCallback
+            };
+          },
+          pagination: pagination,
+          scroll: scroll
+        }),
+        _react2.default.createElement(
+          _button2.default,
+          {
+            type: 'dashed',
+            block: true,
+            style: {
+              margin: '16px 0 0 0',
+              display: tableLoading || readOnly || enAdd ? 'none' : 'block'
+            },
+            onClick: this.add
+          },
+          '+ \u65B0\u589E',
+          addBtnName ? addBtnName : ''
+        )
+      );
+    }
+  }]);
+  return KyEditableTable;
+}(_react.Component);
+
+// 属性默认值
+
+
+KyEditableTable.defaultProps = {
+  rowId: true, //启用序号列
+  rowKey: 'id',
+  tableModel: 'edit', //表格类型：edit<可编辑>，view<只读>
+  rowColumn: { title: '序号', dataIndex: 'rowId' },
+  disabledDeleteKeys: [],
+  tableLoading: false,
+  reveal: false,
+  defaultExpandAllRows: false,
+  pagination: false,
+  topBtnGroup: undefined,
+  scroll: { x: 1500, y: 400 },
+  operationColumnHidden: false, //隐藏操作列
+  dataSourceName: 'dataSource',
+  checkbox: true, //显示复选框列
+  hideEditBtn: false, //隐藏编辑按钮
+  hideResetBtn: false, //隐藏取消按钮
+  enAdd: false, //不允许添加
+  disableSingleLineSaving: false
+};
+
+// 属性检查
+KyEditableTable.propTypes = {
+  rowId: _propTypes2.default.bool,
+  rowKey: _propTypes2.default.string,
+  rowColumn: _propTypes2.default.shape({
+    title: _propTypes2.default.string,
+    dataIndex: _propTypes2.default.string
+  }),
+  disabledDeleteKeys: _propTypes2.default.array,
+  dataSource: _propTypes2.default.array,
+  columns: _propTypes2.default.array,
+  tableLoading: _propTypes2.default.bool,
+  tableModel: _propTypes2.default.string,
+  // onBathSave: PropTypes.func,
+  onBathDel: _propTypes2.default.func,
+  onRowSave: _propTypes2.default.func,
+  setPropsState: _propTypes2.default.func,
+  defaultExpandAllRows: _propTypes2.default.bool,
+  reveal: _propTypes2.default.bool,
+  topBtnGroup: _propTypes2.default.element,
+  scroll: _propTypes2.default.object,
+  specialParams: _propTypes2.default.object,
+  operationColumnHidden: _propTypes2.default.bool,
+  checkbox: _propTypes2.default.bool,
+  dataSourceName: _propTypes2.default.string,
+  // 禁用单行保存 编辑 取消按钮，默认不禁用
+  disableSingleLineSaving: _propTypes2.default.bool
+};
+
+exports.default = KyEditableTable;