962 lines
40 KiB
JavaScript
962 lines
40 KiB
JavaScript
'use client'
|
|
|
|
import React, { useState, useEffect, useRef } from 'react'
|
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
|
import { Button } from '@nextui-org/react'
|
|
import Select from 'react-select'
|
|
import Link from 'next/link'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { isEmptyArray, isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useForm } from 'react-hook-form'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { sessionStore } from '@/store/commonAtom'
|
|
import FindAddressPop from './popup/FindAddressPop'
|
|
import PlanRequestPop from './popup/PlanRequestPop'
|
|
import WindSelectPop from './popup/WindSelectPop'
|
|
export default function StuffDetail() {
|
|
const [selOptions, setSelOptions] = useState('')
|
|
|
|
const sessionState = useRecoilValue(sessionStore)
|
|
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const { getMessage } = useMessage()
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
const ref = useRef()
|
|
const { get, post, del, promisePost } = useAxios(globalLocaleState)
|
|
//form
|
|
const formInitValue = {
|
|
// 물건번호 T...(임시) R...(진짜)
|
|
dispCompanyName: '', //담당자
|
|
objectStatusId: '0', //물건구분(신축:0 기축 : 1)
|
|
objectName: '', //물건명
|
|
objectNameOmit: '', //경칭선택
|
|
objectNameKana: '', //물건명 후리가나
|
|
saleStoreLevel: '', //1차점스토어레벨
|
|
saleStoreId: '', //1차점판매점ID
|
|
saleStoreName: '', //1차점판매점명
|
|
otherSaleStoreId: '', //1차점 외 판매점ID
|
|
otherSaleStoreName: '', //1차점 외 판매점명
|
|
otherSaleStoreLevel: '', //1차점 외 스토어레벨
|
|
zipNo: '', //우편번호
|
|
prefId: '', //도도부현
|
|
prefName: '',
|
|
address: '', //주소
|
|
areaId: '', //발전량시뮬레이션지역id
|
|
windSpeed: '', //기준풍속
|
|
verticalSnowCover: '', //수직적설량NEW
|
|
coldRegionFlg: false, //한랭지대책시행(true : 1 / false : 0)
|
|
surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ)
|
|
saltAreaFlg: false, //염해지역용아이템사용 (true : 1 / false : 0)
|
|
installHeight: '', //설치높이
|
|
conType: '0', //계약조건(잉여 / 전량)
|
|
remarks: '', //메모
|
|
tempFlag: 'T', //임시저장(1) 저장(0)
|
|
}
|
|
const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
|
|
defaultValues: formInitValue,
|
|
})
|
|
|
|
const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
|
|
|
|
const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
|
|
const [prefValue, setPrefValue] = useState('')
|
|
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
|
|
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
|
|
const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
|
|
|
|
const [areaIdList, setAreaIdList] = useState([]) //발전시뮬레이션 리스트
|
|
|
|
// const [windSpeedList, setWindSpeedList] = useState([]) //기준풍속 리스트 팝업으로이동
|
|
const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
|
|
const [showAddressButtonValid, setShowAddressButtonValid] = useState(false) //주소검색팝업 활성화 컨트롤
|
|
const [showDesignRequestButtonValid, setShowDesignRequestButtonValid] = useState(false) //설계의뢰팝업 활성화 컨트롤
|
|
const [showWindSpeedButtonValid, setShowWindSpeedButtonValid] = useState(false) //풍속선택팝업 활성화 컨트롤
|
|
const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
|
|
|
|
const [editMode, setEditMode] = useState('NEW')
|
|
const [detailData, setDetailData] = useState({})
|
|
|
|
useEffect(() => {
|
|
// console.log('objectNo::', objectNo)
|
|
|
|
if (objectNo) {
|
|
console.log('수정화면')
|
|
setEditMode('EDIT')
|
|
|
|
if (objectNo.substring(0, 1) === 'R') {
|
|
//진짜
|
|
setIsFormValid(true)
|
|
}
|
|
get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
|
|
console.log('물건번호로 상세 API 호출')
|
|
if (res != null) {
|
|
setDetailData(res)
|
|
}
|
|
})
|
|
} else {
|
|
// 신규 상세 공통APi
|
|
// 도도부현API
|
|
get({ url: '/api/object/prefecture/list' }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
// console.log('신규화면 도도부현API 결과:::', res)
|
|
setPrefCodeList(res)
|
|
}
|
|
})
|
|
|
|
// 임시 1차점 판매점코드 saleStoreId=201TES01
|
|
// T01
|
|
//1차점 : X167 T01
|
|
// get({ url: `/api/object/saleStore/TEMP02/list` }).then((res) => {
|
|
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
const firstList = res.filter((row) => row.saleStoreLevel === '1')
|
|
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
|
|
//1차점 셀렉트박스
|
|
setSaleStoreList(firstList)
|
|
setSelOptions(sessionState?.storeId)
|
|
form.setValue('saleStoreId', sessionState?.storeId)
|
|
form.setValue('saleStoreLevel', sessionState?.storeLvl)
|
|
|
|
//1차점 아닌 판매점 셀렉트박스
|
|
setOriginOtherSaleStoreList(otherList)
|
|
setOtherSaleStoreList(otherList)
|
|
}
|
|
})
|
|
}
|
|
}, [objectNo, sessionState])
|
|
|
|
useEffect(() => {
|
|
if (isObjectNotEmpty(detailData)) {
|
|
// 도도부현API
|
|
get({ url: '/api/object/prefecture/list' }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
// console.log('도도부현API 결과:::', res)
|
|
setPrefCodeList(res)
|
|
}
|
|
})
|
|
|
|
//상세정보로 1차점 목록등 셋팅??
|
|
// 임시 1차점 판매점코드 saleStoreId=201TES01
|
|
// T01
|
|
//1차점 : X167
|
|
get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
|
|
// get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
const firstList = res.filter((row) => row.saleStoreLevel === '1')
|
|
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
|
|
//1차점 셀렉트박스
|
|
setSaleStoreList(firstList)
|
|
//1차점 아닌 판매점 셀렉트박스
|
|
setOriginOtherSaleStoreList(otherList)
|
|
setOtherSaleStoreList(otherList)
|
|
}
|
|
})
|
|
|
|
console.log('상세데이타::세팅:::::', detailData)
|
|
}
|
|
}, [detailData])
|
|
|
|
//1차점 변경 이벤트
|
|
const onSelectionChange = (key) => {
|
|
if (isObjectNotEmpty(key)) {
|
|
setOtherSaleStoreList(otherSaleStoreList)
|
|
form.setValue('saleStoreId', key.saleStoreId)
|
|
form.setValue('saleStoreName', key.saleStoreName)
|
|
form.setValue('saleStoreLevel', key.saleStoreLevel)
|
|
setSelOptions(key.saleStoreId)
|
|
//선택한 1차점 정보로 2차점 list 추리기
|
|
//長府工産株式会社 大阪支社
|
|
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
|
|
setOtherSaleStoreList(newOtherSaleStoreList)
|
|
} else {
|
|
//X누름
|
|
setSelOptions('')
|
|
form.setValue('saleStoreId', '')
|
|
form.setValue('saleStoreName', '')
|
|
form.setValue('saleStoreLevel', '')
|
|
form.setValue('otherSaleStoreId', '')
|
|
form.setValue('otherSaleStoreName', '')
|
|
form.setValue('otherSaleStoreLevel', '')
|
|
setOtherSaleStoreList(originOtherSaleStoreList)
|
|
//1차점 지웠을때 2차점 자동완성 초기화
|
|
handleClear()
|
|
}
|
|
}
|
|
|
|
//2차점 변경 이벤트
|
|
const onSelectionChange2 = (key) => {
|
|
if (isObjectNotEmpty(key)) {
|
|
form.setValue('otherSaleStoreId', key.saleStoreId)
|
|
form.setValue('otherSaleStoreName', key.saleStoreName)
|
|
form.setValue('otherSaleStoreLevel', key.saleStoreLevel)
|
|
} else {
|
|
form.setValue('otherSaleStoreId', '')
|
|
form.setValue('otherSaleStoreName', '')
|
|
form.setValue('otherSaleStoreLevel', '')
|
|
}
|
|
}
|
|
|
|
//1차점 지웠을때 2차점 자동완성 초기화
|
|
const handleClear = () => {
|
|
if (ref.current) {
|
|
ref.current.clearValue()
|
|
}
|
|
}
|
|
|
|
//팝업에서 넘어온 우편정보
|
|
const setZipInfo = (info) => {
|
|
// console.log('팝업에서 넘어온 데이타::::::::', info)
|
|
setPrefValue(info.prefId)
|
|
form.setValue('prefId', info.prefId)
|
|
form.setValue('prefName', info.address1)
|
|
form.setValue('address', info.address2 + info.address3)
|
|
form.setValue('zipNo', info.zipNo)
|
|
}
|
|
|
|
//팝업에서 넘어온 설계의뢰 정보로 바꾸기
|
|
const setPlanReqInfo = (info) => {
|
|
console.log('팝업에서 넘어온 설계의뢰 정보::: ', info)
|
|
//building : 신축 기축
|
|
//planReqName : 물건명
|
|
//zipNo : 우편번호
|
|
//도도부현 :address1 주소 : address2 미세팅
|
|
//기준풍속 팝업열려면 setPrefValue(info.prefId) 필요
|
|
//기준풍속 :
|
|
// form.setValue('dispCompanyName', info.planReqName)
|
|
}
|
|
|
|
//팝업에서 넘어온 바람정보
|
|
const setWindSppedInfo = (info) => {
|
|
form.setValue('windSpeed', info.windSpeed)
|
|
}
|
|
|
|
//임시저장 저장 버튼 컨트롤
|
|
// dispCompanyName: '', //담당자
|
|
// objectName: '', //물건명
|
|
// objectNameOmit: '', //경칭선택
|
|
// saleStoreId: '', //판매점ID
|
|
// zipNo: '', //우편번호
|
|
// prefId: '', //도도부현
|
|
// address: '', //주소
|
|
// areaId: '', //발전량시뮬레이션지역new
|
|
// windSpeed: '', //기준풍속
|
|
// verticalSnowCover: '', //수직적설량
|
|
// coldRegionFlg: false, //한랭지대책시행
|
|
// surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
|
|
// saltAreaFlg: false, //염해지역용아이템사용
|
|
// installHeight: '', //설치높이
|
|
// conType : '0' //계약조건(잉여 / 전량)
|
|
// remarks: '', //메모
|
|
// tempFlag: 'T', //임시저장(1) 저장(0)
|
|
const _dispCompanyName = watch('dispCompanyName')
|
|
const _objectName = watch('objectName')
|
|
const _objectNameOmit = watch('objectNameOmit')
|
|
const _saleStoreId = watch('saleStoreId')
|
|
const _saleStoreLevel = watch('saleStoreLevel')
|
|
const _prefId = watch('prefId')
|
|
const _address = watch('address')
|
|
const _areaId = watch('areaId') //new
|
|
const _windSpeed = watch('windSpeed')
|
|
const _verticalSnowCover = watch('verticalSnowCover')
|
|
const _installHeight = watch('installHeight')
|
|
|
|
useEffect(() => {
|
|
if (editMode === 'NEW') {
|
|
const formData = form.getValues()
|
|
// console.log('임시저장폼::::::::::::', formData)
|
|
let errors = {}
|
|
if (!formData.dispCompanyName || formData.dispCompanyName.trim().length === 0) {
|
|
errors.dispCompanyName = true
|
|
}
|
|
if (!formData.objectName || formData.objectName.trim().length === 0) {
|
|
errors.objectName = true
|
|
}
|
|
if (!formData.objectNameOmit) {
|
|
errors.objectNameOmit = true
|
|
}
|
|
if (!formData.saleStoreId) {
|
|
errors.saleStoreId = true
|
|
}
|
|
|
|
if (!formData.prefId) {
|
|
errors.prefId = true
|
|
}
|
|
|
|
if (!formData.areaId) {
|
|
errors.areaId = true
|
|
}
|
|
|
|
if (!formData.windSpeed) {
|
|
errors.windSpeed = true
|
|
}
|
|
|
|
if (!formData.verticalSnowCover) {
|
|
errors.verticalSnowCover = true
|
|
}
|
|
|
|
if (!formData.installHeight) {
|
|
errors.installHeight = true
|
|
}
|
|
|
|
// console.log('임시저장용::', errors)
|
|
setIsFormValid(Object.keys(errors).length === 0 ? true : false)
|
|
} else {
|
|
console.log('상세일때 폼체크')
|
|
}
|
|
}, [
|
|
_dispCompanyName,
|
|
_objectName,
|
|
_objectNameOmit,
|
|
_saleStoreId,
|
|
_saleStoreLevel,
|
|
// _otherSaleStoreId,
|
|
// _otherSaleStoreLevel,
|
|
_prefId,
|
|
_address,
|
|
_areaId,
|
|
_windSpeed,
|
|
_verticalSnowCover,
|
|
_installHeight,
|
|
])
|
|
|
|
// 주소검색 팝업오픈
|
|
const onSearchPostNumberPopOpen = () => {
|
|
setShowAddressButtonValid(true)
|
|
}
|
|
|
|
//설계의뢰 팝업 오픈
|
|
const onSearchDesignRequestPopOpen = () => {
|
|
setShowDesignRequestButtonValid(true)
|
|
}
|
|
|
|
// 풍속선택 팝업 오픈
|
|
const onSearchWindSpeedPopOpen = () => {
|
|
const prefName = form.watch('prefName')
|
|
if (prefName === '') {
|
|
alert(getMessage('stuff.windSelectPopup.error.message1'))
|
|
} else {
|
|
setShowWindSpeedButtonValid(true)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (prefValue !== '') {
|
|
// 발전량시뮬레이션 지역 목록
|
|
get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
|
|
if (!isEmptyArray(res)) {
|
|
// console.log('발전량 시뮬레이션::::::::', res)
|
|
form.setValue('areaId', res[0].areaId)
|
|
form.setValue('areaName', res[0].prefName)
|
|
setAreaIdList(res)
|
|
}
|
|
})
|
|
}
|
|
}, [prefValue])
|
|
|
|
// 발전량 시뮬레이션 변경
|
|
const handleAreaIdOnChange = (e) => {
|
|
form.setValue('areaId', e.target.value)
|
|
}
|
|
|
|
//필수값 다 입력했을때
|
|
const onValid = (data, e) => {
|
|
const formData = form.getValues()
|
|
console.log('필수값 통과:::', data, formData)
|
|
// console.log('필수값 formData:::', formData)
|
|
// 수정모드일때는 PUT
|
|
// console.log('필수값 다 있고 저장')
|
|
// console.log('data::::::', data)
|
|
// 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 _coldRegionFlg = watch('coldRegionFlg')
|
|
// console.log(_dispCompanyName)
|
|
// console.log(_objectStatusId)
|
|
// console.log(_objectNameOmit)
|
|
// console.log(_zipNo)
|
|
// console.log(_prefId)
|
|
// console.log('prefValue::', prefValue)
|
|
// console.log(_address)
|
|
// console.log('_coldRegionFlg::', _coldRegionFlg)
|
|
}
|
|
|
|
//필수값 안넣었을때 임시저장 form required사용시
|
|
// const onInvalid = (errors) => {
|
|
// console.log('22222222222222222222222')
|
|
// const formData = form.getValues()
|
|
// console.log('임시저장formData::::', formData)
|
|
// }
|
|
|
|
// 임시저장
|
|
const onTempSave = async () => {
|
|
console.log('임시저장:::::')
|
|
return
|
|
const formData = form.getValues()
|
|
// console.log('formData::', formData)
|
|
const params = {
|
|
saleStoreId: formData.otherSaleStoreId ? formData.otherSaleStoreId : formData.saleStoreId,
|
|
saleStoreName: formData.otherSaleStoreName ? formData.otherSaleStoreName : formData.saleStoreName,
|
|
saleStoreLevel: formData.otherSaleStoreLevel ? formData.otherSaleStoreLevel : formData.saleStoreLevel,
|
|
objectStatusId: formData.objectStatusId,
|
|
objectName: formData.objectName,
|
|
objectNameOmit: formData.objectNameOmit,
|
|
objectNameKana: formData.objectNameKana,
|
|
zipNo: formData.zipNo,
|
|
prefId: formData.prefId,
|
|
prefName: formData.prefName,
|
|
address: formData.address,
|
|
areaId: formData.areaId,
|
|
receiveUser: formData.dispCompanyName,
|
|
installHeight: formData.installHeight,
|
|
windSpeed: formData.windSpeed,
|
|
verticalSnowCover: formData.verticalSnowCover,
|
|
surfaceType: formData.surfaceType,
|
|
conType: formData.conType,
|
|
coldRegionFlg: formData.coldRegionFlg,
|
|
saltAreaFlg: formData.saltAreaFlg,
|
|
tempFlg: '1',
|
|
workNo: null,
|
|
workName: null,
|
|
}
|
|
//1차점 or 2차점 안고르고 임시저장하면
|
|
if (params.saleStoreId == '') {
|
|
params.saleStoreId = sessionState.storeId
|
|
params.saleStoreLevel = sessionState.storeLvl
|
|
}
|
|
|
|
await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
|
|
if (res.status === 201) {
|
|
alert('임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.')
|
|
router.push(`${pathname}?objectNo=${res.data.objectNo.toString()}`)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 물건삭제
|
|
const onDelete = () => {
|
|
//http://localhost:8080/api/object/R201TES01240910023
|
|
// console.log('물건번호::::::::', objectNo)
|
|
alert('사양확정일이 있으면 삭제 불가')
|
|
if (confirm(getMessage('common.message.data.delete'))) {
|
|
let testobj = '10'
|
|
|
|
del({ url: `/api/object/${testobj}` }).then((res) => {
|
|
console.log('삭제 결과:::', res)
|
|
router.push('/management/stuff')
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{(editMode === 'NEW' && (
|
|
<form onSubmit={handleSubmit(onValid)}>
|
|
<div className="sub-table-box">
|
|
<div className="promise-gudie">
|
|
<span className="important">*</span>
|
|
{getMessage('stuff.detail.required')}
|
|
</div>
|
|
<div className="infomation-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{ width: '200px' }} />
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>{getMessage('stuff.detail.planReqNo')}</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
|
<input type="text" className="input-light" readOnly />
|
|
</div>
|
|
<Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
|
|
{getMessage('stuff.planReqPopup.title')}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.dispCompanyName')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="input-wrap" style={{ width: '500px' }}>
|
|
<input type="text" className="input-light" {...form.register('dispCompanyName')} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.objectStatusId')} <span className="important">*</span>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.detail.objectNameKana')}</th>
|
|
<td>
|
|
<div className="input-wrap" style={{ width: '789px' }}>
|
|
<input type="text" className="input-light" {...form.register('objectNameKana')} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="flx-box">
|
|
<div className="title">
|
|
{getMessage('stuff.detail.saleStoreId')}
|
|
<span className="important">*</span>
|
|
</div>
|
|
<div className="tooltips">
|
|
<span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
|
<Select
|
|
id="long-value-select1"
|
|
instanceId="long-value-select1"
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
placeholder="Select"
|
|
options={saleStoreList}
|
|
onChange={onSelectionChange}
|
|
getOptionLabel={(x) => x.saleStoreName}
|
|
getOptionValue={(x) => x.saleStoreId}
|
|
isClearable={true}
|
|
value={saleStoreList.filter(function (option) {
|
|
return option.saleStoreId === selOptions
|
|
})}
|
|
/>
|
|
</div>
|
|
<div className="input-wrap" style={{ width: '216px' }}>
|
|
<input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="flx-box">
|
|
<div className="title">{getMessage('stuff.detail.otherSaleStoreId')}</div>
|
|
<div className="tooltips">
|
|
<span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
|
|
</div>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
|
<Select
|
|
id="long-value-select2"
|
|
instanceId="long-value-select2"
|
|
className="react-select-custom"
|
|
classNamePrefix="custom"
|
|
placeholder="Select"
|
|
ref={ref}
|
|
options={otherSaleStoreList}
|
|
onChange={onSelectionChange2}
|
|
getOptionLabel={(x) => x.saleStoreName}
|
|
getOptionValue={(x) => x.saleStoreId}
|
|
isDisabled={form.watch('saleStoreId') !== '' ? false : true}
|
|
isClearable={true}
|
|
/>
|
|
</div>
|
|
<div className="input-wrap" style={{ width: '216px' }}>
|
|
<input
|
|
type="text"
|
|
className="input-light"
|
|
value={form.watch('otherSaleStoreId')}
|
|
{...form.register('otherSaleStoreId')}
|
|
readOnly
|
|
/>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.zipNo')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
|
<input type="text" className="input-light" disabled value={form.watch('zipNo')} />
|
|
</div>
|
|
<Button className="btn-origin grey" onClick={onSearchPostNumberPopOpen}>
|
|
{getMessage('stuff.detail.btn.addressPop')}
|
|
</Button>
|
|
<div className="guide">{getMessage('stuff.detail.btn.addressPop.guide')}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.prefId')}
|
|
<span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap" style={{ width: '200px' }}>
|
|
{prefCodeList?.length > 0 && (
|
|
<select className="select-light" name="prefName" {...register('prefId')} disabled>
|
|
{prefCodeList.map((row) => (
|
|
<option key={row.prefId} value={row.prefId}>
|
|
{row.prefName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
<div className="input-wrap mr5" style={{ width: '580px' }}>
|
|
<input type="text" className="input-light" value={form.watch('address')} {...form.register('address')} />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.areaId')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="select-wrap" style={{ width: '200px' }}>
|
|
<select
|
|
className="select-light"
|
|
name="areaId"
|
|
disabled={areaIdList?.length > 0 ? false : true}
|
|
onChange={handleAreaIdOnChange}
|
|
>
|
|
{areaIdList.map((row) => {
|
|
return (
|
|
<option key={row.prefName} value={row.prefId}>
|
|
{row.prefName}
|
|
</option>
|
|
)
|
|
})}
|
|
</select>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.windSpeed')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="input-wrap mr10">
|
|
<input type="text" className="input-light" readOnly value={form.watch('windSpeed')} {...register('windSpeed')} />
|
|
</div>
|
|
{/* <div className="select-wrap mr10" style={{ width: '200px' }}>
|
|
<select className="select-light" name="windSpeed" {...register('windSpeed')}>
|
|
{windSpeedList.map((row) => {
|
|
return (
|
|
<option key={row.windSpeed} value={row.windSpeed}>
|
|
{row.windSpeed}
|
|
</option>
|
|
)
|
|
})}
|
|
</select>
|
|
</div> */}
|
|
<span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
|
|
<Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
|
|
{getMessage('stuff.detail.btn.windSpeedPop')}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.verticalSnowCover')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr10" style={{ width: '200px' }}>
|
|
<select className="select-light" name="verticalSnowCover" {...register('verticalSnowCover')}>
|
|
<option value="">수직적설량코드?</option>
|
|
<option value="30">30</option>
|
|
<option value="40">40</option>
|
|
</select>
|
|
</div>
|
|
<span className="mr10">cm</span>
|
|
<div className="d-check-box light">
|
|
<input type="checkbox" id="coldRegionFlg" {...form.register('coldRegionFlg')} />
|
|
<label htmlFor="coldRegionFlg">{getMessage('stuff.detail.coldRegionFlg')}</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.surfaceType')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="surfaceType" value="III・IV" id="surfaceType0" {...form.register('surfaceType')} />
|
|
<label htmlFor="surfaceType0">III・IV</label>
|
|
</div>
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
|
|
<label htmlFor="surfaceType1">Ⅱ</label>
|
|
</div>
|
|
<div className="d-check-box light mr5">
|
|
<input type="checkbox" id="saltAreaFlg" {...form.register('saltAreaFlg')} />
|
|
<label htmlFor="saltAreaFlg">{getMessage('stuff.detail.saltAreaFlg')}</label>
|
|
</div>
|
|
<div className="tooltips"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.installHeight')} <span className="important">*</span>
|
|
</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>
|
|
<span>m</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.detail.conType')}</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="conType" value="0" id="conType0" {...form.register('conType')} />
|
|
<label htmlFor="conType0">{getMessage('stuff.detail.conType0')}</label>
|
|
</div>
|
|
<div className="d-check-radio light mr10">
|
|
<input type="radio" name="conType" value="1" id="conType1" {...form.register('conType')} />
|
|
<label htmlFor="conType1">{getMessage('stuff.detail.conType1')}</label>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.detail.remarks')}</th>
|
|
<td>
|
|
<div className="input-wrap">
|
|
<input type="text" className="input-light" {...form.register('remarks')} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="sub-table-footer">
|
|
{!isFormValid ? (
|
|
<Button className="btn-origin grey mr5" onClick={onTempSave}>
|
|
New화면 임시저장
|
|
</Button>
|
|
) : (
|
|
<Button type="submit" className="btn-origin navy mr5">
|
|
NEW 화면 저장
|
|
</Button>
|
|
)}
|
|
<Link href="/management/stuff">
|
|
<Button type="button" className="btn-origin grey">
|
|
NEW화면 물건목록이동
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)) || (
|
|
<>
|
|
<form onSubmit={handleSubmit(onValid)}>
|
|
<div className="sub-table-box">
|
|
<div className="promise-gudie">
|
|
<span className="important">*</span> {getMessage('stuff.detail.required')}
|
|
</div>
|
|
<div className="infomation-table">
|
|
<table>
|
|
<colgroup>
|
|
<col style={{ width: '200px' }} />
|
|
<col />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<th>{getMessage('stuff.detail.planReqNo')}</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
|
<input type="text" className="input-light" readOnly />
|
|
</div>
|
|
<Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
|
|
{getMessage('stuff.planReqPopup.title')}
|
|
</Button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.dispCompanyName')} <span className="important">*</span>
|
|
</th>
|
|
<td>
|
|
<div className="input-wrap" style={{ width: '500px' }}>
|
|
<input type="text" className="input-light" {...form.register('dispCompanyName')} value={form.watch('dispCompanyName')} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
{getMessage('stuff.detail.objectStatusId')} <span className="importatn">*</span>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{getMessage('stuff.detail.objectNameKana')}</th>
|
|
<td>
|
|
<div className="input-wrap" style={{ width: '789px' }}>
|
|
<input type="text" className="input-light" {...form.register('objectNameKana')} />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>
|
|
<div className="flx-box">
|
|
<div className="title">
|
|
{getMessage('stuff.detail.saleStoreId')}
|
|
<span className="important">*</span>
|
|
</div>
|
|
<div className="tooltips"></div>
|
|
</div>
|
|
</th>
|
|
<td>
|
|
<div className="flx-box">
|
|
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
|
{/* <Select
|
|
options={saleStoreList}
|
|
value={form.watch('saleStoreId')}
|
|
onChange={onSelectionChange}
|
|
labelField="saleStoreName"
|
|
valueField="saleStoreId"
|
|
searchBy="saleStoreName"
|
|
clearable={true}
|
|
></Select> */}
|
|
</div>
|
|
<div className="input-wrap" style={{ width: '216px' }}>
|
|
<input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{objectNo.substring(0, 1) === 'R' ? (
|
|
<>
|
|
<Link href="/management/stuff">
|
|
<Button type="button" className="btn-origin grey mr5">
|
|
R상세:물건목록
|
|
</Button>
|
|
</Link>
|
|
<Button type="submit" className="btn-origin navy mr5">
|
|
R상세:저장
|
|
</Button>
|
|
<Button type="submit" className="btn-origin navy" onClick={onDelete}>
|
|
R상세:물건삭제
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
{!isFormValid ? (
|
|
<Button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
|
|
TEMP상세:임시저장
|
|
</Button>
|
|
) : (
|
|
<Button type="submit" className="btn-origin navy mr5">
|
|
TEMP상세:저장
|
|
</Button>
|
|
)}
|
|
<Link href="/management/stuff">
|
|
<Button type="button" className="btn-origin grey">
|
|
T상세:물건목록
|
|
</Button>
|
|
</Link>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
|
|
{showDesignRequestButtonValid && (
|
|
<PlanRequestPop
|
|
setShowDesignRequestButtonValid={setShowDesignRequestButtonValid}
|
|
saleStoreId={form.watch('saleStoreId')}
|
|
saleStoreLevel={form.watch('saleStoreLevel')}
|
|
otherSaleStoreId={form.watch('otherSaleStoreId')}
|
|
otherSaleStoreLevel={form.watch('otherSaleStoreLevel')}
|
|
planReqInfo={setPlanReqInfo}
|
|
/>
|
|
)}
|
|
{showWindSpeedButtonValid && (
|
|
<WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />
|
|
)}
|
|
</>
|
|
)
|
|
}
|