main
liuyiliang
4 months ago
parent
0a3218b399
commit
bf15dbb29d
8 changed files with 384 additions and 33 deletions
@ -0,0 +1,10 @@ |
|||||||
|
import axios from '../axios'; |
||||||
|
|
||||||
|
export function getList(obj: any){ |
||||||
|
console.log("1",obj) |
||||||
|
return axios({ |
||||||
|
url: "/ex/statistics/page", |
||||||
|
method: "post", |
||||||
|
data: obj |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { useLocation } from 'react-router-dom'; |
||||||
|
import {Breadcrumb, Descriptions} from 'antd'; |
||||||
|
|
||||||
|
const Detail = () => { |
||||||
|
const location = useLocation(); |
||||||
|
// @ts-ignore
|
||||||
|
const { record } = location.state || {}; // Access the record passed from the previous page
|
||||||
|
|
||||||
|
if (!record) { |
||||||
|
return <div>No record found!</div>; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{/*<Breadcrumb style={{ margin: '16px 16px' }}>*/} |
||||||
|
{/* {breadcrumb.map((item, index) => (*/} |
||||||
|
{/* <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>*/} |
||||||
|
{/* ))}*/} |
||||||
|
{/*</Breadcrumb>*/} |
||||||
|
<h1>客户详情</h1> |
||||||
|
<Descriptions title="客户信息"> |
||||||
|
<Descriptions.Item label="客户编号">{record.customerNo}</Descriptions.Item> |
||||||
|
<Descriptions.Item label="企业名称">{record.customerName}</Descriptions.Item> |
||||||
|
<Descriptions.Item label="行业分类">{record.typePname}</Descriptions.Item> |
||||||
|
<Descriptions.Item label="企业联系人">{record.contacts}</Descriptions.Item> |
||||||
|
<Descriptions.Item label="联系电话">{record.contactsPhone}</Descriptions.Item> |
||||||
|
</Descriptions> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Detail; |
||||||
@ -0,0 +1,247 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { Form, Input, Button, DatePicker, Table, Modal, Select, Descriptions} from 'antd' |
||||||
|
import { getList } from 'api/statistical' |
||||||
|
import Detail from 'components/order_manage/promotion_detail' |
||||||
|
|
||||||
|
import { dictionary } from "api/dict/index"; |
||||||
|
|
||||||
|
const { Option } = Select |
||||||
|
|
||||||
|
const { RangePicker } = DatePicker; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
currentId: number |
||||||
|
} |
||||||
|
|
||||||
|
interface State { |
||||||
|
listQuery: { |
||||||
|
keyword: string, |
||||||
|
page: number, |
||||||
|
num: number, |
||||||
|
activityName?: string, |
||||||
|
memberName?: string, |
||||||
|
mobile?: number | string, |
||||||
|
start?: number, |
||||||
|
end?: number |
||||||
|
}, |
||||||
|
order_time?: string[], |
||||||
|
list: object[], |
||||||
|
total: any, |
||||||
|
loading: boolean, |
||||||
|
detailVisible: boolean, |
||||||
|
currentId: number, |
||||||
|
affiliationDict: any, |
||||||
|
manageTypeDict: any, |
||||||
|
showDetail: boolean |
||||||
|
} |
||||||
|
|
||||||
|
class Customer extends React.Component<Props, State>{ |
||||||
|
formRef = React.createRef<any>(); |
||||||
|
constructor(props: Props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
listQuery: { |
||||||
|
keyword: '', |
||||||
|
page: 1, |
||||||
|
num: 20 |
||||||
|
}, |
||||||
|
list: [], |
||||||
|
total: 0, |
||||||
|
loading: false, |
||||||
|
detailVisible: false, |
||||||
|
currentId: 0, |
||||||
|
affiliationDict: undefined, |
||||||
|
manageTypeDict: undefined, |
||||||
|
showDetail: false |
||||||
|
} |
||||||
|
// this.getListApi = this.getListApi.bind(this)
|
||||||
|
} |
||||||
|
componentDidMount() { |
||||||
|
this.getListApi(this.state.listQuery) |
||||||
|
this.getDict() |
||||||
|
} |
||||||
|
// 列表接口
|
||||||
|
getListApi(listQuery: object) { |
||||||
|
this.setState({ loading: true }); |
||||||
|
getList(listQuery).then(res => { |
||||||
|
this.setState({ |
||||||
|
loading: false, |
||||||
|
list: res.data.rows, |
||||||
|
total: res.data.total |
||||||
|
}) |
||||||
|
}).catch(() => { }) |
||||||
|
} |
||||||
|
getDict() { |
||||||
|
dictionary('affiliation').then((res) => { |
||||||
|
if(res.data){ |
||||||
|
this.setState({ affiliationDict: res.data }) |
||||||
|
} |
||||||
|
}) |
||||||
|
dictionary('manage_type').then((res) => { |
||||||
|
if(res.data){ |
||||||
|
this.setState({ manageTypeDict: res.data }) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
// handleDetail(text: any, record: any) {
|
||||||
|
// // console.log(text)
|
||||||
|
// // console.log(record)
|
||||||
|
// this.setState({
|
||||||
|
// detailVisible: true,
|
||||||
|
// currentId: text.orderId,
|
||||||
|
// showDetail: true
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
handleDetail(record: any) { |
||||||
|
// @ts-ignore
|
||||||
|
const { history } = this.props; |
||||||
|
history.push({ |
||||||
|
pathname: '/customerDetail', |
||||||
|
state: { record }, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
const onFinish = (values: object) => { |
||||||
|
const { customerNo, customerName, typePname, contacts, contactsPhone } = JSON.parse(JSON.stringify(values)) |
||||||
|
const _listQuery = { ...this.state.listQuery, customerNo, customerName, typePname, contacts, contactsPhone } |
||||||
|
this.setState({ listQuery: _listQuery }) |
||||||
|
this.getListApi(this.state.listQuery) |
||||||
|
// console.log(this.state.listQuery)
|
||||||
|
} |
||||||
|
const onFinishFailed = (errorInfo: object) => { |
||||||
|
console.log('failes', errorInfo) |
||||||
|
} |
||||||
|
const columns: any = [ |
||||||
|
{ title: '客户编号', dataIndex: 'customerNo', key: 'customerNo', align: 'center', width: 180 }, |
||||||
|
{ title: '企业名称', dataIndex: 'customerName', key: 'customerName', align: 'center', width: 150 }, |
||||||
|
{ title: '行业分类', dataIndex: 'typePname', key: 'typePname', align: 'center', width: 120 }, |
||||||
|
{ title: '企业联系人', dataIndex: 'contacts', key: 'contacts', align: 'center', width: 120 }, |
||||||
|
{ title: '企业联系电话', dataIndex: 'contactsPhone', key: 'contactsPhone', align: 'center', width: 120 }, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
key: 'operation', |
||||||
|
align: 'center', |
||||||
|
fixed: 'right', |
||||||
|
width: 100, |
||||||
|
// render: (text: any, record: any) => <p className='link' onClick={() => { this.handleDetail(text, record) }}>查看</p>,
|
||||||
|
render: (text: any, record: any) => <p className='link' onClick={() => { this.handleDetail(record) }}>查看</p>, |
||||||
|
} |
||||||
|
]; |
||||||
|
// 分页切换
|
||||||
|
const changePage = (current: number, pageSize?: number) => { |
||||||
|
const query = { ...this.state.listQuery, page: current, num: pageSize || 20 } |
||||||
|
console.log('query', query) |
||||||
|
setTimeout(() => { |
||||||
|
this.setState({ listQuery: query }) |
||||||
|
this.getListApi(this.state.listQuery) |
||||||
|
}, 0) |
||||||
|
} |
||||||
|
|
||||||
|
// 多少每页
|
||||||
|
const selectchange = (page: number, num: number) => { |
||||||
|
const query = { ...this.state.listQuery, page, num } |
||||||
|
this.setState({ listQuery: query }) |
||||||
|
this.getListApi(query); |
||||||
|
} |
||||||
|
|
||||||
|
// 详情model
|
||||||
|
const handleCancel = () => { |
||||||
|
this.setState({ detailVisible: false }) |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
const onReset = () => { |
||||||
|
const form = this.formRef.current; |
||||||
|
// 获取字段的当前值
|
||||||
|
const keyword = form.getFieldValue('keyword'); |
||||||
|
const affiliation = form.getFieldValue('affiliation'); |
||||||
|
const manageType = form.getFieldValue('manageType'); |
||||||
|
|
||||||
|
console.log('Current values before reset:', keyword, affiliation, manageType); |
||||||
|
|
||||||
|
// 清空字段值
|
||||||
|
form.resetFields(); |
||||||
|
}; |
||||||
|
|
||||||
|
const { list, loading, affiliationDict, manageTypeDict } = this.state; |
||||||
|
return ( |
||||||
|
<div className="container"> |
||||||
|
{/* {JSON.stringify(this.state.listQuery)} */} |
||||||
|
<div className="ikd-page-header"><div className="title">查询条件</div></div> |
||||||
|
<div className="list-filter"> |
||||||
|
<Form |
||||||
|
ref={this.formRef} |
||||||
|
className="filter" |
||||||
|
layout="inline" |
||||||
|
name="basic" |
||||||
|
onFinish={onFinish} |
||||||
|
onFinishFailed={onFinishFailed}> |
||||||
|
<Form.Item |
||||||
|
label="关键字：" |
||||||
|
name="keyword"> |
||||||
|
<Input style={{ width: 230 }} placeholder="请输入输入客户名称/编号关键字" /> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item |
||||||
|
label="归属机构：" |
||||||
|
name="affiliation"> |
||||||
|
<Select placeholder="全部" style={{ width: 200 }} allowClear> |
||||||
|
{ |
||||||
|
affiliationDict && affiliationDict.map((item: { dictKey: any; dictValue: string }) => { |
||||||
|
return <Option value={item.dictKey}>{item.dictValue}</Option> |
||||||
|
}) |
||||||
|
} |
||||||
|
</Select> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item |
||||||
|
label="管理分类：" |
||||||
|
name="manageType"> |
||||||
|
<Select placeholder="全部" style={{ width: 200 }} allowClear> |
||||||
|
{ |
||||||
|
manageTypeDict && manageTypeDict.map((item: { dictKey: any; dictValue: string }) => { |
||||||
|
return <Option value={item.dictKey}>{item.dictValue}</Option> |
||||||
|
}) |
||||||
|
} |
||||||
|
</Select> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item> |
||||||
|
<Button htmlType="button" onClick={onReset}> |
||||||
|
重置 |
||||||
|
</Button> |
||||||
|
</Form.Item> |
||||||
|
<Form.Item> |
||||||
|
<Button type="primary" htmlType="submit">搜索</Button> |
||||||
|
</Form.Item> |
||||||
|
</Form> |
||||||
|
</div> |
||||||
|
<Table dataSource={list} columns={columns} rowKey="orderId" |
||||||
|
loading={loading} scroll={{ y: '400px' }} |
||||||
|
pagination={{ |
||||||
|
total: this.state.total, |
||||||
|
current: this.state.listQuery.page, |
||||||
|
showQuickJumper: true, |
||||||
|
showSizeChanger: true, |
||||||
|
showTotal: total => `共 ${total} 条`, |
||||||
|
onShowSizeChange: selectchange, |
||||||
|
onChange: changePage |
||||||
|
}} /> |
||||||
|
{/* 查看详情 */} |
||||||
|
<Modal title="查看详情" |
||||||
|
width={'80%'} |
||||||
|
bodyStyle={{ lineHeight: '2.8' }} |
||||||
|
visible={this.state.detailVisible} |
||||||
|
maskClosable={false} |
||||||
|
onCancel={handleCancel} |
||||||
|
footer={[ |
||||||
|
<Button type="primary" key="back" onClick={handleCancel}> |
||||||
|
关闭 |
||||||
|
</Button> |
||||||
|
]}> |
||||||
|
<Detail currentId={this.state.currentId}></Detail> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Customer; |
||||||
Loading…
Reference in new issue