上传附件修改

liuwh

2024-09-10 6349ca2190dd9e96c1c49497bb7fef0a362af5a5

 gz-customerSystem/src/views/register/matterDetail/FileTable.jsx

@@ -1,9 +1,8 @@
import React, { Fragment, useEffect, useState, useRef } from 'react';
import * as $$ from '@/utils/utility';
import ArcoUpload from '@/components/ArcoUpload';
import NewFileCheck from '../../filesCheck/newFileCheck';
import { IconLink } from '@arco-design/web-react/icon';
import { Row, Col, Button } from 'antd';
import NewFileCheck from './NewFileCheck';
import { Row, Col, Button, Typography, Space } from 'antd';
import { Form, Modal } from '@arco-design/web-react';
import {
  applyMaterials,
@@ -13,19 +12,17 @@
} from '@/assets/images';
import { CheckOutlined, } from '@ant-design/icons';
import TableView from '@/components/TableView';
import downloadFile from "@/utils/download"

const { Link, Text } = Typography;
const appUrl = $$.appUrl;

function delFile(id) {
  return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data: { id } });
}

function listIdTypeInfoApi(data) {
  return $$.ax.request({ url: `fileInfo/listIdTypeInfo`, type: 'post', service: 'sys', data });
  return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
}

function deleteFileByIdApi(data) {
  return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data });
  return $$.ax.request({ url: `fileInfo/deleteFileByIds`, type: 'get', service: 'sys', data });
}

//表格数据
@@ -36,6 +33,7 @@
    size: 0,
    fileNames: "-",
    updateTime: '',
    id: 1,
  },
  {
    ownerType: "22_00018-102",
@@ -43,16 +41,24 @@
    size: 0,
    fileNames: "-",
    updateTime: '',
    id: 2,
  },
]

/**
 * mainId*,//就是caseId，事件id
 * fileInfoList*, //文件列表
 * isReview,//是否查看，查看的话就不能删除上传，只能查看下载
 */

