|
|
@ -1,27 +1,38 @@ |
|
|
|
import { yupResolver } from '@hookform/resolvers/yup'; |
|
|
|
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
import { Button, Col, Row } from 'reactstrap'; |
|
|
|
import { useForm } from 'react-hook-form'; |
|
|
|
import { useForm } from 'react-hook-form'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
// yup
|
|
|
|
import { Button, Col, Row } from 'reactstrap'; |
|
|
|
|
|
|
|
import * as yup from 'yup'; |
|
|
|
import * as yup from 'yup'; |
|
|
|
|
|
|
|
import { yupResolver } from '@hookform/resolvers/yup'; |
|
|
|
|
|
|
|
|
|
|
|
import { BasisDronForm } from '../../../components/basis/dron/BasisDronForm'; |
|
|
|
import { BasisDronForm } from '../../../components/basis/dron/BasisDronForm'; |
|
|
|
import { BasisDronImage } from '../../../components/basis/dron/BasisDronImage'; |
|
|
|
import { BasisDronImage } from '../../../components/basis/dron/BasisDronImage'; |
|
|
|
import { IMG_PATH } from '../../../configs/constants'; |
|
|
|
|
|
|
|
import * as Actions from '../../../modules/basis/dron/actions/basisDronAction'; |
|
|
|
import * as Actions from '../../../modules/basis/dron/actions/basisDronAction'; |
|
|
|
import { dronAPI } from '../../../modules/basis/dron/apis/basisDronApi'; |
|
|
|
import { dronAPI } from '../../../modules/basis/dron/apis/basisDronApi'; |
|
|
|
|
|
|
|
import { IMG_PATH } from '../../../configs/constants'; |
|
|
|
|
|
|
|
|
|
|
|
export const BasisDronDetailContainer = props => { |
|
|
|
export const BasisDronDetailContainer = props => { |
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
const titleName = ' 기체 관리'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 가입한 그룹목록, 전체 그룹목록
|
|
|
|
const { joinList, groupList } = useSelector(state => state.groupState); |
|
|
|
const { joinList, groupList } = useSelector(state => state.groupState); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 상세정보, 선택한 기체정보
|
|
|
|
const { detail, selectData } = useSelector(state => state.dronState); |
|
|
|
const { detail, selectData } = useSelector(state => state.dronState); |
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
|
|
// 유저 정보
|
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 이미지
|
|
|
|
const [img, setImg] = useState(null); |
|
|
|
const [img, setImg] = useState(null); |
|
|
|
const [imageUrl, setImageUrl] = useState(''); |
|
|
|
const [imageUrl, setImageUrl] = useState(''); |
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
|
|
|
const titleName = ' 기체 관리'; |
|
|
|
// 기체 등록인지, 수정인지 판단
|
|
|
|
const [pageType, setPageType] = useState('create'); |
|
|
|
const [pageType, setPageType] = useState('create'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 유효성검사 목록
|
|
|
|
const validationSchema = yup.object().shape({ |
|
|
|
const validationSchema = yup.object().shape({ |
|
|
|
arcrftModelNm: yup |
|
|
|
arcrftModelNm: yup |
|
|
|
.string() |
|
|
|
.string() |
|
|
@ -54,9 +65,9 @@ export const BasisDronDetailContainer = props => { |
|
|
|
'지원하지 않는 특수문자입니다.' |
|
|
|
'지원하지 않는 특수문자입니다.' |
|
|
|
), |
|
|
|
), |
|
|
|
wghtTypeCd: yup.string().trim().required('중량구분 을 선택해 주세요.') |
|
|
|
wghtTypeCd: yup.string().trim().required('중량구분 을 선택해 주세요.') |
|
|
|
// ownerNm: yup.string().trim().required('운영자명 을 입력해 주세요.'),
|
|
|
|
|
|
|
|
// hpno: yup.string().trim().required('운영자 연락처 를 입력해 주세요.')
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 유효성검사를 위한 기체 정보 기본값
|
|
|
|
const { register, getValues, setValue, errors, handleSubmit } = useForm({ |
|
|
|
const { register, getValues, setValue, errors, handleSubmit } = useForm({ |
|
|
|
defaultValues: { |
|
|
|
defaultValues: { |
|
|
|
groupId: '', |
|
|
|
groupId: '', |
|
|
@ -74,12 +85,11 @@ export const BasisDronDetailContainer = props => { |
|
|
|
createUserId: '', |
|
|
|
createUserId: '', |
|
|
|
updateUserId: '', |
|
|
|
updateUserId: '', |
|
|
|
updateDt: '' |
|
|
|
updateDt: '' |
|
|
|
// ownerSno: '',
|
|
|
|
|
|
|
|
// ownerNm: '',
|
|
|
|
|
|
|
|
// hpno: ''
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
resolver: yupResolver(validationSchema) |
|
|
|
resolver: yupResolver(validationSchema) |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 모달 창
|
|
|
|
const [modal, setModal] = useState({ |
|
|
|
const [modal, setModal] = useState({ |
|
|
|
isOpen: false, |
|
|
|
isOpen: false, |
|
|
|
title: '', |
|
|
|
title: '', |
|
|
@ -87,6 +97,7 @@ export const BasisDronDetailContainer = props => { |
|
|
|
color: '' |
|
|
|
color: '' |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 이전 화면에서 넘겨받은 그룹 아이디가 있을 시 기체 수정으로 판단
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (props.id) { |
|
|
|
if (props.id) { |
|
|
|
handlerSearch(); |
|
|
|
handlerSearch(); |
|
|
@ -95,6 +106,7 @@ export const BasisDronDetailContainer = props => { |
|
|
|
return () => dispatch(Actions.RESET_IDNTF()); |
|
|
|
return () => dispatch(Actions.RESET_IDNTF()); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 정보 존재 할 경우 데이터 셋팅
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (!selectData && !detail) { |
|
|
|
if (!selectData && !detail) { |
|
|
|
// history.goBack();
|
|
|
|
// history.goBack();
|
|
|
@ -117,9 +129,6 @@ export const BasisDronDetailContainer = props => { |
|
|
|
setValue('prdctNum', detail?.prdctNum); |
|
|
|
setValue('prdctNum', detail?.prdctNum); |
|
|
|
setValue('imageUrl', detail?.imageUrl); |
|
|
|
setValue('imageUrl', detail?.imageUrl); |
|
|
|
setValue('wghtTypeCd', detail?.wghtTypeCd); |
|
|
|
setValue('wghtTypeCd', detail?.wghtTypeCd); |
|
|
|
// setValue('ownerSno', detail?.ownerSno);
|
|
|
|
|
|
|
|
// setValue('ownerNm', detail?.ownerNm);
|
|
|
|
|
|
|
|
// setValue('hpno', detail?.hpno);
|
|
|
|
|
|
|
|
setValue('updateUserId', detail?.updateUserId); |
|
|
|
setValue('updateUserId', detail?.updateUserId); |
|
|
|
setValue('updateDt', detail?.updateDt); |
|
|
|
setValue('updateDt', detail?.updateDt); |
|
|
|
|
|
|
|
|
|
|
@ -163,6 +172,7 @@ export const BasisDronDetailContainer = props => { |
|
|
|
} |
|
|
|
} |
|
|
|
}, [selectData, detail]); |
|
|
|
}, [selectData, detail]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 이미지 업로드
|
|
|
|
const handlerImageChange = e => { |
|
|
|
const handlerImageChange = e => { |
|
|
|
const reader = new FileReader(), |
|
|
|
const reader = new FileReader(), |
|
|
|
files = e.target.files; |
|
|
|
files = e.target.files; |
|
|
@ -183,21 +193,25 @@ export const BasisDronDetailContainer = props => { |
|
|
|
saveFileAPI(files[0]); |
|
|
|
saveFileAPI(files[0]); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 이미지 삭제
|
|
|
|
const handlerImageDelete = () => { |
|
|
|
const handlerImageDelete = () => { |
|
|
|
setImageUrl(''); |
|
|
|
setImageUrl(''); |
|
|
|
setImg(''); |
|
|
|
setImg(''); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 이미지 저장
|
|
|
|
const saveFileAPI = async file => { |
|
|
|
const saveFileAPI = async file => { |
|
|
|
const fileName = await dronAPI.fileupload(file); |
|
|
|
const fileName = await dronAPI.fileupload(file); |
|
|
|
setImageUrl(fileName); |
|
|
|
setImageUrl(fileName); |
|
|
|
setImg(IMG_PATH + fileName); |
|
|
|
setImg(IMG_PATH + fileName); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 상세정보 요청
|
|
|
|
const handlerSearch = () => { |
|
|
|
const handlerSearch = () => { |
|
|
|
dispatch(Actions.DETAIL.request(props.id)); |
|
|
|
dispatch(Actions.DETAIL.request(props.id)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 생성
|
|
|
|
const handlerCreate = async data => { |
|
|
|
const handlerCreate = async data => { |
|
|
|
const saveData = { |
|
|
|
const saveData = { |
|
|
|
...data, |
|
|
|
...data, |
|
|
@ -208,6 +222,7 @@ export const BasisDronDetailContainer = props => { |
|
|
|
dispatch(Actions.CREATE.request(saveData)); |
|
|
|
dispatch(Actions.CREATE.request(saveData)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 수정
|
|
|
|
const handlerUpdate = async data => { |
|
|
|
const handlerUpdate = async data => { |
|
|
|
const saveData = { |
|
|
|
const saveData = { |
|
|
|
...data, |
|
|
|
...data, |
|
|
@ -219,6 +234,7 @@ export const BasisDronDetailContainer = props => { |
|
|
|
dispatch(Actions.UPDATE.request(saveData)); |
|
|
|
dispatch(Actions.UPDATE.request(saveData)); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 기체 삭제
|
|
|
|
const handlerDelete = async data => { |
|
|
|
const handlerDelete = async data => { |
|
|
|
dispatch(Actions.DELETE.request(detail.arcrftSno)); |
|
|
|
dispatch(Actions.DELETE.request(detail.arcrftSno)); |
|
|
|
}; |
|
|
|
}; |
|
|
|