ming-demo3/lib/components/meta/FlatRowContainer.js

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _eq2 = _interopRequireDefault(require("lodash/eq"));

var _forEach2 = _interopRequireDefault(require("lodash/forEach"));

var _react = _interopRequireWildcard(require("react"));

var _baseui = require("@mdf/baseui");

var _basic = require("../basic");

var _util = require("@mdf/cube/lib/helpers/util");

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var FlatRowContainer = function (_Component) {
  (0, _inherits2["default"])(FlatRowContainer, _Component);

  function FlatRowContainer(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, FlatRowContainer);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(FlatRowContainer).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initSunModel", function (sunModel) {
      if (!sunModel) return null;
      var cControlType = sunModel.get('cControlType');
      var columns = sunModel.get('columns');
      var showCheckBox = sunModel.get('showCheckBox');
      var bIsNull = sunModel.get('bIsNull');
      var showRowNo = sunModel.get('showRowNo');
      var showAggregates = sunModel.get('showAggregates');
      var pagination = sunModel.get('pagination');
      var cShowCaption = sunModel.get('cShowCaption');
      return {
        cControlType: cControlType,
        columns: columns,
        showCheckBox: showCheckBox,
        bIsNull: bIsNull,
        showRowNo: showRowNo,
        showAggregates: showAggregates,
        pagination: pagination,
        cShowCaption: cShowCaption,
        independent: true,
        readOnly: false
      };
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handelDelListrefer", function (e, rowIndex, cellName) {
      e.stopPropagation();

      _this.state.controlModel.setCellValue(rowIndex, cellName, '', true);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "updateRow", function (data) {
      var datasource = _this.state.datasource;

      if (data.index.length) {
        data.index.forEach(function (rowIndex, index) {
          datasource[rowIndex] = data.row[index];
        });
      } else {
        datasource[data.index] = data.row;
      }

      _this.setState({
        datasource: datasource
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setCellValue", function (data) {
      var datasource = _this.state.datasource;
      datasource[data.rowIndex][data.cellName] = data.value;

      _this.setState({
        datasource: datasource
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setColumns", function (columndata) {
      var controlModel = _this.state.controlModel;
      Object.keys(columndata).forEach(function (val) {
        Object.keys(columndata[val]).forEach(function (v) {
          controlModel.setColumnState(val, v, columndata[val][v]);
        });
      });

      _this.setState({});
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "ActionClick", function (e, action, index) {
      if (_this.actionClickTime) {
        var nowTime = new Date().valueOf();
        if (nowTime - _this.actionClickTime < 1000) return;
        _this.actionClickTime = nowTime;
      } else {
        _this.actionClickTime = new Date().valueOf();
      }

      _this.state.controlModel.setFocusedRowIndex(index);

      _this.setState({
        focusedIndex: index
      });

      var viewModel = _this.state.controlModel.getParent();

      while (viewModel.getParent()) {
        viewModel = viewModel.getParent();
      }

      var params = {
        index: index,
        cItemName: action.cItemName
      };
      viewModel.get(action.cItemName).fireEvent('click', params);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setActionState", function (actionstates) {
      var actionState = _this.state.actionState;

      if (actionstates.length) {
        actionstates.forEach(function (actionstate) {
          var rowIndex = actionstate.rowIndex,
              cellName = actionstate.cellName,
              name = actionstate.name,
              value = actionstate.value;
          if ((0, _typeof2["default"])(actionState[rowIndex]) !== 'object') actionState[rowIndex] = {};
          if ((0, _typeof2["default"])(actionState[rowIndex][cellName]) !== 'object') actionState[rowIndex][cellName] = {};
          actionState[rowIndex][cellName][name] = value;
        });

        _this.setState({
          actionState: actionState
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getAction", function (actionList, index) {
      var actionState = _this.state.actionState;
      return actionList.map(function (action, i) {
        var icon = action.iStyle === 1 ? null : '#icon-' + action.icon;
        var text = action.iStyle === 2 ? null : action.cShowCaption;
        var extraProps = {};

        extraProps.onClick = function (e) {
          return _this.ActionClick(e, action, index);
        };

        if (!actionState[i] || !actionState[i][action.cItemName] || actionState[i][action.cItemName].visible) {
          return _react["default"].createElement("span", {
            key: 'action' + i
          }, _react["default"].createElement("a", (0, _extends2["default"])({
            className: "table-list-btn"
          }, extraProps), action.icon ? _react["default"].createElement(_baseui.Icon, {
            type: action.icon
          }) : null, action.cShowCaption ? action.cShowCaption : null));
        }
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderRow", function (row, index) {
      var _this$state = _this.state,
          columns = _this$state.columns,
          propsOpen = _this$state.propsOpen,
          cellState = _this$state.cellState,
          controlModel = _this$state.controlModel,
          disabled = _this$state.disabled,
          readonly = _this$state.readonly,
          sunMeta = _this$state.sunMeta,
          sunActions = _this$state.sunActions,
          sunConfig = _this$state.sunConfig,
          err = _this$state.err,
          showColumnName = _this$state.showColumnName;
      var items = [];
      var columnindex = 0;
      var errItem = cb.utils.isArray(err) && err.length ? err.map(function (v) {
        if (v.rowIndex === index) return v.cellName;
      }) : [];
      (0, _forEach2["default"])(columns, function (column, key) {
        if (errItem.includes(column.cItemName)) {
          column.err = 'err';
        }

        var item = null;
        var controlType = column.cControlType;
        var model = null;

        if (cellState[index] && cellState[index][key]) {
          column = _objectSpread({}, column, {}, cellState[index][key]);
        }

        column.readOnly = !column.bCanModify;
        var modelconfig = cb.utils.extend(true, {
          value: row[key]
        }, column);
        var cStyleconfig = {};

        if (column.cStyle) {
          try {
            cStyleconfig = JSON.parse(column.cStyle);
          } catch (e) {
            cStyleconfig = {};
          }
        }

        var after = cStyleconfig.after || controlModel.getColumnState(key, 'after');
        if (showColumnName) delete modelconfig.cShowCaption;

        switch (controlType && controlType.trim().toLocaleLowerCase()) {
          case 'inputnumber':
          case 'money':
          case 'price':
            model = new cb.models.SimpleModel(modelconfig);

            var NumPoint = _this.getPrecision(modelconfig.iNumPoint, controlType);

            item = _react["default"].createElement("div", {
              className: "frc-inputnumber ".concat('frc-inputnumber-' + key)
            }, modelconfig.cShowCaption ? _react["default"].createElement("label", {
              className: "frc-inputnumber-title"
            }, !modelconfig.bIsNull && columnindex == 0 ? _react["default"].createElement(_baseui.Icon, {
              type: "star"
            }) : null, modelconfig.cShowCaption) : null, _react["default"].createElement(_basic.InputNumber, {
              model: model,
              iNumPoint: NumPoint,
              cFormatData: modelconfig.cFormatData,
              className: "frc-inputnumber-content"
            }));
            break;

          case 'select':
            model = new cb.models.ListModel(modelconfig);
            item = _react["default"].createElement("div", {
              className: "frc-select"
            }, modelconfig.cShowCaption ? _react["default"].createElement("label", {
              className: "frc-select-title"
            }, !modelconfig.bIsNull && columnindex == 0 ? _react["default"].createElement(_baseui.Icon, {
              type: "star"
            }) : null, modelconfig.cShowCaption) : null, _react["default"].createElement(_basic.Select, {
              model: model,
              className: "frc-select-content"
            }));
            break;

          case 'listrefer':
            model = new cb.models.ReferModel(modelconfig);
            item = _react["default"].createElement(_basic.ListRefer, {
              model: model,
              className: "frc-listrefer"
            });
            break;

          case 'input':
            model = new cb.models.SimpleModel(modelconfig);
            item = _react["default"].createElement(_basic.Input, {
              model: model,
              className: "frc-input"
            });
            break;

          default:
            item = _react["default"].createElement(_baseui.Input, {
              value: row[key],
              className: "member-list-disabled",
              disabled: disabled,
              onChange: function onChange(e) {
                return _this.handleChange(index, key, e.target.value);
              }
            });
            if (!disabled && readonly) item = _react["default"].createElement("span", {
              className: "m-title"
            }, row[key]);
        }

        model !== null && model.on('afterValueChange', function (args) {
          !!args && controlModel.setCellValue(index, key, cb.utils.isEmpty(args.value) ? null : args.value, true, true);

          if (column.cRefRetId && !!args) {
            var cRefRetId = {};

            try {
              cRefRetId = JSON.parse(column.cRefRetId);
            } catch (e) {}

            var cRefRetIdarr = Object.keys(cRefRetId);
            cRefRetIdarr.length && cRefRetIdarr.forEach(function (v) {
              controlModel.setCellValue(index, v, cb.utils.isEmpty(args.value) ? null : args.value[cRefRetId[v]] || '', true, true);
            });
          }
        });
        model !== null && model.on('blur', function (args) {
          !!args && controlModel.setCellValue(index, key, args.value || '', true, true);
        });
        model !== null && controlType === 'ListRefer' && model.on('beforeBrowse', function () {
          return controlModel.execute('beforeBrowse', {
            rowIndex: index,
            cellName: key,
            context: model
          });
        });
        model !== null && controlType === 'Table' && model.doPropertyChange("validate", {
          type: 'err',
          message: '不能为空'
        });
        items.push(item);
        columnindex++;
      });

      if (sunMeta) {
        var sunModel = null;
        var focusedIndex = controlModel.getFocusedRowIndex();

        if (index == focusedIndex) {
          sunModel = controlModel.getEditRowModel().get(sunMeta.childrenField);
        } else {
          var rowData = controlModel.getRowsByIndexes(index)[0];

          if (!_this.sunGridModels['_' + index]) {
            sunConfig.datasource = rowData[sunMeta.childrenField];
            sunConfig.rows = rowData[sunMeta.childrenField];
            sunModel = new cb.models.GridModel(sunConfig);
            _this.sunGridModels['_' + index] = sunModel;
          } else {
            sunModel = _this.sunGridModels['_' + index];
            sunModel.setDataSource(rowData[sunMeta.childrenField]);
          }
        }

        items.push(_react["default"].createElement("div", {
          onMouseEnter: function onMouseEnter() {
            return _this.onMouseEnter(index);
          }
        }, _react["default"].createElement(_basic.Table, {
          height: '1000',
          width: _this.props.width,
          action: sunActions,
          model: sunModel
        })));
      }

      return items;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseEnter", function (index) {
      if (index != _this.state.focusedIndex) {
        _this.state.controlModel.setFocusedRowIndex(index);

        _this.setState({
          focusedIndex: index
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderReadOnlyRow", function (row) {
      var _this$state2 = _this.state,
          columns = _this$state2.columns,
          controlModel = _this$state2.controlModel,
          showColumnName = _this$state2.showColumnName;
      var items = [];
      (0, _forEach2["default"])(columns, function (column, key) {
        var item = null;
        var controlType = column.cControlType;
        var modelconfig = cb.utils.extend(true, {
          value: row[key]
        }, column);
        var cStyleconfig = {};

        if (column.cStyle) {
          try {
            cStyleconfig = JSON.parse(column.cStyle);
          } catch (e) {
            cStyleconfig = {};
          }
        }

        var after = cStyleconfig.after || controlModel.getColumnState(key, 'after');
        if (showColumnName) delete modelconfig.cShowCaption;

        switch (controlType && controlType.trim().toLocaleLowerCase()) {
          case 'inputnumber':
          case 'money':
          case 'price':
            var NumPoint = _this.getPrecision(modelconfig.iNumPoint, controlType);

            item = _react["default"].createElement("div", {
              className: "frc-inputnumber-readonly ".concat('frc-inputnumber-' + key)
            }, modelconfig.cShowCaption ? _react["default"].createElement("span", {
              className: "frc-inputnumber-title"
            }, modelconfig.cShowCaption) : null, _react["default"].createElement("div", {
              className: "frc-inputnumber-content"
            }, _react["default"].createElement("div", {
              className: "control-flex"
            }, _react["default"].createElement("div", {
              className: "ant-input-number"
            }, (0, _util.getRoundValue)(Number(row[key]), NumPoint)), after ? _react["default"].createElement("span", null, after) : null)));
            break;

          case 'select':
            var _obj = JSON.parse(modelconfig.cEnumString) || {};

            item = _react["default"].createElement("div", {
              className: "frc-select-readonly"
            }, _react["default"].createElement("div", {
              className: "frc-select-title"
            }, modelconfig.cShowCaption ? _react["default"].createElement("span", {
              className: ""
            }, modelconfig.cShowCaption) : null), _react["default"].createElement("div", {
              className: "frc-select-content"
            }, (0, _typeof2["default"])(row[key]) == 'object' ? row[key].text : _obj[row[key]]));
            break;

          case 'listrefer':
            item = _react["default"].createElement("div", {
              className: "frc-listrefer-readonly"
            }, (0, _typeof2["default"])(row[key]) == 'object' ? row[key].name : row[key]);
            break;

          case 'input':
            item = _react["default"].createElement("div", {
              className: "frc-input-readonly"
            }, row[key]);
            break;

          default:
            item = _react["default"].createElement("span", {
              className: "m-title"
            }, row[key]);
        }

        items.push(item);
      });
      return items;
    });
    var meta = props.meta,
        _viewModel = props.viewModel,
        cStyle = props.cStyle;
    var childrenField = meta.childrenField,
        cCode = meta.cCode;

    var _controlModel = _viewModel.get(childrenField || cCode);

    var _sunMeta = null;
    var _sunActions = null;
    var _sunModel = null;

    if (_this.props.meta.containers) {
      (0, _forEach2["default"])(_this.props.meta.containers, function (item, index) {
        item.containers && item.containers.map(function (container) {
          if (container.cControlType && container.cControlType.toLocaleLowerCase() == 'table') {
            _sunMeta = container;
            _sunModel = _controlModel.getEditRowModel().get(_sunMeta.childrenField);
          }

          _sunActions = container.containers ? container.containers[0] : {};
        });
      });
    }

    var config = null;

    if (cStyle) {
      try {
        config = JSON.parse(cStyle);
      } catch (e) {
        config = {};
      }
    }

    var metacStyle = props.meta.cStyle || "{}";

    try {
      metacStyle = JSON.parse(metacStyle);
    } catch (e) {
      metacStyle = {};
    }

    var _sunConfig = _this.initSunModel(_sunModel);

    _this.state = Object.assign({
      controlModel: _controlModel,
      sunMeta: _sunMeta,
      sunActions: _sunActions,
      actions: meta.containers ? meta.containers[0].controls : [],
      readOnly: false,
      propsOpen: false,
      metaclassname: metacStyle.classname,
      cellState: [],
      err: [],
      actionState: [],
      sunModel: _sunModel,
      sunConfig: _sunConfig,
      showColumnName: metacStyle.showColumnName || false,
      focusedIndex: -1
    }, config);
    _this.val_data;
    _this.sunGridModels = {};
    return _this;
  }

  (0, _createClass2["default"])(FlatRowContainer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.state.controlModel && this.state.controlModel.addListener(this);
      var datasource = this.state.controlModel.getAllData();
      this.setState({
        datasource: datasource
      });
      this.state.controlModel.setFocusedRowIndex(0);
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {}
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.state.controlModel.removeListener(this);
    }
  }, {
    key: "setListenerState",
    value: function setListenerState(params) {
      this.setState(params);
    }
  }, {
    key: "setCellState",
    value: function setCellState(data) {
      var cellState = this.state.cellState;
      cellState[data.rowIndex] = (0, _defineProperty2["default"])({}, data.cellName, (0, _defineProperty2["default"])({}, data.propertyName, data.value));
      this.setState({
        cellState: cellState
      });
    }
  }, {
    key: "setDataSource",
    value: function setDataSource(datasource) {
      this.setState({
        datasource: datasource
      });
    }
  }, {
    key: "validate",
    value: function validate(val) {
      var _this2 = this;

      if (val.type == 'error') {
        if (val.data && val.data.length) {
          this.val_data = val.data;
          val.data.forEach(function (v) {
            _this2.state.controlModel.setCellState(v.rowIndex, v.cellName, 'err', 'has-error');
          });
        }
      } else {
        this.setState({
          err: []
        });
      }
    }
  }, {
    key: "setCellValue",
    value: function setCellValue(data) {
      var rowIndex = data.rowIndex,
          cellName = data.cellName,
          value = data.value;
      var datasource = this.state.datasource;
      value = (0, _typeof2["default"])(value) === 'object' && value !== null ? value.value : value;
      datasource[rowIndex][cellName] = value;
      this.setDataSource(datasource);
    }
  }, {
    key: "handleChange",
    value: function handleChange(rowIndex, cellName, value) {
      var _value = value === 0 || !!value ? value : null;

      this.state.controlModel.setCellValue(rowIndex, cellName, _value, true);
    }
  }, {
    key: "getPrecision",
    value: function getPrecision(iNumPoint, controlType) {
      switch (controlType) {
        case 'money':
          iNumPoint = cb.rest.AppContext.option ? cb.rest.AppContext.option.amountofdecimal : 0;
          break;

        case 'price':
          iNumPoint = cb.rest.AppContext.option ? cb.rest.AppContext.option.monovalentdecimal : 0;
          break;
      }

      return iNumPoint || 0;
    }
  }, {
    key: "insertRow",
    value: function insertRow(data) {
      var index = data.index,
          row = data.row;
      var datasource = this.state.datasource;
      datasource.splice(index, 0, row);
      this.setState({
        datasource: datasource,
        autoLoad: false
      });
    }
  }, {
    key: "deleteRows",
    value: function deleteRows(indexes) {
      var datasource = this.state.datasource;
      indexes.map(function (index) {
        delete datasource[index];
      });
      datasource = datasource.filter(function (v) {
        return v;
      });
      this.setState({
        datasource: datasource,
        autoLoad: false
      });
    }
  }, {
    key: "batchInsertRow",
    value: function batchInsertRow(data) {
      var datasource = this.state.datasource;
      data.forEach(function (item) {
        var rowIndex = item.rowIndex,
            rowData = item.rowData;
        datasource.splice(rowIndex, 0, rowData);
      });
      this.setState({
        datasource: datasource
      });
    }
  }, {
    key: "setReadOnly",
    value: function setReadOnly(value) {
      this.setState({
        readOnly: value
      });
    }
  }, {
    key: "componentWillUpdate",
    value: function componentWillUpdate(nextProps, nextState) {
      return !(0, _eq2["default"])(this.state, nextState);
    }
  }, {
    key: "renderRows",
    value: function renderRows(datasource) {
      var _this3 = this;

      var _this$state3 = this.state,
          readOnly = _this$state3.readOnly,
          columns = _this$state3.columns;
      var iCols = this.props.meta.iCols;
      var controlWidth = 100 / (iCols || 2);
      var className = "width-percent-".concat(controlWidth.toFixed(0));
      var actions = this.state.actions;
      return datasource.map(function (row, index) {
        return _react["default"].createElement("div", {
          className: className,
          key: 'row' + index
        }, readOnly ? _this3.renderReadOnlyRow(row) : _this3.renderRow(row, index), !!(!readOnly && actions && actions.length) && _react["default"].createElement("div", {
          className: "flatrowcontainer-action"
        }, _this3.getAction(actions, index)));
      });
    }
  }, {
    key: "renderColums",
    value: function renderColums(columns) {
      var items = [];
      columns && (0, _forEach2["default"])(columns, function (column, key) {
        if (column.bHidden || !column.bShowIt) return;
        items.push(_react["default"].createElement("span", {
          className: column.cItemName
        }, column.cShowCaption || column.cCaption));
      });
      return _react["default"].createElement("div", {
        className: "member-list-title"
      }, items);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state4 = this.state,
          datasource = _this$state4.datasource,
          classname = _this$state4.classname,
          metaclassname = _this$state4.metaclassname,
          showColumnName = _this$state4.showColumnName,
          columns = _this$state4.columns;
      if (!datasource || !datasource.length) datasource = [];
      return _react["default"].createElement("div", {
        className: "member-list ".concat(classname || '', " ").concat(metaclassname)
      }, showColumnName && this.renderColums(columns), this.renderRows(datasource));
    }
  }]);
  return FlatRowContainer;
}(_react.Component);

exports["default"] = FlatRowContainer;
//# sourceMappingURL=FlatRowContainer.js.map