update apolloTable textarea

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

+@import '../../../../common';
+
+.container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    .itemBgTxt {
+        position: absolute;
+        z-index: -1;
+        visibility: hidden;
+    }
+}
+.text {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}
+.tooltip {
+    //min-width: 500px;
+    .more {
+        margin-left: @marginGen;
+        color: @primaryColor;
+    }
+}

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

-import { ApolloInputDetail } from '../input';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Tooltip } from 'antd';
+import styles from './index.less';
+import { TextAreaProps } from '../detailInterface';
 
-export const ApolloTextAreaDetail = ApolloInputDetail;
+export const ApolloTextAreaDetail = (props: TextAreaProps) => {
+    const { className, origin, componentAttr, rowData, formatter } = props;
+    const formatValue = formatter ? formatter(props.value) : props.value;
+    if (!formatValue) {
+        return null;
+    }
+    const [value, setValue] = useState(formatValue);
+    const { cutLength, getDetail } = componentAttr;
+    const [dotVisible, setDotVisible] = useState(false);
+    const container = useRef(null);
+    const dom = useRef(null);
+    useEffect(() => {
+        const containerTarget: any = container.current;
+        const target: any = dom.current;
+        if (containerTarget && target) {
+            if (target.clientWidth > containerTarget.clientWidth) {
+                setDotVisible(true);
+            } else {
+                setDotVisible(false);
+            }
+        }
+    }, [value]);
+
+    const getMore = async () => {
+        let newValue = await getDetail({ rowId: rowData.id });
+        if (newValue) {
+            newValue = formatter ? formatter(newValue) : newValue;
+            setValue(newValue);
+        }
+    };
+
+    if (origin === 'detailForm') {
+        return <div className={classNames(styles.text, className)}>{value}</div>;
+    }
+
+    if (typeof value === 'string') {
+        return (
+            <div className={styles.container} ref={container}>
+                {dotVisible ? (
+                    <Tooltip
+                        title={
+                            <div className={styles.tooltip}>
+                                {value}
+                                {value.length === cutLength && <span className={styles.more} onClick={getMore}>查看更多</span>}
+                            </div>
+                        }
+                    >
+                        <div className={classNames(styles.text, className)}>{value}</div>
+                    </Tooltip>
+                ) : (
+                    <div className={classNames(styles.text, className)}>{value}</div>
+                )}
+                <div className={styles.itemBgTxt} ref={dom}>
+                    {value}
+                </div>
+            </div>
+        );
+    }
+    return '数据错误';
+};