@zat-design/sisyphus-react 3.8.3 → 3.9.0-beta.10

package/lib/ProTable/components/FormatColumn/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getParentElement = exports.formatColumn = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _moment15 = _interopRequireDefault(require("moment"));
@@ -17,8 +18,10 @@ var _utils = require("@zat-design/utils");
 var _TooltipTitle = _interopRequireDefault(require("../TooltipTitle"));
 var _RenderColumn = _interopRequireDefault(require("../RenderColumn"));
 var _utils2 = require("../../utils");
+var _utils3 = require("../../../utils");
 var _getEnumLabel = _interopRequireDefault(require("../../../ProEnum/utils/getEnumLabel"));
 var _ProForm = _interopRequireDefault(require("../../../ProForm"));
+var _excluded = ["title", "valueType", "format", "precision", "ellipsis", "code", "copyable", "width", "tooltip", "transform", "prefix", "suffix", "dataIndex", "originalDiffTip", "toolTipProps", "minWidth", "onDiff"];
 var isReactElement = function isReactElement(element) {
   return /*#__PURE__*/(0, _react.isValidElement)(element);
 };
@@ -52,12 +55,13 @@ var calcMinWidth = function calcMinWidth(_ref) {
 var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
   var column = _ref2.column,
     originalObj = _ref2.originalObj,
-    dataSourceObj = _ref2.dataSourceObj,
     rowKey = _ref2.rowKey,
     diffToolTip = _ref2.diffToolTip,
     wrapToolTipProps = _ref2.wrapToolTipProps,
     scroll = _ref2.scroll,
-    onUpdateMinWidth = _ref2.onUpdateMinWidth;
+    onUpdateMinWidth = _ref2.onUpdateMinWidth,
+    isInNewRow = _ref2.isInNewRow,
+    diffConfig = _ref2.diffConfig;
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -73,11 +77,12 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     prefix = column.prefix,
     suffix = column.suffix,
     dataIndex = column.dataIndex,
-    _column$originalDiffT = column.originalDiffTip,
-    originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT,
+    originalDiffTip = column.originalDiffTip,
     _column$toolTipProps = column.toolTipProps,
     toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
-    minWidth = column.minWidth;
+    minWidth = column.minWidth,
+    onDiff = column.onDiff,
+    otherProps = (0, _objectWithoutProperties2.default)(column, _excluded);
   // 仅在 {x: 'max-content', y: 300 } 且 column无指定 width minWidth 情况下 才开启 minWidth的自动计算
   var isMaxContentOverFlow = (0, _lodash.isObject)(scroll) ? (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
   calcMinWidth({
@@ -88,7 +93,7 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     callback: onUpdateMinWidth
   });
   var _toolTipProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, toolTipProps), wrapToolTipProps);
