dlt-for-react 1.0.1

package/lib/components/NHSelect/index.js

@@ -0,0 +1,466 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+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 }; }
+
+// import {NHFetch} from 'xgui-for-react'
+
+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 NHSelect = function (_React$Component) {
+    (0, _inherits3.default)(NHSelect, _React$Component);
+    (0, _createClass3.default)(NHSelect, 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 NHSelect(props) {
+        (0, _classCallCheck3.default)(this, NHSelect);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (NHSelect.__proto__ || (0, _getPrototypeOf2.default)(NHSelect)).call(this, props));
+
+        _initialiseProps.call(_this);
+
+        var value = _this.props.value || '';
+        _this.state = {
+            data: [],
+            value: value || '',
+            realData: [],
+            loading: false //是否加载远程数据中
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(NHSelect, [{
+        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,
+                filterData = _props2.filterData,
+                allowClear = _props2.allowClear;
+            var _state = this.state,
+                value = _state.value,
+                realData = _state.realData,
+                loading = _state.loading;
+
+            var options = [];
+            var data = realData;
+            //如果有过滤条件
+            if (filterData) {
+                var type = filterData.type,
+                    _filterData$filterkey = filterData.filterkeys,
+                    filterkeys = _filterData$filterkey === undefined ? [] : _filterData$filterkey;
+
+                switch (type) {
+                    //过滤掉指定key值
+                    case 'remove':
+                        {
+                            var newData = data.filter(function (item) {
+                                if (filterkeys.find(function (key) {
+                                    return (item.VALUE || item.value) == key;
+                                })) {
+                                    return false;
+                                } else {
+                                    return true;
+                                }
+                            });
+                            options = newData.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
+                                );
+                            });
+                            break;
+                        }
+                    //保留指定key值
+                    case 'save':
+                        {
+                            var _newData = data.filter(function (item) {
+                                if (filterkeys.find(function (key) {
+                                    return (item.VALUE || item.value) == key;
+                                })) {
+                                    return true;
+                                } else {
+                                    return false;
+                                }
+                            });
+                            options = _newData.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
+                                );
+                            });
+                            break;
+                        }
+                    //未找到指定过滤类型，则不做过滤
+                    default:
+                        {
+                            options = data.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
+                                );
+                            });
+                            break;
+                        }
+                }
+            } else {
+
+                options = data.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 NHSelect;
+}(_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 baseUrl = _this2.props.baseUrl;
+        _this2.setState({ loading: true });
+        (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + "/proData/selectDataList", 'GET', { sign: sign, 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 () {
+        if (_this2.props.dataSource) {
+            var nullOption = [{ value: '', label: '请选择...' }];
+            var newData = [].concat(nullOption, (0, _toConsumableArray3.default)(_this2.props.dataSource));
+            var realData = [].concat(nullOption, (0, _toConsumableArray3.default)(_this2.props.dataSource));
+            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 });
+        }
+    };
+
+    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 });
+        } 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);
+        }
+    };
+};
+
+NHSelect.defaultProps = {
+    placeholder: '请选择...',
+    disabled: false,
+    allowClear: true
+
+    //属性检查
+};NHSelect.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列
+};
+
+exports.default = NHSelect;