[泛微 ecode] 拖拽上传附件功能拖拽显示优化

由于原有的拖拽附件功能ecode用户拖拽上传附件时无视觉效果，存在导致无法上传或没有拖拽上传功能的错觉。
故对该功能进行显示效果优化！

原有的index.js改为以下内容即可：

index.js

const { WeaUpload } = ecCom;

class NewWeaUpload extends React.Component {
    hash = `${new Date().getTime()}_${Math.ceil(Math.random() * 100000)}`;

    state = {
        isDragOver: false
    };

    handleDragOver = (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        this.setState({ isDragOver: true });
    };

    handleDragEnter = (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    };

    handleDragLeave = (e) => {
        e.preventDefault();
        this.setState({ isDragOver: false });
    };

    handleDrop = (e) => {
        e.preventDefault();
        this.setState({ isDragOver: false });
    };

    render() {
        const { uploadId } = this.props;
        const { isDragOver } = this.state;
        const drop_element = `weaUploadDragDrop_${uploadId}_${this.hash}`;
        const newProps = {
            ...this.props,
            customOptions: {
                ...this.props.customOptions,
                drop_element,
            }
        };

        const dragAreaStyle = {
            width: '100%',
            minHeight: '32px',
            border: '2px dashed transparent',
            borderRadius: '4px',
            transition: 'all 0.3s',
            cursor: 'default',
            position: 'relative',
            ...(isDragOver && {
                border: '2px dashed #1890ff',
                backgroundColor: 'rgba(24, 144, 255, 0.1)',
            })
        };

        const overlayStyle = {
            display: isDragOver ? 'flex' : 'none',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(24, 144, 255, 0.1)',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '14px',
            color: '#1890ff',
            pointerEvents: 'none',
            zIndex: 1
        };

        return (
            <div
                id={drop_element}
                style={dragAreaStyle}
                onDragOver={this.handleDragOver}
                onDragEnter={this.handleDragEnter}
                onDragLeave={this.handleDragLeave}
                onDrop={this.handleDrop}
            >
                <div style={overlayStyle}>
                    <span>上传附件</span>
                </div>
                <WeaUpload {...newProps} _noOverwrite={true} />
            </div>
        )
    }
}

ecodeSDK.setCom('${appId}', 'NewWeaUpload', NewWeaUpload);

[泛微 ecode] 拖拽上传附件功能拖拽显示优化 by https://oneszhang.com/archives/130.html