-  var _originalDiffTip = diffToolTip !== null && diffToolTip !== void 0 ? diffToolTip : originalDiffTip;
+  var _originalDiffTip = (diffConfig === null || diffConfig === void 0 ? void 0 : diffConfig.originalDataSource) || (diffConfig === null || diffConfig === void 0 ? void 0 : diffConfig.toolTip);
   // 前缀处理
   var prefixNode = function prefixNode(value, record, index) {
     if (!prefix) {
@@ -114,20 +119,32 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     }
   };
   if (column === null || column === void 0 ? void 0 : column.render) {
-    if (!originalObj && Object.keys(originalObj !== null && originalObj !== void 0 ? originalObj : {}).length === 0) {
+    if (!originalObj && Object.keys(originalObj !== null && originalObj !== void 0 ? originalObj : {}).length === 0 && !onDiff) {
       return;
     }
     var originalRender = column.render; // 保存原始的 render 方法
     // 自定义render 手动重载下
     column.render = function (value, record, index) {
-      var _originalObj$record$r;
       var isFn = (0, _lodash.isFunction)(originalRender);
-      var _value = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(value, record !== null && record !== void 0 ? record : {}, index) : undefined;
+      var _value = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(value, record !== null && record !== void 0 ? record : {}, index) : null;
       var originalValue = (0, _utils2.getOriginalValue)(value, record !== null && record !== void 0 ? record : {}, originalObj, rowKey, dataIndex);
-      var originalRenderValue = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(originalValue, (_originalObj$record$r = originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]) !== null && _originalObj$record$r !== void 0 ? _originalObj$record$r : {}, index) : undefined;
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      // 存在比对
+      if ((0, _lodash.isFunction)(otherProps === null || otherProps === void 0 ? void 0 : otherProps.viewRender) && (diffConfig === null || diffConfig === void 0 ? void 0 : diffConfig.originalDataSource)) {
+        var _originalObj$record$r;
+        var diffResult = otherProps.viewRender({
+          originalValue: originalValue,
+          originalRecord: (_originalObj$record$r = originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]) !== null && _originalObj$record$r !== void 0 ? _originalObj$record$r : {},
+          value: value,
+          record: record,
+          index: index
+        });
+        originalValue = diffResult;
+        otherProps.diffChange = diffResult;
+      }
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: (0, _utils3.isEmpty)(originalValue) ? null : originalValue,
         ellipsis: ellipsis,
         width: width,
         value: _value,
@@ -135,8 +152,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: _value,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
     return;
   }
