|
|
@ -1,37 +1,69 @@ |
|
|
import React, { useEffect, useState,useRef } from 'react'; |
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { Spin, Button, Popconfirm, Badge } from 'antd'; |
|
|
import { Spin, Button, Popconfirm, Badge } from 'antd'; |
|
|
import ProTable from '@ant-design/pro-table'; |
|
|
import ProTable from '@ant-design/pro-table'; |
|
|
import './protable.less' |
|
|
import './protable.less' |
|
|
import { getHighways } from "../actions/infor" |
|
|
import { getHighways } from "../actions/infor" |
|
|
import HightModal from './highways/highwaysdata'; |
|
|
import HightModal from './highways/highwaysdata'; |
|
|
|
|
|
import Guanli from './highways/guanli'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const HigwaysTable = (props) => { |
|
|
const HigwaysTable = (props) => { |
|
|
const { dispatch, user, } = props |
|
|
const { dispatch, user, } = props |
|
|
const [rowSelected, setRowSelected] = useState([]) |
|
|
const [rowSelected, setRowSelected] = useState([]) |
|
|
|
|
|
const [modalVisible, setModalVisible] = useState(false); |
|
|
const [counts, setCounts] = useState()//shuju
|
|
|
const [counts, setCounts] = useState()//shuju
|
|
|
const [modalVisibleyilan, setModalVisibleyilan] = useState(false); |
|
|
const [modalVisibleyilan, setModalVisibleyilan] = useState(false); |
|
|
|
|
|
const [modalVisibleyilans, setModalVisibleyilans] = useState(false); |
|
|
const [modalRecord, setModalRecord] = useState(); |
|
|
const [modalRecord, setModalRecord] = useState(); |
|
|
const [typecard, setTypecard] = useState(); |
|
|
const [typecard, setTypecard] = useState(); |
|
|
const [recortd, setRecortd] = useState() |
|
|
const [recortd, setRecortd] = useState() |
|
|
const [sitename, setSitename] = useState()//桥梁名称
|
|
|
const [sitename, setSitename] = useState()//桥梁名称
|
|
|
const [delet, setDelet] = useState() |
|
|
const [delet, setDelet] = useState() |
|
|
|
|
|
const [activeKey, setActiveKey] = useState('tab1'); |
|
|
|
|
|
const [whichofits, setWhichofits] = useState('qiaoliang') |
|
|
|
|
|
const [differentiate, setDifferentiate] = useState('bridge') |
|
|
|
|
|
|
|
|
const ref = useRef() |
|
|
const ref = useRef() |
|
|
useEffect(() => { ref.current.reload() }, [ delet]) |
|
|
useEffect(() => { ref.current.reload() }, [delet]) |
|
|
//打开弹窗
|
|
|
//打开弹窗
|
|
|
const hightModal = (type, record) => { |
|
|
const hightModal = (type, record) => { |
|
|
setModalVisibleyilan(true); |
|
|
setModalVisibleyilan(true); |
|
|
// setModalType(type);
|
|
|
// setModalType(type);
|
|
|
if (type == 'edit') { |
|
|
if (type == 'edit') { |
|
|
setModalRecord(record); |
|
|
setModalRecord(record); |
|
|
} else { |
|
|
} else { |
|
|
setModalRecord(null); |
|
|
setModalRecord(null); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
const deldatas = (id) => { // 工程
|
|
|
const columns = |
|
|
const query = { |
|
|
[ |
|
|
projectId: id |
|
|
|
|
|
} |
|
|
|
|
|
// dispatch(delProject(query)).then((res) => {
|
|
|
|
|
|
// setDelet(res)
|
|
|
|
|
|
// })
|
|
|
|
|
|
} |
|
|
|
|
|
const openModal = (type, record) => { |
|
|
|
|
|
setModalVisible(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: '类型', |
|
|
title: '类型', |
|
|
dataIndex: 'placeName', |
|
|
dataIndex: 'placeName', |
|
|
@ -45,7 +77,7 @@ const hightModal = (type, record) => { |
|
|
setSitename(value.currentTarget.value) |
|
|
setSitename(value.currentTarget.value) |
|
|
}, |
|
|
}, |
|
|
placeholder: '请输入类型进行搜索', |
|
|
placeholder: '请输入类型进行搜索', |
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
}, |
|
|
}, |
|
|
render: (dom, record) => { |
|
|
render: (dom, record) => { |
|
|
return record.name |
|
|
return record.name |
|
|
@ -74,32 +106,219 @@ const hightModal = (type, record) => { |
|
|
fixed: 'right', |
|
|
fixed: 'right', |
|
|
render: (dom, record) => { |
|
|
render: (dom, record) => { |
|
|
return <div><Button type="link" |
|
|
return <div><Button type="link" |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
hightModal('edit', record) |
|
|
hightModal('edit', record) |
|
|
setTypecard('compile') |
|
|
setTypecard('compile') |
|
|
setRecortd(record) |
|
|
setRecortd(record) |
|
|
}} |
|
|
}} |
|
|
>编辑</Button></div> |
|
|
>编辑</Button></div> |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
], tab2: [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '管养责单位', |
|
|
|
|
|
dataIndex: 'placeName', |
|
|
|
|
|
fixed: 'left', |
|
|
|
|
|
width: 120, |
|
|
|
|
|
options: 1, |
|
|
|
|
|
backgroundColor: "#ffffff", |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
onChange: (value, cs) => { |
|
|
|
|
|
setSitename(value.currentTarget.value) |
|
|
|
|
|
}, |
|
|
|
|
|
placeholder: '请输入项目名称进行搜索', |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.entryName |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '养护单位', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time1', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
// fixed: 'left',
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.projectMileage |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '管理人员（人）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time2', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
// align: 'right',
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.investment |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '工人（人）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time3', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.buildUnit |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '公益岗位（人）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time4', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.constructionControlUnit |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '县道（km）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time5', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.designUnit |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '乡道（km）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time6', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.constructionUnit |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '村道（km）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time7', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.supervisorAndSupervisor |
|
|
|
|
|
}, |
|
|
|
|
|
fieldProps: { |
|
|
|
|
|
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: '桥梁（座）', |
|
|
|
|
|
search: false, |
|
|
|
|
|
dataIndex: 'time8', |
|
|
|
|
|
valueType: 'dateRange', |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
width: 120, |
|
|
|
|
|
render: (dom, record) => { |
|
|
|
|
|
return record.projectProgress |
|
|
|
|
|
}, |
|
|
|
|
|
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><Popconfirm title='是否确认删除' onConfirm={() => { deldatas(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={() => { |
|
|
|
|
|
yilanModal('edit', record) |
|
|
|
|
|
setTypecard('') |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
新增 |
|
|
|
|
|
</Button> |
|
|
|
|
|
{/* <Button |
|
|
|
|
|
type="primary" |
|
|
|
|
|
style={{ width: "100px", marginLeft: 20 }} |
|
|
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
导入 |
|
|
|
|
|
</Button> */} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
] |
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
|
|
|
|
|
|
<Spin spinning={false}> |
|
|
<Spin spinning={false}> |
|
|
<div className='protable-transpor'> |
|
|
{/* <div className='protable-transpor'> |
|
|
<ProTable |
|
|
<ProTable |
|
|
actionRef={ref} |
|
|
actionRef={ref} |
|
|
scroll={{ x: 800 }} |
|
|
scroll={{ x: 800 }} |
|
|
options={false} |
|
|
options={false} |
|
|
form={{ |
|
|
form={{ |
|
|
submitter:false |
|
|
submitter: false |
|
|
}} |
|
|
}} |
|
|
// ref={c => { finishedProductTable = c; }}
|
|
|
// ref={c => { finishedProductTable = c; }}
|
|
|
style={{ width: "100% ", overflow: "auto", height: '760px' }} |
|
|
style={{ width: "100% ", overflow: "auto", height: '760px' }} |
|
|
rowKey='id' |
|
|
rowKey='id' |
|
|
onReset={(v) => { |
|
|
onReset={(v) => { |
|
|
setSitename('') |
|
|
setSitename('') |
|
|
}} |
|
|
}} |
|
|
// rowSelection={{
|
|
|
// rowSelection={{
|
|
|
// selectedRowKeys: rowSelected,
|
|
|
// selectedRowKeys: rowSelected,
|
|
|
@ -109,10 +328,10 @@ const hightModal = (type, record) => { |
|
|
// }}
|
|
|
// }}
|
|
|
columns={columns} |
|
|
columns={columns} |
|
|
|
|
|
|
|
|
dataSource={counts || []} |
|
|
dataSource={counts || []} |
|
|
request={async (params) => { |
|
|
request={async (params) => { |
|
|
const query = { |
|
|
const query = { |
|
|
name:sitename |
|
|
name: sitename |
|
|
} |
|
|
} |
|
|
setRowSelected([]); |
|
|
setRowSelected([]); |
|
|
const res = await dispatch(getHighways(query)); |
|
|
const res = await dispatch(getHighways(query)); |
|
|
@ -123,8 +342,99 @@ const hightModal = (type, record) => { |
|
|
} |
|
|
} |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
</ProTable></div> |
|
|
</ProTable></div> */} |
|
|
{modalVisibleyilan ? <HightModal |
|
|
<div className='protable-transpor'> |
|
|
|
|
|
<ProTable |
|
|
|
|
|
actionRef={ref} |
|
|
|
|
|
toolbar={{ |
|
|
|
|
|
multipleLine: true, |
|
|
|
|
|
|
|
|
|
|
|
menu: { |
|
|
|
|
|
activeKey, |
|
|
|
|
|
onChange: (key) => setActiveKey(key), |
|
|
|
|
|
items: [ |
|
|
|
|
|
{ |
|
|
|
|
|
key: 'tab1', |
|
|
|
|
|
label: <span onClick={() => { |
|
|
|
|
|
setWhichofits('qiaoliang') |
|
|
|
|
|
setDifferentiate('bridge') |
|
|
|
|
|
}}>设施统计{activeKey === 'tab1'}</span>, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
key: 'tab2', |
|
|
|
|
|
label: <span onClick={() => { |
|
|
|
|
|
setWhichofits('gongcheng') |
|
|
|
|
|
setDifferentiate('project') |
|
|
|
|
|
}}>管理养护{activeKey === 'tab2'}</span>, |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
], |
|
|
|
|
|
}, |
|
|
|
|
|
}} |
|
|
|
|
|
form={{ |
|
|
|
|
|
submitter: whichofits == "qiaoliang" ? false : true |
|
|
|
|
|
}} |
|
|
|
|
|
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) => { |
|
|
|
|
|
if (whichofits == 'qiaoliang') { |
|
|
|
|
|
const query = { |
|
|
|
|
|
name: sitename |
|
|
|
|
|
} |
|
|
|
|
|
setRowSelected([]); |
|
|
|
|
|
const res = await dispatch(getHighways(query)); |
|
|
|
|
|
setCounts(res.payload.data) |
|
|
|
|
|
return { |
|
|
|
|
|
...res, |
|
|
|
|
|
total: res.payload.data ? res.payload.data.count : 0 |
|
|
|
|
|
} |
|
|
|
|
|
} if (whichofits == 'gongcheng') { |
|
|
|
|
|
const query = { |
|
|
|
|
|
type: 'bridge', |
|
|
|
|
|
entryName: sitename |
|
|
|
|
|
} |
|
|
|
|
|
setRowSelected([]); |
|
|
|
|
|
const res = await dispatch(getProject(query)); |
|
|
|
|
|
setCounts("") |
|
|
|
|
|
return { |
|
|
|
|
|
...res, |
|
|
|
|
|
// total: res.payload.data ? res.payload.data.count : 0
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
|
search={{ |
|
|
|
|
|
defaultCollapsed: false, |
|
|
|
|
|
optionRender: (searchConfig, formProps, dom) => [ |
|
|
|
|
|
...dom.reverse(), |
|
|
|
|
|
// whichofits == "qiaoliang" ? "" : <Popconfirm title="确认导出?" onConfirm={() => { props.exports(rowSelected, differentiate) }}>
|
|
|
|
|
|
// <Button
|
|
|
|
|
|
// >
|
|
|
|
|
|
// 导出
|
|
|
|
|
|
// </Button>
|
|
|
|
|
|
// </Popconfirm>
|
|
|
|
|
|
], |
|
|
|
|
|
}} |
|
|
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
</ProTable> |
|
|
|
|
|
</div> |
|
|
|
|
|
{modalVisibleyilan ? <HightModal |
|
|
visible={modalVisibleyilan} |
|
|
visible={modalVisibleyilan} |
|
|
onVisibleChange={setModalVisibleyilan} |
|
|
onVisibleChange={setModalVisibleyilan} |
|
|
modalRecord={modalRecord} |
|
|
modalRecord={modalRecord} |
|
|
@ -134,9 +444,33 @@ const hightModal = (type, record) => { |
|
|
setRecortd={setRecortd} |
|
|
setRecortd={setRecortd} |
|
|
setDelet={setDelet} |
|
|
setDelet={setDelet} |
|
|
/> : ''} |
|
|
/> : ''} |
|
|
|
|
|
{modalVisibleyilans ? <Guanli |
|
|
|
|
|
visible={modalVisibleyilans} |
|
|
|
|
|
onVisibleChange={setModalVisibleyilans} |
|
|
|
|
|
modalRecord={modalRecord} |
|
|
|
|
|
typecard={typecard} |
|
|
|
|
|
rewkeys={'guanli'} |
|
|
|
|
|
recortd={recortd} |
|
|
|
|
|
setRecortd={setRecortd} |
|
|
|
|
|
setDelet={setDelet} |
|
|
|
|
|
/> : ''} |
|
|
</Spin > |
|
|
</Spin > |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
|
|
const date = { |
|
|
|
|
|
"bridgeCode": "桥梁代码", |
|
|
|
|
|
"bridgeName": "桥梁名称", |
|
|
|
|
|
"centralStation": "中心桩号", |
|
|
|
|
|
"crossingFigureType": "跨越地物类型", |
|
|
|
|
|
"crossingFigureName": "跨越地物名称", |
|
|
|
|
|
"natureOfCharges": "收费性质", |
|
|
|
|
|
"rampCode": "匝道编码", |
|
|
|
|
|
"sectionType": "路段类型", |
|
|
|
|
|
"crossingFigureType1": "跨越地物类型1", |
|
|
|
|
|
"crossingFigureName1": "跨越地物名称1", |
|
|
|
|
|
"originalBridgeCode": "原桥梁代码", |
|
|
|
|
|
"whetherWideRoadAndNarrowBridge": "是否宽路窄桥", |
|
|
|
|
|
} |
|
|
function mapStateToProps(state) { |
|
|
function mapStateToProps(state) { |
|
|
const { auth, depMessage } = state; |
|
|
const { auth, depMessage } = state; |
|
|
const pakData = (dep) => { |
|
|
const pakData = (dep) => { |
|
|
|
