import { connect } from 'react-redux'; import './protable.less' import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover } from 'antd'; import ProTable from '@ant-design/pro-table'; import { getReportList, getReportDetail } from '../actions/patrol'; import React, { useEffect, useState } from 'react'; import { httpDel } from '@peace/utils' import { PinyinHelper } from '@peace/utils'; import PatrolGis from './gis/patrolGis'; // @ts-ignore import styles from './protable.less'; import moment from 'moment'; const DetailForm = (props) => { const { visible, data, handleClose, loading } = props; const keyList = [ { key: '编号', name: 'id' }, { key: '工程类型', name: 'projectType' }, { key: '所在路段', name: 'road' }, { key: '具体位置', name: 'address' }, { key: '巡查内容', name: 'content' }, { key: '病害照片', name: 'scenePic' }, ]; const renderContent = (data) => { if (data) { // Object.keys(data).map(key => { // }) return keyList.map(obj => { return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}> <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span> { obj.name != 'scenePic' ? <Input style={{ width: '70%' }} value={obj.name == 'id' ? moment(data.time).format("YYYYMMDD") * 10000 + data.id : data[obj.name]} disabled /> : <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}> { data.scenePic && data.scenePic instanceof Array ? data.scenePic.map(imgSrc => { return <div style={{ width: '44%', margin: 6 }}> <Image src={imgSrc} width={'100%'} style={{ marginBottom: 4 }} /> </div> }) : '暂无图片' } </div> } </div> }) } else { return '暂无数据' } } return ( <Modal visible={visible} footer={null} onCancel={handleClose} title={'巡更管理详情'} > <Spin spinning={loading}> {renderContent(data)} </Spin> </Modal> ) } const DetailList = (props) => { const { reportList, loading, dispatch, handleOpen, handelRefresh } = props; const [visible, setVisible] = useState(false) const [selectRecord, setSelectRecord] = useState(); const checkDetail = (record) => { dispatch(getReportDetail(record.id)) } const handleRemove = (record) => { let url = 'report/{reportId}'; const actionType = "DEL_REPORT_RECORD"; const msg = {} if (record) { url = url.replace('{reportId}', record.id) httpDel(dispatch, { url, actionType, msg }).then(res => { if (res.success) { message.success("记录删除成功"); handelRefresh() } else { message.error("记录删除失败") } }) } } const columns = [ { title: '编号', key: 'id', dataIndex: 'id', align: 'center', render: (text, record) => { return moment(record.time).format("YYYYMMDD") * 10000 + record.id; } }, { title: '工程类型', key: 'projectType', dataIndex: 'projectType', align: 'center', }, { title: '所属道路', key: 'road', dataIndex: 'road', align: 'center' }, { title: '所在路段', key: 'address', dataIndex: 'address', align: 'center', render: (text, record) => { return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}` } }, { title: '具体内容', key: 'content', dataIndex: 'content', align: 'center' }, { title: '巡查人', width: 100, key: 'userName', dataIndex: 'userName', align: 'center', render: (text, record) => { return record?.user?.name || '' } }, { title: '上报时间', key: 'time', dataIndex: 'time', valueType: 'dateTime', align: 'center' }, { title: '操作', width: 160, key: 'option', valueType: 'option', align: 'center', render: (text, record) => { return [ <Button onClick={() => { checkDetail(record); handleOpen(); }} style={{ marginRight: 10 }}>查看</Button>, <Popover content={[ <div style={{ width: '100%', height: 30 }}> <Button onClick={() => setVisible(false)} style={{ float: "right" }} >否</Button> <Button type="primary" onClick={() => handleRemove(record)} style={{ marginRight: 8, float: "right" }} >是</Button> </div> ]} visible={selectRecord == record.id && visible} trigger="click" onClick={() => setSelectRecord(record.id)} title="是否删除该记录?" onVisibleChange={(newVisible) => setVisible(newVisible)} > <Button>删除</Button> </Popover> ] } }, ]; return ( <ProTable columns={columns} dataSource={reportList} loading={loading} pagination={{ pageSize: 10, defaultPageSize: 10, showSizeChanger: false, }} rowKey="key" toolBarRender={false} search={false} /> ); }; const PatrolNameList = (props) => { const [users, setUsers] = useState([]); const { onChange, record, userList, loading } = props; const [selectRoad, setSelectRoad] = useState(); useEffect(() => { if (userList && userList instanceof Array && userList.length) { setSelectRoad(userList[0].id) // onChange(userList[0]); } }, [userList]) const columns = [ { title: '巡更人员', key: 'name', dataIndex: 'name', align: 'center' }, ]; useEffect(() => { if (userList) { setUsers(userList) } }, [userList]) var timer = null; const doUserNameSearch = (e) => { const name = e.target.value; if (timer) { clearTimeout(timer) } else { setTimeout(() => { let users = userList.filter(user => PinyinHelper.isSearchMatched(user.name, name)); setUsers(users); }, 500); } } return ( <div className='spilce'> <ProTable columns={columns} dataSource={users} loading={loading} rowKey="name" rowClassName={(record) => { return record.id == selectRoad ? 'list-row-actived' : ''; }} toolBarRender={() => [ <Input placeholder='输入巡更人员名称' onChange={doUserNameSearch} ></Input> ]} options={false} pagination={false} search={false} onRow={(record) => { return { onClick: () => { if (record) { // console.log('record:', record) setSelectRoad(record.id); onChange(record); } }, }; }} /></div> ); }; const PatrolTable = (props) => { const { userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading } = props; const [record, setRecord] = useState(); const [dateRange, setDateRange] = useState(); const [detailVisible, setDetailVisible] = useState(false) const [activeTabKey1, setActiveTabKey1] = useState('tab1'); const { RangePicker } = DatePicker; useEffect(() => { if (userList && userList instanceof Array) { setRecord(userList[0]); } }, [userList]) useEffect(() => { if (record) { queryData(); } }, [record, dateRange]) const queryData = () => { let query = { userId: record.id, reportType: 'patrol' } if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) { query.startTime = moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss') query.endTime = moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss') } dispatch(getReportList(query)); } useEffect(() => { if (activeTabKey1 && activeTabKey1 == 'tab2') { setRecord(null); } else if (activeTabKey1 && activeTabKey1 == 'tab1') { setRecord(userList[0]); } }, [activeTabKey1]) const handelRefresh = () => { let query = { userId: record.id, reportType: 'patrol' } dispatch(getReportList(query)); } const handleClose = () => { setDetailVisible(false) } const handleOpen = () => { setDetailVisible(true) } const tabList = [ { key: 'tab1', tab: '巡更', }, { key: 'tab2', tab: '巡更轨迹查询', }, ]; const contentList = { tab1: [<div> <Card style={{ flex: 1 }}> <DetailList reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} handelRefresh={handelRefresh} /> </Card> </div>], tab2: <PatrolGis userId={(record || {}).id} dispatch={dispatch} reportList={reportList} /> }; const onTab1Change = (key) => { setActiveTabKey1(key); }; const handleChangeRecord = (newRecord) => { let target = null; if (!record || newRecord.id != record.id) { target = newRecord; } setRecord(target); } return ( <div className='card-protable'> <Card > <PatrolNameList onChange={(record) => handleChangeRecord(record)} record={record} userList={userList} loading={userLoading} /> </Card> <Card style={{ flex: 1 }} tabList={tabList} activeTabKey={activeTabKey1} onTabChange={(key) => { onTab1Change(key); }} > { activeTabKey1 == 'tab1' ? <div style={{ marginBottom: 20 }}> <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} /> <Button style={{ marginLeft: 20 }}>查询</Button> <Button style={{ marginLeft: 20 }}>导出</Button> </div> : '' } {contentList[activeTabKey1]} <DetailForm visible={detailVisible} handleClose={handleClose} data={reportDetail} loading={reportDetailLoading} /> </Card> </div> ); }; function mapStateToProps(state) { const { auth, depMessage, userList, reportList, reportDetail } = state; const pakData = (dep) => { return dep.map((d) => { return { title: d.name, value: d.id, children: pakData(d.subordinate) } }) } let depData = pakData(depMessage.data || []) return { user: auth.user, depMessage: depMessage.data || [], depLoading: depMessage.isRequesting, depData, userList: userList.data || [], userLoading: userList.isRequesting, reportList: reportList.data, reportListLoading: reportList.isRequesting, reportDetail: reportDetail.data, reportDetailLoading: reportDetail.isRequesting, }; } export default connect(mapStateToProps)(PatrolTable);