관리자 - 위원회관리> 진행현황 관리> 자세히 보기 대략적인 구현

thkim
thkim 2024-03-08 09:20:10 +09:00
parent fba3342c69
commit 31e8d91c15
5 changed files with 669 additions and 2 deletions

View File

@ -109,6 +109,9 @@ const URL = {
// 관리자 - 위원회 관리
ADMIN__COMMITTEE__PROGRESS_STATUS : "/admin/committee/progress-status", // 위원회 관리/진행현황 관리
ADMIN__COMMITTEE__PROGRESS_STATUS__DETAIL : "/admin/committee/progress-status/detail", // 위원회 관리/진행현황 관리/진행현황 관리 상세
ADMIN__COMMITTEE__PROGRESS_STATUS__CREATE : "/admin/committee/progress-status/create", // 위원회 관리/진행현황 관리/진행현황 관리 생성
ADMIN__COMMITTEE__PROGRESS_STATUS__MODIFY : "/admin/committee/progress-status/modify", // 위원회 관리/진행현황 관리/진행현황 관리 수정
ADMIN__COMMITTEE__SCHEDULES : "/admin/committee/schedules", // 위원회 관리/위원회 일정 관리
ADMIN__COMMITTEE__SCHEDULES__DETAIL : "/admin/committee/schedules/detail", // 위원회 관리/위원회 일정 관리/일정관리상세
ADMIN__COMMITTEE__SCHEDULES__CREATE : "/admin/committee/schedules/create", // 위원회 관리/위원회 일정 관리/일정관리생성

View File

@ -190,7 +190,7 @@ function ProgressStatus(props) {
<div className='list_item' key={it.seq}>
<div>{it.number}</div>
<div>{it.drftTypeNm}</div>
<div>{it.categoryNm}<br /><Link to={URL.MAIN} className="home">{it.title}</Link></div>
<div>{it.categoryNm}<br /><Link to={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__DETAIL} state={{drftSeq: it.seq}} className="home">{it.title}</Link></div>
<div>{it.orgNm}</div>
<div>진행단계표시</div>
<div>{it.regDate}</div>

View File

@ -0,0 +1,173 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import CODE from 'constants/code';
import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
function SchedulesDetail(props) {
console.group("EgovAdmindetailItem");
console.log("EgovAdmindetailItem [props] : ", props);
const navigate = useNavigate();
const location = useLocation();
const [detailItem, setDetailItem] = useState({});
const retrieveDetail = () => {
const retrieveDetailURL = `/admin/committee/progress-status/${location.state?.drftSeq}`;
const requestOptions = {
method: "GET",
headers: {
'Content-type': 'application/json',
}
}
EgovNet.requestFetch(retrieveDetailURL,
requestOptions,
function (resp) {
setDetailItem(resp.result.item);
}
);
}
const onClickDeleteSchedule = (drftSeq) => {
const deleteBoardURL = `/admin/committee/progress-status/${drftSeq}`;
const requestOptions = {
method: "DELETE",
headers: {
'Content-type': 'application/json',
}
}
EgovNet.requestFetch(deleteBoardURL,
requestOptions,
(resp) => {
console.log("====>>> Schdule delete= ", resp);
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
alert("게시글이 삭제되었습니다.")
navigate(URL.ADMIN__COMMITTEE__SCHEDULES ,{ replace: true });
} else {
// alert("ERR : " + resp.message);
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
}
);
}
useEffect(function () {
retrieveDetail();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
console.groupEnd("EgovAdmindetailItem");
return (
<div className="container">
<div className="c_wrap">
{/* <!-- Location --> */}
<div className="location">
<ul>
<li><Link to={URL.MAIN} className="home">Home</Link></li>
<li><Link to={URL.ADMIN}>사이트관리</Link></li>
<li>위원회관리</li>
<li>진행현황 관리</li>
</ul>
</div>
{/* <!--// Location --> */}
<div className="layout">
{/* <!-- Navigation --> */}
<EgovLeftNav></EgovLeftNav>
{/* <!--// Navigation --> */}
<div className="contents SITE_GALLARY_VIEW" id="contents">
{/* <!-- 본문 --> */}
<div className="top_tit">
<h1 className="tit_1">진행현황 관리</h1>
</div>
{/* <!-- 게시판 상세보기 --> */}
<div className="board_view2">
<dl>
<dt>안건</dt>
<dd>{detailItem.title}</dd>
</dl>
<dl>
<dt>기준코드</dt>
<dd>{detailItem.standardCode}</dd>
</dl>
<dl>
<dt>구분</dt>
<dd>{detailItem.drftTypeNm}</dd>
</dl>
<dl>
<dt>회의일자</dt>
<dd>{detailItem.regDate}</dd>
</dl>
<dl>
<dt>위원회</dt>
<dd> {detailItem.orgNm}</dd>
</dl>
<dl>
<dt>회의담당자</dt>
<dd>{detailItem.drftConfeCharger}</dd>
</dl>
<dl>
<dt>회의실 비밀번호</dt>
<dd>{detailItem.drftConfePw}</dd>
</dl>
<dl>
<dt>사전검토자료</dt>
<dd>{detailItem.seq}</dd>
</dl>
<dl>
<dt>사전검토양식</dt>
<dd>{detailItem.seq}</dd>
</dl>
<dl>
<dt>관계기관의견</dt>
<dd>{detailItem.seq}</dd>
</dl>
<dl>
<dt>조치계획서</dt>
<dd>{detailItem.seq}</dd>
</dl>
<dl>
<dt>조치결과서</dt>
<dd>{detailItem.seq}</dd>
</dl>
<dl>
<dt>회의 안건</dt>
<dd>{detailItem.drftSummery}</dd>
</dl>
<dl>
<dt>회의 내용</dt>
<dd>{detailItem.seq}</dd>
</dl>
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="right_col btn1">
<Link to={URL.ADMIN__COMMITTEE__PROGRESS_STATUS} className="btn btn_blue_h46 w_100">목록</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}
</div>
{/* <!-- 게시판 상세보기 --> */}
{/* <!--// 본문 --> */}
</div>
</div>
</div>
</div>
);
}
export default SchedulesDetail;

View File

@ -0,0 +1,483 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import DatePicker from "react-datepicker";
import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import CODE from 'constants/code';
import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
import 'react-datepicker/dist/react-datepicker.css';
import styled from "styled-components";
import { makeStyles } from "@mui/styles";
const useStyles = makeStyles(() => ({
shake: {
animation: "$description 15s",
animationIterationCount: "1"
},
"@keyframes description": {
"0%": { opacity: 0, transform: "translateY(0)" },
"15%": { transform: "translateY(-4px, 0)" },
"30%": { transform: "translateY(6px, 0)" },
"45%": { transform: "translateY(-4px, 0)" },
"60%": { transform: "translateY(6px, 0)" },
"100%": { opacity: 1, transform: "translateY(0)" }
}
}));
const StyledDiv = styled.div`
.org-under-id {
margin-left: 20px;
@media only screen and (max-width: 768px) {
display: block;
margin-left: 0px;
margin-top: 20px;
}
}
.f_select.w_250 {
@media only screen and (max-width: 768px) {
width: 100%;
}
}
.f_input {
@media only screen and (max-width: 768px) {
width: 100%;
}
}
`;
function SchedulesEdit(props) {
console.group("EgovAdminScheduleEdit");
console.log("[Start] EgovAdminScheduleEdit ------------------------------");
console.log("EgovAdminScheduleEdit [props] : ", props);
const classes = useStyles();
const [isShake, setShake] = useState(false);
//${location.state?.schdulId
const getDateFourteenDigit = (date) => {
return `${getYYYYMMDD(date).toString()}${makeTwoDigit(date.getHours())}${makeTwoDigit(date.getMinutes())}${makeTwoDigit(date.getSeconds())}`;
}
const getYYYYMMDD = (date) => {
return date.getFullYear().toString() + makeTwoDigit(Number(date.getMonth() + 1)) + makeTwoDigit(date.getDate());
}
const makeTwoDigit = (number) => {
return number < 10 ? "0" + number : number.toString();
}
const navigate = useNavigate();
const location = useLocation();
console.log("EgovAdminScheduleEdit [location] : ", location);
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
const [scheduleDetail, setScheduleDetail] = useState
(
{
startDate: new Date(),
endDate: new Date(),
eventId : 0,
}
);
const [schdulBgndeHH, setSchdulBgndeHH] = useState();
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
const [scheduleInit, setScheduleInit] = useState({});
const [scheduleApiOrgApiDepthList, setScheduleApiOrgApiDepthList] = useState({ });
const initMode = () => {
// props.mode .
switch (props.mode) {
case CODE.MODE_CREATE:
setModeInfo({
...modeInfo,
modeTitle: "등록",
method : "POST",
editURL: '/schedule'
});
break;
case CODE.MODE_MODIFY:
setModeInfo({
...modeInfo,
modeTitle: "수정",
method : "PUT",
editURL: '/schedule'
});
break;
default:
navigate({pathname: URL.ERROR}, {state: {msg : ""}});
}
retrieveDetail();
}
const convertDate = (str) => {
let year = str.substring(0, 4);
let month = str.substring(4, 6);
let date = str.substring(6, 8);
let hour = str.substring(8, 10);
let minute = str.substring(10, 12);
return new Date(year, month - 1, date, hour, minute)
}
const requestOptions = {
method: "GET",
headers: {
'Content-type': 'application/json'
}
}
const retrieveDetail = () => {
EgovNet.requestFetch("/schedule/init",
requestOptions,
function (resp) {
setScheduleInit(
resp
);
if (modeInfo.mode === CODE.MODE_CREATE) {// /
setScheduleDetail({
...scheduleDetail,
schdulBgnde: location.state.iUseDate,
schdulEndde: location.state.iUseDate,
startDate: convertDate(location.state.iUseDate),
endDate: convertDate(location.state.iUseDate),
});
return;
}
const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
const requestOptions = {
method: "GET",
headers: {
'Content-type': 'application/json'
}
}
EgovNet.requestFetch(retrieveDetailURL,
requestOptions,
function (resp) {
let rawScheduleDetail = resp.result;
//
setScheduleDetail({
...scheduleDetail,
...rawScheduleDetail,
startDate: convertDate(rawScheduleDetail.schdulBgnde),
endDate: convertDate(rawScheduleDetail.schdulEndde),
});
}
);
}
);
}
const updateSchedule = () => {
const formData = new FormData();
for (let key in scheduleDetail) {
if ( key === 'startDate' ) {
formData.append(key, getDateFourteenDigit( scheduleDetail[key] ));
} else if( key === 'endDate' ) {
formData.append(key, getDateFourteenDigit( scheduleDetail[key] ));
} else {
formData.append(key, scheduleDetail[key]);
}
console.log("scheduleDetail [%s] ", key, scheduleDetail[key]);
}
if ( formValidator(formData) ) {
const requestOptions = {
method: modeInfo.method,
body: formData
}
if (modeInfo.mode === CODE.MODE_MODIFY) {
modeInfo.editURL = `${modeInfo.editURL}/${location.state?.schdulId}`;
}
EgovNet.requestFetch(modeInfo.editURL,
requestOptions,
(resp) => {
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
alert('일정이 등록되었습니다.');
navigate({ pathname: URL.ADMIN__COMMITTEE__SCHEDULES__DETAIL }, {state: {schdulId : resp.result?.schdulId}});
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
}
);
}
}
const formValidator = (formData) => {
if (formData.get('divMeet') === null || formData.get('divMeet') === "") {
alert("구분을 선택해 주세요.");
return false;
}
if (formData.get('upCommittee') === null || formData.get('upCommittee') === "") {
alert("심의위원회 첫 번째 값을 선택해 주세요.");
return false;
}
if (formData.get('committee') === null || formData.get('committee') === "") {
alert("심의위원회 두 번째 값을 선택해 주세요.");
return false;
}
if (formData.get('title') === null || formData.get('title') === "") {
alert("제목을 입력해 주세요.");
return false;
}
if (formData.get('location') === null ||formData.get('location') === "") {
alert("장소를 입력해 주세요.");
return false;
}
if (formData.get('contents') === null ||formData.get('contents') === "") {
alert("내용을 입력해 주세요.");
return false;
}
if (formData.get('schdulBgnde') > formData.get('schdulEndde')) {
alert("종료일시는 시작일시보다 앞 설 수 없습니다.");
//return false;
}
return true;
}
useEffect(function () {
initMode();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(function () {
console.log("------------------------------EgovAdminScheduleEdit [%o]", scheduleDetail);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [scheduleDetail]);
useEffect(function () {
EgovNet.requestFetch(`/schedule/api/org-api/depth/list?paramCodeGroup=${scheduleDetail.upCommittee}`,
requestOptions,
function (resp) {
setScheduleApiOrgApiDepthList(
resp
);
}
);
console.log("------------------------------EgovAdminScheduleEdit [%o]", scheduleDetail);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [scheduleDetail && scheduleDetail.upCommittee]);
const onClickDeleteSchedule = (schdulId) => {
const deleteBoardURL = `/schedule/${schdulId}`;
const requestOptions = {
method: "DELETE",
headers: {
'Content-type': 'application/json',
}
}
EgovNet.requestFetch(deleteBoardURL,
requestOptions,
(resp) => {
console.log("====>>> Schdule delete= ", resp);
if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
alert("게시글이 삭제되었습니다.")
navigate(URL.ADMIN__COMMITTEE__SCHEDULES ,{ replace: true });
} else {
navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
}
}
);
}
console.log("------------------------------EgovAdminScheduleEdit [End]");
console.groupEnd("EgovAdminScheduleEdit");
return (
<div className="container">
<div className="c_wrap">
{/* <!-- Location --> */}
<div className="location">
<ul>
<li><Link to={URL.MAIN} className="home">Home</Link></li>
<li><Link to={URL.ADMIN}>사이트 관리</Link></li>
<li>위원회 관리</li>
<li>위원회 일정 관리</li>
</ul>
</div>
{/* <!--// Location --> */}
<div className="layout">
{/* <!-- Navigation --> */}
<EgovLeftNav></EgovLeftNav>
{/* <!--// Navigation --> */}
<div className="contents SITE_SCHDULE_REG" id="contents">
{/* <!-- 본문 --> */}
<div className="top_tit">
<h1 className="tit_1">위원회 일정 관리</h1>
</div>
{/* <!-- <h2 className="tit_2">위원회 일정 추가</h2> --> */}
{/* <!-- 게시판 상세보기 --> */}
<StyledDiv className="board_view2">
<dl>
<dt>구분<span className="req">필수</span></dt>
<dd>
<label className="f_select w_150" htmlFor="div-meet">
<select id="div-meet" name="div-meet" title="일정구분"
value={scheduleDetail.divMeet}
onChange={(e) => setScheduleDetail({ ...scheduleDetail, divMeet: e.target.value })}>
<option key={"none"} value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listCodes
&& scheduleInit.result.listCodes.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
))}
</select>
</label>
</dd>
</dl>
<dl>
<dt>심의위원회<span className="req">필수</span></dt>
<dd>
<label className="f_select w_250 up-committe" htmlFor="up-committee">
<select id="up-committe" name="up-committe" title="심의위원회-상위"
value={scheduleDetail.upCommittee}
onChange={(e) => setScheduleDetail({ ...scheduleDetail, upCommittee: e.target.value })}>
<option value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
&& scheduleInit.result.listTopOrg.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
))}
</select>
</label>
<label className="f_select w_250 org-under-id" htmlFor="committee">
<select id="committee" name="committee" title="심의위원회-하위"
value={scheduleDetail.committee}
onChange={(e) => setScheduleDetail({ ...scheduleDetail, committee: e.target.value })}>
<option value="">선택</option>
{scheduleApiOrgApiDepthList && scheduleApiOrgApiDepthList.result && scheduleApiOrgApiDepthList.result.list
&& scheduleApiOrgApiDepthList.result.list.map((item) => (
<option key={item.id} value={item.id}>{item.name}</option>
))}
</select>
</label>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">제목</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
value={scheduleDetail.title}
onChange={(e) => setScheduleDetail({ ...scheduleDetail, title: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="location">장소</label><span className="req">필수</span></dt>
<dd>
<input className="f_input2 w_full" type="text" name="location" title="장소" id="location" placeholder="장소를 입력하세요."
defaultValue={scheduleDetail.location}
onChange={(e) => setScheduleDetail({ ...scheduleDetail, location: e.target.value })} />
</dd>
</dl>
<dl>
<dt>날짜/시간<span className="req">필수</span></dt>
<dd className="datetime">
<span className="line_break">
<DatePicker
selected={scheduleDetail.startDate}
name="schdulBgnde"
className="f_input"
dateFormat="yyyy-MM-dd HH:mm"
showTimeInput
onChange={(date) => {
console.log("setStartDate : ", date);
setScheduleDetail({ ...scheduleDetail, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
setSchdulBgndeHH(date.getHours());
setSchdulBgndeMM(date.getMinutes());
}} />
<input type="hidden" name="schdulBgndeHH" defaultValue={schdulBgndeHH} readOnly />
<input type="hidden" name="schdulBgndeMM" defaultValue={schdulBgndeMM} readOnly />
<span className="f_inn_txt">~</span>
</span>
<span className="line_break">
<DatePicker
selected={scheduleDetail.endDate}
name="schdulEndde"
className="f_input"
dateFormat="yyyy-MM-dd HH:mm"
showTimeInput
minDate={scheduleDetail.startDate}
onChange={(date) => {
console.log("setEndDate: ", date);
setScheduleDetail({ ...scheduleDetail, schdulEndde: getDateFourteenDigit(date), schdulEnddeYYYMMDD: getYYYYMMDD(date), schdulEnddeHH: date.getHours(), schdulEnddeMM: date.getMinutes(), endDate: date });
setSchdulEnddeHH(date.getHours());
setSchdulEnddeMM(date.getMinutes());
}
} />
<input type="hidden" name="schdulEnddeHH" defaultValue={schdulEnddeHH} readOnly />
<input type="hidden" name="schdulEnddeMM" defaultValue={schdulEnddeMM} readOnly />
</span>
</dd>
</dl>
<dl>
<dt><label htmlFor="contents">내용</label><span className="req">필수</span></dt>
<dd>
<textarea className="f_txtar w_full h_100" name="contents" id="contents" cols="30" rows="10" placeholder="일정 내용을 입력하세요."
defaultValue={scheduleDetail.contents}
onChange={(e) => setScheduleDetail({ ...scheduleDetail, contents: e.target.value })}
></textarea>
</dd>
</dl>
{/* <!-- 버튼영역 --> */}
<div className="board_btn_area">
<div className="left_col btn1">
<button className="btn btn_skyblue_h46 w_100"
onClick={() => updateSchedule()}
> 저장</button>
{modeInfo.mode === CODE.MODE_MODIFY &&
<button className="btn btn_skyblue_h46 w_100"
onClick={(e) => {
onClickDeleteSchedule(location.state?.schdulId);
}}>삭제</button>
}
</div>
<div className="right_col btn1">
<Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_blue_h46 w_100">목록</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}
</StyledDiv>
{/* <!-- 게시판 상세보기 --> */}
{/* <!--// 본문 --> */}
</div>
</div>
</div>
</div >
);
}
export default SchedulesEdit;

View File

@ -97,7 +97,11 @@ import AdminContentsStandardResearchEditor from 'pages/admin/contents/StandardRe
// import AdminContentsTextMessages from 'pages/admin/contents/TextMessages'; // - /
// -
import AdminCommitteeProgressStatus from 'pages/admin/committee/ProgressStatus'; // - /
import AdminCommitteeProgressStatus from 'pages/admin/committee/ProgressStatus'; // - /
import AdminCommitteeProgressStatusDetail from 'pages/admin/committee/ProgressStatus/Detail'; // - / /
import AdminCommitteeProgressStatusEdit from 'pages/admin/committee/ProgressStatus/Edit'; // - / /
import AdminCommitteeSchedules from 'pages/admin/committee/Schedules'; // - /
import AdminCommitteeSchedulesDetail from 'pages/admin/committee/Schedules/Detail'; // - / /
import AdminCommitteeSchedulesEdit from 'pages/admin/committee/Schedules/Edit'; // - / /
@ -313,6 +317,10 @@ const SecondRoutes = () => {
{/* 관리자 - 위원회 관리 */}
<Route path={URL.ADMIN__COMMITTEE__PROGRESS_STATUS} element={<AdminCommitteeProgressStatus />} />
<Route path={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__DETAIL} element={<AdminCommitteeProgressStatusDetail />} />
<Route path={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__CREATE} element={<AdminCommitteeProgressStatusEdit mode={CODE.MODE_CREATE} />} />
<Route path={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__MODIFY} element={<AdminCommitteeProgressStatusEdit mode={CODE.MODE_MODIFY} />} />
<Route path={URL.ADMIN__COMMITTEE__SCHEDULES} element={<AdminCommitteeSchedules />} />
<Route path={URL.ADMIN__COMMITTEE__SCHEDULES__DETAIL} element={<AdminCommitteeSchedulesDetail />} />
<Route path={URL.ADMIN__COMMITTEE__SCHEDULES__CREATE} element={<AdminCommitteeSchedulesEdit mode={CODE.MODE_CREATE} />} />