중간 저장

thkim
thkim 2024-03-08 17:55:59 +09:00
parent 92b2b44d6e
commit 4d60a15104
3 changed files with 197 additions and 99 deletions

View File

@ -7,12 +7,12 @@ import { FileUploader } from "react-drag-drop-files";
* @param {fileTypes} const fileTypes = ["JPG", "PNG", "GIF"];
* @returns
*/
function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle}) {
function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle, name}) {
return (
<FileUploader
handleChange={handleChange}
name="file"
name={name}
types={fileTypes ? fileTypes : "*"}
multiple={multiple && false}
label={label}

View File

@ -213,7 +213,7 @@ function ProgressStatus(props) {
getList({ ...searchCondition, pageIndex: passedPage })
}} />
<div className="right_col btn1">
<Link to={URL.ADMIN__CONTENTS__POP_UP__CREATE} className="btn btn_blue_h46 w_100">등록</Link>
<Link to={URL.ADMIN__COMMITTEE__PROGRESS_STATUS__CREATE} className="btn btn_blue_h46 w_100">등록</Link>
</div>
</div>

View File

@ -1,6 +1,10 @@
import React, { useState, useEffect } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import DatePicker from "react-datepicker";
import AttachFileIcon from '@mui/icons-material/AttachFile';
import FileDragDrop from "components/file/FileDragDrop";
@ -53,6 +57,37 @@ const StyledDiv = styled.div`
}
`;
function AttachFile(props) {
const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
const onDrop = (e) => {
//alert('ddd');
};
const handleChange = (file) => {
props.setFile(file);
};
return (
<FileDragDrop
className="file-drag-drop"
multiple={false}
name={props.name}
fileTypes={fileTypes}
onDrop={onDrop}
handleChange={handleChange}
dropMessageStyle={{backgroundColor: '#cfe2ff'}}
>
<div>
<AttachFileIcon />
{props.file ? props.file.name : props.fileName ? props.fileName : "파일을 마우스로 끌어놓으세요."}
</div>
</FileDragDrop>
);
}
function SchedulesEdit(props) {
console.group("EgovAdminScheduleEdit");
console.log("[Start] EgovAdminScheduleEdit ------------------------------");
@ -79,19 +114,16 @@ function SchedulesEdit(props) {
console.log("EgovAdminScheduleEdit [location] : ", location);
const [modeInfo, setModeInfo] = useState({ mode: props.mode });
const [scheduleDetail, setScheduleDetail] = useState
const [requestItems, setRequestItems] = useState
(
{
startDate: new Date(),
endDate: new Date(),
startDate: 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({ });
@ -148,14 +180,7 @@ function SchedulesEdit(props) {
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),
});
if (modeInfo.mode === CODE.MODE_CREATE) {
return;
}
@ -168,16 +193,7 @@ function SchedulesEdit(props) {
}
EgovNet.requestFetch(retrieveDetailURL,
requestOptions,
function (resp) {
let rawScheduleDetail = resp.result;
//
setScheduleDetail({
...scheduleDetail,
...rawScheduleDetail,
startDate: convertDate(rawScheduleDetail.schdulBgnde),
endDate: convertDate(rawScheduleDetail.schdulEndde),
});
function (resp) {
}
);
}
@ -188,16 +204,16 @@ function SchedulesEdit(props) {
const updateSchedule = () => {
const formData = new FormData();
for (let key in scheduleDetail) {
for (let key in requestItems) {
if ( key === 'startDate' ) {
formData.append(key, getDateFourteenDigit( scheduleDetail[key] ));
formData.append(key, getDateFourteenDigit( requestItems[key] ));
} else if( key === 'endDate' ) {
formData.append(key, getDateFourteenDigit( scheduleDetail[key] ));
formData.append(key, getDateFourteenDigit( requestItems[key] ));
} else {
formData.append(key, scheduleDetail[key]);
formData.append(key, requestItems[key]);
}
console.log("scheduleDetail [%s] ", key, scheduleDetail[key]);
console.log("requestItems [%s] ", key, requestItems[key]);
}
if ( formValidator(formData) ) {
@ -263,13 +279,13 @@ function SchedulesEdit(props) {
}, []);
useEffect(function () {
console.log("------------------------------EgovAdminScheduleEdit [%o]", scheduleDetail);
console.log("------------------------------EgovAdminScheduleEdit [%o]", requestItems);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [scheduleDetail]);
}, [requestItems]);
useEffect(function () {
EgovNet.requestFetch(`/schedule/api/org-api/depth/list?paramCodeGroup=${scheduleDetail.upCommittee}`,
EgovNet.requestFetch(`/schedule/api/org-api/depth/list?paramCodeGroup=${requestItems.upCommittee}`,
requestOptions,
function (resp) {
setScheduleApiOrgApiDepthList(
@ -277,9 +293,9 @@ function SchedulesEdit(props) {
);
}
);
console.log("------------------------------EgovAdminScheduleEdit [%o]", scheduleDetail);
console.log("------------------------------EgovAdminScheduleEdit [%o]", requestItems);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [scheduleDetail && scheduleDetail.upCommittee]);
}, [requestItems && requestItems.upCommittee]);
const onClickDeleteSchedule = (schdulId) => {
@ -307,6 +323,24 @@ function SchedulesEdit(props) {
);
}
//
const [preDataFile, setPreDataFile] = useState(null);
const [preDataFileName, setPreDataFileName] = useState(null);
//
const [preFormFile, setPreFormFile] = useState(null);
const [preFormFileName, setPreFormFileName] = useState(null);
//
const [partnerFile, setPartnerFile] = useState(null);
const [partnerFileName, setPartnerFileName] = useState(null);
//
//const [preDataFile, setPreDataFile] = useState(null);
//const [preDataFileName, setPreDataFileName] = useState(null);
//
//const [preDataFile, setPreDataFile] = useState(null);
//const [preDataFileName, setPreDataFileName] = useState(null);
console.log("------------------------------EgovAdminScheduleEdit [End]");
console.groupEnd("EgovAdminScheduleEdit");
return (
@ -318,7 +352,7 @@ function SchedulesEdit(props) {
<li><Link to={URL.MAIN} className="home">Home</Link></li>
<li><Link to={URL.ADMIN}>사이트 관리</Link></li>
<li>위원회 관리</li>
<li>위원회 일정 관리</li>
<li>진행현황 관리</li>
</ul>
</div>
{/* <!--// Location --> */}
@ -332,20 +366,36 @@ function SchedulesEdit(props) {
{/* <!-- 본문 --> */}
<div className="top_tit">
<h1 className="tit_1">위원회 일정 관리</h1>
<h1 className="tit_1">진행현황 관리</h1>
</div>
{/* <!-- <h2 className="tit_2">위원회 일정 추가</h2> --> */}
{/* <!-- 게시판 상세보기 --> */}
<StyledDiv className="board_view2">
<dl>
<dt>구분<span className="req">필수</span></dt>
<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={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</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={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">구분</label><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 })}>
value={requestItems.divMeet}
onChange={(e) => setRequestItems({ ...requestItems, divMeet: e.target.value })}>
<option key={"none"} value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listCodes
&& scheduleInit.result.listCodes.map((item) => (
@ -356,12 +406,34 @@ function SchedulesEdit(props) {
</dd>
</dl>
<dl>
<dt>심의위원회<span className="req">필수</span></dt>
<dt><label htmlFor="title">회의일자</label><span className="req">필수</span></dt>
<dd className="datetime">
<span className="line_break">
<DatePicker
selected={requestItems.startDate}
name="schdulBgnde"
className="f_input"
dateFormat="yyyy-MM-dd HH:mm"
showTimeInput
onChange={(date) => {
console.log("setStartDate : ", date);
setRequestItems({ ...requestItems, 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>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">위원회</label><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 })}>
{/** top org */}
<label className="f_select w_250 org-group-id" htmlFor="org-group-id">
<select id="org-group-id" name="orgGroupId" title="심의위원회-상위"
value={requestItems.upCommittee}
onChange={(e) => setRequestItems({ ...requestItems, upCommittee: e.target.value })}>
<option value="">선택</option>
{scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
&& scheduleInit.result.listTopOrg.map((item) => (
@ -369,10 +441,21 @@ function SchedulesEdit(props) {
))}
</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 })}>
<label className="f_select w_250 org-group-id-1" htmlFor="org-group-id-1">
<select id="org-group-id-1" name="orgGroupId1" title="심의위원회-상위"
value={requestItems.upCommittee}
onChange={(e) => setRequestItems({ ...requestItems, 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-group-id-2" htmlFor="org-group-id-2">
<select id="org-group-id-2" name="orgGroupId2" title="심의위원회-하위"
value={requestItems.committee}
onChange={(e) => setRequestItems({ ...requestItems, committee: e.target.value })}>
<option value="">선택</option>
{scheduleApiOrgApiDepthList && scheduleApiOrgApiDepthList.result && scheduleApiOrgApiDepthList.result.list
&& scheduleApiOrgApiDepthList.result.list.map((item) => (
@ -382,12 +465,67 @@ function SchedulesEdit(props) {
</label>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">사전검토자료</label><span className="req">필수</span></dt>
<dd>
<AttachFile name="preDataFile" file={preDataFile} setFile={setPreDataFile} fileName={preDataFileName} />
</dd>
</dl>
<dl>
<dt><label htmlFor="title">사전검토양식</label><span className="req">필수</span></dt>
<dd>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">관계기관의견</label><span className="req">필수</span></dt>
<dd>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">조치계획서</label><span className="req">필수</span></dt>
<dd>
</dd>
</dl>
<dl>
<dt><label htmlFor="title">조치결과서</label><span className="req">필수</span></dt>
<dd>
</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={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</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={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</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={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</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 })}
value={requestItems.title}
onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
/>
</dd>
</dl>
@ -395,56 +533,16 @@ function SchedulesEdit(props) {
<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>
defaultValue={requestItems.location}
onChange={(e) => setRequestItems({ ...requestItems, location: e.target.value })} />
</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 })}
defaultValue={requestItems.contents}
onChange={(e) => setRequestItems({ ...requestItems, contents: e.target.value })}
></textarea>
</dd>
</dl>
@ -465,7 +563,7 @@ function SchedulesEdit(props) {
</div>
<div className="right_col btn1">
<Link to={URL.ADMIN__COMMITTEE__SCHEDULES} className="btn btn_blue_h46 w_100">목록</Link>
<Link to={URL.ADMIN__COMMITTEE__PROGRESS_STATUS} className="btn btn_blue_h46 w_100">목록</Link>
</div>
</div>
{/* <!--// 버튼영역 --> */}