dlt-for-react 1.1.15 → 1.1.17

package/lib/components/HqMultiSelect/index.js

@@ -0,0 +1,495 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getIterator2 = require("babel-runtime/core-js/get-iterator");
+
+var _getIterator3 = _interopRequireDefault(_getIterator2);
+
+var _set = require("babel-runtime/core-js/set");
+
+var _set2 = _interopRequireDefault(_set);
+
+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 _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require("babel-runtime/helpers/createClass");
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+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、代码结构优化
+ * 3、使用sign属性时，后台对应sign标识的sql查询语句列必须以value、label作为别名
+ * Author: zengxiangkai@ly-sky.com
+ * Created on: 2018-03-13 15:54:13
+ * Version: 1.3
+ * Modify log:
+ * 2018-04-25
+ *     1、新增filterData属性，该属性可以过滤（或保留）指定keys值项
+ *     2、新增dataSource属性，允许使用固定的数据源构造下拉数据，数据源格式为[{value:'value',label:'label'},{},...]
+ * 2018-06-04
+ *     1、解决sign为空或空字符串的时候，请求后台数据源报错问题
+ */
+
+var HqMultiSelect = function (_React$Component) {
+  (0, _inherits3.default)(HqMultiSelect, _React$Component);
+
+  function HqMultiSelect(props) {
+    (0, _classCallCheck3.default)(this, HqMultiSelect);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (HqMultiSelect.__proto__ || (0, _getPrototypeOf2.default)(HqMultiSelect)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var value = _this.props.value || [];
+    _this.state = {
+      data: [], // 源数据
+      realData: [], // 渲染的真实数据
+      value: value || [],
+      loading: false //是否加载远程数据中
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(HqMultiSelect, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _props = this.props,
+          sign = _props.sign,
+          dataSource = _props.dataSource;
+
+      //如果是使用数据源标识，则优先加载远程数据
+
+      if (sign && sign != "") {
+        this.loadRemoteData(sign);
+      } else {
+        //如果没有使用远程数据，则加载本地数据
+        this.loadLocalData();
+      }
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
+      var sign = this.props.sign;
+      // Should be a controlled component.
+
+      if ("value" in nextProps) {
+        var value = nextProps.value;
+        this.setState({ value: value });
+      }
+
+      //为了防止在使用本地数据源的时候，在上级组件使用异步请求，导致在componentDidMount阶段未能获取到返回的dataSource
+      if ("dataSource" in nextProps && !sign) {
+        var dataSource = nextProps.dataSource;
+        this.setState({ data: dataSource }, function () {
+          _this2.loadLocalData();
+        });
+      }
+
+      // 存在级联功能或者过滤条件时，同步更新选项及选中的值
+      if ("parentValues" in nextProps || "filterData" in nextProps) {
+        var onChange = nextProps.onChange,
+            parentValues = nextProps.parentValues,
+            filterData = nextProps.filterData;
+
+
+        var realData = this.getOptions({
+          data: this.state.data,
+          parentValues: parentValues,
+          filterData: filterData
+        });
+        this.setState({
+          realData: realData
+        }, function () {
+          var _state = _this2.state,
+              value = _state.value,
+              realData = _state.realData;
+
+          if (value) {
+            var nValue = value.filter(function (i) {
+              return realData.findIndex(function (item) {
+                return item.value === i;
+              }) > -1;
+            });
+            if (value.length !== nValue.length && onChange) {
+              // 此时需要重置值，并且通知也上一级（form）
+              _this2.handleChange(nValue);
+            }
+          }
+        });
+      }
+    }
+
+    //加载远程数据
+
+
+    //加载本地数据
+
+
+    //解析数据
+
+
+    //下拉选项选中时回调
+
+
+    //下拉选择器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;
+      var _state2 = this.state,
+          value = _state2.value,
+          loading = _state2.loading,
+          realData = _state2.realData;
+
+      var options = realData.map(function (option) {
+        return _react2.default.createElement(
+          Option,
+          { title: option.label, key: option.value, value: option.value },
+          option.label
+        );
+      });
+
+      return _react2.default.createElement(
+        "div",
+        null,
+        _react2.default.createElement(
+          _select2.default,
+          (0, _extends3.default)({}, this.props, {
+            allowClear: true,
+            style: style,
+            mode: "multiple",
+            defaultValue: defaultValue,
+            value: value,
+            onSelect: this.handleSelect,
+            onChange: this.handleChange,
+            onDeselect: this.handleDeselect,
+            placeholder: placeholder,
+            notFoundContent: loading ? _react2.default.createElement(
+              "div",
+              { style: { display: "flex", justifyContent: "center" } },
+              _react2.default.createElement(_spin2.default, { spinning: true, tip: "加载中" })
+            ) : "无数据",
+            filterOption: function filterOption(input, option) {
+              return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+            },
+            disabled: disabled
+          }),
+          options
+        )
+      );
+    }
+  }]);
+  return HqMultiSelect;
+}(_react2.default.Component);
+
+//属性默认值
+
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.loadRemoteData = function (sign) {
+    var baseUrl = _this3.props.baseUrl;
+    _this3.setState({ loading: true });
+    (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + "/proData/selectDataList", "GET", { sign: sign, t: new Date().getTime() }).then(function (res) {
+      if (res) {
+        _this3.parseData(res.data);
+        _this3.setState({ loading: false });
+      } else {
+        _this3.setState({ loading: false });
+      }
+    });
+  };
+
+  this.loadLocalData = function () {
+    var dataSource = _this3.props.dataSource;
+
+    if (dataSource) {
+      var realData = _this3.getOptions({ data: dataSource });
+      _this3.setState({
+        data: dataSource,
+        realData: realData
+      });
+    }
+  };
+
+  this.parseData = function (data) {
+    if (data) {
+      var realData = _this3.getOptions({ data: data });
+      _this3.setState({
+        data: data,
+        realData: realData
+      });
+    } else {
+      //如果远程数据为空，则尝试加载本地数据源
+      _this3.loadLocalData();
+    }
+  };
+
+  this.handleSelect = function (value, option) {
+    var label = option.props.children;
+
+    var onSelect = _this3.props.onSelect;
+    if (onSelect) {
+      onSelect(value, label, option);
+    }
+  };
+
+  this.handleChange = function (value, option) {
+    if (!("value" in _this3.props)) {
+      _this3.setState({
+        value: value
+      });
+    }
+    var text = "";
+    var realData = _this3.state.realData;
+
+    if (value && value.length > 0) {
+      var textArry = [];
+      value.map(function (item) {
+        var filterArry = realData.filter(function (i) {
+          return i.value === item;
+        });
+        if (filterArry.length > 0) {
+          textArry.push(filterArry[0].label || "");
+        }
+      });
+      text = textArry.join(",");
+    }
+    _this3.triggerChange(value, text);
+  };
+
+  this.handleDeselect = function (value) {
+    // const values = [...this.state.value];
+    var values = _this3.state.value;
+    var target = values.filter(function (item) {
+      return item != value;
+    });
+
+    if (!("value" in _this3.props)) {
+      _this3.setState({
+        value: target
+      });
+    }
+
+    var onDeselect = _this3.props.onDeselect;
+
+    if (onDeselect) {
+      onDeselect(value);
+    }
+  };
+
+  this.triggerChange = function (changedValue, changedText) {
+    // Should provide an event to pass value to Form.
+    var onChange = _this3.props.onChange;
+    if (onChange) {
+      onChange(changedValue, changedText);
+    }
+  };
+
+  this.dataToLowerCase = function (data) {
+    return data.map(function (option) {
+      var item = {};
+      for (var name in option) {
+        item[name.toLocaleLowerCase()] = option[name];
+      }
+      return item;
+    });
+  };
+
+  this.getOptions = function (_ref) {
+    var data = _ref.data,
+        parentValues = _ref.parentValues,
+        filterData = _ref.filterData;
+    var _props3 = _this3.props,
+        fData = _props3.filterData,
+        pValues = _props3.parentValues,
+        parentField = _props3.parentField;
+
+    parentValues = parentValues || pValues; // 级联
+    filterData = filterData || fData; // 过滤
+    var lowerData = _this3.dataToLowerCase(data);
+    var newData = [].concat((0, _toConsumableArray3.default)(lowerData));
+    //如果有过滤条件
+    if (filterData) {
+      var _filterData = filterData,
+          type = _filterData.type,
+          _filterData$filterkey = _filterData.filterkeys,
+          filterkeys = _filterData$filterkey === undefined ? [] : _filterData$filterkey;
+
+      switch (type) {
+        //过滤掉指定key值
+        case "remove":
+          {
+            newData = lowerData.filter(function (item) {
+              if (filterkeys.find(function (key) {
+                return item.value == key;
+              })) {
+                return false;
+              } else {
+                return true;
+              }
+            });
+            break;
+          }
+        //保留指定key值
+        case "save":
+          {
+            newData = lowerData.filter(function (item) {
+              if (filterkeys.find(function (key) {
+                return item.value == key;
+              })) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            break;
+          }
+        //未找到指定过滤类型，则不做过滤
+        default:
+          {
+            break;
+          }
+      }
+    }
+
+    //如果有级联父级的值
+    if (parentValues && parentValues.length > 0) {
+      var setlist = new _set2.default();
+      newData.forEach(function (item) {
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+
+        try {
+          for (var _iterator = (0, _getIterator3.default)(parentValues), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var v = _step.value;
+
+            if (item[parentField.toLocaleLowerCase()] === v) {
+              setlist.add(item);
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+      });
+      newData = [].concat((0, _toConsumableArray3.default)(setlist));
+    }
+
+    return newData;
+  };
+};
+
+HqMultiSelect.defaultProps = {
+  placeholder: "请选择...",
+  disabled: false,
+  parentField: "parentValue"
+};
+
+//属性检查
+HqMultiSelect.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.arrayOf(_propTypes2.default.string), //默认值
+  value: _propTypes2.default.arrayOf(_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, //多选框值变化时回调
+  onDeselect: _propTypes2.default.func, //多选框值删除时回调
+  baseUrl: _propTypes2.default.string, //请求路径的前缀，可通过改参数控制访问的后端服务，如果不设置，则会去访问当前前端服务对应的后端服务，例如：api/sm-bpm-expansion
+  parentValues: _propTypes2.default.arrayOf(_propTypes2.default.string), // 级联功能，父级的值
+  parentField: _propTypes2.default.string // 级联功能，关联的字段名
+};
+
+exports.default = HqMultiSelect;