feat: 관리자 - 환경설정 - 위원회 코드관리 에서 '총괄위원회' 선택 시 '중앙건설기술심의' 항목이 선택되어 있지 않다면 '상위 코드를 선택해주세요.' 문구 보여주도록 수정

thkim
thkim 2024-02-27 17:09:22 +09:00
parent ee6b850bc4
commit dfc40d0a11
5 changed files with 258 additions and 107 deletions

View File

@ -7,7 +7,7 @@ import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
export default function FormDialog( {open, setOpen, title, contentText, children} ) {
export default function FormDialog( {open, setOpen, title, contentText, children, handleOk} ) {
const handleClickOpen = () => {
setOpen(true);
@ -43,7 +43,7 @@ export default function FormDialog( {open, setOpen, title, contentText, children
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>취소</Button>
<Button type="submit">저장</Button>
<Button type="button" onClick={handleOk}>저장</Button>
</DialogActions>
</Dialog>
</React.Fragment>

View File

@ -12,9 +12,6 @@ import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import TextField from '@mui/material/TextField';
import FormDialog from '../../components/alert/FormDialog';
import styledComponent from "styled-components";
@ -26,19 +23,27 @@ const StyledDiv = styledComponent.div`
function generate(items, element, onClickListner,nameKey,
idKey) {
return items.map((value, index) =>
React.cloneElement(element, {
key: value[nameKey],
},
<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}
/>
</CardActionArea>
</Card>),
);
let returnValue = [];
let nIndex = 0;
Object.keys(items).forEach(function(key) {
returnValue = [
...returnValue,
React.cloneElement(element, {
key,
},
<Card className="text-item" sx={{ '&': { boxShadow: 'none' } }} key={key} data-index={nIndex} onClick={(e) => {onClickListner(e, key);}}>
<CardActionArea sx={{ px: 1 }}>
<ListItemText
primary={items[key][nameKey]}
key={key}
/>
</CardActionArea>
</Card>),
];
nIndex++;
});
return returnValue;
}
const Demo = styled('div')(({ theme }) => ({
@ -55,32 +60,32 @@ const Item = styled(Paper)(({ theme }) => ({
function ListCreateUpdateDelete(props) {
const [dense, setDense] = React.useState(false);
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
if( props.itemIndex[props.depthSelectedArrayIndex-1] === undefined ) {
alert('상위 코드를 선택해주세요.');
props.setIsPopupOpen(false);
return false;
}
props.setCreateCondition({...props.createCondition, paramCodeLevel : props.paramCodeLevel, paramOrgId : props.itemIndex[props.depthSelectedArrayIndex-1]});
props.setIsPopupOpen(true);
};
const onClickItem = (e, index) => {
index = Number(index);
// active .
let siblingEle = e.currentTarget.parentNode.parentNode.firstChild;
do {
siblingEle.firstChild.classList.remove('active');
// eslint-disable-next-line no-cond-assign
} while (siblingEle = siblingEle.nextSibling);
// active .
if( Number(e.currentTarget.getAttribute('data-index')) === index ) {
e.currentTarget.classList.add('active');
}
props.setItemIndex(index);
e.currentTarget.classList.add('active');
const myKey = Number(index);
props.itemIndex[props.depthSelectedArrayIndex] = myKey;
let forChangeObject = [...props.itemIndex];
props.setItemIndex(forChangeObject);
};
return (
<StyledDiv>
<Paper>
@ -99,7 +104,7 @@ function ListCreateUpdateDelete(props) {
</Grid>
</Typography>
<Demo>
<List dense={dense} sx={{ px: 0, '&': { height: '253px', overflowY: 'auto'}}}>
<List dense={false} sx={{ px: 0, '&': { height: '253px', overflowY: 'auto'}}}>
{generate(
props.items,
<ListItem
@ -112,38 +117,15 @@ function ListCreateUpdateDelete(props) {
<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>
</Demo>
</Paper>
</StyledDiv>

View File

@ -7,6 +7,8 @@ import * as EgovNet from 'api/egovFetch';
import CommitteeCodeRegistrationPopup from './CommitteeCodeMgt/CommitteeCodeRegistrationPopup';
import ListCreateUpdateDelete from '../../../components/list/ListCreateUpdateDelete'
import ListLabelInputs from '../../../components/list/ListLabelInputs'
@ -19,49 +21,63 @@ import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
function CommitteeCodeMgt(props) {
const [searchCondition, setSearchCondition] = useState({ paramCodeGroup: null, paramCodeLevel: 'LV_01' });
const [createCondition, setCreateCondition] = useState();
const [depth01List, setDepth01List] = useState({});
const [depth02List, setDepth02List] = useState({});
const [depth03List, setDepth03List] = useState({});
const [depth04List, setDepth04List] = useState({});
const [depth01List, setDepth01List] = useState([]);
const [depth02List, setDepth02List] = useState([]);
const [depth03List, setDepth03List] = useState([]);
const [depth04List, setDepth04List] = useState([]);
const [summaryArray, setSummaryArray] = 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);
const [depthSelectedIndex, setDepthSelectedIndex] = useState([]);
// .
const [isCommitteeCodeRegistrationPopupOpen, setIsCommitteeCodeRegistrationPopupOpen] = React.useState(false);
// '' item , '' .
useEffect(function () {
if( typeof depth01SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth01List[depth01SelectedIndex].orgId, paramCodeLevel: 'LV_02' });
setDepth02SelectedIndex(undefined);
setDepth03SelectedIndex(undefined);
setDepth04SelectedIndex(undefined);
}
if( typeof depthSelectedIndex[0] !== "undefined" && depth01List[depthSelectedIndex[0]].orgId !== undefined) {
setSearchCondition({ paramCodeGroup: depth01List[depthSelectedIndex[0]].orgId, paramCodeLevel: 'LV_02' });
setDepth02List({});
setDepth03List({});
setDepth04List({});
depthSelectedIndex[1] = undefined;
depthSelectedIndex[2] = undefined;
depthSelectedIndex[3] = undefined;
let forChangeObject = [...depthSelectedIndex];
setDepthSelectedIndex(forChangeObject);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth01SelectedIndex]);
}, [depthSelectedIndex[0]]);
// '' item , '' .
useEffect(function () {
if( typeof depth02SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth02List[depth02SelectedIndex].orgId, paramCodeLevel: 'LV_03' });
setDepth03SelectedIndex(undefined);
setDepth04SelectedIndex(undefined);
if( typeof depthSelectedIndex[1] !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth02List[depthSelectedIndex[1]].orgId, paramCodeLevel: 'LV_03' });
setDepth03List({});
setDepth04List({});
depthSelectedIndex[2] = undefined;
depthSelectedIndex[3] = undefined;
let forChangeObject = [...depthSelectedIndex];
setDepthSelectedIndex(forChangeObject);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth02SelectedIndex]);
}, [depthSelectedIndex[1]]);
// '' item , '' .
useEffect(function () {
if( typeof depth03SelectedIndex !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth03List[depth03SelectedIndex].orgId, paramCodeLevel: 'LV_04' });
setDepth04SelectedIndex(undefined);
if( typeof depthSelectedIndex[2] !== 'undefined' ) {
setSearchCondition({ paramCodeGroup: depth03List[depthSelectedIndex[2]].orgId, paramCodeLevel: 'LV_04' });
setDepth04List({});
depthSelectedIndex[3] = undefined;
let forChangeObject = [...depthSelectedIndex];
setDepthSelectedIndex(forChangeObject);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [depth03SelectedIndex]);
}, [depthSelectedIndex[2]]);
// .
useEffect(function () {
@ -72,6 +88,13 @@ function CommitteeCodeMgt(props) {
}, [searchCondition]);
useEffect(function () {
if( typeof createCondition !== 'undefined' ) {
console.log('%o', createCondition);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [createCondition]);
const requestOptions = {
@ -81,46 +104,54 @@ function CommitteeCodeMgt(props) {
}
}
const arrayToJson = (myArray, key) => {
let tempObj = {};
// eslint-disable-next-line array-callback-return
myArray.map((value, index) => {
tempObj = {...tempObj, [value[key]] : value};
});
return tempObj;
};
const getList = (searchCondition) => {
EgovNet.requestFetch(`/admin/config/committee-code-management?paramCodeGroup=${searchCondition.paramCodeGroup}&paramCodeLevel=${searchCondition.paramCodeLevel}`,
requestOptions,
function (resp) {
if( searchCondition.paramCodeLevel === 'LV_01' ) {
setDepth01List(resp.result.list);
setDepth01List(arrayToJson(resp.result.list, "orgId"));
} else if( searchCondition.paramCodeLevel === 'LV_02' ) {
setDepth02List(resp.result.list);
setDepth02List(arrayToJson(resp.result.list, "orgId"));
} else if( searchCondition.paramCodeLevel === 'LV_03' ) {
setDepth03List(resp.result.list);
setDepth03List(arrayToJson(resp.result.list, "orgId"));
} else if( searchCondition.paramCodeLevel === 'LV_04' ) {
setDepth04List(resp.result.list);
setDepth04List(arrayToJson(resp.result.list, "orgId"));
}
}
);
);
}
useEffect(function () {
setSummaryArray(
{
"중앙건설기술심의" : depth01List[depth01SelectedIndex] && depth01List[depth01SelectedIndex].orgNm ? depth01List[depth01SelectedIndex].orgNm : "",
"총괄위원회" : depth02List[depth02SelectedIndex] && depth02List[depth02SelectedIndex].orgNm ? depth02List[depth02SelectedIndex].orgNm : "",
"건설기준위원회" : depth03List[depth03SelectedIndex] && depth03List[depth03SelectedIndex].orgNm ? depth03List[depth03SelectedIndex].orgNm : "",
"실무위원회" : depth04List[depth04SelectedIndex] && depth04List[depth04SelectedIndex].orgNm ? depth04List[depth04SelectedIndex].orgNm : "",
"중앙건설기술심의" : depth01List[depthSelectedIndex[0]] && depth01List[depthSelectedIndex[0]].orgNm ? depth01List[depthSelectedIndex[0]].orgNm : "",
"총괄위원회" : depth02List[depthSelectedIndex[1]] && depth02List[depthSelectedIndex[1]].orgNm ? depth02List[depthSelectedIndex[1]].orgNm : "",
"건설기준위원회" : depth03List[depthSelectedIndex[2]] && depth03List[depthSelectedIndex[2]].orgNm ? depth03List[depthSelectedIndex[2]].orgNm : "",
"실무위원회" : depth04List[depthSelectedIndex[3]] && depth04List[depthSelectedIndex[3]].orgNm ? depth04List[depthSelectedIndex[3]].orgNm : "",
}
);
console.log(`${depth01List[depth01SelectedIndex]}[${depth01SelectedIndex}]`);
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
depth01List,
depth02List,
depth03List,
depth04List,
depth01SelectedIndex,
depth02SelectedIndex,
depth03SelectedIndex,
depth04SelectedIndex]);
depthSelectedIndex
]);
const Location = React.memo(function Location() {
return (
@ -165,10 +196,64 @@ function CommitteeCodeMgt(props) {
},
}}
>
<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" />
<ListCreateUpdateDelete
title="중앙건설기술심의"
items={depth01List}
itemIndex={depthSelectedIndex}
setItemIndex={setDepthSelectedIndex}
depthSelectedArrayIndex={0}
createCondition={createCondition}
setCreateCondition={setCreateCondition}
paramCodeLevel="LV_01"
upParamOrgId="00"
nameKey="orgNm"
idKey="orgId"
isPopupOpen = {isCommitteeCodeRegistrationPopupOpen}
setIsPopupOpen = {setIsCommitteeCodeRegistrationPopupOpen}
/>
<ListCreateUpdateDelete
title="총괄위원회"
items={depth02List}
itemIndex={depthSelectedIndex}
setItemIndex={setDepthSelectedIndex}
depthSelectedArrayIndex={1}
createCondition={createCondition}
setCreateCondition={setCreateCondition}
paramCodeLevel="LV_02"
nameKey="orgNm"
idKey="orgId"
isPopupOpen = {isCommitteeCodeRegistrationPopupOpen}
setIsPopupOpen = {setIsCommitteeCodeRegistrationPopupOpen}
/>
<ListCreateUpdateDelete
title="건설기준위원회"
items={depth03List}
itemIndex={depthSelectedIndex}
setItemIndex={setDepthSelectedIndex}
depthSelectedArrayIndex={2}
createCondition={createCondition}
setCreateCondition={setCreateCondition}
paramCodeLevel="LV_03"
nameKey="orgNm"
idKey="orgId"
isPopupOpen = {isCommitteeCodeRegistrationPopupOpen}
setIsPopupOpen = {setIsCommitteeCodeRegistrationPopupOpen}
/>
<ListCreateUpdateDelete
title="실무위원회"
items={depth04List}
itemIndex={depthSelectedIndex}
setItemIndex={setDepthSelectedIndex}
depthSelectedArrayIndex={3}
createCondition={createCondition}
setCreateCondition={setCreateCondition}
paramCodeLevel="LV_04"
nameKey="orgNm"
idKey="orgId"
isPopupOpen = {isCommitteeCodeRegistrationPopupOpen}
setIsPopupOpen = {setIsCommitteeCodeRegistrationPopupOpen}
/>
</Box>
{ true &&
@ -186,7 +271,14 @@ function CommitteeCodeMgt(props) {
</Box>
}
<CommitteeCodeRegistrationPopup
open={isCommitteeCodeRegistrationPopupOpen}
setOpen={setIsCommitteeCodeRegistrationPopupOpen}
createCondition={createCondition}
setCreateCondition={setCreateCondition}
searchCondition={searchCondition}
setSearchCondition={setSearchCondition}
/>
{/* <!--// 본문 --> */}
</div>
</div>

View File

@ -0,0 +1,75 @@
import React from 'react';
import TextField from '@mui/material/TextField';
import * as EgovNet from 'api/egovFetch';
import FormDialog from '../../../../components/alert/FormDialog';
function CommitteeCodeRegistrationPopup(props) {
const handleClickCreateCommitteeCodeManagement = (createCondition) => {
if( createCondition.paramOrgId === undefined ) {
alert('상위 코드를 선택해주세요.');
props.setOpen(false);
return false;
}
const formData = new FormData();
for (let key in createCondition) {
formData.append(key, createCondition[key]);
}
const requestOptions = {
method: "POST",
body: formData,
};
EgovNet.requestFetch(`/admin/config/committee-code-management`,
requestOptions,
function (resp) {
//window.location.reload();
// .
props.setSearchCondition({...props.searchCondition, paramCodeLevel : props.createCondition.paramCodeLevel});
props.setOpen(false);
}
);
}
const handleTextFieldChange = (event) => {
const elName = event.target.getAttribute('name');
const elValue = event.target.value;
props.setCreateCondition({...props.createCondition, [elName]:elValue});
};
return (
<FormDialog open={props.open} setOpen={props.setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." handleOk={(e) => {handleClickCreateCommitteeCodeManagement(props.createCondition);}} >
<TextField
autoFocus
required
margin="dense"
id="insert-org-nm"
name="paramOrgNm"
label="명칭"
type="text"
fullWidth
variant="standard"
onChange={handleTextFieldChange}
/>
<TextField
required
margin="dense"
id="insert-org-desc"
name="paramOrgDesc"
label="위원회 설명"
type="text"
fullWidth
variant="standard"
onChange={handleTextFieldChange}
/>
</FormDialog>
);
}
export default CommitteeCodeRegistrationPopup;

View File

@ -0,0 +1,2 @@
package com.dbnt.kcscbackend.admin.config.model;public class CreateCommitteeCodeManagementVO {
}