From 77578dd8a876625e7bc0402a5767a04c16290489 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Fri, 19 Jul 2024 11:03:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.module.scss |   1 +
 src/page/Meeting/index.tsx         | 158 +++++++++++++++++------------
 2 files changed, 94 insertions(+), 65 deletions(-)

diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index 7921e35..757fed3 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -256,6 +256,7 @@
 
           .active {
             border: 1px solid white;
+            box-sizing: border-box;
           }
 
           .meetingContentSwiperCardVdeio {
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 4fed132..82973e5 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -113,6 +113,7 @@ const Meeting: React.FC = () => {
   const [currentEffective, setCurrentEffective] = useState(0)
   const [open, setOpen] = useState(false)
   const [meetingMode, setMeetingMode] = useState('')
+  const [userSearchValue, setUserSearchValue] = useState('')
   useEffect(() => {
     let time = null as any;
     if (isInit) {
@@ -352,7 +353,12 @@ const Meeting: React.FC = () => {
   const getRoomUser = async (): Promise<void> => {
     await GetRoomUser(state.channelId).then(res => {
       if (res.code === 200) {
-        setRoomUserList(res.data)
+        setRoomUserList(res.data.map((item: any) => {
+          return {
+            isShow: true,
+            ...item
+          }
+        }))
       }
     })
   }
@@ -496,7 +502,7 @@ const Meeting: React.FC = () => {
                     className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass(item.account)}`}
                     key={index}
                     onClick={() => {
-                      if (footerList[1][3].active){
+                      if (footerList[1][3].active) {
                         return message.error('视频录制中请勿切换，或结束录制再切换！')
                       }
                       setCurrentVideoId(item.account)
@@ -532,77 +538,99 @@ const Meeting: React.FC = () => {
                           placeholder="请输入用户名"
                           className='drag'
                           prefix={<SearchOutlined style={{ color: 'white' }} />}
+                          value={userSearchValue}
+                          onChange={(e) => {
+                            setUserSearchValue(e.target.value)
+                            const newRoomUserList = [...roomUserList]
+                            newRoomUserList.forEach(row => {
+                              if (e.target.value) {
+                                if (row.userName.indexOf(e.target.value) !== -1) {
+                                  row.isShow = true;
+                                } else {
+                                  row.isShow = false;
+                                }
+                              } else {
+                                row.isShow = true;
+                              }
+                            });
+                            setRoomUserList(newRoomUserList)
+                          }}
                         />
                       </div>
                       <div className={styles.meetingUserListContent}>
-                        {roomUserList.map((item: any, index: number) =>
-                          <div key={index} className='drag'>
-                            <div>
-                              <div><img src={ImageUrl.avatar} alt="" /></div>
-                              <span>
-                                {item.userName}
-                                {item.roleId === '1' || item.isManager ?
-                                  <span style={{ color: '#02B188', marginLeft: '4px' }}>
-                                    {item.roleId === '1' ? '主持人' : '临时主持人'}
+                        {roomUserList.map((item: any, index: number) => {
+                          return (
+                            <>
+                              {item.isShow ? <div key={index} className='drag'>
+                                <div>
+                                  <div><img src={ImageUrl.avatar} alt="" /></div>
+                                  <span>
+                                    {item.userName}
+                                    {item.roleId === '1' || item.isManager ?
+                                      <span style={{ color: '#02B188', marginLeft: '4px' }}>
+                                        {item.roleId === '1' ? '主持人' : '临时主持人'}
+                                      </span>
+                                      : null}
                                   </span>
-                                  : null}
-                              </span>
-                            </div>
-                            <div>
-                              <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
-                              <img src={item.enableCamera ? ImageUrl.icon23 : ImageUrl.icon23Active} alt="" />
-                            </div>
-                            {item.account !== user.account && user.roleId === '1' ? <div className='drag'>
-                              {!item.isManager ? <Button
-                                type="primary"
-                                className='m-ant-btn'
-                                style={{ marginBottom: '10px', width: '80%' }}
-                                size={'small'}
-                                onClick={() => {
-                                  PostRoomManager(state.roomId, [item.id]).then(res => {
-                                    if (res.code === 200) {
-                                      onInvoke('sendOper', {
-                                        roomNum: state.channelId,
-                                        type: 2,
+                                </div>
+                                <div>
+                                  <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
+                                  <img src={item.enableCamera ? ImageUrl.icon23 : ImageUrl.icon23Active} alt="" />
+                                </div>
+                                {item.account !== user.account && user.roleId === '1' ? <div className='drag'>
+                                  {!item.isManager ? <Button
+                                    type="primary"
+                                    className='m-ant-btn'
+                                    style={{ marginBottom: '10px', width: '80%' }}
+                                    size={'small'}
+                                    onClick={() => {
+                                      PostRoomManager(state.roomId, [item.id]).then(res => {
+                                        if (res.code === 200) {
+                                          onInvoke('sendOper', {
+                                            roomNum: state.channelId,
+                                            type: 2,
+                                          })
+                                        }
                                       })
-                                    }
-                                  })
-                                }}
-                              >设为管理员</Button> : <Button
-                                type="primary"
-                                className='m-ant-btn'
-                                style={{ marginBottom: '10px', width: '80%' }}
-                                size={'small'}
-                                onClick={() => {
-                                  DeleteRoomManager(state.roomId, [item.id]).then(res => {
-                                    if (res.code === 200) {
-                                      onInvoke('sendOper', {
-                                        roomNum: state.channelId,
-                                        type: 2,
+                                    }}
+                                  >设为管理员</Button> : <Button
+                                    type="primary"
+                                    className='m-ant-btn'
+                                    style={{ marginBottom: '10px', width: '80%' }}
+                                    size={'small'}
+                                    onClick={() => {
+                                      DeleteRoomManager(state.roomId, [item.id]).then(res => {
+                                        if (res.code === 200) {
+                                          onInvoke('sendOper', {
+                                            roomNum: state.channelId,
+                                            type: 2,
+                                          })
+                                        }
                                       })
-                                    }
-                                  })
-                                }}
-                              >取消管理员</Button>}
+                                    }}
+                                  >取消管理员</Button>}
 
-                              <Button
-                                type="primary"
-                                className='m-ant-btn'
-                                style={{ width: '80%' }}
-                                size={'small'}
-                                onClick={() => {
-                                  GetRoomKickout(state.channelId, item.id).then(res => {
-                                    if (res.code === 200) {
-                                      onInvoke('sendOper', {
-                                        roomNum: state.channelId,
-                                        type: 3,
+                                  <Button
+                                    type="primary"
+                                    className='m-ant-btn'
+                                    style={{ width: '80%' }}
+                                    size={'small'}
+                                    onClick={() => {
+                                      GetRoomKickout(state.channelId, item.id).then(res => {
+                                        if (res.code === 200) {
+                                          onInvoke('sendOper', {
+                                            roomNum: state.channelId,
+                                            type: 3,
+                                          })
+                                        }
                                       })
-                                    }
-                                  })
-                                }}
-                              >踢出房间</Button>
-                            </div> : null}
-                          </div>
+                                    }}
+                                  >踢出房间</Button>
+                                </div> : null}
+                              </div> : null}
+                            </>
+                          )
+                        }
                         )}
                       </div>
                       <div className={`${styles.meetingUserListFooter} drag`}>