770 lines
29 KiB
JavaScript
770 lines
29 KiB
JavaScript
import { GlobalDataContext } from '@/app/GlobalDataProvider'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
|
|
import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
|
|
import { roofsState } from '@/store/roofAtom'
|
|
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
|
|
import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import Swal from 'sweetalert2'
|
|
|
|
const Trestle = forwardRef((props, ref) => {
|
|
const { tabNum, setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData, setRoofsStore } = props
|
|
const { getMessage } = useMessage()
|
|
// const [selectedTrestle, setSelectedTrestle] = useState()
|
|
const currentAngleType = useRecoilValue(currentAngleTypeSelector)
|
|
const pitchText = useRecoilValue(pitchTextSelector)
|
|
const [selectedRoof, setSelectedRoof] = useState(null)
|
|
const {
|
|
trestleState,
|
|
trestleDetail,
|
|
dispatch,
|
|
raftBaseList,
|
|
trestleList,
|
|
constMthdList,
|
|
roofBaseList,
|
|
constructionList,
|
|
eavesMargin,
|
|
ridgeMargin,
|
|
kerabaMargin,
|
|
setEavesMargin,
|
|
setRidgeMargin,
|
|
setKerabaMargin,
|
|
lengthBase,
|
|
setLengthBase,
|
|
hajebichi,
|
|
setHajebichi,
|
|
cvrYn,
|
|
cvrChecked,
|
|
snowGdPossYn,
|
|
snowGdChecked,
|
|
setCvrYn,
|
|
setCvrChecked,
|
|
setSnowGdPossYn,
|
|
setSnowGdChecked,
|
|
} = useModuleTrestle({
|
|
selectedRoof,
|
|
})
|
|
const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
|
|
// const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
|
|
const [selectedRaftBase, setSelectedRaftBase] = useState(null)
|
|
const [selectedTrestle, setSelectedTrestle] = useState(null)
|
|
const [selectedConstMthd, setSelectedConstMthd] = useState(null)
|
|
const [selectedConstruction, setSelectedConstruction] = useState(null)
|
|
const [selectedRoofBase, setSelectedRoofBase] = useState(null)
|
|
const { managementState } = useContext(GlobalDataContext)
|
|
const { restoreModuleInstArea } = useModuleBasicSetting()
|
|
const [flag, setFlag] = useState(false)
|
|
const tempModuleSelectionData = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (roofs && !selectedRoof) {
|
|
setSelectedRoof(roofs[0])
|
|
}
|
|
|
|
//모듈 설치 영역 복구
|
|
restoreModuleInstArea()
|
|
}, [roofs])
|
|
|
|
useEffect(() => {
|
|
if (flag && moduleSelectionData) {
|
|
if (JSON.stringify(tempModuleSelectionData.current) === JSON.stringify(moduleSelectionData)) {
|
|
setTabNum(tabNum + 1)
|
|
}
|
|
}
|
|
}, [flag, moduleSelectionData])
|
|
|
|
useEffect(() => {
|
|
if (selectedRoof) {
|
|
if (moduleSelectionData?.roofConstructions?.length >= selectedRoof.index + 1) {
|
|
const { construction, trestle, trestleDetail } = moduleSelectionData?.roofConstructions[selectedRoof.index]
|
|
dispatch({
|
|
type: 'SET_INITIALIZE',
|
|
roof: { common: moduleSelectionData.common, module: moduleSelectionData.module, construction, trestle, trestleDetail, ...selectedRoof },
|
|
})
|
|
} else {
|
|
dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, common: moduleSelectionData.common, module: moduleSelectionData.module } })
|
|
}
|
|
}
|
|
}, [selectedRoof])
|
|
|
|
useEffect(() => {
|
|
if (raftBaseList.length > 0) {
|
|
setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === selectedRoof?.raft) ?? null)
|
|
} else {
|
|
setSelectedRaftBase(null)
|
|
}
|
|
}, [raftBaseList])
|
|
|
|
useEffect(() => {
|
|
if (trestleList.length > 0) {
|
|
setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
|
|
} else {
|
|
setSelectedTrestle(null)
|
|
}
|
|
}, [trestleList])
|
|
|
|
useEffect(() => {
|
|
if (roofBaseList.length > 0) {
|
|
setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
|
|
} else {
|
|
setSelectedRoofBase(null)
|
|
}
|
|
}, [roofBaseList])
|
|
|
|
useEffect(() => {
|
|
if (constMthdList.length > 0) {
|
|
setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
|
|
} else {
|
|
setSelectedConstMthd(null)
|
|
}
|
|
}, [constMthdList])
|
|
|
|
useEffect(() => {
|
|
if (constructionList.length > 0) {
|
|
setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp) ?? null)
|
|
if (constructionList.filter((construction) => construction.constPossYn === 'Y').length === 0) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error4', [selectedRoof?.nameJp]), // 시공법법을 선택해주세요.
|
|
icon: 'warning',
|
|
})
|
|
}
|
|
} else {
|
|
setSelectedConstruction(null)
|
|
}
|
|
}, [constructionList])
|
|
|
|
const getConstructionState = (index) => {
|
|
if (constructionList && constructionList.length > 0) {
|
|
if (constructionList[index].constPossYn === 'Y') {
|
|
if (trestleState && trestleState.constTp === constructionList[index].constTp) {
|
|
return 'blue'
|
|
}
|
|
return 'white'
|
|
}
|
|
return 'no-click'
|
|
}
|
|
return 'no-click'
|
|
}
|
|
|
|
const onChangeLength = (e) => {
|
|
setLengthBase(e)
|
|
dispatch({
|
|
type: 'SET_LENGTH',
|
|
roof: {
|
|
length: e,
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raft: selectedRaftBase?.clCode,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeRaftBase = (e) => {
|
|
setSelectedRaftBase(e)
|
|
dispatch({
|
|
type: 'SET_RAFT_BASE',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raft: e.clCode,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeTrestleMaker = (e) => {
|
|
setSelectedTrestle(e)
|
|
dispatch({
|
|
type: 'SET_TRESTLE_MAKER',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raft: selectedRaftBase?.clCode,
|
|
trestleMkrCd: e.trestleMkrCd,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeConstMthd = (e) => {
|
|
setSelectedConstMthd(e)
|
|
dispatch({
|
|
type: 'SET_CONST_MTHD',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raft: selectedRaftBase?.clCode,
|
|
trestleMkrCd: selectedTrestle.trestleMkrCd,
|
|
constMthdCd: e.constMthdCd,
|
|
},
|
|
})
|
|
}
|
|
|
|
const onChangeRoofBase = (e) => {
|
|
setSelectedRoofBase(e)
|
|
dispatch({
|
|
type: 'SET_ROOF_BASE',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raft: selectedRaftBase?.clCode,
|
|
trestleMkrCd: selectedTrestle.trestleMkrCd,
|
|
constMthdCd: selectedConstMthd.constMthdCd,
|
|
roofBaseCd: e.roofBaseCd,
|
|
illuminationTp: managementState?.surfaceTypeValue ?? '',
|
|
instHt: managementState?.installHeight ?? '',
|
|
stdWindSpeed: managementState?.standardWindSpeedId ?? '',
|
|
stdSnowLd: managementState?.verticalSnowCover ?? '',
|
|
inclCd: selectedRoof?.pitch ?? 0,
|
|
roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
|
|
},
|
|
})
|
|
}
|
|
|
|
const handleConstruction = (index) => {
|
|
if (constructionList[index]?.constPossYn === 'Y') {
|
|
dispatch({
|
|
type: 'SET_CONSTRUCTION',
|
|
roof: {
|
|
moduleTpCd: selectedModules.itemTp ?? '',
|
|
roofMatlCd: selectedRoof?.roofMatlCd ?? '',
|
|
raft: selectedRaftBase?.clCode,
|
|
trestleMkrCd: selectedTrestle.trestleMkrCd,
|
|
constMthdCd: selectedConstMthd.constMthdCd,
|
|
roofBaseCd: selectedRoofBase.roofBaseCd,
|
|
illuminationTp: managementState?.surfaceTypeValue ?? '',
|
|
instHt: managementState?.installHeight ?? '',
|
|
stdWindSpeed: managementState?.standardWindSpeedId ?? '',
|
|
stdSnowLd: +managementState?.verticalSnowCover ?? '',
|
|
inclCd: selectedRoof?.pitch ?? 0,
|
|
roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
|
|
constTp: constructionList[index].constTp,
|
|
snowGdPossYn: constructionList[index].snowGdPossYn,
|
|
cvrYn: constructionList[index].cvrYn,
|
|
mixMatlNo: selectedModules.mixMatlNo,
|
|
// workingWidth: selectedRoof?.length?.toString() ?? '',
|
|
workingWidth: lengthBase,
|
|
},
|
|
})
|
|
|
|
setCvrYn(constructionList[index].cvrYn)
|
|
setSnowGdPossYn(constructionList[index].snowGdPossYn)
|
|
setCvrChecked(false)
|
|
setSnowGdChecked(false)
|
|
}
|
|
}
|
|
|
|
const handleChangeRoofMaterial = (index) => {
|
|
const newAddedRoofs = roofs.map((roof, i) => {
|
|
if (i === selectedRoof.index) {
|
|
return {
|
|
...selectedRoof,
|
|
hajebichi,
|
|
length: lengthBase,
|
|
eavesMargin,
|
|
ridgeMargin,
|
|
kerabaMargin,
|
|
roofIndex: selectedRoof.index,
|
|
raft: selectedRaftBase?.clCode,
|
|
trestle: {
|
|
hajebichi: hajebichi,
|
|
length: lengthBase,
|
|
...selectedRaftBase,
|
|
...selectedTrestle,
|
|
...selectedConstMthd,
|
|
...selectedRoofBase,
|
|
},
|
|
construction: {
|
|
...constructionList.find((data) => data.constTp === trestleState.constTp),
|
|
cvrYn: cvrYn,
|
|
snowGdPossYn: snowGdPossYn,
|
|
cvrChecked: cvrChecked,
|
|
snowGdChecked: snowGdChecked,
|
|
setupCover: cvrChecked ?? false,
|
|
setupSnowCover: snowGdChecked ?? false,
|
|
},
|
|
trestleDetail: trestleDetail,
|
|
}
|
|
}
|
|
return roof
|
|
})
|
|
setRoofs(newAddedRoofs)
|
|
setSelectedRoof(newAddedRoofs[index])
|
|
}
|
|
|
|
const isComplete = async () => {
|
|
const newAddedRoofs = roofs.map((roof, i) => {
|
|
if (i === selectedRoof?.index) {
|
|
return {
|
|
...selectedRoof,
|
|
length: lengthBase,
|
|
eavesMargin,
|
|
ridgeMargin,
|
|
kerabaMargin,
|
|
roofIndex: roof.index,
|
|
raft: selectedRaftBase?.clCode,
|
|
trestle: {
|
|
length: lengthBase,
|
|
hajebichi: hajebichi,
|
|
...selectedRaftBase,
|
|
...selectedTrestle,
|
|
...selectedConstMthd,
|
|
...selectedRoofBase,
|
|
},
|
|
construction: {
|
|
...constructionList.find((data) => data.constTp === trestleState.constTp),
|
|
cvrYn,
|
|
snowGdPossYn,
|
|
cvrChecked,
|
|
snowGdChecked,
|
|
setupCover: cvrChecked ?? false,
|
|
setupSnowCover: snowGdChecked ?? false,
|
|
},
|
|
trestleDetail: trestleDetail,
|
|
}
|
|
}
|
|
return roof
|
|
})
|
|
|
|
let result = true
|
|
for (let i = 0; i < newAddedRoofs.length; i++) {
|
|
const roof = newAddedRoofs[i]
|
|
|
|
if (!roof.trestle?.trestleMkrCd) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error1', [roof.nameJp]), // 가대메이커를 선택해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
|
|
if (!roof.trestle?.constMthdCd) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error2', [roof.nameJp]), // 공법을 선택해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
if (!roof.trestle?.roofBaseCd) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error3', [roof.nameJp]), // 지붕밑바탕을 선택해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
if (!roof.construction?.constTp) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error12', [roof.nameJp]), // 시공법법을 선택해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
|
|
if (roof.lenAuth === 'C') {
|
|
if (!roof.trestle?.length) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error5', [roof.nameJp]), // L 값을 입력해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
}
|
|
if (['C', 'R'].includes(roof.raftAuth)) {
|
|
if (!roof?.raft) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error6', [roof.nameJp]), // 서까래 간격을 입력해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
}
|
|
|
|
if (['C', 'R'].includes(roof.roofPchAuth)) {
|
|
if (!roof?.roofPchBase) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error7', [roof.nameJp]), // 하제비치를 입력해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
}
|
|
|
|
if (!roof?.eavesMargin || !roof?.ridgeMargin || !roof?.kerabaMargin) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error8', [roof.nameJp]), // 모듈 배치 영영 값을 입력해주세요.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
|
|
if (roof.trestle.trestleMkrCd !== 'NO_DATA') {
|
|
// 가매 없음이 아닐때는 가대 정보보다 작을 수 없음
|
|
if (roof.trestleDetail?.eaveIntvl > roof.eavesMargin) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error9', [roof.trestleDetail?.eaveIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
|
|
if (roof.trestleDetail?.ridgeIntvl > roof.ridgeMargin) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error10', [roof.trestleDetail?.ridgeIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
|
|
if (roof.trestleDetail?.kerabaIntvl > roof.kerabaMargin) {
|
|
Swal.fire({
|
|
title: getMessage('modal.module.basic.settting.module.error11', [roof.trestleDetail?.kerabaIntvl, roof.nameJp]), // 모듈 배치 영역은 {0}mm 이상이어야 합니다.
|
|
icon: 'warning',
|
|
})
|
|
result = false
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
if (result) {
|
|
const newRoofs = newAddedRoofs.map((roof) => {
|
|
const { addRoof, construction, trestle, trestleDetail, roofConstructions, ...rest } = roof
|
|
return rest
|
|
})
|
|
|
|
setModuleSelectionData({
|
|
...moduleSelectionData,
|
|
roofConstructions: newAddedRoofs.map((roof, index) => ({
|
|
roofIndex: newRoofs[index].index,
|
|
trestle: roof.trestle,
|
|
addRoof: newRoofs[index],
|
|
construction: roof.construction,
|
|
trestleDetail: roof.trestleDetail,
|
|
})),
|
|
})
|
|
setFlag(true)
|
|
tempModuleSelectionData.current = {
|
|
...moduleSelectionData,
|
|
roofConstructions: newAddedRoofs.map((roof, index) => ({
|
|
roofIndex: newRoofs[index].index,
|
|
trestle: roof.trestle,
|
|
addRoof: newRoofs[index],
|
|
construction: roof.construction,
|
|
trestleDetail: roof.trestleDetail,
|
|
})),
|
|
}
|
|
const updatePromises = [
|
|
// new Promise((resolve) => {
|
|
// resolve()
|
|
// }),
|
|
new Promise((resolve) => {
|
|
setRoofs(newRoofs)
|
|
resolve()
|
|
}),
|
|
|
|
new Promise((resolve) => {
|
|
const roofConstructions = newAddedRoofs.map((roof, index) => ({
|
|
roofIndex: newRoofs[index].index,
|
|
addRoof: newRoofs[index],
|
|
trestle: {
|
|
...roof.trestle,
|
|
raft: roof.raftBaseCd,
|
|
},
|
|
construction: {
|
|
// ...constructionList.find((construction) => newAddedRoofs[index].construction.constTp === construction.constTp),
|
|
...roof.construction,
|
|
roofIndex: roof.index,
|
|
selectedIndex: roof.index,
|
|
},
|
|
trestleDetail: roof.trestleDetail,
|
|
}))
|
|
trestleTrigger({
|
|
roofConstructions,
|
|
})
|
|
setRoofsStore(roofConstructions)
|
|
resolve()
|
|
}),
|
|
]
|
|
|
|
await Promise.all(updatePromises)
|
|
return true
|
|
}
|
|
|
|
return false
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
isComplete,
|
|
}))
|
|
|
|
return (
|
|
<div className="roof-module-tab2-overflow">
|
|
<div className="module-table-box mb10">
|
|
<div className="module-box-tab">
|
|
{roofs &&
|
|
roofs.map((roof, index) => (
|
|
<button
|
|
key={index}
|
|
className={`module-btn ${selectedRoof?.index === index ? 'act' : ''}`}
|
|
onClick={() => (roof ? handleChangeRoofMaterial(index) : null)}
|
|
>
|
|
{roof !== undefined ? `${roof.nameJp} (${currentAngleType === 'slope' ? roof.pitch : roof.angle}${pitchText})` : '-'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="module-table-inner">
|
|
<div className="module-table-flex-wrap tab2">
|
|
<div className="module-flex-item">
|
|
<div className="eaves-keraba-table">
|
|
{selectedRoof && selectedRoof.lenAuth === 'C' && (
|
|
<>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">L</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
value={lengthBase}
|
|
onChange={(e) => onChangeLength(e.target.value)}
|
|
disabled={selectedRoof.lenAuth === 'R'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
|
|
<>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{raftBaseList.length > 0 && (
|
|
<QSelectBox
|
|
options={raftBaseList}
|
|
value={selectedRaftBase}
|
|
sourceKey={'clCode'}
|
|
targetKey={'clCode'}
|
|
showKey={'clCodeNm'}
|
|
disabled={selectedRoof.raftAuth === 'R'}
|
|
onChange={(e) => onChangeRaftBase(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
|
|
<>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.hajebichi')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
<input
|
|
type="text"
|
|
className="input-origin block"
|
|
disabled={selectedRoof.roofPchAuth === 'R'}
|
|
onChange={(e) => setHajebichi(e.target.value)}
|
|
value={hajebichi}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{trestleList && (
|
|
<QSelectBox
|
|
title={getMessage('selectbox.title')}
|
|
options={trestleList}
|
|
value={selectedTrestle}
|
|
sourceKey={'trestleMkrCd'}
|
|
targetKey={'trestleMkrCd'}
|
|
showKey={'trestleMkrCdJp'}
|
|
onChange={(e) => onChangeTrestleMaker(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{constMthdList && (
|
|
<QSelectBox
|
|
title={getMessage('selectbox.title')}
|
|
options={constMthdList}
|
|
value={selectedConstMthd}
|
|
sourceKey={'constMthdCd'}
|
|
targetKey={'constMthdCd'}
|
|
showKey={'constMthdCdJp'}
|
|
onChange={(e) => onChangeConstMthd(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="eaves-keraba-item">
|
|
<div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
|
|
<div className="eaves-keraba-td">
|
|
<div className="grid-select">
|
|
{roofBaseList && (
|
|
<QSelectBox
|
|
title={getMessage('selectbox.title')}
|
|
options={roofBaseList}
|
|
sourceKey={'roofBaseCd'}
|
|
targetKey={'roofBaseCd'}
|
|
showKey={'roofBaseCdJp'}
|
|
value={selectedRoofBase}
|
|
onChange={(e) => onChangeRoofBase(e)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="module-flex-item non-flex">
|
|
<div className="flex-item-btn-wrap">
|
|
<button className={`btn-frame roof ${getConstructionState(0)}`} onClick={() => handleConstruction(0)}>
|
|
{getMessage('modal.module.basic.setting.module.standard.construction')}(I)
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(3)}`} onClick={() => handleConstruction(3)}>
|
|
{getMessage('modal.module.basic.setting.module.multiple.construction')}
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(1)}`} onClick={() => handleConstruction(1)}>
|
|
{getMessage('modal.module.basic.setting.module.standard.construction')}
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(4)}`} onClick={() => handleConstruction(4)}>
|
|
{getMessage('modal.module.basic.setting.module.multiple.construction')}(II)
|
|
</button>
|
|
<button className={`btn-frame roof ${getConstructionState(2)}`} onClick={() => handleConstruction(2)}>
|
|
{getMessage('modal.module.basic.setting.module.enforce.construction')}
|
|
</button>
|
|
</div>
|
|
<div className="grid-check-form-flex">
|
|
<div className="d-check-box pop">
|
|
<input
|
|
type="checkbox"
|
|
id={`ch01`}
|
|
disabled={!cvrYn || cvrYn === 'N'}
|
|
checked={cvrChecked || false}
|
|
// onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, cvrChecked: !trestleState.cvrChecked } })}
|
|
onChange={() => setCvrChecked(!cvrChecked)}
|
|
/>
|
|
<label htmlFor={`ch01`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
|
|
</div>
|
|
<div className="d-check-box pop">
|
|
<input
|
|
type="checkbox"
|
|
id={`ch02`}
|
|
disabled={!snowGdPossYn || snowGdPossYn === 'N'}
|
|
checked={snowGdChecked || false}
|
|
// onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, snowGdChecked: !trestleState.snowGdChecked } })}
|
|
onChange={() => setSnowGdChecked(!snowGdChecked)}
|
|
/>
|
|
<label htmlFor={`ch02`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="module-input-area">
|
|
<div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
|
|
<div className="module-input-wrap">
|
|
<div className="outline-form mr15">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
|
|
<div className="input-grid mr10">
|
|
<input
|
|
type="number"
|
|
className="input-origin block"
|
|
value={eavesMargin ?? 0}
|
|
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
|
|
onChange={(e) => setEavesMargin(+e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
<div className="outline-form mr15">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
|
|
<div className="input-grid mr10">
|
|
<input
|
|
type="number"
|
|
className="input-origin block"
|
|
value={ridgeMargin ?? 0}
|
|
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
|
|
onChange={(e) => setRidgeMargin(+e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
<div className="outline-form ">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
|
|
<div className="input-grid mr10">
|
|
<input
|
|
type="number"
|
|
className="input-origin block"
|
|
value={kerabaMargin ?? 0}
|
|
// onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
|
|
onChange={(e) => setKerabaMargin(+e.target.value)}
|
|
/>
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="module-input-area">
|
|
<div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.margin')}</div>
|
|
<div className="module-input-wrap">
|
|
<div className="outline-form">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.margin.horizontal')}</span>
|
|
<div className="input-grid mr10">
|
|
<input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlHor} readOnly />
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
<div className="outline-form">
|
|
<span>{getMessage('modal.module.basic.setting.module.placement.margin.vertical')}</span>
|
|
<div className="input-grid mr10">
|
|
<input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlVer} readOnly />
|
|
</div>
|
|
<span className="thin">mm</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="module-bottom">
|
|
<div className="module-table-box ">
|
|
<div className="warning-guide">
|
|
<div className="warning">
|
|
{getMessage('modal.module.basic.setting.module.setting.info1')}
|
|
<br />
|
|
{getMessage('modal.module.basic.setting.module.setting.info2')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default Trestle
|