배치면 초기 설정 수정
This commit is contained in:
김민식
parent
aab9e654ed
commit
1cc569a917
@ -296,7 +296,8 @@ export default function CanvasMenu(props) {
|
||||
}, [type, globalLocale])
|
||||
|
||||
useEffect(() => {
|
||||
setMenuNumber(1)
|
||||
if (Object.keys(basicSetting).length === 0) return
|
||||
// setMenuNumber(1)
|
||||
// if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
|
||||
// setMenuNumber(3)
|
||||
// setType('surface')
|
||||
@ -306,7 +307,7 @@ export default function CanvasMenu(props) {
|
||||
// setType('outline')
|
||||
// setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
|
||||
// }
|
||||
}, [canvasSetting])
|
||||
}, [basicSetting])
|
||||
|
||||
const checkMenuState = (menu) => {
|
||||
return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)
|
||||
|
||||
@ -43,56 +43,59 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
|
||||
// 데이터를 최초 한 번만 조회
|
||||
useEffect(() => {
|
||||
if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
|
||||
const raftCodeList = findCommonCode('203800')
|
||||
setRaftCodes(raftCodeList)
|
||||
setCurrentRoof({...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet})
|
||||
// setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet })
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofSizeSet: String(currentRoof.roofSizeSet),
|
||||
roofAngleSet: currentRoof.roofAngleSet,
|
||||
roofsData: {
|
||||
roofApply: true,
|
||||
roofSeq: 0,
|
||||
roofMatlCd: currentRoof.roofMatlCd,
|
||||
roofWidth: currentRoof.width,
|
||||
roofHeight: currentRoof.length,
|
||||
roofHajebichi: currentRoof.hajebichi,
|
||||
roofGap: currentRoof.raft,
|
||||
roofLayout: currentRoof.layout,
|
||||
roofPitch: currentRoof.pitch,
|
||||
roofAngle: currentRoof.angle,
|
||||
},
|
||||
})
|
||||
if (!currentRoof || Object.keys(currentRoof).length === 0) return
|
||||
console.log(basicSetting)
|
||||
setBasicSettings({
|
||||
...basicSetting,
|
||||
roofSizeSet: String(currentRoof.roofSizeSet),
|
||||
roofAngleSet: currentRoof.roofAngleSet,
|
||||
roofsData: {
|
||||
roofApply: true,
|
||||
roofSeq: 0,
|
||||
roofMatlCd: currentRoof.roofMatlCd,
|
||||
roofWidth: currentRoof.width,
|
||||
roofHeight: currentRoof.length,
|
||||
roofHajebichi: currentRoof.hajebichi,
|
||||
roofGap: currentRoof.raft,
|
||||
roofLayout: currentRoof.layout,
|
||||
roofPitch: currentRoof.pitch,
|
||||
roofAngle: currentRoof.angle,
|
||||
},
|
||||
})
|
||||
}, [currentRoof])
|
||||
|
||||
const handleRoofSizeSetChange = (value) => {
|
||||
setCurrentRoof({...currentRoof, roofSizeSet: value})
|
||||
setCurrentRoof({ ...currentRoof, roofSizeSet: value })
|
||||
}
|
||||
|
||||
const handleRoofAngleSetChange = (value) => {
|
||||
setCurrentRoof({...currentRoof, roofAngleSet: value})
|
||||
setCurrentRoof({ ...currentRoof, roofAngleSet: value })
|
||||
}
|
||||
|
||||
// Function to update the roofType and corresponding values
|
||||
const handleRoofTypeChange = (value) => {
|
||||
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
|
||||
setCurrentRoof({...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet})
|
||||
setCurrentRoof({ ...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet })
|
||||
}
|
||||
|
||||
const changeInput = (value, e) => {
|
||||
const { name } = e.target
|
||||
setCurrentRoof({...currentRoof, [name]: Number(value)})
|
||||
setCurrentRoof({ ...currentRoof, [name]: Number(value) })
|
||||
}
|
||||
|
||||
const handleRafterChange = (value) => {
|
||||
setCurrentRoof({...currentRoof, raft: value})
|
||||
setCurrentRoof({ ...currentRoof, raft: value })
|
||||
}
|
||||
|
||||
const handleRoofLayoutChange = (value) => {
|
||||
setCurrentRoof({...currentRoof, layout: value})
|
||||
setCurrentRoof({ ...currentRoof, layout: value })
|
||||
}
|
||||
|
||||
const handleSaveBtn = () => {
|
||||
@ -119,7 +122,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
selectedRoofMaterial: {
|
||||
// 선택된 지붕재 정보
|
||||
roofInfo,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
setBasicSettings({
|
||||
@ -184,7 +187,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
name="roofSizeSet"
|
||||
id="ra01"
|
||||
value="1" // roofSizeSet 값이 '1'인 경우
|
||||
checked={currentRoof.roofSizeSet === '1'} // 선택 여부 확인
|
||||
checked={currentRoof?.roofSizeSet === '1'} // 선택 여부 확인
|
||||
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
|
||||
onClick={() => handleRoofSizeSetChange('1')}
|
||||
/>
|
||||
@ -196,7 +199,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
name="roofSizeSet"
|
||||
id="ra02"
|
||||
value="2" // roofSizeSet 값이 '2'인 경우
|
||||
checked={currentRoof.roofSizeSet === '2'} // 선택 여부 확인
|
||||
checked={currentRoof?.roofSizeSet === '2'} // 선택 여부 확인
|
||||
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
|
||||
onClick={() => handleRoofSizeSetChange('2')}
|
||||
/>
|
||||
@ -208,7 +211,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
name="roofSizeSet"
|
||||
id="ra03"
|
||||
value="3" // roofSizeSet 값이 '3'인 경우
|
||||
checked={currentRoof.roofSizeSet === '3'} // 선택 여부 확인
|
||||
checked={currentRoof?.roofSizeSet === '3'} // 선택 여부 확인
|
||||
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
|
||||
onClick={() => handleRoofSizeSetChange('3')}
|
||||
/>
|
||||
@ -227,7 +230,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
name="roofAngleSet"
|
||||
id="ra04"
|
||||
value="slope" // 첫 번째 라디오 버튼의 값
|
||||
checked={currentRoof.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
|
||||
checked={currentRoof?.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
|
||||
//onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
|
||||
onClick={() => handleRoofAngleSetChange('slope')}
|
||||
/>
|
||||
@ -239,7 +242,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
name="roofAngleSet"
|
||||
id="ra05"
|
||||
value="flat" // 두 번째 라디오 버튼의 값
|
||||
checked={currentRoof.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
|
||||
checked={currentRoof?.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
|
||||
//onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
|
||||
onClick={() => handleRoofAngleSetChange('flat')}
|
||||
/>
|
||||
@ -259,17 +262,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<div className="placement-option">
|
||||
<div className="grid-select no-flx" style={{ width: '171px' }}>
|
||||
<QSelectBox
|
||||
title={currentRoof.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof.roofMatlNm}
|
||||
title={
|
||||
currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm
|
||||
}
|
||||
ref={roofRef.roofCd}
|
||||
options={roofMaterials.map((roof, index) => {
|
||||
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
|
||||
})}
|
||||
value={currentRoof.roofSizeSet === '3' ? null : currentRoof.roofMatlCd}
|
||||
value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
|
||||
onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
|
||||
sourceKey="id"
|
||||
targetKey="id"
|
||||
showKey="name"
|
||||
disabled={currentRoof.roofSizeSet === '3'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
{/* <select
|
||||
className="select-light dark"
|
||||
@ -298,10 +303,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
className="input-origin block"
|
||||
name={`width`}
|
||||
ref={roofRef.width}
|
||||
value={parseInt(currentRoof.width)}
|
||||
value={parseInt(currentRoof?.width)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof.widAuth === 'R'}
|
||||
disabled={currentRoof.roofSizeSet === '3'}
|
||||
readOnly={currentRoof?.widAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="input-grid" style={{ width: '63px' }}>
|
||||
@ -323,10 +328,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
className="input-origin block"
|
||||
name={`length`}
|
||||
ref={roofRef.length}
|
||||
value={parseInt(currentRoof.length)}
|
||||
value={parseInt(currentRoof?.length)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof.lenAuth === 'R'}
|
||||
disabled={currentRoof.roofSizeSet === '3'}
|
||||
readOnly={currentRoof?.lenAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="input-grid" style={{ width: '63px' }}>
|
||||
@ -343,19 +348,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="select-wrap" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
ref={roofRef.rafter}
|
||||
title={raftCodes.find((r) => r.clCode === (currentRoof.raft === undefined ? currentRoof.raftBaseCd : currentRoof.raft)).clCodeNm}
|
||||
value={currentRoof.raft === undefined ? currentRoof.raftBaseCd : currentRoof.raft}
|
||||
onChange={(e) => handleRafterChange(e.clCode)}
|
||||
sourceKey="clCode"
|
||||
targetKey={currentRoof.raft ? 'raft' : 'raftBaseCd'}
|
||||
showKey="clCodeNm"
|
||||
disabled={currentRoof.roofSizeSet === '3'}
|
||||
/>
|
||||
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
|
||||
<div className="select-wrap" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
ref={roofRef.rafter}
|
||||
title={
|
||||
raftCodes.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
|
||||
.clCodeNm
|
||||
}
|
||||
value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
|
||||
onChange={(e) => handleRafterChange(e.clCode)}
|
||||
sourceKey="clCode"
|
||||
targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
|
||||
showKey="clCodeNm"
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
|
||||
{raftCodes.map((raft, index) => {
|
||||
return (
|
||||
<option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}>
|
||||
@ -364,7 +372,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
)
|
||||
})}
|
||||
</select> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -386,25 +394,27 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="placement-roof-btn-wrap">
|
||||
<div className="icon-btn-wrap mt10">
|
||||
<button
|
||||
className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
|
||||
value={ROOF_MATERIAL_LAYOUT.PARALLEL}
|
||||
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.parallel')}
|
||||
<i className="allocation01"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
|
||||
value={ROOF_MATERIAL_LAYOUT.STAIRS}
|
||||
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
||||
</button>
|
||||
{currentRoof && (
|
||||
<div className="placement-roof-btn-wrap">
|
||||
<div className="icon-btn-wrap mt10">
|
||||
<button
|
||||
className={`${currentRoof?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
|
||||
value={ROOF_MATERIAL_LAYOUT.PARALLEL}
|
||||
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.parallel')}
|
||||
<i className="allocation01"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
|
||||
value={ROOF_MATERIAL_LAYOUT.STAIRS}
|
||||
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}
|
||||
>
|
||||
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -412,7 +412,7 @@ export function useCanvasSetting() {
|
||||
//Recoil 설정
|
||||
//setCanvasSetting({ ...basicSetting })\
|
||||
console.log(basicSetting)
|
||||
|
||||
fetchBasicSettings()
|
||||
if (['2', '3'].includes(basicSetting?.roofSizeSet)) {
|
||||
setMenuNumber(3)
|
||||
setType('surface')
|
||||
@ -422,7 +422,6 @@ export function useCanvasSetting() {
|
||||
setType('outline')
|
||||
setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
|
||||
}
|
||||
fetchBasicSettings()
|
||||
} catch (error) {
|
||||
swalFire({ text: error.message, icon: 'error' })
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user