diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 4a265f67..b14bfa31 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -12,6 +12,11 @@ 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 { powerConditionalState } from '@/store/circuitTrestleAtom' +import { POLYGON_TYPE } from '@/common/common' +import { useSwal } from '@/hooks/useSwal' +import { canvasState } from '@/store/canvasAtom' const ALLOCATION_TYPE = { AUTO: 'auto', @@ -24,72 +29,41 @@ export default function CircuitTrestleSetting({ id }) { // 탭 번호 2: 회로 할당 const [tabNum, setTabNum] = useState(1) const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO) - const [makers, setMakers] = useState([]) - const [series, setSeries] = useState([]) - const [models, setModels] = useState([]) - const [selectedMaker, setSelectedMaker] = useState(null) - const [selectedModels, setSelectedModels] = useState(null) - const [selectedSeries, setSelectedSeries] = useState(null) - const correntObjectNo = useRecoilValue(correntObjectNoState) - const { getPcsMakerList } = useMasterController() - const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) + const canvas = useRecoilValue(canvasState) + const { swalFire } = useSwal() + const apply = () => { closePopup(id) } useEffect(() => { - getPcsMakerList().then((res) => { - setMakers(res.data) - }) - if (!managementState) { - console.log('🚀 ~ useEffect ~ managementState:', managementState) - setManagementState(managementStateLoaded) - } - console.log('🚀 ~ useEffect ~ managementState:', managementState) - // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => { - // console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res) - // // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량) - // }) + // console.log(canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)) + // if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length === 0) { + // swalFire({ + // title: '모듈을 배치해주세요.', + // type: 'alert', + // confirmFn: () => { + // closePopup(id) + // }, + // }) + // } }, []) - useEffect(() => { - if (selectedMaker) { - getPcsMakerList(selectedMaker).then((res) => { - const series = res.data.map((series) => { - return { ...series, selected: false } - }) - setSeries(series) - }) - } - }, [selectedMaker]) - - useEffect(() => { - console.log('🚀 ~ CircuitTrestleSetting ~ series:', series) - const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd) - if (selectedSeries.length > 0) { - getPcsMakerList(selectedSeries).then((res) => { - setModels(res.data) - }) - } - }, [series]) + // useEffect(() => { + // console.log('🚀 ~ CircuitTrestleSetting ~ series:', series) + // const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd) + // if (selectedSeries.length > 0) { + // getPcsMakerList(selectedSeries).then((res) => { + // setModels(res.data) + // }) + // } + // }, [series]) // 회로 할당 유형 const [circuitAllocationType, setCircuitAllocationType] = useState(1) const powerConditionalSelectProps = { tabNum, setTabNum, - makers, - selectedMaker, - setSelectedMaker, - series, - setSeries, - selectedSeries, - setSelectedSeries, - models, - setModels, - selectedModels, - setSelectedModels, - managementState, } const circuitProps = { tabNum, diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx index 101f2be4..420a2e35 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx @@ -1,61 +1,142 @@ +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 { makerState, modelState, seriesState } from '@/store/circuitTrestleAtom' import { globalLocaleStore } from '@/store/localeAtom' -import { useState } from 'react' +import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' +import { useContext, useEffect, useState } from 'react' +import { useRecoilState } from 'recoil' import { useRecoilValue } from 'recoil' +import { v4 as uuidv4 } from 'uuid' const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }] export default function PowerConditionalSelect(props) { - const { - makers, - selectedMaker, - setSelectedMaker, - series, - setSeries, - selectedSeries, - setSelectedSeries, - models, - selectedModels, - tabNum, - setTabNum, - managementState, - } = 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 = useRecoilValue(modelState) + const [models, setModels] = useState(model.models) + const [selectedModels, setSelectedModels] = useState(model.selectedModels) + const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) const { getMessage } = useMessage() - const [selectedRowIndex, setSelectedRowIndex] = useState(null) - const [powerConditions, setPowerConditions] = useState([]) + const [selectedRow, setSelectedRow] = useState(null) const globalLocale = useRecoilValue(globalLocaleStore) + const { getPcsMakerList, getPcsModelList } = useMasterController() + const selectedModules = useRecoilValue(selectedModuleState) const modelHeader = [ - { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' }, + { name: getMessage('명칭'), width: '15%', prop: 'itemNm', type: 'color-box' }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`, width: '10%', - prop: 'ratedOutput', + prop: 'ratedCapa', }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`, width: '10%', - prop: 'circuitAmount', + prop: 'paralMax', }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`, width: '10%', - prop: 'maxConnection', + prop: 'moduleStdQty', }, { name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`, width: '10%', - prop: 'maxOverload', - }, - { - name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`, - width: '10%', - prop: 'outputCurrent', + prop: 'moduleMaxQty', }, ] + + useEffect(() => { + if (makers.length === 0) { + getPcsMakerList().then((res) => { + setMakers(res.data) + }) + } + if (!managementState) { + console.log('🚀 ~ useEffect ~ managementState:', managementState) + setManagementState(managementStateLoaded) + } + // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => { + // console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res) + // // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량) + // }) + }, []) + + useEffect(() => { + console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker) + if (selectedMaker) { + setSelectedModels([]) + getPcsMakerList(selectedMaker).then((res) => { + setSeriesList( + res.data.map((series) => { + return { ...series, selected: false } + }), + ) + }) + } + }, [selectedMaker]) + + useEffect(() => { + console.log('🚀 ~ useEffect ~ seriesList:', seriesList) + if (seriesList.filter((series) => series.selected).length === 0) return + const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd + const pcsSerList = seriesList + .filter((series) => series.selected) + .map((series) => { + return { pcsSerCd: series.pcsSerCd } + }) + const moduleItemList = selectedModules.itemList?.map((module) => { + return { + itemId: module.itemId, + mixMatlNo: module.mixMatlNo, + } + }) + console.log('🚀 ~ useEffect ~ moduleItemList:', selectedModules) + getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => { + if (res?.result.code === 200) { + console.log('🚀 ~ useEffect ~ res:', res.data) + setModels( + res.data.map((model) => { + return { + ...model, + code: uuidv4(), + selected: false, + } + }), + ) + } + }) + }, [seriesList]) + const onCheckSeries = (series) => { - setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) + setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) } + + const onAddSelectedModel = () => { + setSelectedModels([...selectedModels, selectedRow]) + setSelectedRow(null) + } + + useEffect(() => { + const selectedModelsIds = selectedModels.map((model) => model.itemId) + + setModels( + models.map((model) => { + return { + ...model, + selected: selectedModelsIds.includes(model.itemId) === selectedRow.itemId ? true : false, + } + }), + ) + }, [selectedModels]) return ( <>
@@ -80,9 +161,9 @@ export default function PowerConditionalSelect(props) {
- {series?.map((series, index) => ( + {seriesList?.map((series, index) => (
- onCheckSeries(series)} /> + onCheckSeries(series)} checked={series.selected} />
))} @@ -105,11 +186,11 @@ export default function PowerConditionalSelect(props) { {models - ?.filter((model) => model.series === selectedSeries?.code) - .map((row, index) => ( - setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}> + ?.filter((model) => !model.selected) + .map((model, index) => ( + setSelectedRow(model)} className={model === selectedRow ? 'on' : ''}> {modelHeader.map((header) => ( - {row[header.prop]} + {model[header.prop]} ))} ))} @@ -118,12 +199,14 @@ export default function PowerConditionalSelect(props) {
- +
{selectedModels?.map((model) => ( - {model.name} + {model.itemNm} ))}
diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index d9362c34..f6dacdff 100644 --- a/src/hooks/common/useMasterController.js +++ b/src/hooks/common/useMasterController.js @@ -3,13 +3,14 @@ import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' import { getQueryString } from '@/util/common-utils' import { trestleRequest, constructionRequest, trestleDetailRequest } from '@/models/apiModels' +import { POST } from '@/app/api/image-upload/route' /** * 마스터 컨트롤러 훅 * @returns */ export function useMasterController() { - const { get } = useAxios() + const { get, post } = useAxios() const { getMessage } = useMessage() const { swalFire } = useSwal() @@ -128,6 +129,23 @@ export function useMasterController() { }) } + /** + * PCS 메이커, 시리즈 목록 조회 + * @param {PCS 메이커코드} pcsMkrCd + * @param {혼합모듈번호} mixMatlNo + * @returns + */ + const getPcsModelList = async (params = null) => { + const test = { + pcsMkrCd: 'MKR003', + pcsSerList: [{ pcsSerCd: 'SER007' }, { pcsSerCd: 'SER009' }, { pcsSerCd: 'SER010' }], + moduleItemList: [{ itemId: '107015', mixMatlNo: '' }, { itemId: '107077' }, { itemId: '107015' }], + } + return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: test }).then((res) => { + return res + }) + } + return { getRoofMaterialList, getModuleTypeItemList, @@ -135,5 +153,6 @@ export function useMasterController() { getConstructionList, getTrestleDetailList, getPcsMakerList, + getPcsModelList, } }