@@ -162,19 +180,25 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
       var originalValue = (0, _utils2.getOriginalValue)(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = _utils.tools.calc(Number(originalValue || null), '*', multiple);
       var originalRenderValue = (0, _utils2.getDecimalDigits)(originalValue) > valueTypePrecision ? originalRealValue : originalRealValue.toFixed(valueTypePrecision);
-      if (!originalValue && originalValue !== 0) {
+      if ((0, _utils3.isEmpty)(originalValue)) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        return (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
       var node = (0, _jsxRuntime.jsxs)(_antd.Space, {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: originalValue === null ? null : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -182,8 +206,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
     // 千分位, 千分位带CNY前缀
   } else if (['thousandth', 'thousandthCNY'].includes(valueType)) {
@@ -193,7 +218,7 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
       var originalValue = (0, _utils2.getOriginalValue)(value, record, originalObj, rowKey, dataIndex);
       var originalRealValue = valueTypePrecision ? "".concat(Number(originalValue).toFixed(valueTypePrecision)) : "".concat(originalValue);
       var originalRenderValue = originalRealValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-      if (!originalValue && originalValue !== 0) {
+      if ((0, _utils3.isEmpty)(originalValue)) {
         originalRenderValue = '-';
       }
       var node = (0, _jsxRuntime.jsxs)(_antd.Space, {
@@ -201,11 +226,17 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: originalValue === null ? null : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -213,8 +244,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
   } else if (['datePicker', 'date', 'dateTime', 'dateStartTime', 'dateEndTime', 'dateStartEndTime'].includes(valueType)) {
     column.render = function (value, record, index) {
@@ -255,11 +287,17 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
       if (!value && renderValue === originalRenderValue) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: originalValue === null ? null : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -267,8 +305,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
   } else if (['enumName', 'enumCodeName'].includes(valueType)) {
     column.render = function (value, record, index) {
@@ -296,9 +335,10 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: originalValue === null ? null : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -306,8 +346,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
   } else if (precision || prefix || suffix) {
     column.render = function (value, record, index) {
@@ -318,15 +359,21 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
-      if (!originalValue && originalValue !== 0) {
+      if ((0, _utils3.isEmpty)(originalValue)) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: originalValue === null ? null : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -334,8 +381,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
   } else if (valueType === 'address') {
     column.render = function (value, record, index) {
@@ -347,10 +395,17 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         return !!item;
       })) === null || _realValue$filter === void 0 ? void 0 : _realValue$filter.length) === 0;
       if ((0, _lodash.isEqual)(value, originalValue) && isEmpty) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
+      }
+      if (originalValue && !(0, _lodash.isEqual)(realValue, originalRealValue)) {
+        otherProps.diffChange = true;
       }
       var className = (0, _classnames.default)({
-        'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
       var renderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
@@ -365,24 +420,35 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         code: code,
         value: originalRealValue
       });
-      return (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
+      var renderNode = (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
         className: className,
         isView: true,
         mode: "address",
         code: code,
         value: realValue,
-        tooltip: originalValue !== undefined ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalRenderValue, (0, _jsxRuntime.jsx)("br", {}), ellipsis ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: ["\u5F53\u524D\u503C\uFF1A", renderValue]
-          }) : undefined]
-        }) : ellipsis
+        tooltip: false
       });
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
+        valueType: valueType,
+        originalValue: originalValue === null ? null : originalRenderValue,
+        ellipsis: ellipsis,
+        width: width,
+        node: renderNode,
+        value: renderValue,
+        currentValue: renderValue,
+        originalDiffTip: _originalDiffTip,
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
   } else if (copyable) {
     column.render = function (value, record, index) {
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsxs)(_antd.Space, {
         size: 8,
-        children: [prefixNode(value, record, index), (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+        children: [prefixNode(value, record, index), (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
           valueType: valueType,
           copyable: copyable,
           ellipsis: ellipsis,
@@ -391,21 +457,28 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
           value: value,
           currentValue: value,
           toolTipProps: _toolTipProps,
-          minWidth: minWidth
-        }), suffixNode(value, record, index)]
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
+        })), suffixNode(value, record, index)]
       });
     };
   } else if (ellipsis) {
     column.render = function (value, record, index) {
       var originalValue = (0, _utils2.getOriginalValue)(value, record, originalObj, rowKey, dataIndex);
       if (!value && value !== 0 && value === originalValue) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsxs)(_antd.Space, {
         size: 8,
-        children: [prefixNode(value, record, index), (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+        children: [prefixNode(value, record, index), (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
           valueType: valueType,
-          originalValue: originalValue === undefined ? undefined : originalValue || '-',
+          originalValue: originalValue === null ? null : originalValue || '-',
           ellipsis: ellipsis,
           width: width,
           node: value,
@@ -413,8 +486,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
           currentValue: value || '-',
           originalDiffTip: _originalDiffTip,
           toolTipProps: _toolTipProps,
-          minWidth: minWidth
-        }), suffixNode(value, record, index)]
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
+        })), suffixNode(value, record, index)]
       });
     };
   } else {
@@ -425,11 +499,17 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         children: [prefixNode(value, record, index), value, suffixNode(value, record, index)]
       });
       if (!value && value !== 0 && value === originalValue) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
-      return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
+      var isInNewRowFlag = isInNewRow(record);
+      return (0, _jsxRuntime.jsx)(_RenderColumn.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalValue || '-',
+        originalValue: originalValue === null ? null : originalValue || '-',
         ellipsis: ellipsis,
         width: width,
         node: node,
@@ -437,8 +517,9 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: value || '-',
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
-      });
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      }));
     };
   }
 };

package/lib/ProTable/components/RenderColumn/index.d.ts

@@ -12,6 +12,8 @@ interface Props {
     originalValue?: any;
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
     minWidth?: number;
+    isInNewRowFlag?: boolean;
+    diffChange?: boolean;
 }
 declare const RenderColumn: FC<Props>;
 export default RenderColumn;

package/lib/ProTable/components/RenderColumn/index.js

@@ -10,8 +10,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
 var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@ant-design/icons");
 var _reactSvg = require("react-svg");
+var _utils = require("../../../utils");
 var _copy = _interopRequireDefault(require("../../../assets/copy.svg"));
 var Paragraph = _antd.Typography.Paragraph,
   Text = _antd.Typography.Text;
