/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-16 14:54:34
|
* @LastEditTime: 2022-04-21 09:56:01
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 客户管理
|
*/
|
import React, { Component } from 'react';
|
import PageHead from '../../../components/PageHead';
|
import TableView from '../../../components/common/TableView';
|
import SearchFormView from '../../../components/common/SearchFormView';
|
import Page from '../../../components/PageRouterView';
|
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
|
import { createHashHistory } from 'history';
|
import { Tag, Card, Button, Popconfirm, Dropdown, Menu, Typography } from 'antd';
|
import * as $$ from '../../../utils/utility';
|
import './index.less';
|
import moment from 'moment';
|
const history = createHashHistory();
|
|
// 查询列表 版本
|
function listQueryRsVersion(name) {
|
return $$.ax.request({ url: 'v1/rsVersion/listQuery', type: 'get', data: { name }, service: 'oper' });
|
}
|
|
// 查询列表 增强包
|
function listQueryRsMeal(name) {
|
return $$.ax.request({ url: 'v1/rsMeal/listQuery', type: 'get', data: { name }, service: 'oper' });
|
}
|
// 停用/启用客户
|
function removeByIdSeCustom(ids, status) {
|
return $$.ax.request({ url: 'v1/seCustom/removeByIds', type: 'get', data: { ids, status }, service: 'oper' });
|
}
|
class Customer extends Component {
|
constructor(props) {
|
super(props);
|
this.config = {};
|
let customer = JSON.parse(window.localStorage.getItem('customer'));
|
this.state = {
|
url: '',
|
id: '',
|
formData: (customer && customer.formData) || {
|
__key: Date.now(),
|
page: 1,
|
size: 10,
|
},
|
// 1.列表 2.编辑
|
editing: '1',
|
//版本管理select
|
versionList: [],
|
//增强包管理select
|
mealList: [],
|
};
|
}
|
|
//新增客户
|
addOnClick = () => {
|
// <Navigate to="/dashboard" replace={true} />;
|
// this.setState({ editing: '2' });
|
// const navigate = useNavigate();
|
// navigate('/operation/customer/Info', {});
|
|
this.setState({ url: '/operation/customer/Info/new/1/新增客户' });
|
};
|
// 编辑
|
EditModal = (item) => {
|
this.setState({ url: `/operation/customer/Info/${item.id}/${2}/${item.trueName}` });
|
};
|
// 详情
|
openDetail = (item) => {
|
this.setState({ url: `/operation/customer/detail/${item.id}/${item.trueName}` });
|
};
|
|
//新增版本
|
AddVersion = (item) => {
|
console.log('item', item);
|
this.setState({ url: `/operation/customer/addVersion/${item.id}/${item.trueName}/${item.verId}` });
|
};
|
|
//新增增强包
|
AddMeal = (item) => {
|
this.setState({ url: `/operation/customer/addMeal/${item.id}/${item.trueName}/${item.mealIds}` });
|
};
|
|
//新增收款记录
|
AddPayee = (item) => {
|
this.setState({ url: `/operation/customer/addPayee/${item.id}/${item.trueName}` });
|
};
|
|
//停用
|
stopUse = async (item, status) => {
|
const res = await removeByIdSeCustom(item.id, status);
|
|
if (res.type) {
|
this.setState({ key: new Date().getTime() });
|
}
|
};
|
|
componentDidMount = async () => {
|
const versionList = await listQueryRsVersion();
|
const mealList = await listQueryRsMeal();
|
this.setState({ versionList: versionList.data, mealList: mealList.data, key: new Date().getTime() });
|
};
|
|
//用于显示到期时间剩余天数或已过期等状态
|
timeChange(newDate) {
|
var value = '';
|
switch (true) {
|
case newDate >= 30:
|
value = <Tag color="green">{newDate}天后到期</Tag>;
|
break;
|
case newDate < 30 && newDate >= 10:
|
value = <Tag color="lime">{newDate}天后到期</Tag>;
|
break;
|
case newDate < 10 && newDate > 0:
|
value = <Tag color="orange">{newDate}天后到期</Tag>;
|
break;
|
case newDate == 0:
|
value = <Tag color="red">最后一天</Tag>;
|
break;
|
case newDate < 0:
|
value = <Tag color="red">已过期{Math.abs(newDate)}天</Tag>;
|
break;
|
default:
|
value = '';
|
break;
|
}
|
return value;
|
}
|
|
columns = () => {
|
return [
|
{
|
title: '客户名称',
|
dataIndex: 'trueName',
|
},
|
{
|
title: '管理账号',
|
dataIndex: 'acc',
|
},
|
{
|
title: '负责人',
|
dataIndex: 'dutyName',
|
render: (cur, item, index) => {
|
return item.dutyMobile ? <span>{item.dutyName + '/' + item.dutyMobile}</span> : <span>{item.dutyName}</span>;
|
},
|
},
|
{
|
title: '版本名称',
|
dataIndex: 'verName',
|
},
|
{
|
title: '增强包',
|
width: '20%',
|
dataIndex: 'mealNames',
|
render: (cur, item, index) => {
|
return cur && cur.split(',').length > 0 ? (
|
<span>
|
{cur.split(',').map((i, idx) => (
|
<Tag>{i}</Tag>
|
))}
|
</span>
|
) : (
|
<span>{''}</span>
|
);
|
},
|
},
|
{
|
title: '到期时间',
|
dataIndex: 'expireTime',
|
render: (cur, item, index) => {
|
return (
|
<span>
|
{cur ? (
|
<span>
|
{moment(cur).format('YYYY-MM-DD')}
|
{this.timeChange(moment(cur).diff(new Date(), 'days'))}
|
</span>
|
) : (
|
'暂无'
|
)}
|
</span>
|
);
|
},
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 50,
|
fixed: 'right',
|
render: (text, record, index) => <span style={{ color: text === '99' ? '#BFBFBF' : '#52C41A' }}>{text === '99' ? '停用' : '正常'}</span>,
|
},
|
{
|
title: '操作',
|
dataIndex: 'options',
|
render: (value, item) => {
|
return item.status == '99' ? (
|
<React.Fragment>
|
<Typography.Link
|
style={{ paddingRight: '10px' }}
|
onClick={() => {
|
this.openDetail(item);
|
}}
|
>
|
查看
|
</Typography.Link>
|
<Popconfirm title="确定启用?" onConfirm={() => this.stopUse(item, '1')}>
|
<Typography.Link style={{ paddingRight: '10px', color: '#20c318' }}>启用</Typography.Link>
|
</Popconfirm>
|
<Typography.Link
|
style={{ paddingRight: '10px' }}
|
onClick={() => {
|
this.EditModal(item);
|
}}
|
>
|
修改客户
|
</Typography.Link>
|
{/* <Divider type="vertical" /> */}
|
<Dropdown
|
overlay={
|
<Menu>
|
<Menu.Item>
|
<Typography.Link onClick={() => this.AddVersion(item)} style={{ marginRight: 8, color: '#000' }}>
|
订购版本
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Typography.Link onClick={() => this.AddMeal(item)} style={{ marginRight: 8, color: '#000' }}>
|
订购增强包
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Typography.Link onClick={() => this.AddPayee(item)} style={{ marginRight: 8, color: '#000' }}>
|
新增收款记录
|
</Typography.Link>
|
</Menu.Item>
|
</Menu>
|
}
|
placement="bottomRight"
|
arrow
|
>
|
<Typography.Link style={{ marginRight: 8 }}>
|
<EllipsisOutlined style={{ fontSize: '16px' }} />
|
</Typography.Link>
|
</Dropdown>
|
</React.Fragment>
|
) : (
|
<React.Fragment>
|
<Typography.Link
|
style={{ paddingRight: '10px' }}
|
onClick={() => {
|
this.openDetail(item);
|
}}
|
>
|
查看
|
</Typography.Link>
|
{/* <Divider type="vertical" /> */}
|
<Popconfirm title="确定停用?" onConfirm={() => this.stopUse(item, '99')}>
|
<Typography.Link style={{ paddingRight: '10px' }}>停用</Typography.Link>
|
</Popconfirm>
|
{/* <Divider type="vertical" /> */}
|
<Typography.Link
|
style={{ paddingRight: '10px' }}
|
onClick={() => {
|
this.EditModal(item);
|
}}
|
>
|
修改客户
|
</Typography.Link>
|
{/* <Divider type="vertical" /> */}
|
<Dropdown
|
overlay={
|
<Menu>
|
<Menu.Item>
|
<Typography.Link onClick={() => this.AddVersion(item)} style={{ marginRight: 8, color: '#000' }}>
|
订购版本
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Typography.Link onClick={() => this.AddMeal(item)} style={{ marginRight: 8, color: '#000' }}>
|
订购增强包
|
</Typography.Link>
|
</Menu.Item>
|
<Menu.Item>
|
<Typography.Link onClick={() => this.AddPayee(item)} style={{ marginRight: 8, color: '#000' }}>
|
新增收款记录
|
</Typography.Link>
|
</Menu.Item>
|
</Menu>
|
}
|
placement="bottomRight"
|
arrow
|
>
|
<Typography.Link style={{ marginRight: 8 }}>
|
<EllipsisOutlined style={{ fontSize: '16px' }} />
|
</Typography.Link>
|
</Dropdown>
|
</React.Fragment>
|
);
|
},
|
},
|
];
|
};
|
|
// 表单列表数据
|
setFormData = (data) => {
|
let customer = JSON.parse(window.localStorage.getItem('customer'));
|
customer = { formData: data };
|
window.localStorage.setItem('customer', JSON.stringify(customer));
|
this.setState({
|
key: new Date().getTime(),
|
formData: data,
|
});
|
};
|
render() {
|
const { formData, editing, versionList, mealList, key } = this.state;
|
let tableParams = {
|
url: `v1/seCustom/pageQuery`,
|
service: 'oper',
|
formData,
|
key: key,
|
columns: this.columns(),
|
setFormData: this.setFormData,
|
};
|
return (
|
<Page url={this.state.url}>
|
<PageHead title="客户管理" />
|
<div className="customer">
|
<Card style={{ margin: '24px' }}>
|
{/* 列表查询 */}
|
<SearchFormView
|
formData={formData}
|
setFormData={this.setFormData}
|
bottonLayoutWidth={'30%'}
|
data={[
|
{ type: 'input', name: '客户名称', label: '客户名称', key: 'trueName' },
|
{
|
type: 'select',
|
name: '版本',
|
label: '版本',
|
key: 'verId',
|
list: versionList.map((item) => ({ value: item.id, label: item.name })),
|
},
|
{
|
type: 'select',
|
name: '增强包',
|
label: '增强包',
|
key: 'mealNames',
|
list: mealList.map((item) => ({ value: item.name, label: item.name })),
|
},
|
{
|
type: 'rangePicker',
|
name: JSON.stringify(['开始时间', '结束时间']),
|
label: '到期范围',
|
key: JSON.stringify(['expireTimeStart', 'expireTimeEnd']),
|
keylistName: 'rangeTimelist',
|
},
|
]}
|
/>
|
</Card>
|
<Card
|
style={{ margin: '24px' }}
|
title="客户信息列表"
|
extra={
|
<React.Fragment>
|
<span style={{ display: 'flex', alignItems: 'center' }}>
|
<Button type="primary" onClick={this.addOnClick} icon={<PlusOutlined />}>
|
新增客户
|
</Button>
|
{/* <ReloadOutlined style={{ fontSize: '24px', paddingLeft: '24px' }} /> */}
|
</span>
|
</React.Fragment>
|
}
|
>
|
<TableView {...tableParams} />
|
</Card>
|
</div>
|
</Page>
|
);
|
}
|
}
|
|
export default Customer;
|
//用于回显地域三级联动
|
function districtSplitByCode(code) {
|
let code1 = code.slice(0, 2) + '0000';
|
let code2 = code.slice(0, 4) + '00';
|
let code3 = code.slice(0);
|
return [code1, code2, code3];
|
}
|
