easy3wui 1.5.56 → 1.5.58

package/README.md

@@ -3,4 +3,7 @@ easy3w UI 组件
 # 编译
 npm run compile
 # 发布代码
-npm publish
+npm publish
+
+react-data-grid使用6.0.1版本对应的react@16
+7版本未形成稳定版本，暂时使用6.0.1版本；对应的react@18+版本

package/assets/editBigTable.css

@@ -0,0 +1,17 @@
+.Easy3wEditBigTable {
+  background-color: #fff;
+}
+.Easy3wEditBigTable .react-grid-Header .react-grid-HeaderRow > div > div.react-grid-HeaderCell > div {
+  height: 100%;
+}
+.Easy3wEditBigTable .react-grid-Header .react-grid-HeaderRow > div > div.react-grid-HeaderCell > div > div.form-group {
+  height: 100%;
+}
+.Easy3wEditBigTable .react-grid-Header .react-grid-HeaderRow > div > div.react-grid-HeaderCell > div > div.form-group > input[type="text"].form-control.input-sm {
+  width: 100%;
+  height: 100%;
+  border-color: #ddd;
+  outline: none;
+  border-style: solid;
+  border-radius: 3px;
+}

package/assets/index.css

@@ -1482,3 +1482,20 @@ input.ant-input-number-input {
 .e3wResult .e3wResultActions e3wResultButton:not(:last-child) {
   margin-right: 8px;
 }
+.Easy3wEditBigTable {
+  background-color: #fff;
+}
+.Easy3wEditBigTable .react-grid-Header .react-grid-HeaderRow > div > div.react-grid-HeaderCell > div {
+  height: 100%;
+}
+.Easy3wEditBigTable .react-grid-Header .react-grid-HeaderRow > div > div.react-grid-HeaderCell > div > div.form-group {
+  height: 100%;
+}
+.Easy3wEditBigTable .react-grid-Header .react-grid-HeaderRow > div > div.react-grid-HeaderCell > div > div.form-group > input[type="text"].form-control.input-sm {
+  width: 100%;
+  height: 100%;
+  border-color: #ddd;
+  outline: none;
+  border-style: solid;
+  border-radius: 3px;
+}

package/lib/Easy3wEditBigTable/Easy3wEditBigTableForm.js

@@ -0,0 +1,295 @@
+'use strict';
+
+exports.__esModule = true;
+
+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 _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+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/form/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _antd = require('antd');
+
+var _easy3wui = require('easy3wui');
+
+var _lib = require('antd/lib');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var Easy3wEditBigTableForm = function (_PureComponent) {
+  (0, _inherits3['default'])(Easy3wEditBigTableForm, _PureComponent);
+
+  function Easy3wEditBigTableForm(props) {
+    (0, _classCallCheck3['default'])(this, Easy3wEditBigTableForm);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _PureComponent.call(this, props));
+
+    _this.bidPureComponent = function (pureComponentName, that) {
+      _this[pureComponentName] = that;
+    };
+
+    _this.getOptionLst = function () {
+      var objOtherParameters = _this.props.objOtherParameters;
+      var columns = objOtherParameters.columns;
+
+      var arrColumns = [];
+      var columnsNew = [].concat(columns);
+      columnsNew.map(function (item, index) {
+        var strName = item.strName,
+            name = item.name,
+            editable = item.editable,
+            editor = item.editor,
+            otherEditable = item.otherEditable;
+        // if (editable || editor || otherEditable) { // 编辑
+
+        if (editable || editor) {
+          // 编辑
+          arrColumns.push({
+            label: strName || name,
+            value: index
+          });
+        }
+        return item;
+      });
+      _this.arrColumns = arrColumns;
+    };
+
+    _this.getBatchField = function () {
+      var _this$props = _this.props,
+          form = _this$props.form,
+          objOtherParameters = _this$props.objOtherParameters;
+      var columns = objOtherParameters.columns;
+
+      var batchField = form.getFieldValue('batchField_easy3wView');
+      var fieldRowItems = [];
+      var hiddenItems = [];
+      if (batchField) {
+        var objColumn = columns[batchField];
+        var strName = objColumn.strName,
+            name = objColumn.name,
+            key = objColumn.key,
+            fieldId = objColumn.fieldId,
+            rowItem = objColumn.rowItem,
+            unit = objColumn.unit,
+            hiddeKeys = objColumn.hiddeKeys,
+            _objColumn$required = objColumn.required,
+            required = _objColumn$required === undefined ? true : _objColumn$required,
+            fieldType = objColumn.fieldType,
+            _objColumn$options = objColumn.options,
+            options = _objColumn$options === undefined ? [] : _objColumn$options,
+            _objColumn$cmptPros = objColumn.cmptPros,
+            cmptPros = _objColumn$cmptPros === undefined ? {} : _objColumn$cmptPros,
+            _objColumn$rules = objColumn.rules,
+            rules = _objColumn$rules === undefined ? [] : _objColumn$rules,
+            ruleType = objColumn.ruleType,
+            regex = objColumn.regex,
+            regexMsg = objColumn.regexMsg;
+        // strNName 字段名称
+        // name 字段名称
+        // key 字段key
+        // rowItem 字段行
+        // unit 字段单位
+        // hiddeKeys 隐藏字段key
+        // required 是否必填
+        // fieldType 字段类型
+        // optionLst 选项列表
+        // rules 校验规则
+        // ruleType 校验规则类型
+        // onChange 字段值变化回调
+        // cmptPros 组件属性
+
+        var arrHiddenItems = [];
+        if (hiddeKeys) {
+          var arrHiddenKeys = hiddeKeys.split(',');
+          arrHiddenKeys.map(function (item) {
+            arrHiddenItems.push({
+              fieldId: item
+            });
+            return item;
+          });
+          hiddenItems = [].concat(arrHiddenItems); // 隐藏字段
+        }
+        var arrRules = [].concat(rules);
+        if (ruleType === 'phone') {
+          arrRules.push({ pattern: /^1\d{10}$/, message: '手机格式错误！' });
+        } else if (ruleType === 'email') {
+          arrRules.push({ type: 'email', message: '邮箱地址格式错误！' });
+        } else if (ruleType === 'idcard') {
+          arrRules.push({ pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/, message: '身份证格式错误！' });
+        } else if (regex) {
+          arrRules.push({ pattern: new RegExp(regex), message: regexMsg || '数据格式错误！' });
+        }
+        var fieldRowItem = {
+          cols: [rowItem || {
+            label: strName || name,
+            fieldId: fieldId || key,
+            fieldType: fieldType || 'input',
+            value: '',
+            required: required,
+            cmptPros: (0, _extends3['default'])({
+              optionLst: options,
+              options: options,
+              addonAfter: unit || '',
+              rules: arrRules,
+              onChange: function onChange() {
+                for (var _len = arguments.length, arg = Array(_len), _key = 0; _key < _len; _key++) {
+                  arg[_key] = arguments[_key];
+                }
+
+                return _this.onChange(arg, objColumn);
+              }
+            }, cmptPros)
+          }]
+        };
+        fieldRowItems.push(fieldRowItem);
+      }
+      return { fieldRowItems: fieldRowItems, hiddenItems: hiddenItems };
+    };
+
+    _this.onChange = function (arg, objColumn) {
+      var form = _this.props.form;
+      var onChange = objColumn.onChange;
+
+      if (onChange && typeof onChange === 'function') {
+        onChange(form, arg, objColumn);
+      }
+    };
+
+    _this.touchConfirm = function () {
+      var _this$props2 = _this.props,
+          confirmCallback = _this$props2.confirmCallback,
+          objOtherParameters = _this$props2.objOtherParameters;
+
+      _this.props.form.validateFieldsAndScroll(function (err, values) {
+        if (!err) {
+          var batchField = values.batchField_easy3wView,
+              valuesNew = (0, _objectWithoutProperties3['default'])(values, ['batchField_easy3wView']);
+          // delete values.batchField_easy3wView;
+
+          if (confirmCallback && typeof confirmCallback === 'function') {
+            var columns = objOtherParameters.columns;
+
+            var objColumn = columns[batchField];
+            var strName = objColumn.strName,
+                name = objColumn.name;
+            // key 字段
+            // required 必填
+            // strName 字串名称
+            // name 字段名称
+
+            _lib.Modal.confirm({
+              content: '\u8BF7\u786E\u8BA4\u6B64\u5217' + (strName || name) + '\u5168\u90E8\u8BBE\u7F6E\u6210\u5F55\u5165\u503C\uFF0C\u5C06\u8986\u76D6\u539F\u503C!',
+              onOk: function onOk() {
+                confirmCallback(valuesNew, objColumn);
+              },
+              onCancel: function onCancel() {},
+              okText: '确认',
+              cancelText: '取消'
+            });
+          }
+          _this.touchCancel();
+        }
+      });
+    };
+
+    _this.touchCancel = function () {
+      var hideModal = _this.props.hideModal;
+
+      if (hideModal && typeof hideModal === 'function') {
+        hideModal();
+      }
+    };
+
+    var bidPureComponent = _this.props.bidPureComponent;
+
+    if (bidPureComponent && typeof bidPureComponent === 'function') {
+      bidPureComponent(_this);
+    }
+    _this.getOptionLst();
+    _this.state = {};
+    return _this;
+  }
+
+  Easy3wEditBigTableForm.prototype.componentDidMount = function componentDidMount() {};
+
+  Easy3wEditBigTableForm.prototype.componentWillUnmount = function componentWillUnmount() {};
+  // 绑定组件
+
+  // 创建columns
+
+  // 获取批量录入字段
+
+  // 字段值变化回调
+
+  // 保存
+
+  // 取消
+
+
+  Easy3wEditBigTableForm.prototype.render = function render() {
+    var _props = this.props,
+        objOtherParameters = _props.objOtherParameters,
+        visible = _props.visible,
+        form = _props.form;
+    var batchButtonText = objOtherParameters.batchButtonText;
+
+    var footBtnArr = [{ func: this.touchConfirm, cName: '保存' }, { func: this.touchCancel, cName: '关闭' }];
+
+    var _getBatchField = this.getBatchField(),
+        fieldRowItems = _getBatchField.fieldRowItems,
+        hiddenItems = _getBatchField.hiddenItems;
+
+    var rowItems = [{
+      cols: [{
+        label: '录入内容',
+        fieldId: 'batchField_easy3wView',
+        fieldType: 'select',
+        required: true,
+        value: '',
+        cmptPros: {
+          optionLst: this.arrColumns
+        }
+      }]
+    }].concat(fieldRowItems);
+    return _react2['default'].createElement(
+      _easy3wui.Easy3wModal,
+      {
+        title: batchButtonText || '批量录入',
+        visible: visible,
+        onCancel: this.touchCancel,
+        footBtnArr: footBtnArr,
+        width: '80%'
+      },
+      _react2['default'].createElement(_easy3wui.Easy3wFormPage, { rowItems: rowItems, hiddenItems: hiddenItems, form: form, mixColFlag: true })
+    );
+  };
+
+  return Easy3wEditBigTableForm;
+}(_react.PureComponent);
+
+exports['default'] = _form2['default'].create()(Easy3wEditBigTableForm);
+module.exports = exports['default'];

