You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
533 lines
18 KiB
533 lines
18 KiB
import React, { useEffect, useState, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Spin, Button, Popconfirm, Col, Input, Row } from 'antd';
|
|
import ProTable from '@ant-design/pro-table';
|
|
import './protable.less'
|
|
import moment from 'moment';
|
|
import { getPurchase, delPurchase } from "../actions/infor"
|
|
import UserModal from './infor/details';
|
|
|
|
const InForTable = (props) => {
|
|
const { dispatch, user, depData, depMessage, depLoading } = props
|
|
const [rowSelected, setRowSelected] = useState([])
|
|
const [counts, setCounts] = useState()//shuju
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [modalRecord, setModalRecord] = useState();
|
|
const [typecard, setTypecard] = useState();
|
|
const [recortd, setRecortd] = useState()
|
|
const [monitor, setMonitor] = useState()
|
|
const [delet, setDelet] = useState()
|
|
const [nameOfInspectionPoint, setNameOfInspectionPoint] = useState()//检测点名称
|
|
const [licensePlate, setLicensePlate] = useState()//车牌号
|
|
const [numberOfAxles, setNumberOfAxles] = useState()//车轴数
|
|
const [overrunRateUpper, setOverrunRateUpper] = useState()//超限率上限
|
|
const [overrunRateFloor, setOverrunRateFloor] = useState()//超限率下限
|
|
const [testTime, setTestTime] = useState()//超限率下限
|
|
const ref = useRef()
|
|
useEffect(() => { ref.current.reload() }, [monitor, delet])
|
|
//打开弹窗
|
|
const openModal = (type, record) => {
|
|
setModalVisible(true);
|
|
// setModalType(type);
|
|
if (type == 'edit') {
|
|
setModalRecord(record);
|
|
} else {
|
|
setModalRecord(null);
|
|
}
|
|
}
|
|
//批量导出
|
|
const exports = (ids, counts) => {
|
|
// console.log(user);
|
|
let reportIds = [];
|
|
if (ids.length)
|
|
reportIds = ids
|
|
else
|
|
reportIds = (counts || {}).ids || [];
|
|
superagent.post('/_report/http')
|
|
.send({ id: reportIds.map(i => Number(i)) }).end((err, res) => {
|
|
const resTextIs = res.text.split('/').pop()
|
|
window.open(
|
|
'/_api/' +
|
|
`attachments?src=files/${resTextIs}&filename=${encodeURIComponent(resTextIs)}&token=${user.token}`)
|
|
})
|
|
}
|
|
const deldata = (id) => { // 治超删除
|
|
const query = {
|
|
overspeedId: id
|
|
}
|
|
dispatch(delPurchase(query)).then((res) => {
|
|
setDelet(res)
|
|
})
|
|
}
|
|
const columns =
|
|
[
|
|
{
|
|
title: '区/县',
|
|
dataIndex: 'placeName',
|
|
fixed: 'left',
|
|
width: 120,
|
|
options: 1,
|
|
search: false,
|
|
backgroundColor: "#ffffff",
|
|
fieldProps: {
|
|
placeholder: '请输入检测点名称进行搜索',
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
},
|
|
render: (dom, record) => {
|
|
return record.districtcounty
|
|
},
|
|
},
|
|
{
|
|
title: '检测点名称',
|
|
// search: false,
|
|
dataIndex: 'containers1',
|
|
|
|
fixed: 'left',
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.nameOfInspectionPoint
|
|
},
|
|
fieldProps: {
|
|
onChange: (value, cs) => {
|
|
setNameOfInspectionPoint(value.currentTarget.value)
|
|
},
|
|
placeholder: '请输入车牌号进行搜索',
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '车牌号码',
|
|
// search: false,
|
|
dataIndex: 'containers444',
|
|
|
|
fixed: 'left',
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.licensePlate
|
|
},
|
|
fieldProps: {
|
|
onChange: (value, cs) => {
|
|
setLicensePlate(value.currentTarget.value)
|
|
},
|
|
placeholder: '请输入车牌号进行搜索',
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '车轴数',
|
|
// search: false,
|
|
dataIndex: 'containers2',
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.numberOfAxles
|
|
},
|
|
fieldProps: {
|
|
onChange: (value, cs) => {
|
|
setNumberOfAxles(value.currentTarget.value)
|
|
},
|
|
placeholder: '请输入车轴数进行搜索',
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '超限率(%)',
|
|
// search: false,
|
|
dataIndex: 'containers3',
|
|
// valueType: 'dateRange',
|
|
//
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.overrunRate
|
|
},
|
|
fieldProps: {
|
|
placeholder: '请输入超限率进行搜索',
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
},
|
|
renderFormItem: (item, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {
|
|
return <Input.Group >
|
|
<Row gutter={8}>
|
|
<Col span={8}>
|
|
<Input
|
|
onChange={(value) => {
|
|
setOverrunRateUpper(value.currentTarget.value)
|
|
}}
|
|
placeholder='输入超限率上限' />
|
|
</Col>
|
|
<Col span={8}>
|
|
<Input
|
|
onChange={(value) => {
|
|
setOverrunRateFloor(value.currentTarget.value)
|
|
}}
|
|
placeholder='输入超限率下限' />
|
|
</Col>
|
|
</Row>
|
|
</Input.Group>
|
|
}
|
|
|
|
}, {
|
|
title: '超限重量(kg)',
|
|
search: false,
|
|
dataIndex: 'containers4',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.overrunWeight
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '车货总重(kg)',
|
|
search: false,
|
|
dataIndex: 'containers5',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.grossVehicleWeight
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '车货限重(kg)',
|
|
search: false,
|
|
dataIndex: 'containers6',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.vehicleCargoWeightLimit
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '检测时间',
|
|
// search: false,
|
|
width: 140,
|
|
key: 'since',
|
|
dataIndex: 'createdAt',
|
|
valueType: 'date',
|
|
render: (dom, record) => {
|
|
return record.testTime
|
|
},
|
|
fieldProps: {
|
|
onChange: (value, cs) => {
|
|
console.log(cs)
|
|
setTestTime(cs)
|
|
},
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '经营业户名称',
|
|
search: false,
|
|
dataIndex: 'containers8',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.nameOfBusinessOwner
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '经营业户地址',
|
|
search: false,
|
|
dataIndex: 'containers9',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.businessAddress
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '通知人',
|
|
search: false,
|
|
dataIndex: 'containers10',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.notifier
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '通知方式',
|
|
search: false,
|
|
dataIndex: 'containers11',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.notificationMethod
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '通知结果(打不通、表示不来、不是当事人)',
|
|
search: false,
|
|
dataIndex: 'containers12',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 240,
|
|
|
|
render: (dom, record) => {
|
|
return record.notificationResults
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '处理时间',
|
|
search: false,
|
|
dataIndex: 'time9',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.processingTime
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '扣分',
|
|
search: false,
|
|
dataIndex: 'containers13',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.deductPoints
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '罚款',
|
|
search: false,
|
|
dataIndex: 'containers14',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.fine
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '备注',
|
|
search: false,
|
|
dataIndex: 'containers14',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 140,
|
|
|
|
render: (dom, record) => {
|
|
return record.remarks
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'creatTime',
|
|
valueType: 'dateTimeRange',
|
|
hideInSearch: true,
|
|
width: 120,
|
|
fixed: 'right',
|
|
render: (dom, record) => {
|
|
return <div><Button type="link"
|
|
onClick={() => {
|
|
openModal('edit', record)
|
|
setTypecard('111')
|
|
setRecortd(record)
|
|
}}
|
|
>编辑</Button>
|
|
|
|
<Popconfirm title='是否确认删除' onConfirm={() => { deldata(record.id) }}>
|
|
<Button type="link">删除</Button>
|
|
</Popconfirm></div>
|
|
|
|
}
|
|
},
|
|
{
|
|
key: "direction",
|
|
hideInTable: true,
|
|
dataIndex: "direction",
|
|
order: 6,
|
|
renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => {
|
|
return (
|
|
<div> <Button
|
|
type="primary"
|
|
style={{ width: "100px" }}
|
|
onClick={() => {
|
|
openModal('edit', record)
|
|
setTypecard('')
|
|
}}
|
|
>
|
|
新增
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
style={{ width: "100px", marginLeft: 20 }}
|
|
|
|
>
|
|
导入
|
|
</Button>
|
|
</div>
|
|
|
|
|
|
);
|
|
},
|
|
},
|
|
]
|
|
return (
|
|
<Spin spinning={false}>
|
|
<div className='protable-transpor'>
|
|
<ProTable
|
|
actionRef={ref}
|
|
scroll={{ x: 800 }}
|
|
options={false}
|
|
ref={c => { finishedProductTable = c; }}
|
|
style={{ width: "100% ", overflow: "auto", height: '760px' }}
|
|
rowKey='id'
|
|
|
|
rowSelection={{
|
|
selectedRowKeys: rowSelected,
|
|
onChange: (selectedRowKeys) => {
|
|
setRowSelected(selectedRowKeys);
|
|
},
|
|
}}
|
|
columns={columns}
|
|
dataSource={counts || []}
|
|
onReset={(v) => {
|
|
setNameOfInspectionPoint('')
|
|
setLicensePlate('')
|
|
setNumberOfAxles('')
|
|
setOverrunRateUpper('')
|
|
setOverrunRateFloor('')
|
|
setTestTime('')
|
|
}}
|
|
request={async (params) => {
|
|
console.log(params)
|
|
const query = {
|
|
limit: params.pageSize,
|
|
page: params.current - 1,
|
|
nameOfInspectionPoint: nameOfInspectionPoint,
|
|
licensePlate: licensePlate,
|
|
numberOfAxles: numberOfAxles,
|
|
overrunRateUpper: overrunRateUpper,
|
|
overrunRateFloor: overrunRateFloor,
|
|
testTime: testTime
|
|
}
|
|
setRowSelected([]);
|
|
const res = await dispatch(getPurchase(query));
|
|
console.log(res)
|
|
setCounts(res.payload.data.rows)
|
|
return {
|
|
...res,
|
|
total: res.payload.data ? res.payload.data.count : 0
|
|
}
|
|
}}
|
|
search={{
|
|
defaultCollapsed: false,
|
|
optionRender: (searchConfig, formProps, dom) => [
|
|
...dom.reverse(),
|
|
<Popconfirm title="确认导出?" onConfirm={() => { props.exports(rowSelected, counts) }}>
|
|
<Button
|
|
>
|
|
导出
|
|
</Button>
|
|
</Popconfirm>
|
|
],
|
|
}}
|
|
|
|
>
|
|
</ProTable></div>
|
|
{modalVisible ? <UserModal
|
|
visible={modalVisible}
|
|
onVisibleChange={setModalVisible}
|
|
modalRecord={modalRecord}
|
|
typecard={typecard}
|
|
rewkeys={'zhichao'}
|
|
data={data}
|
|
recortd={recortd}
|
|
setDelet={setDelet}
|
|
setMonitor={setMonitor}
|
|
// sitename={sitename}
|
|
setRecortd={setRecortd}
|
|
/> : ''}
|
|
</Spin >
|
|
)
|
|
}
|
|
const data = {
|
|
"districtcounty": "区/县",
|
|
"nameOfInspectionPoint": "检测点名称",
|
|
"licensePlate": "车牌号码",
|
|
"numberOfAxles": "车轴数",
|
|
"overrunRate": "超限率",
|
|
"overrunWeight": "超限重量",
|
|
"grossVehicleWeight": "车货总重",
|
|
"vehicleCargoWeightLimit": "车货限重",
|
|
"testTime": "检测时间",
|
|
"nameOfBusinessOwner": "经营业户名称",
|
|
"businessAddress": "经营业户地址",
|
|
"notifier": "通知人",
|
|
"notificationMethod": "通知方式",
|
|
"notificationResults": "通知结果",
|
|
"processingTime": "处理时间",
|
|
"deductPoints": "扣分",
|
|
"fine": "罚款",
|
|
"remarks": "备注"
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { auth, depMessage } = state;
|
|
const pakData = (dep) => {
|
|
return dep.map((d) => {
|
|
return {
|
|
title: d.name,
|
|
value: d.id,
|
|
// children: d.type >= 2 ? [] : pakData(d.subordinate)
|
|
children: pakData(d.subordinate)
|
|
}
|
|
})
|
|
}
|
|
let depData = pakData(depMessage.data || [])
|
|
return {
|
|
user: auth.user,
|
|
depMessage: depMessage.data || [],
|
|
depLoading: depMessage.isRequesting,
|
|
depData,
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(InForTable);
|