ming-demo3/lib/components/meta/LineTabs.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 _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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

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

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

var MetaComponents = _interopRequireWildcard(require("./index"));

var _metaRunner = _interopRequireDefault(require("../meta-runner"));

var _classnames = _interopRequireDefault(require("classnames"));

var MenuItem = _baseui.Menu.Item;
var TabPane = _baseui.Tabs.TabPane;

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

  function LineTabs(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, LineTabs);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(LineTabs).call(this, props));
    _this.keyField = 'cGroupCode';
    _this.key = props.meta[_this.keyField];
    _this.keyVisible = {};
    _this.defaultActiveKey = _this.init(props.meta.containers);

    if (props.config.max !== false || props.config.max) {
      var viewModel = props.viewModel;
      var key = "btnMax_".concat(_this.key);
      _this.maxButtonMeta = {
        cControlType: 'Button',
        cItemName: key,
        currentState: 'min',
        icon: process.env.__THEMETYPE__ == 'ncc' ? 'zuidahua1' : 'zuidahua',
        className: 'btn-maximize',
        iconType: 'iconfont',
        iStyle: 2,
        needClear: false,
        value: '最大化'
      };
      var buttonModel = new cb.models.SimpleModel(_this.maxButtonMeta);
      viewModel.addProperty(key, buttonModel);
      buttonModel.on('click', function () {
        var currentState = buttonModel.getState('currentState');
        var newState = currentState === 'min' ? 'max' : 'min';
        buttonModel.setState('currentState', newState);
        buttonModel.setState('value', newState === 'max' ? '恢复' : '最大化');
        _this.maxButtonMeta.icon = newState === 'max' ? 'zuixiaohua2' : process.env.__THEMETYPE__ == 'ncc' ? 'zuidahua1' : 'zuidahua';

        _this.setState({
          currentState: newState
        });

        viewModel.execute('recalcTableHeight', newState === 'max' ? 46 : 0, _this.key);
      });
    }

    _this.configStates = props.config.states || [];

    _this.rebuildState(_this.keyVisible, props.viewModel.getParams().mode);

    _this.state = {
      activeKey: _this.defaultActiveKey,
      keyVisible: _this.keyVisible,
      className: props.config.classname
    };
    return _this;
  }

  (0, _createClass2["default"])(LineTabs, [{
    key: "rebuildState",
    value: function rebuildState(keyVisible, mode) {
      var states = this.configStates.filter(function (x) {
        return x.code === mode;
      });
      if (!states.length) return;
      states[0].items.forEach(function (item) {
        keyVisible[item.cGroupCode] = item.bVisible;
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props = this.props,
          viewModel = _this$props.viewModel,
          meta = _this$props.meta;
      viewModel.on('updateViewMeta', function (args) {
        if (_this2.groupKeys.indexOf(args.code) === -1) return;

        if (args.caption) {
          var container = _this2.newContainers.find(function (item) {
            return item[_this2.keyField] === args.code;
          });

          if (container) {
            container.cName = args.caption;

            _this2.setState({
              flag: true
            });
          }

          return;
        }

        var _this2$state = _this2.state,
            keyVisible = _this2$state.keyVisible,
            activeKey = _this2$state.activeKey;
        keyVisible[args.code] = args.visible;
        var states = {
          keyVisible: keyVisible
        };
        states.activeKey = Object.keys(keyVisible).find(function (v) {
          return keyVisible[v];
        }) || '';

        _this2.setState(states);
      });
      viewModel.on('modeChange', function (mode) {
        var keyVisible = _this2.state.keyVisible;

        _this2.rebuildState(keyVisible, mode);

        var states = {
          keyVisible: keyVisible
        };
        states.activeKey = Object.keys(keyVisible).find(function (v) {
          return keyVisible[v];
        }) || '';

        _this2.setState(states);
      });
    }
  }, {
    key: "init",
    value: function init(containers) {
      var _this3 = this;

      if (!containers || !containers.length) return;
      var activeKey = '';
      this.toolbarContainers = {};
      this.newContainers = [];
      this.groupKeys = [];
      this.external = {};
      var tableContainerCount = 0;
      containers.forEach(function (container, index) {
        var key = container[_this3.keyField];
        if (index === 0) activeKey = key;
        var subContainers = container.containers;
        if (!subContainers || !subContainers.length) return;
        var newContainer = Object.assign({}, container);
        newContainer.containers = [];
        subContainers.forEach(function (item) {
          var containerType = item.cControlType && item.cControlType.trim().toLocaleLowerCase();

          if (containerType === 'toolbar') {
            if (_this3.toolbarContainers[key]) _this3.toolbarContainers[key].controls = (_this3.toolbarContainers[key].controls || []).concat(item.controls || []);else _this3.toolbarContainers[key] = item;
          } else {
            newContainer.containers.push(item);
            if (containerType === 'table') tableContainerCount++;else tableContainerCount--;
          }
        });

        _this3.newContainers.push(newContainer);

        _this3.groupKeys.push(key);

        _this3.keyVisible[key] = true;
        if (!container.cStyle) return;
        var config = JSON.parse(container.cStyle);
        if (!config.billnum) return;
        _this3.external[key] = {
          config: container.cStyle,
          component: null
        };
        tableContainerCount--;
      });
      if (tableContainerCount === containers.length) this.canMax = true;
      return activeKey;
    }
  }, {
    key: "externalReady",
    value: function externalReady(parentViewModel, viewModel, config) {
      if (!config.filter) return;
      var condition = {
        commonVOs: [{
          itemName: config.filter,
          value1: null
        }]
      };
      var currentValue = parentViewModel.get(config.key).getValue();
      condition.commonVOs[0].value1 = currentValue;
      var params = viewModel.getParams();
      params.filterId = null;
      params.condition = condition;
      if (!currentValue) params.autoLoad = false;
      parentViewModel.on('afterLoadData', function () {
        currentValue = parentViewModel.get(config.key).getValue();
        if (!currentValue) return;
        condition.commonVOs[0].value1 = currentValue;
        viewModel.execute('filterClick', {
          condition: condition
        });
      });
    }
  }, {
    key: "handleClick",
    value: function handleClick(e) {
      var _this4 = this;

      var key = e.key;
      this.setState({
        activeKey: key
      }, function () {
        _this4.props.viewModel.execute('afterTabActiveKeyChange', {
          key: key
        });
      });
      if (!this.external[key] || this.external[key].component) return;
      var config = JSON.parse(this.external[key].config);
      var data = {
        billtype: 'voucherlist',
        billno: config.billnum
      };
      cb.loader.runCommandLine('bill', data, this.props.viewModel, function (vm, viewmeta) {
        _this4.externalReady(_this4.props.viewModel, vm, config);

        _this4.external[key].viewModel = vm;
        _this4.external[key].metaData = viewmeta;

        _this4.setState({
          flag: true
        });
      });
    }
  }, {
    key: "renderMenuItems",
    value: function renderMenuItems() {
      var _this5 = this;

      var keyVisible = this.state.keyVisible;
      var menuItems = [];
      this.newContainers.forEach(function (item) {
        var key = item[_this5.keyField];
        if (keyVisible[key] === false) return;
        menuItems.push(_react["default"].createElement(MenuItem, {
          key: key
        }, _react["default"].createElement("a", null, item.cName)));
      });
      return menuItems;
    }
  }, {
    key: "renderMenu",
    value: function renderMenu() {
      var _this6 = this;

      var menuItems = this.renderMenuItems();
      return _react["default"].createElement(_baseui.Menu, {
        className: "tab-menu",
        mode: "horizontal",
        selectedKeys: [this.state.activeKey],
        onSelect: function onSelect(e) {
          return _this6.handleClick(e);
        }
      }, menuItems);
    }
  }, {
    key: "renderTabItems",
    value: function renderTabItems() {
      var _this7 = this;

      var _this$props2 = this.props,
          viewModel = _this$props2.viewModel,
          width = _this$props2.width,
          height = _this$props2.height;
      var items = [];
      var tabContent = null;
      this.newContainers.forEach(function (container) {
        var key = container[_this7.keyField];
        var externalObj = _this7.external[key];
        tabContent = externalObj ? externalObj.viewModel && _react["default"].createElement(_metaRunner["default"], {
          index: _this7.props.index,
          width: width,
          viewModel: externalObj.viewModel,
          metaData: externalObj.metaData
        }) : _react["default"].createElement(MetaComponents.Container, {
          meta: container,
          viewModel: viewModel,
          width: width,
          height: height,
          parents: {
            type: 'LineTabs',
            key: _this7.key
          }
        });
        items.push(_react["default"].createElement(TabPane, {
          tab: container.cName,
          key: key
        }, _react["default"].createElement("div", {
          id: "".concat(viewModel.getParams() && viewModel.getParams().billNo, "|").concat(key)
        }, tabContent)));
      });
      return items;
    }
  }, {
    key: "renderToolbar",
    value: function renderToolbar() {
      var toolbarContainer = this.toolbarContainers[this.state.activeKey];
      if (!toolbarContainer) toolbarContainer = {
        controls: []
      };
      if (!toolbarContainer.controls) toolbarContainer.controls = [];
      var controls = [].concat(toolbarContainer.controls);
      if (this.maxButtonMeta) controls.push(this.maxButtonMeta);
      return _react["default"].createElement("div", {
        className: "tab-top-right"
      }, _react["default"].createElement(MetaComponents.Toolbar, {
        align: 'right',
        config: toolbarContainer.cStyle,
        controls: controls,
        model: this.props.viewModel
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          activeKey = _this$state.activeKey,
          className = _this$state.className;
      if (!activeKey) return null;

      var menu = _react["default"].createElement(_basic.Row, {
        className: "line-tabs-menu-container"
      }, this.renderMenu(), this.renderToolbar());

      var tabs = _react["default"].createElement(_baseui.Tabs, {
        className: "card-container",
        activeKey: activeKey,
        type: "card",
        animated: false
      }, this.renderTabItems());

      return _react["default"].createElement(_basic.Row, {
        className: (0, _classnames["default"])('line-tabs', className, {
          'line-tabs-maximize': this.state.currentState === 'max'
        })
      }, menu, tabs);
    }
  }]);
  return LineTabs;
}(_react.Component);

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