package/lib/Easy3wEditBigTable/Editors/EditorNumber.js

@@ -0,0 +1,92 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDataGrid = require('react-data-grid');
+
+var _reactDataGrid2 = _interopRequireDefault(_reactDataGrid);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var editors = _reactDataGrid2['default'].editors;
+var EditorBase = editors.EditorBase;
+
+var EditorNumber = function (_EditorBase) {
+  (0, _inherits3['default'])(EditorNumber, _EditorBase);
+
+  function EditorNumber() {
+    var _temp, _this, _ret;
+
+    (0, _classCallCheck3['default'])(this, EditorNumber);
+
+    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, _EditorBase.call.apply(_EditorBase, [this].concat(args))), _this), _this.setInputRef = function (input) {
+      _this.input = input;
+    }, _this.getInputNode = function () {
+      return _this.setInputRef();
+    }, _this.getValue = function () {
+      var _ref;
+
+      // const { value } = this.state;
+      return _ref = {}, _ref[_this.props.column.key] = _this.getInputNode().value, _ref;
+    }, _this.onBlur = function (event) {
+      var _this$props = _this.props,
+          onBlur = _this$props.onBlur,
+          onCommit = _this$props.onCommit;
+
+      if (onBlur && typeof onBlur === 'function') {
+        onBlur(event);
+      }
+      if (onCommit && typeof onCommit === 'function') {
+        onCommit();
+      }
+    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
+  }
+  // 获取 input 节点
+
+  // 获取 input 值
+
+  // input 失去焦点
+
+
+  EditorNumber.prototype.render = function render() {
+    var value = this.props.value;
+
+    return _react2['default'].createElement('input', (0, _extends3['default'])({
+      ref: this.setInputRef,
+      type: 'number',
+      className: 'form-control',
+      defaultValue: value
+    }, this.props, {
+      onBlur: this.onBlur
+    }));
+  };
+
+  return EditorNumber;
+}(EditorBase);
+
+exports['default'] = EditorNumber;
+module.exports = exports['default'];

