From d1a71d13cbf6672828329055581ca625612b4b78 Mon Sep 17 00:00:00 2001
From: zhangwenshuai <zhangwenshuai@mttop.cn>
Date: Tue, 9 Jun 2020 20:17:36 +0800
Subject: [PATCH] update apolloTable textarea

---
 .../apolloTable/component/base/config.tsx     |  2 +-
 .../component/base/detail/textarea/index.less |  6 +-
 .../component/base/detail/textarea/index.tsx  |  3 +-
 .../component/base/edit/textarea/index.tsx    | 99 +++++++++++++++----
 .../component/base/edit/textarea/styles.less  | 16 ++-
 components/apolloTable/editForm/index.tsx     |  2 +-
 components/apolloTable/editFormV3/index.tsx   |  2 +-
 7 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/components/apolloTable/component/base/config.tsx b/components/apolloTable/component/base/config.tsx
index aec65c4..0e22413 100644
--- a/components/apolloTable/component/base/config.tsx
+++ b/components/apolloTable/component/base/config.tsx
@@ -79,7 +79,7 @@ export const config: any = {
     3: {
         name: '多行文本',
         editComp: ApolloTextArea,
-        cellComp: CellContainer(ApolloTextArea),
+        cellComp: ApolloTextArea,
         getFormatter: GetFormatter.TEXTAREA,
         setFormatter: SetFormatter.TEXTAREA,
         componentAttr: {
diff --git a/components/apolloTable/component/base/detail/textarea/index.less b/components/apolloTable/component/base/detail/textarea/index.less
index 33cc4e3..e2b0499 100644
--- a/components/apolloTable/component/base/detail/textarea/index.less
+++ b/components/apolloTable/component/base/detail/textarea/index.less
@@ -19,7 +19,11 @@
     text-overflow: ellipsis;
     word-break: break-all;
 }
-.tooltip {
+.tooltip{
+    max-height: 300px;
+    overflow: auto;
+}
+.tooltipTitle {
     //min-width: 500px;
     .more {
         margin-left: @marginGen;
diff --git a/components/apolloTable/component/base/detail/textarea/index.tsx b/components/apolloTable/component/base/detail/textarea/index.tsx
index 2638c0d..84644ae 100644
--- a/components/apolloTable/component/base/detail/textarea/index.tsx
+++ b/components/apolloTable/component/base/detail/textarea/index.tsx
@@ -44,8 +44,9 @@ export const ApolloTextAreaDetail = (props: TextAreaProps) => {
             <div className={styles.container} ref={container}>
                 {dotVisible ? (
                     <Tooltip
+                    overlayClassName={styles.tooltip}
                         title={
-                            <div className={styles.tooltip}>
+                            <div className={styles.tooltipTitle}>
                                 {value}
                                 {value.length === cutLength && <span className={styles.more} onClick={getMore}>查看更多</span>}
                             </div>
diff --git a/components/apolloTable/component/base/edit/textarea/index.tsx b/components/apolloTable/component/base/edit/textarea/index.tsx
index d59fdbb..80bfb90 100644
--- a/components/apolloTable/component/base/edit/textarea/index.tsx
+++ b/components/apolloTable/component/base/edit/textarea/index.tsx
@@ -1,22 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from 'antd';
+import { Input, Modal } from 'antd';
 import styles from './styles.less';
 import { antiAssign } from '../../../../utils/utils';
 import { ApolloTextAreaProps } from '../editInterface';
 import { Consumer } from '../../../context';
 
 export const ApolloTextArea = (props: ApolloTextAreaProps) => {
-    const { maxLength, onChange, value, cutLength, getDetail, rowData } = props;
-    const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value']);
+    const { maxLength, onChange, value, cutLength, getDetail, rowData, onEmitChange, columnConfig, origin } = props;
+    const { columnChsName } = columnConfig;
+    const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value', 'cutLength', 'getDetail', 'rowData', 'onEmitChange']);
     const [curValue, setCurValue] = useState(value);
+    const [visible, setVisible] = useState(false);
     useEffect(() => {
-        setCurValue(value);
-    }, [value]);
-    useEffect(() => {
-        if (value && value.length === cutLength) {
+        if (origin !== 'editForm') {
+            setCurValue(value);
             getMore();
         }
-    }, []);
+    }, [value]);
+    // useEffect(() => {
+    //     if (value && value.length === cutLength) {
+    //         getMore();
+    //     }
+    // }, []);
 
     const changeValue = (e) => {
         if (typeof onChange === 'function') {
@@ -24,30 +29,84 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
         }
     };
 
+    const changeCurValue = (e) => {
+        if (typeof onChange === 'function') {
+            setCurValue(e.target.value);
+        }
+    };
+
+    const hide = () => {
+        if (typeof onEmitChange === 'function') {
+            onEmitChange(value);
+        }
+        setVisible(false);
+    }
+
+    const confirmChange = () => {
+        if (typeof onEmitChange === 'function') {
+            onEmitChange(curValue);
+        }
+        setVisible(false);
+    }
+
     const getMore = async () => {
-        let newValue = await getDetail({ rowId: rowData.id });
-        if (newValue) {
-            newValue = newValue[0] && newValue[0].value;
-            setCurValue(newValue);
+        if (getDetail && rowData) {
+            let newValue = await getDetail({ rowId: rowData.id });
+            if (newValue) {
+                newValue = newValue[0] && newValue[0].value;
+                setCurValue(newValue);
+                setVisible(true);
+            }
         }
     };
 
+    if (origin === 'editForm') {
+        return (
+            <Consumer>
+                {({ locale }) => {
+                    return (
+                        <div className={styles.container}>
+                            <Input.TextArea
+                                className={styles.inputForm}
+                                {...selfProps}
+                                value={value}
+                                onChange={changeValue}
+                            />
+                            {!!maxLength && (
+                                <span className={styles.wordNumberForm}>
+                                    {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
+                                </span>
+                            )}
+                        </div>
+                    );
+                }}
+            </Consumer>
+        )
+    }
+
     return (
         <Consumer>
             {({ locale }) => {
                 return (
                     <div className={styles.container}>
-                        <Input.TextArea
-                            className={styles.input}
+                        <Input
                             {...selfProps}
-                            value={curValue}
+                            value={value}
                             onChange={changeValue}
                         />
-                        {!!maxLength && (
-                            <span className={styles.wordNumber}>
-                                {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
-                            </span>
-                        )}
+                        <Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
+                            <Input.TextArea
+                                className={styles.input}
+                                {...selfProps}
+                                value={curValue}
+                                onChange={changeCurValue}
+                            />
+                            {!!maxLength && (
+                                <span className={styles.wordNumber}>
+                                    {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
+                                </span>
+                            )}
+                        </Modal>
                     </div>
                 );
             }}
diff --git a/components/apolloTable/component/base/edit/textarea/styles.less b/components/apolloTable/component/base/edit/textarea/styles.less
index 0d50edc..6ce15f3 100644
--- a/components/apolloTable/component/base/edit/textarea/styles.less
+++ b/components/apolloTable/component/base/edit/textarea/styles.less
@@ -2,11 +2,10 @@
     position: relative;
     top: 0;
     left: 0;
-    .input {
+    .inputForm{
         padding-bottom: 18px;
-        max-height: 500px !important;
     }
-    .wordNumber {
+    .wordNumberForm {
         position: absolute;
         right: 20px;
         bottom: 2px;
@@ -14,3 +13,14 @@
         font-size: 12px;
     }
 }
+.input {
+    padding-bottom: 18px;
+    max-height: 500px !important;
+}
+.wordNumber {
+    position: absolute;
+    right: 35px;
+    bottom: 80px;
+    color: #e1e1e1;
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/components/apolloTable/editForm/index.tsx b/components/apolloTable/editForm/index.tsx
index 2a5f48d..17edd72 100644
--- a/components/apolloTable/editForm/index.tsx
+++ b/components/apolloTable/editForm/index.tsx
@@ -59,7 +59,7 @@ const EditForm = (props: any) => {
                 validateFirst={validateFirst}
                 validateTrigger={validateTrigger}
             >
-                <EditComp {...transferColumn} columnConfig={item} disabled={readOnlyFlag} />
+                <EditComp {...transferColumn} columnConfig={item} disabled={readOnlyFlag} origin="editForm" />
             </FormItem>
         );
     };
diff --git a/components/apolloTable/editFormV3/index.tsx b/components/apolloTable/editFormV3/index.tsx
index 524d23c..4d00a58 100644
--- a/components/apolloTable/editFormV3/index.tsx
+++ b/components/apolloTable/editFormV3/index.tsx
@@ -116,7 +116,7 @@ class FormWrap extends Component {
                     validateTrigger,
                     rules: [{ required: !!item.requiredFlag, message: '必填项不能为空' }, ...rules],
                     initialValue: getFormat(detailConfig, item, value),
-                })(<EditComp {...transferColumn} columnConfig={item} disabled={disabled} />)}
+                })(<EditComp {...transferColumn} columnConfig={item} disabled={disabled} origin="editForm" />)}
             </FormItem>
         );
     };
-- 
2.21.0