knk-react/es/components/basic/form_item/ajax_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 React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Spin, message, Select } from 'antd';
var Option = Select.Option;
import { fetch } from '@/common/api';
import { log } from '@/common/tool'; //封装组件

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

  var _super = _createSuper(AjaxSelect);

  function AjaxSelect(props) {
    var _this;

    _classCallCheck(this, AjaxSelect);

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

    _this.open = true;
    return _this;
  }

  _createClass(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.createElement(Spin, {
        spinning: loading,
        className: "app-ajax-select"
      }, /*#__PURE__*/React.createElement(Select, {
        showSearch: true,
        optionFilterProp: "children",
        value: selectValue,
        onChange: this.handleChange,
        placeholder: '选择' + listName,
        notFoundContent: '未找到' + listName,
        allowClear: true,
        disabled: disabled
      }, /*#__PURE__*/React.createElement(Option, {
        value: "",
        title: '选择' + listName
      }, "\u9009\u62E9", listName), listData.map(function (item, index) {
        return /*#__PURE__*/React.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
      });
      fetch(apiName, apiData, apiMethod).then(function (data) {
        // 判断如果卸载,则不再设置数据
        if (!_this2.open) return;

        _this2.setState({
          loading: false,
          listData: data.data
        });
      }).catch(function (err) {
        log.error(err);
        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;
}(Component);

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