dlt-for-react 1.1.16 → 1.1.18

package/lib/components/HqSelect/index.js

@@ -0,0 +1,495 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _spin = require("antd/lib/spin");
+
+var _spin2 = _interopRequireDefault(_spin);
+
+var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _keys = require("babel-runtime/core-js/object/keys");
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _assign = require("babel-runtime/core-js/object/assign");
+
+var _assign2 = _interopRequireDefault(_assign);
+
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _createClass2 = require("babel-runtime/helpers/createClass");
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _inherits2 = require("babel-runtime/helpers/inherits");
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _select = require("antd/lib/select");
+
+var _select2 = _interopRequireDefault(_select);
+
+require("antd/lib/spin/style");
+
+require("antd/lib/select/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _NHFetch = require("../../utils/NHFetch");
+
+var _NHFetch2 = _interopRequireDefault(_NHFetch);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Option = _select2.default.Option;
+
+/**
+ * 下拉选择器
+ * 1、符合自定义表单组件规范，结合FormItem使用时不会出现警告信息
+ * 2、使用sign属性时，后台对应sign标识的sql查询语句列必须以value、label作为别名
+ * Author: zengxiangkai@ly-sky.com
+ * Created on: 2018-03-29 18:00:31
+ * Version: 1.3
+ * Modify log:
+ * 2018-04-18
+ *      1、新增filterData属性，该属性可以过滤（或保留）指定keys值项
+ * 2018-04-20
+ *      2、新增dataSource属性，允许使用固定的数据源构造下拉数据，数据源格式为[{value:'value',label:'label'},{},...]
+ * 2018-06-04
+ *      3、解决sign为空或空字符串的时候，请求后台数据源报错问题
+ * 2019-03-21
+ *      4、onChange方法返回参数增加label、option
+ * 2019-10-31
+ *      5、设置dropdownMatchSelectWidth为false
+ */
+
+var HqSelect = function (_React$Component) {
+  (0, _inherits3.default)(HqSelect, _React$Component);
+  (0, _createClass3.default)(HqSelect, null, [{
+    key: "getDerivedStateFromProps",
+
+    //16.3.1新增生命周期函数与componentWillReceiveProps作用一致，推荐使用
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      // Should be a controlled component.
+
+      var updateState = {};
+      if ("value" in nextProps) {
+        var value = nextProps.value;
+        (0, _assign2.default)(updateState, { value: value });
+      }
+
+      if ("dataSource" in nextProps) {
+        var data = nextProps.dataSource;
+        (0, _assign2.default)(updateState, { data: data, realData: data });
+      }
+
+      if ("parentValue" in nextProps) {
+        var realData = prevState.data.filter(function (item) {
+          // 因为nextProps.parentValue 的值可能是undefined
+          if ("PARENTVALUE" in item) {
+            return item.PARENTVALUE === nextProps.parentValue;
+          }
+          if ("parentValue" in item) {
+            return item.parentValue === nextProps.parentValue;
+          }
+          return false;
+        });
+        var _value = prevState.value;
+        if ("value" in nextProps) {
+          _value = nextProps.value;
+        }
+        if (!(realData.findIndex(function (item) {
+          return item.value === _value || item.VALUE === _value;
+        }) > -1)) {
+          _value = undefined;
+          if (prevState.data && prevState.data.length > 0 && nextProps.value !== _value && nextProps.onChange) {
+            // 此时需要重置值，并且通知也上一级（form）
+            nextProps.onChange(_value, "");
+          }
+        }
+        (0, _assign2.default)(updateState, { realData: realData, value: _value });
+      }
+
+      if ((0, _keys2.default)(updateState).length > 0) {
+        return updateState;
+      }
+
+      return null;
+    }
+  }]);
+
+  function HqSelect(props) {
+    (0, _classCallCheck3.default)(this, HqSelect);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (HqSelect.__proto__ || (0, _getPrototypeOf2.default)(HqSelect)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var value = _this.props.value || "";
+    _this.state = {
+      data: [],
+      value: value || "",
+      realData: [],
+      loading: false, //是否加载远程数据中
+      firstOption: {} // 第一个选项
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(HqSelect, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _props = this.props,
+          flexibleUrl = _props.flexibleUrl,
+          sign = _props.sign;
+
+      //使用自定义的url的话
+
+      if (flexibleUrl && flexibleUrl != "") {
+        this.loadFlexData(flexibleUrl);
+      }
+      //如果是使用数据源标识，则优先加载远程数据
+      else if (sign && sign != "") {
+          this.loadRemoteData(sign);
+        } else {
+          //如果没有使用远程数据，则加载本地数据
+          this.loadLocalData();
+        }
+    }
+
+    //数据回传格式需要正确格式为[{LABEL:"",VALUE:""},{LABEL:"",VALUE:""}]
+
+
+    //加载远程数据
+
+
+    //加载本地数据
+
+
+    //解析数据
+
+
+    //下拉选项选中时回调
+
+
+    //下拉选择器input value值变化时回调
+
+
+    //提供onChange回调方法给Form表单，表明这是一个自定义表单受控组件
+
+
+    // 获取第一个选项
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _props2 = this.props,
+          style = _props2.style,
+          placeholder = _props2.placeholder,
+          disabled = _props2.disabled,
+          defaultValue = _props2.defaultValue,
+          allowClear = _props2.allowClear;
+      var _state = this.state,
+          value = _state.value,
+          loading = _state.loading;
+
+      var options = this.getNewData();
+      options = options.map(function (option) {
+        return _react2.default.createElement(
+          Option,
+          {
+            title: option.LABEL || option.label,
+            key: option.VALUE || option.value,
+            value: option.VALUE || option.value
+          },
+          option.LABEL || option.label
+        );
+      });
+
+      return _react2.default.createElement(
+        "div",
+        null,
+        _react2.default.createElement(
+          _select2.default,
+          (0, _extends3.default)({}, this.props, {
+            style: style,
+            showSearch: true,
+            allowClear: allowClear,
+            defaultValue: defaultValue,
+            value: value,
+            onSelect: this.handleSelect,
+            onChange: this.handleChange,
+            placeholder: placeholder,
+            notFoundContent: loading ? _react2.default.createElement(
+              "div",
+              { style: { display: "flex", justifyContent: "center" } },
+              _react2.default.createElement(_spin2.default, { spinning: true, tip: "加载中" })
+            ) : "无数据",
+            disabled: disabled,
+            dropdownMatchSelectWidth: false,
+            filterOption: function filterOption(input, option) {
+              return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            }
+          }),
+          options
+        )
+      );
+    }
+  }]);
+  return HqSelect;
+}(_react2.default.Component);
+
+//属性默认值
+
+
+var _initialiseProps = function _initialiseProps() {
+  var _this2 = this;
+
+  this.loadFlexData = function (flexibleUrl) {
+    var _props3 = _this2.props,
+        params = _props3.params,
+        baseUrl = _props3.baseUrl;
+
+    (0, _NHFetch2.default)(baseUrl + flexibleUrl, "GET", params).then(function (res) {
+      if (res) {
+        _this2.parseData(res.data);
+        _this2.setState({ loading: false });
+      } else {
+        _this2.setState({ loading: false });
+      }
+    });
+  };
+
+  this.loadRemoteData = function (sign) {
+    var _props4 = _this2.props,
+        baseUrl = _props4.baseUrl,
+        params = _props4.params;
+
+    _this2.setState({ loading: true });
+    (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + "/proData/selectDataList", "GET", (0, _extends3.default)({ sign: sign }, params, { t: new Date().getTime() })).then(function (res) {
+      if (res) {
+        _this2.parseData(res.data);
+        _this2.setState({ loading: false });
+      } else {
+        _this2.setState({ loading: false });
+      }
+    });
+  };
+
+  this.loadLocalData = function () {
+    var _props5 = _this2.props,
+        dataSource = _props5.dataSource,
+        parentValue = _props5.parentValue;
+
+    if (dataSource) {
+      var nullOption = [{ value: "", label: "请选择..." }];
+      var newData = [].concat(nullOption, (0, _toConsumableArray3.default)(dataSource));
+      var realData = [].concat(nullOption, (0, _toConsumableArray3.default)(dataSource));
+      if ("parentValue" in _this2.props) {
+        realData = newData.filter(function (item) {
+          // 因为nextProps.parentValue 的值可能是undefined
+          if ("PARENTVALUE" in item) {
+            return item.PARENTVALUE === parentValue;
+          }
+          if ("parentValue" in item) {
+            return item.parentValue === parentValue;
+          }
+          return false;
+        });
+      }
+      _this2.setState({ data: newData, realData: realData }, function () {
+        _this2.triggerDefaultFirstOption();
+      });
+    }
+  };
+
+  this.parseData = function (data) {
+    if (data) {
+      var nullOption = [{ value: "", label: "请选择..." }];
+      var newData = [].concat(nullOption, (0, _toConsumableArray3.default)(data));
+      var realData = [].concat(nullOption, (0, _toConsumableArray3.default)(data));
+      if ("parentValue" in _this2.props) {
+        realData = newData.filter(function (item) {
+          // 因为nextProps.parentValue 的值可能是undefined
+          if ("PARENTVALUE" in item) {
+            return item.PARENTVALUE === _this2.props.parentValue;
+          }
+          if ("parentValue" in item) {
+            return item.parentValue === _this2.props.parentValue;
+          }
+          return false;
+        });
+      }
+      _this2.setState({ data: newData, realData: realData }, function () {
+        _this2.triggerDefaultFirstOption();
+      });
+    } else {
+      //如果远程数据为空，则尝试加载本地数据源
+      _this2.loadLocalData();
+    }
+  };
+
+  this.handleSelect = function (value, option) {
+    var label = option ? option.props.children || "" : "";
+    var onSelect = _this2.props.onSelect;
+    if (onSelect) {
+      onSelect(value, label, option);
+    }
+  };
+
+  this.handleChange = function (value, option) {
+    if (!("value" in _this2.props)) {
+      _this2.setState({
+        value: value
+      });
+    }
+
+    var label = option ? option.props.children || "" : "";
+    _this2.triggerChange(value, label, option);
+  };
+
+  this.triggerChange = function (value, label, option) {
+    // Should provide an event to pass value to Form.
+    var onChange = _this2.props.onChange;
+    if (onChange) {
+      onChange(value, label, option);
+    }
+  };
+
+  this.getFirstData = function () {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    var firstData = _this2.getNewData()[index];
+    if (!firstData) return;
+    if (firstData.value === "" && firstData.label === "请选择...") {
+      return _this2.getFirstData(index + 1);
+    } else {
+      return firstData;
+    }
+  };
+
+  this.triggerDefaultFirstOption = function () {
+    var defaultFirstOption = _this2.props.defaultFirstOption;
+
+    if (defaultFirstOption) {
+      var firstData = _this2.getFirstData();
+      if (!firstData) return;
+      var value = firstData.VALUE || firstData.value;
+      var label = firstData.LABEL || firstData.label;
+      var option = {
+        value: value,
+        label: label
+      };
+      _this2.setState({
+        firstOption: option
+      });
+      defaultFirstOption(option);
+    }
+  };
+
+  this.getNewData = function () {
+    var filterData = _this2.props.filterData;
+    var realData = _this2.state.realData;
+
+    var data = realData;
+    var newData = data;
+    //如果有过滤条件
+    if (filterData) {
+      var type = filterData.type,
+          _filterData$filterkey = filterData.filterkeys,
+          filterkeys = _filterData$filterkey === undefined ? [] : _filterData$filterkey;
+
+      switch (type) {
+        //过滤掉指定key值
+        case "remove":
+          {
+            newData = data.filter(function (item) {
+              if (filterkeys.find(function (key) {
+                return (item.VALUE || item.value) == key;
+              })) {
+                return false;
+              } else {
+                return true;
+              }
+            });
+            break;
+          }
+        //保留指定key值
+        case "save":
+          {
+            newData = data.filter(function (item) {
+              if (filterkeys.find(function (key) {
+                return (item.VALUE || item.value) == key;
+              })) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            break;
+          }
+      }
+    }
+    return newData;
+  };
+};
+
+exports.default = HqSelect;
+HqSelect.defaultProps = {
+  placeholder: "请选择...",
+  disabled: false,
+  allowClear: true,
+  params: {}
+};
+
+//属性检查
+HqSelect.propTypes = {
+  sign: _propTypes2.default.string, //远程数据源标识
+  dataSource: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    value: _propTypes2.default.string,
+    label: _propTypes2.default.node
+  })), //本地数据源
+  style: _propTypes2.default.object, //样式
+  placeholder: _propTypes2.default.string, //下拉提示
+  disabled: _propTypes2.default.bool, //是否禁用
+  defaultValue: _propTypes2.default.string, //默认值
+  value: _propTypes2.default.string, //初始值
+  filterData: _propTypes2.default.shape({
+    type: _propTypes2.default.oneOf(["remove", "save"]), //是保留还是过滤掉
+    filterkeys: _propTypes2.default.array //保留或过滤的key值
+  }), //要过滤掉的Key值
+  onSelect: _propTypes2.default.func, //下拉选项选中时回调
+  onChange: _propTypes2.default.func, //下拉框值变化时回调
+  baseUrl: _propTypes2.default.string, //请求路径的前缀，可通过改参数控制访问的后端服务，如果不设置，则会去访问当前前端服务对应的后端服务，例如：api/sm-bpm-expansion
+  allowClear: _propTypes2.default.bool,
+  parentValue: _propTypes2.default.string, // 级联属性，上一级的选中值，数据源中每一项必须存在PARENTVALUE或者parentValue列
+  defaultFirstOption: _propTypes2.default.func, // 是否取第一项为默认值，并将第一项数据返回
+  params: _propTypes2.default.object, // 获取数据源时所需的参数
+  flexibleUrl: _propTypes2.default.string // 自定义接口
+};