qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

물건현황

Browse Source
This commit is contained in:
basssy 2024-09-12 11:55:29 +09:00
parent 0963b60daf
commit 166b60ca03
1 changed files with 182 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

274
src/components/management/StuffDetail.jsx
View File

@ -44,45 +44,39 @@ export default function StuffDetail() {
const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
const [prefValue, setPrefValue] = useState('')
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
const [receiveUser, setReceiveUser] = useState('') //담당자
const [name2, setName2] = useState('') //물건명
const [name3, setName3] = useState('') //물건명후리가나
const [zipCode, setZipCode] = useState('') //우편번호
const [name5, setName5] = useState('') //수직적설량
const [gubun, setGubun] = useState('NEW') //신축 기축
const [sel, setSel] = useState('') //경칭선택
const [sel2, setSel2] = useState('') //발전량시뮬레이션지역
const [sel3, setSel3] = useState('') //기준풍속
const [sel4, setSel4] = useState('') //설치높이
const [powerSimAreaList, setPowerSimAreaList] = useState([]) //발전시뮬레이션 리스트
const [errors, setErrors] = useState({})
const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
const [testSelOption, setTestSelOption] = useState([]) // 테스트용
const [autoSelectValue, setAutoSelectValue] = useState('') //판매점명 자동완성
const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
const [isSelected, setIsSelected] = useState(false) //한랭지대첵 체크박스
const [isSelected2, setIsSelected2] = useState(false) //염해지역용아이템사용 체크박스
const [gubun2, setGubun2] = useState('1') //면조도구분 라디오
const [gubun3, setGubun3] = useState('A') //계약조건 라디오
const [memo, setMemo] = useState('') //메모
const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
// const [address1, setAddress1] = useState('') //우편API리턴 도도부현명
// const [address2, setAddress2] = useState('') //우편API리턴 시구정촌명
// const [address3, setAddress3] = useState('') //우편API리턴 마을 지역명
// const [prefCode, setPrefCode] = useState(1) //우편API prefcode
const [editMode, setEditMode] = useState('NEW')
const [detailData, setDetailData] = useState({})
useEffect(() => {
// 도도부현API
get({ url: '/api/object/prefecture/list' }).then((res) => {
if (!isEmptyArray(res)) {
console.log('도도부현API 결과:::', res)
//console.log('도도부현API 결과:::', res)
setPrefCodeList(res)
}
})
// 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
// salesStoreLevel 추가되면 붙여서 보내기
// 임시 1차점 판매점코드 saleStoreId=201TES01
// T01
get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
if (!isEmptyArray(res)) {
console.log('판매점 결과:::::', res)
setSaleStoreList(res)
//1차 판매점 자동완성 값 셋팅
form.setValue('saleStoreId', res[0].saleStoreId)
//1차 판매점 번호 셋팅
form.setValue('saleStoreName', res[0].saleStoreId)
}
})
// console.log('상세화면진입:::::::::', searchParams.get('objectNo'))
// console.log('물건번호::::', objectNo)
@ -100,10 +94,16 @@ export default function StuffDetail() {
}
}, [objectNo])
useEffect(() => {
// validateForm()
}, [receiveUser, name2, name3, gubun, sel, autoSelectValue, zipCode, sel2, sel3, name5, sel4])
//1차점 변경 이벤트
const onSelectionChange = (key) => {
if (key == null) {
form.setValue('saleStoreId', '')
form.setValue('saleStoreName', '')
} else {
form.setValue('saleStoreId', key)
form.setValue('saleStoreName', key)
}
}
// 우편번호 숫자만 체크
const _zipNo = watch('zipNo')
useEffect(() => {
@ -114,62 +114,82 @@ export default function StuffDetail() {
}
}, [_zipNo])
// 수직적설량 숫자만
const textTypeHandler2 = (e) => {
if (!e.target.value.match(/[^0-9]/g)) {
setName5(e.target.value)
}
}
const validateForm = () => {
//임시저장 저장 버튼 컨트롤
// dispCompanyName: '', //담당자
// objectName: '', //물건명
// objectNameOmit: '', //경칭선택
// saleStoreId: '', //판매점ID
// zipNo: '', //우편번호
// prefId: '', //도도부현
// address: '', //주소
// powerSimArea: '', //발전량시뮬레이션지역
// windSpeed: '', //기준풍속
// snowCover: '', //수직적설량
// coldAreaChk: false, //한랭지대책시행
// surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
// saltAreaChk: false, //염해지역용아이템사용
// installHeight: '', //설치높이
// powerConTerms: '0', //계약조건(잉여 / 전량)
// remark: '', //메모
// tempFlag: 'T', //임시저장(1) 저장(0)
const _dispCompanyName = watch('dispCompanyName')
const _objectName = watch('objectName')
const _objectNameOmit = watch('objectNameOmit')
const _saleStoreId = watch('saleStoreId')
const _prefId = watch('prefId')
const _address = watch('address')
const _powerSimArea = watch('powerSimArea')
const _windSpeed = watch('windSpeed')
const _snowCover = watch('snowCover')
const _installHeight = watch('installHeight')
useEffect(() => {
const formData = form.getValues()
console.log('폼::::::::::::', formData)
let errors = {}
if (!receiveUser || receiveUser.trim().length === 0) {
errors.receiveUser = '담당자 is required.'
if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
errors.dispCompanyName = true
}
if (!_objectName || _objectName.trim().length === 0) {
errors.objectName = true
}
if (!_objectNameOmit) {
errors.objectNameOmit = true
}
if (!_saleStoreId) {
errors.saleStoreId = true
}
if (!name2 || name2.trim().length === 0) {
errors.name2 = '물건명 is required.'
if (!_zipNo || _zipNo.length != 7) {
errors.zipCode = true
}
if (!name3 || name3.trim().length === 0) {
errors.name3 = '물건명후리가나 is required.'
if (!_prefId) {
errors.prefId = true
}
if (!sel) {
errors.sel = '경칭선택 is required'
if (!_address.trim().length === 0) {
errors.address = true
}
if (!sel2) {
errors.sel2 = '발전량시뮬레이션지역 is required'
if (!_powerSimArea) {
errors.powerSimArea = true
}
if (!sel3) {
errors.sel3 = '기준풍속 is required'
if (!_windSpeed) {
errors.windSpeed = true
}
if (!sel4) {
errors.sel4 = '설치높이 is required'
if (!_snowCover) {
errors.snowCover = true
}
if (!autoSelectValue) {
errors.autoSelectValue = '판매점ID자동완성 is required'
if (!_installHeight) {
errors.installHeight = true
}
if (!zipCode || zipCode.length != 7) {
errors.zipCode = '우편번호 is required.'
setButtonValid(true)
} else {
setButtonValid(false)
}
if (!name5) {
errors.name5 = '수직적설량 is required.'
}
console.log('errors::', errors)
setErrors(errors)
// console.log('errors::', errors)
setIsFormValid(Object.keys(errors).length === 0)
}
}, [_dispCompanyName, _objectName, _objectNameOmit, _saleStoreId, _zipNo, _prefId, _address, _powerSimArea, _windSpeed, _snowCover, _installHeight])
// 주소검색 API
const onSearchPostNumber = () => {
@ -179,9 +199,8 @@ export default function StuffDetail() {
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
//7830060
if (res.status === 200) {
console.log('res.results::', res.results)
if (res.results != null) {
console.log('res.results::', res.results)
console.log('주소검색::', res.results)
// prefId: '', //도도부현
// address: '', //주소
console.log('prefcode::', res.results[0].prefcode)
@ -193,7 +212,10 @@ export default function StuffDetail() {
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
form.setValue('prefId', '')
form.setValue('address', '')
form.setValue('zipNo', '')
setPrefValue('')
setPowerSimAreaList([])
form.setValue('powerSimArea', '')
}
} else {
alert(res.message)
@ -201,6 +223,21 @@ export default function StuffDetail() {
})
}
useEffect(() => {
if (prefValue !== '') {
console.log('우편번호 검색해서 도도부현골랐을때::::', prefValue)
// 발전시뮬레이션 지역 목록
// /api/object/prefecture/도도부현코드/list
get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
if (!isEmptyArray(res)) {
console.log('발전시뮬레이션::::::::', res)
setPowerSimAreaList(res)
// form.setValue('powerSimArea', res[0].prefId)
}
})
}
}, [prefValue])
const onTempSave = () => {
console.log('임시저장::', isFormValid)
}
@ -213,35 +250,33 @@ export default function StuffDetail() {
router.push('/management/stuff')
}
const changeAddress2 = (e) => {
console.log('e:::::::', e.target.value)
}
//필수값 다 입력했을때
const onValid = (data) => {
console.log('필수값 다 있고 저장')
console.log('data::::::', data)
const formData = form.getValues()
//console.log('formData::::', formData)
const _dispCompanyName = watch('dispCompanyName')
const _objectStatusId = watch('objectStatusId')
const _objectNameOmit = watch('objectNameOmit')
const _zipNo = watch('zipNo')
const _prefId = watch('prefId')
const _address = watch('address')
const _coldAreaChk = watch('coldAreaChk')
console.log(_dispCompanyName)
console.log(_objectStatusId)
console.log(_objectNameOmit)
console.log(_zipNo)
console.log(_prefId)
console.log('prefValue::', prefValue)
console.log(_address)
console.log('_coldAreaChk::', _coldAreaChk)
console.log('formData::::', formData)
// const _dispCompanyName = watch('dispCompanyName')
// const _objectStatusId = watch('objectStatusId')
// const _objectNameOmit = watch('objectNameOmit')
// const _zipNo = watch('zipNo')
// const _prefId = watch('prefId')
// const _address = watch('address')
// const _coldAreaChk = watch('coldAreaChk')
// console.log(_dispCompanyName)
// console.log(_objectStatusId)
// console.log(_objectNameOmit)
// console.log(_zipNo)
// console.log(_prefId)
// console.log('prefValue::', prefValue)
// console.log(_address)
// console.log('_coldAreaChk::', _coldAreaChk)
}
//필수값 안넣었을때
//필수값 안넣었을때 임시저장
const onInvalid = (errors) => {
console.log('실패', errors)
const formData = form.getValues()
console.log('임시저장formData::::', formData)
}
return (
@ -276,6 +311,22 @@ export default function StuffDetail() {
</div>
<div className="form-input">
<label>1차 판매점명 / ID</label>
<div className="flex w-full max-w-xs flex-col gap2">
{saleStoreList?.length > 0 && (
<Autocomplete
className="max-w-xs"
defaultItems={saleStoreList}
label="판매점ID자동완성"
// selectedKey={saleStoreValue}
selectedKey={form.watch('saleStoreId')}
{...form.register('saleStoreId', { required: true })}
onSelectionChange={onSelectionChange}
>
{(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
</Autocomplete>
)}
<input type="text" className="input-origin" value={form.watch('saleStoreName')} {...form.register('saleStoreName')} disabled />
</div>
</div>
<div className="form-input">
<label>2차 판매점명 / ID</label>
@ -313,9 +364,33 @@ export default function StuffDetail() {
</div>
<div className="form-input">
<label>발전량시뮬레이션지역</label>
{powerSimAreaList?.length > 0 && (
<select name="powerSimArea" {...register('powerSimArea', { required: true })}>
{powerSimAreaList.map((row) => {
return (
<option key={row.prefName} value={row.prefId}>
{row.prefName}
</option>
)
})}
</select>
// <Select className="max-w-xs" selectedKeys={form.watch('powerSimArea')} {...form.register('powerSimArea', { required: true })}>
// {powerSimAreaList.map((row) => {
// return <SelectItem key={row.prefName}>{row.prefName}</SelectItem>
// })}
// </Select>
)}
</div>
<div className="form-input">
<label>기준풍속</label>
<div className="flex w-full max-w-xs flex-col gap-2">
<select name="windSpeed" {...register('windSpeed', { required: true })}>
<option value="">기준풍속</option>
<option value="11">111</option>
<option value="22">222</option>
<option value="33">333</option>
</select>
</div>
</div>
<div className="form-input">
<label>수직적설량</label>
@ -354,7 +429,15 @@ export default function StuffDetail() {
</Checkbox>
</div>
<div className="form-input">
<label>설치높이 installHeight</label>
<label>설치높이</label>
<div className="flex w-full max-w-xs flex-col gap-2">
<select name="installHeight" {...register('installHeight', { required: true })}>
<option value="">설치높이</option>
<option value="11">111</option>
<option value="22">222</option>
<option value="33">333</option>
</select>
</div>
</div>
<div className="form-input">
<label>계약조건</label>
@ -379,7 +462,14 @@ export default function StuffDetail() {
/>
</div>
</div>
<button type="submit">신규화면임시저장!!!!!!!!!</button>
{!isFormValid ? (
<>
<button type="submit">신규화면임시저장!!!!!!!!!</button>
<Button type="submit">신규화면임시저장!!!!!</Button>
</>
) : (
<button type="submit">저장</button>
)}
</form>
)) || <div>상세:::::::::::</div>}