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

开发: 添加小屏幕css[少], 聊天记录投票. 客户中心修改, 工作台支持小屏

Browse Source
This commit is contained in:
zhengw
2023-04-21 14:53:54 +08:00
parent 2156976a8c
commit 5f4acf4317
20 changed files with 619 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.tsx
View File

@@ -58,7 +58,9 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
// actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />], // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
actionsRender: () => [], actionsRender: () => [],
avatarProps: { avatarProps: {
src: initialState?.currentUser?.avatar ? '/api/' + initialState?.currentUser?.avatar : AvatarSvg, src: initialState?.currentUser?.avatar
? '/api/' + initialState?.currentUser?.avatar
: AvatarSvg,
title: <AvatarName />, title: <AvatarName />,
render: (_, avatarChildren) => { render: (_, avatarChildren) => {
return <AvatarDropdown>{avatarChildren}</AvatarDropdown>; return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;

1
src/components/Footer/index.tsx
View File

@@ -6,6 +6,7 @@ const Footer: React.FC = () => {
<DefaultFooter <DefaultFooter
style={{ style={{
background: 'none', background: 'none',
paddingBottom: 8,
}} }}
copyright={`2021 - 2028 福州晨丰科技有限公司`} copyright={`2021 - 2028 福州晨丰科技有限公司`}
links={[ links={[

73
src/components/SearchBarPlugin/index.tsx
View File

@@ -1,16 +1,17 @@
import { getDevice } from '@/services/utils'; import { getDevice } from '@/services/utils';
import { Button, Drawer } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import styles from './index.module.scss';
interface IProps { interface IProps {
children: React.ReactNode; body: React.ReactNode;
footer: React.ReactNode;
} }
export const SearchBarPlugin: React.FC<IProps> = (props) => { export const SearchBarPlugin: React.FC<IProps> = (props) => {
// const [device, setDevice] = useState(window.innerWidth); // const [device, setDevice] = useState(window.innerWidth);
const isPhone = getDevice() === 'phone'; const isPhone = getDevice() === 'phone';
const [open, setOpen] = useState(false);
const [searchBarText, setSearchBarText] = useState('展开'); const [searchBarText, setSearchBarText] = useState('展开');
// useEffect(() => { // useEffect(() => {
// const handleResize = (e: any) => { // const handleResize = (e: any) => {
@@ -39,24 +40,60 @@ export const SearchBarPlugin: React.FC<IProps> = (props) => {
}; };
return ( return (
<div style={{ background: '#fff', padding: 16, paddingBottom: 0, borderRadius: 6 }}> <>
<div {isPhone ? (
className={styles.searchBarContent} <>
style={{ height: isPhone ? 76 : 'auto' }} <Drawer title="筛选条件" open={open} onClose={() => setOpen(false)}>
ref={searchBarContentRef} <div>{props.body}</div>
> <div
{props.children} style={{ paddingBottom: 16 }}
</div> onClick={() => {
<div className={styles.searchBar}> setOpen(false);
}}
>
{props.footer}
</div>
</Drawer>
<div
style={{
background: '#fff',
display: 'flex',
justifyContent: 'flex-end',
padding: '8px 0',
borderRadius: 6,
}}
>
<Button
type="default"
onClick={() => {
setOpen(true);
}}
>
筛选
</Button>
</div>
</>
) : (
<div
className="SearchBarPlugin"
style={{ background: '#fff', padding: 16, paddingBottom: 0, borderRadius: 6 }}
>
<div
// className={styles.searchBarContent}
// style={{ height: isPhone ? 76 : 'auto' }}
ref={searchBarContentRef}
>
{props.body}
</div>
<div style={{ background: '#fff', paddingBottom: 16 }}>{props.footer}</div>
{/* <div className={styles.searchBar}>
<div onClick={changeSearchbar}> <div onClick={changeSearchbar}>
<div style={{ display: 'inline-block', verticalAlign: 'middle' }}>{searchBarText}</div> <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>{searchBarText}</div>
{searchBarText == '展开' ? <DownOutlined /> : <UpOutlined />} {searchBarText == '展开' ? <DownOutlined /> : <UpOutlined />}
</div> </div>
</div> </div> */}
</div> </div>
)}
</>
); );
}; };
export const SearchBottonsCardPlugin: React.FC<IProps> = (props) => {
return <div style={{ background: '#fff', paddingBottom: 16 }}>{props.children}</div>;
};

10
src/global.less
View File

@@ -48,6 +48,10 @@ ol {
padding-right: 24px !important; padding-right: 24px !important;
} }
.ant-pro-global-footer-list {
margin-bottom: 0 !important;
}
input { input {
background-clip: text; background-clip: text;
-webkit-text-fill-color: #000; // 改变了字体颜色 -webkit-text-fill-color: #000; // 改变了字体颜色
@@ -85,4 +89,10 @@ input {
} }
} }
} }
.ant-pro-page-container-children-content,
.ant-page-header {
padding-left: 12px !important;
padding-right: 12px !important;
}
} }

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

@@ -43,6 +43,7 @@ export interface ICustFollow {
avatar: string; avatar: string;
gender: number; gender: number;
add_staff_tot?: number | undefined;
name: string; name: string;
staff_name?: string; staff_name?: string;
@@ -72,6 +73,7 @@ export interface IGroup {
owner: string; owner: string;
staff_name?: string; staff_name?: string;
state: number; state: number;
status: number; status: number;
sync_time: string; sync_time: string;
notice: string; notice: string;
@@ -99,6 +101,7 @@ export interface IChat {
action: string; action: string;
content: string; content: string;
msg_from: string; msg_from: string;
doc?: string;
msg_id: string; msg_id: string;
msg_time: string; msg_time: string;
msg_to_list: string; msg_to_list: string;

2
src/pages/ChatLogs/components/ChatCollect.tsx
View File

@@ -8,7 +8,7 @@ export const ChatCollect: React.FC<IChatItem> = (props) => {
<div> <div>
<div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}> <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
<div style={{ wordBreak: 'break-all' }}>群名：{msg.room_name}</div> <div style={{ wordBreak: 'break-all' }}>群名：{msg.room_name}</div>
<div style={{ wordBreak: 'break-all' }}>创建者：{msg.creator}</div> <div style={{ wordBreak: 'break-all' }}>群主：{msg.creator}</div>
<div style={{ wordBreak: 'break-all' }}>表名：{msg.title}</div> <div style={{ wordBreak: 'break-all' }}>表名：{msg.title}</div>
<div <div
style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }} style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}

73
src/pages/ChatLogs/components/ChatVote.tsx
View File

@@ -1,15 +1,80 @@
import { SignalFilled } from '@ant-design/icons';
import { Modal } from 'antd';
import { useEffect, useState } from 'react';
import { IChatItem } from '../ChatLogsType'; import { IChatItem } from '../ChatLogsType';
import styles from './index.module.scss';
export const ChatVote: React.FC<IChatItem> = (props) => { export const ChatVote: React.FC<IChatItem> = (props) => {
const votetype: any = { 101: '发起投票', 102: '参与投票' }; const votetype: any = { '101': '发起投票', '102': '参与投票' };
const [open, setOpen] = useState(false);
const [voteitem, setVoteitem] = useState([]);
useEffect(() => {
try {
const msg = JSON.parse(props.chat?.content as string);
setVoteitem(msg?.voteitem);
} catch (e) {}
}, [props.chat]);
function content() { function content() {
try {
const msg = JSON.parse(props.chat?.content as string);
return (
<>
<div
style={{ display: 'flex', color: '#000', flexDirection: 'column', cursor: 'pointer' }}
onClick={() => setOpen(true)}
>
<div style={{ wordBreak: 'break-all', fontWeight: 'bold' }}>{msg?.votetitle}</div>
<div style={{ wordBreak: 'break-all' }}>
{Array.isArray(msg?.voteitem)
? [0, 1, 2].map((item) => {
return msg?.voteitem[item] ? (
<div className={styles.voteitem}>{msg?.voteitem[item]}</div>
) : (
<></>
);
})
: null}
</div>
<div
style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}
>
<SignalFilled style={{ color: '#F0B40E' }} /> 投票 [
{votetype[msg?.votetype as string]}]
</div>
</div>
<Modal
open={open}
title={msg?.votetitle}
centered
onCancel={() => {
setOpen(false);
}}
footer={false}
>
<div style={{ maxHeight: '75vh', overflow: 'auto' }}>
{Array.isArray(voteitem)
? voteitem.map((item) => {
return (
<div key={item} className={styles.voteitem}>
{item}
</div>
);
})
: null}
</div>
</Modal>
</>
);
} catch (e) {}
return ( return (
<div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}> <div style={{ display: 'flex', color: '#000', flexDirection: 'column' }}>
<div style={{ wordBreak: 'break-all' }}>{props.chat?.votetitle}</div> <div style={{ wordBreak: 'break-all' }}>{props.chat?.content}</div>
<div style={{ wordBreak: 'break-all' }}>{props.chat?.voteitem}</div>
<div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}> <div style={{ borderTop: '1px solid #ddd', color: '#999', marginTop: 8, paddingTop: 8 }}>
投票 [{votetype[props.chat?.votetype as string]}] <SignalFilled style={{ color: '#F0B40E' }} /> 投票
</div> </div>
</div> </div>
); );

17
src/pages/ChatLogs/components/EmojiFormat.tsx
View File

@@ -7,13 +7,16 @@ type IProps = {
export const EmojiFormat: React.FC<IProps> = (props) => { export const EmojiFormat: React.FC<IProps> = (props) => {
const format = () => { const format = () => {
let txt = props.content; let txt = props.content;
emoji.forEach((item) => { if (txt.includes('[') && txt.includes(']')) {
const reg = new RegExp(`\\[${item}\\]`, 'g'); emoji.forEach((item) => {
txt = txt.replace( const reg = new RegExp(`\\[${item}\\]`, 'g');
reg, txt = txt.replace(
`<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`, reg,
); `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
}); );
});
}
return txt; return txt;
}; };

2
src/pages/ChatLogs/components/Svgs.tsx
View File

@@ -1,7 +1,7 @@
export const OwnerSvg = () => { export const OwnerSvg = () => {
return ( return (
<span <span
title="创建者" title="群主"
style={{ style={{
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',

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

@@ -42,6 +42,7 @@
justify-content: center; justify-content: center;
min-height: 40px; min-height: 40px;
padding: 12px; padding: 12px;
white-space: pre-wrap;
word-break: break-all; word-break: break-all;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
@@ -153,3 +154,20 @@
background-color: #8c8c8c; background-color: #8c8c8c;
border-radius: 40px; border-radius: 40px;
} }
.voteitem {
position: relative;
padding-left: 16px;
&::before {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 6px;
height: 6px;
border: 2px solid #ccc;
border-radius: 8px;
transform: translateY(-50%);
content: '';
}
}

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

@@ -17,11 +17,14 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
height: 65px; height: 65px;
margin-bottom: 12px; margin-bottom: 12px;
padding: 0 12px; padding: 0 12px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
cursor: pointer; cursor: pointer;
&:first-child {
margin-top: 1px;
}
&:hover { &:hover {
background-color: #bae0ff; background-color: #bae0ff;
} }
@@ -80,7 +83,9 @@
height: 34px; height: 34px;
background-color: #fff; background-color: #fff;
transition: top 0.3s, height 0.3s; transition: top 0.3s, height 0.3s;
.chatB {
margin-top: 0;
}
&.delFollowListShow { &.delFollowListShow {
top: 164px; top: 164px;
height: calc(100% - 164px); height: calc(100% - 164px);

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

@@ -201,7 +201,7 @@ const ChatLogs: React.FC = () => {
other.push(item); other.push(item);
} }
}); });
// 对群员 创建者 > 管理员 > 普通成员 排序 // 对群员 群主 > 管理员 > 普通成员 排序
setGroupMembersList([...owner, ...admin_list, ...other]); setGroupMembersList([...owner, ...admin_list, ...other]);
page(1); page(1);
} }
@@ -242,8 +242,8 @@ const ChatLogs: React.FC = () => {
// }); // });
setStaffsList(res.data); setStaffsList(res.data);
setInnerStaffsList(res.data); setInnerStaffsList(res.data);
getCustFollowsList(); // getCustFollowsList();
getGroupList(); // getGroupList();
} }
} }
}); });
@@ -566,8 +566,11 @@ const ChatLogs: React.FC = () => {
setSelectStaff({ ...item }); setSelectStaff({ ...item });
selectStaffRef.current = { ...item }; selectStaffRef.current = { ...item };
setFlolowsBox(false); setFlolowsBox(false);
getCustFollowsList(); if (tabKey == '1') {
getGroupList(); getCustFollowsList();
} else if (tabKey == '2') {
getGroupList();
}
}} }}
style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }} style={{ background: selectStaff?.user_id == item.user_id ? '#bae0ff' : '' }}
> >
@@ -651,6 +654,11 @@ const ChatLogs: React.FC = () => {
tabBarGutter={12} tabBarGutter={12}
onChange={(val) => { onChange={(val) => {
setTabKey(val); setTabKey(val);
if (val == '1') {
getCustFollowsList();
} else if (val == '2') {
getGroupList();
}
}} }}
/> />
<div className={styles.chatBBox}>{tabContent()}</div> <div className={styles.chatBBox}>{tabContent()}</div>
@@ -724,7 +732,7 @@ const ChatLogs: React.FC = () => {
{groupMembersList.map((item) => { {groupMembersList.map((item) => {
return item.group_members_type == '2' || item.state == 0 return item.group_members_type == '2' || item.state == 0
? null ? null
: groupMembersListItem(item, selectGroupRef.current); : groupMembersListItem(item, selectGroupRef.current as IGroup);
})} })}
{groupMembersCount2(groupMembersList, '2', 1) != 0 ? ( {groupMembersCount2(groupMembersList, '2', 1) != 0 ? (
<div <div
@@ -742,7 +750,7 @@ const ChatLogs: React.FC = () => {
{groupMembersList.map((item) => { {groupMembersList.map((item) => {
return item.group_members_type == '1' || item.state == 0 return item.group_members_type == '1' || item.state == 0
? null ? null
: groupMembersListItem(item, selectGroupRef.current); : groupMembersListItem(item, selectGroupRef.current as IGroup);
})} })}
{groupMembersCount(groupMembersList, 0) != 0 ? ( {groupMembersCount(groupMembersList, 0) != 0 ? (
<div <div
@@ -760,7 +768,7 @@ const ChatLogs: React.FC = () => {
{groupMembersList.map((item) => { {groupMembersList.map((item) => {
return item.state == 1 return item.state == 1
? null ? null
: groupMembersListItem(item, selectGroupRef.current); : groupMembersListItem(item, selectGroupRef.current as IGroup);
})} })}
</div> </div>
)} )}

56
src/pages/CustomList/components/CustDetailContent.tsx
View File

@@ -1,8 +1,11 @@
import { ICustFollow } from '@/pages/ChatLogs/ChatLogsType'; import { ICustFollow } from '@/pages/ChatLogs/ChatLogsType';
import { formatTags } from '@/pages/ChatLogs/ChatUtils'; import { formatTags } from '@/pages/ChatLogs/ChatUtils';
import { Gender } from '@/pages/ChatLogs/components/Gender'; import { Gender } from '@/pages/ChatLogs/components/Gender';
import { post } from '@/services/ajax';
import { AddWay, CustType } from '@/services/config'; import { AddWay, CustType } from '@/services/config';
import React from 'react'; import { Spin, Steps } from 'antd';
import { stringify } from 'qs';
import React, { useEffect, useState } from 'react';
import styles from './index.module.scss'; import styles from './index.module.scss';
type IProps = { type IProps = {
@@ -16,6 +19,39 @@ type IProps = {
*/ */
export const CustDetailContent: React.FC<IProps> = (props) => { export const CustDetailContent: React.FC<IProps> = (props) => {
const { record } = props; const { record } = props;
const [timeLine, setTimeLine] = useState([]);
const [loading, setLoading] = useState(false);
const getList = () => {
setLoading(true);
post({
url: '/CustFollows/CustPath',
data: stringify({
cust_id: record.cust_id,
}),
}).then((res) => {
setLoading(false);
if (res.err_code == 0) {
if (Array.isArray(res.data)) {
let arr: any = [];
res.data.forEach((item: any) => {
arr.push({
title: item.staff_name + ' 添加了好友',
description: item.create_time,
});
});
setTimeLine(arr);
}
}
});
};
useEffect(() => {
if (props.record.cust_id) {
getList();
}
}, [props.record]);
return ( return (
<div> <div>
<div <div
@@ -45,7 +81,7 @@ export const CustDetailContent: React.FC<IProps> = (props) => {
<div>添加时间：{record?.create_time}</div> <div>添加时间：{record?.create_time}</div>
<div <div
style={{ style={{
paddingTop: 12, paddingTop: 24,
marginBottom: 12, marginBottom: 12,
paddingBottom: 12, paddingBottom: 12,
borderBottom: '1px solid #ddd', borderBottom: '1px solid #ddd',
@@ -56,6 +92,22 @@ export const CustDetailContent: React.FC<IProps> = (props) => {
标签 标签
</div> </div>
{formatTags(record?.tags)} {formatTags(record?.tags)}
<div
style={{
paddingTop: 24,
marginBottom: 12,
paddingBottom: 12,
borderBottom: '1px solid #ddd',
fontSize: 16,
fontWeight: 'bold',
}}
>
客户轨迹
</div>
<Spin spinning={loading}>
<Steps progressDot items={timeLine} direction="vertical" current={timeLine.length} />
</Spin>
</div> </div>
); );
}; };

225
src/pages/CustomList/index.tsx
View File

@@ -1,4 +1,4 @@
import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin'; import { SearchBarPlugin } from '@/components/SearchBarPlugin';
import { post } from '@/services/ajax'; import { post } from '@/services/ajax';
import { AddWay, CustType } from '@/services/config'; import { AddWay, CustType } from '@/services/config';
import { PageContainer } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
@@ -79,110 +79,113 @@ const CustomList: React.FC = () => {
return ( return (
<PageContainer> <PageContainer>
<div style={{ flexGrow: 1, minWidth: 0 }}> <div style={{ flexGrow: 1, minWidth: 0 }}>
<SearchBarPlugin> <SearchBarPlugin
<Form> body={
<Row gutter={{ xs: 0, sm: 16 }}> <Form>
<Col xs={24} sm={12} lg={8} xxl={6}> <Row gutter={{ xs: 0, sm: 16 }}>
<Form.Item label="客户名称"> <Col xs={24} sm={12} lg={8} xxl={6}>
<Input <Form.Item label="客户名称">
placeholder="请输入客户名称" <Input
onChange={(e) => { placeholder="请输入客户名称"
param.name = e.target.value.trim(); onChange={(e) => {
}} param.name = e.target.value.trim();
allowClear }}
onPressEnter={() => page(1)} allowClear
/> onPressEnter={() => page(1)}
</Form.Item> />
</Col> </Form.Item>
<Col xs={24} sm={12} lg={8} xxl={6}> </Col>
<Form.Item label={<span>客户类型</span>}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Select <Form.Item label={<span>客户类型</span>}>
defaultValue={param.type} <Select
style={{ width: '100%' }} defaultValue={param.type}
onChange={(val) => { style={{ width: '100%' }}
param.type = val; onChange={(val) => {
}} param.type = val;
> }}
<Select.Option value="">全部</Select.Option> >
{Object.keys(CustType).map((key) => { <Select.Option value="">全部</Select.Option>
return ( {Object.keys(CustType).map((key) => {
<Select.Option key={key} value={key}> return (
{CustType[key]} <Select.Option key={key} value={key}>
</Select.Option> {CustType[key]}
); </Select.Option>
})} );
</Select> })}
</Form.Item> </Select>
</Col> </Form.Item>
<Col xs={24} sm={12} lg={8} xxl={6}> </Col>
<Form.Item label="跟进员工"> <Col xs={24} sm={12} lg={8} xxl={6}>
<Select <Form.Item label="跟进员工">
defaultValue={param.user_id} <Select
style={{ width: '100%' }} defaultValue={param.user_id}
showSearch style={{ width: '100%' }}
onChange={(_val, option: any) => { showSearch
param.user_id = option?.key; onChange={(_val, option: any) => {
}} param.user_id = option?.key;
> }}
<Select.Option value="">全部</Select.Option> >
{staffsList.map((item) => { <Select.Option value="">全部</Select.Option>
return ( {staffsList.map((item) => {
<Select.Option key={item.user_id} value={item.name}> return (
{item.name} <Select.Option key={item.user_id} value={item.name}>
</Select.Option> {item.name}
); </Select.Option>
})} );
</Select> })}
</Form.Item> </Select>
</Col> </Form.Item>
<Col xs={24} sm={12} lg={8} xxl={6}> </Col>
<Form.Item label={<span>添加方式</span>}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Select <Form.Item label={<span>添加方式</span>}>
defaultValue={param.add_way} <Select
style={{ width: '100%' }} defaultValue={param.add_way}
onChange={(val) => { style={{ width: '100%' }}
param.add_way = val; onChange={(val) => {
}} param.add_way = val;
> }}
<Select.Option value="">全部</Select.Option> >
{Object.keys(AddWay).map((key) => { <Select.Option value="">全部</Select.Option>
return ( {Object.keys(AddWay).map((key) => {
<Select.Option key={key} value={key}> return (
{AddWay[key]} <Select.Option key={key} value={key}>
</Select.Option> {AddWay[key]}
); </Select.Option>
})} );
</Select> })}
</Form.Item> </Select>
</Col> </Form.Item>
<Col xs={24} sm={12} lg={8} xxl={6}> </Col>
<Form.Item label={<span>添加日期</span>}> <Col xs={24} sm={12} lg={8} xxl={6}>
<DatePicker.RangePicker <Form.Item label={<span>添加日期</span>}>
style={{ width: '100%' }} <DatePicker.RangePicker
onChange={(dates, dateStrings) => { style={{ width: '100%' }}
// console.log(dateStrings); onChange={(dates, dateStrings) => {
param.create_timeL = dateStrings[0]; // console.log(dateStrings);
param.create_timeU = dateStrings[1]; param.create_timeL = dateStrings[0];
}} param.create_timeU = dateStrings[1];
/> }}
</Form.Item> />
</Col> </Form.Item>
</Col>
</Row>
</Form>
}
footer={
<Row justify={'center'}>
<Button
type="primary"
onClick={() => {
page(1);
}}
style={{ marginRight: 12 }}
>
搜索
</Button>
</Row> </Row>
</Form> }
</SearchBarPlugin> />
<SearchBottonsCardPlugin>
<Row justify={'center'}>
<Button
type="primary"
onClick={() => {
page(1);
}}
style={{ marginRight: 12 }}
>
搜索
</Button>
</Row>
</SearchBottonsCardPlugin>
<Table <Table
tableLayout="fixed" tableLayout="fixed"
size="middle" size="middle"
@@ -194,6 +197,20 @@ const CustomList: React.FC = () => {
return `${record.cust_id}_${record.user_id}`; return `${record.cust_id}_${record.user_id}`;
}} }}
loading={loading} loading={loading}
onRow={(record: ICustFollow) => {
if (
record?.add_staff_tot &&
!isNaN(record?.add_staff_tot) &&
Number(record?.add_staff_tot) > 1
) {
return {
style: {
background: '#fcffe6',
},
};
}
return {};
}}
> >
<Table.Column <Table.Column
title="客户" title="客户"

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

@@ -1,4 +1,4 @@
import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin'; import { SearchBarPlugin } from '@/components/SearchBarPlugin';
import { post } from '@/services/ajax'; import { post } from '@/services/ajax';
import { PageContainer } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
import { import {
@@ -247,78 +247,81 @@ const DepartmentsList: React.FC = () => {
</Form> </Form>
</Modal> */} </Modal> */}
<div style={{ flexGrow: 1, minWidth: 0 }}> <div style={{ flexGrow: 1, minWidth: 0 }}>
<SearchBarPlugin> <SearchBarPlugin
<Form autoComplete="off"> body={
<Row gutter={{ xs: 0, sm: 16 }}> <Form autoComplete="off">
<Col xs={24} lg={12} xl={8}> <Row gutter={{ xs: 0, sm: 16 }}>
<Form.Item label={<span style={{ textIndent: '1em' }}>姓名</span>}> <Col xs={24} lg={12} xl={8}>
<Input <Form.Item label={<span style={{ textIndent: '1em' }}>姓名</span>}>
autoComplete="off" <Input
onChange={(e) => { autoComplete="off"
param.name = e.target.value.trim(); onChange={(e) => {
}} param.name = e.target.value.trim();
allowClear }}
onPressEnter={() => page(1)} allowClear
/> onPressEnter={() => page(1)}
</Form.Item> />
</Col> </Form.Item>
<Col xs={24} lg={12} xl={8}> </Col>
<Form.Item label={<span style={{ textIndent: '1em' }}>职务</span>}> <Col xs={24} lg={12} xl={8}>
<Input <Form.Item label={<span style={{ textIndent: '1em' }}>职务</span>}>
autoComplete="off" <Input
onChange={(e) => { autoComplete="off"
param.position = e.target.value.trim(); onChange={(e) => {
}} param.position = e.target.value.trim();
allowClear }}
onPressEnter={() => page(1)} allowClear
/> onPressEnter={() => page(1)}
</Form.Item> />
</Col> </Form.Item>
<Col xs={24} lg={12} xl={8}> </Col>
<Form.Item label="手机号"> <Col xs={24} lg={12} xl={8}>
<Input <Form.Item label="手机号">
autoComplete="off" <Input
onChange={(e) => { autoComplete="off"
param.mobile = e.target.value.trim(); onChange={(e) => {
}} param.mobile = e.target.value.trim();
allowClear }}
onPressEnter={() => page(1)} allowClear
/> onPressEnter={() => page(1)}
</Form.Item> />
</Col> </Form.Item>
</Col>
</Row>
</Form>
}
footer={
<Row justify={'center'}>
<Button
type="primary"
onClick={() => {
page(1);
}}
style={{ marginRight: 12 }}
>
搜索
</Button>
<Button
type="primary"
onClick={() => {
syncDepartments();
}}
style={{ marginRight: 12 }}
>
同步部门
</Button>
<Button
type="primary"
onClick={() => {
syncStaffs();
}}
>
同步员工
</Button>
</Row> </Row>
</Form> }
</SearchBarPlugin> ></SearchBarPlugin>
<SearchBottonsCardPlugin>
<Row justify={'center'}>
<Button
type="primary"
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 <Table
tableLayout="fixed" tableLayout="fixed"
size="middle" size="middle"

37
src/pages/GroupList/components/GroupDetailContent.tsx
View File

@@ -11,6 +11,7 @@ import {
} from '@/pages/ChatLogs/ChatUtils'; } from '@/pages/ChatLogs/ChatUtils';
import { Spin } from 'antd'; import { Spin } from 'antd';
import { stringify } from 'qs'; import { stringify } from 'qs';
import styles from './index.mudule.scss';
type Iprops = { type Iprops = {
record: IGroup; record: IGroup;
@@ -51,7 +52,7 @@ export const GroupDetailContent: React.FC<Iprops> = (props) => {
other.push(item); other.push(item);
} }
}); });
// 对群员 创建者 > 管理员 > 普通成员 排序 // 对群员 群主 > 管理员 > 普通成员 排序
setGroupMembersList([...owner, ...admin_list, ...other]); setGroupMembersList([...owner, ...admin_list, ...other]);
} }
} }
@@ -62,15 +63,33 @@ export const GroupDetailContent: React.FC<Iprops> = (props) => {
<Spin spinning={loading} style={{ minHeight: 400, display: 'block' }}> <Spin spinning={loading} style={{ minHeight: 400, display: 'block' }}>
{groupMembersList.length ? ( {groupMembersList.length ? (
<div> <div>
<div style={{ marginBottom: 8, textIndent: '2em' }}> <div className={styles.groupMsgBox}>
群主： <div className={styles.groupMsg}>
{groupMembersObjRef.current[record?.owner as string]?.name} <div style={{ marginBottom: 8, textIndent: '2em' }}>
群主：
{groupMembersObjRef.current[record?.owner as string]?.name}
</div>
<div style={{ marginBottom: 8 }}>
{adminList(record?.admin_list, groupMembersObjRef.current)}
</div>
<div style={{ marginBottom: 8 }}>创建时间：{record?.create_time}</div>
</div>
<div className={styles.notice}>
<div style={{ textIndent: '1em' }}>
<div
style={{
fontWeight: 'bold',
borderBlockEnd: '1px solid #eee',
lineHeight: '34px',
}}
>
群公告
</div>
<div style={{ paddingTop: 4, paddingBottom: 4 }}>{record?.notice || '未设置'}</div>
</div>
</div>
</div> </div>
<div style={{ marginBottom: 8 }}>
{adminList(record?.admin_list, groupMembersObjRef.current)}
</div>
<div style={{ marginBottom: 8 }}>创建时间：{record?.create_time}</div>
<div style={{ textIndent: '1em' }}>群公告：{record?.notice}</div>
<div <div
style={{ style={{
fontWeight: 'bold', fontWeight: 'bold',

15
src/pages/GroupList/components/index.mudule.scss Normal file
View File

@@ -0,0 +1,15 @@
.groupMsgBox {
display: flex;
flex-wrap: wrap;
min-height: 100px;
}
.groupMsg {
flex: 1;
}
.notice {
width: 240px;
border: 1px solid #ddd;
border-radius: 6px;
}

185
src/pages/GroupList/index.tsx
View File

@@ -1,4 +1,4 @@
import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin'; import { SearchBarPlugin } from '@/components/SearchBarPlugin';
import { post } from '@/services/ajax'; import { post } from '@/services/ajax';
import { groupStatus } from '@/services/config'; import { groupStatus } from '@/services/config';
import { PageContainer } from '@ant-design/pro-components'; import { PageContainer } from '@ant-design/pro-components';
@@ -52,97 +52,100 @@ const GroupList: React.FC = () => {
return ( return (
<PageContainer> <PageContainer>
<div style={{ flexGrow: 1, minWidth: 0 }}> <div style={{ flexGrow: 1, minWidth: 0 }}>
<SearchBarPlugin> <SearchBarPlugin
<Form> body={
<Row gutter={{ xs: 0, sm: 16 }}> <Form>
<Col xs={24} sm={12} lg={8} xxl={6}> <Row gutter={{ xs: 0, sm: 16 }}>
<Form.Item label={<span style={{ textIndent: '2em' }}>群名</span>}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Input <Form.Item label={<span style={{ textIndent: '2em' }}>群名</span>}>
placeholder="请输入群名" <Input
onChange={(e) => { placeholder="请输入群名"
param.name = e.target.value.trim(); onChange={(e) => {
}} param.name = e.target.value.trim();
allowClear }}
onPressEnter={() => page(1)} allowClear
/> onPressEnter={() => page(1)}
</Form.Item> />
</Col> </Form.Item>
<Col xs={24} sm={12} lg={8} xxl={6}> </Col>
<Form.Item label={<span style={{ textIndent: '1em' }}>创建者</span>}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Input <Form.Item label={<span style={{ textIndent: '2em' }}>群主</span>}>
placeholder="请输入创建者" <Input
onChange={(e) => { placeholder="请输入群主"
param.owner = e.target.value.trim(); onChange={(e) => {
}} param.owner = e.target.value.trim();
allowClear }}
onPressEnter={() => page(1)} allowClear
/> onPressEnter={() => page(1)}
</Form.Item> />
</Col> </Form.Item>
<Col xs={24} sm={12} lg={8} xxl={6}> </Col>
<Form.Item label={<span style={{ textIndent: '2em' }}>状态</span>}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Select <Form.Item label={<span style={{ textIndent: '2em' }}>状态</span>}>
defaultValue={param.status} <Select
style={{ width: '100%' }} defaultValue={param.status}
onChange={(val) => { style={{ width: '100%' }}
param.status = val; onChange={(val) => {
}} param.status = val;
> }}
<Select.Option value="">全部</Select.Option> >
{Object.keys(groupStatus).map((key) => { <Select.Option value="">全部</Select.Option>
return ( {Object.keys(groupStatus).map((key) => {
<Select.Option key={key} value={key}> return (
{groupStatus[key]} <Select.Option key={key} value={key}>
</Select.Option> {groupStatus[key]}
); </Select.Option>
})} );
</Select> })}
</Form.Item> </Select>
</Col> </Form.Item>
</Col>
<Col xs={24} sm={12} lg={8} xxl={6}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Form.Item label={<span>是否解散</span>}> <Form.Item label={<span>是否解散</span>}>
<Select <Select
defaultValue={param.state} defaultValue={param.state}
style={{ width: '100%' }} style={{ width: '100%' }}
onChange={(val) => { onChange={(val) => {
param.state = val; param.state = val;
}} }}
> >
<Select.Option value="">全部</Select.Option> <Select.Option value="">全部</Select.Option>
<Select.Option value="1">正常</Select.Option> <Select.Option value="1">正常</Select.Option>
<Select.Option value="0">已解散</Select.Option> <Select.Option value="0">已解散</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
<Col xs={24} sm={12} lg={8} xxl={6}> <Col xs={24} sm={12} lg={8} xxl={6}>
<Form.Item label={<span>创建时间</span>}> <Form.Item label={<span>创建时间</span>}>
<DatePicker.RangePicker <DatePicker.RangePicker
style={{ width: '100%' }} style={{ width: '100%' }}
onChange={(dates, dateStrings) => { onChange={(dates, dateStrings) => {
// console.log(dateStrings); // console.log(dateStrings);
param.create_timeL = dateStrings[0]; param.create_timeL = dateStrings[0];
param.create_timeU = dateStrings[1]; param.create_timeU = dateStrings[1];
}} }}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
</Row>
</Form>
}
footer={
<Row justify={'center'}>
<Button
type="primary"
onClick={() => {
page(1);
}}
style={{ marginRight: 12 }}
>
搜索
</Button>
</Row> </Row>
</Form> }
</SearchBarPlugin> />
<SearchBottonsCardPlugin>
<Row justify={'center'}>
<Button
type="primary"
onClick={() => {
page(1);
}}
style={{ marginRight: 12 }}
>
搜索
</Button>
</Row>
</SearchBottonsCardPlugin>
<Table <Table
tableLayout="fixed" tableLayout="fixed"
size="middle" size="middle"
@@ -192,7 +195,7 @@ const GroupList: React.FC = () => {
}} }}
/> />
<Table.Column <Table.Column
title="创建者" title="群主"
width={120} width={120}
render={(v, r: IGroup) => { render={(v, r: IGroup) => {
return <>{r?.staff_name}</>; return <>{r?.staff_name}</>;

38
src/pages/Workbench/index.module.scss
View File

@@ -1,9 +1,17 @@
.dataSumBox {
display: flex;
}
.dataSum { .dataSum {
margin-bottom: 24px; margin-bottom: 24px;
padding: 24px; padding: 24px;
color: #000; color: #000;
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
&:last-child {
margin-bottom: 12px;
}
} }
.dataItem { .dataItem {
@@ -20,6 +28,7 @@
.dataIconBox { .dataIconBox {
display: flex; display: flex;
flex-shrink: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 64px; width: 64px;
@@ -35,8 +44,8 @@
} }
.dataCount { .dataCount {
font-size: 26px;
font-weight: 500; font-weight: 500;
font-size: 26px;
} }
.dataCardBox { .dataCardBox {
@@ -51,3 +60,30 @@
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 12px; border-radius: 12px;
} }
@media only screen and (max-width: 768px) {
.dataSumBox,
.dataCardBox {
flex-direction: column;
}
.dataItem {
display: flex;
width: 100%;
padding-bottom: 12px;
border-right: none;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
.dataCard {
margin-bottom: 12px;
}
.dataSum {
margin-bottom: 16px;
}
}

2
src/pages/Workbench/index.tsx
View File

@@ -99,7 +99,7 @@ const Workbench: React.FC = () => {
<span style={{ fontSize: 18 }}>数据总览</span> <span style={{ fontSize: 18 }}>数据总览</span>
{/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */} {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
</div> </div>
<div style={{ display: 'flex' }}> <div className={styles.dataSumBox}>
<DataSumItemCard <DataSumItemCard
title="客户数量" title="客户数量"
content="全部客户数量(含重复)" content="全部客户数量(含重复)"