knk/es/components/business/common/ajax_manager_select.js

react components based on react

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
/**
 * 选择顾问
 */
import { fetch } from '../../../common/api';
import { log } from '../../../common/tool';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TreeSelect, Spin, message, Select, Row, Col } from 'antd';
var Option = Select.Option;
function buildGroupChildData(child) {
  if (!child || !Array.isArray(child)) return [];
  return child.map(function (item) {
    return {
      title: item.name,
      value: item.groupId,
      key: item.groupId,
      children: buildGroupChildData(item.child)
    };
  });
}

// 封装组件
var AjaxManagerSelect = /*#__PURE__*/function (_Component) {
  _inherits(AjaxManagerSelect, _Component);
  var _super = _createSuper(AjaxManagerSelect);
  function AjaxManagerSelect(props) {
    var _this;
    _classCallCheck(this, AjaxManagerSelect);
    _this = _super.call(this, props);
    _this.state = {
      loading: false,
      managerGroupData: [],
      managerData: []
    };
    _this.handleChangeGroup = _this.handleChangeGroup.bind(_assertThisInitialized(_this));
    _this.handleChangeManager = _this.handleChangeManager.bind(_assertThisInitialized(_this));
    // 是否已加载
    _this.open = true;
    return _this;
  }
  _createClass(AjaxManagerSelect, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var value = this.props.value;
      this.handleGetGroupList();
      if (value[0]) {
        this.handleGetManagerList(value[0]);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var value = prevProps.value;
      // 查询是否有变更组
      var newValue = this.props.value || [];
      if (value && newValue[0] !== value[0]) {
        this.handleGetManagerList(newValue[0]);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.open = false;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
        managerGroupData = _this$state.managerGroupData,
        managerData = _this$state.managerData,
        loading = _this$state.loading;
      var value = this.props.value;
      return /*#__PURE__*/React.createElement(Spin, {
        spinning: loading,
        className: "app-manager-select"
      }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
        span: 12,
        className: "p-r"
      }, /*#__PURE__*/React.createElement(TreeSelect, {
        showSearch: true,
        value: value ? value[0] : '',
        dropdownStyle: {
          maxHeight: 400,
          overflow: 'auto'
        },
        treeData: managerGroupData,
        placeholder: "\u9009\u62E9\u7528\u6237\u7EC4",
        onChange: this.handleChangeGroup,
        treeNodeFilterProp: "title",
        notFoundContent: "\u672A\u627E\u5230\u6570\u636E",
        allowClear: true
      })), /*#__PURE__*/React.createElement(Col, {
        span: 12
      }, /*#__PURE__*/React.createElement(Select, {
        showSearch: true,
        optionFilterProp: "children",
        value: value ? value[1] : '',
        onChange: this.handleChangeManager,
        placeholder: "\u9009\u62E9\u7528\u6237",
        notFoundContent: "\u672A\u627E\u5230\u7528\u6237",
        allowClear: true
      }, /*#__PURE__*/React.createElement(Option, {
        value: ""
      }, "\u9009\u62E9\u7528\u6237"), managerData.map(function (item) {
        return /*#__PURE__*/React.createElement(Option, {
          key: item.value,
          value: item.value
        }, item.label);
      })))));
    }
  }, {
    key: "handleGetGroupList",
    value: function handleGetGroupList() {
      var _this2 = this;
      var groupId = this.props.groupId;
      this.setState({
        loading: true
      });
      fetch('common-organize-list', {
        data: groupId || 179
      }, 'get', {
        timeout: 60 * 1000
      }).then(function (data) {
        var managerGroupData = data.data.map(function (group) {
          return {
            title: group.name,
            value: group.groupId,
            key: group.groupId,
            children: buildGroupChildData(group.child)
          };
        });
        managerGroupData.unshift({
          title: '选择用户组',
          value: '',
          key: 'all'
        });
        // 判断如果卸载,则不再设置数据
        if (!_this2.open) return;
        _this2.setState({
          loading: false,
          managerGroupData: managerGroupData
        });
      }).catch(function (err) {
        if (!_this2.open) return;
        _this2.setState({
          loading: false
        });
        log.error(err);
        message.error('获取用户组失败');
      });
    }
  }, {
    key: "handleGetManagerList",
    value: function handleGetManagerList(groupId) {
      var _this3 = this;
      if (!groupId) {
        this.setState({
          loading: false,
          managerData: []
        });
        return;
      }
      this.setState({
        loading: true,
        managerData: []
      });
      fetch('common-manager-list', {
        group_id: groupId
      }, 'get', {
        timeout: 60 * 1000
      }).then(function (data) {
        var managerData = data.data.map(function (item) {
          return {
            label: item.name,
            value: item.managerId,
            key: item.managerId
          };
        });
        // 判断如果卸载,则不再设置数据
        if (!_this3.open) return;
        _this3.setState({
          loading: false,
          managerData: managerData
        });
      }).catch(function (err) {
        if (!_this3.open) return;
        _this3.setState({
          loading: false
        });
        log.error(err);
        message.error('获取顾问列表失败');
      });
    }
  }, {
    key: "handleChangeManager",
    value: function handleChangeManager(managerId) {
      var _this$props = this.props,
        onChange = _this$props.onChange,
        value = _this$props.value;
      onChange(value.map(function (id, index) {
        if (index === 1) return managerId;
        return id;
      }));
    }
  }, {
    key: "handleChangeGroup",
    value: function handleChangeGroup(groupId) {
      var onChange = this.props.onChange;
      onChange([groupId, '']);
    }
  }]);
  return AjaxManagerSelect;
}(Component);
AjaxManagerSelect.propTypes = {
  groupId: PropTypes.string,
  value: PropTypes.array,
  onChange: PropTypes.func
};
export default AjaxManagerSelect;