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

29
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 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
/>
</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,9 +68,21 @@ 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 (
<StyledDiv>
<Paper>
<Typography sx={{ p: 0 }} variant="h6" component="div">
<Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
@ -130,6 +145,8 @@ function ListCreateUpdateDelete(props) {
/>
</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 [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([]);
}
if( typeof depth02SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
//setDepth03List([]);
}
if( typeof depth03SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
//setDepth04List([]);
setDepth02SelectedIndex(undefined);
setDepth03SelectedIndex(undefined);
setDepth04SelectedIndex(undefined);
}
// 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 () {
if( typeof searchCondition !== 'undefined' ) {
@ -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 &&