dlt-for-react 1.0.1

package/lib/components/NHCascader/index.js

@@ -0,0 +1,318 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _cascader = require('antd/lib/cascader');
+
+var _cascader2 = _interopRequireDefault(_cascader);
+
+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);
+
+require('antd/lib/cascader/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _NHFetch = require('../../utils/NHFetch');
+
+var _NHFetch2 = _interopRequireDefault(_NHFetch);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import { NHFetch } from 'xgui-for-react'
+
+/**
+ * 级联选择框
+ * 1、符合自定义表单组件规范，结合FormItem使用时不会出现警告信息
+ * 2、使用sign属性时，后台对应sign标识的sql查询数据语句列必须以value、label作为别名
+ * Author: zengxiangkai@ly-sky.com
+ * Created on: 2018-04-02 14:44:22
+ * Version: 1.0
+ * Modify log:
+ *
+ * 2019-04-16 by litugui 调用onChange方法时，添加selectedOptions传递到父级的onChange
+ * 2019-04-23 修改：可以接受最后一级下拉框的值，自动获取父级下拉框的值
+ */
+var NHCascader = function (_React$Component) {
+  (0, _inherits3.default)(NHCascader, _React$Component);
+
+  function NHCascader(props) {
+    (0, _classCallCheck3.default)(this, NHCascader);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (NHCascader.__proto__ || (0, _getPrototypeOf2.default)(NHCascader)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var value = [];
+    _this.state = {
+      options: [],
+      value: value
+    };
+    return _this;
+  }
+
+  //初始加载第一级级联下拉数据
+
+
+  (0, _createClass3.default)(NHCascader, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var level = 1;
+      var cascaderValue = '';
+
+      if (typeof this.props.value === 'string') {
+        this.getValues(function () {
+          _this2.getInitData(level, cascaderValue);
+        });
+      } else {
+        this.setState({ value: this.props.value }, function () {
+          _this2.getInitData(level, cascaderValue);
+        });
+      }
+    }
+  }, {
+    key: 'UNSAFE_componentWillReceiveProps',
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+
+      // Should be a controlled component.
+      if ('value' in nextProps) {
+        var value = nextProps.value;
+        if (typeof value === 'string') {
+          this.getValues();
+        } else {
+          this.setState({ value: value });
+        }
+      }
+    }
+
+    //获取初始化数据
+
+
+    //当选择父项时，动态加载子项数据
+
+
+    //从后台查询级联下拉数据
+
+
+    //级联选择框值变化时回调
+
+
+    //提供onChange回调方法给Form表单，表明这是一个自定义表单受控组件
+
+  }, {
+    key: 'render',
+    value: function render() {
+      var _state = this.state,
+          options = _state.options,
+          value = _state.value;
+      var _props = this.props,
+          style = _props.style,
+          placeholder = _props.placeholder,
+          changeOnSelect = _props.changeOnSelect,
+          disabled = _props.disabled;
+
+      return _react2.default.createElement(_cascader2.default, {
+        options: options,
+        loadData: this.loadData,
+        onChange: this.handleCascaderChange,
+        changeOnSelect: changeOnSelect,
+        style: style,
+        placeholder: placeholder,
+        disabled: disabled,
+        value: value,
+        notFoundContent: '无数据'
+      });
+    }
+  }]);
+  return NHCascader;
+}(_react2.default.Component);
+
+//默认属性值
+
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.getInitData = function (level, cascaderValue, parentOption) {
+    var _props2 = _this3.props,
+        sign = _props2.sign,
+        params = _props2.params,
+        flexibleUrl = _props2.flexibleUrl;
+
+    params = (0, _extends3.default)({}, params, { level: level, sign: sign, cascaderValue: cascaderValue });
+    var baseUrl = _this3.props.baseUrl;
+    params.t = new Date().getTime();
+    (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + (flexibleUrl ? flexibleUrl : "/proData/selectCascaderList"), 'GET', params).then(function (res) {
+      if (res) {
+        var data = res.data;
+        if (data) {
+          if (parentOption) {
+            parentOption.loading = false;
+            parentOption.children = data;
+            _this3.setState({
+              options: _this3.state.options
+            });
+          } else {
+            _this3.setState({
+              options: data
+            });
+          }
+
+          //获取初始值，判断是否需要加载下一级级联数据
+          var initValue = _this3.state.value;
+          if (initValue && initValue.length > 0) {
+            var targetOption = data.filter(function (item) {
+              return item.value === initValue[level - 1];
+            })[0];
+            if (targetOption) {
+              targetOption.loading = true;
+              if (level < initValue.length) {
+                _this3.getInitData(level + 1, initValue[level - 1], targetOption);
+              }
+            }
+          }
+        } else {
+          _this3.setState({ options: [] });
+        }
+      }
+    });
+  };
+
+  this.getValues = function (callback) {
+    var _props3 = _this3.props,
+        sign = _props3.sign,
+        value = _props3.value,
+        baseUrl = _props3.baseUrl;
+
+    var params = {
+      sign: sign,
+      value: value
+    };
+    params.t = new Date().getTime();
+    (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + "/proData/selectValues", 'GET', params).then(function (res) {
+      if (res && res.code === 200 && res.data) {
+        _this3.setState({ value: res.data }, callback);
+      }
+    });
+  };
+
+  this.loadData = function (selectedOptions) {
+    var targetOption = selectedOptions[selectedOptions.length - 1];
+    targetOption.loading = true;
+    var level = targetOption.currLevel + 1;
+    var cascaderValue = targetOption.value;
+    _this3.getCascaderData(level, cascaderValue, targetOption, selectedOptions);
+  };
+
+  this.getCascaderData = function (level, cascaderValue, targetOption, selectedOptions) {
+    var _props4 = _this3.props,
+        sign = _props4.sign,
+        params = _props4.params,
+        flexibleUrl = _props4.flexibleUrl;
+
+    params = (0, _extends3.default)({}, params, { level: level, sign: sign, cascaderValue: cascaderValue });
+    var baseUrl = _this3.props.baseUrl;
+    params.t = new Date().getTime();
+    (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + (flexibleUrl ? flexibleUrl : "/proData/selectCascaderList"), 'GET', params).then(function (res) {
+      if (res) {
+        if (res.data) {
+          if (targetOption) {
+            targetOption.loading = false;
+            if (res.data && res.data.length && res.data.length == 1 && res.data[0].value == undefined) {
+              // 如果子节点为空的话设置当前节点为叶节点，可被选中
+              targetOption.isLeaf = true;
+              var values = [];
+              selectedOptions.forEach(function (item) {
+                values.push(item.value);
+              });
+              _this3.handleCascaderChange(values, selectedOptions);
+            } else {
+              targetOption.children = res.data;
+            }
+            _this3.setState({
+              options: _this3.state.options
+            });
+          } else {
+            _this3.setState({
+              options: res.data
+            });
+          }
+        } else {
+          _this3.setState({ options: [] });
+        }
+      }
+    });
+  };
+
+  this.handleCascaderChange = function (value, selectedOptions) {
+
+    if (!('value' in _this3.props)) {
+      _this3.setState({
+        value: value
+      });
+    }
+
+    _this3.triggerChange(value, selectedOptions);
+  };
+
+  this.triggerChange = function (changedValue, selectedOptions) {
+    // Should provide an event to pass value to Form.
+    var onChange = _this3.props.onChange;
+    if (onChange) {
+      onChange(changedValue, selectedOptions);
+    }
+  };
+};
+
+NHCascader.defaultProps = {
+  sign: '', //数据源标识
+  placeholder: '请选择...', //输入框占位文本
+  disabled: false, //是否禁用
+  changeOnSelect: true //当此项为 true 时，点选每级菜单选项值都会发生变化
+
+
+  //属性检查
+};NHCascader.propTypes = {
+  sign: _propTypes2.default.string.isRequired, //数据源标识
+  style: _propTypes2.default.object, //样式
+  placeholder: _propTypes2.default.string, //输入框占位文本
+  disabled: _propTypes2.default.bool, //是否禁用
+  defaultValue: _propTypes2.default.any, //默认选中项
+  value: _propTypes2.default.any, //初始值
+  changeOnSelect: _propTypes2.default.bool, //当此项为 true 时，点选每级菜单选项值都会发生变化
+  onChange: _propTypes2.default.func, //选择完成后的回调
+  baseUrl: _propTypes2.default.string //请求路径的前缀，可通过改参数控制访问的后端服务，如果不设置，则会去访问当前前端服务对应的后端服务，例如：api/sm-bpm-expansion
+};
+
+exports.default = NHCascader;

