DBNT
/
kcscDev
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 관리자 - 환경설정 - 위원회 코드관리 목록 구현 건

thkim
thkim 2024-02-23 17:05:34 +09:00
parent 74597f1e5a
commit 655c26f5bb
2 changed files with 111 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
View File

@ -16,7 +16,13 @@ import TextField from '@mui/material/TextField';
import FormDialog from '../../components/alert/FormDialog'; import FormDialog from '../../components/alert/FormDialog';
import styledComponent from "styled-components";
const StyledDiv = styledComponent.div`
.text-item.active {
background-color: #676767;
}
`;
function generate(items, element, onClickListner,nameKey, function generate(items, element, onClickListner,nameKey,
idKey) { idKey) {
@ -24,14 +30,11 @@ function generate(items, element, onClickListner,nameKey,
React.cloneElement(element, { React.cloneElement(element, {
key: value[nameKey], key: value[nameKey],
}, },
<Card fullWidth sx={{ '&': { boxShadow: 'none' } }}> <Card className="text-item" sx={{ '&': { boxShadow: 'none' } }} data-index={index} onClick={(e) => {onClickListner(e, index);}}>
<CardActionArea fullWidth sx={{ px: 1 }}> <CardActionArea sx={{ px: 1 }}>
<ListItemText <ListItemText
primary={value[nameKey]} primary={value[nameKey]}
key={index} key={index}
data-index={index}
onClick={(e) => {onClickListner(e, index);}}
paragraph
/> />
</CardActionArea> </CardActionArea>
</Card>), </Card>),
@ -40,7 +43,7 @@ function generate(items, element, onClickListner,nameKey,
const Demo = styled('div')(({ theme }) => ({ const Demo = styled('div')(({ theme }) => ({
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
})); }));
const Item = styled(Paper)(({ theme }) => ({ const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
@ -65,71 +68,85 @@ function ListCreateUpdateDelete(props) {
}; };
const onClickItem = (e, index) => { const onClickItem = (e, index) => {
// 기존 active를 모두 해제 한다.
let siblingEle = e.currentTarget.parentNode.parentNode.firstChild;
do {
siblingEle.firstChild.classList.remove('active');
} while (siblingEle = siblingEle.nextSibling);
// 선택된 것만 active로 지정한다.
if( Number(e.currentTarget.getAttribute('data-index')) === index ) {
e.currentTarget.classList.add('active');
}
props.setItemIndex(index); props.setItemIndex(index);
}; };
return ( return (
<Paper> <StyledDiv>
<Typography sx={{ p: 0 }} variant="h6" component="div"> <Paper>
<Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}> <Typography sx={{ p: 0 }} variant="h6" component="div">
<Grid item xs={6} md={8} > <Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
<Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item> <Grid item xs={6} md={8} >
</Grid> <Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
<Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}> </Grid>
<Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}> <Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
<IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}> <Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
<AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} /> <IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}>
</IconButton> <AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
</Item>
</Grid>
</Grid>
</Typography>
<Demo>
<List dense={dense}>
{generate(
props.items,
<ListItem
secondaryAction={
<div>
<IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">
<EditIcon />
</IconButton> </IconButton>
<IconButton edge="end" aria-label="delete"> </Item>
<DeleteIcon /> </Grid>
</IconButton> </Grid>
</div> </Typography>
} <Demo>
> <List dense={dense}>
</ListItem>, {generate(
onClickItem, props.items,
props.nameKey, <ListItem
props.idKey secondaryAction={
)} <div>
</List> <IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">
</Demo> <EditIcon />
<FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." > </IconButton>
<TextField <IconButton edge="end" aria-label="delete">
autoFocus <DeleteIcon />
required </IconButton>
margin="dense" </div>
id="insert-org-nm" }
name="insert-org-nm" >
label="명칭" </ListItem>,
type="text" onClickItem,
fullWidth props.nameKey,
variant="standard" props.idKey
/> )}
<TextField </List>
required </Demo>
margin="dense" <FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
id="insert-org-desc" <TextField
name="insert-org-desc" autoFocus
label="위원회 설명" required
type="text" margin="dense"
fullWidth id="insert-org-nm"
variant="standard" name="insert-org-nm"
/> label="명칭"
</FormDialog> type="text"
</Paper> fullWidth
variant="standard"
/>
<TextField
required
margin="dense"
id="insert-org-desc"
name="insert-org-desc"
label="위원회 설명"
type="text"
fullWidth
variant="standard"
/>
</FormDialog>
</Paper>
</StyledDiv>
); );
} }

