开发: 添加表情匹配, 添加客群中心页面,修复弹框关闭

2023-04-20 17:38:19 +08:00
parent 21c1790dc4
commit 2156976a8c
19 changed files with 1135 additions and 123 deletions
--- a/src/pages/ChatLogs/ChatLogsType.ts
+++ b/src/pages/ChatLogs/ChatLogsType.ts
@@ -44,6 +44,7 @@ export interface ICustFollow {

  gender: number;
  name: string;
+  staff_name?: string;

  type: number;

@@ -69,6 +70,7 @@ export interface IGroup {
  group_id: string;
  name: string;
  owner: string;
+  staff_name?: string;
  state: number;
  status: number;
  sync_time: string;
--- a/src/pages/ChatLogs/ChatUtils.tsx
+++ b/src/pages/ChatLogs/ChatUtils.tsx
@@ -6,6 +6,8 @@
 */

 import React, { useEffect, useState } from 'react';
+import { IGroup, IGroupMembers } from './ChatLogsType';
+import { AdminSvg, OwnerSvg } from './components/Svgs';

 export const groupMembersCount = (data: any[], state: any) => {
  let count = 0;
@@ -36,6 +38,72 @@ export const groupMembersCount2 = (data: any[], group_members_type: any, state:
  return count;
 };

+// 群 Drawer 群员
+export const groupMembersListItem = (item: IGroupMembers, selectGroup: IGroup) => {
+  return (
+    <div
+      key={item.user_id}
+      style={{
+        display: 'inline-flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        width: 80,
+        flexDirection: 'column',
+        verticalAlign: 'top',
+        marginTop: 12,
+      }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          display: 'flex',
+          flexShrink: 0,
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 56,
+          height: 56,
+          lineHeight: 1,
+          background: '#69b1ff',
+          borderRadius: 4,
+        }}
+      >
+        {item.avatar ? (
+          <img
+            style={{
+              maxWidth: '100%',
+              maxHeight: '100%',
+              objectFit: 'cover',
+              borderRadius: 4,
+            }}
+            src={item.avatar}
+            alt=""
+          />
+        ) : item.name ? (
+          item.name[0]
+        ) : (
+          ''
+        )}
+        {item.user_id == selectGroup?.owner ? <OwnerSvg /> : null}
+        {selectGroup?.adminUserIDs?.includes(item.user_id) ? <AdminSvg /> : null}
+      </div>
+      <div
+        style={{
+          padding: '0 4px',
+          whiteSpace: 'nowrap',
+          minWidth: 0,
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          width: 72,
+          textAlign: 'center',
+        }}
+        title={item.name}
+      >
+        {item.name}
+      </div>
+    </div>
+  );
+};
+
 /**
 * 群管理者：
 * @param data
--- a/src/pages/ChatLogs/components/ChatRecord.tsx
+++ b/src/pages/ChatLogs/components/ChatRecord.tsx
@@ -1,6 +1,7 @@
 import { Modal } from 'antd';
 import { useEffect, useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
+import { EmojiFormat } from './EmojiFormat';

 export const ChatRecord: React.FC<IChatItem> = (props) => {
  const [visible, setVisible] = useState(false);
@@ -8,6 +9,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
  function chatRecordContent(data: any, type: string) {
    if (data.type == 'ChatRecordText') {
      const content = JSON.parse(data.content);
+
      return (
        <div
          style={{
@@ -18,7 +20,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
            textOverflow: type == 'ellipsis' ? 'ellipsis' : 'inherit',
          }}
        >
-          {content.content}
+          {type == 'ellipsis' ? content.content : <EmojiFormat content={content.content || ''} />}
        </div>
      );
    } else if (data.type == 'ChatRecordImage') {
@@ -97,6 +99,7 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
          setVisible(false);
        }}
        centered
+        destroyOnClose
      >
        <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
          {record ? (
--- a/src/pages/ChatLogs/components/ChatText.tsx
+++ b/src/pages/ChatLogs/components/ChatText.tsx
@@ -1,5 +1,6 @@
 import { IChatItem } from '../ChatLogsType';
+import { EmojiFormat } from './EmojiFormat';

 export const ChatText: React.FC<IChatItem> = (props) => {
-  return <>{props.chat?.content}</>;
+  return <EmojiFormat content={props.chat?.content || ''} />;
 };
--- a/src/pages/ChatLogs/components/EmojiFormat.tsx
+++ b/src/pages/ChatLogs/components/EmojiFormat.tsx
@@ -0,0 +1,32 @@
+import { emoji } from '@/services/config';
+import React from 'react';
+
+type IProps = {
+  content: string;
+};
+export const EmojiFormat: React.FC<IProps> = (props) => {
+  const format = () => {
+    let txt = props.content;
+    emoji.forEach((item) => {
+      const reg = new RegExp(`\\[${item}\\]`, 'g');
+      txt = txt.replace(
+        reg,
+        `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
+      );
+    });
+    return txt;
+  };
+
+  return (
+    <>
+      {typeof props.content === 'string' ? (
+        <span
+          style={{ display: 'inline-flex', flexWrap: 'wrap' }}
+          dangerouslySetInnerHTML={{ __html: format() }}
+        ></span>
+      ) : (
+        props.content
+      )}
+    </>
+  );
+};
--- a/src/pages/ChatLogs/index.module.scss
+++ b/src/pages/ChatLogs/index.module.scss
@@ -66,19 +66,6 @@
  border-radius: 4px;
 }

-.inGroupAvatar {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  line-height: 1;
-  background-color: #69b1ff;
-  border-radius: 4px;
-}
-
 .chatBBox {
  position: relative;
  height: calc(100vh - 212px - 164px);
--- a/src/pages/ChatLogs/index.tsx
+++ b/src/pages/ChatLogs/index.tsx
@@ -1,4 +1,5 @@
 import { post } from '@/services/ajax';
+import { groupStatus } from '@/services/config';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { Drawer, Form, Input, Tabs } from 'antd';
@@ -8,10 +9,15 @@ import React, { useEffect, useRef, useState } from 'react';
 import { CustDetailContent } from '../CustomList/components/CustDetailContent';
 import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
 import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
-import { adminList, getAdminList, groupMembersCount, groupMembersCount2 } from './ChatUtils';
+import {
+  adminList,
+  getAdminList,
+  groupMembersCount,
+  groupMembersCount2,
+  groupMembersListItem,
+} from './ChatUtils';
 import { ChatBar } from './components/ChatBar';
 import { ChatTime } from './components/ChatTime';
-import { AdminSvg, OwnerSvg } from './components/Svgs';
 import styles from './index.module.scss';

 const ChatLogs: React.FC = () => {
@@ -70,13 +76,6 @@ const ChatLogs: React.FC = () => {
    },
  ]);

-  const groupStatus: any = {
-    '0': '跟进人正常',
-    '1': '跟进人离职',
-    '2': '离职继承中',
-    '3': '离职继承完成',
-  };
-
  const [searchWord, setSearchWord] = useState<any>({
    '0': '',
    '1': '',
@@ -163,7 +162,7 @@ const ChatLogs: React.FC = () => {

  const getGroupList = () => {
    post({
-      url: '/Groups/GroupsList',
+      url: '/Groups/ChatGroups',
      data: stringify({ user_id: selectStaffRef.current?.user_id }),
    }).then((res) => {
      if (res.err_code == 0) {
@@ -298,7 +297,11 @@ const ChatLogs: React.FC = () => {
        style={{ display: item.name.includes(searchWord['1']) ? '' : 'none' }}
      >
        <div className={styles.avatar} style={{ background: item?.avatar ? '#fff' : '' }}>
-          <img src={item.avatar} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} />
+          <img
+            src={item.avatar}
+            alt=""
+            style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
+          />
        </div>
        <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
          <div className={styles.chatAName} title={item.name}>
@@ -315,7 +318,9 @@ const ChatLogs: React.FC = () => {
    return (
      <div
        key={item.group_id}
-        className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${selectGroup?.group_id == item.group_id ? styles.active : ''}`}
+        className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
+          selectGroup?.group_id == item.group_id ? styles.active : ''
+        }`}
        onClick={() => {
          tabKeyRef.current = tabKey;
          setSelectCustFollow(undefined);
@@ -333,7 +338,7 @@ const ChatLogs: React.FC = () => {
        <div className={styles.avatar}>{item.name ? item.name[0] : '群'}</div>
        <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
          <div className={styles.chatAName} title={item.name}>
-            {item.name || '未定义群名'}
+            {item.name || '未知群名'}
          </div>
          <div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
        </div>
@@ -355,7 +360,9 @@ const ChatLogs: React.FC = () => {
              return (
                <div
                  key={`${item.user_id}_${item.name}`}
-                  className={`${styles.chatB} ${selectInnerStaff?.user_id == item.user_id ? styles.active : ''}`}
+                  className={`${styles.chatB} ${
+                    selectInnerStaff?.user_id == item.user_id ? styles.active : ''
+                  }`}
                  onClick={() => {
                    tabKeyRef.current = tabKey;

@@ -395,7 +402,9 @@ const ChatLogs: React.FC = () => {
              );
            })
          ) : (
-            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无内部联系人</div>
+            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
+              暂无内部联系人
+            </div>
          )}
        </>
      );
@@ -407,9 +416,15 @@ const ChatLogs: React.FC = () => {
              return item.state == 0 ? null : custFollowsListItem(item);
            })
          ) : (
-            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无外部联系人</div>
+            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
+              暂无外部联系人
+            </div>
          )}
-          <div className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}>
+          <div
+            className={`${styles.delFollowList} ${
+              delFollowListShow ? styles.delFollowListShow : ''
+            }`}
+          >
            <div
              className={styles.delFollowListBar}
              onClick={() => {
@@ -419,7 +434,11 @@ const ChatLogs: React.FC = () => {
              <span>已删联系人</span>
              {delFollowListShow ? <UpOutlined /> : <DownOutlined />}
            </div>
-            <div className={`${styles.delFollowListBox} ${delFollowListShow ? styles.delFollowListBoxShow : ''}`}>
+            <div
+              className={`${styles.delFollowListBox} ${
+                delFollowListShow ? styles.delFollowListBoxShow : ''
+              }`}
+            >
              {custFollowsList.map((item) => {
                return item.state == 1 ? null : custFollowsListItem(item);
              })}
@@ -435,9 +454,15 @@ const ChatLogs: React.FC = () => {
              return item.state == 0 ? null : groupListItem(item);
            })
          ) : (
-            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>暂无客户群聊</div>
+            <div style={{ lineHeight: '44px', textAlign: 'center', color: '#999' }}>
+              暂无客户群聊
+            </div>
          )}
-          <div className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}>
+          <div
+            className={`${styles.delFollowList} ${
+              delGroupListShow ? styles.delFollowListShow : ''
+            }`}
+          >
            <div
              className={styles.delFollowListBar}
              onClick={() => {
@@ -447,7 +472,11 @@ const ChatLogs: React.FC = () => {
              <span>已解散的群</span>
              {delGroupListShow ? <UpOutlined /> : <DownOutlined />}
            </div>
-            <div className={`${styles.delFollowListBox} ${delGroupListShow ? styles.delFollowListBoxShow : ''}`}>
+            <div
+              className={`${styles.delFollowListBox} ${
+                delGroupListShow ? styles.delFollowListBoxShow : ''
+              }`}
+            >
              {groupList.map((item) => {
                return item.state == 1 ? null : groupListItem(item);
              })}
@@ -464,7 +493,9 @@ const ChatLogs: React.FC = () => {
      return <></>;
    } else if (tabKey == '1') {
      return (
-        <div className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}>
+        <div
+          className={`${styles.delFollowList} ${delFollowListShow ? styles.delFollowListShow : ''}`}
+        >
          <div
            className={styles.delFollowListBar}
            onClick={() => {
@@ -474,7 +505,11 @@ const ChatLogs: React.FC = () => {
            <span>已删联系人</span>
            {delFollowListShow ? <UpOutlined /> : <DownOutlined />}
          </div>
-          <div className={`${styles.delFollowListBox} ${delFollowListShow ? styles.delFollowListBoxShow : ''}`}>
+          <div
+            className={`${styles.delFollowListBox} ${
+              delFollowListShow ? styles.delFollowListBoxShow : ''
+            }`}
+          >
            {custFollowsList.map((item) => {
              return item.state == 1 ? null : custFollowsListItem(item);
            })}
@@ -483,7 +518,9 @@ const ChatLogs: React.FC = () => {
      );
    } else {
      return (
-        <div className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}>
+        <div
+          className={`${styles.delFollowList} ${delGroupListShow ? styles.delFollowListShow : ''}`}
+        >
          <div
            className={styles.delFollowListBar}
            onClick={() => {
@@ -493,7 +530,11 @@ const ChatLogs: React.FC = () => {
            <span>已解散的群</span>
            {delGroupListShow ? <UpOutlined /> : <DownOutlined />}
          </div>
-          <div className={`${styles.delFollowListBox} ${delGroupListShow ? styles.delFollowListBoxShow : ''}`}>
+          <div
+            className={`${styles.delFollowListBox} ${
+              delGroupListShow ? styles.delFollowListBoxShow : ''
+            }`}
+          >
            {groupList.map((item) => {
              return item.state == 1 ? null : groupListItem(item);
            })}
@@ -503,59 +544,6 @@ const ChatLogs: React.FC = () => {
    }
  };

-  // 群 Drawer 群员
-  const groupMembersListItem = (item: IGroupMembers) => {
-    return (
-      <div
-        key={item.user_id}
-        style={{
-          display: 'inline-flex',
-          justifyContent: 'flex-start',
-          alignItems: 'center',
-          width: 80,
-          flexDirection: 'column',
-          verticalAlign: 'top',
-          marginTop: 12,
-        }}
-      >
-        <div className={styles.inGroupAvatar}>
-          {item.avatar ? (
-            <img
-              style={{
-                maxWidth: '100%',
-                maxHeight: '100%',
-                objectFit: 'cover',
-                borderRadius: 4,
-              }}
-              src={item.avatar}
-              alt=""
-            />
-          ) : item.name ? (
-            item.name[0]
-          ) : (
-            ''
-          )}
-          {item.user_id == selectGroupRef.current?.owner ? <OwnerSvg /> : null}
-          {selectGroupRef.current?.adminUserIDs?.includes(item.user_id) ? <AdminSvg /> : null}
-        </div>
-        <div
-          style={{
-            padding: '0 4px',
-            whiteSpace: 'nowrap',
-            minWidth: 0,
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            width: 72,
-            textAlign: 'center',
-          }}
-          title={item.name}
-        >
-          {item.name}
-        </div>
-      </div>
-    );
-  };
-
  return (
    <PageContainer>
      <div className={styles.box}>
@@ -682,7 +670,7 @@ const ChatLogs: React.FC = () => {
                <>{selectCustFollowRef.current?.name}</>
              ) : (
                <>
-                  {selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}
+                  {selectGroupRef.current ? selectGroupRef.current?.name || '未知群名' : ''}
                  {selectGroupRef.current ? <>（{groupMembersList.length}）</> : null}
                </>
              )}
@@ -695,7 +683,7 @@ const ChatLogs: React.FC = () => {
                  <>{selectCustFollowRef.current?.name} 详细信息</>
                ) : (
                  <>
-                    {selectGroupRef.current?.name || '未定义群名'} （{groupMembersList.length}
+                    {selectGroupRef.current?.name || '未知群名'} （{groupMembersList.length}
                    ）详细信息
                  </>
                )
@@ -715,8 +703,12 @@ const ChatLogs: React.FC = () => {
                    群主：
                    {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={{ 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={{
@@ -730,7 +722,9 @@ const ChatLogs: React.FC = () => {
                    群成员 • {groupMembersList.length}
                  </div>
                  {groupMembersList.map((item) => {
-                    return item.group_members_type == '2' || item.state == 0 ? null : groupMembersListItem(item);
+                    return item.group_members_type == '2' || item.state == 0
+                      ? null
+                      : groupMembersListItem(item, selectGroupRef.current);
                  })}
                  {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
                    <div
@@ -746,7 +740,9 @@ const ChatLogs: React.FC = () => {
                    </div>
                  ) : null}
                  {groupMembersList.map((item) => {
-                    return item.group_members_type == '1' || item.state == 0 ? null : groupMembersListItem(item);
+                    return item.group_members_type == '1' || item.state == 0
+                      ? null
+                      : groupMembersListItem(item, selectGroupRef.current);
                  })}
                  {groupMembersCount(groupMembersList, 0) != 0 ? (
                    <div
@@ -762,7 +758,9 @@ const ChatLogs: React.FC = () => {
                    </div>
                  ) : null}
                  {groupMembersList.map((item) => {
-                    return item.state == 1 ? null : groupMembersListItem(item);
+                    return item.state == 1
+                      ? null
+                      : groupMembersListItem(item, selectGroupRef.current);
                  })}
                </div>
              )}
@@ -773,26 +771,48 @@ const ChatLogs: React.FC = () => {
              className={styles.chatLogBox}
              ref={chatBoxRef}
              onScroll={(e: any) => {
-                if (e.target?.scrollTop == 0 && !isAllChatRef.current && !chatLogLoadingRef.current) {
+                if (
+                  e.target?.scrollTop == 0 &&
+                  !isAllChatRef.current &&
+                  !chatLogLoadingRef.current
+                ) {
                  page(param.curr_page + 1);
                }
              }}
            >
-              {isAllChatRef.current ? <div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>没有更多聊天记录了</div> : null}
+              {isAllChatRef.current ? (
+                <div style={{ marginBottom: 12, textAlign: 'center', color: '#999' }}>
+                  没有更多聊天记录了
+                </div>
+              ) : null}
              {chatLogs.map((item) => {
                if (item.curr_page) {
-                  return <div key={item.curr_page} className={`curr_page${param.curr_page}`} style={{ height: 0 }} />;
+                  return (
+                    <div
+                      key={item.curr_page}
+                      className={`curr_page${param.curr_page}`}
+                      style={{ height: 0 }}
+                    />
+                  );
                } else {
                  return (
                    <div key={item.msg_id}>
                      {/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
                      <ChatTime msgtime={item.msg_time} />
                      {tabKey == '2' ? (
-                        <ChatBar from={selectStaff} to={groupMembersObjRef.current[item.msg_from]} chat={item} />
+                        <ChatBar
+                          from={selectStaff}
+                          to={groupMembersObjRef.current[item.msg_from]}
+                          chat={item}
+                        />
                      ) : (
                        <ChatBar
                          from={selectStaff}
-                          to={tabKeyRef.current == '0' ? selectInnerStaffRef.current : selectCustFollowRef.current}
+                          to={
+                            tabKeyRef.current == '0'
+                              ? selectInnerStaffRef.current
+                              : selectCustFollowRef.current
+                          }
                          chat={item}
                        />
                      )}