dlt-for-react 1.0.1

package/lib/components/NHSwitch/index.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _switch = require("antd/lib/switch");
+
+var _switch2 = _interopRequireDefault(_switch);
+
+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/switch/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 pathUrl = "/proData/selectDataList";
+
+/**
+ * @Description: 开关选择器
+ * @author weishihuai
+ * @date 2019/3/7 9:13
+ *
+ * 使用说明:
+ * 1. 使用sign标识从后台查询数据源时，以'DMK_'加上对应代码库标识,如: sign={'DMK_XTGL_SFM'};
+ * 2. 可使用dataSource自定义数据源,格式如: [{"VALUE":"1","LABEL":"是"},{"VALUE":"0","LABEL":"否"}];
+ * 3. 可以使用checkedChildren/unCheckedChildren指定选中/未选中时文本;
+ *  注意: 如果同时配置了sign/dataSource/(checkedChildren/unCheckedChildren),文本取值优先级顺序: sign > dataSource > (checkedChildren/unCheckedChildren)
+ * 4. onChange = (checked,value)父组件回调方法 : checked表示是否选中boolean值(true/false), value表示当前选择器的值('1'/'0');
+ * 5. 使用示例:
+ * <NHSwitch
+ *      onChange={this.onSwitchChange}
+ *      loading={false}
+ *      disabled={false}
+ *      size={'default'}
+ *      sign={'DMK_XTGL_SFM'}
+ *      dataSource={[{"VALUE":"1","LABEL":"是"},{"VALUE":"0","LABEL":"否"}]}
+ *      checkedChildren={'启用'}
+ *      unCheckedChildren={'禁用'}
+ *      onClick={this.onClick}/>
+ */
+
+var NHSwitch = function (_React$Component) {
+    (0, _inherits3.default)(NHSwitch, _React$Component);
+
+    function NHSwitch(props) {
+        (0, _classCallCheck3.default)(this, NHSwitch);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (NHSwitch.__proto__ || (0, _getPrototypeOf2.default)(NHSwitch)).call(this, props));
+
+        _initialiseProps.call(_this);
+
+        var _this$props = _this.props,
+            _this$props$checkedCh = _this$props.checkedChildren,
+            checkedChildren = _this$props$checkedCh === undefined ? '' : _this$props$checkedCh,
+            _this$props$unChecked = _this$props.unCheckedChildren,
+            unCheckedChildren = _this$props$unChecked === undefined ? '' : _this$props$unChecked,
+            checked = _this$props.checked;
+
+        _this.state = {
+            checkedChildren: checkedChildren, //选中时文本
+            unCheckedChildren: unCheckedChildren, //未选中文本
+            currentValue: '', //当前选中的值
+            checked: checked //当前选中状态
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(NHSwitch, [{
+        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) {
+                var dataSource = nextProps.dataSource;
+                if (dataSource && dataSource.length > 0) {
+                    this.buildCheckedChildren(dataSource);
+                }
+            }
+        }
+
+        //加载数据源
+
+
+        //使用自定义数据源
+
+
+        //值改变回调方法
+
+
+        //点击事件回调方法
+
+    }, {
+        key: "render",
+        value: function render() {
+            var _state = this.state,
+                _state$checkedChildre = _state.checkedChildren,
+                checkedChildren = _state$checkedChildre === undefined ? '' : _state$checkedChildre,
+                _state$unCheckedChild = _state.unCheckedChildren,
+                unCheckedChildren = _state$unCheckedChild === undefined ? '' : _state$unCheckedChild,
+                checked = _state.checked;
+            var _props = this.props,
+                defaultChecked = _props.defaultChecked,
+                loading = _props.loading,
+                size = _props.size,
+                disabled = _props.disabled;
+
+            return _react2.default.createElement(
+                "div",
+                null,
+                _react2.default.createElement(_switch2.default, { defaultChecked: defaultChecked, checkedChildren: checkedChildren,
+                    unCheckedChildren: unCheckedChildren,
+                    loading: loading,
+                    size: size,
+                    checked: checked,
+                    disabled: disabled,
+                    onChange: this.onSwitchChange,
+                    onClick: this.onSwitchClick })
+            );
+        }
+    }]);
+    return NHSwitch;
+}(_react2.default.Component);
+
+//默认属性
+
+
+var _initialiseProps = function _initialiseProps() {
+    var _this2 = this;
+
+    this.getPropsCheckedText = function () {
+        var _props2 = _this2.props,
+            _props2$checkedChildr = _props2.checkedChildren,
+            checkedChildren = _props2$checkedChildr === undefined ? '' : _props2$checkedChildr,
+            _props2$unCheckedChil = _props2.unCheckedChildren,
+            unCheckedChildren = _props2$unCheckedChil === undefined ? '' : _props2$unCheckedChil;
+
+        _this2.setState({
+            checkedChildren: checkedChildren,
+            unCheckedChildren: unCheckedChildren
+        });
+    };
+
+    this.getDataSource = function (sign) {
+        if (sign) {
+            (0, _NHFetch2.default)(pathUrl, 'GET', { sign: sign, t: new Date().getTime() }).then(function (res) {
+                if (res) {
+                    var data = res.data;
+                    if (data) {
+                        _this2.buildCheckedChildren(data);
+                    } else {
+                        _this2.getCustomDataSource();
+                    }
+                }
+            });
+        } else {
+            _this2.getCustomDataSource();
+        }
+    };
+
+    this.getCustomDataSource = function () {
+        var _props$dataSource = _this2.props.dataSource,
+            dataSource = _props$dataSource === undefined ? [] : _props$dataSource;
+
+        if (dataSource && dataSource.length > 0) {
+            _this2.buildCheckedChildren(dataSource);
+        } else {
+            _this2.getPropsCheckedText();
+        }
+    };
+
+    this.buildCheckedChildren = function (data) {
+        data.map(function (item) {
+            var itemVal = item.VALUE || item.value;
+            var itemLabel = item.LABEL || item.label;
+            if (itemVal === '1') {
+                _this2.setState({
+                    checkedChildren: itemLabel
+                });
+            } else {
+                _this2.setState({
+                    unCheckedChildren: itemLabel
+                });
+            }
+        });
+    };
+
+    this.onSwitchChange = function (checked) {
+        var onChange = _this2.props.onChange;
+
+        _this2.setState({
+            currentValue: checked ? '1' : '0',
+            checked: checked
+        }, function () {
+            if (onChange && typeof onChange === 'function') {
+                onChange(checked, _this2.state.currentValue);
+            }
+        });
+    };
+
+    this.onSwitchClick = function (checked) {
+        var onClick = _this2.props.onClick;
+
+        _this2.setState({
+            currentValue: checked ? '1' : '0',
+            checked: checked
+        }, function () {
+            if (onClick && typeof onClick === 'function') {
+                onClick(checked, _this2.state.currentValue);
+            }
+        });
+    };
+};
+
+NHSwitch.defaultProps = {
+    loading: false,
+    size: 'default',
+    disabled: false,
+    onChange: function onChange() {},
+    onClick: function onClick() {}
+};
+
+//属性检查
+NHSwitch.propTypes = {
+    sign: _propTypes2.default.string, //数据源标识
+    onChange: _propTypes2.default.func, //变化时回调函数
+    onClick: _propTypes2.default.func, //点击时回调函数
+    checkedChildren: _propTypes2.default.string, //选中时的内容
+    unCheckedChildren: _propTypes2.default.string, //未选中的内容
+    defaultChecked: _propTypes2.default.bool, //初始是否选中
+    loading: _propTypes2.default.bool, //加载中的开关
+    disabled: _propTypes2.default.bool, //是否禁用
+    size: _propTypes2.default.string, //开关大小,可选值: default/small,默认为default
+    dataSource: _propTypes2.default.arrayOf( //自定义数据源
+    _propTypes2.default.shape({
+        value: _propTypes2.default.string,
+        label: _propTypes2.default.node
+    }))
+};
+
+exports.default = NHSwitch;

