diff --git a/components/apolloTable/component/base/detail/upload/styles.less b/components/apolloTable/component/base/detail/upload/styles.less index 437d13d3d3856eaca0dac98c2ec935ed037b9cc6..4f5c9d6f4b5bc5f082d6e00c3b7d4941829336e1 100644 --- a/components/apolloTable/component/base/detail/upload/styles.less +++ b/components/apolloTable/component/base/detail/upload/styles.less @@ -2,6 +2,7 @@ display: flex; vertical-align: middle; align-items: center; + user-select: none; } .moreBtn { diff --git a/components/apolloTable/component/base/edit/upload/index.less b/components/apolloTable/component/base/edit/upload/index.less index 667714cf9faac88389f5d4957acd16abf3ab1f8b..def95533ab367ec144b35caa757047f918d8639e 100644 --- a/components/apolloTable/component/base/edit/upload/index.less +++ b/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; diff --git a/components/apolloTable/component/base/edit/upload/index.tsx b/components/apolloTable/component/base/edit/upload/index.tsx index cbe612dce2e51dee6de074a904bc5e76dbdbb178..41af3d3b34725533c01af40a0dea7c673a79c4dd 100644 --- a/components/apolloTable/component/base/edit/upload/index.tsx +++ b/components/apolloTable/component/base/edit/upload/index.tsx @@ -1,16 +1,13 @@ -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([]); - useEffect(() => { - setValue(props.value); - }, [props.value]); + const [curValue, setCurValue] = useState(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 (
- +
); } return ( -
- {value - && value.map((item: any, i: number) => { +
+ {curValue && + curValue.map((item: any, i: number) => { return (
- - - +
); })}
- +