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.
405 lines
14 KiB
405 lines
14 KiB
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Spin, Button, Popconfirm } from 'antd';
|
|
import ProTable from '@ant-design/pro-table';
|
|
import './protable.less'
|
|
import { getRoadway, getHighways, getCustodyunit, delProject } from "../actions/infor"
|
|
import HightModal from './highways/highwaysdata';
|
|
import Guanli from './highways/guanli';
|
|
|
|
const TransporTationTable = (props) => {
|
|
const { dispatch, user, depData, depMessage, depLoading } = props
|
|
const [rowSelected, setRowSelected] = useState([])
|
|
const [sitename, setSitename] = useState()//名称
|
|
const [counts, setCounts] = useState()//shuju
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [modalVisibleyilan, setModalVisibleyilan] = useState(false);
|
|
const [modalVisibleyilans, setModalVisibleyilans] = useState(false);
|
|
|
|
const [modalRecord, setModalRecord] = useState();
|
|
const [typecard, setTypecard] = useState();
|
|
const [activeKey, setActiveKey] = useState('tab1');
|
|
const [recortd, setRecortd] = useState()
|
|
const [whichofits, setWhichofits] = useState('sheshi')
|
|
const [delet, setDelet] = useState()
|
|
const [differentiate, setDifferentiate] = useState('road')
|
|
const [grade, setGrade] = useState('县')
|
|
const ref = useRef()
|
|
useEffect(() => { ref.current.reload() }, [whichofits, delet])
|
|
//打开弹窗
|
|
const hightModal = (type, record) => {
|
|
setModalVisibleyilan(true);
|
|
// setModalType(type);
|
|
if (type == 'edit') {
|
|
setModalRecord(record);
|
|
} else {
|
|
setModalRecord(null);
|
|
}
|
|
}
|
|
const yilanModal = (type, record) => {
|
|
setModalVisibleyilans(true);
|
|
// setModalType(type);
|
|
if (type == 'edit') {
|
|
setModalRecord(record);
|
|
} else {
|
|
setModalRecord(null);
|
|
}
|
|
}
|
|
const columns = {
|
|
tab1: [
|
|
{
|
|
title: '类型',
|
|
dataIndex: 'placeName',
|
|
fixed: 'left',
|
|
width: 120,
|
|
search: false,
|
|
options: 1,
|
|
backgroundColor: "#ffffff",
|
|
fieldProps: {
|
|
onChange: (value, cs) => {
|
|
setSitename(value.currentTarget.value)
|
|
},
|
|
placeholder: '请输入类型进行搜索',
|
|
|
|
},
|
|
render: (dom, record) => {
|
|
return record.name
|
|
},
|
|
},
|
|
{
|
|
title: '数量',
|
|
search: false,
|
|
dataIndex: 'containers',
|
|
|
|
fixed: 'left',
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.count
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'creatTime',
|
|
valueType: 'dateTimeRange',
|
|
hideInSearch: true,
|
|
width: 160,
|
|
fixed: 'right',
|
|
render: (dom, record) => {
|
|
return <div><Button type="link"
|
|
onClick={() => {
|
|
hightModal('edit', record)
|
|
setTypecard('compile')
|
|
setRecortd(record)
|
|
}}
|
|
>编辑</Button></div>
|
|
|
|
}
|
|
},
|
|
|
|
],
|
|
tab2: [
|
|
{
|
|
title: '管养责单位',
|
|
dataIndex: 'placeName',
|
|
fixed: 'left',
|
|
width: 120,
|
|
options: 1,
|
|
search: false,
|
|
backgroundColor: "#ffffff",
|
|
fieldProps: {
|
|
onChange: (value, cs) => {
|
|
setSitename(value.currentTarget.value)
|
|
},
|
|
placeholder: '请输入项目名称进行搜索',
|
|
|
|
},
|
|
render: (dom, record) => {
|
|
return record.responsibleUnitForManagementAndMaintenance
|
|
},
|
|
},
|
|
{
|
|
title: '养护单位',
|
|
search: false,
|
|
dataIndex: 'time1',
|
|
valueType: 'dateRange',
|
|
|
|
// fixed: 'left',
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.maintenanceUnit
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '管理人员（人）',
|
|
search: false,
|
|
dataIndex: 'time2',
|
|
valueType: 'dateRange',
|
|
// align: 'right',
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.management
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '工人（人）',
|
|
search: false,
|
|
dataIndex: 'time3',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.worker
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '公益岗位（人）',
|
|
search: false,
|
|
dataIndex: 'time4',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.publicWelfarePost
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '县道（km）',
|
|
search: false,
|
|
dataIndex: 'time5',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.countyHighway
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '乡道（km）',
|
|
search: false,
|
|
dataIndex: 'time6',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.townshipRoad
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '村道（km）',
|
|
search: false,
|
|
dataIndex: 'time7',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.villageRoad
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
}, {
|
|
title: '桥梁（座）',
|
|
search: false,
|
|
dataIndex: 'time8',
|
|
valueType: 'dateRange',
|
|
|
|
|
|
width: 120,
|
|
render: (dom, record) => {
|
|
return record.bridge
|
|
},
|
|
fieldProps: {
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode,
|
|
}
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'creatTime',
|
|
valueType: 'dateTimeRange',
|
|
hideInSearch: true,
|
|
width: 160,
|
|
fixed: 'right',
|
|
render: (dom, record) => {
|
|
return <div><Button type="link"
|
|
onClick={() => {
|
|
yilanModal('edit', record)
|
|
setTypecard('compile')
|
|
setRecortd(record)
|
|
}}
|
|
>编辑</Button></div>
|
|
|
|
}
|
|
},
|
|
|
|
]
|
|
}
|
|
return (
|
|
<Spin spinning={false}>
|
|
<div className='protable-transpor'>
|
|
<ProTable
|
|
actionRef={ref}
|
|
toolbar={{
|
|
multipleLine: true,
|
|
|
|
menu: {
|
|
activeKey,
|
|
onChange: (key) => setActiveKey(key),
|
|
items: [
|
|
{
|
|
key: 'tab1',
|
|
label: <span onClick={() => {
|
|
setWhichofits('sheshi')
|
|
setDifferentiate('bridge')
|
|
}}>设施统计{activeKey === 'tab1'}</span>,
|
|
},
|
|
{
|
|
key: 'tab2',
|
|
label: <span onClick={() => {
|
|
setWhichofits('guanli')
|
|
setDifferentiate('project')
|
|
}}>管养统计{activeKey === 'tab2'}</span>,
|
|
},
|
|
|
|
],
|
|
},
|
|
}}
|
|
form={{
|
|
submitter: false
|
|
}}
|
|
scroll={{ x: 800 }}
|
|
options={false}
|
|
ref={c => { finishedProductTable = c; }}
|
|
style={{ width: "100% ", overflow: "auto", height: '760px' }}
|
|
rowKey='id'
|
|
onReset={(v) => {
|
|
setSitename('')
|
|
}}
|
|
// rowSelection={{
|
|
// selectedRowKeys: rowSelected,
|
|
// onChange: (selectedRowKeys) => {
|
|
// setRowSelected(selectedRowKeys);
|
|
// },
|
|
// }}
|
|
columns={columns[activeKey]}
|
|
dataSource={counts || []}
|
|
request={async (params) => {
|
|
console.log(whichofits)
|
|
if (whichofits == 'sheshi') {
|
|
const query = {
|
|
}
|
|
setRowSelected([]);
|
|
const res = await dispatch(getHighways(query));
|
|
// console.log(res)
|
|
|
|
setCounts(res.payload.data)
|
|
return {
|
|
...res,
|
|
total: res.payload.data ? res.payload.data.count : 0
|
|
}
|
|
} if (whichofits == 'guanli') {
|
|
const query = {
|
|
|
|
}
|
|
setRowSelected([]);
|
|
const res = await dispatch(getCustodyunit(query));
|
|
setCounts(res.payload.data)
|
|
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,grade,differentiate) }}>
|
|
// <Button
|
|
// >
|
|
// 导出
|
|
// </Button>
|
|
// </Popconfirm>
|
|
],
|
|
}}
|
|
>
|
|
</ProTable>
|
|
</div>
|
|
{modalVisibleyilan ? <HightModal
|
|
visible={modalVisibleyilan}
|
|
onVisibleChange={setModalVisibleyilan}
|
|
modalRecord={modalRecord}
|
|
typecard={typecard}
|
|
rewkeys={'highways'}
|
|
recortd={recortd}
|
|
setRecortd={setRecortd}
|
|
setDelet={setDelet}
|
|
/> : ''}
|
|
{modalVisibleyilans ? <Guanli
|
|
visible={modalVisibleyilans}
|
|
onVisibleChange={setModalVisibleyilans}
|
|
modalRecord={modalRecord}
|
|
typecard={typecard}
|
|
rewkeys={'guanli'}
|
|
recortd={recortd}
|
|
setRecortd={setRecortd}
|
|
setDelet={setDelet}
|
|
/> : ''}
|
|
</Spin >
|
|
)
|
|
}
|
|
const data = [
|
|
{ name: "管养责任单位", type: 'responsibleUnitForManagementAndMaintenance' },
|
|
{ name: "养护单位", type: 'maintenanceUnit' },
|
|
{ name: "管理人员", type: 'management' },
|
|
{ name: "工人", type: 'worker' },
|
|
{ name: "公益岗位", type: 'publicWelfarePost' },
|
|
{ name: "县道", type: 'countyHighway' },
|
|
{ name: "乡道", type: 'townshipRoad' },
|
|
{ name: "村道", type: 'villageRoad' },
|
|
{ name: "桥梁", type: 'bridge' },
|
|
]
|
|
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)(TransporTationTable);
|