knk-react/lib/components/basic/form_item/ajax_select.js

react components based on react

"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _antd = require("antd");

var _api = require("@/common/api");

var _tool = require("@/common/tool");

/**
 * 异步选择组件
 */
var Option = _antd.Select.Option;

//封装组件
var AjaxSelect = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(AjaxSelect, _Component);

  var _super = (0, _createSuper2.default)(AjaxSelect);

  function AjaxSelect(props) {
    var _this;

    (0, _classCallCheck2.default)(this, AjaxSelect);
    _this = _super.call(this, props);
    _this.state = {
      loading: false,
      listData: []
    };
    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)(_this)); // 是否已加载

    _this.open = true;
    return _this;
  }

  (0, _createClass2.default)(AjaxSelect, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.handleGetList();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.open = false;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state = this.state,
          listData = _this$state.listData,
          loading = _this$state.loading;
      var _this$props = this.props,
          value = _this$props.value,
          listName = _this$props.listName,
          listValueKey = _this$props.listValueKey,
          listNameKey = _this$props.listNameKey,
          disabled = _this$props.disabled;
      var selectValue;

      if (Array.isArray(value)) {
        selectValue = value[0];
      } else {
        selectValue = value;
      }

      return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
        spinning: loading,
        className: "app-ajax-select"
      }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
        showSearch: true,
        optionFilterProp: "children",
        value: selectValue,
        onChange: this.handleChange,
        placeholder: '选择' + listName,
        notFoundContent: '未找到' + listName,
        allowClear: true,
        disabled: disabled
      }, /*#__PURE__*/_react.default.createElement(Option, {
        value: "",
        title: '选择' + listName
      }, "\u9009\u62E9", listName), listData.map(function (item, index) {
        return /*#__PURE__*/_react.default.createElement(Option, {
          key: index,
          value: item[listValueKey].toString(),
          title: item[listNameKey]
        }, item[listNameKey]);
      })));
    }
  }, {
    key: "handleGetList",
    value: function handleGetList() {
      var _this2 = this;

      var _this$props2 = this.props,
          apiName = _this$props2.apiName,
          apiData = _this$props2.apiData,
          apiMethod = _this$props2.apiMethod,
          listName = _this$props2.listName;
      this.setState({
        loading: true
      });
      (0, _api.fetch)(apiName, apiData, apiMethod).then(function (data) {
        // 判断如果卸载,则不再设置数据
        if (!_this2.open) return;

        _this2.setState({
          loading: false,
          listData: data.data
        });
      }).catch(function (err) {
        _tool.log.error(err);

        _antd.message.error('获取' + listName + '失败:' + err.message);
      });
    }
  }, {
    key: "handleChange",
    value: function handleChange(key) {
      var _this$props3 = this.props,
          value = _this$props3.value,
          listValueKey = _this$props3.listValueKey,
          listNameKey = _this$props3.listNameKey,
          onChange = _this$props3.onChange;
      var listData = this.state.listData;

      if (Array.isArray(value)) {
        if (!key) return onChange(['', '']);
        var label;
        listData.some(function (item) {
          if (item[listValueKey].toString() === key) {
            label = item[listNameKey];
            return true;
          } else return false;
        });
        onChange([key, label]);
      } else {
        onChange(key || '');
      }
    }
  }]);
  return AjaxSelect;
}(_react.Component);

AjaxSelect.propTypes = {
  apiName: _propTypes.default.string.isRequired,
  // API请求名,由于直接诶读取data.data的数组数据,所以该API不能使用分页
  apiData: _propTypes.default.object,
  // api请求附加的数据
  apiMethod: _propTypes.default.string,
  // api请求method
  listName: _propTypes.default.string.isRequired,
  // 缺省列表名称
  listValueKey: _propTypes.default.string.isRequired,
  // 列表值的key值
  listNameKey: _propTypes.default.string.isRequired,
  // 列表名称key值
  value: _propTypes.default.oneOfType([// 值,支持字符串和数组形式
  _propTypes.default.string, // key值
  _propTypes.default.array // [key, label]形式
  ]),
  onChange: _propTypes.default.func,
  // 获取值变化函数
  disabled: _propTypes.default.bool
};
var _default = AjaxSelect;
exports.default = _default;