feat: 주정차의견진술 자료 등록 반영
parent
e02e319530
commit
ee132cbdbb
@ -0,0 +1,10 @@
|
|||||||
|
const combo = {
|
||||||
|
teams: [
|
||||||
|
{ code: '001', value: '1팀' },
|
||||||
|
{ code: '002', value: '2팀' },
|
||||||
|
{ code: '003', value: '3팀' },
|
||||||
|
{ code: '004', value: '4팀' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
export default combo;
|
||||||
@ -0,0 +1,246 @@
|
|||||||
|
import { useCallback, useEffect, 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, IconButton, InputAdornment } 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 { getComboCodeList } from 'apis/common';
|
||||||
|
import combo from '../../../commons/combo_data';
|
||||||
|
import { FileDownload, FileUpload } from '@mui/icons-material';
|
||||||
|
import { useAlert } from 'react-alert';
|
||||||
|
import FileInputForm from '../../form/FileInputForm';
|
||||||
|
import FileInputForms from '../../form/FileInputForms';
|
||||||
|
|
||||||
|
const toDate = new Date();
|
||||||
|
|
||||||
|
const SaveResidentDataForm = ({ isDisabled = true, handleModalSave }) => {
|
||||||
|
const alert = useAlert();
|
||||||
|
|
||||||
|
const [scCarnum, setScCarnum] = useState();
|
||||||
|
const [scName, setScName] = useState();
|
||||||
|
const [scDong, setScDong] = useState();
|
||||||
|
const [scContDoc, setScContDoc] = useState();
|
||||||
|
const [selectedContDoc, setSelectedContDoc] = useState();
|
||||||
|
const [scIngb, setScIngb] = useState();
|
||||||
|
const [selectedIngb, setSelectedIngb] = useState();
|
||||||
|
const [zippost1, setZippost1] = useState();
|
||||||
|
const [scJuso, setScJuso] = useState();
|
||||||
|
const [scBunji, setScBunji] = useState();
|
||||||
|
const [scWdate, setScWdate] = useState();
|
||||||
|
const [scCdate, setScCdate] = useState();
|
||||||
|
const [scJbtime, setScJbtime] = useState();
|
||||||
|
|
||||||
|
const [scPicad, setScPcad] = useState([]);
|
||||||
|
|
||||||
|
const [selectedImgFile, setSelectedImgFile] = useState('');
|
||||||
|
const [selectedFile, setSelectedFile] = useState('');
|
||||||
|
|
||||||
|
const onSave = () => {
|
||||||
|
handleModalSave({});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// setSelectedContDoc('11');
|
||||||
|
setScContDoc([]);
|
||||||
|
getComboCodeList({ codeMcd: 'SC_CONT_DOC' }).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
setScContDoc(res.data);
|
||||||
|
});
|
||||||
|
getComboCodeList({ codeMcd: 'RC_INGB' }).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
setScIngb(res.data);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleChangeFile = (e) => {
|
||||||
|
// eslint-disable-next-line no-debugger
|
||||||
|
// debugger;
|
||||||
|
// console.log(e);
|
||||||
|
|
||||||
|
const idx = Number(e.target.dataset.index) + 1;
|
||||||
|
setScPcad([...scPicad, e.target.files[0]]);
|
||||||
|
// setScPcad([...scPicad, {`[${e.target.name}]${idx}`: e.target.files[0] });
|
||||||
|
console.log(scPicad);
|
||||||
|
|
||||||
|
// console.log(e);
|
||||||
|
// setSelectedFile(e.target.files[0].name);
|
||||||
|
// setFilesInfo(e.target.files);
|
||||||
|
// setSelectedFile(file.name);
|
||||||
|
// alert.show(<img alt="sample" src={URL.createObjectURL(e.target.files[0])} style={{ margin: 'auto' }} />);
|
||||||
|
// setSelectedImgFile(URL.createObjectURL(e.target.files[0]));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Grid mt={2}>
|
||||||
|
<Grid container spacing={0.5} item xs={12} mb={1.5}>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<TextField
|
||||||
|
required
|
||||||
|
label="차량번호"
|
||||||
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
value={scCarnum}
|
||||||
|
onValueChange={(values) => setScCarnum(values.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<TextField required label="성명" size="small" fullWidth value={scName} onValueChange={(values) => setScName(values.value)} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<TextField required label="동명" size="small" fullWidth value={scDong} onValueChange={(values) => setScDong(values.value)} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel required>진술유형</InputLabel>
|
||||||
|
<Select size="small" defaultValue="11" onChange={(e) => setSelectedContDoc(e.target.value)}>
|
||||||
|
{scContDoc &&
|
||||||
|
scContDoc.map((contDoc) => (
|
||||||
|
<MenuItem key={contDoc.code} value={contDoc.code}>
|
||||||
|
{contDoc.value}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Grid container spacing={0.5} item xs={12} mb={1.5}>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<NumberFormat
|
||||||
|
size="small"
|
||||||
|
customInput={TextField}
|
||||||
|
required
|
||||||
|
label="접수일자"
|
||||||
|
format="########"
|
||||||
|
fullWidth
|
||||||
|
value={scCdate}
|
||||||
|
onValueChange={(values) => setScCdate(values.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel required>접수방법</InputLabel>
|
||||||
|
<Select size="small" defaultValue="1" onChange={(e) => setSelectedIngb(e.target.value)}>
|
||||||
|
{scIngb &&
|
||||||
|
scIngb.map((ingb) => (
|
||||||
|
<MenuItem key={ingb.code} value={ingb.code}>
|
||||||
|
{ingb.value}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<NumberFormat
|
||||||
|
size="small"
|
||||||
|
customInput={TextField}
|
||||||
|
required
|
||||||
|
label="위반일자"
|
||||||
|
format="########"
|
||||||
|
fullWidth
|
||||||
|
value={scWdate}
|
||||||
|
onValueChange={(values) => setScWdate(values.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<NumberFormat
|
||||||
|
size="small"
|
||||||
|
customInput={TextField}
|
||||||
|
required
|
||||||
|
label="위반시간"
|
||||||
|
format="####"
|
||||||
|
fullWidth
|
||||||
|
value={scJbtime}
|
||||||
|
onValueChange={(values) => setScJbtime(values.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Grid container spacing={0.5} item xs={12} mb={2}>
|
||||||
|
<Grid item sm={1.5}>
|
||||||
|
<TextField
|
||||||
|
size="small"
|
||||||
|
required
|
||||||
|
label="우편번호"
|
||||||
|
fullWidth
|
||||||
|
value={zippost1}
|
||||||
|
onValueChange={(values) => setScCarnum(values.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={7}>
|
||||||
|
<TextField size="small" required label="주소" fullWidth value={scJuso} onValueChange={(values) => setScJuso(values.value)} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3.5}>
|
||||||
|
<TextField size="small" required label="번지" fullWidth value={scBunji} onValueChange={(values) => setScBunji(values.value)} />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid container spacing={1} item xs={12} mt={1}>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<FileInputForms
|
||||||
|
isDisabled={false}
|
||||||
|
fieldName="scPicad"
|
||||||
|
index={0}
|
||||||
|
labelName="단속사진1"
|
||||||
|
selectedFile={scPicad[0]?.name}
|
||||||
|
handleChangeFile={handleChangeFile}
|
||||||
|
alert={alert}
|
||||||
|
isOrgFileInfo
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<FileInputForms
|
||||||
|
isDisabled={scPicad.length < 1}
|
||||||
|
fieldName="scPicad"
|
||||||
|
labelName="단속사진2"
|
||||||
|
index={1}
|
||||||
|
selectedFile={scPicad[1]?.name}
|
||||||
|
handleChangeFile={handleChangeFile}
|
||||||
|
alert={alert}
|
||||||
|
isOrgFileInfo
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<FileInputForms
|
||||||
|
isDisabled={scPicad.length < 2}
|
||||||
|
fieldName="scPicad"
|
||||||
|
labelName="단속사진3"
|
||||||
|
index={1}
|
||||||
|
selectedFile={scPicad[2]?.name}
|
||||||
|
handleChangeFile={handleChangeFile}
|
||||||
|
alert={alert}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm={3}>
|
||||||
|
<FileInputForms
|
||||||
|
isDisabled={scPicad.length < 3}
|
||||||
|
fieldName="scPicad"
|
||||||
|
labelName="단속사진4"
|
||||||
|
index={1}
|
||||||
|
selectedFile={scPicad[3]?.name}
|
||||||
|
handleChangeFile={handleChangeFile}
|
||||||
|
alert={alert}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sx={{ marginTop: 3 }}>
|
||||||
|
<Button variant="contained" color="primary" size="small" startIcon={<IconFileExport />} onClick={onSave}>
|
||||||
|
저장
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
SaveResidentDataForm.propTypes = {
|
||||||
|
handleModalSave: PropTypes.func.isRequired,
|
||||||
|
isDisabled: PropTypes.bool.isRequired
|
||||||
|
};
|
||||||
|
export default SaveResidentDataForm;
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { Button, Grid, TextField } from '@mui/material';
|
||||||
|
import { FileUpload } from '@mui/icons-material';
|
||||||
|
|
||||||
|
const FileInputForm = ({ labelName, selectedFile, handleChangeFile, alert }) => {
|
||||||
|
const onChangeFile = (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (file.type.includes('image')) {
|
||||||
|
alert.show(<img alt={`${file.name}`} src={URL.createObjectURL(file)} style={{ margin: 'auto' }} />);
|
||||||
|
}
|
||||||
|
handleChangeFile(file);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container item spacing={0.5}>
|
||||||
|
<Grid item xs={12} sm={7.5}>
|
||||||
|
<TextField placeholder={labelName} value={selectedFile} size="small" startIcon={<FileUpload />} onClick={() => {}} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={4.5}>
|
||||||
|
<Button variant="contained" component="label" color="primary" size="small" startIcon={<FileUpload />}>
|
||||||
|
파일
|
||||||
|
<input type="file" hidden onChange={onChangeFile} />
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FileInputForm;
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { Button, Grid, TextField } from '@mui/material';
|
||||||
|
import { FileUpload } from '@mui/icons-material';
|
||||||
|
|
||||||
|
const FileInputForms = ({ fieldName, index, labelName, selectedFile, handleChangeFile, alert, isDisabled = true }) => {
|
||||||
|
const onChangeFile = (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (file.type.includes('image')) {
|
||||||
|
alert.show(<img alt={`${file.name}`} src={URL.createObjectURL(file)} style={{ margin: 'auto' }} />);
|
||||||
|
}
|
||||||
|
handleChangeFile(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container item spacing={0.5}>
|
||||||
|
<Grid item xs={12} sm={7.5}>
|
||||||
|
<TextField placeholder={labelName} value={selectedFile} size="small" startIcon={<FileUpload />} onClick={() => {}} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={4.5}>
|
||||||
|
<Button disabled={isDisabled} variant="contained" component="label" color="primary" size="small" startIcon={<FileUpload />}>
|
||||||
|
파일
|
||||||
|
<input type="file" name={fieldName} data-index={index} hidden onChange={onChangeFile} />
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FileInputForms;
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { Button, IconButton, InputLabel, Tooltip, makeStyles, Theme } from '@mui/material';
|
|
||||||
import { FileDownload, FileUpload, FileUploadTwoTone } from '@mui/icons-material';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useTheme } from '@mui/material/styles';
|
|
||||||
|
|
||||||
// const useStyles = makeStyles((theme) => ({
|
|
||||||
// root: {
|
|
||||||
// '& > *': {
|
|
||||||
// margin: theme.spacing(1)
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// input: {
|
|
||||||
// display: 'none'
|
|
||||||
// },
|
|
||||||
// faceImage: {
|
|
||||||
// color: theme.palette.primary.light
|
|
||||||
// }
|
|
||||||
// }));
|
|
||||||
|
|
||||||
const FileUploadForm = ({ onSaveFile }) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const [selectedFile, setSelectedFile] = useState(null);
|
|
||||||
|
|
||||||
const handleCapture = ({ target }) => {
|
|
||||||
setSelectedFile(target.files[0]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = () => {
|
|
||||||
onSaveFile(selectedFile);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<input accept="image/jpeg" className={theme.input} id="faceImage" type="file" onChange={handleCapture} />
|
|
||||||
<Tooltip title="Select Image">
|
|
||||||
<InputLabel htmlFor="faceImage">
|
|
||||||
<IconButton className={theme.faceImage} color="primary" aria-label="upload picture" component="span">
|
|
||||||
<FileUploadTwoTone fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
</InputLabel>
|
|
||||||
</Tooltip>
|
|
||||||
<InputLabel>{selectedFile ? selectedFile.name : 'Select Image'}</InputLabel>. . .
|
|
||||||
<Button onClick={() => handleSubmit()} color="primary">
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FileUploadForm;
|
|
||||||
Loading…
Reference in New Issue