{props.from?.name}
{props.chat?.state == 0 ? (
-
@@ -116,8 +116,8 @@ export const ChatBar: React.FC已撤回的消息
+ 已撤回
) : null}
{chatContent()}
{props.to?.name}
{props.chat?.state == 0 ? (
-
- 已撤回的消息
+ = (props) => {
onCancel={() => {
setVisible(false);
}}
+ centered
>
-
+ 已撤回
) : null}
{chatContent()}
diff --git a/src/pages/ChatLogs/components/ChatRecord.tsx b/src/pages/ChatLogs/components/ChatRecord.tsx
index 785b25c..63df2e8 100644
--- a/src/pages/ChatLogs/components/ChatRecord.tsx
+++ b/src/pages/ChatLogs/components/ChatRecord.tsx
@@ -96,8 +96,9 @@ export const ChatRecord: React.FC
+
{record ? (
{record.item.map((item: any) => {
diff --git a/src/pages/ChatLogs/components/Gender.tsx b/src/pages/ChatLogs/components/Gender.tsx
new file mode 100644
index 0000000..1ef9beb
--- /dev/null
+++ b/src/pages/ChatLogs/components/Gender.tsx
@@ -0,0 +1,28 @@
+type IProps = {
+ gender: string | undefined | number;
+};
+export const Gender: React.FC = (props) => {
+ return (
+ <>
+ {props?.gender ? (
+ <>
+ {props?.gender == 1 ? (
+
+ ) : (
+
+ )}
+
+ ) : null}
+
+ );
+};
diff --git a/src/pages/ChatLogs/components/index.module.scss b/src/pages/ChatLogs/components/index.module.scss
index bc36ade..01e9ba5 100644
--- a/src/pages/ChatLogs/components/index.module.scss
+++ b/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{
- 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;
}
diff --git a/src/pages/ChatLogs/index.module.scss b/src/pages/ChatLogs/index.module.scss
index 9c030c8..3764b9e 100644
--- a/src/pages/ChatLogs/index.module.scss
+++ b/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;
diff --git a/src/pages/ChatLogs/index.tsx b/src/pages/ChatLogs/index.tsx
index 3caf767..417d21f 100644
--- a/src/pages/ChatLogs/index.tsx
+++ b/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();
@@ -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' }}
>
-
{item.name[0]}
+
+ {item.avatar ? (
+ 
+ ) : (
+ <>{item.name[0]}
+ )}
+
{item.name}
@@ -317,6 +338,7 @@ const ChatLogs: React.FC = () => {
<>
{custFollowsList.length ? (
custFollowsList.map((item) => {
+ if (item.state == 0) return null;
return (
{
暂无外部联系人
)}
+
+
);
} else {
@@ -365,6 +449,7 @@ const ChatLogs: React.FC = () => {
<>
{groupList.length ? (
groupList.map((item) => {
+ if (item.state == 0) return null;
return (
{
+ setDelFollowListShow(!delFollowListShow);
+ }}
+ >
+ 已删联系人
+ {delFollowListShow ?
+
+ {custFollowsList.map((item) => {
+ if (item.state == 1) return null;
+ return (
+
+ {
+ 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' }}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+ {item.name}
+
+ {item.remark}
+ {
暂无客户群聊
)}
+
+
);
}
};
- const formatTags = () => {
- if (selectCustFollow?.tags) {
- try {
- const tags = JSON.parse(selectCustFollow?.tags);
- if (Array.isArray(tags)) {
- return (
- <>
- {tags.map((item) => {
- return (
- {
+ setDelGroupListShow(!delGroupListShow);
+ }}
+ >
+ 已解散的群
+ {delGroupListShow ?
+
+ {groupList.map((item) => {
+ if (item.state == 1) return null;
+ return (
+
+ {
+ 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' }}
+ >
+
+ );
+ })}
+ {item.name ? item.name[0] : '群'}
+
+
+
+ {item.name || '未定义群名'}
+
+ {groupStatus[item.status]}
+
- {item.group_name}：{item.tag_name}
-
- );
- })}
-
- );
- }
- } 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 群管理者：{arr.join('，')}
;
- }
- } catch (e) {
- return <>;
- }
- }
-
- return <>;
- }
-
return (
@@ -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' : '' }}
>
-
{item.name[0]}
+
+ {item.avatar ? (
+
+ ) : (
+ <>{item.name[0]}
+ )}
+
{item.name}
@@ -491,7 +600,22 @@ const ChatLogs: React.FC = () => {
>
{selectStaff ? (
<>
-
{selectStaff.name[0]}
+
+ {selectStaff.avatar ? (
+ 
+ ) : (
+ <>{selectStaff.name[0]}
+ )}
+
{selectStaff.name}
@@ -529,7 +653,7 @@ const ChatLogs: React.FC = () => {
{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' ? (
-
{
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}
+
)}
-
-
+
-
- {selectInnerStaff?.name[0]}
-
-
- {selectInnerStaff?.name}
- 账号：{selectInnerStaff?.name}
- 手机：{selectInnerStaff?.telephone}
- 职务：{selectInnerStaff?.position}
- {
{selectCustFollow?.name}
- {selectCustFollow?.gender == 1 ? (
-
- ) : (
-
- )}
+
{selectCustFollow?.description}
备注名称：{selectCustFollow?.remark}
- {formatTags()}
+ {formatTags(selectCustFollow?.tags)}
-
+
- 群创建者：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
+
+ );
+ })}
+ {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
+
+ 群主：{groupMembersObjRef.current[selectGroupRef.current?.owner]?.name}
+
+
+ {adminList(selectGroupRef.current?.admin_list, groupMembersObjRef.current)}
+
+
+ 创建时间：{selectGroupRef.current?.create_time}
+
+ 群公告：{selectGroupRef.current?.notice}
+
+ 群成员 • {groupMembersList.length}
- {adminList()}
- 创建时间：{selectGroupRef.current?.create_time}
- 群公告：{selectGroupRef.current?.notice}
- 群成员:
{groupMembersList.map((item) => {
+ if (item.group_members_type == '2' || item.state == 0) return null;
return (
{
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}
+
+
+ 微信：
+
+ ) : null}
+ {groupMembersList.map((item) => {
+ if (item.group_members_type == '1' || item.state == 0) return null;
+ return (
+
+
+ );
+ })}
+ {groupMembersCount(groupMembersList, 0) != 0 ? (
+
+ {item.avatar ? (
+
+ ) : item.name ? (
+ item.name[0]
+ ) : (
+ ''
+ )}
+
+
+ {item.name}
+
+
+ 已离群：
+
+ ) : null}
+ {groupMembersList.map((item) => {
+ if (item.state == 1) return null;
+ return (
+
+
-
+ {item.avatar ? (
+
+ ) : item.name ? (
+ item.name[0]
+ ) : (
+ ''
+ )}
+
+ {
})}
)}
-
+
{
} else {
return (
= (props) => {
+ const { record } = props;
+
+ const fomatStr = (val: any) => {
+ return val || '未设置';
+ };
+ return (
+ (0);
const [departmentsList, setDepartmentsList] = useState([]);
const [staffsData, setStaffsData] = useState({ count: 0, data: [] });
const [loadingL, setLoadingL] = useState(false);
const [loading, setLoading] = useState(false);
+ const [open, setOpen] = useState(false);
+ const [record, setRecord] = useState();
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 (
setSyncOpen('')}
+ centered
+ width={300}
+ >
+
+
+
{/* {
+
{
@@ -213,7 +274,7 @@ const DepartmentsList: React.FC = () => {
{
- 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 }}
>
搜索
+
+
{
rowKey={'user_id'}
loading={loading}
>
-
-
+ setOpen(false)} width={800}>
+
- {item.show_time ? {
chat={item}
>
) : (
-
);
diff --git a/src/pages/DepartmentsList/components/DepartmentMemberDetail.tsx b/src/pages/DepartmentsList/components/DepartmentMemberDetail.tsx
new file mode 100644
index 0000000..28e46db
--- /dev/null
+++ b/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
+
+ );
+};
diff --git a/src/pages/DepartmentsList/index.module.scss b/src/pages/DepartmentsList/index.module.scss
index fab244d..b16521e 100644
--- a/src/pages/DepartmentsList/index.module.scss
+++ b/src/pages/DepartmentsList/index.module.scss
@@ -40,3 +40,12 @@
display: inline-flex;
}
}
+
+
+.detailItem{
+ margin-bottom: 12px;
+ &> span{
+ color: #999;
+ display: inline-block;
+ }
+}
diff --git a/src/pages/DepartmentsList/index.tsx b/src/pages/DepartmentsList/index.tsx
index 40986e4..99cf50e 100644
--- a/src/pages/DepartmentsList/index.tsx
+++ b/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
+
+
+ {record?.avatar ? (
+
+
+ {record?.name[0]}
+
+ )}
+
+
+ {record?.qr_code ? (
+
+ {record?.name}
+
+ 别名：{fomatStr(record?.alias)}
+
+
+
+ 企业邮箱：
+ {fomatStr(record?.biz_mail)}
+
+
+ 手机：
+ {fomatStr(record?.mobile)}
+
+
+ 座机：
+ {fomatStr(record?.telephone)}
+
+
+ 邮箱：
+ {fomatStr(record?.email)}
+
+
+ 微信：
+ {record?.name}
+
+
+ 地址：
+ {fomatStr(record?.address)}
+
+
+ 英文名：
+ {fomatStr(record?.english_name)}
+
+
+
+ {/*
+ 部门：
+ {record?.dep_name?.join('，')}
+
+
+ 职务：
+ {record?.position}
+
+
+ 部门负责人：
+ {record?.isleader == 1 ? '是' : '否'}
+
+
+ 负责部门：
+ {record?.main_dep?.name}
+
+
+ 直接上级：
+ {/* {record?.telephone} */}
+
+
+ 微信插件：
+ {/* {record?.telephone} */}
+
+
+ 对外信息
+
+
+
+
+ 企业简称：
+
+
+ 视频号：
+
+
+
*/}
+
+ 职务：
+ {record?.position}
+
+ {
) : null}
+ {syncOpen == 'dep' ? '确定同步部门?' : '确定同步员工?'}
+