fix: 주정차 위반 심의등록 날짜 기능 추가 및 심의 처리 시 로딩바 표시되도록 적용

mpower
sjh88 2 years ago
parent 621f02ad76
commit 7622b85232

16
package-lock.json generated

@ -79,6 +79,7 @@
"react-router-dom": "^6.2.1",
"react-scripts": "^4.0.3",
"react-slick": "^0.28.1",
"react-spinners": "^0.13.8",
"react-syntax-highlighter": "^15.4.5",
"react-timer-hook": "^3.0.5",
"react-to-print": "^2.14.4",
@ -21456,6 +21457,15 @@
"react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/react-spinners": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@ -44239,6 +44249,12 @@
"resize-observer-polyfill": "^1.5.0"
}
},
"react-spinners": {
"version": "0.13.8",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
"integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
"requires": {}
},
"react-style-singleton": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

@ -75,6 +75,7 @@
"react-router-dom": "^6.2.1",
"react-scripts": "^4.0.3",
"react-slick": "^0.28.1",
"react-spinners": "^0.13.8",
"react-syntax-highlighter": "^15.4.5",
"react-timer-hook": "^3.0.5",
"react-to-print": "^2.14.4",

@ -9,6 +9,7 @@ import Button from '@mui/material/Button';
import combo from 'commons/combo_data';
import { useState } from 'react';
import { saveJudgeStds } from 'apis/judge';
import Loading from 'views/cmm/Loding';
const style = {
position: 'relative',
@ -25,12 +26,14 @@ const style = {
const CmmModal = ({ isBackdrop = false, open, setOpen, title, judgeData = () => {}, dataGb, showAlert, callback }) => {
const [judgeStd, setJudgeStd] = useState('1');
const [loading, setLoading] = useState(false);
const handleClose = () => {
setOpen(false);
};
const handleJudge = () => {
if (window.confirm(`${judgeStd}명[부과] 기준으로 ${judgeData.length}건 심사 처리 하시겠습니까?`)) {
setLoading(true);
const param = {
dataGb,
judgeStdCnt: judgeStd,
@ -38,6 +41,7 @@ const CmmModal = ({ isBackdrop = false, open, setOpen, title, judgeData = () =>
};
saveJudgeStds(param).then((res) => {
setLoading(false);
if (res?.success) {
showAlert.show(`${judgeData.length}건 처리되었습니다`);
setOpen(false);
@ -87,6 +91,7 @@ const CmmModal = ({ isBackdrop = false, open, setOpen, title, judgeData = () =>
</Button>
</Grid>
</Grid>
{loading && <Loading />}
</MainCard>
</Modal>
</div>

@ -3,7 +3,7 @@ import { useState } from 'react';
import NumberFormat from 'react-number-format';
import format from 'date-fns/format';
import { Grid, TextField, MenuItem, Select, FormControl, InputLabel, Divider } from '@mui/material';
import { Grid, TextField, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
import Button from '@mui/material/Button';
import PropTypes from 'prop-types';
import { IconFileExport } from '@tabler/icons';
@ -93,7 +93,7 @@ const JudgeTargetSaveForm = ({ handleModalSave }) => {
label="심의차수"
format="######"
fullWidth
value={msChasu || ''}
value={msChasu}
onValueChange={(values) => setMsChasu(values.value)}
/>
</Grid>
@ -114,11 +114,6 @@ const JudgeTargetSaveForm = ({ handleModalSave }) => {
<MuiXMobileTimePicker label="심사 마감시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msClosesi}:00`} setDate={setMsClosesi} />
</Grid>
</Grid>
<Grid container spacing={1} item xs={12} mt={1}>
<Grid item xs={12}>
<Divider />
</Grid>
</Grid>
<Grid item container spacing={0.5} xs={12} mt={1}>
<Grid item style={{ marginLeft: 'auto' }}>
<Button variant="contained" color="primary" size="small" startIcon={<IconFileExport />} onClick={onSave}>

@ -14,16 +14,29 @@ import MainCard from 'ui-component/cards/MainCard';
import MuiDataGrid from 'views/cmm/mui-grid/MuiDataGrid';
import xitCmm, { ErrorToast, saveAlert } from 'commons/XitCmm';
import CmmModal from 'views/cmm/CmmModal';
import SaveParkingTargetForm from './SaveParkingTargetForm';
import NumberFormat from 'react-number-format';
import ExcelDownloadGrid from 'views/cmm/file-ctl/ExcelDownloadGrid';
import { findParkingJudgeTargets, saveParkingJudgeTargets } from 'apis/parking';
import getYear from 'date-fns/getYear';
import { useAlert } from 'react-alert';
import CmmModalStyle from 'views/cmm/CmmModalStyle';
const year = getYear(new Date()).toString();
const style = {
position: 'relative',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 500,
minHeight: 300,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 3
};
const ParkingRegister = () => {
const showAlert = useAlert();
const [rcIrTransfer, setRcIrTransfer] = useState('1');
@ -227,9 +240,9 @@ const ParkingRegister = () => {
handleSelection={handleSelection}
selectionModel={selectionModel}
/>
<CmmModal isBackdrop title="심의등록" open={open} setOpen={setOpen}>
<CmmModalStyle isBackdrop title="심의등록" open={open} setOpen={setOpen} style={style}>
<SaveParkingTargetForm isDisabled={selectionModel.length === 0} handleModalSave={submitParkingTargets} />
</CmmModal>
</CmmModalStyle>
</MainCard>
);
};

@ -2,31 +2,27 @@ import { useState } from 'react';
import NumberFormat from 'react-number-format';
import format from 'date-fns/format';
import getHours from 'date-fns/getHours';
import koLocale from 'date-fns/locale/ko';
import { Grid, TextField, MenuItem, Select, FormControl, InputLabel } from '@mui/material';
import DateAdapter from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import { DatePicker, TimePicker } from '@mui/lab';
import Button from '@mui/material/Button';
import PropTypes from 'prop-types';
import { IconFileExport } from '@tabler/icons';
import combo from 'commons/combo_data';
import { useAlert } from 'react-alert';
import { MuiXDatePicker, MuiXMobileTimePicker } from 'views/cmm/MuiXDatePicker';
const toDate = new Date();
const SaveParkingTargetForm = ({ handleModalSave }) => {
const showAlert = useAlert();
const [msuTeam, setMsuTeam] = useState(' ');
const [msChasu, setMsChasu] = useState();
const [msSdate, setMsSdate] = useState(format(toDate, 'yyyy-MM-dd'));
const [msStartsi, setMsStartsi] = useState(`${format(toDate, 'yyyy-MM-dd')} 09:00`);
const [msStartsi, setMsStartsi] = useState('00');
const [msEdate, setMsEdate] = useState(format(toDate, 'yyyy-MM-dd'));
const [msChasu, setMsChasu] = useState();
const [msCdate, setMsCdate] = useState(format(toDate, 'yyyy-MM-dd'));
const [msClosesi, setMsClosesi] = useState(`${format(toDate, 'yyyy-MM-dd')} 18:00`);
const [msClosesi, setMsClosesi] = useState('23');
const onSave = () => {
if (!msuTeam || msuTeam.length < 3) {
@ -44,78 +40,39 @@ const SaveParkingTargetForm = ({ handleModalSave }) => {
return;
}
if (msEdate.toString() > msCdate.toString()) {
showAlert.show('심의종료일과 심의마감일을 확인해 주세요');
if (msEdate.replace(/-/g, '') > msCdate.replace(/-/g, '')) {
showAlert.show('심사 종료일자가 심사 마감일자보다 클 수 없습니다.');
return;
}
if (msStartsi.length < 2) {
showAlert.show('심사 시작시간은 필수입니다.');
return;
}
if (msClosesi.length < 2) {
showAlert.show('심사 마감시간은 필수입니다.');
return;
}
handleModalSave({
msuTeam,
msChasu,
msSdate,
msStartsi: getHours(new Date(msStartsi)),
msStartsi,
msEdate,
msChasu,
msCdate,
msClosesi: getHours(new Date(msClosesi))
msClosesi
});
};
return (
<>
<Grid container spacing={2} mt={1.5}>
<Grid item xs={12} sm={4}>
<LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
<DatePicker
// size="small"
renderInput={(props) => <TextField fullWidth {...props} />}
label="심의시작일"
value={msSdate}
inputFormat="yyyy-MM-dd"
mask="____-__-__"
onChange={(newValue) => {
setMsSdate(format(newValue, 'yyyy-MM-dd'));
}}
/>
</LocalizationProvider>
{/* <MuiDatePicker label="심의시작일" date={msSdate} setDate={setMsSdate()} /> */}
</Grid>
<Grid item xs={12} sm={4}>
<LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
<TimePicker
size="small"
views={['hours']}
renderInput={(props) => <TextField fullWidth {...props} />}
label="심의시작시간"
value={msStartsi}
inputFormat="HH"
mask="__"
onChange={(newValue) => {
// setMsStartsi(format(newValue, 'HH'));
setMsStartsi(newValue);
}}
/>
</LocalizationProvider>
{/* <MuiTimePicker label="심의시작시간" date={msStartsi} setDate={setMsStartsi()} /> */}
</Grid>
<Grid item xs={12} sm={4}>
<LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
<DatePicker
size="small"
renderInput={(props) => <TextField fullWidth {...props} />}
label="심의종료일"
value={msEdate}
inputFormat="yyyy-MM-dd"
mask="____-__-__"
onChange={(newValue) => {
setMsEdate(format(newValue, 'yyyy-MM-dd'));
}}
/>
</LocalizationProvider>
</Grid>
<Grid item xs={12} sm={2}>
<Grid item xs={12} sm={6}>
<FormControl fullWidth>
<InputLabel required>심의팀</InputLabel>
<Select name="reviewYear" defaultValue={msuTeam} onChange={(e) => setMsuTeam(e.target.value)}>
<Select defaultValue={msuTeam} onChange={(e) => setMsuTeam(e.target.value)}>
<MenuItem key={0} value=" ">
팀선택
</MenuItem>
@ -127,7 +84,7 @@ const SaveParkingTargetForm = ({ handleModalSave }) => {
</Select>
</FormControl>
</Grid>
<Grid item xs={12} sm={2}>
<Grid item xs={12} sm={6}>
<NumberFormat
customInput={TextField}
required
@ -140,45 +97,21 @@ const SaveParkingTargetForm = ({ handleModalSave }) => {
onValueChange={(values) => setMsChasu(values.value)}
/>
</Grid>
<Grid item xs={12} sm={4}>
<LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
<DatePicker
size="small"
renderInput={(props) => <TextField fullWidth {...props} />}
label="심의마감일"
value={msCdate}
inputFormat="yyyy-MM-dd"
mask="____-__-__"
onChange={(newValue) => {
setMsCdate(format(newValue, 'yyyy-MM-dd'));
}}
/>
</LocalizationProvider>
{/* <TextField */}
{/* type="date" */}
{/* value={msCdate} */}
{/* defaultValue={msCdate} */}
{/* InputLabelProps={{ shrink: true }} */}
{/* onChange={(e) => setMsCdate(format(e.target.value), 'yyyy-MM-dd')} */}
{/* /> */}
<Grid item xs={12} sm={6}>
<MuiXDatePicker label="심사 시작일자" date={msSdate} setDate={setMsSdate} />
</Grid>
<Grid item xs={12} sm={4}>
<LocalizationProvider dateAdapter={DateAdapter} locale={koLocale}>
<TimePicker
size="small"
views={['hours']}
// renderInput={(props) => <TextField fullWidth {...props} />}
renderInput={(props) => <NumberFormat customInput={TextField} fullWidth {...props} format="##" />}
label="심의마감시간"
value={msClosesi}
inputFormat="HH"
mask="__"
onChange={(newValue) => {
setMsClosesi(newValue);
}}
/>
</LocalizationProvider>
<Grid item xs={12} sm={6}>
<MuiXMobileTimePicker label="심사 시작시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msStartsi}:00`} setDate={setMsStartsi} />
</Grid>
<Grid item xs={12} sm={6}>
<MuiXDatePicker label="심사 종료일자" date={msEdate} setDate={setMsEdate} />
</Grid>
<Grid item xs={12} sm={6} />
<Grid item xs={12} sm={6}>
<MuiXDatePicker label="심사 마감일자" date={msCdate} setDate={setMsCdate} />
</Grid>
<Grid item xs={12} sm={6}>
<MuiXMobileTimePicker label="심사 마감시간" date={`${format(toDate, 'yyyy-MM-dd')} ${msClosesi}:00`} setDate={setMsClosesi} />
</Grid>
</Grid>
<Grid item container spacing={0.5} xs={12} mt={1}>

@ -0,0 +1,31 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { ClockLoader } from 'react-spinners';
const style = {
borderRadius: '5%',
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: 'white',
width: 150,
height: 100,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
color: '#36d7b7'
};
function Loading() {
return (
<div>
<div style={style}>
<ClockLoader color="#36d7b7" />
<font> Process Loding... </font>
</div>
</div>
);
}
export default Loading;
Loading…
Cancel
Save