|
|
@ -1,9 +1,11 @@ |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import './protable.less' |
|
|
|
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover, Select } from 'antd'; |
|
|
|
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input, Modal, Spin, Image, message, Popover, Select, Tree } from 'antd'; |
|
|
|
import ProTable from '@ant-design/pro-table'; |
|
|
|
import { DownOutlined, RightOutlined, CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons'; |
|
|
|
import { getReportList, getReportDetail, handleReport } from '../actions/patrol'; |
|
|
|
import React, { useEffect, useState } from 'react'; |
|
|
|
import React, { useEffect, useState, useMemo } from 'react'; |
|
|
|
import { getAllDepUsers } from '../actions/allDepUsers' |
|
|
|
import { httpDel } from '@peace/utils' |
|
|
|
import { PinyinHelper } from '@peace/utils'; |
|
|
|
import PatrolGis from './gis/patrolGis'; |
|
|
@ -302,14 +304,198 @@ const DetailList = (props) => { |
|
|
|
|
|
|
|
|
|
|
|
const PatrolNameList = (props) => { |
|
|
|
const { Search } = Input; |
|
|
|
const [users, setUsers] = useState([]); |
|
|
|
const { onChange, record, userList, loading, activeTabKey1 } = props; |
|
|
|
const { onChange, record, userList, loading, activeTabKey1, dispatch, user } = props; |
|
|
|
const [selectRoad, setSelectRoad] = useState(); |
|
|
|
const [defaultData, setDefaultData] = useState([]); |
|
|
|
const [expandedKeys, setExpandedKeys] = useState([]); |
|
|
|
const [searchValue, setSearchValue] = useState(''); |
|
|
|
const [depAllUser, setDepAllUser] = useState([]) |
|
|
|
const [dataList, setDataList] = useState([]); |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
let departments = [] |
|
|
|
const generateData = (data, _preKey, _tns) => { |
|
|
|
const preKey = _preKey || '0'; |
|
|
|
const tns = _tns || []; |
|
|
|
const children = []; |
|
|
|
|
|
|
|
data.forEach(department => { |
|
|
|
const key = `${preKey}-${department.depId}`; |
|
|
|
const node = { |
|
|
|
title: department.depName.toString(), |
|
|
|
key, |
|
|
|
children: [], |
|
|
|
}; |
|
|
|
|
|
|
|
if (department.users.length > 0) { // 仅当部门有用户时添加子节点
|
|
|
|
department.users.forEach(user => { |
|
|
|
node.children.push({ |
|
|
|
title: user.name.toString(), |
|
|
|
key: `${key}-${user.id}`, |
|
|
|
isLeaf: true, // 用户节点为叶子节点
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (department.children && department.children.length > 0) { |
|
|
|
const childKeys = generateData(department.children, key, node.children); |
|
|
|
children.push(...childKeys); |
|
|
|
} |
|
|
|
|
|
|
|
tns.push(node); |
|
|
|
if (node.children.length > 0 && department.expanded) { // 仅当部门展开时添加子节点
|
|
|
|
children.push(key); |
|
|
|
} |
|
|
|
}); |
|
|
|
return children; |
|
|
|
}; |
|
|
|
if (user?.username === 'SuperAdmin') { |
|
|
|
departments = [...new Set(depAllUser)] |
|
|
|
} else { |
|
|
|
let depAllUserCopy = [] |
|
|
|
depAllUser.map((item) => { |
|
|
|
if (item.depId === user?.departmentId) { |
|
|
|
depAllUserCopy.push(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
departments = [...new Set(depAllUserCopy)] |
|
|
|
} |
|
|
|
|
|
|
|
const processedData = []; |
|
|
|
const expandedKeys = generateData(departments, null, processedData); |
|
|
|
setDefaultData(processedData); |
|
|
|
setDataList(processedData.map(item => ({ key: item.key, title: item.title.toString(), children: item.children }))); |
|
|
|
setExpandedKeys(expandedKeys); |
|
|
|
}, [depAllUser]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(getAllDepUsers()).then((res) => { |
|
|
|
if (res.success) setDepAllUser(res?.payload?.data) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}, []) |
|
|
|
const getParentKey = (key, tree) => { |
|
|
|
let parentKey; |
|
|
|
for (let i = 0; i < tree.length; i++) { |
|
|
|
const node = tree[i]; |
|
|
|
if (node.children) { |
|
|
|
if (node.children.some((item) => item.key === key)) { |
|
|
|
parentKey = node.key; |
|
|
|
} else { |
|
|
|
parentKey = getParentKey(key, node.children); |
|
|
|
} |
|
|
|
} |
|
|
|
if (parentKey) { |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
return parentKey; |
|
|
|
}; |
|
|
|
|
|
|
|
const handleSearch = (value) => { |
|
|
|
const filteredKeys = []; |
|
|
|
const expandedKeys = []; |
|
|
|
|
|
|
|
const loopTreeData = (data) => { |
|
|
|
data.forEach((item) => { |
|
|
|
if (item.title.indexOf(value) > -1) { |
|
|
|
filteredKeys.push(item.key); |
|
|
|
let parentKey = getParentKey(item.key, defaultData); |
|
|
|
while (parentKey) { |
|
|
|
if (!expandedKeys.includes(parentKey)) { |
|
|
|
expandedKeys.push(parentKey); |
|
|
|
} |
|
|
|
parentKey = getParentKey(parentKey, defaultData); |
|
|
|
} |
|
|
|
} |
|
|
|
if (item.children) { |
|
|
|
loopTreeData(item.children); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
loopTreeData(defaultData); |
|
|
|
setSearchValue(value); |
|
|
|
setExpandedKeys(expandedKeys); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleExpand = (expandedKeys) => { |
|
|
|
setExpandedKeys(expandedKeys); |
|
|
|
}; |
|
|
|
|
|
|
|
const renderTreeNodes = (data) => { |
|
|
|
return data.map((item) => { |
|
|
|
const { key, title, children } = item; |
|
|
|
const isLeaf = !children || children.length === 0; |
|
|
|
|
|
|
|
return ( |
|
|
|
<Tree.TreeNode |
|
|
|
key={key} |
|
|
|
title={title} |
|
|
|
icon={isLeaf ? null : ( |
|
|
|
expandedKeys.includes(key) ? <CaretDownOutlined /> : <CaretRightOutlined /> |
|
|
|
)} |
|
|
|
isLeaf={isLeaf} |
|
|
|
> |
|
|
|
{children && children.length > 0 && renderTreeNodes(children)} |
|
|
|
</Tree.TreeNode> |
|
|
|
); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const treeData = useMemo(() => { |
|
|
|
const loop = (data) => |
|
|
|
data.map((item) => { |
|
|
|
const { title, key, children } = item; |
|
|
|
const strTitle = title.toString(); |
|
|
|
const index = strTitle.indexOf(searchValue); |
|
|
|
const beforeStr = strTitle.substring(0, index); |
|
|
|
const afterStr = strTitle.slice(index + searchValue.length); |
|
|
|
const titleNode = index > -1 ? ( |
|
|
|
<span> |
|
|
|
{beforeStr} |
|
|
|
<span style={{ color: '#f50' }}>{searchValue}</span> |
|
|
|
{afterStr} |
|
|
|
</span> |
|
|
|
) : ( |
|
|
|
<span>{strTitle}</span> |
|
|
|
); |
|
|
|
|
|
|
|
if (children && children.length > 0) { |
|
|
|
return { |
|
|
|
title: titleNode, |
|
|
|
key, |
|
|
|
children: loop(children), |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
title: titleNode, |
|
|
|
key, |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
return loop(defaultData); |
|
|
|
}, [searchValue, defaultData]); |
|
|
|
const handleSelect = (selectedKeys, { selected, selectedNodes, node }) => { |
|
|
|
if (selected) { |
|
|
|
if (selectedKeys[0].split("-").length - 1 >= 2) { |
|
|
|
let id = selectedKeys[0].split('-')[selectedKeys[0].split('-').length - 1] |
|
|
|
console.log('id1', id) |
|
|
|
onChange(id); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
console.log('selectedKeys', selectedKeys, selected, selectedNodes, node) |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if (userList && userList instanceof Array && userList.length) { |
|
|
|
// setSelectRoad(userList[0].id)
|
|
|
|
setSelectRoad(userList[0].id) |
|
|
|
// onChange(userList[0]);
|
|
|
|
} |
|
|
|
if (activeTabKey1 == 'tab2') { |
|
|
@ -318,38 +504,38 @@ const PatrolNameList = (props) => { |
|
|
|
|
|
|
|
}, [userList, activeTabKey1]) |
|
|
|
|
|
|
|
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); |
|
|
|
} |
|
|
|
if (loading) { |
|
|
|
return <div>Loading...</div> |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className='spilce'> |
|
|
|
<ProTable |
|
|
|
<div className='spilce' style={{ height: '600px', width: '100%', overflow: 'auto' }} > |
|
|
|
<Search |
|
|
|
placeholder="请输入巡查人名称" |
|
|
|
value={searchValue} |
|
|
|
onChange={(e) => handleSearch(e.target.value)} |
|
|
|
/> |
|
|
|
<Tree |
|
|
|
expandedKeys={expandedKeys} |
|
|
|
onExpand={handleExpand} |
|
|
|
onSelect={handleSelect} |
|
|
|
> |
|
|
|
{renderTreeNodes(treeData)} |
|
|
|
</Tree> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <ProTable |
|
|
|
columns={columns} |
|
|
|
dataSource={users} |
|
|
|
loading={loading} |
|
|
@ -377,7 +563,9 @@ const PatrolNameList = (props) => { |
|
|
|
}, |
|
|
|
}; |
|
|
|
}} |
|
|
|
/></div> |
|
|
|
/> |
|
|
|
*/} |
|
|
|
</div> |
|
|
|
|
|
|
|
); |
|
|
|
}; |
|
|
@ -385,8 +573,8 @@ const PatrolNameList = (props) => { |
|
|
|
|
|
|
|
|
|
|
|
const PatrolTable = (props) => { |
|
|
|
const { user, userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports, pathname } = props; |
|
|
|
const [record, setRecord] = useState(); |
|
|
|
const { clientHeight, user, userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports, pathname } = props; |
|
|
|
const [record, setRecord] = useState(1); |
|
|
|
const [dateRange, setDateRange] = useState(); |
|
|
|
const [selectProjectType, setSelectProjectType] = useState(''); |
|
|
|
const [detailVisible, setDetailVisible] = useState(false) |
|
|
@ -413,7 +601,23 @@ const PatrolTable = (props) => { |
|
|
|
}, [record, dateRange, selectProjectType]) |
|
|
|
|
|
|
|
const queryData = () => { |
|
|
|
let query = { userId: record?.id, reportType: reportType, projectType: selectProjectType, asc: true } |
|
|
|
console.log(record, 'idididid') |
|
|
|
let userId = null |
|
|
|
if (user?.username === 'SuperAdmin' && record === 1) { |
|
|
|
userId = undefined |
|
|
|
} else if (user?.username === 'SuperAdmin' && record !== 1) { |
|
|
|
userId = record |
|
|
|
} else if (user?.username !== 'SuperAdmin' && record === 1) { |
|
|
|
userId = user?.id |
|
|
|
} else if (user?.username !== 'SuperAdmin' && record !== 1) { |
|
|
|
userId = record |
|
|
|
} |
|
|
|
// user?.username === 'SuperAdmin' && record === 1 ? record?.id : record ? record : user?.id,
|
|
|
|
let query = { |
|
|
|
userId, |
|
|
|
reportType: reportType, projectType: selectProjectType, asc: true |
|
|
|
} |
|
|
|
console.log(query, 'query1') |
|
|
|
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') |
|
|
@ -468,13 +672,13 @@ const PatrolTable = (props) => { |
|
|
|
setActiveTabKey1(key); |
|
|
|
}; |
|
|
|
|
|
|
|
const handleChangeRecord = (newRecord) => { |
|
|
|
let target = null; |
|
|
|
if (!record || (newRecord && newRecord.id != record.id)) { |
|
|
|
target = newRecord; |
|
|
|
} |
|
|
|
setRecord(target); |
|
|
|
} |
|
|
|
// const handleChangeRecord = (newRecord) => {
|
|
|
|
// let target = null;
|
|
|
|
// if (!record || (newRecord && newRecord.id != record.id)) {
|
|
|
|
// target = newRecord;
|
|
|
|
// }
|
|
|
|
// setRecord(target);
|
|
|
|
// }
|
|
|
|
|
|
|
|
const handleExport = () => { |
|
|
|
if (reportList && reportList instanceof Array && reportList.length) { |
|
|
@ -487,7 +691,9 @@ const PatrolTable = (props) => { |
|
|
|
<div className='card-protable'> |
|
|
|
<Card > |
|
|
|
<PatrolNameList |
|
|
|
onChange={(record) => handleChangeRecord(record)} |
|
|
|
clientHeight={clientHeight} user={user} |
|
|
|
dispatch={dispatch} |
|
|
|
onChange={(record) => setRecord(record)} |
|
|
|
record={record} |
|
|
|
activeTabKey1={activeTabKey1} |
|
|
|
userList={userList} |
|
|
@ -542,8 +748,8 @@ const PatrolTable = (props) => { |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, depMessage, userList, reportList, reportDetail } = state; |
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, depMessage, userList, reportList, reportDetail, global } = state; |
|
|
|
const pakData = (dep) => { |
|
|
|
return dep.map((d) => { |
|
|
|
return { |
|
|
@ -565,6 +771,8 @@ function mapStateToProps (state) { |
|
|
|
reportListLoading: reportList.isRequesting, |
|
|
|
reportDetail: reportDetail.data, |
|
|
|
reportDetailLoading: reportDetail.isRequesting, |
|
|
|
clientHeight: global.clientHeight, |
|
|
|
|
|
|
|
}; |
|
|
|
} |
|
|
|
export default connect(mapStateToProps)(PatrolTable); |