阅读量:4
上传部分使用的是antd中的Upload组件,具体如下:
GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可
单文件上传
<Upload key={`upload_${record.id}`} showUploadList={false} accept=".xlsx" maxCount={1} customRequest={({ file }) => { const formData = new FormData(); formData.append('id', record.id); formData.append('ins', file); GradingFilingReportUpload(formData).then(res => { if (res.state === 200) { message.success(res.message); } else { message.error('上传失败'); } }) }} ><a >上传</a></Upload>多文件上传
页面组件
<Upload showUploadList={false} multiple customRequest={({ file, onSuccess, onError }) => { handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError) }} > <a >批量上传</a> </Upload>js逻辑
const handleRequestAllFile = async (fileList: any[]) => { try { const formData = new FormData(); fileList.forEach((file) => { formData.append('ins', file); }) const res = await GradingFilingReportUpload(formData); if (res.state === 200) { message.success('文件上传成功'); } else { message.error('文件上传失败'); } } catch (e) { message.error('文件上传过程出错') } }完整页面代码
import { downLoad, downLoadStream } from '@/util/request'; import { ProTable } from '@ant-design/pro-components'; import { getTableColumns } from './colums' import { useEffect, useRef, useState } from 'react'; import DeleteBtn from './components/DeleteBtn'; import { Button, Table, Upload, message } from 'antd'; import { DeleteOutlined } from '@ant-design/icons'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; import type { GradingFilingReportData, GradingFilingReportSelect } from '@/types/GradingFilingReport'; import { GradingFilingReportDataList, deleteDataById, GradingFilingReportUpload } from '@/service/GradingFilingReport' import AddEditModal, { MODAL_TYPE } from './components/AddEditModal'; const GradingFilingReport = () => { const [columns, setColumns] = useState<ProColumns<GradingFilingReportData>[]>([]); const actionRef = useRef<ActionType>(); const [SortOrderTest, setSortOrderTest] = useState<string>(''); const [valueEnums, setValueEnums] = useState<GradingFilingReportSelect>({}); // 获取表格数据 const getData = async (filter: any) => { const params = { ...filter, offSet: filter.current, orderType: SortOrderTest }; delete params.current; const { state, total, data } = (await GradingFilingReportDataList(params)) || {}; if (state === 200) { return { data, success: true, total: total }; } else { return { data: [] }; } }; // 下载文件 const downLoadFileThis = async (item: any) => { let fileName = item.systemName + '.xlsx' let id = item.id let downloadParams = { id } let url = '/projectAcceptance/service/ratingFilingReportService/downloadReport/0' downLoad(url, downloadParams).then(res => { downLoadStream(res, fileName); }).catch((e) => { message.error('导出失败'); }).finally(() => { console.log('完成'); }) } // 获取表格的表头数据 const getTableConfig = async () => { const { columns, valueEnums } = await getTableColumns(); setValueEnums(valueEnums); setColumns([ ...columns, { title: '操作', valueType: 'option', key: 'option', fixed: 'right', width: 160, align: 'center', render: (text, record: any, index, action) => [ <AddEditModal key={`edit_${record.id}`} type={MODAL_TYPE.EDIT} record={record} valueEnums={valueEnums} callback={() => { action && action.reload(); }} />, <DeleteBtn<Array<any>> key={`delete_${record.id}`} params={record.id || ''} method={deleteDataById} callback={() => { action && action.reload(); }} />, <Upload key={`upload_${record.id}`} showUploadList={false} accept=".xlsx" maxCount={1} customRequest={({ file }) => { const formData = new FormData(); formData.append('id', record.id); formData.append('ins', file); GradingFilingReportUpload(formData).then(res => { if (res.state === 200) { message.success(res.message); } else { message.error('上传失败'); } }) }} ><a >上传</a></Upload> , <a key={`download_${record.id}`} onClick={() => downLoadFileThis(record)}>下载</a> ], }, ]); } // 批量上传的方法 const handleRequestAllFile = async (fileList: any[]) => { try { const formData = new FormData(); fileList.forEach((file) => { formData.append('ins', file); }) const res = await GradingFilingReportUpload(formData); if (res.state === 200) { message.success('文件上传成功'); } else { message.error('文件上传失败'); } } catch (e) { message.error('文件上传过程出错') } } // 批量上传的按钮 const toolBarRender = (action: ActionType | undefined) => { return [ <Upload showUploadList={false} multiple customRequest={({ file, onSuccess, onError }) => { handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError) }} > <a >批量上传</a> </Upload> ]; }; // 完成排序功能 const handleChange = (pagination: any, filters: any, sorter: any) => { console.log(sorter, 'sorter'); if (sorter.order !== undefined) { setSortOrderTest(sorter.order === 'descend' ? 'DESC' : 'ASC'); } }; // 初始化调用 useEffect(() => { getTableConfig() }, []) return ( <ProTable<GradingFilingReportData> rowKey="id" cardBordered actionRef={actionRef} request={getData} columns={columns} search={{ labelWidth: 100, }} onChange={handleChange} toolBarRender={toolBarRender} scroll={{ x: 'max-content' }} rowSelection={{ selections: [Table.SELECTION_ALL], }} tableAlertOptionRender={({ selectedRowKeys }) => { return ( <DeleteBtn<Array<any>> content={ <Button type="link" icon={<DeleteOutlined />}> {'批量删除'} </Button> } method={deleteDataById} params={selectedRowKeys} callback={() => actionRef.current && actionRef.current.reload()} /> ); }} /> ) } export default GradingFilingReport