10 changed files with 565 additions and 2 deletions
@ -0,0 +1,224 @@ |
|||||
|
import { connect } from 'react-redux'; |
||||
|
import './protable.less' |
||||
|
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input } from 'antd'; |
||||
|
import ProTable from '@ant-design/pro-table'; |
||||
|
// import { Badge, Button } from 'antd';
|
||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
// @ts-ignore
|
||||
|
import styles from './protable.less'; |
||||
|
const DetailList = (props) => { |
||||
|
const { patrolName } = props; |
||||
|
const [tableListDataSource, setTableListDataSource] = useState([]); |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '问题编号', |
||||
|
key: 'num', |
||||
|
dataIndex: 'num', |
||||
|
align:'center' |
||||
|
}, { |
||||
|
title: '所属道路', |
||||
|
key: 'road', |
||||
|
dataIndex: 'road', |
||||
|
align:'center' |
||||
|
}, { |
||||
|
title: '所在路段', |
||||
|
key: 'address', |
||||
|
dataIndex: 'address', |
||||
|
align:'center' |
||||
|
}, { |
||||
|
title: '缺陷名称', |
||||
|
key: 'name', |
||||
|
dataIndex: 'name', |
||||
|
align:'center' |
||||
|
}, { |
||||
|
title: '巡查人', |
||||
|
width:100, |
||||
|
key: 'patrolName', |
||||
|
dataIndex: 'patrolName', |
||||
|
align:'center' |
||||
|
}, { |
||||
|
title: '上报时间', |
||||
|
key: 'createdAt', |
||||
|
dataIndex: 'createdAt', |
||||
|
valueType: 'dateTime', |
||||
|
align:'center' |
||||
|
}, { |
||||
|
title: '操作', |
||||
|
width:200, |
||||
|
key: 'option', |
||||
|
valueType: 'option', |
||||
|
align:'center', |
||||
|
render: () => [<Button style={{marginRight:10}}>查看</Button>,<Button >删除</Button>] |
||||
|
}, |
||||
|
]; |
||||
|
useEffect(() => { |
||||
|
const source = []; |
||||
|
for (let i = 0; i < 25; i += 1) { |
||||
|
source.push({ |
||||
|
num: `${i + 1}`, |
||||
|
road: `成华大道${i + 2}`, |
||||
|
address: `二仙桥${i + 3}`, |
||||
|
name: `缺失内容${i + 4}`, |
||||
|
patrolName: patrolName, |
||||
|
createdAt: Date.now() - Math.floor(Math.random() * 10000), |
||||
|
key: i, |
||||
|
}); |
||||
|
} |
||||
|
setTableListDataSource(source); |
||||
|
}, [patrolName]); |
||||
|
return ( |
||||
|
<ProTable |
||||
|
columns={columns} |
||||
|
dataSource={tableListDataSource} |
||||
|
pagination={{ |
||||
|
pageSize: 10, |
||||
|
defaultPageSize:10, |
||||
|
showSizeChanger: false, |
||||
|
}} |
||||
|
rowKey="key" |
||||
|
toolBarRender={false} |
||||
|
search={false} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
const patrolNameListDataSource = []; |
||||
|
|
||||
|
for (let i = 0; i < 10; i += 1) { |
||||
|
patrolNameListDataSource.push({ |
||||
|
patrolName: `老大爷${i}`, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
const IPList = (props) => { |
||||
|
const { onChange, patrolName } = props; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '巡更人员', |
||||
|
key: 'patrolName', |
||||
|
dataIndex: 'patrolName', |
||||
|
align:'center' |
||||
|
}, |
||||
|
|
||||
|
]; |
||||
|
return ( |
||||
|
<div className='spilce'> |
||||
|
<ProTable |
||||
|
columns={columns} |
||||
|
request={(params, sorter, filter) => { |
||||
|
// 表单搜索项会从 params 传入，传递给后端接口。
|
||||
|
console.log(params, sorter, filter); |
||||
|
return Promise.resolve({ |
||||
|
data: patrolNameListDataSource, |
||||
|
success: true, |
||||
|
}); |
||||
|
}} |
||||
|
rowKey="patrolName" |
||||
|
rowClassName={(record) => { |
||||
|
return record.patrolName === patrolName ? styles['split-row-select-active'] : ''; |
||||
|
}} |
||||
|
// toolbar={{
|
||||
|
// search: {
|
||||
|
// onSearch: (value) => {
|
||||
|
// alert(value);
|
||||
|
// },
|
||||
|
// },
|
||||
|
// }}
|
||||
|
toolBarRender={()=>[ |
||||
|
<Input placeholder='输入巡更人员名称'></Input> |
||||
|
]} |
||||
|
options={false} |
||||
|
pagination={false} |
||||
|
search={false} |
||||
|
onRow={(record) => { |
||||
|
return { |
||||
|
onClick: () => { |
||||
|
if (record.patrolName) { |
||||
|
onChange(record.patrolName); |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
}} |
||||
|
/></div> |
||||
|
|
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const MaintenanceTable = () => { |
||||
|
const [patrolName, setPatrolName] = useState('老大爷0'); |
||||
|
const { RangePicker } = DatePicker; |
||||
|
const tabList = [ |
||||
|
{ |
||||
|
key: 'tab1', |
||||
|
tab: '养护', |
||||
|
}, |
||||
|
]; |
||||
|
const contentList = { |
||||
|
tab1: [<div> |
||||
|
<Card style={{ flex: 1 }}> |
||||
|
<DetailList patrolName={patrolName} /> |
||||
|
</Card> |
||||
|
</div>] |
||||
|
}; |
||||
|
const [activeTabKey1, setActiveTabKey1] = useState('tab1'); |
||||
|
const onTab1Change = (key) => { |
||||
|
setActiveTabKey1(key); |
||||
|
}; |
||||
|
return ( |
||||
|
<div className='card-protable'> |
||||
|
<Card > |
||||
|
<IPList onChange={(searchPatrolName) => setPatrolName(searchPatrolName)} patrolName={patrolName} /> |
||||
|
</Card> |
||||
|
<Card |
||||
|
style={{ flex: 1 }} |
||||
|
tabList={tabList} |
||||
|
activeTabKey={activeTabKey1} |
||||
|
onTabChange={(key) => { |
||||
|
onTab1Change(key); |
||||
|
}} |
||||
|
> |
||||
|
<div style={{ marginBottom: 20}}> |
||||
|
<RangePicker /> |
||||
|
<Button style={{marginLeft:20}}>查询</Button> |
||||
|
<Button style={{marginLeft:20}}>导出</Button> |
||||
|
</div> |
||||
|
{contentList[activeTabKey1]} |
||||
|
</Card> |
||||
|
</div> |
||||
|
|
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
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)(MaintenanceTable); |
||||
@ -0,0 +1,229 @@ |
|||||
|
import { connect } from 'react-redux'; |
||||
|
import './protable.less' |
||||
|
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input } from 'antd'; |
||||
|
import ProTable from '@ant-design/pro-table'; |
||||
|
// import { Badge, Button } from 'antd';
|
||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
// @ts-ignore
|
||||
|
import styles from './protable.less'; |
||||
|
const DetailList = (props) => { |
||||
|
const { patrolName } = props; |
||||
|
const [tableListDataSource, setTableListDataSource] = useState([]); |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '问题编号', |
||||
|
key: 'num', |
||||
|
dataIndex: 'num', |
||||
|
align: 'center' |
||||
|
}, { |
||||
|
title: '所属道路', |
||||
|
key: 'road', |
||||
|
dataIndex: 'road', |
||||
|
align: 'center' |
||||
|
}, { |
||||
|
title: '所在路段', |
||||
|
key: 'address', |
||||
|
dataIndex: 'address', |
||||
|
align: 'center' |
||||
|
}, { |
||||
|
title: '缺陷名称', |
||||
|
key: 'name', |
||||
|
dataIndex: 'name', |
||||
|
align: 'center' |
||||
|
}, { |
||||
|
title: '巡查人', |
||||
|
width: 100, |
||||
|
key: 'patrolName', |
||||
|
dataIndex: 'patrolName', |
||||
|
align: 'center' |
||||
|
}, { |
||||
|
title: '上报时间', |
||||
|
key: 'createdAt', |
||||
|
dataIndex: 'createdAt', |
||||
|
valueType: 'dateTime', |
||||
|
align: 'center' |
||||
|
}, { |
||||
|
title: '操作', |
||||
|
width: 200, |
||||
|
key: 'option', |
||||
|
valueType: 'option', |
||||
|
align: 'center', |
||||
|
render: () => [<Button style={{ marginRight: 10 }}>查看</Button>, <Button >删除</Button>] |
||||
|
}, |
||||
|
]; |
||||
|
useEffect(() => { |
||||
|
const source = []; |
||||
|
for (let i = 0; i < 25; i += 1) { |
||||
|
source.push({ |
||||
|
num: `${i + 1}`, |
||||
|
road: `成华大道${i + 2}`, |
||||
|
address: `二仙桥${i + 3}`, |
||||
|
name: `缺失内容${i + 4}`, |
||||
|
patrolName: patrolName, |
||||
|
createdAt: Date.now() - Math.floor(Math.random() * 10000), |
||||
|
key: i, |
||||
|
}); |
||||
|
} |
||||
|
setTableListDataSource(source); |
||||
|
}, [patrolName]); |
||||
|
return ( |
||||
|
<ProTable |
||||
|
columns={columns} |
||||
|
dataSource={tableListDataSource} |
||||
|
pagination={{ |
||||
|
pageSize: 10, |
||||
|
defaultPageSize: 10, |
||||
|
showSizeChanger: false, |
||||
|
}} |
||||
|
rowKey="key" |
||||
|
toolBarRender={false} |
||||
|
search={false} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
const patrolNameListDataSource = []; |
||||
|
|
||||
|
for (let i = 0; i < 10; i += 1) { |
||||
|
patrolNameListDataSource.push({ |
||||
|
patrolName: `老大爷${i}`, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
const IPList = (props) => { |
||||
|
const { onChange, patrolName } = props; |
||||
|
|
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '巡更人员', |
||||
|
key: 'patrolName', |
||||
|
dataIndex: 'patrolName', |
||||
|
align: 'center' |
||||
|
}, |
||||
|
|
||||
|
]; |
||||
|
return ( |
||||
|
<div className='spilce'> |
||||
|
<ProTable |
||||
|
columns={columns} |
||||
|
request={(params, sorter, filter) => { |
||||
|
// 表单搜索项会从 params 传入，传递给后端接口。
|
||||
|
console.log(params, sorter, filter); |
||||
|
return Promise.resolve({ |
||||
|
data: patrolNameListDataSource, |
||||
|
success: true, |
||||
|
}); |
||||
|
}} |
||||
|
rowKey="patrolName" |
||||
|
rowClassName={(record) => { |
||||
|
return record.patrolName === patrolName ? styles['split-row-select-active'] : ''; |
||||
|
}} |
||||
|
// toolbar={{
|
||||
|
// search: {
|
||||
|
// onSearch: (value) => {
|
||||
|
// alert(value);
|
||||
|
// },
|
||||
|
// },
|
||||
|
// }}
|
||||
|
toolBarRender={() => [ |
||||
|
<Input placeholder='输入巡更人员名称'></Input> |
||||
|
]} |
||||
|
options={false} |
||||
|
pagination={false} |
||||
|
search={false} |
||||
|
onRow={(record) => { |
||||
|
return { |
||||
|
onClick: () => { |
||||
|
if (record.patrolName) { |
||||
|
onChange(record.patrolName); |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
}} |
||||
|
/></div> |
||||
|
|
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const PatrolTable = () => { |
||||
|
const [patrolName, setPatrolName] = useState('老大爷0'); |
||||
|
const { RangePicker } = DatePicker; |
||||
|
const tabList = [ |
||||
|
{ |
||||
|
key: 'tab1', |
||||
|
tab: '巡更', |
||||
|
}, { |
||||
|
key: 'tab2', |
||||
|
tab: '巡更轨迹查询', |
||||
|
}, |
||||
|
]; |
||||
|
const contentList = { |
||||
|
tab1: [<div> |
||||
|
<Card style={{ flex: 1 }}> |
||||
|
<DetailList patrolName={patrolName} /> |
||||
|
</Card> |
||||
|
</div>] |
||||
|
}; |
||||
|
const [activeTabKey1, setActiveTabKey1] = useState('tab1'); |
||||
|
const onTab1Change = (key) => { |
||||
|
setActiveTabKey1(key); |
||||
|
}; |
||||
|
return ( |
||||
|
<div className='card-protable'> |
||||
|
<Card > |
||||
|
<IPList onChange={(searchPatrolName) => setPatrolName(searchPatrolName)} patrolName={patrolName} /> |
||||
|
</Card> |
||||
|
<Card |
||||
|
style={{ flex: 1 }} |
||||
|
tabList={tabList} |
||||
|
activeTabKey={activeTabKey1} |
||||
|
onTabChange={(key) => { |
||||
|
onTab1Change(key); |
||||
|
}} |
||||
|
> |
||||
|
{ |
||||
|
activeTabKey1 == 'tab1' ? <div style={{ marginBottom: 20 }}> |
||||
|
<RangePicker /> |
||||
|
<Button style={{ marginLeft: 20 }}>查询</Button> |
||||
|
<Button style={{ marginLeft: 20 }}>导出</Button> |
||||
|
</div> : '' |
||||
|
} |
||||
|
{contentList[activeTabKey1]} |
||||
|
</Card> |
||||
|
</div> |
||||
|
|
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
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)(PatrolTable); |
||||
@ -0,0 +1,42 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import '../style.less'; |
||||
|
import { getDepMessage, getReportStatistic } from "../actions/infor" |
||||
|
import MaintenanceTable from '../components/maintenanceTable'; |
||||
|
const superagent = require('superagent'); |
||||
|
const Maintenance = (props) => { |
||||
|
const { dispatch, user } = props |
||||
|
const [data, setData] = useState() |
||||
|
useEffect(() => { |
||||
|
// dispatch(getDepMessage())
|
||||
|
dispatch(getReportStatistic()) |
||||
|
setData(props) |
||||
|
}, []); |
||||
|
//批量导出
|
||||
|
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}`) |
||||
|
}) |
||||
|
} |
||||
|
return ( |
||||
|
<> <MaintenanceTable data={data} exports={exports} /> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
function mapStateToProps(state) { |
||||
|
const { auth } = state |
||||
|
return { |
||||
|
user: auth.user, |
||||
|
} |
||||
|
} |
||||
|
export default connect(mapStateToProps)(Maintenance); |
||||
@ -0,0 +1,42 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import '../style.less'; |
||||
|
import { getDepMessage, getReportStatistic } from "../actions/infor" |
||||
|
import PatrolTable from '../components/patrolTable'; |
||||
|
const superagent = require('superagent'); |
||||
|
const patrol = (props) => { |
||||
|
const { dispatch, user } = props |
||||
|
const [data, setData] = useState() |
||||
|
useEffect(() => { |
||||
|
// dispatch(getDepMessage())
|
||||
|
dispatch(getReportStatistic()) |
||||
|
setData(props) |
||||
|
}, []); |
||||
|
//批量导出
|
||||
|
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}`) |
||||
|
}) |
||||
|
} |
||||
|
return ( |
||||
|
<> <PatrolTable data={data} exports={exports} /> |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
function mapStateToProps(state) { |
||||
|
const { auth } = state |
||||
|
return { |
||||
|
user: auth.user, |
||||
|
} |
||||
|
} |
||||
|
export default connect(mapStateToProps)(patrol); |
||||
Loading…
Reference in new issue