ming-demo3/lib/components/basic/taggroup.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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

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

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

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

var _fileUpload = _interopRequireDefault(require("../file-upload"));

var _picturebook = _interopRequireDefault(require("../picturebook"));

var Search = _baseui.Input.Search;

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

  function TagGroup(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, TagGroup);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TagGroup).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "open", function (e) {
      _this.referViewModel = e.vm;
      _this.gridModel = e.vm.get('table');

      _this.gridModel.addListener((0, _assertThisInitialized2["default"])(_this));
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onVisibleChange", function (key, visible) {
      _this.popVisible[key] = visible;

      _this.setState({
        popVisible: visible
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDelete", function (indexes, index) {
      _this.props.model.setFocusedRowIndex(index);

      _this.focusedIndex = index;

      _this.setState({
        popVisible: true
      });

      var childrenField = _this.state.childrenField;

      var model = _this.props.model.getEditRowModel().get(childrenField);

      model.deleteItems(indexes);
    });
    _this.state = {
      searchWord: '',
      popKeyField: 'id',
      popDataSource: [],
      bAllCheck: true
    };
    _this.popVisible = {};
    _this.checkboxValue = {};
    _this.popCheckboxValue = {};
    _this.focusedIndex = null;
    return _this;
  }

  (0, _createClass2["default"])(TagGroup, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.props.model.addListener(this);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.props.model.removeListener(this);
    }
  }, {
    key: "setDataSource",
    value: function setDataSource(dataSource) {
      this.setState({
        popDataSource: dataSource
      });
    }
  }, {
    key: "setListenerState",
    value: function setListenerState(params, propertyName) {
      if (propertyName === 'table') return;
      var keyField = params.keyField,
          checkField = params.checkField,
          childrenField = params.childrenField,
          refer2BillKeyFieldMap = params.refer2BillKeyFieldMap,
          value = params.value;
      delete params.keyField;
      delete params.value;
      this.setState(params);
      this.state.keyField = keyField;
      this.state.checkField = checkField;
      this.state.childrenField = childrenField;
      this.state.billKeyField = refer2BillKeyFieldMap[this.state.popKeyField];
      this.setValue(value || []);
    }
  }, {
    key: "setValue",
    value: function setValue(data) {
      var _this2 = this;

      data = data || [];
      var _this$state = this.state,
          keyField = _this$state.keyField,
          checkField = _this$state.checkField,
          billKeyField = _this$state.billKeyField;
      var value = {};
      this.popCheckboxValue = {};
      data.length && data.forEach(function (element, index) {
        element.index = index;
        var key = element[keyField];
        if (!value[key]) value[key] = {
          children: []
        };
        _this2.checkboxValue[key] = element[checkField];
        value[key].children.push(element);
        _this2.popCheckboxValue[element[billKeyField]] = true;
      });
      this.setState({
        value: value
      });
    }
  }, {
    key: "handleOkClick",
    value: function handleOkClick(key) {
      var _this3 = this;

      var _this$state2 = this.state,
          popDataSource = _this$state2.popDataSource,
          checkField = _this$state2.checkField,
          popKeyField = _this$state2.popKeyField;
      var rows = [];
      popDataSource.forEach(function (item) {
        if (!_this3.popCheckboxValue[item[popKeyField]]) return;
        var row = {};
        row[checkField] = _this3.checkboxValue[key];
        rows.push(Object.assign(row, item));
      });
      this.props.model.setValue(rows, true);
      this.handleCancelClick(key);
    }
  }, {
    key: "handleCancelClick",
    value: function handleCancelClick(key) {
      this.popVisible[key] = false;
      this.setState({
        popVisible: false
      });
    }
  }, {
    key: "handleAddClick",
    value: function handleAddClick(key) {
      var _this$state3 = this.state,
          keyField = _this$state3.keyField,
          bill2ReferKeyFieldMap = _this$state3.bill2ReferKeyFieldMap;
      var referKeyField = bill2ReferKeyFieldMap[keyField];
      this.props.model.setFilter({
        isExtend: true,
        simpleVOs: [{
          field: referKeyField,
          op: 'eq',
          value1: key
        }]
      });
      this.props.model.browse(true);
      this.popVisible[key] = true;
      this.setState({
        popVisible: true,
        searchWord: ''
      });
    }
  }, {
    key: "onClose",
    value: function onClose(e, index) {
      e.preventDefault();
      this.props.model.deleteItem(index);
    }
  }, {
    key: "checkboxChange",
    value: function checkboxChange(key, checked) {
      var _this4 = this;

      var _this$state4 = this.state,
          checkField = _this$state4.checkField,
          value = _this$state4.value;
      var tagValue = value[key];

      if (tagValue) {
        var children = tagValue.children;

        if (children.length) {
          children.forEach(function (item) {
            _this4.props.model.setCellValue(item.index, checkField, checked);
          });
          return;
        }
      }

      this.checkboxValue[key] = checked;
      this.setState({
        popVisible: true
      });
    }
  }, {
    key: "handlePopCheckbox",
    value: function handlePopCheckbox(key, checked) {
      this.popCheckboxValue[key] = checked;
      this.setState({
        popVisible: true
      });
    }
  }, {
    key: "setFocused",
    value: function setFocused(index) {
      this.props.model.setFocusedRowIndex(index);
      this.focusedIndex = index;
      this.setState({
        popVisible: true
      });
    }
  }, {
    key: "clearSearchWord",
    value: function clearSearchWord() {
      this.setState({
        searchWord: ''
      });
    }
  }, {
    key: "renderImg",
    value: function renderImg(element) {
      var _this5 = this;

      var index = element.index;
      var childrenField = this.state.childrenField;
      var model = this.props.model.getEditRowModel().get(childrenField);

      if (index === this.focusedIndex) {
        return _react["default"].createElement(_picturebook["default"], {
          modelIndex: index,
          model: model
        });
      }

      return _react["default"].createElement(_picturebook["default"], {
        modelIndex: index,
        onDelete: function onDelete(indexes) {
          return _this5.onDelete(indexes, index);
        },
        readOnly: this.state.readOnly,
        bill2ReferKeyFieldMap: model.get('bill2ReferKeyFieldMap'),
        dataSource: element[childrenField],
        onClick: function onClick() {
          return _this5.setFocused(index);
        }
      });
    }
  }, {
    key: "onAllCheckChange",
    value: function onAllCheckChange(checked) {
      var _this6 = this;

      var popKeyField = this.state.popKeyField;

      var _popDataSource = this.getpopDataSource();

      _popDataSource.length && _popDataSource.forEach(function (item, index) {
        var popKey = item[popKeyField];

        _this6.handlePopCheckbox(popKey, checked);
      });
    }
  }, {
    key: "renderTagItem",
    value: function renderTagItem(value, checked) {
      var _this7 = this;

      var textField = this.state.textField;
      if (!value || !value.length) return null;
      var items = [];
      value.forEach(function (element) {
        items.push(_react["default"].createElement("div", {
          className: "pic-book-list"
        }, _react["default"].createElement(_baseui.Tag, {
          closable: !_this7.state.readOnly,
          onClose: function onClose(e) {
            return _this7.onClose(e, element.index);
          }
        }, element[textField]), checked ? _this7.renderImg(element) : null));
      });
      return items;
    }
  }, {
    key: "handleSearch",
    value: function handleSearch(value) {
      this.setState({
        searchWord: value
      });
    }
  }, {
    key: "handleChange",
    value: function handleChange(e) {
      this.setState({
        searchWord: e.target.value
      });
    }
  }, {
    key: "getpopDataSource",
    value: function getpopDataSource() {
      var _this$state5 = this.state,
          popDataSource = _this$state5.popDataSource,
          searchWord = _this$state5.searchWord;
      if (!popDataSource || !popDataSource.length) return [];
      var _popDataSource = [];

      if (!searchWord) {
        _popDataSource = popDataSource;
      } else if (searchWord && popDataSource.length) {
        popDataSource.forEach(function (v) {
          if (v.name.indexOf(searchWord) >= 0) {
            _popDataSource.push(v);
          }
        });
      }

      return _popDataSource;
    }
  }, {
    key: "getPopControl",
    value: function getPopControl(key) {
      var _this8 = this;

      var _this$state6 = this.state,
          popKeyField = _this$state6.popKeyField,
          bAllCheck = _this$state6.bAllCheck,
          searchWord = _this$state6.searchWord;

      var _popDataSource = this.getpopDataSource();

      var items = [];

      if (_popDataSource.length) {
        _popDataSource.forEach(function (item, index) {
          var popKey = item[popKeyField];
          var checked = _this8.popCheckboxValue[popKey];
          bAllCheck = bAllCheck && checked;
          items.push(_react["default"].createElement("li", null, _react["default"].createElement(_baseui.Checkbox, {
            checked: checked,
            onChange: function onChange(e) {
              return _this8.handlePopCheckbox(popKey, e.target.checked);
            }
          }, item.name)));
        });
      } else {
        items.push(_react["default"].createElement("li", {
          className: "no-item"
        }, "\u6CA1\u6709\u89C4\u683C\u503C"));
      }

      return _react["default"].createElement("div", {
        className: "ant-popover-filter-list"
      }, _react["default"].createElement("div", {
        className: "filter-list-search"
      }, _react["default"].createElement(Search, {
        value: searchWord,
        onSearch: function onSearch(value) {
          return _this8.handleSearch(value);
        },
        onChange: function onChange(e) {
          return _this8.handleChange(e);
        },
        onPressEnter: function onPressEnter(e) {
          return _this8.handleChange(e);
        }
      }), searchWord.length ? _react["default"].createElement("span", {
        onClick: function onClick() {
          return _this8.clearSearchWord();
        },
        className: "filter-list-search-delete"
      }, _react["default"].createElement("i", {
        className: "anticon anticon-cross-circle ant-cascader-picker-clear"
      })) : null), _react["default"].createElement("div", {
        className: "filter-list"
      }, _react["default"].createElement("ul", {
        className: "filter-list-content"
      }, items)), _react["default"].createElement("div", {
        className: "filter-btn-1",
        style: {
          position: "static"
        }
      }, _react["default"].createElement(_baseui.Checkbox, {
        checked: bAllCheck,
        onChange: function onChange(e) {
          return _this8.onAllCheckChange(e.target.checked);
        }
      }, "\u5168\u9009"), _react["default"].createElement(_baseui.Button, {
        type: "primary",
        onClick: function onClick() {
          return _this8.handleOkClick(key);
        }
      }, "\u4FDD\u5B58"), _react["default"].createElement(_baseui.Button, {
        type: "default",
        onClick: function onClick() {
          return _this8.handleCancelClick(key);
        }
      }, "\u53D6\u6D88")));
    }
  }, {
    key: "renderTag",
    value: function renderTag(item) {
      var _this9 = this;

      var value = item.value,
          text = item.text;
      var data = this.state.value[value] || {};
      var checked = this.checkboxValue[value];
      return _react["default"].createElement(_baseui.Row, null, _react["default"].createElement(_baseui.Checkbox, {
        checked: checked,
        disabled: this.state.readOnly,
        onChange: function onChange(e) {
          return _this9.checkboxChange(value, e.target.checked);
        }
      }, "\u56FE\u7247"), _react["default"].createElement("div", {
        className: "pic-book-title"
      }, _react["default"].createElement("span", null, text)), this.renderTagItem(data.children, checked), this.state.readOnly ? "" : _react["default"].createElement(_baseui.Popover, {
        arrowPointAtCenter: true,
        autoAdjustOverflow: true,
        placement: "bottom",
        visible: this.popVisible[value],
        content: this.getPopControl(value),
        trigger: "click",
        onClick: this.onPopClick,
        onVisibleChange: function onVisibleChange(visible) {
          return _this9.onVisibleChange(value, visible);
        }
      }, _react["default"].createElement(_baseui.Button, {
        className: "btn-add",
        onClick: function onClick() {
          return _this9.handleAddClick(value);
        }
      }, _react["default"].createElement(_baseui.Icon, {
        type: "jia"
      }), "\u6DFB\u52A0\u89C4\u683C\u503C")));
    }
  }, {
    key: "render",
    value: function render() {
      var _this10 = this;

      var dataSource = this.state.dataSource;
      if (!dataSource || !dataSource.length) return null;
      var items = [];
      dataSource.forEach(function (item) {
        items.push(_this10.renderTag(item));
      });
      return _react["default"].createElement("div", {
        className: "pic-book"
      }, items);
    }
  }]);
  return TagGroup;
}(_react.Component);

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