물건정보신규등록화면
This commit is contained in:
parent
f372c9ae61
commit
9ca8d99555
@ -15,7 +15,11 @@ import { sessionStore } from '@/store/commonAtom'
|
||||
import FindAddressPop from './popup/FindAddressPop'
|
||||
import PlanRequestPop from './popup/PlanRequestPop'
|
||||
import WindSelectPop from './popup/WindSelectPop'
|
||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
|
||||
export default function StuffDetail() {
|
||||
//공통코드
|
||||
const { commonCode, findCommonCode } = useCommonCode()
|
||||
const [selOptions, setSelOptions] = useState('')
|
||||
|
||||
const sessionState = useRecoilValue(sessionStore)
|
||||
@ -26,7 +30,7 @@ export default function StuffDetail() {
|
||||
const { getMessage } = useMessage()
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
const ref = useRef()
|
||||
const { get, post, del, promisePost } = useAxios(globalLocaleState)
|
||||
const { get, del, promisePost } = useAxios(globalLocaleState)
|
||||
//form
|
||||
const formInitValue = {
|
||||
// 물건번호 T...(임시) R...(진짜)
|
||||
@ -63,6 +67,10 @@ export default function StuffDetail() {
|
||||
|
||||
const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
|
||||
|
||||
const [honorificCodeList, setHonorificCodeList] = useState([]) //경칭 공통코드 리스트
|
||||
const [selHonorificCode, setSelHonorificCode] = useState('') //선택한 경칭코드
|
||||
const [objectStatusList, setObjectStatusList] = useState([]) //물건구분 공통코드 리스트
|
||||
const [windSpeedList, setWindSpeedList] = useState([]) //기준 풍속 공통코드 리스트
|
||||
const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
|
||||
const [prefValue, setPrefValue] = useState('')
|
||||
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
|
||||
@ -92,7 +100,6 @@ export default function StuffDetail() {
|
||||
setIsFormValid(true)
|
||||
}
|
||||
get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
|
||||
console.log('물건번호로 상세 API 호출')
|
||||
if (res != null) {
|
||||
setDetailData(res)
|
||||
}
|
||||
@ -128,6 +135,24 @@ export default function StuffDetail() {
|
||||
}
|
||||
}, [objectNo, sessionState])
|
||||
|
||||
useEffect(() => {
|
||||
const code1 = findCommonCode(200800) //경칭
|
||||
const code2 = findCommonCode(201700) //신축/기축
|
||||
const code3 = findCommonCode(113600) //기준풍속
|
||||
if (code1 != null) {
|
||||
// console.log('경칭공코::::::', code1)
|
||||
setHonorificCodeList(code1)
|
||||
}
|
||||
if (code2 != null) {
|
||||
// console.log('신축/기축공코::::', code2)
|
||||
setObjectStatusList(code2)
|
||||
}
|
||||
if (code3 != null) {
|
||||
// console.log('기준풍속::::', code3)
|
||||
setWindSpeedList(code3)
|
||||
}
|
||||
}, [commonCode])
|
||||
|
||||
useEffect(() => {
|
||||
if (isObjectNotEmpty(detailData)) {
|
||||
// 도도부현API
|
||||
@ -159,6 +184,26 @@ export default function StuffDetail() {
|
||||
}
|
||||
}, [detailData])
|
||||
|
||||
//경칭선택 변경 이벤트
|
||||
const onChangeHonorificCode = (key) => {
|
||||
if (isObjectNotEmpty(key)) {
|
||||
setSelHonorificCode(key.clCode)
|
||||
form.setValue('objectNameOmit', key.clCode)
|
||||
} else {
|
||||
setSelHonorificCode('')
|
||||
form.setValue('objectNameOmit', '')
|
||||
}
|
||||
}
|
||||
|
||||
//기준풍속 변경 이벤트
|
||||
const onChangeWindSpeedCode = (key) => {
|
||||
if (isObjectNotEmpty(key)) {
|
||||
form.setValue('windSpeed', key.clCode)
|
||||
} else {
|
||||
form.setValue('windSpeed', '')
|
||||
}
|
||||
}
|
||||
|
||||
//1차점 변경 이벤트
|
||||
const onSelectionChange = (key) => {
|
||||
if (isObjectNotEmpty(key)) {
|
||||
@ -208,7 +253,7 @@ export default function StuffDetail() {
|
||||
|
||||
//팝업에서 넘어온 우편정보
|
||||
const setZipInfo = (info) => {
|
||||
console.log('팝업에서 넘어온 우편 데이타::::::::', info)
|
||||
// console.log('팝업에서 넘어온 우편 데이타::::::::', info)
|
||||
setPrefValue(info.prefId)
|
||||
form.setValue('prefId', info.prefId)
|
||||
form.setValue('prefName', info.address1)
|
||||
@ -243,7 +288,7 @@ export default function StuffDetail() {
|
||||
form.setValue('verticalSnowCover', info.verticalSnowCover)
|
||||
form.setValue('surfaceType', info.surfaceType)
|
||||
//설치 높이 installHeight
|
||||
|
||||
form.setValue('installHeight', info.installHeight)
|
||||
form.setValue('remarks', info.remarks)
|
||||
}
|
||||
|
||||
@ -285,7 +330,7 @@ export default function StuffDetail() {
|
||||
useEffect(() => {
|
||||
if (editMode === 'NEW') {
|
||||
const formData = form.getValues()
|
||||
// console.log('임시저장폼::::::::::::', formData)
|
||||
// console.log('임시저장폼error체크::::::::::::', formData)
|
||||
let errors = {}
|
||||
if (!formData.dispCompanyName || formData.dispCompanyName.trim().length === 0) {
|
||||
errors.dispCompanyName = true
|
||||
@ -415,10 +460,9 @@ export default function StuffDetail() {
|
||||
|
||||
// 임시저장
|
||||
const onTempSave = async () => {
|
||||
console.log('임시저장:::::')
|
||||
return
|
||||
const formData = form.getValues()
|
||||
// console.log('formData::', formData)
|
||||
console.log('임시저장누름:::::', formData)
|
||||
return
|
||||
const params = {
|
||||
saleStoreId: formData.otherSaleStoreId ? formData.otherSaleStoreId : formData.saleStoreId,
|
||||
saleStoreName: formData.otherSaleStoreName ? formData.otherSaleStoreName : formData.saleStoreName,
|
||||
@ -518,24 +562,43 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="d-check-radio light mr10">
|
||||
<input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
|
||||
<label htmlFor="objectStatus0">{getMessage('stuff.detail.objectStatus0')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio light mr10">
|
||||
<input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
|
||||
<label htmlFor="objectStatus1">{getMessage('stuff.detail.objectStatus1')}</label>
|
||||
</div>
|
||||
{/* 라디오시작 */}
|
||||
{objectStatusList.map((row, index) => {
|
||||
return (
|
||||
<div className="d-check-radio light mr10" key={`objectStatusId_${row.clCode}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="objectStatusId"
|
||||
value={row.clCode}
|
||||
id={`objectStatus${row.clCode}`}
|
||||
{...register('objectStatusId')}
|
||||
/>
|
||||
<label htmlFor={`objectStatus${row.clCode}`}>{row.clCodeNm}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* 라디오끝 */}
|
||||
<div className="input-wrap mr5" style={{ width: '545px' }}>
|
||||
<input type="text" className="input-light" {...form.register('objectName')} />
|
||||
</div>
|
||||
<div className="select-wrap" style={{ width: '120px' }}>
|
||||
<select className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
|
||||
<option value="">경칭선택</option>
|
||||
<option value="11">경칭11</option>
|
||||
<option value="22">경칭22</option>
|
||||
<option value="33">경칭33</option>
|
||||
</select>
|
||||
<Select
|
||||
{...register('objectNameOmit')}
|
||||
id="ng-value-select0"
|
||||
instanceId="long-value-select0"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
placeholder="Select"
|
||||
options={honorificCodeList}
|
||||
onChange={onChangeHonorificCode}
|
||||
getOptionLabel={(x) => x.clCodeNm}
|
||||
getOptionValue={(x) => x.clCode}
|
||||
isClearable={true}
|
||||
isSearchable={false}
|
||||
value={honorificCodeList.filter(function (option) {
|
||||
return option.clCode === selHonorificCode
|
||||
})}
|
||||
></Select>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -611,10 +674,10 @@ export default function StuffDetail() {
|
||||
getOptionValue={(x) => x.saleStoreId}
|
||||
isDisabled={form.watch('saleStoreId') !== '' ? false : true}
|
||||
isClearable={true}
|
||||
value={otherSaleStoreList.filter(function (option) {
|
||||
// console.log('2차점::::::', option)
|
||||
// return option.saleStoreId === selOptions
|
||||
})}
|
||||
//value={otherSaleStoreList.filter(function (option) {
|
||||
// console.log('2차점::::::', option)
|
||||
// return option.saleStoreId === selOptions
|
||||
//})}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '216px' }}>
|
||||
@ -708,9 +771,30 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr10">
|
||||
{/* <div className="input-wrap mr10">
|
||||
<input type="text" className="input-light" readOnly value={form.watch('windSpeed')} {...register('windSpeed')} />
|
||||
</div> */}
|
||||
{/* 기준풍속sel시작 */}
|
||||
<div className="select-wrap mr10" style={{ width: '200px' }}>
|
||||
<Select
|
||||
{...register('windSpeed')}
|
||||
id="long-value-select5"
|
||||
instanceId="long-value-select5"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
placeholder="Select"
|
||||
options={windSpeedList}
|
||||
onChange={onChangeWindSpeedCode}
|
||||
getOptionLabel={(x) => x.clCodeNm}
|
||||
getOptionValue={(x) => x.clCode}
|
||||
isClearable={true}
|
||||
isSearchable={false}
|
||||
value={windSpeedList.filter(function (option) {
|
||||
return option.clCode === watch('windSpeed')
|
||||
})}
|
||||
></Select>
|
||||
</div>
|
||||
{/* 기준풍속sel끝 */}
|
||||
<span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
|
||||
<Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
|
||||
{getMessage('stuff.detail.btn.windSpeedPop')}
|
||||
@ -724,12 +808,15 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="select-wrap mr10" style={{ width: '200px' }}>
|
||||
{/* <div className="select-wrap mr10" style={{ width: '200px' }}>
|
||||
<select className="select-light" name="verticalSnowCover" {...register('verticalSnowCover')}>
|
||||
<option value="">수직적설량코드?</option>
|
||||
<option value="">수직적설량 인풋</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className="input-wrap mr10" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" value={form.watch('verticalSnowCover')} {...register('verticalSnowCover')} />
|
||||
</div>
|
||||
<span className="mr10">cm</span>
|
||||
<div className="d-check-box light">
|
||||
@ -767,13 +854,8 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="select-wrap mr10" style={{ width: '200px' }}>
|
||||
<select className="select-light" name="installHeight" {...register('installHeight')}>
|
||||
<option value="">설치높이공코</option>
|
||||
<option value="11">111</option>
|
||||
<option value="22">222</option>
|
||||
<option value="33">333</option>
|
||||
</select>
|
||||
<div className="input-wrap mr10" style={{ width: '200px' }}>
|
||||
<input type="text" className="input-light" value={form.watch('installHeight')} {...register('installHeight')} />
|
||||
</div>
|
||||
<span>m</span>
|
||||
</div>
|
||||
@ -866,24 +948,43 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="d-check-radio light mr10">
|
||||
<input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
|
||||
<label htmlFor="objectStatus0">{getMessage('stuff.detail.objectStatus0')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio light mr10">
|
||||
<input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
|
||||
<label htmlFor="objectStatus1">{getMessage('stuff.detail.objectStatus1')}</label>
|
||||
</div>
|
||||
{/* 상세라디오시작 */}
|
||||
{objectStatusList.map((row) => {
|
||||
return (
|
||||
<div className="d-check-radio light mr10" key={`objectStatusId_${row.clCode}`}>
|
||||
<input
|
||||
type="radio"
|
||||
name="objectStatusId"
|
||||
value={row.clCode}
|
||||
id={`objectStatus${row.clCode}`}
|
||||
{...register('objectStatusId')}
|
||||
/>
|
||||
<label htmlFor={`objectStatus${row.clCode}`}>{row.clCodeNm}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{/* 상세라디오끝 */}
|
||||
<div className="input-wrap mr5" style={{ width: '545px' }}>
|
||||
<input type="text" className="input-light" {...form.register('objectName')} />
|
||||
</div>
|
||||
<div className="select-wrap" style={{ width: '120px' }}>
|
||||
<select className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
|
||||
<option value="">경칭선택</option>
|
||||
<option value="11">경칭11</option>
|
||||
<option value="22">경칭22</option>
|
||||
<option value="33">경칭33</option>
|
||||
</select>
|
||||
<Select
|
||||
{...register('objectNameOmit')}
|
||||
id="ng-value-select0"
|
||||
instanceId="long-value-select0"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
placeholder="Select"
|
||||
options={honorificCodeList}
|
||||
onChange={onChangeHonorificCode}
|
||||
getOptionLabel={(x) => x.clCodeNm}
|
||||
getOptionValue={(x) => x.clCode}
|
||||
isClearable={true}
|
||||
isSearchable={false}
|
||||
value={honorificCodeList.filter(function (option) {
|
||||
return option.clCode === selHonorificCode
|
||||
})}
|
||||
></Select>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useRef } from 'react'
|
||||
import { useEffect, useState, useRef } from 'react'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
@ -8,7 +8,7 @@ import SingleDatePicker from '@/components/common/datepicker/SingleDatePicker'
|
||||
import dayjs from 'dayjs'
|
||||
import PlanRequestPopQGrid from './PlanRequestPopQGrid'
|
||||
import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
|
||||
|
||||
import { useCommonCode } from '@/hooks/common/useCommonCode'
|
||||
import Select from 'react-select'
|
||||
import QPagination from '@/components/common/pagination/QPagination'
|
||||
export default function PlanRequestPop(props) {
|
||||
@ -16,6 +16,11 @@ export default function PlanRequestPop(props) {
|
||||
const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
|
||||
const [totalCount, setTotalCount] = useState(0) //총 갯수
|
||||
|
||||
//공통코드
|
||||
const { commonCode, findCommonCode } = useCommonCode()
|
||||
|
||||
const [planStatCdList, setPlanStatCdList] = useState([])
|
||||
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
|
||||
const [planReqObject, setPlanReqObject] = useState({})
|
||||
@ -70,10 +75,8 @@ export default function PlanRequestPop(props) {
|
||||
|
||||
// 상태 검색조건 변경
|
||||
const onSelectionChange = (key) => {
|
||||
//임시작업
|
||||
// console.log('E::::::::', key)
|
||||
if (isObjectNotEmpty(key)) {
|
||||
setSchPlanStatCd(key.value)
|
||||
setSchPlanStatCd(key.clCode)
|
||||
} else {
|
||||
//X누름
|
||||
setSchPlanStatCd('')
|
||||
@ -242,24 +245,12 @@ export default function PlanRequestPop(props) {
|
||||
}
|
||||
}
|
||||
|
||||
const tempList = [
|
||||
{
|
||||
label: '완료',
|
||||
value: 'C',
|
||||
},
|
||||
{
|
||||
label: '저장',
|
||||
value: 'I',
|
||||
},
|
||||
{
|
||||
label: '접수',
|
||||
value: 'R',
|
||||
},
|
||||
{
|
||||
label: '제출',
|
||||
value: 'S',
|
||||
},
|
||||
]
|
||||
useEffect(() => {
|
||||
const code1 = findCommonCode(115800) //상태
|
||||
if (code1 != null) {
|
||||
setPlanStatCdList(code1)
|
||||
}
|
||||
}, [commonCode])
|
||||
|
||||
return (
|
||||
<div className="modal-popup">
|
||||
@ -378,8 +369,10 @@ export default function PlanRequestPop(props) {
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
ref={ref}
|
||||
options={tempList}
|
||||
options={planStatCdList}
|
||||
onChange={onSelectionChange}
|
||||
getOptionLabel={(x) => x.clCodeNm}
|
||||
getOptionValue={(x) => x.clCode}
|
||||
isSearchable={false}
|
||||
placeholder="Select"
|
||||
isClearable={true}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user