Public/scrm.antd
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

开发: 修改页面

Browse Source
This commit is contained in:
zhengw
2023-04-14 17:31:45 +08:00
parent b2bf2ade21
commit f4644b6ba2
11 changed files with 889 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/ChatLogs/ChatLogsType.ts
View File

@@ -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 {

88
src/pages/ChatLogs/ChatUtils.tsx Normal file
View File

@@ -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 <></>;
};

6
src/pages/ChatLogs/components/ChatBar.tsx
View File

@@ -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}>
<span>已撤回的消息</span>
<div className={styles.revokeMsgLeft}>
<span>已撤回</span>
</div>
) : null}
{chatContent()}

3
src/pages/ChatLogs/components/ChatRecord.tsx
View File

@@ -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) => {

28
src/pages/ChatLogs/components/Gender.tsx Normal file
View File

@@ -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}
</>
);
};

33
src/pages/ChatLogs/components/index.module.scss
View File

@@ -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{
background-color: #8c8c8c;
.revokeMsgRight {
position: absolute;
top: 0;
left: -48px;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #fff;
border-radius: 4px;
padding: 0 12px;
font-size: 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;
}

47
src/pages/ChatLogs/index.module.scss
View File

@@ -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;

499
src/pages/ChatLogs/index.tsx
View File

@@ -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) {
let show_time = '';
arr.forEach((el, i) => {
el.show_time = false;
if (i == 0) {
el.show_time = true;
} else {
if (show_time == '') {
show_time = el.msg_time;
} else {
if (
new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
5 * 60 * 1000
) {
el.show_time = true;
show_time = el.msg_time;
}
}
}
});
}
// 5分钟外显示时间
// if (arr) {
// let show_time = '';
// arr.forEach((el, i) => {
// el.show_time = false;
// if (i == 0) {
// el.show_time = true;
// } else {
// if (show_time == '') {
// show_time = el.msg_time;
// } else {
// if (
// new Date(el.msg_time).getTime() - new Date(show_time).getTime() >
// 5 * 60 * 1000
// ) {
// 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
onCancel={() => setOpen(false)}
width={600}
onClose={() => setOpen(false)}
footer={false}
>
{tabKeyRef.current == '0' ? (
<div>
<div
style={{
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>
<DepartmentMembersDetail
record={selectInnerStaff as IStaffsItem}
></DepartmentMembersDetail>
) : 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 ? (
<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>
)}
<Gender gender={selectCustFollow?.gender}></Gender>
</div>
<div style={{ color: '#666' }}>{selectCustFollow?.description}</div>
</div>
</div>
<div>备注名称：{selectCustFollow?.remark}</div>
{formatTags()}
{formatTags(selectCustFollow?.tags)}
</div>
) : (
<div>
<div>
群创建者：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
<div style={{ marginBottom: 8, textIndent: '2em' }}>
群主：{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>
);

137
src/pages/DepartmentsList/components/DepartmentMemberDetail.tsx Normal file
View File

@@ -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>
);
};

9
src/pages/DepartmentsList/index.module.scss
View File

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

162
src/pages/DepartmentsList/index.tsx
View File

@@ -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 title="职位" dataIndex={'position'}></Table.Column>
<Table.Column title="部门" dataIndex={'dep_name'}></Table.Column>
<Table.Column title="手机号" dataIndex={'telephone'}></Table.Column>
<Table.Column
title="姓名"
dataIndex={'name'}
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',