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

모듈 선택 탭 관련 작업

Browse Source
This commit is contained in:
yjnoh 2025-01-06 16:45:53 +09:00
parent dacad22e9b
commit d1b6f8172c
6 changed files with 227 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/floor-plan/modal/basic/step/Module.jsx
View File

@ -8,13 +8,9 @@ import { useModuleSelection } from '@/hooks/module/useModuleSelection'
export default function Module({}) {
const { getMessage } = useMessage()
const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
const addedRoofs = useRecoilValue(addedRoofsState) //지붕재 선택
const [roofTab, setRoofTab] = useState(0) //지붕재 탭
const globalPitch = useRecoilValue(pitchSelector) //피치
const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度'
const {
roofMaterial,
selectedModules,
@ -26,13 +22,16 @@ export default function Module({}) {
trestleList,
constMthdList,
roofBaseList,
selectedOptions,
globalPitch,
displayPitch,
handleRoofTab,
handleChangeModule,
handleChangeRaftBase,
handleChangeTrestle,
handleChangeConstMthd,
handleChangeRoofBase,
handleChangeSurfaceType,
handleChangeWindSpeed,
} = useModuleSelection({ addedRoofs })
const moduleData = {
@ -56,7 +55,9 @@ export default function Module({}) {
<div className="outline-form mb10">
<span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
<div className="grid-select">
<QSelectBox title={'모듈 선택'} options={moduleList} value={moduleList} onChange={handleChangeModule} />
{moduleList && (
<QSelectBox title={getMessage('selectbox.title')} options={moduleList} value={moduleList} onChange={handleChangeModule} />
)}
</div>
</div>
<div className="roof-module-table">
@ -103,14 +104,16 @@ export default function Module({}) {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select" style={{ width: '95.77px', flex: 'none' }}>
<QSelectBox
title={'선택하세요'}
options={roughnessCodes}
value={roughnessCodes.clCode}
sourceKey={'clCode'}
targetKey={'clCode'}
showKey={'clCodeNm'}
/>
{roughnessCodes.length > 0 && (
<QSelectBox
options={roughnessCodes}
value={managementState}
targetKey={'surfaceTypeValue'}
sourceKey={'clCode'}
showKey={'clCodeNm'}
onChange={handleChangeSurfaceType}
/>
)}
</div>
</div>
</div>
@ -136,7 +139,7 @@ export default function Module({}) {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-select mr10">
{windSpeedCodes && managementState && (
{windSpeedCodes.length > 0 && managementState && (
<QSelectBox
title={''}
options={windSpeedCodes}
@ -144,6 +147,7 @@ export default function Module({}) {
targetKey={'standardWindSpeedId'}
sourceKey={'clCode'}
showKey={'clCodeNm'}
onChange={handleChangeWindSpeed}
/>
)}
</div>
@ -231,15 +235,13 @@ export default function Module({}) {
<div className="keraba-flex">
<div className="grid-select">
{raftCodes.length > 0 && (
<>
<QSelectBox
options={raftCodes}
value={roofMaterial.raftBaseCd}
showKey={'clCodeNm'}
disabled={roofMaterial.raftAuth === 'R' ? true : false}
onChange={handleChangeRaftBase}
/>
</>
<QSelectBox
options={raftCodes}
value={roofMaterial.raftBaseCd}
showKey={'clCodeNm'}
disabled={roofMaterial.raftAuth === 'R' ? true : false}
onChange={handleChangeRaftBase}
/>
)}
</div>
</div>
@ -273,7 +275,7 @@ export default function Module({}) {
<div className="grid-select">
{trestleList && (
<QSelectBox
title={'선택하세요.'}
title={getMessage('selectbox.title')}
options={trestleList}
value={trestleList?.trestleMkrCd}
showKey={'trestleMkrCdNm'}
@ -289,7 +291,7 @@ export default function Module({}) {
<div className="grid-select">
{constMthdList && (
<QSelectBox
title={'선택하세요'}
title={getMessage('selectbox.title')}
options={constMthdList}
value={constMthdList.constMthdCd}
showKey={'constMthdCdNm'}
@ -305,7 +307,7 @@ export default function Module({}) {
<div className="grid-select">
{roofBaseList && (
<QSelectBox
title={'선택하세요'}
title={getMessage('selectbox.title')}
options={roofBaseList}
value={roofBaseList.roofBaseCd}
showKey={'roofBaseCdNm'}

3
src/components/floor-plan/modal/basic/step/Placement.jsx
View File

@ -1,8 +1,9 @@
import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { selectedModuleState, checkedModuleState } from '@/store/canvasAtom'
import { checkedModuleState } from '@/store/canvasAtom'
import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
import { selectedModuleState } from '@/store/selectedModuleOptions'
const Placement = forwardRef((props, refs) => {
const { getMessage } = useMessage()

251
src/hooks/module/useModuleSelection.js
View File

@ -1,11 +1,13 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { useContext, useEffect, useReducer, useState } from 'react'
import { useContext, useEffect, useReducer, useState, useRef } from 'react'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
import { useCommonCode } from '../common/useCommonCode'
import { useMasterController } from '../common/useMasterController'
import { selectedModuleState } from '@/store/canvasAtom'
import { selectedModuleOptionsState, selectedModuleState, moduleSelectionOptionParamsState } from '@/store/selectedModuleOptions'
import { canvasSettingState, pitchSelector } from '@/store/canvasAtom'
export function useModuleSelection(props) {
const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
const [roofMaterial, setRoofMaterial] = useState(props.addedRoofs[0]) //지붕재
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
@ -15,6 +17,7 @@ export function useModuleSelection(props) {
const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
const [moduleList, setModuleList] = useState([{}]) //모듈 목록
const [constructionList, setConstructionList] = useState([{}]) //공법 목록
const [trestleList, setTrestleList] = useState([])
const [constMthdList, setConstMthdList] = useState([])
const [roofBaseList, setRoofBaseList] = useState([])
@ -25,33 +28,41 @@ export function useModuleSelection(props) {
const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법
const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕
const [selectedOptions, dispatchSelectedOptions] = useReducer(
(prevState, nextState) => {
return { ...prevState, ...nextState }
},
{
module: {},
roofs: [],
},
)
const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
const [installHeight, setInstallHeight] = useState('0') //설치 높이
const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
const [selectedModuleOptions, setSelectedModuleOptions] = useRecoilState(selectedModuleOptionsState)
const { getModuleTypeItemList, getTrestleList, getConstructionList } = useMasterController()
let optionParams = {
surfaceType: '', //면조도
installHeight: '', //설치 노 ㅍ이
standardWindSpeedId: '', //기준풍속
verticalSnowCover: '', //수직적설량
moduleTpCd: '',
roofMatlCd: '',
raftBaseCd: '',
trestleMkrCd: '',
constMthdCd: '',
roofBaseCd: '',
}
const globalPitch = useRecoilValue(pitchSelector) //피치
const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度'
const [optionParams, setOptionParams] = useRecoilState(moduleSelectionOptionParamsState)
const [commonParams, setCommonParams] = useState({})
const [trestleListParams, setTrestleListParams] = useState({})
const [constructionListParams, setConstructionListParams] = useState({})
const roofTabParams = useRef([])
useEffect(() => {
console.log('managementState', managementState)
setInstallHeight(managementState?.installHeight)
setStandardWindSpeed(managementState?.standardWindSpeedId)
setVerticalSnowCover(managementState?.verticalSnowCover)
setSelectedSurfaceType(managementState?.surfaceType)
roofTabParams.current[0] = {
illuminationTp: managementState?.surfaceType, //면조도
instHt: managementState?.installHeight, //설치높이
stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
stdSnowLd: managementState?.verticalSnowCover, //기준적설량
inclCd: globalPitch,
}
console.log('roofTabParams', roofTabParams)
}, [managementState])
useEffect(() => {
@ -59,6 +70,15 @@ export function useModuleSelection(props) {
if (!managementState) {
setManagementState(managementStateLoaded)
}
setCommonParams({
illuminationTp: managementState?.surfaceType, //면조도
instHt: managementState?.installHeight, //설치높이
stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
stdSnowLd: managementState?.verticalSnowCover, //기준적설량
inclCd: globalPitch,
})
// 202600 경사도
const raftCodeList = findCommonCode('203800')
@ -89,11 +109,15 @@ export function useModuleSelection(props) {
//지붕재 선택
const roofsIds = props.addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd)
if (roofsIds.length === 0) {
return
}
getModuleData(roofsIds)
}, [])
console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
const handleRoofTab = (tab) => {
setRoofMaterial(props.addedRoofs[tab])
@ -107,116 +131,126 @@ export function useModuleSelection(props) {
})
//셀렉트박스 데이터 초기화
setModuleList(list.data)
}
const handleChangeSurfaceType = (option) => {
setSelectedSurfaceType(option)
setCommonParams({
...commonParams,
surfaceType: option.clCode,
})
}
const handleChangeWindSpeed = (option) => {
setStandardWindSpeed(option)
setCommonParams({
...commonParams,
standardWindSpeedId: option.clCode,
})
}
//TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
const handleChangeModule = (option) => {
//선택된 모듈
setSelectedModules(option) //선택값 저장
//리코일 데이터 저장
setSelectedModuleOptions({
module: { ...option },
})
//trestleList 파라메터
setTrestleListParams({
roofMatlCd: roofMaterial.roofMatlCd,
moduleTpCd: option.itemTp,
raftBaseCd: roofMaterial.raftBaseCd,
})
setTrestleList([])
setConstMthdList([])
setRoofBaseList([])
}
const getConstructionListData = async (params) => {
const optionsList = await getConstructionList(params)
console.log('optionsList', optionsList)
// setConstructionList(optionsList.data)
}
const getModuleOptionsListData = async (params, optionsName) => {
const optionsList = await getTrestleList(params)
if (optionsName === 'trestleList') {
setTrestleList(optionsList.data)
setConstMthdList([])
setRoofBaseList([])
}
if (optionsName === 'constMthdList') {
setConstMthdList(optionsList.data)
setRoofBaseList([])
}
if (optionsName === 'roofBaseList') {
setRoofBaseList(optionsList.data)
}
}
const handleChangeModule = (option) => {
setSelectedModules(option) //선택값 저장
optionParams = {
roofMatlCd: roofMaterial.roofMatlCd,
moduleTpCd: option.itemTp,
raftBaseCd: roofMaterial.raftBaseCd,
}
getModuleOptionsListData(optionParams, 'trestleList')
dispatchSelectedOptions({
module: option,
})
}
const handleChangeRaftBase = (option) => {
setSelectedRaftBase(option)
optionParams = {
roofMatlCd: roofMaterial.roofMatlCd,
moduleTpCd: selectedModules.itemTp,
setTrestleListParams({
...trestleListParams,
raftBaseCd: option.clCode,
}
getModuleOptionsListData(optionParams, 'trestleList')
})
}
const handleChangeTrestle = (option) => {
setSelectedTrestle(option) //선택값 저장
optionParams = {
roofMatlCd: roofMaterial.roofMatlCd,
moduleTpCd: selectedModules.itemTp,
raftBaseCd: selectedRaftBase.clCode,
setTrestleListParams({
...trestleListParams,
trestleMkrCd: option.trestleMkrCd,
}
getModuleOptionsListData(optionParams, 'constMthdList')
selectedOptions.roofs.map((roof) => {
if (roof.id === tab) {
roof.trestle = option
} else {
roof.trestle = {
id: tab,
trestle: option,
}
}
})
dispatchSelectedOptions({
roofs: selectedOptions.roofs,
constMthdCd: '',
roofBaseCd: '',
})
setConstMthdList([])
setRoofBaseList([])
}
const handleChangeConstMthd = (option) => {
setSelectedConstMthd(option) //선택된값 저장
optionParams = {
roofMatlCd: roofMaterial.roofMatlCd,
moduleTpCd: selectedModules.itemTp,
raftBaseCd: selectedRaftBase.clCode,
trestleMkrCd: selectedTrestle.trestleMkrCd,
setTrestleListParams({
...trestleListParams,
constMthdCd: option.constMthdCd,
}
roofBaseCd: '',
})
setRoofBaseList([])
}
getModuleOptionsListData(optionParams, 'roofBaseList')
useEffect(() => {
getModuleOptionsListData(trestleListParams)
}, [trestleListParams])
const getModuleOptionsListData = async (params) => {
const optionsList = await getTrestleList(params)
if (optionsList.data.length > 0) {
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd === null) {
setTrestleList(optionsList.data)
setConstMthdList([])
setRoofBaseList([])
}
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
setConstMthdList(optionsList.data)
setRoofBaseList([])
}
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
setRoofBaseList(optionsList.data)
}
} else {
}
}
const handleChangeRoofBase = (option) => {
setSelectedRoofBase(option)
optionParams = {
roofMatlCd: roofMaterial.roofMatlCd,
setConstructionListParams({
...commonParams,
moduleTpCd: selectedModules.itemTp,
raftBaseCd: selectedRaftBase.clCode,
roofMatlCd: roofMaterial.roofMatlCd,
trestleMkrCd: selectedTrestle.trestleMkrCd,
constMthdCd: selectedConstMthd.constMthdCd,
raftBaseCd: selectedRaftBase.clCode,
roofBaseCd: option.roofBaseCd,
}
})
setSelectedRoofBase(option)
}
useEffect(() => {
getConstructionListData(constructionListParams)
}, [constructionListParams])
const getConstructionListData = async (params) => {
const optionsList = await getConstructionList(params)
console.log('optionsList', optionsList)
setConstructionList(optionsList.data)
}
return {
@ -234,12 +268,19 @@ export function useModuleSelection(props) {
trestleList,
constMthdList,
roofBaseList,
selectedOptions,
selectedSurfaceType,
installHeight,
standardWindSpeed,
verticalSnowCover,
globalPitch,
displayPitch,
handleRoofTab,
handleChangeModule,
handleChangeRaftBase,
handleChangeTrestle,
handleChangeConstMthd,
handleChangeRoofBase,
handleChangeSurfaceType,
handleChangeWindSpeed,
}
}

3
src/locales/ko.json
View File

@ -947,5 +947,6 @@
"can.not.move.module": "모듈을 이동할 수 없습니다.",
"can.not.copy.module": "모듈을 복사할 수 없습니다.",
"can.not.remove.module": "모듈을 삭제할 수 없습니다.",
"can.not.insert.module": "모듈을 삽입할 수 없습니다."
"can.not.insert.module": "모듈을 삽입할 수 없습니다.",
"selectbox.title": "선택하세요."
}

6
src/store/canvasAtom.js
View File

@ -374,12 +374,6 @@ export const moduleIsSetupState = atom({
dangerouslyAllowMutability: true,
})
export const selectedModuleState = atom({
key: 'selectedModuleState',
default: [],
dangerouslyAllowMutability: true,
})
export const checkedModuleState = atom({
key: 'checkedModuleState',
default: [],

48
src/store/selectedModuleOptions.js Normal file
View File

@ -0,0 +1,48 @@
import { atom } from 'recoil'
export const selectedModuleState = atom({
key: 'selectedModuleState',
default: [],
dangerouslyAllowMutability: true,
})
export const selectedModuleOptionsState = atom({
key: 'selectedModuleOptionsState',
default: {
module: {},
roofMaterials: [
{
surfaceType: '', //면조도
installHeight: '', //설치 노 ㅍ이
standardWindSpeedId: '', //기준풍속
verticalSnowCover: '', //수직적설량
moduleTpCd: '',
roofMatlCd: '',
raftBaseCd: '',
trestleMkrCd: '',
constMthdCd: '',
roofBaseCd: '',
},
],
},
dangerouslyAllowMutability: true,
})
export const moduleSelectionOptionParamsState = atom({
key: 'moduleSelectionOptionParams',
default: {
moduleTpCd: '',
roofMatlCd: '',
raftBaseCd: '',
trestleMkrCd: '',
constMthdCd: '',
roofBaseCd: '',
illuminationTp: '',
instHt: '',
stdWindSpeed: '',
stdSnowLd: '',
inclCd: '',
roofMatlCd: '',
},
dangerouslyAllowMutability: true,
})