717 lines
26 KiB
TypeScript
717 lines
26 KiB
TypeScript
import styles from '@/page/Meeting/index.module.scss'
|
||
import { useEffect, useRef, useState } from "react";
|
||
import Operation from '@/components/Operation';
|
||
import { Button, Input, Popover, Modal, Checkbox, message, Table, Pagination } from "antd";
|
||
import { DeleteOutlined, LoadingOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
|
||
import { useLocation, useNavigate } from 'react-router-dom';
|
||
import { thumbImageBufferToBase64 } from '@/utils/package/base64'
|
||
import { storage } from '@/utils';
|
||
import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser } from '@/api/Meeting';
|
||
import axios from 'axios';
|
||
import ImageUrl from '@/utils/package/imageUrl'
|
||
import agora from '@/utils/package/agora'
|
||
import StupWizard from '@/components/StupWizard';
|
||
import { onInvoke, onSignalr } from '@/utils/package/signalr';
|
||
import dayjs from 'dayjs';
|
||
import durationPlugin from 'dayjs/plugin/duration';
|
||
dayjs.extend(durationPlugin);
|
||
const { Column } = Table
|
||
const Meeting: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const { state } = useLocation();
|
||
const stupWizardRef = useRef<any>();
|
||
const [statusList, setStatusList] = useState({
|
||
userList: false,
|
||
userChatList: false,
|
||
})
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
const [isSharedScreenModal, setIsSharedScreenModal] = useState(false);
|
||
const [isInit, setIsInit] = useState(true);
|
||
const [user, setUser] = useState<any>({});
|
||
const [showRowSelection, setShowRowSelection] = useState(false);
|
||
const [isSharedFilesModel, setIsSharedFilesModel] = useState(false);
|
||
const [sharedScreenList, setSharedScreenList] = useState<any>([]);
|
||
const [sharedScreenItem, setSharedScreenItem] = useState<any>('');
|
||
const [textMsg, setTextMsg] = useState('');
|
||
const [footerList, setFooterList] = useState([
|
||
[
|
||
{
|
||
title: '关闭声音',
|
||
icon: ImageUrl.icon22,
|
||
iconActive: ImageUrl.icon22Active,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '关闭视频',
|
||
icon: ImageUrl.icon23,
|
||
iconActive: ImageUrl.icon23Active,
|
||
active: false,
|
||
},
|
||
],
|
||
[
|
||
{
|
||
title: '共享屏幕',
|
||
icon: ImageUrl.icon24,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '共享文件',
|
||
icon: ImageUrl.icon25,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '邀请人员',
|
||
icon: ImageUrl.icon26,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '录制',
|
||
icon: ImageUrl.icon27,
|
||
iconActive: ImageUrl.icon27Active,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '设置向导',
|
||
icon: ImageUrl.icon28,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '结束',
|
||
icon: ImageUrl.icon29,
|
||
active: false,
|
||
},
|
||
],
|
||
[
|
||
{
|
||
title: '成员列表',
|
||
icon: ImageUrl.icon30,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '聊天',
|
||
icon: ImageUrl.icon31,
|
||
active: false,
|
||
},
|
||
],
|
||
])
|
||
const [footerListIndex, setFooterListIndex] = useState<any>({
|
||
itemIndex: 0,
|
||
rowIndex: 0,
|
||
});
|
||
const [fileList, setFileList] = useState({
|
||
data: [],
|
||
keyword: '',
|
||
total: 0,
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
})
|
||
const [roomUserList, setRoomUserList] = useState<any>([])
|
||
const [chatList, setChatList] = useState<any>([])
|
||
const [currentVideoId, setCurrentVideoId] = useState('')
|
||
let [currentSeconds, setCurrentSeconds] = useState(0)
|
||
const [currentEffective, setCurrentEffective] = useState(0)
|
||
|
||
const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
|
||
const [open, setOpen] = useState(false)
|
||
useEffect(() => {
|
||
let time = null as any;
|
||
if (isInit) {
|
||
let userInfo = JSON.parse(storage.getItem('user') as string)
|
||
agora.init()
|
||
agora.setJoinChannel({
|
||
channelId: state.channelId,
|
||
userid: userInfo.account,
|
||
token: state.token,
|
||
})
|
||
setUser(userInfo)
|
||
setIsInit(false)
|
||
window.addEventListener('customStorageChange', handleCustomStorageChange);
|
||
time = setInterval(() => {
|
||
let effectiveTypeLength = ['slow-2g', '2g', '3g', '4g'].indexOf((navigator as any).connection.effectiveType)
|
||
if (effectiveTypeLength >= 0) {
|
||
setCurrentEffective(effectiveTypeLength + 1)
|
||
}
|
||
setCurrentSeconds(currentSeconds++)
|
||
}, 1000)
|
||
} else {
|
||
getRoomFile()
|
||
}
|
||
return () => {
|
||
window.removeEventListener('customStorageChange', handleCustomStorageChange);
|
||
clearInterval(time)
|
||
};
|
||
}, [fileList.pageIndex]);
|
||
|
||
useEffect(() => {
|
||
roomUserList.forEach((item: any) => {
|
||
let dom = document.getElementById(`video-${item.account}`) as HTMLElement
|
||
if (!dom.getAttribute('load')) {
|
||
dom.setAttribute('load', 'true')
|
||
agora.setVideo({
|
||
account: Number(item.account),
|
||
view: dom,
|
||
channelId: state.channelId,
|
||
})
|
||
}
|
||
});
|
||
}, [roomUserList]);
|
||
|
||
useEffect(() => {
|
||
onSignalr((item: any) => {
|
||
setChatList((newChatList: any) => [...newChatList, item])
|
||
})
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
console.log(currentVideoId);
|
||
}, [currentVideoId])
|
||
|
||
// 加入房间时间
|
||
const changeCurrentSeconds = () => {
|
||
const duration = dayjs.duration(currentSeconds, 'seconds');
|
||
const hours = duration.hours(); // 整数小时
|
||
const minutes = duration.minutes(); // 整数分钟
|
||
const secondsRemaining = duration.seconds(); // 剩余的秒数
|
||
return `${hours > 9 ? hours : '0' + hours}:${minutes > 9 ? minutes : '0' + minutes}:${secondsRemaining > 9 ? secondsRemaining : '0' + secondsRemaining}`
|
||
}
|
||
// 操作按钮
|
||
const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
|
||
const footerListTemplate = [...footerList]
|
||
setFooterListIndex({
|
||
itemIndex,
|
||
rowIndex,
|
||
})
|
||
switch (row.title) {
|
||
case '成员列表':
|
||
setStatusList({
|
||
userList: true,
|
||
userChatList: false,
|
||
})
|
||
break;
|
||
case '聊天':
|
||
setStatusList({
|
||
userList: false,
|
||
userChatList: true,
|
||
})
|
||
break;
|
||
case '共享屏幕':
|
||
getDesktopCapturerVideo()
|
||
setIsSharedScreenModal(true)
|
||
break;
|
||
case '停止共享':
|
||
agora.stopScreenCapture()
|
||
footerListTemplate[itemIndex][rowIndex].title = '共享屏幕'
|
||
break;
|
||
case '关闭声音':
|
||
footerListTemplate[itemIndex][rowIndex].title = '开启声音'
|
||
footerListTemplate[itemIndex][rowIndex].active = true
|
||
setFooterList(footerListTemplate)
|
||
agora.muteLocalAudioStream(true)
|
||
break;
|
||
case '开启声音':
|
||
footerListTemplate[itemIndex][rowIndex].title = '关闭声音'
|
||
footerListTemplate[itemIndex][rowIndex].active = false
|
||
setFooterList(footerListTemplate)
|
||
agora.muteLocalAudioStream(false)
|
||
break;
|
||
case '关闭视频':
|
||
footerListTemplate[itemIndex][rowIndex].title = '开启视频'
|
||
footerListTemplate[itemIndex][rowIndex].active = true
|
||
setFooterList(footerListTemplate)
|
||
agora.muteLocalVideoStream(true)
|
||
break;
|
||
case '开启视频':
|
||
footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
|
||
footerListTemplate[itemIndex][rowIndex].active = false
|
||
setFooterList(footerListTemplate)
|
||
agora.muteLocalVideoStream(false)
|
||
break;
|
||
case '设置向导':
|
||
stupWizardRef.current.changeIsStupWizard()
|
||
break;
|
||
case '录制':
|
||
footerListTemplate[itemIndex][rowIndex].title = '录制中'
|
||
footerListTemplate[itemIndex][rowIndex].active = true
|
||
setFooterList(footerListTemplate)
|
||
agora.startRecording()
|
||
break;
|
||
case '录制中':
|
||
footerListTemplate[itemIndex][rowIndex].title = '录制'
|
||
footerListTemplate[itemIndex][rowIndex].active = false
|
||
setFooterList(footerListTemplate)
|
||
agora.stopRecording()
|
||
break;
|
||
case '共享文件':
|
||
await getRoomFile()
|
||
setIsSharedFilesModel(true)
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 分享屏幕
|
||
const clickSharedScreen = async (): Promise<void> => {
|
||
let data = sharedScreenList.find((item: any) => item.sourceId === sharedScreenItem.sourceId)
|
||
if (data) {
|
||
const footerListTemplate = [...footerList]
|
||
footerListTemplate[footerListIndex.itemIndex][footerListIndex.rowIndex].title = '停止共享'
|
||
setIsSharedScreenModal(false)
|
||
agora.setDesktopCapturerVideo(sharedScreenItem)
|
||
} else {
|
||
message.error('请选择应用!')
|
||
}
|
||
}
|
||
// 获取桌面可共享屏幕的引用
|
||
const getDesktopCapturerVideo = (): void => {
|
||
agora.getDesktopCapturerVideo().then((res: any) => {
|
||
if (sharedScreenList.length !== res.length) {
|
||
res.forEach((item: any) => {
|
||
if (item.thumbImage.buffer) {
|
||
item.thumbnailUrl = thumbImageBufferToBase64(item.thumbImage)
|
||
}
|
||
if (item.iconImage.buffer) {
|
||
item.iconDataUrl = thumbImageBufferToBase64(item.iconImage)
|
||
}
|
||
})
|
||
setSharedScreenList(res)
|
||
}
|
||
})
|
||
};
|
||
|
||
// 获取共享文件列表
|
||
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
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 获取房间用户
|
||
const getRoomUser = async (): Promise<void> => {
|
||
await GetRoomUser(state.channelId).then(res => {
|
||
if (res.code === 200) {
|
||
setRoomUserList(res.data)
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleCustomStorageChange = (e: any): void => {
|
||
if (e.key === 'isJoin') {
|
||
if (e.value) {
|
||
onInvoke('joinChannel', {
|
||
roomNum: state.channelId
|
||
})
|
||
getRoomUser()
|
||
} else {
|
||
onInvoke('levelChannel', {
|
||
roomNum: state.channelId
|
||
})
|
||
}
|
||
} else if (e.key === 'isRemotJoin') {
|
||
setTimeout(() => {
|
||
getRoomUser()
|
||
}, 1000)
|
||
}
|
||
};
|
||
// 聊天发送
|
||
const sendMsg = (): void => {
|
||
if (textMsg) {
|
||
onInvoke('sendChannelMsg', {
|
||
roomNum: state.channelId,
|
||
msg: textMsg,
|
||
})
|
||
setChatList((newChatList: any) => [...newChatList, {
|
||
uid: state.uid,
|
||
userName: state.userName,
|
||
message: textMsg,
|
||
}])
|
||
setTextMsg('')
|
||
} else {
|
||
message.success('请输入内容！')
|
||
}
|
||
}
|
||
return (
|
||
<>
|
||
<div className={styles.meeting}>
|
||
<div className={styles.meetingHeader}>
|
||
<div>
|
||
<div>
|
||
{currentEffective >= 1 ? <span></span> : null}
|
||
{currentEffective >= 2 ? <span></span> : null}
|
||
{currentEffective >= 3 ? <span></span> : null}
|
||
{currentEffective >= 4 ? <span></span> : null}
|
||
</div>
|
||
<div>{changeCurrentSeconds()}</div>
|
||
</div>
|
||
<div>会议号：{state.channelId}</div>
|
||
<div className='drag'>
|
||
<div className={styles.meetingGrayButton}>演讲者模式</div>
|
||
<Operation></Operation>
|
||
</div>
|
||
</div>
|
||
<div className={styles.meetingContent}>
|
||
<div className={styles.meetingContentBody}>
|
||
<div className={styles.meetingContentBodyLeft}>
|
||
<div className={`${styles.meetingContentSwiper} drag`}>
|
||
{roomUserList.map((item: any, index: number) =>
|
||
<div
|
||
className={styles.meetingContentSwiperCard}
|
||
key={index}
|
||
onClick={() => {
|
||
setCurrentVideoId(item.account)
|
||
}}
|
||
>
|
||
<div className={styles.meetingContentSwiperCardVdeio} id={`video-${item.account}`}>
|
||
<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||
<LoadingOutlined style={{ color: 'white', fontSize: '30px' }} />
|
||
</div>
|
||
</div>
|
||
{meetingContentUser(item)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={`${styles.meetingContentVideo} drag`}>
|
||
<div className={styles.meetingContentVideoDom}></div>
|
||
{/* {meetingContentUser()} */}
|
||
</div>
|
||
</div>
|
||
{
|
||
(statusList.userList || statusList.userChatList) ? (
|
||
<div className={styles.meetingContentBodyRight}>
|
||
{statusList.userList ?
|
||
<div className={styles.meetingUserList}>
|
||
<div className={styles.meetingUserListTitle}>
|
||
<span>成员列表</span>
|
||
<img src={ImageUrl.icon18} alt="" className='drag' onClick={() => {
|
||
setStatusList({
|
||
userList: false,
|
||
userChatList: false,
|
||
})
|
||
}} />
|
||
</div>
|
||
<Input placeholder="请输入用户名" className='drag' prefix={<SearchOutlined style={{ color: 'white' }} />} />
|
||
<div className={styles.meetingUserListContent}>
|
||
{list.map((item: number) =>
|
||
<div key={item} className='drag'>
|
||
<div>
|
||
<div><img src={ImageUrl.avatar} alt="" /></div>
|
||
<span>潇潇<span style={{ color: '#02B188', marginLeft: '4px' }}>主持人</span></span>
|
||
</div>
|
||
<div>
|
||
<img src={ImageUrl.icon22} alt="" />
|
||
<img src={ImageUrl.icon23} alt="" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={`${styles.meetingUserListFooter} drag`}>
|
||
<div>邀请</div>
|
||
<div>全员静音</div>
|
||
</div>
|
||
</div>
|
||
:
|
||
<div className={styles.meetingUserChat}>
|
||
<div className={styles.meetingUserChatTitle}>
|
||
<span>聊天</span>
|
||
<img src={ImageUrl.icon18} alt="" className='drag' onClick={() => {
|
||
setStatusList({
|
||
userList: false,
|
||
userChatList: false,
|
||
})
|
||
}} />
|
||
</div>
|
||
<div className={styles.meetingUserChatContent}>
|
||
{chatList.map((item: any, index: number) =>
|
||
<div
|
||
key={index}
|
||
className={`${item.uid !== state.uid ? styles.meetingUserChatContentLeft : styles.meetingUserChatContentRight} drag`}>
|
||
<div>
|
||
<div><img src={ImageUrl.avatar} alt="" /></div>
|
||
<span>{item.userName}</span>
|
||
</div>
|
||
<div>{item.message}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={`${styles.meetingUserChatInput} drag`}>
|
||
<Input.TextArea placeholder="请输入消息" value={textMsg} style={{ flexGrow: 1 }} onChange={(e) => {
|
||
setTextMsg(e.target.value)
|
||
}} onPressEnter={sendMsg}></Input.TextArea>
|
||
<Button type="primary" className='m-ant-btn' style={{ flexShrink: 0, marginTop: '4px' }} onClick={sendMsg}>发送</Button>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
) : null
|
||
}
|
||
</div>
|
||
<div className={styles.meetingContentFooter}>
|
||
{footerList.map((item, itemIndex) => {
|
||
return (
|
||
<div key={itemIndex}>
|
||
{item.map((row, rowIndex) => {
|
||
return (
|
||
row.title === '结束' ?
|
||
<Popover key={rowIndex}
|
||
content={
|
||
<div className='meetingContentFooterPopover'>
|
||
<div onClick={() => {
|
||
agora.leaveChannel()
|
||
agora.stopScreenCapture()
|
||
navigate(-1)
|
||
}}>全员结束会议</div>
|
||
<div onClick={() => {
|
||
agora.leaveChannel()
|
||
agora.stopScreenCapture()
|
||
navigate(-1)
|
||
}}>仅自己离开</div>
|
||
<div onClick={() => { setOpen(false) }}>取消</div>
|
||
</div>
|
||
}
|
||
title=""
|
||
trigger="click"
|
||
open={open}
|
||
onOpenChange={() => setOpen(true)}
|
||
>
|
||
<div className='drag'>
|
||
<img src={row.active ? row.iconActive : row.icon} alt="" />
|
||
<span>{row.title}</span>
|
||
</div>
|
||
</Popover> :
|
||
<div className='drag' onClick={() => changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}>
|
||
<img src={row.active ? row.iconActive : row.icon} alt="" />
|
||
<span>{row.title}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal title="共享屏幕" open={isSharedScreenModal} footer={null} closable={false} centered width={'40vw'}>
|
||
<div className={styles.sharedScreenModal}>
|
||
<div>
|
||
{sharedScreenList.map((item: any, index: number) => {
|
||
return (
|
||
<div
|
||
className={sharedScreenItem.sourceId === item.sourceId ? styles.active : ''}
|
||
key={index}
|
||
onClick={() => {
|
||
setSharedScreenItem(item)
|
||
}}>
|
||
{item.iconDataUrl ? <img src={item.iconDataUrl} alt="" /> : ''}
|
||
<div><img src={item.thumbnailUrl} alt="" /></div>
|
||
<span>{item.sourceTitle}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
<div>
|
||
<Checkbox onChange={() => {
|
||
|
||
}}>共享电脑音频</Checkbox>
|
||
<div>
|
||
<Button type="primary" onClick={() => { setIsSharedScreenModal(false) }} style={{ backgroundColor: '#31353A', marginRight: '14px' }}>取消</Button>
|
||
<Button type="primary" className='m-ant-btn' onClick={() => clickSharedScreen()}>共享</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
<StupWizard ref={stupWizardRef} />
|
||
<Modal
|
||
title="共享文件"
|
||
open={isSharedFilesModel}
|
||
footer={null}
|
||
centered
|
||
width={'60vw'}
|
||
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
|
||
})
|
||
}}
|
||
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.type = "file";
|
||
file.onchange = async () => {
|
||
const fileInfo = file.files[0];
|
||
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({
|
||
...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>
|
||
</>
|
||
)
|
||
}
|
||
|
||
const meetingContentUser = (item: any) => {
|
||
return (
|
||
<>
|
||
<div className={styles.meetingContentUser}>
|
||
{item.roleId === '1' ? <div className={styles.meetingContentUserRole}>
|
||
<img src={ImageUrl.icon32} alt="" />
|
||
</div> : null}
|
||
<div className={styles.meetingContentUserName}>
|
||
<img src={ImageUrl.icon22} alt="" />
|
||
<span>{item.userName}</span>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Meeting
|