兼容伸缩列时hover弹框

components/apolloTable/component/base/detail/input/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.less';
 import { InputProps } from '../detailInterface';
 
 export const ApolloInputDetail = (props: InputProps) => {
-    const { className, origin } = props;
+    const { className, origin, columnConfig } = props;
     const value = props.formatter ? props.formatter(props.value) : props.value;
     if (!value) {
         return null;
@@ -13,17 +13,22 @@ export const ApolloInputDetail = (props: InputProps) => {
     const [dotVisible, setDotVisible] = useState(false);
     const container = useRef(null);
     const dom = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
     useEffect(() => {
         const containerTarget: any = container.current;
         const target: any = dom.current;
+        const deta = columnConfig.width - detaWidth.current;
         if (containerTarget && target) {
-            if (target.clientWidth > containerTarget.clientWidth) {
+            if (target.clientWidth > containerTarget.clientWidth + deta) {
                 setDotVisible(true);
             } else {
                 setDotVisible(false);
             }
         }
-    }, [value]);
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
+    }, [value, columnConfig.width]);
 
     if (origin === 'detailForm') {
         return <div className={classNames(styles.text, className)}>{value}</div>;

components/apolloTable/component/base/detail/tag/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import s from './index.less';
 
 export const Tags = (props: any) => {
-    const { value, origin, componentAttr } = props;
+    const { value, origin, componentAttr, columnConfig } = props;
     if (!Array.isArray(value) || value.length === 0) return null;
     const { options, mode } = componentAttr || {};
     const outStyle: any = {};
@@ -40,19 +40,24 @@ export const Tags = (props: any) => {
     const [dotVisible, setDotVisible] = useState(false);
     const outer = useRef(null);
     const inner = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
     useEffect(() => {
         const outerTarget: any = outer.current;
         const innerTarget: any = inner.current;
         let visible = false;
+        const deta = columnConfig.width - detaWidth.current;
         if (outerTarget && innerTarget && origin !== 'detailForm') {
-            if (innerTarget.clientWidth > outerTarget.clientWidth) {
+            if (innerTarget.clientWidth > outerTarget.clientWidth + deta) {
                 visible = true;
             } else {
                 visible = false;
             }
         }
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
         setDotVisible(visible);
-    }, [value]);
+    }, [value, columnConfig.width]);
 
     return (
         <div className={s.container}>

components/apolloTable/component/base/detail/text-link/index.tsx

@@ -5,7 +5,7 @@ import s from './index.less';
 import IconFont from '@/submodule/components/IconFont';
 
 export const ApolloTextLinkDetail = (props: any) => {
-    const { value, origin, formatter, changeEdit } = props;
+    const { value, origin, formatter, changeEdit, columnConfig } = props;
     const newValue = formatter ? formatter(value) : value;
     if (!newValue) return null;
     // 以逗号分隔
@@ -13,17 +13,22 @@ export const ApolloTextLinkDetail = (props: any) => {
     const [dotVisible, setDotVisible] = useState(false);
     const outer = useRef(null);
     const inner = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
     useEffect(() => {
         const outerTarget: any = outer.current;
         const innerTarget: any = inner.current;
+        const deta = columnConfig.width - detaWidth.current;
         if (outerTarget && innerTarget && origin !== 'detailForm') {
-            if (innerTarget.clientWidth > outerTarget.clientWidth) {
+            if (innerTarget.clientWidth > outerTarget.clientWidth + deta) {
                 setDotVisible(true);
             } else {
                 setDotVisible(false);
             }
         }
-    }, [value]);
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
+    }, [value, columnConfig.width]);
 
     const outStyle: any = {};
     const innerStyle: any = {};

components/apolloTable/component/base/detail/textarea/index.tsx

-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { Tooltip } from 'antd';
 import styles from './index.less';
 import { TextAreaProps } from '../detailInterface';
 
 export const ApolloTextAreaDetail = (props: TextAreaProps) => {
-    const { className, origin, componentAttr, rowData, formatter } = props;
+    const { className, origin, componentAttr, rowData, formatter, columnConfig } = props;
     const formatValue = formatter ? formatter(props.value) : props.value;
     if (!formatValue) {
         return null;
@@ -18,17 +18,23 @@ export const ApolloTextAreaDetail = (props: TextAreaProps) => {
     const [dotVisible, setDotVisible] = useState(false);
     const container = useRef(null);
     const dom = useRef(null);
+    const detaWidth = useRef(columnConfig.width || 0);
+
     useEffect(() => {
         const containerTarget: any = container.current;
         const target: any = dom.current;
+        const deta = columnConfig.width - detaWidth.current;
         if (containerTarget && target) {
-            if (target.clientWidth > containerTarget.clientWidth) {
+            if (target.clientWidth > containerTarget.clientWidth + deta) {
                 setDotVisible(true);
             } else {
                 setDotVisible(false);
             }
         }
-    }, [value]);
+        if (deta !== 0) {
+            detaWidth.current = columnConfig.width;
+        }
+    }, [value, columnConfig.width]);
 
     const getMore = async () => {
         let newValue = await getDetail({ rowId: rowData.id });