@zat-design/sisyphus-react 3.8.3 → 3.9.0

package/lib/ProForm/components/render/ChangedWrapper.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _diffOriginal = require("../../utils/diffOriginal");
 var _ProConfigProvider = require("../../../ProConfigProvider");
 var _utils = require("../../../utils");
-var _excluded = ["name", "names", "namesStr", "form", "equalWith", "children", "type", "diffConfig", "valuePropName", "normalize", "getValueProps"];
+var _excluded = ["name", "names", "namesStr", "form", "equalWith", "children", "type", "diffConfig", "valuePropName", "normalize", "getValueProps", "viewRender"];
 var ChangedWrapper = function ChangedWrapper(props) {
   var _diffConfig$toolTip, _children$props, _children$props2, _children$props3;
   var name = props.name,
@@ -32,12 +32,16 @@ var ChangedWrapper = function ChangedWrapper(props) {
     valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
     normalize = props.normalize,
     getValueProps = props.getValueProps,
+    viewRender = props.viewRender,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  // const contentRef = useRef(null);
   var _useProConfig = (0, _ProConfigProvider.useProConfig)('ProForm'),
     isDiffAll = _useProConfig.isDiffAll;
   var originalValues = diffConfig.originalValues,
     changeTipColor = diffConfig.changeTipColor,
-    addTipColor = diffConfig.addTipColor;
+    addTipColor = diffConfig.addTipColor,
+    _diffConfig$scrollFol = diffConfig.scrollFollowParent,
+    scrollFollowParent = _diffConfig$scrollFol === void 0 ? true : _diffConfig$scrollFol;
   var toolTip = (_diffConfig$toolTip = diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
   var isWatch = toolTip && !['FormList', 'ProEditTable'].includes(type);
   var originalValue = (names === null || names === void 0 ? void 0 : names.length) ? names.map(function (name) {
@@ -57,9 +61,19 @@ var ChangedWrapper = function ChangedWrapper(props) {
   }, [isWatch, noChange, props[valuePropName], originalValue]);
   var isAdd = diffType === 'add';
   var isChanged = diffType === 'changed';
+  var viewRenderFun = (0, _react.useMemo)(function () {
+    return function (orgValue) {
+      return viewRender(orgValue, originalValues, {
+        form: form
+      });
+    };
+  }, [form]);
   var tipContent = (0, _react.useMemo)(function () {
     if (!isWatch || noChange) return undefined;
-    var valueProps = getValueProps ? getValueProps(originalValue) : originalValue;
+    var valueProps = getValueProps && !names ? getValueProps(originalValue) : {
+      value: originalValue
+    };
+    if (viewRender) return viewRenderFun(valueProps === null || valueProps === void 0 ? void 0 : valueProps.value);
     return /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, children.props), {}, (0, _defineProperty2.default)({
       isView: true
     }, valuePropName, valueProps === null || valueProps === void 0 ? void 0 : valueProps.value))) : undefined;
@@ -71,27 +85,30 @@ var ChangedWrapper = function ChangedWrapper(props) {
       originalValues: isNestedField ? originalValues : undefined
     }, children.props), rest));
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // const isFocus = useFocus(contentRef.current);
   var tipOpenCalc = function tipOpenCalc() {
     if (!toolTip) return false;
-    // 传入undefined 鼠标移入显示移出隐藏
+    // 传入undefined 鼠标移入显示移出隐藏 获得焦点时不显示气泡
     return isChanged ? undefined : false;
   };
   var style = {
     '--zaui-contract-bg': changeTipColor,
     '--zaui-contract-bg-add': addTipColor
   };
