开发: 修复聊天tab切换bug

src/pages/ChatLogs/components/ChatVote.tsx

@@ -31,7 +31,7 @@ export const ChatVote: React.FC<IChatItem> = (props) => {
               {Array.isArray(msg?.voteitem)
                 ? [0, 1, 2].map((item) => {
                     return msg?.voteitem[item] ? (
-                      <div key={item} className={styles.voteitem}>
+                      <div key={msg?.voteitem[item]} className={styles.voteitem}>
                         {msg?.voteitem[item]}
                       </div>
                     ) : (
@@ -60,7 +60,7 @@ export const ChatVote: React.FC<IChatItem> = (props) => {
               {Array.isArray(voteitem)
                 ? voteitem.map((item) => {
                     return (
-                      <div key={item} className={styles.voteitem}>
+                      <div key={`_${item}`} className={styles.voteitem}>
                         {item}
                       </div>
                     );

src/pages/ChatLogs/index.module.scss

@@ -165,7 +165,7 @@
   left: 0;
   z-index: 1;
   width: 100%;
-  max-height: 50vh;
+  max-height: 60vh;
   overflow: auto;
   background-color: #fff;
   box-shadow: 0 4px 6px #ccc;

src/pages/ChatLogs/index.tsx

@@ -7,14 +7,9 @@ import { stringify } from 'qs';
 import React, { useEffect, useRef, useState } from 'react';
 import { CustDetailContent } from '../CustomList/components/CustDetailContent';
 import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
+import { GroupDetailContent } from '../GroupList/components/GroupDetailContent';
 import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
-import {
+import { getAdminList } from './ChatUtils';
-  adminList,
-  getAdminList,
-  groupMembersCount,
-  groupMembersCount2,
-  groupMembersListItem,
-} from './ChatUtils';
 import { ChatBar } from './components/ChatBar';
 import { ChatTime } from './components/ChatTime';
 import { GroupListWidget } from './GroupList';
@@ -85,7 +80,7 @@ const ChatLogs: React.FC = () => {
     '2': '',
   });
 
-  const [flolowsBoxShow, setFlolowsBox] = useState(false);
+  const [followBoxShow, setFlolowBoxShow] = useState(false);
   const [delFollowListShow, setDelFollowListShow] = useState(false);
 
   const timeShowRef = useRef(false);
@@ -93,16 +88,17 @@ const ChatLogs: React.FC = () => {
   const isAllChatRef = useRef(false);
   const chatLogLoadingRef = useRef(false);
   const [chatLogLoading, setChatLogLoading] = useState(false);
+  const [staffSearchWord, setStaffSearchWord] = useState('');
 
   function show() {
-    setFlolowsBox(false);
+    setFlolowBoxShow(false);
   }
 
   const getChatLogsList = () => {
     chatLogLoadingRef.current = true;
     setChatLogLoading(true);
     post({
-      url: tabKey == '2' ? '/ChatLogs/GroupList' : '/ChatLogs/List',
+      url: tabKeyRef.current == '2' ? '/ChatLogs/GroupList' : '/ChatLogs/List',
       data: stringify(param),
     }).then((res) => {
       const count = res.count || 0;
@@ -151,9 +147,10 @@ const ChatLogs: React.FC = () => {
   const page = (curr: number) => {
     param.curr_page = curr;
     param.msg_from = selectStaffRef.current?.user_id + '';
-    if (tabKey == '0') {
+
+    if (tabKeyRef.current == '0') {
       param.msg_to_list = selectInnerStaffRef.current?.user_id + '';
-    } else if (tabKey == '1') {
+    } else if (tabKeyRef.current == '1') {
       param.msg_to_list = selectCustFollowRef.current?.cust_id + '';
     } else {
       param.room_id = selectGroupRef.current?.group_id + '';
@@ -482,8 +479,25 @@ const ChatLogs: React.FC = () => {
     <PageContainer>
       <div className={styles.box}>
         <div className={styles.personnelBox}>
-          <div className={`${styles.flolowsBox} ${flolowsBoxShow ? styles.show : ''}`}>
+          <div className={`${styles.flolowsBox} ${followBoxShow ? styles.show : ''}`}>
+            <Form
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              style={{ padding: '12px 0', background: '#fff', position: 'sticky', top: 0 }}
+            >
+              <Input
+                placeholder="搜索"
+                style={{ margin: '0 12px', width: 'calc(100% - 24px)' }}
+                defaultValue={staffSearchWord}
+                onChange={(e) => {
+                  setStaffSearchWord(e.target.value.trim());
+                }}
+                allowClear
+              />
+            </Form>
             {staffsList.map((item) => {
+              if (!item.name.includes(staffSearchWord)) return null;
               return (
                 <div
                   key={item.user_id}
@@ -499,7 +513,7 @@ const ChatLogs: React.FC = () => {
                     setChatLogs([]);
                     setSelectStaff({ ...item });
                     selectStaffRef.current = { ...item };
-                    setFlolowsBox(false);
+                    setFlolowBoxShow(false);
                     // if (tabKey == '1') {
                     getCustFollowsList();
                     // } else if (tabKey == '2') {
@@ -537,7 +551,7 @@ const ChatLogs: React.FC = () => {
             className={`${styles.chatA}`}
             onClick={(e) => {
               e.stopPropagation();
-              setFlolowsBox(!flolowsBoxShow);
+              setFlolowBoxShow(!followBoxShow);
             }}
           >
             {selectStaff ? (
@@ -563,7 +577,7 @@ const ChatLogs: React.FC = () => {
                     {selectStaff.name}
                   </div>
                 </div>
-                {flolowsBoxShow ? <UpOutlined /> : <DownOutlined />}
+                {followBoxShow ? <UpOutlined /> : <DownOutlined />}
               </>
             ) : null}
           </div>
@@ -634,77 +648,14 @@ const ChatLogs: React.FC = () => {
               width={600}
               onClose={() => setOpen(false)}
               footer={false}
+              destroyOnClose
             >
               {tabKeyRef.current == '0' ? (
                 <DepartmentMembersDetail record={selectInnerStaff as IStaffsItem} />
               ) : tabKeyRef.current == '1' ? (
                 <CustDetailContent record={selectCustFollow as ICustFollow} />
               ) : (
-                <div>
+                <GroupDetailContent record={selectGroup as IGroup} />
-                  <div style={{ marginBottom: 8, textIndent: '2em' }}>
-                    群主：
-                    {groupMembersObjRef.current[selectGroupRef.current?.owner as string]?.name}
-                  </div>
-                  <div style={{ marginBottom: 8 }}>
-                    {adminList(selectGroupRef.current?.admin_list, groupMembersObjRef.current)}
-                  </div>
-                  <div style={{ marginBottom: 8 }}>
-                    创建时间：{selectGroupRef.current?.create_time}
-                  </div>
-                  <div style={{ textIndent: '1em' }}>群公告：{selectGroupRef.current?.notice}</div>
-                  <div
-                    style={{
-                      fontWeight: 'bold',
-                      marginTop: 24,
-                      marginBottom: 8,
-                      borderBottom: '1px solid #ddd',
-                      paddingBottom: 8,
-                    }}
-                  >
-                    群成员 • {groupMembersList.length}
-                  </div>
-                  {groupMembersList.map((item) => {
-                    return item.group_members_type == '2' || item.state == 0
-                      ? null
-                      : groupMembersListItem(item, selectGroupRef.current as IGroup);
-                  })}
-                  {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
-                    <div
-                      style={{
-                        fontWeight: 'bold',
-                        marginTop: 24,
-                        marginBottom: 8,
-                        borderBottom: '1px solid #ddd',
-                        paddingBottom: 8,
-                      }}
-                    >
-                      微信：
-                    </div>
-                  ) : null}
-                  {groupMembersList.map((item) => {
-                    return item.group_members_type == '1' || item.state == 0
-                      ? null
-                      : groupMembersListItem(item, selectGroupRef.current as IGroup);
-                  })}
-                  {groupMembersCount(groupMembersList, 0) != 0 ? (
-                    <div
-                      style={{
-                        fontWeight: 'bold',
-                        marginTop: 24,
-                        marginBottom: 8,
-                        borderBottom: '1px solid #ddd',
-                        paddingBottom: 8,
-                      }}
-                    >
-                      已离群：
-                    </div>
-                  ) : null}
-                  {groupMembersList.map((item) => {
-                    return item.state == 1
-                      ? null
-                      : groupMembersListItem(item, selectGroupRef.current as IGroup);
-                  })}
-                </div>
               )}
             </Drawer>
           </div>
@@ -738,10 +689,10 @@ const ChatLogs: React.FC = () => {
                   );
                 } else {
                   return (
-                    <div key={item.msg_id}>
+                    <div key={item.seq}>
                       {/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
                       <ChatTime msgtime={item.msg_time} />
-                      {tabKey == '2' ? (
+                      {tabKeyRef.current == '2' ? (
                         <ChatBar
                           from={selectStaff}
                           to={groupMembersObjRef.current[item.msg_from]}

src/pages/Workbench/index.tsx

@@ -2,6 +2,7 @@ import { post } from '@/services/ajax';
 import { Area, Line } from '@ant-design/charts';
 import { BarChartOutlined, CommentOutlined, TeamOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
+import { Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { DataItemCard } from './components/DataItemCard';
 import { DataSumItemCard } from './components/DataSumItemCard';
@@ -57,9 +58,12 @@ const Workbench: React.FC = () => {
     custsChart: [],
     groupsChart: [],
   });
+  const [loading, setLoading] = useState(false);
 
   const getWorkBenchInfo = () => {
+    setLoading(true);
     post({ url: '/WorkBench/Info' }).then((res) => {
+      setLoading(false);
       if (res.err_code == 0) {
         if (res.over_view) {
           data.overView = res.over_view;
@@ -87,6 +91,7 @@ const Workbench: React.FC = () => {
 
   return (
     <PageContainer>
+      <Spin spinning={loading}>
         <div className={styles.dataSum} style={{ padding: '24px 0' }}>
           <div
             style={{
@@ -218,6 +223,7 @@ const Workbench: React.FC = () => {
             isStack={false}
           />
         </div>
+      </Spin>
     </PageContainer>
   );
 };