diff --git a/src/components/SharedFilesModel/index.module.scss b/src/components/SharedFilesModel/index.module.scss index 58bf4e5..4343829 100644 --- a/src/components/SharedFilesModel/index.module.scss +++ b/src/components/SharedFilesModel/index.module.scss @@ -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; } -} \ No newline at end of file + + .updateDiv { + color: #ffffff; + + .ant-progress .ant-progress-text { + color: #ffffff; + } + } +} diff --git a/src/components/SharedFilesModel/index.tsx b/src/components/SharedFilesModel/index.tsx index c631862..1b2d7ed 100644 --- a/src/components/SharedFilesModel/index.tsx +++ b/src/components/SharedFilesModel/index.tsx @@ -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([]); - const [showRowSelection, setShowRowSelection] = useState(false); - const [isSharedFilesModel, setIsSharedFilesModel] = useState(false); - const [user, setUser] = useState({}); - 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 => { - 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([]); + const [showRowSelection, setShowRowSelection] = useState(false); + const [isSharedFilesModel, setIsSharedFilesModel] = useState(false); + const [user, setUser] = useState({}); + const [fileList, setFileList] = useState({ + data: [], + keyword: '', + total: 0, + pageIndex: 1, + pageSize: 10, }) - } - return ( - <> - setIsSharedFilesModel(false)} - maskClosable - > -
-
-
- 共{fileList.total}个文件 -
- } - 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 - }) - } - }} - /> - { - if (fileList.pageIndex === 1) { - getRoomFile() - } else { - setFileList({ - ...fileList, - pageIndex: 1 - }) - } - }} /> - { - setShowRowSelection(!showRowSelection) - }} style={{ color: showRowSelection ? '#5575F2' : 'white' }} /> - {showRowSelection ? { - if (selectedRowKeys.length) { - DeleteRoomFile(selectedRowKeys).then(res => { - if (res.code === 200) { - message.success('删除成功！') - getRoomFile() - } - }) - } else { - message.error('请选择文件！') - } - }} /> : null} - -
-
-
- { - setSelectedRowKeys(newSelectedRowKeys); - } - } : undefined} - dataSource={fileList.data} - pagination={false} - scroll={{ y: '40vh' }} - style={{ width: '100%' }} - > - - - ( - <> - {item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'} - - )} /> - - ( - <> - {item.downloadCount}次 - - )} - /> - ( - <> - { - 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() - } - }) - }} /> - {/* */} - - )} /> -
-
- { - 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 => { + 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} /> -
-
-
-
+ data: res.data.items.map((item: any) => { + return { + ...item, + key: item.id, + } + }), + total: res.data.total + }) + } + }) + } + return ( + <> + setIsSharedFilesModel(false)} + maskClosable + > +
+
+
+ 共{fileList.total}个文件 +
+ +
+
+ } + 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 + }) + } + }} + /> + { + if (fileList.pageIndex === 1) { + getRoomFile() + } else { + setFileList({ + ...fileList, + pageIndex: 1 + }) + } + }}/> + { + setShowRowSelection(!showRowSelection) + }} style={{color: showRowSelection ? '#5575F2' : 'white'}}/> + {showRowSelection ? { + if (selectedRowKeys.length) { + DeleteRoomFile(selectedRowKeys).then(res => { + if (res.code === 200) { + message.success('删除成功！') + getRoomFile() + } + }) + } else { + message.error('请选择文件！') + } + }}/> : null} +
-
- - - ) + 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(); + }} + >上传 +
+
+
+ { + setSelectedRowKeys(newSelectedRowKeys); + } + } : undefined} + dataSource={fileList.data} + pagination={false} + scroll={{y: '40vh'}} + style={{width: '100%'}} + > + + + ( + <> + {item.size / 1024 > 1000 ? (item.size / (1024 * 1024)).toFixed(2) + 'MB' : (item.size / 1024).toFixed(2) + 'KB'} + + )}/> + + ( + <> + {item.downloadCount}次 + + )} + /> + ( + <> + { + 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) + // } + // }) + }}/> + {/* */} + + )}/> +
+
+ { + setFileList({ + ...fileList, + pageIndex: e + }) + }} pageSize={fileList.pageSize} current={fileList.pageIndex} hideOnSinglePage={true}/> +
+
+
+
+ +
+
+ + + ) }) -export default SharedFilesModel \ No newline at end of file +export default SharedFilesModel