maycur-business/lib/ManagePicker/ManageSelectionModal/ManageSelectionModal.jsx

maycur business react components of web

"use strict";

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

require("maycur-antd/lib/modal/style/css");

var _modal = _interopRequireDefault(require("maycur-antd/lib/modal"));

require("maycur-antd/lib/list/style/css");

var _list = _interopRequireDefault(require("maycur-antd/lib/list"));

require("maycur-antd/lib/alert/style/css");

var _alert = _interopRequireDefault(require("maycur-antd/lib/alert"));

require("maycur-antd/lib/popover/style/css");

var _popover = _interopRequireDefault(require("maycur-antd/lib/popover"));

require("maycur-antd/lib/switch/style/css");

var _switch = _interopRequireDefault(require("maycur-antd/lib/switch"));

require("maycur-antd/lib/tabs/style/css");

var _tabs = _interopRequireDefault(require("maycur-antd/lib/tabs"));

require("maycur-antd/lib/breadcrumb/style/css");

var _breadcrumb = _interopRequireDefault(require("maycur-antd/lib/breadcrumb"));

require("maycur-antd/lib/input/style/css");

var _input = _interopRequireDefault(require("maycur-antd/lib/input"));

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _lodash = _interopRequireDefault(require("lodash"));

var _ManageList = _interopRequireDefault(require("../ManageList"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var prefix = _utils["default"].prefixCls;
var Search = _input["default"].Search;
var BreadItem = _breadcrumb["default"].Item;
var TabPane = _tabs["default"].TabPane;

var ManageSelectionModal =
/*#__PURE__*/
function (_Component) {
  _inherits(ManageSelectionModal, _Component);

  function ManageSelectionModal(props) {
    var _this;

    _classCallCheck(this, ManageSelectionModal);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ManageSelectionModal).call(this, props));

    _this.onCancel = function () {
      var promise = _this.props.promise;
      promise.reject();
    };

    _this.getSourceParams = function (categoryCode) {
      var _this$props = _this.props,
          pageSize = _this$props.pageSize,
          paging = _this$props.paging;
      var _this$state = _this.state,
          pageNo = _this$state.pageNo,
          breads = _this$state.breads; // 点击加载更多，categoryCode从breads中取

      var _categoryCode = categoryCode || breads[breads.length - 1].code;

      if (!paging) return {
        categoryCode: _categoryCode
      };
      var _itemPrevPageNo = pageNo[_categoryCode || 'root'];

      var _pageNo = _itemPrevPageNo ? _itemPrevPageNo + 1 : 1;

      return {
        categoryCode: _categoryCode,
        pageSize: pageSize,
        pageNo: _pageNo
      };
    };

    _this.getSearchParams = function (keyword) {
      var _this$props2 = _this.props,
          pageSize = _this$props2.pageSize,
          paging = _this$props2.paging;
      if (!paging) return {
        keyword: keyword
      };
      var pageNo = 1; // 点击加载更多，keyword为undefined

      if (keyword === undefined) {
        pageNo = _this.state.searchPageNo + 1;
        keyword = _this.state.searchKeyword;
      }

      return {
        pageNo: pageNo,
        pageSize: pageSize,
        keyword: keyword
      };
    };

    _this.onChangeSearchKeyword = function (e) {
      var value = e.target.value;

      _this.setState({
        searchKeyword: value
      }, function () {
        return _this.fetchSearchList(value);
      });
    };

    _this.onSwitchChange = function (checked) {
      _this.setState({
        switchChecked: checked
      });
    };

    _this.state = {
      sourceList: [],
      searchList: [],
      breads: [{
        name: props.title,
        code: null
      }],
      selectList: props.selectList || [],
      allSelected: false,
      searchKeyword: null,
      pageNo: {},
      loadMore: false,
      categoryCode: null,
      switchChecked: props.switchChecked
    };
    _this.onSearch = _this.onSearch.bind(_assertThisInitialized(_this));
    _this.clearSearch = _this.clearSearch.bind(_assertThisInitialized(_this));
    _this.closeSelf = _this.closeSelf.bind(_assertThisInitialized(_this));
    _this.unSelectItem = _this.unSelectItem.bind(_assertThisInitialized(_this));
    _this.clearAll = _this.clearAll.bind(_assertThisInitialized(_this));
    _this.onOutput = _this.onOutput.bind(_assertThisInitialized(_this));
    _this.fetchSourceList = _this.fetchSourceList.bind(_assertThisInitialized(_this));
    _this.fetchSearchList = _this.fetchSearchList.bind(_assertThisInitialized(_this));
    _this.onDrillDown = _this.onDrillDown.bind(_assertThisInitialized(_this));
    _this.goToBread = _this.goToBread.bind(_assertThisInitialized(_this));
    _this.onOk = _this.onOk.bind(_assertThisInitialized(_this));
    _this.scrollBottom = _this.scrollBottom.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ManageSelectionModal, [{
    key: "onSearch",
    value: function onSearch(value) {
      value = _lodash["default"].trim(value);
      this.setState({
        searchKeyword: value
      });

      if (value) {
        this.fetchSearchList(value);
      } else {
        this.setState({
          searchList: []
        });
      }
    }
  }, {
    key: "clearSearch",
    value: function clearSearch() {
      if (this.searchRef) {
        var dom = _reactDom["default"].findDOMNode(this.searchRef);

        var input = dom.getElementsByTagName("input")[0];
        input.value = "";
      }

      this.setState({
        searchKeyword: null,
        searchList: []
      });
    }
  }, {
    key: "goToBread",
    value: function goToBread(bread) {
      var _this2 = this;

      var codeAlias = this.props.codeAlias;
      var breads = this.state.breads;
      breads = _lodash["default"].dropRightWhile(breads, function (item) {
        return item[codeAlias] !== bread[codeAlias];
      });
      this.setState(function (_ref) {
        var pageNo = _ref.pageNo;
        return {
          breads: breads,
          pageNo: _objectSpread({}, pageNo, _defineProperty({}, bread.code || 'root', null))
        };
      }, function () {
        return _this2.fetchSourceList(bread[codeAlias], bread.rootCode);
      });
    }
  }, {
    key: "unSelectItem",
    value: function unSelectItem(item) {
      var codeAlias = this.props.codeAlias;
      var selectList = this.state.selectList;

      var idx = _lodash["default"].findIndex(selectList, _defineProperty({}, codeAlias, item[codeAlias]));

      if (idx !== -1) {
        selectList.splice(idx, 1);
      }

      this.setState({
        selectList: selectList
      });
    }
  }, {
    key: "clearAll",
    value: function clearAll() {
      this.setState({
        selectList: []
      });
    }
  }, {
    key: "closeSelf",
    value: function closeSelf() {
      var onCancel = this.props.onCancel;

      if (typeof onCancel === "function") {
        onCancel();
      }
    }
  }, {
    key: "onOutput",
    value: function onOutput(result) {
      var added = result.added,
          allSelected = result.allSelected,
          itemSelected = result.itemSelected;
      var selectList = this.state.selectList;
      var _this$props3 = this.props,
          maxSelectLength = _this$props3.maxSelectLength,
          codeAlias = _this$props3.codeAlias;
      /** 单选 */

      if (!maxSelectLength || maxSelectLength === 1) {
        this.setState({
          selectList: added
        });
        setTimeout(this.scrollBottom);
        return;
      }

      if (!allSelected || itemSelected) {
        selectList = _lodash["default"].unionWith(selectList, added, _utils["default"].bizEquals);
      } else {
        selectList = _lodash["default"].filter(selectList, function (o) {
          return added.every(function (i) {
            return i[codeAlias] !== o[codeAlias];
          });
        });
      }

      this.setState({
        selectList: selectList
      });
      setTimeout(this.scrollBottom);
    }
  }, {
    key: "onDrillDown",
    value: function onDrillDown(item) {
      var _this3 = this;

      var codeAlias = this.props.codeAlias;
      var breads = this.state.breads;
      breads.push(item);
      this.setState(function (_ref2) {
        var pageNo = _ref2.pageNo;
        return {
          breads: breads,
          pageNo: _objectSpread({}, pageNo, _defineProperty({}, item.code || 'root', null))
        };
      }, function () {
        return _this3.fetchSourceList(item[codeAlias], item.rootCode);
      });
    }
  }, {
    key: "onOk",
    value: function onOk() {
      var selectList = this.state.selectList;
      var promise = this.props.promise;

      if (promise && typeof promise.resolve === "function") {
        promise.resolve(selectList);
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.fetchSourceList();
    }
  }, {
    key: "fetchSourceList",
    value: function fetchSourceList(categoryCode, rootCode) {
      var _this4 = this;

      var _this$props4 = this.props,
          fetchSourceList = _this$props4.fetchSourceList,
          paging = _this$props4.paging,
          pageSize = _this$props4.pageSize;

      var _this$getSourceParams = this.getSourceParams(categoryCode),
          _categoryCode = _this$getSourceParams.categoryCode,
          pageParams = _objectWithoutProperties(_this$getSourceParams, ["categoryCode"]);

      fetchSourceList && fetchSourceList(_categoryCode, pageParams).then(function (sourceList) {
        var loadMore = false,
            _sourceList = sourceList;

        if (paging && sourceList && sourceList.length >= pageSize) {
          loadMore = true;
        } // 加载更多，sourceList合并


        if (_categoryCode === _this4.state.categoryCode) {
          _sourceList = [].concat(_toConsumableArray(_this4.state.sourceList || []), _toConsumableArray(sourceList || []));
        }

        _this4.setState(function (_ref3) {
          var pageNo = _ref3.pageNo;
          return {
            sourceList: _sourceList,
            loadMore: loadMore,
            pageNo: paging ? _objectSpread({}, pageNo, _defineProperty({}, _categoryCode || 'root', pageParams.pageNo)) : {},
            categoryCode: _categoryCode
          };
        }, function () {
          console.log('after', _this4.state.pageNo);
        });
      });
    }
  }, {
    key: "fetchSearchList",
    value: function fetchSearchList(keyword) {
      var _this5 = this;

      var _this$props5 = this.props,
          fetchSearchList = _this$props5.fetchSearchList,
          pageSize = _this$props5.pageSize,
          paging = _this$props5.paging;
      var isLoadMoreBtnClick = keyword === undefined;

      var _this$getSearchParams = this.getSearchParams(keyword),
          _keyword = _this$getSearchParams.keyword,
          pageParams = _objectWithoutProperties(_this$getSearchParams, ["keyword"]);

      fetchSearchList && fetchSearchList(_keyword, pageParams).then(function (searchList) {
        var _searchList = searchList,
            loadMore = false;

        if (paging && searchList && searchList.length >= pageSize) {
          loadMore = true;
        }

        isLoadMoreBtnClick && (_searchList = [].concat(_toConsumableArray(_this5.state.searchList || []), _toConsumableArray(searchList || [])));

        _this5.setState({
          searchList: _searchList,
          searchPageNo: pageParams.pageNo,
          loadMore: loadMore
        });
      });
    }
  }, {
    key: "scrollBottom",
    value: function scrollBottom() {
      if (this.selectListRef) {
        var dom = _reactDom["default"].findDOMNode(this.selectListRef);

        dom.scrollTop = dom.scrollHeight;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      var _this$state2 = this.state,
          sourceList = _this$state2.sourceList,
          searchList = _this$state2.searchList,
          selectList = _this$state2.selectList,
          breads = _this$state2.breads,
          searchKeyword = _this$state2.searchKeyword,
          loadMore = _this$state2.loadMore,
          switchChecked = _this$state2.switchChecked;
      var _this$props6 = this.props,
          scope = _this$props6.scope,
          title = _this$props6.title,
          maxSelectLength = _this$props6.maxSelectLength,
          sourceListLoading = _this$props6.sourceListLoading,
          searchListLoading = _this$props6.searchListLoading,
          nameAlias = _this$props6.nameAlias,
          codeAlias = _this$props6.codeAlias,
          isSwitch = _this$props6.isSwitch,
          switchDisabled = _this$props6.switchDisabled,
          paging = _this$props6.paging;

      var modalTitle = _react["default"].createElement("div", {
        className: "title"
      }, _react["default"].createElement("div", null, '选择' + title), isSwitch && _react["default"].createElement("div", {
        className: "switch"
      }, _react["default"].createElement(_switch["default"], {
        checked: switchChecked,
        disabled: switchDisabled,
        onChange: this.onSwitchChange
      }), _react["default"].createElement("span", null, "\u9009\u62E9\u7684\u7236\u5206\u7C7B\u5305\u542B\u5176\u5B50\u5206\u7C7B"), _react["default"].createElement(_popover["default"], {
        placement: "right",
        content: _react["default"].createElement("div", {
          className: "".concat(prefix, "-popover")
        }, "\u5F00\u5173\u5F00\u542F\u540E\uFF0C\u9009\u62E9\u7684\u7236\u5206\u7C7B\u4F1A\u5305\u542B\u5176\u6240\u6709\u5B50\u5206\u7C7B\uFF0C\u5B59\u5206\u7C7B......")
      }, _react["default"].createElement("span", {
        className: "fm fm-question"
      }))));

      return _react["default"].createElement(_modal["default"], _extends({}, this.props, {
        title: modalTitle,
        onOk: this.onOk,
        destroyOnClose: true,
        maskClosable: false,
        keyboard: false,
        centered: true,
        className: "".concat(prefix, "-manage-select"),
        visible: true
      }), _react["default"].createElement("div", {
        className: 'content'
      }, _react["default"].createElement("div", {
        className: 'left'
      }, _react["default"].createElement(_tabs["default"], {
        defaultActiveKey: "DEPT"
      }, _react["default"].createElement(TabPane, {
        tab: title,
        key: "DEPT"
      }, _react["default"].createElement("div", {
        className: 'search-box'
      }, _react["default"].createElement(Search, {
        placeholder: "\u8F93\u5165\u5173\u952E\u5B57\uFF0C\u6309\u56DE\u8F66\u641C\u7D22",
        ref: function ref(_ref4) {
          _this6.searchRef = _ref4;
        },
        value: searchKeyword,
        onChange: this.onChangeSearchKeyword,
        onSearch: this.onSearch,
        type: "gray"
      }), searchKeyword ? _react["default"].createElement("span", {
        className: 'fm fm-cross',
        onClick: this.clearSearch
      }) : null), searchKeyword ? _react["default"].createElement("div", {
        className: 'search-list'
      }, _react["default"].createElement(_ManageList["default"], _extends({
        loading: searchListLoading
      }, this.props, {
        scope: scope,
        canDrillDown: false,
        sourceList: searchList,
        selectList: selectList,
        onOutput: this.onOutput,
        nameAlias: nameAlias,
        codeAlias: codeAlias,
        paging: paging,
        loadMore: loadMore,
        loadMoreFunc: this.fetchSearchList
      }))) : _react["default"].createElement("div", {
        className: 'source-list'
      }, _react["default"].createElement(_breadcrumb["default"], null, breads.map(function (bread, idx) {
        return _react["default"].createElement(BreadItem, {
          key: bread.code
        }, idx !== breads.length - 1 ? _react["default"].createElement("a", {
          href: "javascript:void(0)",
          onClick: function onClick() {
            _this6.goToBread(bread);
          }
        }, bread.name) : _react["default"].createElement("span", null, bread.name));
      })), _react["default"].createElement(_ManageList["default"], _extends({}, this.props, {
        loading: sourceListLoading,
        scope: scope,
        sourceList: sourceList,
        selectList: selectList,
        onOutput: this.onOutput,
        onDrillDown: this.onDrillDown,
        paging: paging,
        loadMore: loadMore,
        loadMoreFunc: this.fetchSourceList,
        nameAlias: nameAlias,
        codeAlias: codeAlias
      })))))), _react["default"].createElement("div", {
        className: 'middle'
      }, _react["default"].createElement("span", {
        className: "fm fm-angle-right"
      })), _react["default"].createElement("div", {
        className: 'right'
      }, _react["default"].createElement("div", {
        className: 'status-bar'
      }, _react["default"].createElement("span", {
        className: 'bar-label'
      }, "\u5DF2\u9009\uFF1A"), _react["default"].createElement("span", {
        className: 'dep-count'
      }, title, _react["default"].createElement("span", {
        className: 'strong'
      }, selectList.length)), _react["default"].createElement("span", {
        className: 'clear-all'
      }, _react["default"].createElement("span", {
        className: 'btn',
        onClick: this.clearAll
      }, "\u6E05\u7A7A"))), maxSelectLength > 0 ? _react["default"].createElement(_alert["default"], {
        message: _react["default"].createElement("span", null, "\u6700\u591A\u53EA\u80FD\u9009\u62E9", _react["default"].createElement("span", {
          className: "strong"
        }, maxSelectLength), "\u9879"),
        type: "warning"
      }) : null, _react["default"].createElement(_list["default"], {
        size: "small",
        dataSource: selectList,
        ref: function ref(_ref5) {
          _this6.selectListRef = _ref5;
        },
        renderItem: function renderItem(item) {
          return _react["default"].createElement(_list["default"].Item, {
            key: item.code
          }, _react["default"].createElement("span", {
            className: 'item-name'
          }, _react["default"].createElement("span", {
            className: item.icon
          }), item.name), _react["default"].createElement("span", {
            className: 'fm fm-trash',
            onClick: function onClick(e) {
              e.stopPropagation();

              _this6.unSelectItem(item);
            }
          }));
        }
      }))));
    }
  }]);

  return ManageSelectionModal;
}(_react.Component); // function stateMapProp({ app }) {
//     return {
//         sourceListLoading: app.loading[MANAGE_PICKER.SOURCE_LIST],
//         searchListLoading: app.loading[MANAGE_PICKER.SEARCH_LIST]
//     };
// }


var _default = ManageSelectionModal;
exports["default"] = _default;