dlt-for-react 1.1.11 → 1.1.13

package/README.md

@@ -8,7 +8,7 @@ npm publish
 
 ## 前端 dlt-for-react 依赖包版本更新记录
 
-##### 当前最新版本：1.1.11
+##### 当前最新版本：1.1.13
 
 ##### 安装依赖
 
@@ -16,29 +16,37 @@ npm publish
 
 ##### 版本修改记录
 
+#### V1.1.13—2024 年 2 月 22 日
+
+1. 解决KyEditableTable样式的问题
+
+#### V1.1.11—2024 年 2 月 1 日
+
+1. 解决 KyTableCardList 配置列内容溢出隐藏问题
+
 #### V1.1.11—2024 年 1 月 25 日
 
-1. 解决KyTableCardList查询的问题
+1. 解决 KyTableCardList 查询的问题
 
 #### V1.1.10—2024 年 1 月 24 日
 
-1. 解决NHFetch表单提交的问题
+1. 解决 NHFetch 表单提交的问题
 
 #### V1.1.8—2023 年 12 月 29 日
 
-1. 解决table查询强制重置了分页加载量的问题
+1. 解决 table 查询强制重置了分页加载量的问题
 
 #### V1.1.7—2023 年 12 月 22 日
 
-1. 优化KyTable列表样式问题
+1. 优化 KyTable 列表样式问题
 
 #### V1.1.6—2023 年 11 月 22 日
 
-1. 解决KyTable存在二级表头时，无法固定操作列的问题
+1. 解决 KyTable 存在二级表头时，无法固定操作列的问题
 
 #### V1.1.5—2023 年 11 月 22 日
 
-1. 修改getSizebug
+1. 修改 getSizebug
 
 #### V1.1.4—2023 年 11 月 21 日
 

package/assets/components/KyEditableTable/index.less