package/lib/Easy3wEditBigTable/Editors/EditorsDatePicker.js

@@ -0,0 +1,168 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _datePicker = require('antd/lib/date-picker');
+
+var _datePicker2 = _interopRequireDefault(_datePicker);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+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/date-picker/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _antd = require('antd');
+
+var _zh_CN = require('antd/lib/date-picker/locale/zh_CN');
+
+var _zh_CN2 = _interopRequireDefault(_zh_CN);
+
+require('moment/locale/zh-cn');
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+var _reactDataGrid = require('react-data-grid');
+
+var _reactDataGrid2 = _interopRequireDefault(_reactDataGrid);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var editors = _reactDataGrid2['default'].editors;
+// import ReactDOM from 'react-dom';
+
+var EditorBase = editors.EditorBase;
+
+
+_moment2['default'].locale('zh-cn');
+var dateFormatDefault = 'YYYY-MM-DD';
+
+var EditorsDatePicker = function (_React$Component) {
+  (0, _inherits3['default'])(EditorsDatePicker, _React$Component);
+
+  function EditorsDatePicker(props) {
+    (0, _classCallCheck3['default'])(this, EditorsDatePicker);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var value = props.value,
+        refCallback = props.refCallback;
+
+    if (refCallback && refCallback instanceof Function) {
+      refCallback(_this);
+    }
+    _this.state = {
+      value: value
+    };
+    return _this;
+  }
+  // 获取组件节点
+
+  // 设置样式
+
+  // 获取 input 节点
+
+  // 获取 input 值
+
+  // input 值改变时回调
+
+  // input 失去焦点时回调
+
+
+  EditorsDatePicker.prototype.render = function render() {
+    var _props$cmptPros = this.props.cmptPros,
+        cmptPros = _props$cmptPros === undefined ? {} : _props$cmptPros;
+    var dateFormat = cmptPros.dateFormat;
+    var value = this.state.value;
+
+    return _react2['default'].createElement(_datePicker2['default'], (0, _extends3['default'])({
+      style: this.getStyle(),
+      autoFocus: true,
+      locale: _zh_CN2['default'],
+      format: dateFormat || dateFormatDefault,
+      value: value ? (0, _moment2['default'])(value, dateFormat || dateFormatDefault) : null,
+      ref: this.getReactDataGridZJ
+      // autoFocus
+    }, cmptPros, {
+      onChange: this.onChange,
+      onBlur: this.onBlur
+    }));
+  };
+
+  return EditorsDatePicker;
+}(_react2['default'].Component);
+
+var _initialiseProps = function _initialiseProps() {
+  var _this2 = this;
+
+  this.getReactDataGridZJ = function (el) {
+    _this2.EditorsZJ = el;
+    return el;
+  };
+
+  this.getStyle = function () {
+    return {
+      width: '100%',
+      minWidth: '120px'
+    };
+  };
+
+  this.getInputNode = function () {
+    return _this2.getReactDataGridZJ();
+  };
+
+  this.getValue = function () {
+    var _ref;
+
+    var value = _this2.state.value;
+
+    return _ref = {}, _ref[_this2.props.column.key] = value, _ref;
+  };
+
+  this.onChange = function (momentDate, strDate) {
+    var _props = _this2.props,
+        onChange = _props.onChange,
+        _props$cmptPros2 = _props.cmptPros,
+        cmptPros = _props$cmptPros2 === undefined ? {} : _props$cmptPros2;
+    var dateFormat = cmptPros.dateFormat;
+
+    if (onChange) {
+      onChange(momentDate, strDate);
+    }
+    var value = momentDate ? momentDate.format(dateFormat || dateFormatDefault) : null;
+    _this2.setState({ value: value });
+  };
+
+  this.onBlur = function () {
+    var _props2 = _this2.props,
+        onCommit = _props2.onCommit,
+        onBlur = _props2.onBlur;
+
+    if (onCommit) {
+      onCommit();
+    }
+  };
+};
+
+exports['default'] = EditorsDatePicker;
+module.exports = exports['default'];