maycur-business/lib/DepartmentSelectionModal/DepartmentTransfer/DepartmentTransfer.jsx

maycur business react components of web

"use strict";

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

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/select/style/css");

var _select = _interopRequireDefault(require("maycur-antd/lib/select"));

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 _DepartmentList = _interopRequireDefault(require("../DepartmentList"));

var _UserGroupList = _interopRequireDefault(require("../UserGroupList"));

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

var _constants = _interopRequireDefault(require("../../utils/constants"));

var _reactI18next = require("react-i18next");

var _i18next = _interopRequireDefault(require("i18next"));

var _mkTranslate = _interopRequireDefault(require("../../utils/mkTranslate"));

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

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 _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 DEPARTMENT_PICKER = _constants["default"].DEPARTMENT_PICKER;
var Search = _input["default"].Search;
var BreadItem = _breadcrumb["default"].Item;
var TabPane = _tabs["default"].TabPane;
var prefix = _utils["default"].prefixCls;
var Option = _select["default"].Option;

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

  function DepartmentTransfer(props) {
    var _this;

    _classCallCheck(this, DepartmentTransfer);

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

    _this.localeProcess = function () {
      _mkTranslate["default"].getNameSpace('DepartmentSelectionModal').then(function (t) {
        _this.setState({
          t: t,
          breads: [{
            name: t('departmentTransfer.addressBook'),
            code: null
          }]
        });
      });
    };

    _this.onSearchSelectChange = function (accurate) {
      return _this.setState({
        accurate: accurate
      });
    };

    _this.clearSearch = function () {
      // if (this.searchRef) {
      //     let dom = ReactDOM.findDOMNode(this.searchRef);
      //     let input = dom.getElementsByTagName("input")[0];
      //     input.value = "";
      // }
      _this.setState({
        searchKeyword: null,
        searchList: [],
        isSearching: false
      });
    };

    _this.setSelectList = function (selectList) {
      var onChange = _this.props.onChange;

      _this.setState({
        selectList: selectList
      });

      if (typeof onChange === 'function') {
        onChange(selectList);
      }
    };

    _this.fetchRootDepartment = function () {
      var rootSync = _this.props.rootSync;
      var t = _this.state.t;
      return new Promise(function (resolve, reject) {
        if (typeof rootSync === 'function') {
          rootSync().then(function (res) {
            if (res.code === 'ACK') {
              var roots = [];

              if (res.data && res.data.length > 0) {
                roots = res.data.map(function (item) {
                  return {
                    code: item.code,
                    name: item.name + t('departmentTransfer.root'),
                    type: 'DEPARTMENT',
                    hasChildren: false,
                    hasDepartments: false,
                    isRoot: true
                  };
                });
              }

              resolve(roots);
            } else {
              reject();
            }
          });
        } else {
          reject();
        }
      });
    };

    _this.setSourceList = function (departments, staffs) {
      var scope = _this.props.scope;

      var sourceList = _lodash["default"].unionBy([], departments, scope === DEPARTMENT_PICKER.SCOPE_DEPARTMENT ? [] : staffs, 'code');

      _this.setState({
        sourceList: sourceList
      });
    };

    _this.state = {
      sourceList: [],
      searchList: [],
      breads: [],
      selectList: props.selectList || [],
      allSelected: false,
      searchKeyword: null,
      sourceListLoading: false,
      searchListLoading: false,
      isSearching: false,
      t: _mkTranslate["default"].noop(),
      accurate: false
    };
    _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.scrollBottom = _this.scrollBottom.bind(_assertThisInitialized(_this));

    _this.localeProcess();

    _this.selectBefore = _react["default"].createElement(_select["default"], {
      defaultValue: false,
      onChange: _this.onSearchSelectChange,
      dropdownClassName: 'ant-dept-search-dropdown',
      dropdownMatchSelectWidth: true
    }, _react["default"].createElement(Option, {
      value: false
    }, "\u6A21\u7CCA\u641C\u7D22"), _react["default"].createElement(Option, {
      value: true
    }, "\u7CBE\u786E\u641C\u7D22"));
    return _this;
  }

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

      if (value) {
        this.fetchSearchList(value);
      } else {
        this.setState({
          searchList: [],
          isSearching: false
        });
      }
    }
  }, {
    key: "goToBread",
    value: function goToBread(bread) {
      var breads = this.state.breads;
      breads = _lodash["default"].dropRightWhile(breads, function (item) {
        return item.code !== bread.code;
      });
      this.setState({
        breads: breads
      });
      this.fetchSourceList(bread.code);
    }
  }, {
    key: "unSelectItem",
    value: function unSelectItem(item) {
      var selectList = this.state.selectList;

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

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

      this.setSelectList(selectList);
    }
  }, {
    key: "clearAll",
    value: function clearAll() {
      this.setSelectList([]);
    }
  }, {
    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 _this$props = this.props,
          maxSelectLength = _this$props.maxSelectLength,
          onChange = _this$props.onChange;
      var selectList = this.state.selectList;
      /** 单选 */

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

        if (typeof onChange === 'function') {
          onChange(added);
        }

        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.code !== o.code;
          });
        });
      }

      this.setSelectList(selectList);
      setTimeout(this.scrollBottom);
    }
  }, {
    key: "onDrillDown",
    value: function onDrillDown(item) {
      var breads = this.state.breads;
      breads.push(item);
      this.setState({
        breads: breads
      });
      this.fetchSourceList(item.code);
    } // 获取根部门

  }, {
    key: "fetchSourceList",
    value: function fetchSourceList(code, level) {
      var _this2 = this;

      var fetchDepartmentChildren = this.props.fetchDepartmentChildren;
      if (typeof fetchDepartmentChildren !== 'function') return;
      this.setState({
        sourceListLoading: true
      });
      fetchDepartmentChildren(code).then(function (data) {
        _this2.setState({
          sourceListLoading: false
        });

        if (_utils["default"].apiOK(data)) {
          var _data$data = data.data,
              departments = _data$data.departments,
              staffs = _data$data.staffs; // 1.先将获取到的部门 人员信息更新到视图

          _lodash["default"].forEach(departments, function (item) {
            item.type = DEPARTMENT_PICKER.DEPARTMENT;
          });

          _lodash["default"].forEach(staffs, function (item) {
            item.type = DEPARTMENT_PICKER.STAFF;
          });

          _this2.setSourceList(departments, staffs); // 2.再插入根节点 如果是第一层


          if (level === 1) {
            _this2.fetchRootDepartment().then(function (roots) {
              departments = [].concat(_toConsumableArray(roots), _toConsumableArray(departments));

              _this2.setSourceList(departments, staffs);
            });
          }
        }
      }, function () {
        _this2.setState({
          sourceListLoading: false
        });
      });
    }
  }, {
    key: "fetchSearchList",
    value: function fetchSearchList(keyword) {
      var _this3 = this;

      var _this$props2 = this.props,
          scope = _this$props2.scope,
          searchDepartmentChildren = _this$props2.searchDepartmentChildren;
      if (typeof searchDepartmentChildren !== 'function') return;
      this.setState({
        searchListLoading: true
      });
      searchDepartmentChildren({
        keyword: keyword,
        onlyEnable: true,
        accurate: this.state.accurate
      }, {
        pageId: DEPARTMENT_PICKER.SEARCH_LIST
      }).then(function (data) {
        _this3.setState({
          searchListLoading: false
        });

        if (_utils["default"].apiOK(data)) {
          var _data$data2 = data.data,
              departments = _data$data2.departments,
              staffs = _data$data2.staffs;

          _lodash["default"].forEach(departments, function (item) {
            item.type = DEPARTMENT_PICKER.DEPARTMENT;
          });

          _lodash["default"].forEach(staffs, function (item) {
            item.type = DEPARTMENT_PICKER.STAFF;
          });

          var searchList = _lodash["default"].unionBy([], scope === DEPARTMENT_PICKER.SCOPE_STAFF ? [] : departments, scope === DEPARTMENT_PICKER.SCOPE_DEPARTMENT ? [] : staffs, "code");

          _this3.setState({
            searchList: searchList
          });
        }
      }, function () {
        _this3.setState({
          searchListLoading: false
        });
      });
    }
  }, {
    key: "scrollBottom",
    value: function scrollBottom() {
      if (this.selectListRef) {
        var dom = _reactDom["default"].findDOMNode(this.selectListRef);

        dom.scrollTop = dom.scrollHeight;
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      var breads = this.state.breads;
      var last = _lodash["default"].last(breads) || {};
      this.fetchSourceList(last.code, 1);
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (this.props.selectList !== nextProps.selectList) {
        this.setState({
          selectList: nextProps.selectList
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$state = this.state,
          sourceList = _this$state.sourceList,
          searchList = _this$state.searchList,
          selectList = _this$state.selectList,
          breads = _this$state.breads,
          searchKeyword = _this$state.searchKeyword,
          sourceListLoading = _this$state.sourceListLoading,
          searchListLoading = _this$state.searchListLoading,
          isSearching = _this$state.isSearching,
          t = _this$state.t,
          accurate = _this$state.accurate;
      var _this$props3 = this.props,
          scope = _this$props3.scope,
          justShowUserGroup = _this$props3.justShowUserGroup,
          isShowUserGroup = _this$props3.isShowUserGroup,
          maxSelectLength = _this$props3.maxSelectLength,
          fetchUserGroup = _this$props3.fetchUserGroup,
          leftAlertText = _this$props3.leftAlertText,
          renderAddition = _this$props3.renderAddition,
          includeChildDept = _this$props3.includeChildDept;
      var placeholder = t('departmentTransfer.placeholder');

      switch (scope) {
        case DEPARTMENT_PICKER.SCOPE_DEPARTMENT:
          break;

        case DEPARTMENT_PICKER.SCOPE_STAFF:
          placeholder = t('departmentTransfer.staffPlaceholder');
          break;

        default:
          break;
      }

      return _react["default"].createElement("div", {
        className: "".concat(prefix, "-department-picker-transfer")
      }, _react["default"].createElement("div", {
        className: 'transfer-content'
      }, _react["default"].createElement("div", {
        className: 'left'
      }, _react["default"].createElement(_tabs["default"], {
        defaultActiveKey: "DEPT"
      }, !justShowUserGroup ? _react["default"].createElement(TabPane, {
        tab: t('departmentTransfer.addressBook'),
        key: "DEPT"
      }, leftAlertText && _react["default"].createElement(_alert["default"], {
        message: leftAlertText,
        showIcon: true
      }), _react["default"].createElement("div", {
        className: "search-box".concat(searchKeyword ? ' searching' : '')
      }, _react["default"].createElement(Search, {
        addonBefore: this.selectBefore,
        value: searchKeyword,
        placeholder: accurate ? '搜索部门和人员名称' : placeholder,
        onChange: function onChange(e) {
          return _this4.setState({
            searchKeyword: e.target.value
          });
        },
        onSearch: this.onSearch
      }), searchKeyword ? _react["default"].createElement("span", {
        className: 'fm fm-cross',
        onClick: this.clearSearch
      }) : null), isSearching ? _react["default"].createElement("div", {
        className: 'search-list'
      }, _react["default"].createElement(_DepartmentList["default"], _extends({
        loading: searchListLoading
      }, this.props, {
        scope: scope,
        canDrillDown: false,
        sourceList: searchList,
        selectList: selectList,
        includeChildDept: includeChildDept,
        onOutput: this.onOutput
      }))) : _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() {
            _this4.goToBread(bread);
          }
        }, bread.name) : _react["default"].createElement("span", null, bread.name));
      })), _react["default"].createElement(_DepartmentList["default"], _extends({
        loading: sourceListLoading
      }, this.props, {
        scope: scope,
        sourceList: sourceList,
        selectList: selectList,
        includeChildDept: includeChildDept,
        onOutput: this.onOutput,
        onDrillDown: this.onDrillDown
      })))) : null, justShowUserGroup || isShowUserGroup ? _react["default"].createElement(TabPane, {
        tab: t('departmentTransfer.byUserGroup'),
        key: "USER_GROUP"
      }, _react["default"].createElement("div", {
        className: 'user-group-wrapper'
      }, _react["default"].createElement(_UserGroupList["default"], {
        selectList: selectList,
        onOutput: this.onOutput,
        fetchUserGroup: fetchUserGroup
      }))) : null)), _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'
      }, t('departmentTransfer.barLabel')), justShowUserGroup || scope === DEPARTMENT_PICKER.SCOPE_STAFF ? null : _react["default"].createElement("span", {
        className: 'dep-count'
      }, t('departmentTransfer.department'), _react["default"].createElement("span", {
        className: 'strong'
      }, _lodash["default"].filter(selectList, {
        type: DEPARTMENT_PICKER.DEPARTMENT
      }).length)), justShowUserGroup || scope === DEPARTMENT_PICKER.SCOPE_DEPARTMENT ? null : _react["default"].createElement("span", {
        className: 'staff-count'
      }, t('departmentTransfer.staff'), _react["default"].createElement("span", {
        className: 'strong'
      }, _lodash["default"].filter(selectList, {
        type: DEPARTMENT_PICKER.STAFF
      }).length)), justShowUserGroup || isShowUserGroup ? _react["default"].createElement("span", {
        className: 'staff-count'
      }, t('departmentTransfer.userGroup'), _react["default"].createElement("span", {
        className: 'strong'
      }, _lodash["default"].filter(selectList, {
        type: DEPARTMENT_PICKER.USER_GROUP
      }).length)) : null, _react["default"].createElement("span", {
        className: 'clear-all'
      }, _react["default"].createElement("span", {
        className: 'btn',
        onClick: this.clearAll
      }, t('departmentTransfer.clear')))), maxSelectLength > 0 ? _react["default"].createElement(_alert["default"], {
        message: _react["default"].createElement("span", null, _react["default"].createElement(_reactI18next.Trans, {
          i18n: _i18next["default"],
          i18nKey: "departmentTransfer.maxLength",
          ns: "DepartmentSelectionModal",
          values: {
            maxSelectLength: maxSelectLength
          },
          components: [_react["default"].createElement("span", null), _react["default"].createElement("span", {
            className: "strong"
          })],
          children: "\u6700\u591A\u53EA\u80FD\u9009\u62E9 <span className={'strong'}>{{ maxSelectLength }} </span>\u9879"
        })),
        className: "right-warn-alert",
        type: "warning"
      }) : null, _react["default"].createElement(_list["default"], {
        size: "small",
        dataSource: selectList,
        ref: function ref(_ref) {
          _this4.selectListRef = _ref;
        },
        renderItem: function renderItem(item) {
          return _react["default"].createElement(_list["default"].Item, {
            key: item.code
          }, _react["default"].createElement("span", {
            className: 'item-name'
          }, item.type === DEPARTMENT_PICKER.STAFF ? _react["default"].createElement("span", {
            className: 'fm fm-employee'
          }) : item.type === DEPARTMENT_PICKER.DEPARTMENT ? _react["default"].createElement("span", {
            className: 'fm fm-cube'
          }) : _react["default"].createElement("span", {
            className: 'fm fm-user-group'
          }), _react["default"].createElement("span", {
            className: 'name'
          }, item.name, renderAddition && renderAddition(item))), _react["default"].createElement("span", {
            className: 'fm fm-trash',
            onClick: function onClick(e) {
              e.stopPropagation();

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

  return DepartmentTransfer;
}(_react.Component);

DepartmentTransfer.defaultProps = {
  justShowUserGroup: false
};
var _default = DepartmentTransfer;
exports["default"] = _default;