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