From fd8045aa8fd4f17cc51d0bd5ddbefc0a7b7c433c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?= <43837214+Minsiki@users.noreply.github.com> Date: Tue, 21 Jan 2025 11:07:47 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9E=90=EB=8F=99=20=ED=9A=8C=EB=A1=9C?= =?UTF-8?q?=ED=95=A0=EB=8B=B9=20=EA=B0=9C=EB=B0=9C=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../circuitTrestle/CircuitTrestleSetting.jsx | 50 ++++---- .../step/PowerConditionalSelect.jsx | 111 +++++++++--------- .../step/type/PassivityCircuitAllocation.jsx | 9 +- src/hooks/common/useMasterController.js | 2 +- src/store/circuitTrestleAtom.js | 22 +++- 5 files changed, 98 insertions(+), 96 deletions(-) diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 450d15b9..4c566d9a 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -6,14 +6,12 @@ import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp' import { useMessage } from '@/hooks/useMessage' import { usePopup } from '@/hooks/usePopup' import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation' -import { useAxios } from '@/hooks/useAxios' import { useMasterController } from '@/hooks/common/useMasterController' -import { get } from 'react-hook-form' import { correntObjectNoState } from '@/store/settingAtom' import { useRecoilValue } from 'recoil' import { GlobalDataContext } from '@/app/GlobalDataProvider' import { useRecoilState } from 'recoil' -import { modelState, pcsCheckState, powerConditionalState } from '@/store/circuitTrestleAtom' +import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom' import { POLYGON_TYPE } from '@/common/common' import { useSwal } from '@/hooks/useSwal' import { canvasState } from '@/store/canvasAtom' @@ -27,30 +25,31 @@ const ALLOCATION_TYPE = { export default function CircuitTrestleSetting({ id }) { const { getMessage } = useMessage() const { closePopup } = usePopup() - // 탭 번호 1: 파워 컨디셔너 선택(+수동 설정) - // 탭 번호 2: 회로 할당 - const [tabNum, setTabNum] = useState(1) - const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO) - - const [makers, setMakers] = useState([]) - const [series, setSeries] = useState([]) - const [model, setModel] = useRecoilState(modelState) - const [selectedModels, setSelectedModels] = useState(model.selectedModels) - const [models, setModels] = useState(model.models) - const [selectedMaker, setSelectedMaker] = useState(null) - const [selectedSeries, setSelectedSeries] = useState(null) - const correntObjectNo = useRecoilValue(correntObjectNoState) - const { getPcsMakerList } = useMasterController() - const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) - const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState) - const canvas = useRecoilValue(canvasState) const { apply } = useTrestle() const { swalFire } = useSwal() + const canvas = useRecoilValue(canvasState) + + const [makers, setMakers] = useRecoilState(makersState) + const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState) + const [series, setSeries] = useRecoilState(seriesState) + const [models, setModels] = useRecoilState(modelsState) + const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState) + + const [tabNum, setTabNum] = useState(1) + const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO) const [circuitAllocationType, setCircuitAllocationType] = useState(1) const powerConditionalSelectProps = { tabNum, setTabNum, + makers, + setMakers, + selectedMaker, + setSelectedMaker, + series, + setSeries, + models, + setModels, } const circuitProps = { tabNum, @@ -59,11 +58,6 @@ export default function CircuitTrestleSetting({ id }) { setCircuitAllocationType, } - useEffect(() => { - console.log('🚀 ~ CircuitTrestleSetting ~ model:', model) - setSelectedModels(model.selectedModels) - }, [model]) - const onAutoAllocation = () => { let moduleStdQty = 0 let moduleMaxQty = 0 @@ -100,14 +94,16 @@ export default function CircuitTrestleSetting({ id }) { } const onPassivityAllocation = () => { - console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', model) - if (selectedModels.length === 0) { + console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', models) + + if (models.filter((m) => m.selected).length === 0) { swalFire({ title: '파워 컨디셔너를 추가해 주세요.', type: 'alert', }) return } else if (pcsCheck.max) { + const selectedModels = models.filter((m) => m.selected) const moduleStdQty = selectedModels.reduce((acc, model) => { return acc + parseInt(model.moduleStdQty) }, 0) diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx index a58abfc3..384c4867 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx @@ -1,28 +1,18 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider' import QSelectBox from '@/components/common/select/QSelectBox' import { useMasterController } from '@/hooks/common/useMasterController' -import { useEvent } from '@/hooks/useEvent' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' -import { makerState, modelState, pcsCheckState, seriesState } from '@/store/circuitTrestleAtom' +import { pcsCheckState } from '@/store/circuitTrestleAtom' import { globalLocaleStore } from '@/store/localeAtom' -import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' +import { selectedModuleState } from '@/store/selectedModuleOptions' import { useContext, useEffect, useState } from 'react' import { useRecoilState } from 'recoil' import { useRecoilValue } from 'recoil' import { v4 as uuidv4 } from 'uuid' export default function PowerConditionalSelect(props) { - let { tabNum, setTabNum } = props - const [makerData, setMakerData] = useRecoilState(makerState) - const [makers, setMakers] = useState(makerData.makers) - const [selectedMaker, setSelectedMaker] = useState(makerData.selectedMaker) - const [series, setSeries] = useRecoilState(seriesState) - const [seriesList, setSeriesList] = useState(series.series) - const [selectedSeries, setSelectedSeries] = useState(series.selectedSeries) - const [model, setModel] = useRecoilState(modelState) - const [models, setModels] = useState(model.models) - const [selectedModels, setSelectedModels] = useState(model.selectedModels) + let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState) const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) const { getMessage } = useMessage() @@ -69,20 +59,20 @@ export default function PowerConditionalSelect(props) { // console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res) // // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량) // }) - return () => { - setMakerData({ makers, selectedMaker }) - setSeries({ series: seriesList, selectedSeries }) - setModel({ models, selectedModels }) - } + // return () => { + // console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker) + // setMakerData({ makers, selectedMaker }) + // setSeries({ series: seriesList, selectedSeries }) + // setModels({ models, selectedModels }) + // } }, []) useEffect(() => { console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker) if (selectedMaker) { - setSelectedModels([]) - setModels([]) + setModels(null) getPcsMakerList(selectedMaker).then((res) => { - setSeriesList( + setSeries( res.data.map((series) => { return { ...series, selected: false } }), @@ -92,9 +82,9 @@ export default function PowerConditionalSelect(props) { }, [selectedMaker]) useEffect(() => { - if (seriesList.filter((series) => series.selected).length === 0) return - const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd - const pcsSerList = seriesList + if (series.filter((s) => s.selected).length === 0) return + const pcsMkrCd = series.filter((s) => s.selected)[0]?.pcsMkrCd + const pcsSerList = series .filter((series) => series.selected) .map((series) => { return { pcsSerCd: series.pcsSerCd } @@ -106,7 +96,7 @@ export default function PowerConditionalSelect(props) { } }) getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => { - if (res?.result.code === 200) { + if (res?.result.code === 200 && res?.data) { console.log('🚀 ~ useEffect ~ res:', res.data) setModels( res.data.map((model) => { @@ -121,23 +111,15 @@ export default function PowerConditionalSelect(props) { ) } }) - }, [seriesList]) - - useEffect(() => { - console.log('🚀 ~ useEffect ~ models:', models) - }, [models]) - - useEffect(() => { - console.log('🚀 ~ useEffect ~ pcsCheck:', pcsCheck) - }, [pcsCheck]) + }, [series]) const onCheckSeries = (series) => { - setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) + setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) } const onAddSelectedModel = () => { if (selectedRow === null) return - if (selectedModels.length === 3) { + if (models.filter((m) => m.selected).length === 3) { swalFire({ title: '최대 3개까지 선택할 수 있습니다.', icon: 'warning', @@ -145,28 +127,41 @@ export default function PowerConditionalSelect(props) { return } - setSelectedModels([...selectedModels, selectedRow]) + setModels( + models.map((model) => { + if (model.code === selectedRow.code) { + return { + ...model, + selected: true, + } + } + return { + ...model, + } + }), + ) setSelectedRow(null) } const onRemoveSelectedModel = (model) => { - setSelectedModels(selectedModels.filter((m) => m.code !== model.code)) + // setSelectedModels(selectedModels.filter((m) => m.code !== model.code)) + setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false }))) } - useEffect(() => { - console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels) - const selectedModelsIds = selectedModels.map((model) => model.code) + // useEffect(() => { + // console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels) + // const selectedModelsIds = selectedModels.map((model) => model.code) - setModels( - models.map((model) => { - return { - ...model, - selected: selectedModelsIds.includes(model.code), - } - }), - ) - setModel({ ...model, selectedModels: selectedModels }) - }, [selectedModels]) + // setModels( + // models.map((model) => { + // return { + // ...model, + // selected: selectedModelsIds.includes(model.code), + // } + // }), + // ) + // setModel({ ...model, selectedModels: selectedModels }) + // }, [selectedModels]) return ( <>
@@ -191,7 +186,7 @@ export default function PowerConditionalSelect(props) {
- {seriesList?.map((series, index) => ( + {series?.map((series, index) => (
onCheckSeries(series)} checked={series.selected} /> @@ -234,11 +229,13 @@ export default function PowerConditionalSelect(props) {
- {selectedModels?.map((model) => ( - - {model.itemNm} - - ))} + {models + ?.filter((m) => m.selected) + ?.map((model) => ( + + {model.itemNm} + + ))}
diff --git a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx index 61869db0..e9da38b3 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx @@ -2,7 +2,7 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider' import { POLYGON_TYPE } from '@/common/common' import { useMessage } from '@/hooks/useMessage' import { canvasState } from '@/store/canvasAtom' -import { modelState, moduleStatisticsState } from '@/store/circuitTrestleAtom' +import { modelState } from '@/store/circuitTrestleAtom' import { selectedModuleState } from '@/store/selectedModuleOptions' import { useContext, useEffect, useState } from 'react' import { useRecoilValue } from 'recoil' @@ -19,16 +19,15 @@ export default function PassivityCircuitAllocation() { const canvas = useRecoilValue(canvasState) const selectedModules = useRecoilValue(selectedModuleState) const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) - const { header, rows, footer } = useRecoilValue(moduleStatisticsState) const [moduleData, setModuleData] = useState({ - header: header, - rows: rows, - footer: footer, + header: [], + rows: [], }) const model = useRecoilValue(modelState) const [selectedModels, setSelectedModels] = useState(model.selectedModels) const [selectedPcs, setSelectedPcs] = useState(selectedModels[0]) const [totalWpout, setTotalWpout] = useState(0) + useEffect(() => { setSurfaceInfo() if (!managementState) { diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index d9b1cec0..013c7870 100644 --- a/src/hooks/common/useMasterController.js +++ b/src/hooks/common/useMasterController.js @@ -147,7 +147,7 @@ export function useMasterController() { ], } - return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: test }).then((res) => { + return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: params }).then((res) => { return res }) } diff --git a/src/store/circuitTrestleAtom.js b/src/store/circuitTrestleAtom.js index fe9c6e35..05a11760 100644 --- a/src/store/circuitTrestleAtom.js +++ b/src/store/circuitTrestleAtom.js @@ -1,20 +1,30 @@ import { useMessage } from '@/hooks/useMessage' import { atom } from 'recoil' -export const makerState = atom({ - key: 'makerState', - default: { makers: [], selectedMaker: null }, +export const makersState = atom({ + key: 'makersState', + default: [], dangerouslyAllowMutability: true, }) +export const selectedMakerState = atom({ + key: 'selectedMakerState', + default: null, +}) + export const seriesState = atom({ key: 'seriesState', - default: { series: [], selectedSeries: [] }, + default: [], }) -export const modelState = atom({ +export const selectedSeriesState = atom({ + key: 'selectedSeriesState', + default: null, +}) + +export const modelsState = atom({ key: 'modelState', - default: { models: [], selectedModels: [] }, + default: [], }) export const pcsCheckState = atom({