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.
293 lines
11 KiB
293 lines
11 KiB
import { connect } from 'react-redux';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Button, Modal, Form, Input, Divider, Spin, Select, DatePicker, Tooltip, Table } from 'antd'
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
|
import { roadSpotList, roadSpotDetail, roadSpotPrepare, confirmRoadSpot, exportSpotRode } from '../actions/spotCheck';
|
|
import moment from 'moment'
|
|
import Adjustment from '../components/adjustment'
|
|
import '../components/maintenanceTable.less'
|
|
|
|
|
|
|
|
const MaintenanceSpotCheck = (props) => {
|
|
const { dispatch, user, loading, reportDetail, reportDetailLoading, detailLoading } = props
|
|
const [data, setData] = useState()//外层表格的数据
|
|
const [vis, setVis] = useState(false)//模态框的显示与隐藏变量
|
|
const [count, setCount] = useState(0)
|
|
const [page, setPage] = useState(1)
|
|
const [depName, setDepName] = useState('')
|
|
const [total, setTotal] = useState(0)
|
|
const [previewId, setPreviewId] = useState(0)
|
|
const [reportData, setReportData] = useState([])
|
|
const [detailList, setDetailList] = useState([])
|
|
const [detailVisible, setDetailVisible] = useState(false)
|
|
const [dateRange, setDateRange] = useState([]);
|
|
const { RangePicker } = DatePicker
|
|
const [expandedRowKeys, setExpandedRowKeys] = useState([]);
|
|
const [isAdjustment, setIsAdjustment] = useState(false);
|
|
const [editData, setEditData] = useState({});
|
|
|
|
|
|
|
|
|
|
//里层列名
|
|
const columns = [
|
|
{
|
|
title: '抽查日期',
|
|
key: 'date',
|
|
dataIndex: 'date',
|
|
render: (_, record) => record?.date && moment(record?.date).format('YYYY-MM-DD') || '--'
|
|
},
|
|
{
|
|
title: '抽查县道比例（%）',
|
|
key: 'countyPercentage',
|
|
dataIndex: 'countyPercentage',
|
|
},
|
|
{
|
|
title: '抽查县道',
|
|
key: 'spotCountyRoadCount',
|
|
dataIndex: 'spotCountyRoadCount',
|
|
},
|
|
{
|
|
title: '抽查乡道',
|
|
key: 'spotTownRoadCount',
|
|
dataIndex: 'spotTownRoadCount',
|
|
},
|
|
{
|
|
title: '抽查村道',
|
|
key: 'spotVillageRoadCount',
|
|
dataIndex: 'spotVillageRoadCount',
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'operation',
|
|
dataIndex: 'operation',
|
|
render: (_, record) =>
|
|
<a href={`/_api/road/spot/export?token=${user?.token}&previewId=${record.id}`}>导出</a>
|
|
},
|
|
|
|
]
|
|
const queryData = (data = {}) => {
|
|
dispatch(roadSpotList(data)).then(res => {
|
|
if (res.success) {
|
|
setReportData(res?.payload.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
const detailData = (data = {}) => {
|
|
dispatch(roadSpotDetail(data)).then(res => {
|
|
if (res.success) {
|
|
setDetailList(res?.payload.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
queryData()
|
|
}, [])
|
|
|
|
|
|
const [form] = Form.useForm()
|
|
|
|
|
|
const extractHandler = () => {
|
|
form.validateFields(['percentValue']).then(async (values) => {
|
|
if (Number(values.percentValue) > 0) {
|
|
const res = await dispatch(roadSpotPrepare({ countyPercentage: values.percentValue }))
|
|
setPreviewId(res?.payload.data?.previewId)
|
|
form.setFieldsValue({
|
|
'spotCountyRoadCount': res?.payload.data?.spotCountyRoadCount,
|
|
'spotTownRoadCount': res?.payload.data?.spotTownRoadCount,
|
|
'spotVillageRoadCount': res?.payload.data?.spotVillageRoadCount,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const cancelHandler = () => {
|
|
setVis(false)
|
|
form.resetFields()
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<div>
|
|
|
|
<div style={{ display: "flex", alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
|
<Button onClick={() => {
|
|
setVis(true)
|
|
}} type='primary' style={{ marginLeft: 10 }}> 新增 </Button>
|
|
<div>
|
|
<RangePicker value={dateRange[0] ? [moment(dateRange[0]), moment(dateRange[1])] : []} onChange={(date, dateString) => {
|
|
setDateRange(dateString)
|
|
}} style={{ marginRight: 20 }} />
|
|
<Button style={{ marginRight: 20 }} onClick={() => {
|
|
setPage(1)
|
|
setExpandedRowKeys([])
|
|
queryData({ startTime: dateRange[0], endTime: dateRange[1] })
|
|
}} > 查询 </Button>
|
|
<Button style={{ marginRight: 20 }} onClick={() => {
|
|
setDateRange([])
|
|
}} > 重置 </Button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Table
|
|
columns={columns}
|
|
dataSource={reportData}
|
|
loading={loading}
|
|
expandable={{
|
|
expandedRowKeys: expandedRowKeys, // 控制哪些行展开，这里需要通过 state 管理
|
|
// defaultExpandedRowKeys: ['0'],
|
|
onExpand: (expanded, record) => {
|
|
if (expanded) {
|
|
setExpandedRowKeys([record?.id])
|
|
detailData({ previewId: record?.id })
|
|
} else {
|
|
setExpandedRowKeys([])
|
|
|
|
}
|
|
},
|
|
expandedRowRender: (record) => (
|
|
< Table
|
|
pagination={{
|
|
pageSize: 10,
|
|
defaultPageSize: 10,
|
|
showSizeChanger: false,
|
|
}}
|
|
loading={detailLoading}
|
|
style={{ margin: 0 }}
|
|
dataSource={detailList}
|
|
columns={
|
|
[
|
|
{
|
|
title: '道路类型', key: 'level', dataIndex: 'level', render: (_, r) => r?.road?.level ? (r?.road?.level + '道') : '--'
|
|
},
|
|
{ title: '道路名称', key: 'routeName', dataIndex: 'routeName', render: (_, r) => r.road?.routeName || '--' },
|
|
{ title: '道路代码', key: 'routeCode', dataIndex: 'routeCode', render: (_, r) => r.road?.routeCode || '--' },
|
|
{ title: '路段序号', key: 'sectionNo', dataIndex: 'sectionNo', render: (_, r) => r.road?.sectionNo || '--' },
|
|
{ title: '起点地名', key: 'startingPlaceName', dataIndex: 'startingPlaceName', render: (_, r) => r.road?.startingPlaceName || '--' },
|
|
{ title: '止点地名', key: 'stopPlaceName', dataIndex: 'stopPlaceName', render: (_, r) => r.road?.stopPlaceName || '--' },
|
|
{ title: '里程', key: 'chainageMileage', dataIndex: 'chainageMileage', render: (_, r) => r.road?.chainageMileage || '--' },
|
|
{ title: '养护次数（次）', key: 'maintenanceCount', dataIndex: 'maintenanceCount' },
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
dataIndex: 'action',
|
|
render: (_, r) => <Button type="link" onClick={() => {
|
|
setEditData({
|
|
...r, alterId: r?.road?.level == '县' ? record?.countyRoadId
|
|
: r?.road?.level == '乡' ? record?.townshipRoadId
|
|
: r?.road?.level == '村' ? record?.villageId : [],
|
|
previewId: record?.id
|
|
})
|
|
setIsAdjustment(true)
|
|
}}> 调整 </Button >
|
|
},
|
|
]}
|
|
|
|
/>
|
|
),
|
|
}}
|
|
pagination={{
|
|
total: reportData?.length || 0,
|
|
pageSize: 10,
|
|
current: page || 1,
|
|
defaultPageSize: 10,
|
|
showSizeChanger: false,
|
|
onChange: (page, pageSize) => {
|
|
setPage(page)
|
|
}
|
|
}}
|
|
rowKey={(record) => { return record.id }}
|
|
// toolBarRender={false}
|
|
// search={false}
|
|
/>
|
|
|
|
|
|
{
|
|
vis && <Modal visible={vis} onCancel={cancelHandler} title='养护抽查' onOk={() => {
|
|
dispatch(confirmRoadSpot({ previewId })).then(res => {
|
|
if (res.success) {
|
|
setPage(1)
|
|
setExpandedRowKeys([])
|
|
queryData({ startTime: dateRange[0], endTime: dateRange[1] })
|
|
form.resetFields()
|
|
setVis(false)
|
|
}
|
|
});
|
|
|
|
|
|
}}>
|
|
<Form form={form}>
|
|
|
|
<Form.Item
|
|
label={<div>抽取县道比例(%)<Tooltip title='默认抽查乡道比例为25%、抽查村道比例为10%'>
|
|
<ExclamationCircleOutlined style={{ marginLeft: 6 }} />
|
|
</Tooltip></div>}
|
|
name="percentValue"
|
|
rules={[
|
|
{ required: true, message: '请选择抽取比例' },
|
|
// {
|
|
// pattern: /^(100|\d{1,2})(\.\d{1,2})?$/,
|
|
// message: '请输入有效的比例',
|
|
// },
|
|
]}
|
|
>
|
|
<Select style={{}} placeholder="请选择抽取比例" options={[{ value: 50, label: '50%', }, { value: 75, label: '75%', }]} />
|
|
</Form.Item>
|
|
|
|
<Form.Item className="ant-row" style={{
|
|
textAlign: 'center',
|
|
}}>
|
|
<Button style={{}} type='primary' onClick={extractHandler}>开始抽取</Button>
|
|
</Form.Item>
|
|
<Form.Item label='抽查县道（条）' name='spotCountyRoadCount'>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
<Form.Item label='抽查乡道（条）' name='spotTownRoadCount'>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
<Form.Item label='抽查村道（条）' name='spotVillageRoadCount'>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
}
|
|
|
|
{
|
|
isAdjustment &&
|
|
<Adjustment
|
|
editData={editData}
|
|
onCancel={() => {
|
|
setEditData({})
|
|
setIsAdjustment(false)
|
|
}}
|
|
onOk={() => {
|
|
detailData({ previewId: expandedRowKeys[0] })
|
|
}}
|
|
/>
|
|
}
|
|
|
|
|
|
|
|
</div >
|
|
)
|
|
}
|
|
function mapStateToProps (state) {
|
|
const { auth, roadSpotList, reportDetail, roadSpotDetail } = state
|
|
//('state1', state)
|
|
return {
|
|
user: auth.user,
|
|
loading: roadSpotList?.isRequesting,
|
|
detailLoading: roadSpotDetail?.isRequesting,
|
|
reportDetailLoading: reportDetail.isRequesting,
|
|
reportDetail: reportDetail.data,
|
|
|
|
}
|
|
}
|
|
export default connect(mapStateToProps)(MaintenanceSpotCheck);
|