@@ -28,37 +30,61 @@ var RenderColumn = function RenderColumn(props) {
     originalDiffTip = props.originalDiffTip,
     _props$toolTipProps = props.toolTipProps,
     toolTipProps = _props$toolTipProps === void 0 ? {} : _props$toolTipProps,
-    minWidth = props.minWidth;
+    minWidth = props.minWidth,
+    isInNewRowFlag = props.isInNewRowFlag;
   var _useSetState = (0, _ahooks.useSetState)({
       tooltip: false
     }),
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
-  if (originalValue !== undefined) {
+  var cellDiffCls = (0, _classnames.default)({
+    'varied-cell': originalDiffTip
+  });
+  if (!(0, _utils.isEmpty)(originalValue, '-') && !isInNewRowFlag) {
     var renderNode = value ? node : '-';
     if (ellipsis || originalDiffTip) {
-      if (ellipsis) {
-        renderNode = (0, _jsxRuntime.jsx)(Text, {
-          style: {
-            width: currentValue === '-' ? 32.5 : width,
-            minWidth: minWidth
-          },
-          ellipsis: {
-            tooltip: false
-          },
-          children: ellipsis ? currentValue : renderNode
-        });
+      renderNode = (0, _jsxRuntime.jsx)(Text, {
+        style: {
+          width: currentValue === '-' ? 32.5 : width,
+          minWidth: minWidth
+        },
+        ellipsis: {
+          tooltip: false
+        },
+        children: ellipsis ? currentValue : renderNode
+      });
+      if ((props === null || props === void 0 ? void 0 : props.diffChange) === false) {
+        return renderNode;
+      }
+      if (Array.isArray(originalValue)) {
+        console.error('Error: When enabled, dataIndex corresponds to an array, which needs to be converted using viewRender');
       }
       return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        className: "varied-cell",
+        className: cellDiffCls,
         style: {
           width: width,
           minWidth: minWidth
         },
-        title: originalDiffTip ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalValue, (0, _jsxRuntime.jsx)("br", {}), ellipsis ? "\u5F53\u524D\u503C\uFF1A".concat(currentValue) : undefined]
-        }) : node,
+        overlayClassName: "original-value-tootip",
+        placement: "topLeft",
+        autoAdjustOverflow: false,
+        title: (0, _jsxRuntime.jsx)(_antd.Space, {
+          direction: "vertical",
+          className: "changed-tooltip",
+          children: originalDiffTip ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [(0, _jsxRuntime.jsxs)(_antd.Space, {
+              align: "start",
+              className: "original-value-container",
+              children: ["\u521D\u59CB\u503C\uFF1A", !Array.isArray(originalValue) ? originalValue : null]
+            }), (0, _jsxRuntime.jsx)(_antd.Space, {
+              className: "current-value-container",
+              children: ellipsis ? (0, _jsxRuntime.jsxs)(_antd.Space, {
+                children: ["\u5F53\u524D\u503C\uFF1A", currentValue]
+              }) : null
+            })]
+          }) : node
+        }),
         getPopupContainer: function getPopupContainer(triggerNode) {
           return triggerNode.parentNode;
         }
@@ -66,8 +92,11 @@ var RenderColumn = function RenderColumn(props) {
         children: renderNode
       }));
     }