@@ -3,114 +3,132 @@
 @BUTTON_COLOR: #1890ff;
 
 :global {
-  .self-editable-table {
-    .ant-table-small>.ant-table-content>.ant-table-body {
-      margin: 0;
-    }
+  .KyEditableTable {
+    .self-editable-table {
+      .ant-table-small > .ant-table-content > .ant-table-body {
+        margin: 0;
+      }
 
-    .ant-table {
-      border-radius: 3px;
-    }
+      .ant-table {
+        border-radius: 3px;
+      }
 
-    .editableTable-item-required::before {
-      display: inline-block;
-      margin-right: 4px;
-      color: #f5222d;
-      font-weight: 500;
-      font-size: 14px;
-      font-family: SimSun, sans-serif;
-      line-height: 1;
-      content: '*';
+      .editableTable-item-required::before {
+        display: inline-block;
+        margin-right: 4px;
+        color: #f5222d;
+        font-weight: 500;
+        font-size: 14px;
+        font-family: SimSun, sans-serif;
+        line-height: 1;
+        content: "*";
+      }
     }
-  }
-
-  .operation {
-    margin-bottom: 16px;
-  }
-}
 
-.self-editable-table {
-  .ant-table-thead {
-    th {
-      padding: 13px 8px !important;
-      // height          : 52px !important;
-      background-color: @TR_COLOR  !important;
+    .operation {
+      margin-bottom: 16px;
     }
-  }
-
-  .ant-table-small>.ant-table-content>.ant-table-body {
-    margin: 0;
-  }
 
-  .ant-table-tbody {
-    td {
-      position: relative;
-      max-width: 234px;
-      padding: 13px 8px !important;
-
-      .ellipsis_dom {
-        float: left;
-        max-width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    .self-editable-table {
+      .ant-table-thead {
+        th {
+          padding: 13px 8px !important;
+          // height          : 52px !important;
+          background-color: @TR_COLOR !important;
+        }
       }
-    }
 
-    tr {
-      .ant-form-item-control {
-        line-height: 100%;
+      .ant-table-small > .ant-table-content > .ant-table-body {
+        margin: 0;
       }
 
-      &:nth-child(even) {
-        background-color: @TR_COLOR;
+      .ant-table-tbody {
+        td {
+          position: relative;
+          max-width: 234px;
+          padding: 13px 8px !important;
+
+          .ellipsis_dom {
+            float: left;
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        tr {
+          .ant-form-item-control {
+            line-height: 100%;
+          }
+
+          &:nth-child(even) {
+            background-color: @TR_COLOR;
+          }
+        }
       }
-    }
-  }
 
-  .self-editable-row .ant-form-explain {
-    position: absolute;
-    font-size: 12px;
-  }
+      .self-editable-row .ant-form-explain {
+        position: absolute;
+        font-size: 12px;
+      }
 
-  .ant-input,
-  .ant-select-disabled .ant-select-selection {
-    background: transparent;
-    border: 0;
-  }
+      .ant-input,
+      .ant-select-disabled .ant-select-selection {
+        // background: transparent;
+        // border: 0;
+      }
 
-  .ant-table-header-column {
-    color: #262626;
-    font-weight: bold;
-    font-family: inherit;
-  }
+      .ant-table-header-column {
+        color: #262626;
+        font-weight: bold;
+        font-family: inherit;
+      }
 
-  .ant-table-column-title {
-    font-weight: bold;
-  }
+      .ant-table-column-title {
+        font-weight: bold;
+      }
 
-  .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
-  .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
-  .ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
-  .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
-    background-color: #f0f0f0 !important;
-  }
+      .ant-table-thead
+        > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(
+          .ant-table-row-selected
+        )
+        > td,
+      .ant-table-tbody
+        > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(
+          .ant-table-row-selected
+        )
+        > td,
+      .ant-table-thead
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td,
+      .ant-table-tbody
+        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+        > td {
+        // background-color: #f0f0f0 !important;
+      }
 
-  .ant-pagination-item-active {
-    background: #f0f0f0;
-    border-color: transparent;
-  }
+      .ant-pagination-item-active {
+        background: #f0f0f0;
+        border-color: transparent;
+      }
 
-  .ant-table-pagination.ant-pagination {
-    float: unset;
-    text-align: center;
-  }
+      .ant-table-pagination.ant-pagination {
+        float: unset;
+        text-align: center;
+      }
 
-  .option_btns {
-    margin-right: 12px;
+      .option_btns {
+        margin-right: 12px;
 
-    & a {
-      color: @BUTTON_COLOR;
+        & a {
+          color: @BUTTON_COLOR;
+        }
+      }
     }
+
+    // .self-editable-table .ant-table-tbody tr:nth-child(even) {
+    //   background-color: #fff;
+    // }
   }
-}
+}

package/assets/components/KyTableCardList/index.less

@@ -100,18 +100,29 @@
               }
             }
           }
-          .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;
+          .column {
+            display: flex;
+            align-items: center;
+            .label,
+            .value {
+              display: inline-block;
+              color: rgba(0, 0, 0, 0.85);
+              font-weight: bold;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+            }
+            .label {
+              min-width: 70px;
+            }
+            .value {
+              color: rgba(0, 0, 0, 0.65);
+              font-weight: 400;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
           }
+
           .warningText {
             color: #ff4d4f;
             cursor: pointer;
@@ -182,6 +193,12 @@
         }
       }
     }
+    .textOverFlow {
+      position: relative;
+      overflow: hidden;
+      line-height: normal;
+      text-overflow: ellipsis;
+    }
   }
   .ant-dropdown-menu-item .action {
     color: #397ef0;

package/lib/components/KyEditableTable/index.js

@@ -1422,7 +1422,7 @@ var KyEditableTable = function (_Component2) {
       };
       return _react2.default.createElement(
         'div',
-        null,
+        { className: "KyEditableTable" },
         !readOnly && _react2.default.createElement(
           'div',
           { layout: 'inline', className: 'operation' },

package/lib/components/KyTableCardList/index.js

@@ -149,17 +149,20 @@ var _highSearchForm = require("./highSearchForm");
 
 var _highSearchForm2 = _interopRequireDefault(_highSearchForm);
 
+var _overflowColumn = require("./overflowColumn");
+
+var _overflowColumn2 = _interopRequireDefault(_overflowColumn);
+
 var _KyIcon = require("../KyIcon");
 
 var _KyIcon2 = _interopRequireDefault(_KyIcon);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/*******
- * @description: 科研卡片表格-KyTableCardList
- * @author: 琴时
- */
-var Search = _input2.default.Search;
+var Search = _input2.default.Search; /*******
+                                      * @description: 科研卡片表格-KyTableCardList
+                                      * @author: 琴时
+                                      */
 
 var KyTableCardList = function (_React$Component) {
   (0, _inherits3.default)(KyTableCardList, _React$Component);
@@ -580,6 +583,11 @@ var KyTableCardList = function (_React$Component) {
       _this.props.onClick && _this.props.onClick(row);
     };
 
+    _this.handelPopoverDom = function (itemM, item) {
+      var dom = itemM.render ? itemM.render(item[itemM.dataIndex], item, itemM) : item[itemM.dataIndex];
+      return _react2.default.createElement(_overflowColumn2.default, { text: dom });
+    };
+
     _this.state = {
       filterDropdownVisibleMap: {},
       searchParams: (0, _extends3.default)({}, _this.props.searchParams), //自定义的搜索条件
@@ -674,6 +682,11 @@ var KyTableCardList = function (_React$Component) {
 
     //pageSize 变化的回调
 
+
+    /**
+     * 将列溢出的处理为Popover
+     */
+
   }, {
     key: "render",
     value: function render() {
@@ -931,7 +944,7 @@ var KyTableCardList = function (_React$Component) {
                             {
                               span: 24 / newColumns.length,
                               key: indexM,
-                              className: itemM.dataIndex,
+                              className: (0, _classnames2.default)("column", "" + itemM.dataIndex),
                               style: {
                                 width: itemM.width,
                                 minWidth: itemM.minWidth
@@ -950,7 +963,7 @@ var KyTableCardList = function (_React$Component) {
                               {
                                 className: (0, _classnames2.default)("value", "value_" + itemM.dataIndex)
                               },
-                              itemM.render ? itemM.render(item[itemM.dataIndex], item, itemM) : item[itemM.dataIndex]
+                              _this2.handelPopoverDom(itemM, item)
                             )
                           );
                         })

package/lib/components/KyTableCardList/overflowColumn.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _popover = require('antd/lib/popover');
+
+var _popover2 = _interopRequireDefault(_popover);
+
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
+require('antd/lib/popover/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var parentDomTimer = []; /**
+                          * @Description:将列溢出的处理为Popover
+                          * @Version: 1.0
+                          * @Author: 琴时
+                          */
+
+var OverflowColumn = function OverflowColumn(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === undefined ? '' : _ref$text,
+      _ref$style = _ref.style,
+      style = _ref$style === undefined ? {} : _ref$style;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
+      overflowFlag = _useState2[0],
+      setoverflowFlag = _useState2[1]; //是否溢出
+
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray3.default)(_useState3, 2),
+      parentSize = _useState4[0],
+      setparentSize = _useState4[1]; //真实宽高
+
+
+  var parentDom = (0, _react.useCallback)(function (node) {
+    // 此处使用setTimeout获取真正渲染完成的元素，不够保险也不够优雅，后续若有好方法可替换此处
+    var Timer = setTimeout(function () {
+      if (node !== null) {
+        var height = node.getBoundingClientRect().height;
+        var width = node.getBoundingClientRect().width;
+        setparentSize({ height: height, width: width });
+      }
+    }, 100);
+    parentDomTimer.push(Timer);
+  }, []);
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      clearparentDomTimer();
+    };
+  }, []);
+
+  // 清除定时器
+  var clearparentDomTimer = function clearparentDomTimer() {
+    if (parentDomTimer.length > 0) {
+      parentDomTimer.forEach(function (item) {
+        clearTimeout(item);
+      });
+      parentDomTimer = [];
+    }
+  };
+
+  var childDom = (0, _react.useCallback)(function (node) {
+    if (node !== null && parentSize.width) {
+      var height = node.getBoundingClientRect().height;
+      var width = node.getBoundingClientRect().width;
+      if (width > parentSize.width) {
+        //这里判断内容是否溢出
+        setoverflowFlag(true);
+      } else {
+        setoverflowFlag(false);
+      }
+    }
+  }, [parentSize]);
+  return _react2.default.createElement(
+    'div',
+    { ref: parentDom, className: 'textOverFlow', style: style },
+    overflowFlag ? _react2.default.createElement(
+      _popover2.default,
+      {
+        placement: 'topLeft',
+        content: _react2.default.createElement(
+          'div',
+          { style: { maxWidth: 200, wordBreak: 'break-all' } },
+          text
+        )
+      },
+      _react2.default.createElement(
+        'div',
+        { className: 'textOverFlow' },
+        text
+      )
+    ) : _react2.default.createElement(
+      'span',
+      { ref: childDom },
+      text
+    )
+  );
+};
+
+exports.default = (0, _react.memo)(OverflowColumn);