128 lines
3.5 KiB
JavaScript
128 lines
3.5 KiB
JavaScript
import React, { useMemo, useRef, useState } from 'react';
|
|
import PanelBox from '../../components/PanelBox';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { SLGC_TYPES } from '../../consts';
|
|
import { IconButton, InputBase, makeStyles, Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@material-ui/core';
|
|
import { Search } from '@material-ui/icons';
|
|
import useRequest from '../../../../utils/useRequest';
|
|
import { DcpjPromise } from '../../../../models/_/dcpj';
|
|
import DpTableRow from '../../../../layouts/mui/DpTableRow';
|
|
import DpTableCell from '../../../../layouts/mui/DpTableCell';
|
|
import { openRecordPop } from '../../MapCtrl/_';
|
|
import { adnmExact, adnmZhen } from '../../../../models/_/adcd';
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
},
|
|
|
|
toolbar: {
|
|
marginTop: '0.8rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexShrink: 0,
|
|
marginBottom: '0.8rem',
|
|
},
|
|
|
|
table: {
|
|
flexGrow: 1,
|
|
height: '20rem',
|
|
marginBottom: '0.5rem'
|
|
},
|
|
|
|
input: {
|
|
marginLeft: '0.8rem',
|
|
flex: 1,
|
|
},
|
|
iconButton: {
|
|
padding: '0.6rem',
|
|
},
|
|
});
|
|
|
|
function SlgcList({ style }) {
|
|
const classes = useStyles();
|
|
|
|
const [search, setSearch] = useState('');
|
|
|
|
const listType = useSelector(s => s.slgcview.listType);
|
|
const dispatch = useDispatch();
|
|
const inputRef = useRef();
|
|
|
|
const { data } = useRequest(DcpjPromise[listType].get, listType);
|
|
|
|
const filterData = useMemo(() => {
|
|
if (!data) {
|
|
return [];
|
|
}
|
|
|
|
return data.filter((o) => {
|
|
if (search && o.NAME.indexOf(search) < 0) {
|
|
return false
|
|
}
|
|
return true;
|
|
});
|
|
}, [data, search])
|
|
|
|
const doSearch = () => {
|
|
setSearch(inputRef.current.value);
|
|
}
|
|
|
|
const searchPressed = (e) => {
|
|
if (e.keyCode === 13) {
|
|
doSearch();
|
|
}
|
|
}
|
|
|
|
const flyTo = (record) => {
|
|
openRecordPop(dispatch, listType, record, true);
|
|
}
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title={"水利工程:" + SLGC_TYPES[listType]}
|
|
color="purple"
|
|
>
|
|
<div className={classes.root}>
|
|
<Paper className={classes.toolbar}>
|
|
<InputBase
|
|
className={classes.input}
|
|
placeholder="名称过滤"
|
|
inputRef={inputRef}
|
|
onKeyDown={searchPressed}
|
|
/>
|
|
<IconButton onClick={doSearch} className={classes.iconButton} aria-label="search">
|
|
<Search />
|
|
</IconButton>
|
|
</Paper>
|
|
<div className={classes.table}>
|
|
<TableContainer style={{ height: '100%' }}>
|
|
<Table size="small" stickyHeader>
|
|
<TableHead>
|
|
<TableRow>
|
|
<DpTableCell align="left" style={{ width: '60%' }}>名称</DpTableCell>
|
|
<DpTableCell align="right" style={{ width: '40%' }}>行政区划</DpTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{filterData.map((row) => (
|
|
<DpTableRow key={row.PID}>
|
|
<DpTableCell component="th" scope="row">
|
|
<div className="table-ellipsis cursor-pointer" onClick={() => flyTo(row)}>{row.NAME}</div>
|
|
</DpTableCell>
|
|
<DpTableCell align="right">{adnmExact(row.ADCD)}</DpTableCell>
|
|
</DpTableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</div>
|
|
</div>
|
|
</PanelBox>
|
|
)
|
|
}
|
|
|
|
export default SlgcList;
|