/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-09-02 19:56:05
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-06-10 16:23:39
|
* @FilePath: \gzDyh\gz-customerSystem\src\components\ArcoUpload\index.jsx
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
*/
|
import React, { useEffect, useState } from 'react'
|
import { Upload, Form } from '@arco-design/web-react';
|
import {
|
IconAttachment,
|
IconPlus
|
} from '@arco-design/web-react/icon';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const FormItem = Form.Item;
|
|
/**
|
* params *, //upload组件参数
|
* field *, // form的标识
|
* handleChangeFile, // 文件上传成功之后的回调
|
* label *, // form的label名
|
* editData *, // 编辑回显数据
|
* handleDelFile *,//删除文件接口
|
* ownerType,//用于回显文件
|
* formItemParams, formItem的参数
|
*/
|
|
export default function ArcoUpload(props) {
|
const [myFileList, setMyFileList] = useState([])
|
|
const handleFileListChange = (fileList) => {
|
if (props.onFileListChange) {
|
props.onFileListChange(fileList);
|
}
|
};
|
|
useEffect(() => {
|
if (props.editData) {
|
if (props.editData[props.field]) {
|
//新增的时候有file数据，可以这样子回显
|
setMyFileList(props.editData[props.field])
|
} else {
|
//编辑的时候，文件统一放在filInfoList了，需要设置ownerType获取到该材料文件回显
|
const fileInfoList = props.editData.fileInfoList
|
if (fileInfoList && fileInfoList.length != 0) {
|
let file = [];
|
fileInfoList.forEach(item => {
|
if (item.ownerType == props.ownerType) {
|
file.push(item.fileList[0])
|
}
|
})
|
setMyFileList(file)
|
}
|
}
|
}
|
}, [props.editData])
|
|
return (
|
<>
|
<FormItem
|
label={props.label}
|
field={props.field}
|
triggerPropName='fileList'
|
{...props.formItemParams}
|
>
|
<Upload
|
drag
|
multiple
|
style={{ ...props.style }}
|
accept='.png,.jpg,.pdf,.docx'
|
onDrop={(e) => {
|
}}
|
tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
|
showUploadList={{
|
fileIcon: <IconAttachment style={{ color: '#1D2129' }} />,
|
}}
|
headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
|
onChange={(fileList, file) => {
|
const { status, response, uid ,id} = file
|
//因为字节upLoad组件有bug，不能区分添加文件还是删除文件，所以用这种办法来判断是不是删除
|
const isDel = myFileList && myFileList.length > fileList.length
|
//上传失败
|
if (status === 'error' && !isDel) {
|
$$.info({ type: 'error', content: '抱歉，网络错误附件上传失败，请稍后重试' });
|
}
|
//上传成功
|
|
if (status === 'done' && !isDel) {
|
|
if (response.code === 0 || response.code === '0') {
|
// 返回附件成功上传的回调
|
$$.infoSuccess({ content: response.msg });
|
if (props.handleChangeFile) {
|
props.handleChangeFile(response);
|
}
|
}
|
}
|
//删除文件
|
if (isDel && props.handleDelFile) {
|
if (response) {
|
//删除的是新提交的
|
|
props.handleDelFile(response.data[0].id)
|
} else {
|
//删除的是回显的文件
|
console.log('uid', uid);
|
console.log('id', id);
|
props.handleDelRealFile(id)
|
}
|
|
}
|
handleFileListChange(fileList);
|
setMyFileList(fileList)
|
|
}}
|
{...props.params}//自定义
|
>
|
<div className='trigger'>
|
<IconPlus />
|
<div style={{ marginTop: '5px' }}>上传</div>
|
</div>
|
</Upload>
|
</FormItem>
|
|
</>
|
|
)
|
}
|