package/lib/components/NHCheckBox/index.js

@@ -0,0 +1,360 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _row = require("antd/lib/row");
+
+var _row2 = _interopRequireDefault(_row);
+
+var _col = require("antd/lib/col");
+
+var _col2 = _interopRequireDefault(_col);
+
+var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+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 _checkbox = require("antd/lib/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+require("antd/lib/row/style");
+
+require("antd/lib/col/style");
+
+require("antd/lib/checkbox/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);
+
+var _equalsObj = require("../../utils/equalsObj");
+
+var _equalsObj2 = _interopRequireDefault(_equalsObj);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var pathUrl = "/proData/selectDataList";
+var CheckboxGroup = _checkbox2.default.Group;
+
+/**
+ * @Description: Checkbox多选框组件
+ * @author weishihuai
+ * @date 2019/3/20 14:36
+ * 更新日志：
+ * 2019-05-27：增加gridLayout布局样式，默认false by zengxiangkai
+ * 说明:
+ * 1. 使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识,如: sign={'DMK_WJCF_WJLX'};
+ * 2. 使用自定义数据源时,需注意格式. 如: [{label: 'A', value: 'A'},{label: 'B', value: 'B'},{label: 'C', value: 'C'}];
+ * 3. 使用checkBoxGroupDisabled属性可动态配置整个复选框禁用、启用状态;
+ * 4. 使用checkBoxDisabledValueArr属性可控制按钮组中哪些checkbox需要被禁用;
+ * 5. 使用filterType集合filterData可以过滤指定按钮, 如: filterType={'save'} filterData={['A']};
+ * 6. 使用columnsNum属性可控制一行显示几个复选框,不传默认显示4个, 取值范围: [1,2,3,4,6,8];
+ *
+ * 使用示例:
+    <NHCheckBox sign={'DMK_XTGL_WJLX'}
+                checkBoxGroupDisabled={false}
+                defaultValue={['Apple']}
+                onChange={this.onChange}
+                columnsNum={1}
+                dataSource={[
+                            {label: 'A', value: 'A'},
+                            {label: 'B', value: 'B'},
+                            {label: 'C', value: 'C'},
+                              ]}
+                filterType={'remove'}
+                filterData={['A']}
+                checkBoxDisabledValueArr={['A', 'B']}
+    />
+ *
+ */
+
+var NHCheckBox = function (_React$Component) {
+    (0, _inherits3.default)(NHCheckBox, _React$Component);
+
+    function NHCheckBox(props) {
+        (0, _classCallCheck3.default)(this, NHCheckBox);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (NHCheckBox.__proto__ || (0, _getPrototypeOf2.default)(NHCheckBox)).call(this, props));
+
+        _this.getDataSource = function (sign) {
+            var baseUrl = _this.props.baseUrl;
+
+            if (!sign) {
+                _this.getCustomDataSource();
+            } else {
+                (0, _NHFetch2.default)((baseUrl === undefined ? "" : baseUrl) + pathUrl, 'GET', { sign: sign, t: new Date().getTime() }).then(function (res) {
+                    if (res) {
+                        var data = res.data;
+                        if (data) {
+                            _this.setState({
+                                data: [].concat((0, _toConsumableArray3.default)(data))
+                            });
+                        } else {
+                            _this.getCustomDataSource();
+                        }
+                    }
+                }).catch(function (err) {
+                    _this.getCustomDataSource();
+                });
+            }
+        };
+
+        _this.getCustomDataSource = function () {
+            var _this$props$dataSourc = _this.props.dataSource,
+                dataSource = _this$props$dataSourc === undefined ? [] : _this$props$dataSourc;
+
+            if (dataSource && dataSource.length > 0) {
+                _this.setState({
+                    data: [].concat((0, _toConsumableArray3.default)(dataSource))
+                });
+            }
+        };
+
+        _this.onCheckBoxChange = function (checkedValues) {
+            var onChange = _this.props.onChange;
+
+            if (onChange && typeof onChange === 'function') {
+                onChange(checkedValues);
+            }
+            _this.setState({
+                value: checkedValues
+            });
+        };
+
+        _this.isCheckBoxIsDisabled = function (checkBoxDisabledValueArr, value) {
+            if (checkBoxDisabledValueArr && checkBoxDisabledValueArr.length <= 0) {
+                return false;
+            }
+            var val = checkBoxDisabledValueArr.find(function (key) {
+                return value === key || value === key;
+            });
+            return val !== undefined;
+        };
+
+        _this.buildCheckBoxOptions = function (filteredData) {
+            var _this$props = _this.props,
+                checkBoxDisabledValueArr = _this$props.checkBoxDisabledValueArr,
+                gridLayout = _this$props.gridLayout,
+                columnsNum = _this$props.columnsNum;
+
+
+            var spanNum = 24 / columnsNum;
+
+            if (gridLayout) {
+
+                var options = filteredData.map(function (option, index) {
+                    return _react2.default.createElement(
+                        _col2.default,
+                        { span: spanNum, key: index },
+                        _react2.default.createElement(
+                            _checkbox2.default,
+                            {
+                                key: option.VALUE || option.value,
+                                disabled: _this.isCheckBoxIsDisabled(checkBoxDisabledValueArr, option.VALUE || option.value),
+                                value: option.VALUE || option.value
+                            },
+                            option.LABEL || option.label
+                        )
+                    );
+                });
+                return _react2.default.createElement(
+                    _row2.default,
+                    null,
+                    options
+                );
+            } else {
+
+                return filteredData.map(function (option) {
+                    return _react2.default.createElement(
+                        _checkbox2.default,
+                        {
+                            key: option.VALUE || option.value,
+                            disabled: _this.isCheckBoxIsDisabled(checkBoxDisabledValueArr, option.VALUE || option.value),
+                            value: option.VALUE || option.value
+                        },
+                        option.LABEL || option.label
+                    );
+                });
+            }
+        };
+
+        _this.state = {
+            data: [],
+            value: props.value || [] // checkbox选中值
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(NHCheckBox, [{
+        key: "componentDidMount",
+        value: function componentDidMount() {
+            var sign = this.props.sign;
+
+            this.getDataSource(sign);
+        }
+    }, {
+        key: "UNSAFE_componentWillReceiveProps",
+        value: function UNSAFE_componentWillReceiveProps(nextProps) {
+            // if ('dataSource' in nextProps) {
+            //     const dataSource = nextProps.dataSource;
+            //     this.setState({
+            //         data: dataSource
+            //     });
+            // }
+            if ('value' in nextProps && !(0, _equalsObj2.default)(nextProps.value, this.props.value)) {
+                this.setState({
+                    value: nextProps.value
+                });
+            }
+        }
+
+        //根据数据源标识从后台查询DataSource
+
+
+        //使用自定义的DataSource
+
+
+        //变化时回调函数
+
+
+        //检查复选框是否需要禁用
+
+
+        //组装CheckBox Options
+
+    }, {
+        key: "render",
+        value: function render() {
+            var _state = this.state,
+                _state$data = _state.data,
+                data = _state$data === undefined ? [] : _state$data,
+                _state$value = _state.value,
+                value = _state$value === undefined ? [] : _state$value;
+            var _props = this.props,
+                checkBoxGroupDisabled = _props.checkBoxGroupDisabled,
+                defaultValue = _props.defaultValue,
+                _props$filterType = _props.filterType,
+                filterType = _props$filterType === undefined ? '' : _props$filterType,
+                _props$filterData = _props.filterData,
+                filterData = _props$filterData === undefined ? [] : _props$filterData,
+                _props$style = _props.style,
+                style = _props$style === undefined ? {} : _props$style;
+
+            var checkBoxOptions = [];
+
+            //同时指定过滤类型和需要过滤的数据VALUE
+            if (filterType && filterData) {
+                switch (filterType) {
+                    case 'remove':
+                        {
+                            //过滤掉指定key的复选框
+                            var filteredData = data.filter(function (item) {
+                                var itemVal = item.VALUE || item.value;
+                                var isExist = filterData.find(function (val) {
+                                    return val === itemVal;
+                                });
+                                return isExist === undefined;
+                            });
+                            if (filteredData && filteredData.length > 0) {
+                                checkBoxOptions = this.buildCheckBoxOptions(filteredData);
+                            }
+                            break;
+                        }
+                    case 'save':
+                        {
+                            //保留指定key值的复选框
+                            var _filteredData = data.filter(function (item) {
+                                var itemVal = item.VALUE || item.value;
+                                var isExist = filterData.find(function (val) {
+                                    return val === itemVal;
+                                });
+                                return isExist !== undefined;
+                            });
+                            if (_filteredData && _filteredData.length > 0) {
+                                checkBoxOptions = this.buildCheckBoxOptions(_filteredData);
+                            }
+                            break;
+                        }
+                    default:
+                        {
+                            checkBoxOptions = this.buildCheckBoxOptions(data);
+                            break;
+                        }
+                }
+            } else {
+                //不进行数据过滤
+                checkBoxOptions = this.buildCheckBoxOptions(data);
+            }
+            return _react2.default.createElement(
+                CheckboxGroup,
+                {
+                    onChange: this.onCheckBoxChange,
+                    disabled: checkBoxGroupDisabled,
+                    defaultValue: defaultValue,
+                    value: value,
+                    style: style
+                },
+                checkBoxOptions
+            );
+        }
+    }]);
+    return NHCheckBox;
+}(_react2.default.Component);
+
+NHCheckBox.defaultProps = {
+    checkBoxGroupDisabled: false, //按钮组启用/禁用状态
+    checkBoxDisabledValueArr: [], //需要禁用的复选框的值(数组)
+    gridLayout: false,
+    columnsNum: 4
+
+    //属性检查
+};NHCheckBox.propTypes = {
+    sign: _propTypes2.default.string, //数据源标识
+    dataSource: _propTypes2.default.arrayOf( //自定义数据源
+    _propTypes2.default.shape({
+        value: _propTypes2.default.string,
+        label: _propTypes2.default.node
+    })),
+    checkBoxGroupDisabled: _propTypes2.default.bool, //整个多选框按钮组启用/禁用状态
+    defaultValue: _propTypes2.default.array, //默认选中的选项
+    value: _propTypes2.default.array, //初始值
+    onChange: _propTypes2.default.func, //选项变化时的回调函数
+    checkBoxDisabledValueArr: _propTypes2.default.array, //需要禁用的复选框Value集合
+    filterType: _propTypes2.default.oneOf(['save', 'remove']), //过滤数据类型,save - 保留  remove - 移除
+    filterData: _propTypes2.default.array, //过滤数据, save - 保留指定的filterData remove - 移除指定的filterData
+    gridLayout: _propTypes2.default.bool, //是否使用响应式布局
+    columnsNum: _propTypes2.default.oneOf([1, 2, 3, 4, 6, 8]) //响应式布局每行显示复选框的个数,默认为4个
+};
+
+exports.default = NHCheckBox;