From e5d4c28b363a5b949f744daa1142ff1e9c46833d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=9D=99?= <17600756968@163.com>
Date: Mon, 20 Jul 2020 10:50:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=BB=84=E4=BB=B6=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/base/edit/date/index.tsx        | 25 +++++++--
 .../component/base/edit/input/index.tsx       | 46 ++++++++++++-----
 .../component/base/edit/number/index.tsx      | 19 +++++--
 .../component/base/edit/percentage/index.tsx  |  9 +++-
 .../component/base/edit/search/index.tsx      | 51 ++++++++++++++-----
 .../component/base/edit/select/index.tsx      | 41 ++++++++++++---
 .../component/base/edit/text-select/index.tsx | 15 ++++--
 .../component/base/edit/textarea/index.tsx    | 28 +++++++---
 .../component/base/edit/upload/index.tsx      |  2 +
 .../base/extra/associationSearch/index.tsx    | 10 ++--
 .../apolloTable/component/base/index.tsx      |  4 +-
 11 files changed, 190 insertions(+), 60 deletions(-)

diff --git a/components/apolloTable/component/base/edit/date/index.tsx b/components/apolloTable/component/base/edit/date/index.tsx
index 37d3ee0..774c069 100644
--- a/components/apolloTable/component/base/edit/date/index.tsx
+++ b/components/apolloTable/component/base/edit/date/index.tsx
@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { DatePicker } from 'antd';
-import styles from './styles.less';
+import { onBlurFn } from '../onBlurFn';
 import { antiAssign } from '../../../../utils/utils';