+  // @ts-ignore
+  var _showEllipse = ((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.showEllipse) || ((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.tooltip);
   var diffClassName = (0, _classnames.default)({
     'pro-form-item-changed': isChanged,
     'pro-form-item-add': isAdd
   });
-  // @ts-ignore
-  var _showEllipse = ((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.showEllipse) || ((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.tooltip);
+  var open = tipOpenCalc();
   return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
-    open: tipOpenCalc(),
-    // mouseEnterDelay={1}
-    getPopupContainer: function getPopupContainer(target) {
-      return target.parentElement;
+    open: open,
+    getPopupContainer: function getPopupContainer(trigger) {
+      return scrollFollowParent ? trigger.parentElement : document.body;
     },
+    overlayClassName: "original-value-tootip",
     title: (0, _jsxRuntime.jsxs)(_antd.Space, {
       direction: "vertical",
       className: "changed-tooltip",
@@ -102,6 +119,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
       }), _showEllipse && (0, _jsxRuntime.jsxs)(_antd.Space, {
         className: "current-value-container",
         children: ["\u5F53\u524D\u503C\uFF1A", /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, children.props), rest), {}, {
+          scrollFollowParent: scrollFollowParent,
           isView: true
         })) : undefined]
       })]
@@ -111,6 +129,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
       className: diffClassName,
       style: style,
       children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, children.props), rest), {}, {
+        scrollFollowParent: scrollFollowParent,
         otherProps: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.otherProps), {}, {
           isDiffChange: isChanged
         })

package/lib/ProForm/components/render/Render.js

@@ -50,7 +50,8 @@ var Render = function Render(props) {
     requiredOnView = props.requiredOnView,
     confirm = props.confirm,
     globalControl = props.globalControl,
-    diffConfig = props.diffConfig;
+    diffConfig = props.diffConfig,
+    viewRender = props.viewRender;
   var colProps = props.colProps;
   // 剔除一些不是FormItem的属性, 防止控制台报warning
   var labelWidth = formItemProps.labelWidth,
@@ -439,6 +440,7 @@ var Render = function Render(props) {
         valuePropName: _otherFormItemProps.valuePropName,
         normalize: _otherFormItemProps.normalize,
         getValueProps: _otherFormItemProps.getValueProps,
+        viewRender: viewRender,
         children: child
       });
     }

package/lib/ProForm/components/render/RenderFields.js

@@ -194,7 +194,8 @@ var RenderFields = function RenderFields(props) {
       namePath: column.namePath,
       listName: column.listName,
       globalControl: globalControl,
-      formDisabled: formDisabled
+      formDisabled: formDisabled,
+      diffConfig: diffConfig
     };
     return (0, _jsxRuntime.jsx)(_useFieldProps.FieldProvider, {
       value: otherProps,
@@ -217,7 +218,8 @@ var RenderFields = function RenderFields(props) {
         diffConfig: diffConfig,
         equalWith: equalWith,
         requiredOnView: requiredOnView,
-        globalControl: globalControl
+        globalControl: globalControl,
+        viewRender: viewRender
       })
     }, "".concat(_formItemProps.name || _formItemProps.label).concat(index));
   });

package/lib/ProForm/propsType.d.ts

