进度条

This commit is contained in:
梅航 2024-08-06 14:27:20 +08:00
parent 78214be4be
commit 20132c3086
2 changed files with 342 additions and 236 deletions

View File

@ -1,19 +1,19 @@
.sharedFilesModel {
>div:nth-child(1) {
> div:nth-child(1) {
display: flex;
align-items: center;
justify-content: space-between;
>span {
> span {
color: #EEEEEE;
font-size: 16px;
}
>div {
> div {
display: flex;
align-items: center;
>span {
> span {
margin-right: 20px;
cursor: pointer;
font-size: 16px;
@ -21,7 +21,15 @@
}
}
>div:nth-child(2) {
> div:nth-child(2) {
margin: 20px 0;
}
.updateDiv {
color: #ffffff;
.ant-progress .ant-progress-text {
color: #ffffff;
}
}
}

View File

@ -1,239 +1,337 @@
import styles from '@/components/SharedFilesModel/index.module.scss'
import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
import { Button, Input, Modal, Pagination, Table, message } from 'antd';
import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
import { PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomFile } from '@/api/Meeting';
import {
DeleteOutlined,
ProfileOutlined,
ReloadOutlined,
SearchOutlined,
VerticalAlignBottomOutlined
} from '@ant-design/icons';
import {Button, Input, message, Modal, Pagination, Progress, Table} from 'antd';
import {forwardRef, useEffect, useImperativeHandle, useState} from "react";
import {DeleteRoomFile, GetRoomFile, GetRoomFileDwUrl, GetRoomUpFileurl, PostRoomFile} from '@/api/Meeting';
import axios from 'axios';
import { useLocation } from 'react-router-dom';
import { storage } from '@/utils';
const { Column } = Table
import {useLocation} from 'react-router-dom';
import {storage} from '@/utils';
const {Column} = Table
const SharedFilesModel = forwardRef((props: any, ref: any) => {
useImperativeHandle(ref, () => ({
getData: () => {
setIsSharedFilesModel(true)
}
}))
const { state } = useLocation();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [showRowSelection, setShowRowSelection] = useState(false);
const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
const [user, setUser] = useState<any>({});
const [fileList, setFileList] = useState({
data: [],
keyword: '',
total: 0,
pageIndex: 1,
pageSize: 10,
})
useEffect(() => {
let userInfo = JSON.parse(storage.getItem('user') as string)
setUser(userInfo)
getRoomFile()
}, [fileList.pageIndex]);
// 获取共享文件列表
const getRoomFile = async (): Promise<void> => {
await GetRoomFile({
pageIndex: fileList.pageIndex,
pageSize: fileList.pageSize,
keyword: fileList.keyword,
roomId: state.roomId
}).then(res => {
if (res.code === 200) {
setFileList({
...fileList,
data: res.data.items.map((item: any) => {
return {
...item,
key: item.id,
}
}),
total: res.data.total
})
}
useImperativeHandle(ref, () => ({
getData: () => {
setIsSharedFilesModel(true)
}
}))
const {state} = useLocation();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [showRowSelection, setShowRowSelection] = useState(false);
const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
const [user, setUser] = useState<any>({});
const [fileList, setFileList] = useState({
data: [],
keyword: '',
total: 0,
pageIndex: 1,
pageSize: 10,
})
}
return (
<>
<Modal
title="共享文件"
open={isSharedFilesModel}
footer={null}
centered
width={'800px'}
onCancel={() => setIsSharedFilesModel(false)}
maskClosable
>
<div>
<div className={styles.sharedFilesModel}>
<div>
<span>{fileList.total}</span>
<div style={{ color: 'white' }}>
<Input
placeholder="搜索"
style={{ width: '200px' }}
prefix={<SearchOutlined style={{ color: 'white' }} />}
onChange={(e) => {
setFileList({
...fileList,
keyword: e.target.value
})
}}
onPressEnter={() => {
if (fileList.pageIndex === 1) {
getRoomFile()
} else {
setFileList({
...fileList,
pageIndex: 1
})
}
}}
onBlur={() => {
if (fileList.pageIndex === 1) {
getRoomFile()
} else {
setFileList({
...fileList,
pageIndex: 1
})
}
}}
/>
<ReloadOutlined title='刷新' onClick={() => {
if (fileList.pageIndex === 1) {
getRoomFile()
} else {
setFileList({
...fileList,
pageIndex: 1
})
}
}} />
<ProfileOutlined title={showRowSelection ? '取消框选' : '显示框选'} onClick={() => {
setShowRowSelection(!showRowSelection)
}} style={{ color: showRowSelection ? '#5575F2' : 'white' }} />
{showRowSelection ? <DeleteOutlined title='删除' onClick={() => {
if (selectedRowKeys.length) {
DeleteRoomFile(selectedRowKeys).then(res => {
if (res.code === 200) {
message.success('删除成功!')
getRoomFile()
}
})
} else {
message.error('请选择文件!')
}
}} /> : null}
<Button type="primary" style={{ backgroundColor: '#31353A' }}
onClick={() => {
const file = document.createElement("input") as any;
file.accept = "image/*,.doc,.docx,.ppt,.pptx,.xls,.xlsx,application/pdf";
file.type = "file";
file.onchange = async () => {
const fileInfo = file.files[0];
const maxSize = 100 * 1024 * 1024; // 100MB in bytes
if (fileInfo.size > maxSize) {
message.error('文件太大请上传小于100MB的文件。')
// 清除文件输入框的值,以便用户可以选择其他文件
return
}
const fileType = fileInfo.name.split('.');
const fileTypeName = fileType[fileType.length - 1];
await GetRoomUpFileurl(state.channelId, fileTypeName).then(async res => {
const formData = new FormData();
formData.append("name", fileInfo.name);
formData.append("OSSAccessKeyId", res.data.ossAccessKeyId);
formData.append("key", res.data.key);
formData.append("policy", res.data.policy);
formData.append("signature", res.data.signature);
formData.append("success_action_status", res.data.success_action_status);
formData.append("file", fileInfo);
await axios.post(res.data.host, formData, {
headers: {
"Content-Type": "multipart/form-data",
"Authorization": `Bearer ${user.token}`
},
withCredentials: false
})
await PostRoomFile({
fileUrl: res.data.key,
size: fileInfo.size,
fileName: fileInfo.name,
roomId: state.roomId
})
getRoomFile()
})
};
file.click();
}}
></Button>
</div>
</div>
<div>
<Table
size={'small'}
rowSelection={showRowSelection ? {
selectedRowKeys,
onChange: (newSelectedRowKeys: React.Key[]) => {
setSelectedRowKeys(newSelectedRowKeys);
}
} : undefined}
dataSource={fileList.data}
pagination={false}
scroll={{ y: '40vh' }}
style={{ width: '100%' }}
>
<Column title="文件" dataIndex="fileName" key="fileName" width={140} />
<Column title="更新时间" dataIndex="modifyTime" key="modifyTime" width={200} />
<Column title="大小" render={(item) => (
<>
<span>{item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'}</span>
</>
)} />
<Column title="上传者" dataIndex="userName" key="userName" />
<Column title="下载次数"
render={(item) => (
<>
<span>{item.downloadCount}</span>
</>
)}
/>
<Column title="操作" render={(item) => (
<>
<VerticalAlignBottomOutlined title='下载' style={{ color: '#5575F2', cursor: 'pointer' }} onClick={() => {
GetRoomFileDwUrl(item.fileUrl, item.id).then(res => {
if (res.code === 200) {
const downloadLink = document.createElement("a");
downloadLink.href = res.data;
downloadLink.download = item.fileName;
downloadLink.click();
getRoomFile()
}
})
}} />
{/* <FolderOutlined title='文件' style={{ color: '#FFA000', cursor: 'pointer' }} /> */}
</>
)} />
</Table>
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
<Pagination size="small" total={fileList.total} onChange={(e) => {
setFileList({
const [uploadProgress, setUploadProgress] = useState(0);
useEffect(() => {
let userInfo = JSON.parse(storage.getItem('user') as string)
setUser(userInfo)
getRoomFile()
}, [fileList.pageIndex]);
// 获取共享文件列表
const getRoomFile = async (): Promise<void> => {
await GetRoomFile({
pageIndex: fileList.pageIndex,
pageSize: fileList.pageSize,
keyword: fileList.keyword,
roomId: state.roomId
}).then(res => {
if (res.code === 200) {
setFileList({
...fileList,
pageIndex: e
})
}} pageSize={fileList.pageSize} current={fileList.pageIndex} hideOnSinglePage={true} />
</div>
</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
data: res.data.items.map((item: any) => {
return {
...item,
key: item.id,
}
}),
total: res.data.total
})
}
})
}
return (
<>
<Modal
title="共享文件"
open={isSharedFilesModel}
footer={null}
centered
width={'800px'}
onCancel={() => setIsSharedFilesModel(false)}
maskClosable
>
<div>
<div className={styles.sharedFilesModel}>
<div className={styles.updateDiv}>
<span>{fileList.total}</span>
<div>
<Progress percent={uploadProgress} strokeColor={'green'} trailColor={'#e8e8e8'}
percentPosition={{align: 'center', type: 'inner'}}
size={{width: 100, height: 20}}/>
</div>
<div style={{color: 'white'}}>
<Input
placeholder="搜索"
style={{width: '200px'}}
prefix={<SearchOutlined style={{color: 'white'}}/>}
onChange={(e) => {
setFileList({
...fileList,
keyword: e.target.value
})
}}
onPressEnter={() => {
if (fileList.pageIndex === 1) {
getRoomFile()
} else {
setFileList({
...fileList,
pageIndex: 1
})
}
}}
onBlur={() => {
if (fileList.pageIndex === 1) {
getRoomFile()
} else {
setFileList({
...fileList,
pageIndex: 1
})
}
}}
/>
<ReloadOutlined title='刷新' onClick={() => {
if (fileList.pageIndex === 1) {
getRoomFile()
} else {
setFileList({
...fileList,
pageIndex: 1
})
}
}}/>
<ProfileOutlined title={showRowSelection ? '取消框选' : '显示框选'} onClick={() => {
setShowRowSelection(!showRowSelection)
}} style={{color: showRowSelection ? '#5575F2' : 'white'}}/>
{showRowSelection ? <DeleteOutlined title='删除' onClick={() => {
if (selectedRowKeys.length) {
DeleteRoomFile(selectedRowKeys).then(res => {
if (res.code === 200) {
message.success('删除成功!')
getRoomFile()
}
})
} else {
message.error('请选择文件!')
}
}}/> : null}
<Button type="primary" style={{backgroundColor: '#31353A'}}
onClick={() => {
const file = document.createElement("input") as any;
file.accept = "image/*,.doc,.docx,.ppt,.pptx,.xls,.xlsx,application/pdf";
file.type = "file";
file.onchange = async () => {
const fileInfo = file.files[0];
const maxSize = 100 * 1024 * 1024; // 100MB in bytes
</div>
</div>
</Modal>
</>
)
if (fileInfo.size > maxSize) {
message.error('文件太大请上传小于100MB的文件。')
// 清除文件输入框的值,以便用户可以选择其他文件
return
}
const fileType = fileInfo.name.split('.');
const fileTypeName = fileType[fileType.length - 1];
await GetRoomUpFileurl(state.channelId, fileTypeName).then(async res => {
const formData = new FormData();
formData.append("name", fileInfo.name);
formData.append("OSSAccessKeyId", res.data.ossAccessKeyId);
formData.append("key", res.data.key);
formData.append("policy", res.data.policy);
formData.append("signature", res.data.signature);
formData.append("success_action_status", res.data.success_action_status);
formData.append("file", fileInfo);
await axios.post(res.data.host, formData, {
headers: {
"Content-Type": "multipart/form-data",
"Authorization": `Bearer ${user.token}`
},
withCredentials: false,
onUploadProgress: (progressEvent: any) => {
// 获取上传进度
const {loaded, total} = progressEvent;
const progress = Math.round((loaded * 100) / total);
console.log(`上传进度: ${progress}%`);
setUploadProgress(progress)
}
})
await PostRoomFile({
fileUrl: res.data.key,
size: fileInfo.size,
fileName: fileInfo.name,
roomId: state.roomId
})
getRoomFile()
})
};
file.click();
}}
></Button>
</div>
</div>
<div>
<Table
size={'small'}
rowSelection={showRowSelection ? {
selectedRowKeys,
onChange: (newSelectedRowKeys: React.Key[]) => {
setSelectedRowKeys(newSelectedRowKeys);
}
} : undefined}
dataSource={fileList.data}
pagination={false}
scroll={{y: '40vh'}}
style={{width: '100%'}}
>
<Column title="文件" dataIndex="fileName" key="fileName" width={140}/>
<Column title="更新时间" dataIndex="modifyTime" key="modifyTime" width={200}/>
<Column title="大小" render={(item) => (
<>
<span>{item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'}</span>
</>
)}/>
<Column title="上传者" dataIndex="userName" key="userName"/>
<Column title="下载次数"
render={(item) => (
<>
<span>{item.downloadCount}</span>
</>
)}
/>
<Column title="操作" render={(item) => (
<>
<VerticalAlignBottomOutlined title='下载'
style={{color: '#5575F2', cursor: 'pointer'}}
onClick={async () => {
GetRoomFileDwUrl(item.fileUrl, item.id).then(res => {
console.log(res)
if (res.code === 200) {
// const downloadLink = document.createElement("a");
// downloadLink.href = res.data;
// downloadLink.download = item.fileName;
axios({
url: res.data,
method: 'GET',
// headers: {
// "Authorization": `Bearer ${user.token}`,
// "responseType": 'stream'
// },
onDownloadProgress: (progressEvent: any) => {
const totalLength = item.size;
console.log(2222222)
if (totalLength !== null) {
const percentComplete = (progressEvent.loaded / totalLength * 100).toFixed(2);
console.log(`下载进度: ${percentComplete}%`);
item.percentComplete = percentComplete
}
}
}).then(() => {
const downloadLink = document.createElement("a");
downloadLink.href = res.data;
downloadLink.download = item.fileName;
downloadLink.click();
getRoomFile()
})
// downloadLink.click();
// getRoomFile()
}
})
// const url = "https://wgshare.oss-cn-chengdu.aliyuncs.com/share_file/559167236182085/20421555/b24e2c41f47140308c47cdd77e6305c7.jpg?Expires=1722923931&OSSAccessKeyId=LTAI5tQYVQHkkXxXTmjwiSDv&Signature=eJTWD93ifV2v1R6XCHSOa6j1R%2FE%3D"
// axios({
// url,
// method: 'GET',
// // headers: {
// // "Authorization": `Bearer ${user.token}`,
// // "responseType": 'stream'
// // },
// onDownloadProgress: (progressEvent: any) => {
// const totalLength = item.size;
// console.log(2222222)
// if (totalLength !== null) {
// const percentComplete = (progressEvent.loaded / totalLength * 100).toFixed(2);
// console.log(`下载进度: ${percentComplete}%`);
// }
// }
// })
// .then((response: any) => {
// const downloadLink = document.createElement("a");
// downloadLink.href = response.data;
// downloadLink.download = item.fileName;
// downloadLink.click();
// getRoomFile()
// })
// await axios.get(`${import.meta.env.VITE_BASE_URL_API}/room/file-dw-url?fileUrl=${item.fileUrl}&fileId=${item.id}`, {
// headers: {
// "Authorization": `Bearer ${user.token}`,
// "responseType": 'stream'
// },
// onDownloadProgress: (progressEvent: any) => {
// const totalLength = item.size;
// const percentComplete = (progressEvent.loaded / totalLength * 100).toFixed(2);
// console.log(`下载进度: ${percentComplete}%`);
// }
// })
// await axios.get(`${import.meta.env.VITE_BASE_URL_API}/room/file-dw-url?fileUrl=${item.fileUrl}&fileId=${item.id}`, {
// headers: {
// "ResponseType": "blob",
// "Authorization": `Bearer ${user.token}`
// },
// withCredentials: false,
// onDownloadProgress: (progressEvent: any) => {
// console.log(progressEvent, 33333)
// // 获取上传进度
// const {loaded, total} = progressEvent;
// const progress = Math.round((loaded * 100) / total);
// console.log(`下载进度: ${progress}%`);
// setUploadProgress(progress)
// }
// })
}}/>
{/* <FolderOutlined title='文件' style={{ color: '#FFA000', cursor: 'pointer' }} /> */}
</>
)}/>
</Table>
<div style={{display: 'flex', justifyContent: 'center', marginTop: '10px'}}>
<Pagination size="small" total={fileList.total} onChange={(e) => {
setFileList({
...fileList,
pageIndex: e
})
}} pageSize={fileList.pageSize} current={fileList.pageIndex} hideOnSinglePage={true}/>
</div>
</div>
</div>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'flex-end'}}>
</div>
</div>
</Modal>
</>
)
})
export default SharedFilesModel