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