dlt-for-react 1.0.13 → 1.0.14

package/README.md

@@ -8,7 +8,7 @@ npm publish
 
 ## 前端 dlt-for-react 依赖包版本更新记录
 
-##### 当前最新版本：1.0.13
+##### 当前最新版本：1.0.14
 
 ##### 安装依赖
 
@@ -16,6 +16,10 @@ npm publish
 
 ##### 版本修改记录
 
+#### V1.0.14—2023 年 10 月 25 日
+
+1. 补充 KyTableCardList 组件
+
 #### V1.0.13—2023 年 10 月 24 日
 
 1. 补充 KyTree 组件

package/assets/components/KyTableCardList/index.less

@@ -0,0 +1,200 @@
+:global {
+  .ky-table-card-list {
+    width: 100%;
+    height: 100%;
+    .custom_scrollbars {
+      width: 100%;
+    }
+    .searchDiv {
+      margin-bottom: 16px;
+      .hide_select_field_icon {
+        .ant-select-arrow {
+          display: none;
+        }
+      }
+
+      .ant-select .ant-select-selection {
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+      }
+      .search-input {
+        width: 230px;
+      }
+      .search-radio,
+      .search-checkbox {
+        margin-left: 28px;
+      }
+
+      .search-btn {
+        margin: 0 20px;
+      }
+      .height-text {
+        margin-left: 10px;
+      }
+    }
+
+    .highSearch-box {
+      margin-bottom: 10px;
+      div.ant-select-selection {
+        border-width: 1px !important;
+      }
+      button.ant-btn {
+        margin: 10px 0 0px 10px;
+      }
+      div.ant-form-item {
+        margin-bottom: 0px;
+      }
+      span.ant-time-picker {
+        width: 100%;
+      }
+    }
+    .content-box {
+      padding: 2px 0 0 0;
+      .card-list {
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
+        width: 100%;
+        height: 110px;
+        margin-bottom: 16px;
+        padding: 24px;
+        padding: 24px 24px 24px 22px;
+        overflow: hidden;
+        background: #ffffff;
+        border-right: 1px solid #d9d9d9;
+        border-radius: 6px;
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12);
+        opacity: 1;
+
+        .statusLine {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 6px;
+          height: 110px;
+          background: #397ef0;
+        }
+        .item-left {
+          flex-shrink: 0;
+          width: 70%;
+          .title_box {
+            display: flex;
+            .title {
+              width: 400px;
+              margin-bottom: 16px;
+              overflow: hidden;
+              color: #397ef0;
+              font-weight: bold;
+              font-size: 18px;
+              font-family: Source Han Sans CN;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              cursor: pointer;
+              opacity: 1;
+            }
+            .subhead {
+              margin-left: 25px;
+              .subhead_label {
+                color: rgba(0, 0, 0, 0.85);
+              }
+            }
+          }
+          .label,
+          .value {
+            display: inline-block;
+            color: rgba(0, 0, 0, 0.85);
+            font-weight: bold;
+            font-size: 14px;
+            font-family: Source Han Sans CN;
+          }
+          .value {
+            color: rgba(0, 0, 0, 0.65);
+            font-weight: 400;
+          }
+          .warningText {
+            color: #ff4d4f;
+            cursor: pointer;
+          }
+        }
+        .status {
+          flex-basis: 10%;
+          flex-shrink: 0;
+          margin-right: 16px;
+          line-height: 62px;
+          text-align: right;
+          .dot {
+            position: relative;
+            top: -2px;
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-right: 4px;
+            border-radius: 50%;
+          }
+          .status-text {
+            font-weight: 400;
+            font-size: 14px;
+            font-family: Source Han Sans CN;
+            opacity: 1;
+          }
+        }
+        .operate {
+          flex-basis: 20%;
+          flex-shrink: 0;
+          line-height: 62px;
+          text-align: right;
+          .iconDown {
+            margin-left: 4px;
+            font-size: 12px;
+          }
+          .action {
+            color: #397ef0;
+            font-weight: 400;
+            font-size: 14px;
+            font-family: Source Han Sans CN;
+            opacity: 1;
+            &[disabled] {
+              color: rgba(0, 0, 0, 0.45);
+            }
+            .operate-icon {
+              width: 20px;
+              height: 20px;
+            }
+          }
+        }
+      }
+    }
+    .card-list-pagination {
+      width: 100%;
+      height: 24px;
+      .ant-pagination {
+        text-align: right;
+      }
+      .ant-pagination.mini .ant-pagination-total-text,
+      .ant-pagination.mini .ant-pagination-simple-pager {
+        float: left;
+      }
+      .ant-pagination-item-active {
+        background: #fff;
+        a {
+          color: #397ef0;
+        }
+      }
+    }
+  }
+  .ant-dropdown-menu-item .action {
+    color: #397ef0;
+    font-weight: 400;
+    font-size: 14px;
+    font-family: Source Han Sans CN;
+    opacity: 1;
+    &[disabled] {
+      color: rgba(0, 0, 0, 0.45);
+    }
+    .operate-icon {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/lib/components/KyTableCardList/AddFieldsModal.js

@@ -0,0 +1,370 @@
+"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");
+
+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;
+									}
+								})
+							)
+						)
+					)
+				),
+				_react2.default.createElement(
+					"style",
+					{ jsx: "true", global: "true" },
+					"\n                            .addSearchFieldsModal .searchBox{\n\t\t\t\t\t\t\t\tmargin-bottom: 16px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .checkAllBox{\n\t\t\t\t\t\t\t\tmargin: 0 0 8px 9px;\n\t\t\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .checkAllBox .tip{\n\t\t\t\t\t\t\t\tcolor: #bbb;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .checkAllBox .num{\n\t\t\t\t\t\t\t\tcolor: #fc0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal table{\n\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\tborder: 1px solid #e8e8e8;\n\t\t\t\t\t\t\t\tborder-right: 0;\n\t\t\t\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t\t\t\t\tborder-radius: 4px 4px 0 0;\n\t\t\t\t\t\t\t\tborder-collapse: separate;\n\t\t\t\t\t\t\t\tborder-spacing: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal  table  td{\n\t\t\t\t\t\t\t\tborder-right: 1px solid #e8e8e8;\n\t\t\t\t\t\t\t\tborder-bottom: 1px solid #e8e8e8;\n\t\t\t\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal  table  td:hover{\n\t\t\t\t\t\t\t\tbackground-color: #eef7fe;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal  table  .ant-checkbox-wrapper{\n\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\t\tpadding: 6px 8px;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .textHighLight{\n\t\t\t\t\t\t\t\tbackground-color: #fff5cc;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t.addSearchFieldsModal .textHighLight .active{\n\t\t\t\t\t\t\t\tbackground-color: #ffdc52;\n\t\t\t\t\t\t\t}\n                        "
+				)
+			);
+		}
+	}]);
+	return AddFieldsModal;
+}(_react.Component);
+
+AddFieldsModal.defaultProps = {
+	visible: false,
+	width: 900, // 默认模态框宽度900
+	title: "添加搜索字段",
+	data: [], // 可供添加的字段列表
+	colNum: 6 // 默认一行显示6列
+};
+exports.default = AddFieldsModal;