开发: 修复聊天tab切换bug

2023-04-23 10:06:55 +08:00
parent 572277d817
commit 42418046e8
4 changed files with 163 additions and 206 deletions
--- a/src/pages/ChatLogs/components/ChatVote.tsx
+++ b/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>
                    );
--- a/src/pages/ChatLogs/index.module.scss
+++ b/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;
--- a/src/pages/ChatLogs/index.tsx
+++ b/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 {
-  adminList,
-  getAdminList,
-  groupMembersCount,
-  groupMembersCount2,
-  groupMembersListItem,
-} from './ChatUtils';
+import { getAdminList } 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>
-                  <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>
+                <GroupDetailContent record={selectGroup as IGroup} />
              )}
            </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]}
--- a/src/pages/Workbench/index.tsx
+++ b/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' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            marginBottom: 24,
-            padding: '0 24px',
-          }}
-        >
-          <span style={{ fontSize: 18 }}>数据总览</span>
-          {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
+      <Spin spinning={loading}>
+        <div className={styles.dataSum} style={{ padding: '24px 0' }}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              marginBottom: 24,
+              padding: '0 24px',
+            }}
+          >
+            <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}>
-          <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.dataSum}>
-        <div style={{ fontSize: 18 }}>客户数据</div>
-        <div className={styles.dataCardBox}>
-          <DataItemCard
-            title="今日新增客户"
-            content="今日添加的客户数(含重复及流失)"
-            count={data.custsInfo.today_custs}
-          />
-          <span style={{ width: 16 }} />
-          {/* <DataItemCard
+        <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 }} /> */}
-          <DataItemCard
-            title="今日净增客户"
-            content="今日添加的客户数(不含重复及流失)"
-            count={data.custsInfo.today_net_growth}
-          />
-          <span style={{ width: 16 }} />
-          <DataItemCard
-            title="今日流失客户"
-            content="今日流失的全部客户数量"
-            count={data.custsInfo.today_loss}
-          />
-          <span style={{ width: 16 }} />
-          <DataItemCard
-            title="本月新增客户"
-            content="本月添加的客户数(含重复及流失)"
-            count={data.custsInfo.month_custs}
-          />
-          {/* <DataItemCard
+            {/* <span style={{ width: 16 }} /> */}
+            <DataItemCard
+              title="今日净增客户"
+              content="今日添加的客户数(不含重复及流失)"
+              count={data.custsInfo.today_net_growth}
+            />
+            <span style={{ width: 16 }} />
+            <DataItemCard
+              title="今日流失客户"
+              content="今日流失的全部客户数量"
+              count={data.custsInfo.today_loss}
+            />
+            <span style={{ width: 16 }} />
+            <DataItemCard
+              title="本月新增客户"
+              content="本月添加的客户数(含重复及流失)"
+              count={data.custsInfo.month_custs}
+            />
+            {/* <DataItemCard
            title="昨日发送申请"
            content="当前员工数权限范围内主动向客户发起的申请数"
            count={11}
          /> */}
-        </div>
-        <Line
-          data={data.custsChart}
-          xField="time"
-          yField="num"
-          seriesField="name"
-          // yAxis= {{
-          //   label: {
-          //     formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
-          //   },
-          // },}
-          legend={{
-            position: 'top',
-          }}
-          smooth={true}
-          // @TODO 后续会换一种动画方式
-          animation={{
-            appear: {
-              animation: 'path-in',
-              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>
+          <Line
+            data={data.custsChart}
+            xField="time"
+            yField="num"
+            seriesField="name"
+            // yAxis= {{
+            //   label: {
+            //     formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
+            //   },
+            // },}
+            legend={{
+              position: 'top',
+            }}
+            smooth={true}
+            // @TODO 后续会换一种动画方式
+            animation={{
+              appear: {
+                animation: 'path-in',
+                duration: 3000,
+              },
+            }}
          />
        </div>
-        <Area
-          data={data.groupsChart}
-          xField="time"
-          yField="num"
-          seriesField="name"
-          smooth={true}
-          legend={{ position: 'top' }}
-          isStack={false}
-        />
-      </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
+            data={data.groupsChart}
+            xField="time"
+            yField="num"
+            seriesField="name"
+            smooth={true}
+            legend={{ position: 'top' }}
+            isStack={false}
+          />
+        </div>
+      </Spin>
    </PageContainer>
  );
 };