50
egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx
View File

@ -26,31 +26,43 @@ function CommitteeCodeMgt(props) {
const [depth04List, setDepth04List] = useState([]); const [depth04List, setDepth04List] = useState([]);
const [summaryArray, setSummaryArray] = useState({}); const [summaryArray, setSummaryArray] = useState({});
const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState(); const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState(undefined);
const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState(); const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState(undefined);
const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState(); const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState(undefined);
const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState(); const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState(undefined);
// '중앙건설기술심의'에서 특정 item선택 시, 하위 '총괄위원회'목록을 불러온다. // '중앙건설기술심의'에서 특정 item선택 시, 하위 '총괄위원회'목록을 불러온다.
useEffect(function () { useEffect(function () {
// 여기에서 레벨2를 지정했다는 명확한 분기가 이루어지도록 수정해야 함.
if( typeof depth01SelectedIndex !== 'undefined' ) { if( typeof depth01SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth01List[depth01SelectedIndex].orgId, paramCodeLevel: 'LV_02' }); setSearchCondition({ paramCodeGroup: depth01List[depth01SelectedIndex].orgId, paramCodeLevel: 'LV_02' });
//setDepth02List([]); setDepth02SelectedIndex(undefined);
} setDepth03SelectedIndex(undefined);
if( typeof depth02SelectedIndex !== 'undefined' ) { setDepth04SelectedIndex(undefined);
setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
//setDepth03List([]);
}
if( typeof depth03SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
//setDepth04List([]);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth01SelectedIndex, depth02SelectedIndex, depth03SelectedIndex]); }, [depth01SelectedIndex]);
// '총괄위원회'에서 특정 item선택 시, 하위 '건설기준위원회'목록을 불러온다.
useEffect(function () {
if( typeof depth02SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
setDepth03SelectedIndex(undefined);
setDepth04SelectedIndex(undefined);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth02SelectedIndex]);
// '건설기준위원회'에서 특정 item선택 시, 하위 '실무위원회'목록을 불러온다.
useEffect(function () {
if( typeof depth03SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
setDepth04SelectedIndex(undefined);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth03SelectedIndex]);
// 검색 조건이 변경되면 데이터를 불러온다. // 검색 조건이 변경되면 데이터를 불러온다.
useEffect(function () { useEffect(function () {
if( typeof searchCondition !== 'undefined' ) { if( typeof searchCondition !== 'undefined' ) {
@ -153,10 +165,10 @@ function CommitteeCodeMgt(props) {
}, },
}} }}
> >
<ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} setItemIndex={setDepth01SelectedIndex} nameKey="orgNm" idKey="orgId" /> <ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} itemIndex={depth01SelectedIndex} setItemIndex={setDepth01SelectedIndex} nameKey="orgNm" idKey="orgId" />
<ListCreateUpdateDelete title="총괄위원회" items={depth02List} setItemIndex={setDepth02SelectedIndex} nameKey="orgNm" idKey="orgId" /> <ListCreateUpdateDelete title="총괄위원회" items={depth02List} itemIndex={depth02SelectedIndex} setItemIndex={setDepth02SelectedIndex} nameKey="orgNm" idKey="orgId" />
<ListCreateUpdateDelete title="건설기준위원회" items={depth03List} setItemIndex={setDepth03SelectedIndex} nameKey="orgNm" idKey="orgId" /> <ListCreateUpdateDelete title="건설기준위원회" items={depth03List} itemIndex={depth03SelectedIndex} setItemIndex={setDepth03SelectedIndex} nameKey="orgNm" idKey="orgId" />
<ListCreateUpdateDelete title="실무위원회" items={depth04List} setItemIndex={setDepth04SelectedIndex} nameKey="orgNm" idKey="orgId" /> <ListCreateUpdateDelete title="실무위원회" items={depth04List} itemIndex={depth04SelectedIndex} setItemIndex={setDepth04SelectedIndex} nameKey="orgNm" idKey="orgId" />
</Box> </Box>
{ true && { true &&