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-20 13:14:28 +09:00
parent a4b430778b
commit 358f1fbe4a
8 changed files with 98 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/select/QSelectBox.jsx
View File

@ -59,8 +59,6 @@ export default function QSelectBox({
const ref = useRef(null)
const handleClickSelectOption = (option) => {
console.log('🚀 ~ handleClickSelectOption ~ option:', option)
setSelected(showKey !== '' ? option[showKey] : option.name)
onChange?.(option, params)
}

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

@ -1,13 +1,13 @@
import { useEffect, useState, useReducer } from 'react'
import { useRecoilValue, useRecoilState } from 'recoil'
import { addedRoofsState } from '@/store/settingAtom'
import { canvasSettingState, currentCanvasPlanState, pitchSelector } from '@/store/canvasAtom'
import { currentCanvasPlanState } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useModuleSelection } from '@/hooks/module/useModuleSelection'
import ModuleTabContents from './ModuleTabContents'
import { useDebounceCallback, useDebounceValue } from 'usehooks-ts'
import { moduleSelectionDataPlanListState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { useDebounceValue } from 'usehooks-ts'
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
export default function Module({ setTabNum }) {
const { getMessage } = useMessage()
@ -18,7 +18,6 @@ export default function Module({ setTabNum }) {
const {
moduleSelectionInitParams,
selectedModules,
raftCodes,
roughnessCodes,
windSpeedCodes,
managementState,
@ -39,12 +38,14 @@ export default function Module({ setTabNum }) {
const [debouncedVerticalSnowCover] = useDebounceValue(inputVerticalSnowCover, 500)
const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState)
const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
return { ...prevState, ...nextState }
}, moduleSelectionData)
useEffect(() => {
setModuleSelectionData(tempModuleSelectionData)
}, [tempModuleSelectionData])
useEffect(() => {
handleChangeInstallHeight(debouncedInstallHeight)
}, [debouncedInstallHeight])
@ -53,11 +54,6 @@ export default function Module({ setTabNum }) {
handleChangeVerticalSnowCover(debouncedVerticalSnowCover)
}, [debouncedVerticalSnowCover])
useEffect(() => {
setInputInstallHeight(installHeight)
setInputVerticalSnowCover(verticalSnowCover)
}, [installHeight, verticalSnowCover])
const moduleData = {
header: [
{ name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
@ -231,10 +227,9 @@ export default function Module({ setTabNum }) {
index={index}
addRoof={roof}
roofTab={index}
moduleConstructionSelectionData={moduleSelectionData?.roofConstructions[index]}
tempModuleSelectionData={tempModuleSelectionData}
setTempModuleSelectionData={setTempModuleSelectionData}
selectedModule={selectedModules}
moduleSelectionData={moduleSelectionData}
setModuleSelectionData={setModuleSelectionData}
/>
</div>

127
src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx
View File

@ -1,20 +1,19 @@
import { useEffect, useState, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import { useEffect, useState, useRef, useReducer } from 'react'
import { useRecoilValue, useRecoilState } from 'recoil'
import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'
import QSelectBox from '@/components/common/select/QSelectBox'
export default function ModuleTabContents({
addRoof,
roofTab,
moduleConstructionSelectionData,
tempModuleSelectionData,
setTempModuleSelectionData,
selectedModule,
moduleSelectionData,
setModuleSelectionData,
}) {
const { getMessage } = useMessage()
@ -24,6 +23,7 @@ export default function ModuleTabContents({
const { findCommonCode } = useCommonCode()
const [raftCodes, setRaftCodes] = useState([]) //가대 목록
const [trestleList, setTrestleList] = useState([])
const [constMthdList, setConstMthdList] = useState([])
const [roofBaseList, setRoofBaseList] = useState([])
@ -53,12 +53,17 @@ export default function ModuleTabContents({
const [isExistData, setIsExistData] = useState(false)
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
const [moduleConstructionSelectionData, setModuleConstructionSelectionData] = useState()
useEffect(() => {
setModuleConstructionSelectionData(moduleSelectionData.roofConstructions[roofTab])
}, [moduleSelectionData])
//서까래간격 변경
const handleChangeRaftBase = (option) => {
setSelectedRaftBase(option)
setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode })
setTrestleList([]) //가대메이커
setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode }) //가대메이커
setConstMthdList([]) //공법 초기화
setRoofBaseList([]) //지붕밑바탕 초기화
setConstructionList([]) //공법 초기화
@ -77,6 +82,7 @@ export default function ModuleTabContents({
const handleChangeConstMthd = (option) => {
setSelectedConstMthd(option) //선택된값 저장
setRoofBaseParams({ ...trestleParams, trestleMkrCd: selectedTrestle.trestleMkrCd, constMthdCd: option.constMthdCd, roofBaseCd: '' })
setRoofBaseList([]) //지붕밑바탕 초기화
setConstructionList([]) //공법 초기화
}
@ -92,45 +98,6 @@ export default function ModuleTabContents({
setSelectedRoofBase(option)
}
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)
if (isExistData) {
setSelectedTrestle({ ...moduleConstructionSelectionData.trestle })
} else {
setConstMthdList([])
setRoofBaseList([])
}
}
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
setConstMthdList(optionsList.data)
if (isExistData) {
setSelectedConstMthd({ ...moduleConstructionSelectionData.trestle })
} else {
setRoofBaseList([])
}
}
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
setRoofBaseList(optionsList.data)
if (isExistData) {
setSelectedRoofBase({ ...moduleConstructionSelectionData.trestle })
}
}
}
}
const getConstructionListData = async (params) => {
if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
const optionsList = await getConstructionList(params)
setConstructionList(optionsList.data)
}
}
const handleConstruction = (index) => {
if (index > -1) {
const isPossibleIndex = constructionRef.current
@ -162,6 +129,53 @@ export default function ModuleTabContents({
}
}
const handleCvrChecked = () => {
setCvrChecked(!cvrChecked)
}
const handleSnowGdChecked = () => {
setSnowGdChecked(!snowGdChecked)
}
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)
if (isExistData) {
setSelectedTrestle({ ...moduleConstructionSelectionData?.trestle })
} else {
setConstMthdList([])
setRoofBaseList([])
}
}
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
setConstMthdList(optionsList.data)
if (isExistData) {
setSelectedConstMthd({ ...moduleConstructionSelectionData?.trestle })
} else {
setRoofBaseList([])
}
}
if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
setRoofBaseList(optionsList.data)
if (isExistData) {
setSelectedRoofBase({ ...moduleConstructionSelectionData?.trestle })
}
}
}
}
const getConstructionListData = async (params) => {
if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
const optionsList = await getConstructionList(params)
setConstructionList(optionsList.data)
}
}
useEffect(() => {
if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
const newRoofConstructions = {
@ -186,14 +200,6 @@ export default function ModuleTabContents({
}
}, [selectedConstruction])
const handleCvrChecked = () => {
setCvrChecked(!cvrChecked)
}
const handleSnowGdChecked = () => {
setSnowGdChecked(!snowGdChecked)
}
useEffect(() => {
setSelectedConstruction({ ...selectedConstruction, setupCover: cvrChecked })
}, [cvrChecked])
@ -216,7 +222,13 @@ export default function ModuleTabContents({
useEffect(() => {
if (isExistData && constructionList.length > 0) {
const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex
handleConstruction(selectedIndex)
const construction = constructionList[selectedIndex]
console.log('construction', construction)
if (construction.constPossYn === 'Y') {
handleConstruction(selectedIndex)
}
}
}, [constructionList])
@ -255,7 +267,7 @@ export default function ModuleTabContents({
}
}
setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModules })
}, [moduleSelectionInitParams])
useEffect(() => {
@ -284,7 +296,6 @@ export default function ModuleTabContents({
useEffect(() => {
if (isObjectNotEmpty(tempModuleSelectionData)) {
// setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
setModuleSelectionData(tempModuleSelectionData)
}
}, [tempModuleSelectionData])

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

@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { moduleSelectionDataPlanListState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { useModulePlace } from '@/hooks/module/useModulePlace'
const Placement = forwardRef((props, refs) => {
@ -20,14 +20,12 @@ const Placement = forwardRef((props, refs) => {
const { selectedModules } = useModulePlace()
const setCheckedModules = useSetRecoilState(checkedModuleState)
const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState)
const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
//모듈 배치면 생성
useEffect(() => {
makeModuleInstArea()
if (moduleSelectionDataPlanList) {
if (moduleSelectionData) {
//1개라도 치도리 불가가 있으면 치도리 불가
const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
if (isChidroriValue) {

6
src/hooks/module/useModulePlace.js
View File

@ -1,12 +1,11 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { moduleSelectionDataPlanListState, moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { useMasterController } from '@/hooks/common/useMasterController'
import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
export function useModulePlace() {
const canvas = useRecoilValue(canvasState)
const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //다음으로 넘어가는 최종 데이터
const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
const [trestleDetailParams, setTrestleDetailParams] = useState([])
@ -32,6 +31,7 @@ export function useModulePlace() {
roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null,
inclCd: String(item.addRoof.pitch),
roofIndex: item.addRoof.index,
workingWidth: item.addRoof.lenBase,
}
})
setTrestleDetailParams(listParams)
@ -70,8 +70,6 @@ export function useModulePlace() {
})
}
})
console.log('roof', roof)
})
}, [trestleDetailList])

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

@ -5,11 +5,9 @@ import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
import { pitchSelector } from '@/store/canvasAtom'
export function useModuleSelection(props) {
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
const globalPitch = useRecoilValue(pitchSelector) //피치
const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
@ -17,9 +15,9 @@ export function useModuleSelection(props) {
const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
const [installHeight, setInstallHeight] = useState('0') //설치 높이
const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
const [verticalSnowCover, setVerticalSnowCover] = useState(managementState?.verticalSnowCover) //수직적설량
const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
const { getModuleTypeItemList } = useMasterController()
@ -76,12 +74,14 @@ export function useModuleSelection(props) {
const getModuleData = async (roofsIds) => {
const list = await getModuleTypeItemList(roofsIds)
//selectbox에 이름을 넣는다
list.data.forEach((item) => {
item.name = item.itemNm
})
//셀렉트박스 데이터 초기화
setModuleList(list.data)
if (list.data.length > 0) {
//selectbox에 이름을 넣는다
list.data.forEach((item) => {
item.name = item.itemNm
})
//셀렉트박스 데이터 초기화
setModuleList(list.data)
}
}
const handleChangeModule = (option) => {
@ -112,7 +112,6 @@ export function useModuleSelection(props) {
const handleChangeInstallHeight = (option) => {
setInstallHeight(option)
setModuleSelectionInitParams({
...moduleSelectionInitParams,
instHt: option,

12
src/hooks/option/useCanvasSetting.js
View File

@ -120,6 +120,8 @@ export function useCanvasSetting() {
const { closeAll } = usePopup()
useEffect(() => {
console.log('correntObjectNo', correntObjectNo)
setFetchRoofMaterials(!fetchRoofMaterials)
if (fetchRoofMaterials) {
addRoofMaterials()
@ -165,11 +167,11 @@ export function useCanvasSetting() {
useEffect(() => {
//console.log('🚀 ~ useEffect ~ roofMaterials 22 :', previousRoofMaterialsYn, roofMaterials.length , JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials))
// 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
if (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo
|| roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) {
// 1회만 실행
if (roofMaterials && previousRoofMaterialsYn === 'N') {
if (
(!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo) ||
(roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials))
) {
if (roofMaterials) {
fetchBasicSettings()
previousRoofMaterialsYn = 'Y'
}

6
src/store/selectedModuleOptions.js
View File

@ -85,9 +85,3 @@ export const moduleSelectionDataState = atom({
},
dangerouslyAllowMutability: true,
})
export const moduleSelectionDataPlanListState = atom({
key: 'moduleSelectionDataPlanListState',
default: {},
dangerouslyAllowMutability: true,
})