开发: 修复聊天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,137 +91,139 @@ const Workbench: React.FC = () => {
 
   return (
     <PageContainer>
-      <div className={styles.dataSum} style={{ padding: '24px 0' }}>
+      <Spin spinning={loading}>
-        <div
+        <div className={styles.dataSum} style={{ padding: '24px 0' }}>
-          style={{
+          <div
-            display: 'flex',
+            style={{
-            justifyContent: 'space-between',
+              display: 'flex',
-            marginBottom: 24,
+              justifyContent: 'space-between',
-            padding: '0 24px',
+              marginBottom: 24,
-          }}
+              padding: '0 24px',
-        >
+            }}
-          <span style={{ fontSize: 18 }}>数据总览</span>
+          >
-          {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
+            <span style={{ fontSize: 18 }}>数据总览</span>
+            {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
+          </div>
+          <div className={styles.dataSumBox}>
+            <DataSumItemCard
+              title="客户数量"
+              content="全部客户数量(含重复)"
+              icon={<TeamOutlined className={styles.icon} />}
+              count={data.overView.custs_total}
+            />
+            <DataSumItemCard
+              title="客群数量"
+              content="全部客群数量"
+              icon={<CommentOutlined className={styles.icon} />}
+              count={data.overView.groups_total}
+            />
+            <DataSumItemCard
+              title="客群成员总数"
+              content="客群成员的总数(含员工)(含重复)"
+              icon={<BarChartOutlined className={styles.icon} />}
+              count={data.overView.groups_members_total}
+            />
+          </div>
         </div>
-        <div className={styles.dataSumBox}>
+        <div className={styles.dataSum}>
-          <DataSumItemCard
+          <div style={{ fontSize: 18 }}>客户数据</div>
-            title="客户数量"
+          <div className={styles.dataCardBox}>
-            content="全部客户数量(含重复)"
+            <DataItemCard
-            icon={<TeamOutlined className={styles.icon} />}
+              title="今日新增客户"
-            count={data.overView.custs_total}
+              content="今日添加的客户数(含重复及流失)"
-          />
+              count={data.custsInfo.today_custs}
-          <DataSumItemCard
+            />
-            title="客群数量"
+            <span style={{ width: 16 }} />
-            content="全部客群数量"
+            {/* <DataItemCard
-            icon={<CommentOutlined className={styles.icon} />}
-            count={data.overView.groups_total}
-          />
-          <DataSumItemCard
-            title="客群成员总数"
-            content="客群成员的总数(含员工)(含重复)"
-            icon={<BarChartOutlined className={styles.icon} />}
-            count={data.overView.groups_members_total}
-          />
-        </div>
-      </div>
-      <div className={styles.dataSum}>
-        <div style={{ fontSize: 18 }}>客户数据</div>
-        <div className={styles.dataCardBox}>
-          <DataItemCard
-            title="今日新增客户"
-            content="今日添加的客户数(含重复及流失)"
-            count={data.custsInfo.today_custs}
-          />
-          <span style={{ width: 16 }} />
-          {/* <DataItemCard
             title="今日跟进客户"
             content="今日处于跟进中状态的客户数(含重复)"
             count={11}
           /> */}
-          {/* <span style={{ width: 16 }} /> */}
+            {/* <span style={{ width: 16 }} /> */}
-          <DataItemCard
+            <DataItemCard
-            title="今日净增客户"
+              title="今日净增客户"
-            content="今日添加的客户数(不含重复及流失)"
+              content="今日添加的客户数(不含重复及流失)"
-            count={data.custsInfo.today_net_growth}
+              count={data.custsInfo.today_net_growth}
-          />
+            />
-          <span style={{ width: 16 }} />
+            <span style={{ width: 16 }} />
-          <DataItemCard
+            <DataItemCard
-            title="今日流失客户"
+              title="今日流失客户"
-            content="今日流失的全部客户数量"
+              content="今日流失的全部客户数量"
-            count={data.custsInfo.today_loss}
+              count={data.custsInfo.today_loss}
-          />
+            />
-          <span style={{ width: 16 }} />
+            <span style={{ width: 16 }} />
-          <DataItemCard
+            <DataItemCard
-            title="本月新增客户"
+              title="本月新增客户"
-            content="本月添加的客户数(含重复及流失)"
+              content="本月添加的客户数(含重复及流失)"
-            count={data.custsInfo.month_custs}
+              count={data.custsInfo.month_custs}
-          />
+            />
-          {/* <DataItemCard
+            {/* <DataItemCard
             title="昨日发送申请"
             content="当前员工数权限范围内主动向客户发起的申请数"
             count={11}
           /> */}
-        </div>
+          </div>
-        <Line
+          <Line
-          data={data.custsChart}
+            data={data.custsChart}
-          xField="time"
+            xField="time"
-          yField="num"
+            yField="num"
-          seriesField="name"
+            seriesField="name"
-          // yAxis= {{
+            // yAxis= {{
-          //   label: {
+            //   label: {
-          //     formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
+            //     formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
-          //   },
+            //   },
-          // },}
+            // },}
-          legend={{
+            legend={{
-            position: 'top',
+              position: 'top',
-          }}
+            }}
-          smooth={true}
+            smooth={true}
-          // @TODO 后续会换一种动画方式
+            // @TODO 后续会换一种动画方式
-          animation={{
+            animation={{
-            appear: {
+              appear: {
-              animation: 'path-in',
+                animation: 'path-in',
-              duration: 3000,
+                duration: 3000,
-            },
+              },
-          }}
+            }}
-        />
-      </div>
-      <div className={styles.dataSum}>
-        <div style={{ fontSize: 18 }}>客群数据</div>
-        <div className={styles.dataCardBox}>
-          <DataItemCard
-            title="今日新增客群"
-            content="今日创建的客群数"
-            count={data.groupsInfo.today_groups}
-          />
-          <span style={{ width: 16 }} />
-          <DataItemCard
-            title="今日解散客群"
-            content="今日解散的客群数"
-            count={data.groupsInfo.today_diss_groups}
-          />
-          <span style={{ width: 16 }} />
-          <DataItemCard
-            title="今日新增成员"
-            content="今日新增客群成员数(含员工)"
-            count={data.groupsInfo.today_groups_members}
-          />
-          <span style={{ width: 16 }} />
-          <DataItemCard
-            title="今日退出成员"
-            content="今日退出客群成员数(含员工)"
-            count={data.groupsInfo.today_diss_groups_members}
           />
         </div>
-        <Area
+        <div className={styles.dataSum}>
-          data={data.groupsChart}
+          <div style={{ fontSize: 18 }}>客群数据</div>
-          xField="time"
+          <div className={styles.dataCardBox}>
-          yField="num"
+            <DataItemCard
-          seriesField="name"
+              title="今日新增客群"
-          smooth={true}
+              content="今日创建的客群数"
-          legend={{ position: 'top' }}
+              count={data.groupsInfo.today_groups}
-          isStack={false}
+            />
-        />
+            <span style={{ width: 16 }} />
-      </div>
+            <DataItemCard
+              title="今日解散客群"
+              content="今日解散的客群数"
+              count={data.groupsInfo.today_diss_groups}
+            />
+            <span style={{ width: 16 }} />
+            <DataItemCard
+              title="今日新增成员"
+              content="今日新增客群成员数(含员工)"
+              count={data.groupsInfo.today_groups_members}
+            />
+            <span style={{ width: 16 }} />
+            <DataItemCard
+              title="今日退出成员"
+              content="今日退出客群成员数(含员工)"
+              count={data.groupsInfo.today_diss_groups_members}
+            />
+          </div>
+          <Area
+            data={data.groupsChart}
+            xField="time"
+            yField="num"
+            seriesField="name"
+            smooth={true}
+            legend={{ position: 'top' }}
+            isStack={false}
+          />
+        </div>
+      </Spin>
     </PageContainer>
   );
 };