export default function FileTable(props) {
  const formRef = useRef();
  const [sourceType, setSourceType] = useState();
  const [filesCheck, setFilesCheck] = useState(false);
  const [upload, setUpLoad] = useState(false);
  const [uploadVisible, setUpLoadVisible] = useState(false);
  const [tableData, setTableData] = useState(staticTableData);
  const [fileMap, setFileMap] = useState({});
  const [fileInfoList, setFileInfoList] = useState([]);

  // 列配置
  const fakeColumns = [
@@ -94,17 +100,47 @@
      title: '操作',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 200,
      width: props.isReview ? 60 : 125,
      fixed: 'right',
      render: (text, record) => (
        <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
          <div onClick={() => setFilesCheck(true)}>查看</div>
          <div>删除</div>
          <div>下载</div>
          <div onClick={() => {
        <Space size="middle">
          <Link onClick={() => {
            setSourceType(record.ownerType)
            setUpLoad(true)
          }}>上传</div>
        </div>
            setFilesCheck(true)
          }}>
            查看
          </Link>
          {!props.isReview && <Link onClick={() => {
            if (record.fileInfoList && record.fileInfoList.length != 0) {
              let ids = record.fileInfoList?.map(item => item.id).join(',')
              handleDelete(ids)
            } else {
              $$.info({ type: 'warning', content: '还没上传关于该材料的文件！' });
            }
          }}>
            删除
          </Link>}
          <Link onClick={() => {
            if (record.fileInfoList && record.fileInfoList.length != 0) {
              let ids = record.fileInfoList?.map(item => item.id).join(',')
              handleDownlod(ids)
            } else {
              $$.info({ type: 'warning', content: '还没上传关于该材料的文件！' });
            }
          }}>
            下载
          </Link>
          {!props.isReview && <Link onClick={() => {
            setSourceType(record.ownerType)
            setUpLoadVisible(true)
            setFileInfoList(record.fileInfoList)
            setTimeout(() => {
              formRef.current.setFieldValue('file', record.fileInfoList)
            }, 0)
          }}>
            上传
          </Link>}
        </Space>
      )
    },
    // 更多列配置...
@@ -114,6 +150,54 @@
    { value: '22_00018-102', label: '证据材料' },
  ]

  useEffect(() => {
    if (props.fileInfoList && props.fileInfoList.length != 0) {
      //证明材料
      const applyFile = props.fileInfoList.find(item => item.ownerType == "22_00018-101")
      //证据材料
      const evidenceFile = props.fileInfoList.find(item => item.ownerType == "22_00018-102")
      setFileMap({
        '22_00018-101': applyFile?.fileList || [],
        '22_00018-102': evidenceFile?.fileList || []
      })
      const newList = tableData.map(item => {
        if (item.ownerType == '22_00018-101' && applyFile) {
          return {
            ...item,
            size: applyFile.fileList.length,
            fileNames: applyFile.fileList?.map(item => item.trueName).join('，'),
            updateTime: $$.timeFormat(applyFile.fileList[applyFile.fileList.length - 1].updateTime),
            fileInfoList: applyFile.fileList.map(item => {
              return {
                ...item,
                uid: item.id,
                name: item.trueName
              }
            })
          }
        }
        if (item.ownerType == '22_00018-102' && evidenceFile) {
          return {
            ...item,
            size: evidenceFile.fileList.length,
            fileNames: evidenceFile.fileList?.map(item => item.trueName).join('，'),
            updateTime: $$.timeFormat(evidenceFile.fileList[evidenceFile.fileList.length - 1].updateTime),
            fileInfoList: evidenceFile.fileList.map(item => {
              return {
                ...item,
                uid: item.id,
                name: item.trueName
              }
            })
          }
        }
        return item
      })
      setTableData(newList)
    }
  }, [props.fileInfoList])

  //上传弹窗判断用哪种种图标
  const personIconType = (v) => {
    switch (v) {
      case '22_00018-101':
@@ -132,25 +216,60 @@
    }
  }

  //上传弹窗完成后的事件
  const handleUpload = () => {

    const newList = tableData.map(item => {
      if(item.ownerType == sourceType) {
        const data = fileMap[sourceType]
        return {
          ...item,
          size: data.length,
          fileNames: data.map(item => item.name).join('，'),
          updateTime: $$.timeFormat(data[data.length - 1].response.data[0].updateTime)
      if (item.ownerType == '22_00018-101') {
        const data = fileMap['22_00018-101'];
        if (data?.length > 0) {
          return {
            ...item,
            size: data.length,
            fileNames: data.map(item => item.trueName).join('，'),
            updateTime: $$.timeFormat(data[data.length - 1].updateTime),
            fileInfoList: data.map(item => {
              return {
                ...item,
                name: item.trueName,
                uid: item.id,
              }
            }),
          }
        } else {
          return item
        }
      } else {
        return item

      }
      if (item.ownerType == '22_00018-102') {
        const data = fileMap['22_00018-102'] || [];
        if (data?.length > 0) {
          return {
            ...item,
            size: data.length,
            fileNames: data.map(item => item.trueName).join('，'),
            updateTime: $$.timeFormat(data[data.length - 1].updateTime),
            fileInfoList: data.map(item => {
              return {
                ...item,
                name: item.trueName,
                uid: item.id,
              }
            }),
          }
        } else {
          return item
        }
      }
    })

    setTableData(newList)
    setUpLoad(false);
    setUpLoadVisible(false);
  };

  //根据sourceType生成组件
  const formType = (type) => {

    if (type === '22_00018-101') {
      //申请材料
      return (
@@ -162,11 +281,22 @@
              }}
              field='file'
              label=''
              // editData={props.editData}
              editData={{
                file: fileInfoList
              }}
              handleDelFile={handleDelFile}
              onFileListChange={(v) => { 
              onFileListChange={(v) => {
                let newList = v?.map(item => {
                  if (item.response) {
                    return item.response.data[0]
                  } else {
                    return item
                  }
                })

                setFileMap({
                  '22_00018-101': v
                  ...fileMap,
                  '22_00018-101': newList.filter(i => i.ownerType === '22_00018-101')
                })
              }}
            />
@@ -184,22 +314,51 @@
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-102`,
              }}
              field='file1'
              field='file'
              label=''
              // editData={props.editData}
              editData={{
                file: fileInfoList
              }}
              handleDelFile={handleDelFile}
              onFileListChange={(v) => { 
              onFileListChange={(v) => {
                let newList = v?.map(item => {
                  if (item.response) {
                    return item.response.data[0]
                  } else {
                    return item
                  }
                })
                setFileMap({
                  '22_00018-102': v
                  ...fileMap,
                  '22_00018-102': newList.filter(i => i.ownerType === '22_00018-102')
                })
              }}

            />
            {fileMap[sourceType]?.length > 0 && <div style={{ position: 'absolute', top: '198px', left: '16px', color: '#86909C' }}>证据材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileMap[sourceType]?.length}</span></div>}
          </Col>
        </>
      )
    }
  }

  //删除
  const handleDelete = (ids) => {
    Modal.confirm({
      title: '删除确认',
      content: '确认全部删除该材料？',
      onOk: async () => {
        const res = await deleteFileByIdApi({ ids })
        if (res.type) {
          $$.infoSuccess({ content: '删除成功！' });
          setTableData(tableData.filter(item => !ids.includes(item.ownerType)))
        }
      },
    });
  }

  //下载
  const handleDownlod = async (ids) => {
    await downloadFile(`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/down/batch`, { ids })
  }

  return (
@@ -210,15 +369,19 @@
        size="small"
        rowKey="ownerType"
        bordered={true}
        style={{ marginBottom: '65px' }}
        scroll={{ x: 1300 }}
      />
      <Modal
        style={{ width: '512px' }}
        visible={upload}
        onCancel={() => setUpLoad(false)}
        visible={uploadVisible}
        onCancel={() => setUpLoadVisible(false)}
        footer={null}
        title='上传材料'
        centered
        mountOnEnter={false}
        unmountOnExit={true}
        maskClosable={false}
        focusLock={false}
      >
        <div style={{ paddingTop: '8px' }}>
          <Row gutter={[30, 24]}>
@@ -226,6 +389,7 @@
              return (
                <Col span={12} key={t}>
                  <div
                    onClick={() => { x.value !== sourceType && setSourceType(x.value) }}
                    className={`casePerfection-cardTab-tab ${x.value === sourceType && 'casePerfection-cardTab-tabActive'}`}
                  >
                    <img src={x.value === sourceType ? personIconType(x.value)?.[1] : personIconType(x.value)?.[0]} alt="" style={{ width: '40px', height: '40px' }} />
@@ -257,11 +421,20 @@
        </div>

      </Modal >
      <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
      <Modal
        style={{ width: '1200px' }}
        visible={filesCheck}
        onCancel={() => setFilesCheck(false)}
        footer={null}
        title='查看事件材料'
        centered
        unmountOnExit={true}
        maskClosable={false}
      >
        <div style={{ marginTop: '-16px' }}>
          <NewFileCheck />
          <NewFileCheck menuList={tableData} sourceType={sourceType} />
        </div>
      </Modal>
    </Fragment>
    </Fragment >
  )
}