dlt-for-react 1.1.16 → 1.1.17

package/lib/components/HqCascader/index.js

@@ -0,0 +1,306 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+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 }; }
+
+/**
+ * 级联选择框
+ * 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 HqCascader = function (_React$Component) {
+  (0, _inherits3.default)(HqCascader, _React$Component);
+
+  function HqCascader(props) {
+    (0, _classCallCheck3.default)(this, HqCascader);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (HqCascader.__proto__ || (0, _getPrototypeOf2.default)(HqCascader)).call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var value = [];
+    _this.state = {
+      options: [],
+      value: value
+    };
+    return _this;
+  }
+
+  //初始加载第一级级联下拉数据
+
+
+  (0, _createClass3.default)(HqCascader, [{
+    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") {
+          if (this.props.value !== nextProps.value) {
+            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 HqCascader;
+}(_react2.default.Component);
+
+//默认属性值
+
+
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.getInitData = function (level, cascaderValue, parentOption) {
+    var _props2 = _this3.props,
+        sign = _props2.sign,
+        flexibleUrl = _props2.flexibleUrl,
+        baseUrl = _props2.baseUrl;
+
+    var params = (0, _extends3.default)({}, _this3.props.params, { level: level, sign: sign, cascaderValue: cascaderValue });
+    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);
+  };
+
+  this.getCascaderData = function (level, cascaderValue, targetOption) {
+    var _props4 = _this3.props,
+        sign = _props4.sign,
+        flexibleUrl = _props4.flexibleUrl,
+        baseUrl = _props4.baseUrl;
+
+    var params = (0, _extends3.default)({}, _this3.props.params, { level: level, sign: sign, cascaderValue: cascaderValue });
+    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;
+            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);
+    }
+  };
+};
+
+exports.default = HqCascader;
+HqCascader.defaultProps = {
+  sign: "", //数据源标识
+  placeholder: "请选择...", //输入框占位文本
+  disabled: false, //是否禁用
+  changeOnSelect: true //当此项为 true 时，点选每级菜单选项值都会发生变化
+};
+
+//属性检查
+HqCascader.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
+  params: _propTypes2.default.object, // 请求参数
+  flexibleUrl: _propTypes2.default.string // 自定义请求地址
+};

package/lib/components/HqCheckBox/index.js

@@ -0,0 +1,375 @@
+"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];
+ *
+ * 使用示例:
+    <HqCheckBox 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 HqCheckBox = function (_React$Component) {
+  (0, _inherits3.default)(HqCheckBox, _React$Component);
+
+  function HqCheckBox(props) {
+    (0, _classCallCheck3.default)(this, HqCheckBox);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (HqCheckBox.__proto__ || (0, _getPrototypeOf2.default)(HqCheckBox)).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;
+      var data = _this.state.data;
+
+      if (onChange && typeof onChange === "function") {
+        var checkedLabels = [];
+        data.forEach(function (item) {
+          var val = item.VALUE || item.value;
+          var index = checkedValues.indexOf(val);
+          if (index !== -1) {
+            var label = item.LABEL || item.label;
+            checkedLabels[index] = label;
+          }
+        });
+        onChange(checkedValues, checkedLabels);
+      }
+      _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)(HqCheckBox, [{
+    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 HqCheckBox;
+}(_react2.default.Component);
+
+HqCheckBox.defaultProps = {
+  checkBoxGroupDisabled: false, //按钮组启用/禁用状态
+  checkBoxDisabledValueArr: [], //需要禁用的复选框的值(数组)
+  gridLayout: false,
+  columnsNum: 4
+};
+
+//属性检查
+HqCheckBox.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个
+  style: _propTypes2.default.object, // 样式
+  baseUrl: _propTypes2.default.string // 请求路径的前缀，可通过改参数控制访问的后端服务
+};
+
+exports.default = HqCheckBox;