开发: 修改页面

src/pages/ChatLogs/ChatLogsType.ts

@@ -1,10 +1,40 @@
 export interface IStaffsItem {
-  user_id: string | number;
+  user_id: string | number | undefined;
   name: string;
   telephone: string;
   dep_name: string[];
   position: string;
   avatar?: string;
+  gender?: string | undefined | number;
+
+  address: string;
+  alias: string;
+
+  biz_mail: string;
+  department: string;
+  direct_leader: string;
+  email: string;
+  enable: number;
+  english_name: string;
+  extattr: string;
+
+  hide_mobile: number;
+  is_leader_in_dept: string;
+  isleader: number;
+  main_department: number;
+  mobile: string;
+  order: string;
+  qr_code: string;
+  status: number;
+  userid: string;
+  main_dep?: {
+    children: null;
+    department_leader: string;
+    id: number;
+    name: string;
+    parent_id: number;
+    sort: number;
+  };
 }
 
 export interface ICustFollow {
@@ -52,6 +82,7 @@ export interface IGroupMembers {
   nick_name: string;
   state: number;
   user_id: string;
+  group_members_type: string;
 }
 
 export interface IChat {

src/pages/ChatLogs/ChatUtils.tsx

@@ -0,0 +1,88 @@
+/**
+ * 获取已离群的数量
+ * @param data
+ * @param state
+ * @returns
+ */
+
+export const groupMembersCount = (data: any[], state: any) => {
+  let count = 0;
+  data.forEach((item) => {
+    if (item.state == state) {
+      count += 1;
+    }
+  });
+
+  return count;
+};
+
+/**
+ * 获取是微信的人数
+ * @param data
+ * @param group_members_type
+ * @param state
+ * @returns
+ */
+export const groupMembersCount2 = (data: any[], group_members_type: any, state: any) => {
+  let count = 0;
+  data.forEach((item) => {
+    if (item.group_members_type == group_members_type && item.state == state) {
+      count += 1;
+    }
+  });
+
+  return count;
+};
+
+/**
+ * 群管理者：
+ * @param data
+ * @param groupMembers
+ * @returns
+ */
+export const adminList = (data: any, groupMembers: any) => {
+  if (data) {
+    try {
+      const msg = JSON.parse(data);
+      if (Array.isArray(msg) && msg.length) {
+        let arr: any = [];
+        msg.forEach((el) => {
+          arr.push(groupMembers[el.userid]?.name);
+        });
+        return <div>群管理者：{arr.join('，')}</div>;
+      }
+    } catch (e) {
+      return <></>;
+    }
+  }
+
+  return <></>;
+};
+
+/**
+ * 客户等级等信息
+ * @returns
+ */
+export const formatTags = (data: any) => {
+  if (data) {
+    try {
+      const tags = JSON.parse(data);
+      if (Array.isArray(tags)) {
+        return (
+          <>
+            {tags.map((item) => {
+              return (
+                <div key={`${item.group_name}_${item.tag_name}`}>
+                  {item.group_name}：{item.tag_name}
+                </div>
+              );
+            })}
+          </>
+        );
+      }
+    } catch (e) {
+      return <></>;
+    }
+  }
+  return <></>;
+};

src/pages/ChatLogs/components/ChatBar.tsx

@@ -80,7 +80,7 @@ export const ChatBar: React.FC<IChatItem> = (props) => {
               <div className={styles.name}>{props.from?.name}</div>
               <div className={styles.content}>
                 {props.chat?.state == 0 ? (
-                  <div className={styles.revokeMsg}>已撤回的消息</div>
+                  <div className={styles.revokeMsgRight}>已撤回</div>
                 ) : null}
                 {chatContent()}
               </div>
@@ -116,8 +116,8 @@ export const ChatBar: React.FC<IChatItem> = (props) => {
               <div className={styles.name}>{props.to?.name}</div>
               <div className={styles.content}>
                 {props.chat?.state == 0 ? (
-                  <div className={styles.revokeMsg}>
+                  <div className={styles.revokeMsgLeft}>
-                    <span>已撤回的消息</span>
+                    <span>已撤回</span>
                   </div>
                 ) : null}
                 {chatContent()}

src/pages/ChatLogs/components/ChatRecord.tsx

@@ -96,8 +96,9 @@ export const ChatRecord: React.FC<IChatItem> = (props) => {
         onCancel={() => {
           setVisible(false);
         }}
+        centered
       >
-        <div>
+        <div style={{ maxHeight: '75vh', overflow: 'auto' }}>
           {record ? (
             <div>
               {record.item.map((item: any) => {

src/pages/ChatLogs/components/Gender.tsx

@@ -0,0 +1,28 @@
+type IProps = {
+  gender: string | undefined | number;
+};
+export const Gender: React.FC<IProps> = (props) => {
+  return (
+    <>
+      {props?.gender ? (
+        <>
+          {props?.gender == 1 ? (
+            <svg viewBox="0 0 1024 1024" width="16" height="16">
+              <path
+                d="M828.875 765.657c-191.159-16.86-202.516-102.922-202.516-102.922v-85.997c111.656-43.063 145.76-207.699 145.76-207.699 0-65.457-32.153-67.281-32.153-67.281V195.093c7.486-177.753-100.33-136.61-102.25-136.61-1.791 0-60.466-46.774-60.466-46.774-41.751-31.8-134.499 11.262-134.499 11.262l-3.839 0.064c-104.937 2.751-132.387 78.479-132.387 78.479l1.92 196.437c-54.804 0-47.35 76.719-47.35 76.719 0 84.142 147.616 200.148 147.616 200.148 9.47 110.472-49.174 166.46-49.174 166.46s-100.266 3.711-213.84 37.432c-2.72 0.863-5.344 1.6-7.967 2.463C30.617 817.421 0 920.855 0 920.855v101.033l463.579 1.888 68.465-1.92h491.732V943.25c1.92-115.815-194.901-177.593-194.901-177.593z m-244.65 129.22l-71.25 128.675-69.616-128.676-16.124-64.05 30.68-136.354h111.656l29.178 136.354-14.525 64.05z"
+                fill="#1890ff"
+              ></path>
+            </svg>
+          ) : (
+            <svg viewBox="0 0 1025 1024" width="16" height="16">
+              <path
+                d="M613.312 626.496v-11.2h151.296V318.08c0-124.736-113.152-225.856-252.608-225.856S259.392 193.344 259.392 318.08v297.216h151.36v11.072h-0.256L115.648 820.16v107.136H908.48v-105.92l-295.168-194.88z m7.68 186.752c-72.192 69.824-109.504-36.416-109.504-36.416s-37.312 106.24-109.568 36.416c0 0-31.744-20.544-35.136-158.208l144.704 121.728L656.192 655.04c-3.392 137.6-35.2 158.208-35.2 158.208z"
+                fill="#1890ff"
+              ></path>
+            </svg>
+          )}
+        </>
+      ) : null}
+    </>
+  );
+};

src/pages/ChatLogs/components/index.module.scss

@@ -38,13 +38,13 @@
 .content {
   position: relative;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   min-height: 40px;
   padding: 12px;
   word-break: break-all;
   background-color: #fff;
   border-radius: 4px;
-  flex-direction: column;
 
   &::before {
     position: absolute;
@@ -124,9 +124,32 @@
   }
 }
 
-.revokeMsg{
+.revokeMsgRight {
-  background-color: #8c8c8c;
+  position: absolute;
+  top: 0;
+  left: -48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
   color: #fff;
-  border-radius: 4px;
+  font-size: 12px;
-  padding: 0 12px;
+  background-color: #8c8c8c;
+  border-radius: 40px;
+}
+
+.revokeMsgLeft {
+  position: absolute;
+  top: 0;
+  right: -48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  color: #fff;
+  font-size: 12px;
+  background-color: #8c8c8c;
+  border-radius: 40px;
 }

src/pages/ChatLogs/index.module.scss

@@ -23,11 +23,11 @@
   cursor: pointer;
 
   &:hover {
-    background-color: #d6d6d7;
+    background-color: #bae0ff;
   }
 
   &.active {
-    background-color: #c5c4c4;
+    background-color: #bae0ff;
   }
 }
 
@@ -67,10 +67,51 @@
 }
 
 .chatBBox {
+  position: relative;
   height: calc(100vh - 212px - 164px);
   overflow: auto;
 }
 
+.delFollowList {
+  position: absolute;
+  top: calc(100% - 34px);
+  z-index: 1;
+  width: 100%;
+  height: 34px;
+  background-color: #fff;
+  transition: top 0.3s, height 0.3s;
+
+  &.delFollowListShow {
+    top: 0;
+    height: calc(100% - 34px);
+  }
+}
+
+.delFollowListBar {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 34px;
+  padding: 0 12px;
+  color: #1890ff;
+  cursor: pointer;
+
+  &:hover {
+    background: #eee;
+  }
+}
+
+.delFollowListBox {
+  height: 0;
+  overflow: hidden;
+
+  &.delFollowListBoxShow {
+    height: calc(100% - 34px);
+    overflow: auto;
+  }
+}
+
 .state0 {
   position: relative;
   background: #eee;
@@ -100,13 +141,13 @@
   max-height: 50vh;
   overflow: auto;
   background-color: #fff;
+  box-shadow: 0 4px 6px #ccc;
   transform: translateY(20px);
   visibility: hidden;
   cursor: pointer;
   opacity: 0;
   transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
   pointer-events: none;
-  box-shadow: 0 4px 6px #ccc;
 
   &.show {
     z-index: 1;

src/pages/ChatLogs/index.tsx

@@ -1,13 +1,16 @@
 import { post } from '@/services/ajax';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { Form, Input, Modal, Tabs } from 'antd';
+import { Drawer, Form, Input, Tabs } from 'antd';
 import Spin from 'antd/lib/spin';
 import { stringify } from 'qs';
 import React, { useEffect, useRef, useState } from 'react';
+import { DepartmentMembersDetail } from '../DepartmentsList/components/DepartmentMemberDetail';
 import { IChat, ICustFollow, IGroup, IGroupMembers, IStaffsItem } from './ChatLogsType';
+import { adminList, formatTags, groupMembersCount, groupMembersCount2 } from './ChatUtils';
 import { ChatBar } from './components/ChatBar';
 import { ChatTime } from './components/ChatTime';
+import { Gender } from './components/Gender';
 import styles from './index.module.scss';
 interface ISearchWord {
   '0': string;
@@ -70,7 +73,7 @@ const ChatLogs: React.FC = () => {
     },
   ]);
 
-  const groupStatus = {
+  const groupStatus: any = {
     '0': '跟进人正常',
     '1': '跟进人离职',
     '2': '离职继承中',
@@ -84,6 +87,8 @@ const ChatLogs: React.FC = () => {
   });
 
   const [flolowsBoxShow, setFlolowsBox] = useState(false);
+  const [delFollowListShow, setDelFollowListShow] = useState(false);
+  const [delGroupListShow, setDelGroupListShow] = useState(false);
 
   const timeShowRef = useRef(false);
   const chatBoxRef = useRef<any>();
@@ -95,6 +100,7 @@ const ChatLogs: React.FC = () => {
     setFlolowsBox(false);
   }
 
+  // 监听DOM变动
   const callback = function (mutationsList: any) {
     // Use traditional 'for loops' for IE 11
     for (let mutation of mutationsList) {
@@ -128,9 +134,9 @@ const ChatLogs: React.FC = () => {
   const getStaffsList = () => {
     post({ url: '/Staffs/Data' }).then((res) => {
       if (res.err_code == 0) {
-        if (Array.isArray(res.data)) {
+        if (Array.isArray(res.data) && res.data.length) {
           // setSelectStaff(res.data[0]);
-          //     selectStaffRef.current = res.data[0];
+          // selectStaffRef.current = res.data[0];
           res.data.forEach((element: IStaffsItem) => {
             if (element.user_id == 'yangxb') {
               setSelectStaff(element);
@@ -156,7 +162,6 @@ const ChatLogs: React.FC = () => {
     } else {
       param.room_id = selectGroupRef.current?.group_id + '';
     }
-
     timeShowRef.current = false;
     getChatLogsList();
   };
@@ -183,27 +188,28 @@ const ChatLogs: React.FC = () => {
           } else {
             arr = [...temp, mark, ...chatLogs];
           }
-          if (arr) {
+          // 5分钟外显示时间
-            let show_time = '';
+          // if (arr) {
-            arr.forEach((el, i) => {
+          //   let show_time = '';
-              el.show_time = false;
+          //   arr.forEach((el, i) => {
-              if (i == 0) {
+          //     el.show_time = false;
-                el.show_time = true;
+          //     if (i == 0) {
-              } else {
+          //       el.show_time = true;
-                if (show_time == '') {
+          //     } else {
-                  show_time = el.msg_time;
+          //       if (show_time == '') {
-                } else {
+          //         show_time = el.msg_time;
-                  if (
+          //       } else {
-                    new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
+          //         if (
-                    5 * 60 * 1000
+          //           new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
-                  ) {
+          //           5 * 60 * 1000
-                    el.show_time = true;
+          //         ) {
-                    show_time = el.msg_time;
+          //           el.show_time = true;
-                  }
+          //           show_time = el.msg_time;
-                }
+          //         }
-              }
+          //       }
-            });
+          //     }
-          }
+          //   });
+          // }
           setChatLogs(arr);
         }
       }
@@ -296,7 +302,22 @@ const ChatLogs: React.FC = () => {
                   }}
                   style={{ display: item.name.includes(searchWord['0']) ? '' : 'none' }}
                 >
-                  <div className={styles.avatar}>{item.name[0]}</div>
+                  <div className={styles.avatar}>
+                    {item.avatar ? (
+                      <img
+                        src={item.avatar}
+                        alt=""
+                        style={{
+                          maxWidth: '100%',
+                          maxHeight: '100%',
+                          objectFit: 'cover',
+                          borderRadius: 4,
+                        }}
+                      />
+                    ) : (
+                      <>{item.name[0]}</>
+                    )}
+                  </div>
                   <div className={styles.chatAMsg}>
                     <div className={styles.chatAName} title={item.name}>
                       {item.name}
@@ -317,6 +338,7 @@ const ChatLogs: React.FC = () => {
         <>
           {custFollowsList.length ? (
             custFollowsList.map((item) => {
+              if (item.state == 0) return null;
               return (
                 <div
                   key={item.cust_id}
@@ -358,6 +380,68 @@ const ChatLogs: React.FC = () => {
               暂无外部联系人
             </div>
           )}
+          <div
+            className={`${styles.delFollowList} ${
+              delFollowListShow ? styles.delFollowListShow : ''
+            }`}
+          >
+            <div
+              className={styles.delFollowListBar}
+              onClick={() => {
+                setDelFollowListShow(!delFollowListShow);
+              }}
+            >
+              <span>已删联系人</span>
+              {delFollowListShow ? <UpOutlined /> : <DownOutlined />}
+            </div>
+            <div
+              className={`${styles.delFollowListBox} ${
+                delFollowListShow ? styles.delFollowListBoxShow : ''
+              }`}
+            >
+              {custFollowsList.map((item) => {
+                if (item.state == 1) return null;
+                return (
+                  <div
+                    key={item.cust_id}
+                    className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
+                      selectCustFollow?.cust_id == item.cust_id ? styles.active : ''
+                    }`}
+                    onClick={() => {
+                      tabKeyRef.current = tabKey;
+
+                      setSelectInnerStaff(undefined);
+                      selectInnerStaffRef.current = undefined;
+                      setSelectGroup(undefined);
+                      selectGroupRef.current = undefined;
+
+                      setSelectCustFollow(item);
+                      selectCustFollowRef.current = item;
+                      page(1);
+                    }}
+                    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' }}
+                      />
+                    </div>
+                    <div className={styles.chatAMsg} style={{ flexDirection: 'column' }}>
+                      <div className={styles.chatAName} title={item.name}>
+                        {item.name}
+                      </div>
+                      <div>{item.remark}</div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
         </>
       );
     } else {
@@ -365,6 +449,7 @@ const ChatLogs: React.FC = () => {
         <>
           {groupList.length ? (
             groupList.map((item) => {
+              if (item.state == 0) return null;
               return (
                 <div
                   key={item.group_id}
@@ -398,53 +483,62 @@ const ChatLogs: React.FC = () => {
               暂无客户群聊
             </div>
           )}
+          <div
+            className={`${styles.delFollowList} ${
+              delGroupListShow ? styles.delFollowListShow : ''
+            }`}
+          >
+            <div
+              className={styles.delFollowListBar}
+              onClick={() => {
+                setDelGroupListShow(!delGroupListShow);
+              }}
+            >
+              <span>已解散的群</span>
+              {delGroupListShow ? <UpOutlined /> : <DownOutlined />}
+            </div>
+            <div
+              className={`${styles.delFollowListBox} ${
+                delGroupListShow ? styles.delFollowListBoxShow : ''
+              }`}
+            >
+              {groupList.map((item) => {
+                if (item.state == 1) return null;
+                return (
+                  <div
+                    key={item.group_id}
+                    className={`${styles.chatB} ${item.state == 0 ? styles.state0 : ''} ${
+                      selectGroup?.group_id == item.group_id ? styles.active : ''
+                    }`}
+                    onClick={() => {
+                      tabKeyRef.current = tabKey;
+                      setSelectCustFollow(undefined);
+                      selectCustFollowRef.current = undefined;
+                      setSelectInnerStaff(undefined);
+                      selectInnerStaffRef.current = undefined;
+                      setSelectGroup(item);
+                      selectGroupRef.current = item;
+                      getGroupMembersList();
+                    }}
+                    style={{ display: item.name.includes(searchWord['2']) ? '' : 'none' }}
+                  >
+                    <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 || '未定义群名'}
+                      </div>
+                      <div style={{ color: '#999' }}>{groupStatus[item.status]}</div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
         </>
       );
     }
   };
 
-  const formatTags = () => {
-    if (selectCustFollow?.tags) {
-      try {
-        const tags = JSON.parse(selectCustFollow?.tags);
-        if (Array.isArray(tags)) {
-          return (
-            <>
-              {tags.map((item) => {
-                return (
-                  <div key={`${item.group_name}_${item.tag_name}`}>
-                    {item.group_name}：{item.tag_name}
-                  </div>
-                );
-              })}
-            </>
-          );
-        }
-      } catch (e) {}
-    }
-    return <></>;
-  };
-
-  function adminList() {
-    if (selectGroupRef.current?.admin_list) {
-      try {
-        const msg = JSON.parse(selectGroupRef.current?.admin_list);
-        if (Array.isArray(msg) && msg.length) {
-          let arr: any = [];
-          msg.forEach((el) => {
-            arr.push(groupMembersObjRef.current[el.userid]?.name);
-          });
-
-          return <div>群管理者：{arr.join('，')}</div>;
-        }
-      } catch (e) {
-        return <></>;
-      }
-    }
-
-    return <></>;
-  }
-
   return (
     <PageContainer>
       <div className={styles.box}>
@@ -470,9 +564,24 @@ const ChatLogs: React.FC = () => {
                     getCustFollowsList();
                     getGroupList();
                   }}
-                  style={{ background: selectStaff?.user_id == item.user_id ? '#e6f4ff' : '' }}
+                  style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }}
                 >
-                  <div className={styles.avatar}>{item.name[0]}</div>
+                  <div className={styles.avatar}>
+                    {item.avatar ? (
+                      <img
+                        src={item.avatar}
+                        alt=""
+                        style={{
+                          maxWidth: '100%',
+                          maxHeight: '100%',
+                          objectFit: 'cover',
+                          borderRadius: 4,
+                        }}
+                      />
+                    ) : (
+                      <>{item.name[0]}</>
+                    )}
+                  </div>
                   <div className={styles.chatAMsg}>
                     <div className={styles.chatAName} title={item.name}>
                       {item.name}
@@ -491,7 +600,22 @@ const ChatLogs: React.FC = () => {
           >
             {selectStaff ? (
               <>
-                <div className={styles.avatar}>{selectStaff.name[0]}</div>
+                <div className={styles.avatar}>
+                  {selectStaff.avatar ? (
+                    <img
+                      src={selectStaff.avatar}
+                      alt=""
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        objectFit: 'cover',
+                        borderRadius: 4,
+                      }}
+                    />
+                  ) : (
+                    <>{selectStaff.name[0]}</>
+                  )}
+                </div>
                 <div className={styles.chatAMsg}>
                   <div className={styles.chatAName} title={selectStaff.name}>
                     {selectStaff.name}
@@ -529,7 +653,7 @@ const ChatLogs: React.FC = () => {
         <div style={{ flex: 1 }}>
           <div className={styles.logTop}>
             <div
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: 'pointer', fontSize: 18 }}
               onClick={() => {
                 setOpen(true);
               }}
@@ -539,43 +663,34 @@ const ChatLogs: React.FC = () => {
               ) : tabKeyRef.current == '1' ? (
                 <>{selectCustFollowRef.current?.name}</>
               ) : (
-                <>{selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}</>
+                <>
+                  {selectGroupRef.current ? selectGroupRef.current?.name || '未定义群名' : ''}
+                  {selectGroupRef.current ? <>（{groupMembersList.length}）</> : null}
+                </>
               )}
             </div>
-            <Modal
+            <Drawer
               title={
                 tabKeyRef.current == '0' ? (
                   <>{selectInnerStaffRef.current?.name} 详细信息</>
                 ) : tabKeyRef.current == '1' ? (
                   <>{selectCustFollowRef.current?.name} 详细信息</>
                 ) : (
-                  <>{selectGroupRef.current?.name || '未定义群名'} 详细信息</>
+                  <>
+                    {selectGroupRef.current?.name || '未定义群名'} （{groupMembersList.length}
+                    ）详细信息
+                  </>
                 )
               }
               open={open}
-              centered
+              width={600}
-              onCancel={() => setOpen(false)}
+              onClose={() => setOpen(false)}
               footer={false}
             >
               {tabKeyRef.current == '0' ? (
-                <div>
+                <DepartmentMembersDetail
-                  <div
+                  record={selectInnerStaff as IStaffsItem}
-                    style={{
+                ></DepartmentMembersDetail>
-                      display: 'flex',
-                      borderBottom: '1px solid #ddd',
-                      paddingBottom: 12,
-                      marginBottom: 12,
-                    }}
-                  >
-                    <div className={styles.modalAvatar}>{selectInnerStaff?.name[0]}</div>
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
-                      <div style={{ fontSize: 16 }}>{selectInnerStaff?.name}</div>
-                    </div>
-                  </div>
-                  <div>账号：{selectInnerStaff?.name}</div>
-                  <div>手机：{selectInnerStaff?.telephone}</div>
-                  <div>职务：{selectInnerStaff?.position}</div>
-                </div>
               ) : tabKeyRef.current == '1' ? (
                 <div>
                   <div
@@ -592,38 +707,39 @@ const ChatLogs: React.FC = () => {
                     <div style={{ display: 'flex', flexDirection: 'column' }}>
                       <div style={{ fontSize: 16 }}>
                         <span style={{ marginRight: 8 }}>{selectCustFollow?.name}</span>
-                        {selectCustFollow?.gender == 1 ? (
+                        <Gender gender={selectCustFollow?.gender}></Gender>
-                          <svg viewBox="0 0 1024 1024" width="16" height="16">
-                            <path
-                              d="M828.875 765.657c-191.159-16.86-202.516-102.922-202.516-102.922v-85.997c111.656-43.063 145.76-207.699 145.76-207.699 0-65.457-32.153-67.281-32.153-67.281V195.093c7.486-177.753-100.33-136.61-102.25-136.61-1.791 0-60.466-46.774-60.466-46.774-41.751-31.8-134.499 11.262-134.499 11.262l-3.839 0.064c-104.937 2.751-132.387 78.479-132.387 78.479l1.92 196.437c-54.804 0-47.35 76.719-47.35 76.719 0 84.142 147.616 200.148 147.616 200.148 9.47 110.472-49.174 166.46-49.174 166.46s-100.266 3.711-213.84 37.432c-2.72 0.863-5.344 1.6-7.967 2.463C30.617 817.421 0 920.855 0 920.855v101.033l463.579 1.888 68.465-1.92h491.732V943.25c1.92-115.815-194.901-177.593-194.901-177.593z m-244.65 129.22l-71.25 128.675-69.616-128.676-16.124-64.05 30.68-136.354h111.656l29.178 136.354-14.525 64.05z"
-                              fill="#1890ff"
-                            ></path>
-                          </svg>
-                        ) : (
-                          <svg viewBox="0 0 1025 1024" width="16" height="16">
-                            <path
-                              d="M613.312 626.496v-11.2h151.296V318.08c0-124.736-113.152-225.856-252.608-225.856S259.392 193.344 259.392 318.08v297.216h151.36v11.072h-0.256L115.648 820.16v107.136H908.48v-105.92l-295.168-194.88z m7.68 186.752c-72.192 69.824-109.504-36.416-109.504-36.416s-37.312 106.24-109.568 36.416c0 0-31.744-20.544-35.136-158.208l144.704 121.728L656.192 655.04c-3.392 137.6-35.2 158.208-35.2 158.208z"
-                              fill="#1890ff"
-                            ></path>
-                          </svg>
-                        )}
                       </div>
                       <div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
                     </div>
                   </div>
                   <div>备注名称：{selectCustFollow?.remark}</div>
-                  {formatTags()}
+                  {formatTags(selectCustFollow?.tags)}
                 </div>
               ) : (
                 <div>
-                  <div>
+                  <div style={{ marginBottom: 8, textIndent: '2em' }}>
-                    群创建者：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
+                    群主：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.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>
-                  <div>{adminList()}</div>
-                  <div>创建时间：{selectGroupRef.current?.create_time}</div>
-                  <div>群公告：{selectGroupRef.current?.notice}</div>
-                  <div style={{ fontWeight: 'bold', marginTop: 8, marginBottom: 8 }}>群成员:</div>
                   {groupMembersList.map((item) => {
+                    if (item.group_members_type == '2' || item.state == 0) return null;
                     return (
                       <div
                         key={item.user_id}
@@ -631,7 +747,7 @@ const ChatLogs: React.FC = () => {
                           display: 'inline-flex',
                           justifyContent: 'flex-start',
                           alignItems: 'center',
-                          width: 64,
+                          width: 80,
                           flexDirection: 'column',
                           verticalAlign: 'top',
                           marginTop: 12,
@@ -662,7 +778,133 @@ const ChatLogs: React.FC = () => {
                             minWidth: 0,
                             textOverflow: 'ellipsis',
                             overflow: 'hidden',
-                            width: 56,
+                            width: 72,
+                            textAlign: 'center',
+                          }}
+                          title={item.name}
+                        >
+                          {item.name}
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
+                    <div
+                      style={{
+                        fontWeight: 'bold',
+                        marginTop: 24,
+                        marginBottom: 8,
+                        borderBottom: '1px solid #ddd',
+                        paddingBottom: 8,
+                      }}
+                    >
+                      微信：
+                    </div>
+                  ) : null}
+                  {groupMembersList.map((item) => {
+                    if (item.group_members_type == '1' || item.state == 0) return null;
+                    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.avatar}>
+                          {item.avatar ? (
+                            <img
+                              style={{
+                                maxWidth: '100%',
+                                maxHeight: '100%',
+                                objectFit: 'cover',
+                                borderRadius: 4,
+                              }}
+                              src={item.avatar}
+                              alt=""
+                            />
+                          ) : item.name ? (
+                            item.name[0]
+                          ) : (
+                            ''
+                          )}
+                        </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>
+                    );
+                  })}
+                  {groupMembersCount(groupMembersList, 0) != 0 ? (
+                    <div
+                      style={{
+                        fontWeight: 'bold',
+                        marginTop: 24,
+                        marginBottom: 8,
+                        borderBottom: '1px solid #ddd',
+                        paddingBottom: 8,
+                      }}
+                    >
+                      已离群：
+                    </div>
+                  ) : null}
+                  {groupMembersList.map((item) => {
+                    if (item.state == 1) return null;
+                    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.avatar}>
+                          {item.avatar ? (
+                            <img
+                              style={{
+                                maxWidth: '100%',
+                                maxHeight: '100%',
+                                objectFit: 'cover',
+                                borderRadius: 4,
+                              }}
+                              src={item.avatar}
+                              alt=""
+                            />
+                          ) : item.name ? (
+                            item.name[0]
+                          ) : (
+                            ''
+                          )}
+                        </div>
+                        <div
+                          style={{
+                            padding: '0 4px',
+                            whiteSpace: 'nowrap',
+                            minWidth: 0,
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            width: 72,
                             textAlign: 'center',
                           }}
                           title={item.name}
@@ -674,9 +916,9 @@ const ChatLogs: React.FC = () => {
                   })}
                 </div>
               )}
-            </Modal>
+            </Drawer>
           </div>
-          <Spin spinning={chatLogLoading} style={{ display: 'block' }}>
+          <Spin spinning={chatLogLoading} style={{ display: 'block' }} size="large">
             <div
               className={styles.chatLogBox}
               ref={chatBoxRef}
@@ -707,7 +949,8 @@ const ChatLogs: React.FC = () => {
                 } else {
                   return (
                     <div key={item.msg_id}>
-                      {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null}
+                      {/* {item.show_time ? <ChatTime msgtime={item.msg_time}></ChatTime> : null} */}
+                      <ChatTime msgtime={item.msg_time}></ChatTime>
                       {tabKey == '2' ? (
                         <ChatBar
                           from={selectStaff}
@@ -715,7 +958,15 @@ const ChatLogs: React.FC = () => {
                           chat={item}
                         ></ChatBar>
                       ) : (
-                        <ChatBar from={selectStaff} to={selectCustFollow} chat={item}></ChatBar>
+                        <ChatBar
+                          from={selectStaff}
+                          to={
+                            tabKeyRef.current == '0'
+                              ? selectInnerStaffRef.current
+                              : selectCustFollowRef.current
+                          }
+                          chat={item}
+                        ></ChatBar>
                       )}
                     </div>
                   );

src/pages/DepartmentsList/components/DepartmentMemberDetail.tsx

@@ -0,0 +1,137 @@
+import { IStaffsItem } from '@/pages/ChatLogs/ChatLogsType';
+import { Gender } from '@/pages/ChatLogs/components/Gender';
+import { Image } from 'antd';
+import styles from '../index.module.scss';
+
+type IProps = {
+  record: IStaffsItem;
+};
+
+/**
+ * 部门成员信息 Drawer ReactNode
+ * @param props
+ * @returns
+ */
+export const DepartmentMembersDetail: React.FC<IProps> = (props) => {
+  const { record } = props;
+
+  const fomatStr = (val: any) => {
+    return val || '未设置';
+  };
+  return (
+    <div>
+      <div style={{ display: 'flex' }}>
+        <div style={{ marginRight: 12 }}>
+          {record?.avatar ? (
+            <Image width={80} height={80} style={{ borderRadius: 4 }} src={record.avatar}></Image>
+          ) : (
+            <div
+              style={{
+                width: 80,
+                height: 80,
+                background: '#eee',
+                borderRadius: 4,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexShrink: 0,
+              }}
+            >
+              {record?.name[0]}
+            </div>
+          )}
+        </div>
+        <div style={{ marginRight: 32 }}>
+          <div>
+            <span style={{ marginRight: 8, fontSize: 18 }}>{record?.name}</span>
+            <Gender gender={record?.gender}></Gender>
+          </div>
+          <div>别名：{fomatStr(record?.alias)}</div>
+        </div>
+        {record?.qr_code ? (
+          <Image width={80} height={80} style={{ borderRadius: 4 }} src={record.qr_code}></Image>
+        ) : null}
+      </div>
+      <div style={{ marginTop: 24, borderTop: '1px solid #ddd', paddingTop: 24 }}>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>企业邮箱：</span>
+          {fomatStr(record?.biz_mail)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>手机：</span>
+          {fomatStr(record?.mobile)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>座机：</span>
+          {fomatStr(record?.telephone)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>邮箱：</span>
+          {fomatStr(record?.email)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>微信：</span>
+          {record?.name}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>地址：</span>
+          {fomatStr(record?.address)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '2em' }}>英文名：</span>
+          {fomatStr(record?.english_name)}
+        </div>
+      </div>
+      <div style={{ marginTop: 24, borderTop: '1px solid #ddd', paddingTop: 24 }}>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>部门：</span>
+          {record?.dep_name?.join('，')}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>职务：</span>
+          {record?.position}
+        </div>
+        <div className={styles.detailItem}>
+          <span>部门负责人：</span>
+          {record?.isleader == 1 ? '是' : '否'}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>负责部门：</span>
+          {record?.main_dep?.name}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>直接上级：</span>
+          {/* {record?.telephone} */}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>微信插件：</span>
+          {/* {record?.telephone} */}
+        </div>
+      </div>
+      {/* <div
+    style={{
+      marginTop: 24,
+      borderBottom: '1px solid #ddd',
+      paddingBottom: 12,
+      marginBottom: 24,
+    }}
+  >
+    对外信息
+  </div>
+  <div>
+    <div className={styles.detailItem}>
+      <span style={{ textIndent: '1em' }}>企业简称：</span>
+    </div>
+    <div className={styles.detailItem}>
+      <span style={{ textIndent: '2em' }}>视频号：</span>
+    </div>
+  </div>
+  <div>
+    <div className={styles.detailItem}>
+      <span style={{ textIndent: '3em' }}>职务：</span>
+      {record?.position}
+    </div>
+  </div> */}
+    </div>
+  );
+};

src/pages/DepartmentsList/index.module.scss

@@ -40,3 +40,12 @@
     display: inline-flex;
   }
 }
+
+
+.detailItem{
+  margin-bottom: 12px;
+  &> span{
+    color: #999;
+    display: inline-block;
+  }
+}

src/pages/DepartmentsList/index.tsx

@@ -1,9 +1,24 @@
 import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
 import { post } from '@/services/ajax';
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Col, Form, Input, Pagination, Row, Spin, Table, Tree } from 'antd';
+import {
+  App,
+  Button,
+  Col,
+  Drawer,
+  Form,
+  Input,
+  Modal,
+  Pagination,
+  Row,
+  Spin,
+  Table,
+  Tree,
+} from 'antd';
 import { stringify } from 'qs';
 import React, { useEffect, useState } from 'react';
+import { IStaffsItem } from '../ChatLogs/ChatLogsType';
+import { DepartmentMembersDetail } from './components/DepartmentMemberDetail';
 import styles from './index.module.scss';
 
 interface IDepartment {
@@ -15,14 +30,6 @@ interface IDepartment {
   sort: number;
 }
 
-interface IStaffsItem {
-  user_id: string | number;
-  name: string;
-  telephone: string;
-  dep_name: string[];
-  position: string;
-}
-
 interface IStaffsData {
   count: number;
   data?: IStaffsItem[];
@@ -35,6 +42,7 @@ type Param = {
   name?: string;
   position?: string;
   telephone?: string;
+  mobile?: string;
 };
 
 const DepartmentsList: React.FC = () => {
@@ -43,19 +51,21 @@ const DepartmentsList: React.FC = () => {
     page_count: 20,
     dep_id: 0,
   });
-
+  const { notification, modal } = App.useApp();
   const [departmentID, setDepartmentsID] = useState<number>(0);
   const [departmentsList, setDepartmentsList] = useState<IDepartment[]>([]);
   const [staffsData, setStaffsData] = useState<IStaffsData>({ count: 0, data: [] });
   const [loadingL, setLoadingL] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [record, setRecord] = useState<IStaffsItem>();
 
   const getDepartmentsList = () => {
     setLoadingL(true);
     post({ url: '/Departments/List' }).then((res) => {
       setLoadingL(false);
       if (res.err_code == 0) {
-        if (Array.isArray(res.data)) {
+        if (Array.isArray(res.data) && res.data.length) {
           param.dep_id = res.data[0].id;
           setDepartmentsID(param.dep_id);
           setDepartmentsList(res.data);
@@ -89,12 +99,51 @@ const DepartmentsList: React.FC = () => {
   // const [open, setOpen] = useState(false);
   // const [popOpen, setPopOpen] = useState(-1);
 
+  const [syncLoading, setSyncLoading] = useState(false);
+  const [syncOpen, setSyncOpen] = useState('');
+
+  const syncDepartments = () => {
+    setSyncLoading(false);
+    setSyncOpen('dep');
+  };
+
+  const syncStaffs = () => {
+    setSyncLoading(false);
+    setSyncOpen('staff');
+  };
+
+  const syncDepOrStaff = () => {
+    if (syncLoading) return;
+    setSyncLoading(true);
+    if (syncOpen == 'dep') {
+      post({ url: '/Sync/Departments' }).then((res) => {
+        setSyncLoading(false);
+        if (res.err_code == 0) {
+          notification.success({
+            message: res.err_msg,
+          });
+          getDepartmentsList();
+        }
+      });
+    } else {
+      post({ url: '/Sync/Staffs' }).then((res) => {
+        setSyncLoading(false);
+        if (res.err_code == 0) {
+          notification.success({
+            message: res.err_msg,
+          });
+          getStaffsList();
+        }
+      });
+    }
+  };
+
   return (
     <PageContainer>
       <div style={{ display: 'flex' }}>
         <div
           style={{
-            width: 260,
+            width: 240,
             flexShrink: 0,
             minHeight: 'calc(100vh - 55px - 60px - 96px)',
             maxHeight: 'calc(100vh - 55px - 60px)',
@@ -167,6 +216,18 @@ const DepartmentsList: React.FC = () => {
             ) : null}
           </Spin>
         </div>
+        <Modal
+          title="系统提示"
+          open={!!syncOpen}
+          onOk={syncDepOrStaff}
+          onCancel={() => setSyncOpen('')}
+          centered
+          width={300}
+        >
+          <Spin spinning={syncLoading}>
+            <div>{syncOpen == 'dep' ? '确定同步部门?' : '确定同步员工?'}</div>
+          </Spin>
+        </Modal>
         {/* <Modal
           open={open}
           title="修改部门"
@@ -197,7 +258,7 @@ const DepartmentsList: React.FC = () => {
                   </Form.Item>
                 </Col>
                 <Col xs={24} sm={12} md={8}>
-                  <Form.Item label="职位">
+                  <Form.Item label="职务">
                     <Input
                       autoComplete="off"
                       onChange={(e) => {
@@ -213,7 +274,7 @@ const DepartmentsList: React.FC = () => {
                     <Input
                       autoComplete="off"
                       onChange={(e) => {
-                        param.telephone = e.target.value.trim();
+                        param.mobile = e.target.value.trim();
                       }}
                       allowClear
                       onPressEnter={() => page(1)}
@@ -244,9 +305,27 @@ const DepartmentsList: React.FC = () => {
                 onClick={() => {
                   page(1);
                 }}
+                style={{ marginRight: 12 }}
               >
                 搜索
               </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  syncDepartments();
+                }}
+                style={{ marginRight: 12 }}
+              >
+                同步部门
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  syncStaffs();
+                }}
+              >
+                同步员工
+              </Button>
             </Row>
           </SearchBottonsCardPlugin>
           <Table
@@ -259,12 +338,57 @@ const DepartmentsList: React.FC = () => {
             rowKey={'user_id'}
             loading={loading}
           >
-            <Table.Column title="姓名" dataIndex={'name'}></Table.Column>
+            <Table.Column
-            <Table.Column title="职位" dataIndex={'position'}></Table.Column>
+              title="姓名"
-            <Table.Column title="部门" dataIndex={'dep_name'}></Table.Column>
+              dataIndex={'name'}
-            <Table.Column title="手机号" dataIndex={'telephone'}></Table.Column>
+              render={(value, record: IStaffsItem) => {
+                return (
+                  <div
+                    onClick={() => {
+                      setRecord(record);
+                      setOpen(true);
+                    }}
+                    style={{ color: '#1890ff', cursor: 'pointer' }}
+                  >
+                    <span
+                      style={{
+                        display: 'inline-block',
+                        marginRight: record.isleader == 1 ? 4 : 0,
+                      }}
+                    >
+                      {value}
+                    </span>
+                    {record?.isleader == 1 ? (
+                      <span
+                        style={{
+                          color: '#999',
+                          fontSize: 12,
+                          border: '1px solid #ddd',
+                          borderRadius: 4,
+                          padding: '2px 4px',
+                        }}
+                      >
+                        负责人
+                      </span>
+                    ) : null}
+                  </div>
+                );
+              }}
+            ></Table.Column>
+            <Table.Column title="职务" width={160} dataIndex={'position'}></Table.Column>
+            <Table.Column
+              title="部门"
+              dataIndex={'dep_name'}
+              render={(val) => {
+                return <>{val.join('，')}</>;
+              }}
+            ></Table.Column>
+            <Table.Column title="手机号" width={160} dataIndex={'mobile'}></Table.Column>
+            <Table.Column title="企业邮箱" dataIndex={'biz_mail'}></Table.Column>
           </Table>
-
+          <Drawer title="成员详情" open={open} onClose={() => setOpen(false)} width={800}>
+            <DepartmentMembersDetail record={record as IStaffsItem}></DepartmentMembersDetail>
+          </Drawer>
           <Pagination
             style={{
               background: '#fff',