优化

src/components/InvitingPersonnelModal/index.tsx

@@ -10,11 +10,13 @@ import { storage } from '@/utils';
 const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
   useImperativeHandle(ref, () => ({
     changeInvitingPersonnelModal: () => {
+      getUserList()
       setIsInvitingPersonnelModal(true)
     }
   }))
   const { state } = useLocation();
   const [isInvitingPersonnelModal, setIsInvitingPersonnelModal] = useState(false);
+  const [isFirstRender, setIsFirstRender] = useState(true);
   const [operation, setOperation] = useState<{
     options: { label: string; value: number }[];
     optionsValue: number[];
@@ -35,17 +37,25 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
   const [checkedList, setCheckedList] = useState<any>([])
 
   useEffect(() => {
-    getUserList()
+    if (isFirstRender) {
+      setIsFirstRender(false);
+    } else {
+      getUserList()
+    }
   }, [list.pageIndex]);
 
   useEffect(() => {
-    if (list.pageIndex === 1) {
-      getUserList()
+    if (isFirstRender) {
+      setIsFirstRender(false);
     } else {
-      setList({
-        ...list,
-        pageIndex: 1
-      })
+      if (list.pageIndex === 1) {
+        getUserList()
+      } else {
+        setList({
+          ...list,
+          pageIndex: 1
+        })
+      }
     }
   }, [operation.optionsValue]);
 

src/page/Home/index.tsx

@@ -137,6 +137,7 @@ const Home: React.FC = () => {
 
                 }
                 navigate('/login')
+                storage.removeItem('user')
               }}
               onCancel={() => {
 

src/page/Meeting/index.tsx

@@ -1,6 +1,8 @@
 import styles from '@/page/Meeting/index.module.scss'
 import { useEffect, useRef, useState } from "react";
 import Operation from '@/components/Operation';
+import SpeakerModeModal from '@/components/SpeakerModeModal';
+import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
 import { Button, Input, Popover, Modal, Checkbox, message, Table, Pagination } from "antd";
 import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -10,12 +12,11 @@ import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFil
 import axios from 'axios';
 import ImageUrl from '@/utils/package/imageUrl'
 import agora from '@/utils/package/agora'
-import SpeakerModeModal from '@/components/SpeakerModeModal';
 import { onInvoke, onSignalr, offSignalr } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
 import durationPlugin from 'dayjs/plugin/duration';
 import { VideoSourceType } from 'agora-electron-sdk';
-import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
+import { GetUserList } from '@/api/Home/User';
 dayjs.extend(durationPlugin);
 const { Column } = Table
 const Meeting: React.FC = () => {
@@ -109,6 +110,7 @@ const Meeting: React.FC = () => {
     pageSize: 10,
   })
   const [roomUserList, setRoomUserList] = useState<any>([])
+  const [allUserList, setAllUserList] = useState<any>([])
   const [chatList, setChatList] = useState<any>([])
   const [currentVideoId, setCurrentVideoId] = useState('')
   let [currentSeconds, setCurrentSeconds] = useState(0)
@@ -116,7 +118,6 @@ const Meeting: React.FC = () => {
   const [open, setOpen] = useState(false)
   const [meetingMode, setMeetingMode] = useState('')
   const [userSearchValue, setUserSearchValue] = useState('')
-  const [xx, setxx] = useState(true)
   useEffect(() => {
     let time = null as any;
     if (isInit) {
@@ -149,13 +150,12 @@ const Meeting: React.FC = () => {
             })
           }, 1000);
         },
-        onUserOffline: async (info: any, remoteUid: any, reason: any) => {
+        onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
           await agora.setupRemoteVideo({
             account: Number(remoteUid),
             view: document.getElementById(`video-${remoteUid}`) as HTMLElement,
             channelId: info.channelId,
           })
-          setxx(false)
           setTimeout(() => {
             getRoomUser()
           }, 1000);
@@ -389,14 +389,38 @@ const Meeting: React.FC = () => {
   }
   // 获取房间用户
   const getRoomUser = async (): Promise<void> => {
-    await GetRoomUser(state.channelId).then(res => {
-      if (res.code === 200) {
-        setRoomUserList(res.data.map((item: any) => {
+    Promise.all([
+      GetRoomUser(state.channelId),
+      GetUserList({
+        pageIndex: 1,
+        pageSize: 9999,
+        searchKeywod: '',
+        isOnline: true,
+      })
+    ]).then(res => {
+      if (res[0].code === 200 && res[1].code === 200) {
+        setRoomUserList(res[0].data.map((item: any) => {
           return {
             isShow: true,
             ...item
           }
         }))
+        res[1].data.items.forEach((item: any) => {
+          const itemUser = res[0].data.find((row: any) => row.account === item.account)
+          if (itemUser) {
+            item.isRoom = true;
+            for (const itemUserKey in itemUser) {
+              for (const key in item) {
+                if (itemUserKey === key) {
+                  item[key] = itemUser[itemUserKey];
+                }
+              }
+            }
+          } else {
+            item.isRoom = false;
+          }
+        });
+        setAllUserList(res[1].data.items);
       }
     })
   }
@@ -516,40 +540,33 @@ const Meeting: React.FC = () => {
           <div className={styles.meetingContentBody}>
             <div className={`${styles.meetingContentBodyLeft} drag`}>
               <div className={getMeetingContentBodyLeftModeClass()} >
-                {xx ? <div className={`${styles.meetingContentSwiperCard}`}>
-                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id={`video-1122`}>
-                    <div className={styles.meetingContentSwiperCardVdeioLoading}>
-                      暂无视频
-                    </div>
-                  </div>
-                </div> : null}
-                <div className={`${styles.meetingContentSwiperCard}`}>
-                  <div className={`${styles.meetingContentSwiperCardVdeio}`} id={`video-1234`}>
-                    <div className={styles.meetingContentSwiperCardVdeioLoading}>
-                      暂无视频
-                    </div>
-                  </div>
-                </div>
-                {/* {roomUserList.map((item: any, index: number) =>
-                  <div
-                    className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(item.account)}`}
-                    key={index}
-                    onClick={() => {
-                      if (footerList[1][3].active) {
-                        return message.error('视频录制中请勿切换，或结束录制再切换！')
+                {allUserList.map((item: any, index: number) => {
+                  return (
+                    <>
+                      {item.isRoom ?
+                        <div
+                          className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(item.account)}`}
+                          key={index}
+                          onClick={() => {
+                            if (footerList[1][3].active) {
+                              return message.error('视频录制中请勿切换，或结束录制再切换！')
+                            }
+                            setCurrentVideoId(item.account)
+                          }}
+                        >
+                          <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.account ? styles.active : ''}`} id={`video-${item.account}`}>
+                            <div className={styles.meetingContentSwiperCardVdeioLoading}>
+                              暂无视频
+                            </div>
+                          </div>
+                          {meetingContentUser(item)}
+                          {item.enableCamera ? null : meetingContentError(currentVideoId, item)}
+                        </div> : null
                       }
-                      setCurrentVideoId(item.account)
-                    }}
-                  >
-                    <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.account ? styles.active : ''}`} id={`video-${item.account}`}>
-                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
-                        暂无视频
-                      </div>
-                    </div>
-                    {meetingContentUser(item)}
-                    {item.enableCamera ? null : meetingContentError(currentVideoId, item)}
-                  </div>
-                )} */}
+                    </>
+                  )
+                }
+                )}
               </div>
             </div>
             {