update upload

components/apolloTable/component/base/detail/upload/styles.less

@@ -2,6 +2,7 @@
     display: flex;
     vertical-align: middle;
     align-items: center;
+    user-select: none;
 }
 
 .moreBtn {

components/apolloTable/component/base/edit/upload/index.less

@@ -7,6 +7,8 @@
     align-items: center;
     border: 1px solid @primaryColor;
     min-height: 32px;
+    padding: 0 @paddingLg;
+    user-select: none;
     &.disabled {
         background: @disabledColor;
         border-color: #d9d9d9;

components/apolloTable/component/base/edit/upload/index.tsx

-import React, { useEffect, useRef, useState } from 'react';
-import { Modal, Tooltip, Button, Icon } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Modal } from 'antd';
 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 s from './index.less';
 
 export const ApolloUpload = (props: ApolloUploadProps) => {
-    const {
-        isMultiple, onEmitChange, onChange, disabled, origin, tableId,
-    } = props;
+    const { isMultiple, onEmitChange, onChange, disabled, origin, value } = props;
     const selfProps = antiAssign(props, [
         'onChange',
         'value',
@@ -25,7 +22,6 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
         'origin',
         'disableOptions',
         'rowId',
-        'onBlurFn',
         'getInstanceDetail',
     ]);
     selfProps.disabled = !!props.disabled;
@@ -35,75 +31,35 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
         selfProps.multiple = false;
         selfProps.maxLength = 1;
     }
-    const [value, setValue] = useState<any>([]);
-    useEffect(() => {
-        setValue(props.value);
-    }, [props.value]);
+    const [curValue, setCurValue] = useState<any>(value);
     const changeValue = (value: any) => {
-        setValue(value);
-        if (origin === 'editForm') {
-            if (typeof onChange === 'function') {
-                onChange(value);
-            }
-            // onBlurFn({ ...props, value });
-        }
-    };
-    const [visible, setVisible] = useState(false);
-    const refHelper = useRef(visible);
-    const toggleUploadDialog = (flag: boolean) => {
-        refHelper.current = flag;
-        setVisible(flag);
-    };
-    // 点击Modal中上传时回调用浏览器弹框，触发onBlur，而此时并不希望触发onBlur，因此在组件内自定义监听
-    // useEffect(() => {
-    //     document.addEventListener('click', onBlur, false);
-    //     if (origin !== 'editForm') {
-    //         toggleUploadDialog(true);
-    //     }
-    //     return () => {
-    //         document.removeEventListener('click', onBlur, false);
-    //     };
-    // }, []);
-
-    const clearEdit = () => {
-        // 清除所有dom的编辑状态
-        const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
-        if (doms) {
-            doms.forEach((item) => {
-                item.setAttribute('data-editing-cell', '0');
-            });
-        }
-    };
-    const onBlur = () => {
-        // 当弹框显示时，不触发emit事件
-        if (refHelper.current) {
-            return;
+        setCurValue(value);
+        if (typeof onChange === 'function') {
+            onChange(value);
         }
-        if (typeof onEmitChange === 'function') {
-            onEmitChange(props.value);
+        if (origin === 'editForm') {
+            onBlur(value);
         }
-        clearEdit();
     };
-    const onOk = () => {
+    const onBlur = (value: any) => {
         if (typeof onEmitChange === 'function') {
             onEmitChange(value);
         }
-        if (typeof onChange === 'function') {
-            onChange(value);
-        }
-        clearEdit();
-        toggleUploadDialog(false);
     };
-    const onCancel = () => {
-        if (typeof onEmitChange === 'function') {
-            onEmitChange(props.value);
+    const [visible, setVisible] = useState(false);
+    // 点击Modal中上传时回调用浏览器弹框，触发onBlur，而此时并不希望触发onBlur，因此在组件内自定义监听
+    useEffect(() => {
+        if (origin !== 'editForm') {
+            setVisible(true);
         }
-        clearEdit();
-        toggleUploadDialog(false);
+    }, []);
+    const onOk = () => {
+        onBlur(curValue);
+        setVisible(false);
     };
-    const onClickContainer = (e: any) => {
-        e.stopPropagation(); // 阻止事件冒泡
-        e.nativeEvent.stopImmediatePropagation();
+    const onCancel = () => {
+        onBlur(value);
+        setVisible(false);
     };
     let containerClass = s.container;
     if (disabled) {
@@ -113,29 +69,23 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
         containerClass = classNames(containerClass, s.editForm);
         return (
             <div className={containerClass}>
-                <Upload {...selfProps} value={value} listType="picture-card" onChange={changeValue} />
+                <Upload {...selfProps} value={curValue} listType="picture-card" onChange={changeValue} />
             </div>
         );
     }
     return (
-        <div className={containerClass} onClick={onClickContainer}>
-            {value
-                && value.map((item: any, i: number) => {
+        <div className={containerClass}>
+            {curValue &&
+                curValue.map((item: any, i: number) => {
                     return (
                         <div key={i} className={s.picContainer}>
-                            <Tooltip placement="bottom" title={item.name}>
-                                <img
-                                    alt=""
-                                    className={origin === 'editForm' ? classNames(s.pic, s.editForm) : s.pic}
-                                    src={item.thumbUrl}
-                                />
-                            </Tooltip>
+                            <img alt="" className={s.pic} src={item.thumbUrl} />
                         </div>
                     );
                 })}
             <Modal visible={visible} title="文件上传" onOk={onOk} onCancel={onCancel}>
                 <div className={s.uploadContainer}>
-                    <Upload {...selfProps} value={props.value} onChange={changeValue} />
+                    <Upload {...selfProps} value={curValue} onChange={changeValue} />
                 </div>
             </Modal>
         </div>