package/lib/components/NHTable/AddFieldsModal.js

@@ -0,0 +1,368 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+
+var _modal = require("antd/lib/modal");
+
+var _modal2 = _interopRequireDefault(_modal);
+
+var _checkbox = require("antd/lib/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
+var _input = require("antd/lib/input");
+
+var _input2 = _interopRequireDefault(_input);
+
+var _icon = require("antd/lib/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _extends2 = require("babel-runtime/helpers/extends");
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _message2 = require("antd/lib/message");
+
+var _message3 = _interopRequireDefault(_message2);
+
+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/modal/style");
+
+require("antd/lib/checkbox/style");
+
+require("antd/lib/input/style");
+
+require("antd/lib/icon/style");
+
+require("antd/lib/message/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _isEqual = require("lodash/isEqual");
+
+var _isEqual2 = _interopRequireDefault(_isEqual);
+
+var _debounce = require("lodash/debounce");
+
+var _debounce2 = _interopRequireDefault(_debounce);
+
+var _classnames = require("classnames");
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactCustomScrollbars = require("react-custom-scrollbars");
+
+require("../../../assets/table/style.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * 高级搜索-添加搜索字段
+ */
+var currentLine = 0;
+
+var AddFieldsModal = function (_Component) {
+	(0, _inherits3.default)(AddFieldsModal, _Component);
+
+	function AddFieldsModal(props) {
+		(0, _classCallCheck3.default)(this, AddFieldsModal);
+
+		var _this = (0, _possibleConstructorReturn3.default)(this, (AddFieldsModal.__proto__ || (0, _getPrototypeOf2.default)(AddFieldsModal)).call(this, props));
+
+		_this.debounceSearch = function (value) {
+			_this.setState({ searchValue: value }, function () {
+				_this.changeItem();
+			});
+			// 搜索字段为空，重置currentLine
+			if (value == "") {
+				currentLine = 0;
+			}
+		};
+
+		_this.handleSearchChange = function (e) {
+			var value = e.target.value;
+
+			_this.debounceSearch(value);
+		};
+
+		_this.onChange = function (checkedList) {
+			var data = _this.props.data;
+
+			_this.setState({
+				checkedList: checkedList,
+				indeterminate: !!checkedList.length && checkedList.length < data.length,
+				checkAll: checkedList.length === data.length
+			});
+		};
+
+		_this.onCheckAllChange = function (e) {
+			var data = _this.props.data;
+
+			_this.setState({
+				checkedList: e.target.checked ? data.map(function (item) {
+					return item.dataIndex;
+				}) : [],
+				indeterminate: false,
+				checkAll: e.target.checked
+			});
+		};
+
+		_this.handleOk = function () {
+			var _this$props = _this.props,
+			    data = _this$props.data,
+			    onOk = _this$props.onOk;
+			var checkedList = _this.state.checkedList;
+
+			if (!checkedList || checkedList.length < 1) {
+				_message3.default.info('请至少选择一个字段');
+				return;
+			}
+			var result = [];
+			data.forEach(function (item) {
+				if (checkedList.includes(item.dataIndex)) {
+					var nitem = (0, _extends3.default)({}, item);
+					nitem.defaultSearch = true;
+					result.push(nitem);
+				}
+			});
+			onOk && onOk(result);
+		};
+
+		_this.handleCancel = function () {
+			var onCancel = _this.props.onCancel;
+
+			_this.setState({
+				searchValue: ""
+			});
+			onCancel && onCancel();
+		};
+
+		_this.handleKeyUp = function (e) {
+			// Enter键盘事件
+			if (e.keyCode == 13) {
+				_this.changeItem();
+			}
+		};
+
+		_this.changeItem = function () {
+			var elements = document.getElementById("" + _this.listID).getElementsByClassName("textHighLight");
+			if (elements.length) {
+				// 最后一个高亮
+				if (currentLine === elements.length) {
+					currentLine = 0;
+				}
+				// 清除高亮
+				for (var index = 0; index < elements.length; index++) {
+					var element = elements[index];
+					element.classList.remove("active");
+				}
+				// 添加高亮
+				elements[currentLine].classList.add("active");
+				// currentLine + 1
+				currentLine++;
+			}
+		};
+
+		_this.listID = "fields-" + Math.random().toString(36);
+		_this.state = {
+			searchValue: "", // 搜索字段
+			checkedList: _this.props.checkedList || [], // 选中项
+			indeterminate: false, // 控制全选样式状态
+			checkAll: false // 是否全选
+		};
+		_this.debounceSearch = (0, _debounce2.default)(_this.debounceSearch, 500);
+		return _this;
+	}
+
+	(0, _createClass3.default)(AddFieldsModal, [{
+		key: "componentWillReceiveProps",
+		value: function componentWillReceiveProps(nextProps) {
+			if ("checkedList" in nextProps && !(0, _isEqual2.default)(nextProps.checkedList, this.props.checkedList)) {
+				var checkedList = nextProps.checkedList,
+				    data = nextProps.data;
+
+				this.setState({
+					checkedList: checkedList,
+					checkAll: checkedList.length === data.length,
+					indeterminate: !!checkedList.length && checkedList.length < data.length
+				});
+			}
+		}
+
+		// 搜索
+
+
+		// 单个选择
+
+
+		// 全选
+
+
+		// 保存
+
+
+		// Enter键切换高亮
+
+	}, {
+		key: "render",
+		value: function render() {
+			var _props = this.props,
+			    wrapClassName = _props.wrapClassName,
+			    visible = _props.visible,
+			    width = _props.width,
+			    title = _props.title,
+			    data = _props.data,
+			    colNum = _props.colNum,
+			    onCancel = _props.onCancel;
+			var _state = this.state,
+			    searchValue = _state.searchValue,
+			    indeterminate = _state.indeterminate,
+			    checkAll = _state.checkAll,
+			    checkedList = _state.checkedList;
+
+			var reg = new RegExp(searchValue, "ig");
+			return _react2.default.createElement(
+				_modal2.default,
+				{
+					wrapClassName: (0, _classnames2.default)(wrapClassName, "addSearchFieldsModal"),
+					width: width,
+					title: title,
+					okText: "\u4FDD\u5B58",
+					visible: visible,
+					onCancel: this.handleCancel,
+					onOk: this.handleOk
+				},
+				_react2.default.createElement(
+					"div",
+					{ className: "searchBox" },
+					_react2.default.createElement(_input2.default, {
+						placeholder: "\u641C\u7D22\u5B57\u6BB5",
+						prefix: _react2.default.createElement(_icon2.default, { type: "search", style: { color: "#999" } }),
+						onChange: this.handleSearchChange,
+						onKeyUp: this.handleKeyUp,
+						style: { width: 280 }
+					})
+				),
+				_react2.default.createElement(
+					"div",
+					{ className: "checkAllBox" },
+					_react2.default.createElement(
+						_checkbox2.default,
+						{
+							indeterminate: indeterminate,
+							onChange: this.onCheckAllChange,
+							checked: checkAll
+						},
+						_react2.default.createElement(
+							"b",
+							null,
+							"\u5168\u9009"
+						)
+					),
+					_react2.default.createElement(
+						"span",
+						{ className: "tip" },
+						"\u5DF2\u9009\u62E9\uFF1A",
+						_react2.default.createElement(
+							"span",
+							{ className: "num" },
+							checkedList.length
+						)
+					)
+				),
+				_react2.default.createElement(
+					_reactCustomScrollbars.Scrollbars,
+					{ style: { height: 300 }, autoHide: true },
+					_react2.default.createElement(
+						_checkbox2.default.Group,
+						{
+							style: { width: "100%" },
+							value: checkedList,
+							onChange: this.onChange
+						},
+						_react2.default.createElement(
+							"table",
+							{ id: this.listID },
+							_react2.default.createElement(
+								"tbody",
+								null,
+								data.map(function (row, i) {
+									if (i % colNum === 0) {
+										return _react2.default.createElement(
+											"tr",
+											{ key: i },
+											data.slice(i, i % colNum === 0 ? i + colNum : i % colNum).map(function (item, j) {
+												var _label = item.title;
+												// 对label做高亮匹配
+												if (searchValue) {
+													var match = _label && _label.match(reg) || [];
+													_label = _label && _label.split(reg).map(function (_it, _idx) {
+														return _idx > 0 ? [_react2.default.createElement(
+															"span",
+															{
+																key: _idx,
+																className: "textHighLight"
+															},
+															match[0]
+														), _it] : _it;
+													});
+												}
+												return _react2.default.createElement(
+													"td",
+													{ key: j },
+													_react2.default.createElement(
+														_checkbox2.default,
+														{
+															value: item.dataIndex
+														},
+														_label
+													)
+												);
+											})
+										);
+									} else {
+										return null;
+									}
+								})
+							)
+						)
+					)
+				)
+			);
+		}
+	}]);
+	return AddFieldsModal;
+}(_react.Component);
+
+AddFieldsModal.defaultProps = {
+	visible: false,
+	width: 900, // 默认模态框宽度900
+	title: "添加搜索字段",
+	data: [], // 可供添加的字段列表
+	colNum: 6 // 默认一行显示6列
+};
+exports.default = AddFieldsModal;