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

153
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} >
<Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
</Grid>
<Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
<Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
<IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}>
<AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
</IconButton>
</Item>
</Grid>
</Grid> </Grid>
<Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}> </Typography>
<Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}> <Demo>
<IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}} onClick={handleClickOpen}> <List dense={dense}>
<AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} /> {generate(
</IconButton> props.items,
</Item> <ListItem
</Grid> secondaryAction={
</Grid> <div>
</Typography> <IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">
<Demo> <EditIcon />
<List dense={dense}> </IconButton>
{generate( <IconButton edge="end" aria-label="delete">
props.items, <DeleteIcon />
<ListItem </IconButton>
secondaryAction={ </div>
<div> }
<IconButton sx={{ mx: 0 }} edge="start" aria-label="edit"> >
<EditIcon /> </ListItem>,
</IconButton> onClickItem,
<IconButton edge="end" aria-label="delete"> props.nameKey,
<DeleteIcon /> props.idKey
</IconButton> )}
</div> </List>
} </Demo>
> <FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
</ListItem>, <TextField
onClickItem, autoFocus
props.nameKey, required
props.idKey margin="dense"
)} id="insert-org-nm"
</List> name="insert-org-nm"
</Demo> label="명칭"
<FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." > type="text"
<TextField fullWidth
autoFocus variant="standard"
required />
margin="dense" <TextField
id="insert-org-nm" required
name="insert-org-nm" margin="dense"
label="명칭" id="insert-org-desc"
type="text" name="insert-org-desc"
fullWidth label="위원회 설명"
variant="standard" type="text"
/> fullWidth
<TextField variant="standard"
required />
margin="dense" </FormDialog>
id="insert-org-desc" </Paper>
name="insert-org-desc" </StyledDiv>
label="위원회 설명"
type="text"
fullWidth
variant="standard"
/>
</FormDialog>
</Paper>
); );
} }

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

@ -26,30 +26,42 @@ 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);
setDepth04SelectedIndex(undefined);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth01SelectedIndex]);
// '총괄위원회'에서 특정 item선택 시, 하위 '건설기준위원회'목록을 불러온다.
useEffect(function () {
if( typeof depth02SelectedIndex !== 'undefined' ) { if( typeof depth02SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' }); setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
//setDepth03List([]); setDepth03SelectedIndex(undefined);
setDepth04SelectedIndex(undefined);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth02SelectedIndex]);
// '건설기준위원회'에서 특정 item선택 시, 하위 '실무위원회'목록을 불러온다.
useEffect(function () {
if( typeof depth03SelectedIndex !== 'undefined' ) { if( typeof depth03SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' }); setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
//setDepth04List([]); setDepth04SelectedIndex(undefined);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth01SelectedIndex, depth02SelectedIndex, depth03SelectedIndex]); }, [depth03SelectedIndex]);
// 검색 조건이 변경되면 데이터를 불러온다. // 검색 조건이 변경되면 데이터를 불러온다.
useEffect(function () { useEffect(function () {
@ -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 &&