feat: 관리자 - 환경설정 - 위원회 코드관리 목록 구현 건
parent
74597f1e5a
commit
655c26f5bb
|
|
@ -16,7 +16,13 @@ import TextField from '@mui/material/TextField';
|
|||
|
||||
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,
|
||||
idKey) {
|
||||
|
|
@ -24,14 +30,11 @@ function generate(items, element, onClickListner,nameKey,
|
|||
React.cloneElement(element, {
|
||||
key: value[nameKey],
|
||||
},
|
||||
<Card fullWidth sx={{ '&': { boxShadow: 'none' } }}>
|
||||
<CardActionArea fullWidth sx={{ px: 1 }}>
|
||||
<Card className="text-item" sx={{ '&': { boxShadow: 'none' } }} data-index={index} onClick={(e) => {onClickListner(e, index);}}>
|
||||
<CardActionArea sx={{ px: 1 }}>
|
||||
<ListItemText
|
||||
primary={value[nameKey]}
|
||||
key={index}
|
||||
data-index={index}
|
||||
onClick={(e) => {onClickListner(e, index);}}
|
||||
paragraph
|
||||
key={index}
|
||||
/>
|
||||
</CardActionArea>
|
||||
</Card>),
|
||||
|
|
@ -40,7 +43,7 @@ function generate(items, element, onClickListner,nameKey,
|
|||
|
||||
const Demo = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
}));
|
||||
}));
|
||||
|
||||
const Item = styled(Paper)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
|
||||
|
|
@ -65,71 +68,85 @@ function ListCreateUpdateDelete(props) {
|
|||
};
|
||||
|
||||
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);
|
||||
};
|
||||
return (
|
||||
<Paper>
|
||||
<Typography sx={{ p: 0 }} variant="h6" component="div">
|
||||
<Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
|
||||
<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>
|
||||
<StyledDiv>
|
||||
<Paper>
|
||||
<Typography sx={{ p: 0 }} variant="h6" component="div">
|
||||
<Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
|
||||
<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 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>
|
||||
</Typography>
|
||||
<Demo>
|
||||
<List dense={dense}>
|
||||
{generate(
|
||||
props.items,
|
||||
<ListItem
|
||||
secondaryAction={
|
||||
<div>
|
||||
<IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
</ListItem>,
|
||||
onClickItem,
|
||||
props.nameKey,
|
||||
props.idKey
|
||||
)}
|
||||
</List>
|
||||
</Demo>
|
||||
<FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
|
||||
<TextField
|
||||
autoFocus
|
||||
required
|
||||
margin="dense"
|
||||
id="insert-org-nm"
|
||||
name="insert-org-nm"
|
||||
label="명칭"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
/>
|
||||
<TextField
|
||||
required
|
||||
margin="dense"
|
||||
id="insert-org-desc"
|
||||
name="insert-org-desc"
|
||||
label="위원회 설명"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
/>
|
||||
</FormDialog>
|
||||
</Paper>
|
||||
</Typography>
|
||||
<Demo>
|
||||
<List dense={dense}>
|
||||
{generate(
|
||||
props.items,
|
||||
<ListItem
|
||||
secondaryAction={
|
||||
<div>
|
||||
<IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
</ListItem>,
|
||||
onClickItem,
|
||||
props.nameKey,
|
||||
props.idKey
|
||||
)}
|
||||
</List>
|
||||
</Demo>
|
||||
<FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
|
||||
<TextField
|
||||
autoFocus
|
||||
required
|
||||
margin="dense"
|
||||
id="insert-org-nm"
|
||||
name="insert-org-nm"
|
||||
label="명칭"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
/>
|
||||
<TextField
|
||||
required
|
||||
margin="dense"
|
||||
id="insert-org-desc"
|
||||
name="insert-org-desc"
|
||||
label="위원회 설명"
|
||||
type="text"
|
||||
fullWidth
|
||||
variant="standard"
|
||||
/>
|
||||
</FormDialog>
|
||||
</Paper>
|
||||
</StyledDiv>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,30 +26,42 @@ function CommitteeCodeMgt(props) {
|
|||
const [depth04List, setDepth04List] = useState([]);
|
||||
const [summaryArray, setSummaryArray] = useState({});
|
||||
|
||||
const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState();
|
||||
const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState();
|
||||
const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState();
|
||||
const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState();
|
||||
const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState(undefined);
|
||||
const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState(undefined);
|
||||
const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState(undefined);
|
||||
const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState(undefined);
|
||||
|
||||
|
||||
// '중앙건설기술심의'에서 특정 item선택 시, 하위 '총괄위원회'목록을 불러온다.
|
||||
useEffect(function () {
|
||||
// 여기에서 레벨2를 지정했다는 명확한 분기가 이루어지도록 수정해야 함.
|
||||
if( typeof depth01SelectedIndex !== 'undefined' ) {
|
||||
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' ) {
|
||||
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' ) {
|
||||
setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
|
||||
//setDepth04List([]);
|
||||
setDepth04SelectedIndex(undefined);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [depth01SelectedIndex, depth02SelectedIndex, depth03SelectedIndex]);
|
||||
|
||||
}, [depth03SelectedIndex]);
|
||||
|
||||
// 검색 조건이 변경되면 데이터를 불러온다.
|
||||
useEffect(function () {
|
||||
|
|
@ -153,10 +165,10 @@ function CommitteeCodeMgt(props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} setItemIndex={setDepth01SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="총괄위원회" items={depth02List} setItemIndex={setDepth02SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="건설기준위원회" items={depth03List} setItemIndex={setDepth03SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="실무위원회" items={depth04List} setItemIndex={setDepth04SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} itemIndex={depth01SelectedIndex} setItemIndex={setDepth01SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="총괄위원회" items={depth02List} itemIndex={depth02SelectedIndex} setItemIndex={setDepth02SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="건설기준위원회" items={depth03List} itemIndex={depth03SelectedIndex} setItemIndex={setDepth03SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
<ListCreateUpdateDelete title="실무위원회" items={depth04List} itemIndex={depth04SelectedIndex} setItemIndex={setDepth04SelectedIndex} nameKey="orgNm" idKey="orgId" />
|
||||
|
||||
</Box>
|
||||
{ true &&
|
||||
|
|
|
|||
Loading…
Reference in New Issue