diff --git a/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx b/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx index 30b570a..3913079 100644 --- a/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx +++ b/egovframe-template-simple-react-contribution/src/components/alert/FormDialog.jsx @@ -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 - + diff --git a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx index f7e0fef..826b282 100644 --- a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx +++ b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx @@ -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], - }, - {onClickListner(e, index);}}> - - - - ), - ); + + let returnValue = []; + let nIndex = 0; + Object.keys(items).forEach(function(key) { + returnValue = [ + ...returnValue, + React.cloneElement(element, { + key, + }, + {onClickListner(e, key);}}> + + + + ), + ]; + 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 ( @@ -99,7 +104,7 @@ function ListCreateUpdateDelete(props) { - + {generate( props.items, - } - > + } + > , onClickItem, props.nameKey, props.idKey )} - - - - - + diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx index b4f1f58..3422ad1 100644 --- a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt.jsx @@ -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}¶mCodeLevel=${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) { }, }} > - - - - + + + + + { true && @@ -186,7 +271,14 @@ function CommitteeCodeMgt(props) { } - + {/* */} diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt/CommitteeCodeRegistrationPopup.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt/CommitteeCodeRegistrationPopup.jsx new file mode 100644 index 0000000..2a7061d --- /dev/null +++ b/egovframe-template-simple-react-contribution/src/pages/admin/config/CommitteeCodeMgt/CommitteeCodeRegistrationPopup.jsx @@ -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 ( + {handleClickCreateCommitteeCodeManagement(props.createCondition);}} > + + + + ); +} + +export default CommitteeCodeRegistrationPopup; \ No newline at end of file diff --git a/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/config/model/CreateCommitteeCodeManagementVO.java b/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/config/model/CreateCommitteeCodeManagementVO.java new file mode 100644 index 0000000..b3fca59 --- /dev/null +++ b/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/config/model/CreateCommitteeCodeManagementVO.java @@ -0,0 +1,2 @@ +package com.dbnt.kcscbackend.admin.config.model;public class CreateCommitteeCodeManagementVO { +}