@@ -45,6 +45,7 @@ export interface ProFormOtherProps {
     globalControl?: boolean;
     formDisabled?: boolean;
     isDiffChange?: boolean;
+    diffConfig?: DiffConfigProps;
 }
 export interface DiffConfigProps<Values = any> {
     /** 比对原始数据源 */
@@ -55,6 +56,8 @@ export interface DiffConfigProps<Values = any> {
     changeTipColor?: string;
     /** 新增提示颜色 */
     addTipColor?: string;
+    /** 是否跟随父组件滚动 */
+    scrollFollowParent?: string;
 }
 export interface ProFormProps<Values = any> extends FormProps<Values> {
     disabled?: boolean;

package/lib/ProForm/style/index.less

@@ -53,6 +53,11 @@
   }
 
   &.pro-form-view {
+    .pro-group{
+      .@{ant-prefix}-space-item, .pro-form-view-container{
+        width: max-content;
+      }
+    }
     .@{ant-prefix}-form-item-label {
       label {
         color: var(--zaui-aide-text, #939599);
@@ -329,6 +334,9 @@
     border-radius: 4px;
     background: @zaui-contract-bg !important;
 
+    .@{ant-prefix}-input {
+      background: @zaui-contract-bg !important;
+    }
     .@{ant-prefix}-select.@{ant-prefix}-select-disabled .@{ant-prefix}-select-selector{
       background: @zaui-contract-bg !important;
     }
@@ -403,6 +411,10 @@
     border-radius: 4px;
     background: @zaui-contract-bg-add !important;
 
+    .@{ant-prefix}-input {
+      background: @zaui-contract-bg !important;
+    }
+    
     .@{ant-prefix}-select.@{ant-prefix}-select-disabled .@{ant-prefix}-select-selector{
       background: @zaui-contract-bg-add !important;
     }
@@ -473,15 +485,29 @@
   }
 }
 
-.changed-tooltip {
-  .original-value-container {
-    .ant-space-item:nth-child(1) {
-      white-space: nowrap;
+.original-value-tootip{
+  max-width: 100%;
+  width: max-content;
+  z-index: 99;
+  .changed-tooltip {
+    .original-value-container {
+      .ant-space-item:nth-child(1) {
+        white-space: nowrap;
+      }
+      .pro-group{
+        .ant-space-compact{
+          display: block;
+        }
+        .pro-form-view-container{
+          word-break: keep-all;
+        }
+      }
     }
-  }
-  .current-value-container {
-    .ant-space-item:nth-child(1) {
-      white-space: nowrap;
+    .current-value-container {
+      .ant-space-item:nth-child(1) {
+        white-space: nowrap;
+      }
     }
   }
-}
+}
+

package/lib/ProForm/utils/diffOriginal.js

@@ -6,6 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.diffOriginal = void 0;
 var _lodash = require("lodash");
 var _utils = require("../../utils");
+// 过滤对象中undefined字段
+// 防止{a: '1'} {a: '1', b: undefined}被认为不相等
+var filterUndefined = function filterUndefined(data) {
+  if (!(0, _lodash.isObject)(data) || Array.isArray(data) || data === null) return data;
+  var resData = {};
+  Object.keys(data).forEach(function (key) {
+    if (data[key] !== undefined) {
+      resData[key] = data[key];
+    }
+  });
+  return resData;
+};
 var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
 var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
   var originalValue = params.originalValue,
@@ -35,7 +47,7 @@ var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
     return isSame ? 'same' : 'changed';
   }
   if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
-    return (0, _lodash.isEqual)(value, originalValue) ? 'same' : 'changed';
+    return (0, _lodash.isEqual)(filterUndefined(value), filterUndefined(originalValue)) ? 'same' : 'changed';
   }
   return 'same';
 };

package/lib/ProForm/utils/useShouldUpdate.js

@@ -170,9 +170,6 @@ var useShouldUpdate = function useShouldUpdate(props) {
         index: index,
         namePath: namePath
       }) : rules;
-      // const _component = isFunction(originComponent)
-      //   ? originComponent(_currentValues, { form, index, namePath })
-      //   : newComponent;
       var _fieldProps = (0, _lodash.isFunction)(fieldProps) ? fieldProps(_currentValues, {
         form: form,
         index: index,
@@ -203,17 +200,12 @@ var useShouldUpdate = function useShouldUpdate(props) {
       }
       var equalRes = (0, _lodash.isEqualWith)(rulesRef.current, _rules, _index.customEqualForFun);
       var proEqualRes = (0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _index.customEqualForFun);
-      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !equalRes || !proEqualRes
-      // 值变更，需要同步更新函数式的fieldProps
-      // (isEqualWith(fieldPropsRef.current, _fieldProps, customEqualForFun) && !isEqual(prevValues, currentValues)) ||
-      // !isEqualWith(originComponentRef.current, _component, customEqualForFun) ||
-      // equalDependencies(dependencies, prevValues, _currentValues)
+      if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !equalRes || !proEqualRes || (_fieldProps === null || _fieldProps === void 0 ? void 0 : _fieldProps.transformResponse) // 防止fieldProps变更时，transformResponse根据fieldProps新值无法触发更新
       ) {
         showRef.current = _show;
         disabledRef.current = _disabled;
         requiredRef.current = _required;
         rulesRef.current = _rules;
-        // originComponentRef.current = _component;
         fieldPropsRef.current = _fieldProps;
         reRender({});
         return false;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ProTableColumn } from '../../propsType';
-export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey, diffToolTip, wrapToolTipProps, scroll, onUpdateMinWidth, }: {
+export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey, diffToolTip, wrapToolTipProps, scroll, onUpdateMinWidth, isInNewRow, }: {
     column: ProTableColumn;
     originalObj: any;
     dataSourceObj: any;
@@ -9,6 +9,7 @@ export declare const formatColumn: ({ column, originalObj, dataSourceObj, rowKey
     wrapToolTipProps?: any;
     scroll?: any;
     onUpdateMinWidth?: any;
+    isInNewRow?: any;
 }) => void;
 /**
  * 查找最近的父级className

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

@@ -57,7 +57,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     diffToolTip = _ref2.diffToolTip,
     wrapToolTipProps = _ref2.wrapToolTipProps,
     scroll = _ref2.scroll,
-    onUpdateMinWidth = _ref2.onUpdateMinWidth;
+    onUpdateMinWidth = _ref2.onUpdateMinWidth,
+    isInNewRow = _ref2.isInNewRow;
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -77,7 +78,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT,
     _column$toolTipProps = column.toolTipProps,
     toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
-    minWidth = column.minWidth;
+    minWidth = column.minWidth,
+    onDiff = column.onDiff;
   // 仅在 {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({
@@ -114,7 +116,7 @@ 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 方法
@@ -122,12 +124,27 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     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;
+      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) : null;
+      var isInNewRowFlag = isInNewRow(record);
+      var extraDiffFlag = false;
+      // 把比对结果告诉我
+      if (onDiff) {
+        var isDiff = onDiff({
+          value: record,
+          originValue: originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]
+        });
+        if (!isDiff) {
+          originalValue = null;
+        } else {
+          originalValue = true;
+          extraDiffFlag = true;
+        }
+      }
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: !originalValue && originalValue !== 0 ? null : extraDiffFlag ? originalRenderValue !== null && originalRenderValue !== void 0 ? originalRenderValue : originalValue : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         value: _value,
@@ -135,7 +152,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: _value,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
     return;
@@ -166,12 +184,18 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         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)]
       });
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -182,7 +206,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
     // 千分位, 千分位带CNY前缀
@@ -201,8 +226,14 @@ 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: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -213,7 +244,8 @@ 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)) {
@@ -255,8 +287,14 @@ 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: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -267,7 +305,8 @@ 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)) {
@@ -296,6 +335,7 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -306,7 +346,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (precision || prefix || suffix) {
@@ -322,8 +363,14 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        (0, _jsxRuntime.jsx)("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -334,7 +381,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (valueType === 'address') {
@@ -347,10 +395,14 @@ 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: "-"
+        });
       }
       var className = (0, _classnames.default)({
-        'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
       var renderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
@@ -365,21 +417,32 @@ 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, {
+        valueType: valueType,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true,
+        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, {
@@ -391,7 +454,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
           value: value,
           currentValue: value,
           toolTipProps: _toolTipProps,
-          minWidth: minWidth
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
         }), suffixNode(value, record, index)]
       });
     };
@@ -399,8 +463,14 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     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, {
@@ -413,7 +483,8 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
           currentValue: value || '-',
           originalDiffTip: _originalDiffTip,
           toolTipProps: _toolTipProps,
-          minWidth: minWidth
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
         }), suffixNode(value, record, index)]
       });
     };
@@ -425,8 +496,14 @@ 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: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalValue || '-',
@@ -437,7 +514,8 @@ 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,7 @@ interface Props {
     originalValue?: any;
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
     minWidth?: number;
+    isInNewRowFlag?: boolean;
 }
 declare const RenderColumn: FC<Props>;
 export default RenderColumn;

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

@@ -28,14 +28,15 @@ 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) {
+  if ((originalValue || originalValue === 0) && !isInNewRowFlag) {
     var renderNode = value ? node : '-';
     if (ellipsis || originalDiffTip) {
       if (ellipsis) {
@@ -56,9 +57,23 @@ var RenderColumn = function RenderColumn(props) {
           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",
+        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", originalValue]
+            }), (0, _jsxRuntime.jsx)(_antd.Space, {
+              className: "current-value-container",
+              children: ellipsis ? (0, _jsxRuntime.jsxs)("span", {
+                children: ["\u5F53\u524D\u503C\uFF1A", currentValue]
+              }) : null
+            })]
+          }) : node
+        }),
         getPopupContainer: function getPopupContainer(triggerNode) {
           return triggerNode.parentNode;
         }