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

本文摘要

针对泛微 OA Ecology 中 ecode 拖拽上传附件缺少视觉反馈、用户易误以为不支持拖拽的问题，这里通过改写 index.js 做显示优化：用 React 组件包裹 WeaUpload，监听拖拽进入、悬停与离开事件切换状态，拖拽时显示蓝色虚线边框和高亮遮罩提示上传附件，适合 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);