+import styles from './styles.less';
 
 export const ApolloDate = (props: any) => {
-    const { onChange } = props;
+    const { origin, onChange } = props;
     const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
+    const isOpen = useRef();
     const changeValue = (date, dateString) => {
         if (typeof onChange === 'function') {
+            if (typeof onBlurFn === 'function' && !isOpen.current) {
+                onBlurFn({ ...props, value: date });
+            }
             onChange(date, dateString);
         }
     };
-    return (
+    const inputOnBlurFn = (e: boolean) => {
+        isOpen.current = e;
+    };
+    return (origin === 'editForm' ?
+        <DatePicker
+            className={styles.date}
+            // value={inputVal}
+            dropdownClassName={styles.dropdownClassName}
+            popupStyle={{ width: '350px' }}
+            {...selfProps}
+            onChange={changeValue}
+            onOpenChange={inputOnBlurFn}
+        /> :
         <DatePicker
             className={styles.date}
             dropdownClassName={styles.dropdownClassName}
diff --git a/components/apolloTable/component/base/edit/input/index.tsx b/components/apolloTable/component/base/edit/input/index.tsx
index df538b3..454f15f 100644
--- a/components/apolloTable/component/base/edit/input/index.tsx
+++ b/components/apolloTable/component/base/edit/input/index.tsx
@@ -1,19 +1,28 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Input } from 'antd';
 import styles from './styles.less';
+import { onBlurFn } from '../onBlurFn';
 import { antiAssign } from '../../../../utils/utils';
 import { ApolloInputProps } from '../editInterface';
 import { Consumer } from '../../../context';
 
 export const ApolloInput = (props: ApolloInputProps) => {
-    const { maxLength, onChange, value, style } = props;
+    const { maxLength, onChange, value, style, origin } = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'style', 'onEmitChange']);
+    const [inputVal, setInputVal] = useState(value)
+    useEffect(() => {
+        setInputVal(value);
+    }, [value]);
     const changeValue = (value: any) => {
         if (typeof onChange === 'function') {
             onChange(value);
         }
     };
-
+    const inputOnBlurFn = () => {
+        if (typeof onBlurFn === 'function') {
+            onBlurFn(props);
+        }
+    };
     const newStyle: any = {
         ...style,
     };
@@ -33,18 +42,31 @@ export const ApolloInput = (props: ApolloInputProps) => {
             {({ locale }) => {
                 return (
                     <div className={styles.container}>
-                        <Input
-                            className={styles.input}
-                            style={newStyle}
-                            {...selfProps}
-                            onChange={(e) => {
-                                changeValue(e.target.value);
-                            }}
-                        />
+                        {
+                            origin === 'editForm' ? <Input
+                                className={styles.input}
+                                style={newStyle}
+                                {...selfProps}
+                                value={inputVal}
+                                onBlur={inputOnBlurFn}
+                                onChange={(e) => {
+                                    changeValue(e.target.value);
+                                    setInputVal(e.target.value)
+                                }}
+                            /> : <Input
+                                    className={styles.input}
+                                    style={newStyle}
+                                    {...selfProps}
+                                    onChange={(e) => {
+                                        changeValue(e.target.value);
+                                    }}
+                                />
+                        }
+
                         {!!maxLength && (
                             <span className={styles.wordNumber} style={wordNumStyle}>{`${locale.alreadyInput} ${
                                 (value || '').length
-                            }/${maxLength}`}</span>
+                                }/${maxLength}`}</span>
                         )}
                     </div>
                 );
diff --git a/components/apolloTable/component/base/edit/number/index.tsx b/components/apolloTable/component/base/edit/number/index.tsx
index 72de75a..bba36b2 100644
--- a/components/apolloTable/component/base/edit/number/index.tsx
+++ b/components/apolloTable/component/base/edit/number/index.tsx
@@ -1,15 +1,21 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { InputNumber } from 'antd';
 import styles from './styles.less';
+import { onBlurFn } from '../onBlurFn';
 import { ApolloNumberProps } from '../editInterface';
 import { antiAssign } from '../../../../utils/utils';
 
 export const ApolloNumber = (props: ApolloNumberProps) => {
-    const { onChange, origin }: any = props;
+    const { onChange, origin, value }: any = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
+    const [inputVal, setInputVal] = useState(value)
+    useEffect(() => {
+        setInputVal(value);
+    }, [value]);
     const changeValue = (newValue: any) => {
         if (typeof onChange === 'function') {
             onChange(newValue);
+            setInputVal(inputVal);
         }
     };
     const { onEmitChange, ...o } = selfProps;
@@ -17,5 +23,12 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
     if (origin === 'editForm') {
         style.height = '32px';
     }
-    return <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
+    const inputOnBlurFn = () => {
+        if (typeof onBlurFn === 'function') {
+            onBlurFn(props);
+        }
+    };
+    return origin === 'editForm' ?
+        <InputNumber value={inputVal} onBlur={inputOnBlurFn} className={styles.number} style={style} {...o} onChange={changeValue} />
+        : <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
 };
diff --git a/components/apolloTable/component/base/edit/percentage/index.tsx b/components/apolloTable/component/base/edit/percentage/index.tsx
index 492339a..f1647e6 100644
--- a/components/apolloTable/component/base/edit/percentage/index.tsx
+++ b/components/apolloTable/component/base/edit/percentage/index.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
+import { onBlurFn } from '../onBlurFn';
 import { ApolloNumber } from '../number';
 import { isNumber } from '../../../../utils/utils';
 
-export const ApolloPercentage = (props) => {
+export const ApolloPercentage = (props: any) => {
+    const inputOnBlurFn = () => {
+        if (typeof onBlurFn === 'function') {
+            onBlurFn(props);
+        }
+    };
     return (
         <ApolloNumber
             {...props}
@@ -18,6 +24,7 @@ export const ApolloPercentage = (props) => {
                 }
                 return '';
             }}
+            onBlur={inputOnBlurFn}
         />
     );
 };
diff --git a/components/apolloTable/component/base/edit/search/index.tsx b/components/apolloTable/component/base/edit/search/index.tsx
index 4f76228..2dc9bca 100644
--- a/components/apolloTable/component/base/edit/search/index.tsx
+++ b/components/apolloTable/component/base/edit/search/index.tsx
@@ -1,34 +1,57 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { message } from 'antd';
 import Search from '../../extra/associationSearch';
 import { ApolloSearchProps } from '../editInterface';
 import { antiAssign } from '../../../../utils/utils';
+import { onBlurFn } from '../onBlurFn';
 import s from './index.less';
 
 export const ApolloSearch = (props: ApolloSearchProps) => {
-    const { onChange, maxCount, isMultiple, request } = props;
+    const { onChange, maxCount, isMultiple, request, origin } = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options', 'request', 'maxCount']);
-    const changeValue = (value) => {
+    const isOpen = useRef();
+    if (isMultiple) {
+        selfProps.mode = 'multiple';
+    }
+    const changeValue = (value: any) => {
         if (isMultiple && maxCount && maxCount < value.length) {
             message.warn(`最多选择${maxCount}个`);
             return;
         }
         if (typeof onChange === 'function') {
+            if (typeof onBlurFn === 'function' && !isOpen.current) {
+                onBlurFn({ ...props, value });
+            }
             onChange(value, value);
         }
     };
 
-    if (isMultiple) {
-        selfProps.mode = 'multiple';
-    }
+    const singleBlurFn = (e: boolean) => {
+        isOpen.current = e;
+    };
+    const multipleBlurFn = (e: boolean) => {
+        isOpen.current = e;
+        if (typeof onBlurFn === 'function' && !e) {
+            onBlurFn(props);
+        }
+    };
     return (
-        <Search
-            className={s.search}
-            request={request}
-            fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
-            {...selfProps}
-            onChange={changeValue}
-            initDataType="onfocus"
-        />
+        origin === 'editForm' ?
+            <Search
+                className={s.search}
+                request={request}
+                fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
+                {...selfProps}
+                onChange={changeValue}
+                onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
+                initDataType="onfocus"
+            /> : <Search
+                className={s.search}
+                request={request}
+                fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
+                {...selfProps}
+                onChange={changeValue}
+                initDataType="onfocus"
+            />
     );
 };
diff --git a/components/apolloTable/component/base/edit/select/index.tsx b/components/apolloTable/component/base/edit/select/index.tsx
index 5312c43..beb1064 100644
--- a/components/apolloTable/component/base/edit/select/index.tsx
+++ b/components/apolloTable/component/base/edit/select/index.tsx
@@ -1,26 +1,53 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Select } from 'antd';
+import { onBlurFn } from '../onBlurFn';
 import { ApolloSelectProps } from '../editInterface';
 import { antiAssign } from '../../../../utils/utils';
 import styles from './styles.less';
 
 export const ApolloSelect = (props: ApolloSelectProps) => {
-    const { options = [], onChange, isMultiple } = props;
+    const { options = [], onChange, isMultiple, origin } = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options']);
+    const isOpen = useRef();
+
+    if (isMultiple) {
+        selfProps.mode = 'multiple';
+    }
     const changeValue = (value: any, option: any) => {
         if (typeof onChange === 'function') {
+            if (typeof onBlurFn === 'function' && !isOpen.current) {
+                onBlurFn({ ...props, value });
+            }
             onChange(value, option);
         }
     };
-
-    if (isMultiple) {
-        selfProps.mode = 'multiple';
-    }
-    return (
+    const singleBlurFn = (e: boolean) => {
+        isOpen.current = e;
+    };
+    const multipleBlurFn = (e: boolean) => {
+        isOpen.current = e;
+        if (typeof onBlurFn === 'function' && !e) {
+            onBlurFn(props);
+        }
+    };
+    return (origin === 'editForm' ?
         <Select
             className={styles.select}
             {...selfProps}
             onChange={changeValue}
+            onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
+        >
+            {options.map((item) => {
+                return (
+                    <Select.Option key={item.id} value={item.id}>
+                        {item.name}
+                    </Select.Option>
+                );
+            })}
+        </Select> : <Select
+            className={styles.select}
+            {...selfProps}
+            onChange={changeValue}
         >
             {options.map((item) => {
                 return (
diff --git a/components/apolloTable/component/base/edit/text-select/index.tsx b/components/apolloTable/component/base/edit/text-select/index.tsx
index 8d72345..8ac26be 100644
--- a/components/apolloTable/component/base/edit/text-select/index.tsx
+++ b/components/apolloTable/component/base/edit/text-select/index.tsx
@@ -1,25 +1,32 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import InputSearch from '../../extra/dataEntry/textSelect';
 import { ApolloInputSearchProps } from '../editInterface';
 import { antiAssign } from '../../../../utils/utils';
+import { onBlurFn } from '../onBlurFn';
 import s from './index.less';
 
 export const ApolloInputSearch = (props: ApolloInputSearchProps) => {
     const { onChange, request, type } = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'request']);
-
-    const changeValue = (value) => {
+    const isOpen = useRef();
+    const changeValue = (value: any) => {
         if (typeof onChange === 'function') {
+            if (typeof onBlurFn === 'function' && !isOpen.current) {
+                onBlurFn({ ...props, value });
+            }
             onChange(value, value);
         }
     };
-
+    const singleBlurFn = (e: boolean) => {
+        isOpen.current = e;
+    };
     return (
         <InputSearch
             className={s.select}
             request={(val) => { return request({ name: val, fieldValueName: type }); }}
             fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
             {...selfProps}
+            onDropdownVisibleChange={singleBlurFn}
             onChange={changeValue}
             initDataType="onfocus"
         />
diff --git a/components/apolloTable/component/base/edit/textarea/index.tsx b/components/apolloTable/component/base/edit/textarea/index.tsx
index 80bfb90..b1d2b5f 100644
--- a/components/apolloTable/component/base/edit/textarea/index.tsx
+++ b/components/apolloTable/component/base/edit/textarea/index.tsx
@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { Input, Modal } from 'antd';
 import styles from './styles.less';
+import { onBlurFn } from '../onBlurFn';
 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, onEmitChange, columnConfig, origin } = props;
+    const { maxLength, onChange, value, 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);
@@ -22,14 +23,21 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
     //         getMore();
     //     }
     // }, []);
-
-    const changeValue = (e) => {
+    const [inputVal, setInputVal] = useState(value)
+    useEffect(() => {
+        setInputVal(value);
+    }, [value]);
+    const changeValue = (e: any) => {
         if (typeof onChange === 'function') {
             onChange(e.target.value);
         }
     };
-
-    const changeCurValue = (e) => {
+    const inputOnBlurFn = () => {
+        if (typeof onBlurFn === 'function') {
+            onBlurFn(props);
+        }
+    };
+    const changeCurValue = (e: any) => {
         if (typeof onChange === 'function') {
             setCurValue(e.target.value);
         }
@@ -59,7 +67,6 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
             }
         }
     };
-
     if (origin === 'editForm') {
         return (
             <Consumer>
@@ -69,9 +76,14 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
                             <Input.TextArea
                                 className={styles.inputForm}
                                 {...selfProps}
-                                value={value}
-                                onChange={changeValue}
+                                value={inputVal}
+                                onBlur={inputOnBlurFn}
+                                onChange={(e) => {
+                                    changeValue(e)
+                                    setInputVal(e.target.value)
+                                }}
                             />
+
                             {!!maxLength && (
                                 <span className={styles.wordNumberForm}>
                                     {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
diff --git a/components/apolloTable/component/base/edit/upload/index.tsx b/components/apolloTable/component/base/edit/upload/index.tsx
index 5eaa533..0d2b600 100644
--- a/components/apolloTable/component/base/edit/upload/index.tsx
+++ b/components/apolloTable/component/base/edit/upload/index.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { ApolloUploadProps } from '../editInterface';
 import { antiAssign } from '../../../../utils/utils';
 import s from './index.less';
+import { onBlurFn } from '../onBlurFn';
 import Upload from '../../extra/upload';
 import addIcon from '../../../../assets/addIcon.png';
 
@@ -53,6 +54,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
             onChange(value);
         }
         toggleUploadDialog(false);
+        onBlurFn({ ...props, value })
     };
     const onCancel = () => {
         if (typeof onEmitChange === 'function') {
diff --git a/components/apolloTable/component/base/extra/associationSearch/index.tsx b/components/apolloTable/component/base/extra/associationSearch/index.tsx
index 4603451..d32d190 100644
--- a/components/apolloTable/component/base/extra/associationSearch/index.tsx
+++ b/components/apolloTable/component/base/extra/associationSearch/index.tsx
@@ -20,9 +20,9 @@ interface Props {
 }
 
 enum Loaded {
-    Init='init',
-    Has='has',
-    Empty='empty',
+    Init = 'init',
+    Has = 'has',
+    Empty = 'empty',
 }
 
 interface State {
@@ -214,7 +214,7 @@ class AssociationSearch extends React.Component<Props, State> {
         }
     };
 
-    notFoundContent = (locale:any) => {
+    notFoundContent = (locale: any) => {
         const { fetching, loaded } = this.state;
         if (fetching) {
             return <Spin size="small" />;
@@ -230,7 +230,7 @@ class AssociationSearch extends React.Component<Props, State> {
         const { selfCom, autoFocus, onChange, ...rest } = this.props;
         return (
             <Consumer>
-                {({ locale }:any) => {
+                {({ locale }: any) => {
                     return (
                         <Select
                             filterOption={false}
diff --git a/components/apolloTable/component/base/index.tsx b/components/apolloTable/component/base/index.tsx
index e9231a0..59a1ce6 100644
--- a/components/apolloTable/component/base/index.tsx
+++ b/components/apolloTable/component/base/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { transferAttr } from './_utils/transferAttr';
 import { BaseComponentProps, BaseComponentState } from '../interface';
 
-export const setFormat = (config:any, columnConfig: any, value: any, option?: any) => {
+export const setFormat = (config: any, columnConfig: any, value: any, option?: any) => {
     const { columnAttrObj, columnType } = columnConfig || {};
     const transferColumn = transferAttr(columnType, {
         ...(config.componentAttr || {}),
@@ -13,7 +13,7 @@ export const setFormat = (config:any, columnConfig: any, value: any, option?: an
     return value;
 };
 
-export const getFormat = (config:any, columnConfig: any, value: any) => {
+export const getFormat = (config: any, columnConfig: any, value: any) => {
     const { columnAttrObj, columnType } = columnConfig || {};
     if (!value || !Array.isArray(value) || value.length <= 0) return undefined;
     const transferColumn = transferAttr(columnType, {
-- 
2.21.0