feat: 事件材料

zhangyongtian

2024-09-07 ceb8b41c37e6a21ed7a01770fd77259d7c28a0a1

 gz-customerSystem/src/components/ArcoUpload/index.jsx

@@ -1,3 +1,11 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-09-02 19:56:05
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-03 11:34:07
 * @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 {
@@ -14,61 +22,74 @@
 * handleChangeFile, // 文件上传成功之后的回调
 * label *, // form的label名
 * editData *, // 编辑回显数据
 * handleDelFile *,//删除文件接口
 */

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) {
      console.log(props.editData[props.field]);
      setMyFileList(props.editData[props.field])
    }
  }, [props.editData])

  return (
    <FormItem
      label={props.label}
      field={props.field}
      triggerPropName='fileList'
    >
      <Upload
        drag
        multiple
        accept='.png,.jpg,.pdf'
        onDrop={(e) => {
        }}
        tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
        showUploadList={{
          fileIcon: <IconAttachment style={{ color: '#1D2129' }} />,
        }}
        headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
        onChange={(fileList, file) => {
          console.log(fileList, myFileList, file);
          const { status, response } = 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);
    <>
      <FormItem
        label={props.label}
        field={props.field}
        triggerPropName='fileList'
      >
        <Upload
          drag
          multiple
          accept='.png,.jpg,.pdf'
          onDrop={(e) => {
          }}
          tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
          showUploadList={{
            fileIcon: <IconAttachment style={{ color: '#1D2129' }} />,
          }}
          headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
          onChange={(fileList, file) => {
            const { status, response } = 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) {
            //删除文件
            if (isDel && props.handleDelFile) {
              props.handleDelFile(response.data[0].id)
            }
            handleFileListChange(fileList);
            setMyFileList(fileList)
            
          }}
          {...props.params}//自定义
        />
      </FormItem>

          }
          setMyFileList(fileList)
        }}
        {...props.params}//自定义
      />
    </FormItem>
    </>

  )
}