+    if ((props === null || props === void 0 ? void 0 : props.diffChange) === false) {
+      return renderNode;
+    }
     return (0, _jsxRuntime.jsx)("span", {
-      className: "varied-cell",
+      className: cellDiffCls,
       style: {
         width: width,
         minWidth: minWidth

package/lib/ProTable/index.d.ts

@@ -1,19 +1,20 @@
 /// <reference types="react" />
 import { ProTableProps } from './propsType';
+import useAntdTable from './hooks/useAntdTable';
 export declare const TableContext: import("react").Context<{}>;
 export declare const defaultPage: {
     pageNum: number;
     pageSize: number;
 };
-declare function ProTable(props: ProTableProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ProTable {
-    var defaultProps: {
+declare const ProTable: {
+    (props: ProTableProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
         quickConfig: boolean;
         stripe: boolean;
         draggable: boolean;
         disabled: boolean;
         isView: boolean;
     };
-    var useAntdTable: typeof import("./hooks/useAntdTable").default;
-}
+    useAntdTable: typeof useAntdTable;
+};
 export default ProTable;

package/lib/ProTable/index.js

@@ -36,7 +36,7 @@ var defaultPage = exports.defaultPage = {
   pageNum: 1,
   pageSize: 10
 };
-function ProTable(props) {
+var ProTable = function ProTable(props) {
   var _locale$ProTable, _props$scroll, _curTableConfig$pathK;
   var _ref = (0, _index.useProConfig)('globalConfig') || {},
     configStorage = _ref.storage; // 获取全局缓存位置配置
@@ -121,7 +121,6 @@ function ProTable(props) {
     });
   });
   var originalObj = _originalDataSource ? (0, _lodash.keyBy)(_originalDataSource, 'rowKey') : undefined;
-  var dataSourceObj = _dataSource ? (0, _lodash.keyBy)(_dataSource, 'rowKey') : {};
   var propsColumnObj = (0, _react.useMemo)(function () {
     return propsColumns.reduce(function (acc, cur) {
       // @ts-ignore
@@ -190,6 +189,11 @@ function ProTable(props) {
       setCurColumns(nextColumns);
     };
   };
+  var _rowClassName = function _rowClassName(record, index) {
+    if (originalDataSource && !originalObj.hasOwnProperty((0, _lodash.get)(record, 'rowKey'))) {
+      return 'new-cell';
+    }
+  };
   var columns = (0, _react.useMemo)(function () {
     var newColumns = curColumns.map(function (item, index) {
       var _propsColumnObj$getCo2;
@@ -215,18 +219,19 @@ function ProTable(props) {
       (0, _FormatColumn.formatColumn)({
         column: item,
         originalObj: originalObj,
-        dataSourceObj: dataSourceObj,
-        rowKey: 'rowKey',
+        rowKey: props.rowKey,
+        diffConfig: diffConfig,
         diffToolTip: toolTip,
         wrapToolTipProps: wrapToolTipProps,
         scroll: _scroll,
         onUpdateMinWidth: function onUpdateMinWidth(w) {
           curColumns[index].minWidth = w;
-        }
+        },
+        isInNewRow: _rowClassName
       });
     });
     return newColumns;
-  }, [curColumns, handleResize, _scroll]);
+  }, [curColumns, handleResize, _scroll, originalDataSource, originalObj, _rowClassName]);
   var _columns = (0, _react.useMemo)(function () {
     return columns === null || columns === void 0 ? void 0 : columns.filter(function (item, index) {
       var show = item.show;
@@ -375,11 +380,6 @@ function ProTable(props) {
       return _ref7.apply(this, arguments);
     };
   }();
-  var _rowClassName = function _rowClassName(record, index) {
-    if (originalDataSource && !originalObj.hasOwnProperty((0, _lodash.get)(record, 'rowKey'))) {
-      return 'new-cell';
-    }
-  };
   var TableComponent = draggable ? _RcTable.DraggableTable : _RcTable.BaseTable;
   // 标记样式
   var tagStyle = {
@@ -453,7 +453,7 @@ function ProTable(props) {
       })]
     })
   });
-}
+};
 ProTable.defaultProps = {
   quickConfig: false,
   stripe: true,

package/lib/ProTable/propsType.d.ts

@@ -41,6 +41,12 @@ export interface ProTableColumn extends Omit<ColumnType<any>, 'dataIndex'> {
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
     transform?: (value: any, record?: any) => string[];
     show?: boolean | (() => boolean);
+    onDiff?: ({ value, originValue }: {
+        value: any;
+        originValue: any;
+    }) => boolean;
+    viewRender?: ({ value, record, index, originalValue, originalRecord }: any) => any;
+    diffChange?: boolean;
 }
 export interface CreateTreeFromArrayOptions {
     itemKey?: string;