회로 개발중

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 canvas = useRecoilValue(canvasState)
-  const [series, setSeries] = useState([])
+  const { swalFire } = useSwal()
-  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 apply = () => {
     closePopup(id)
   }
 
   useEffect(() => {
-    getPcsMakerList().then((res) => {
+    // console.log(canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE))
-      setMakers(res.data)
+    // if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length === 0) {
-    })
+    //   swalFire({
-    if (!managementState) {
+    //     title: '모듈을 배치해주세요.',
-      console.log('🚀 ~ useEffect ~ managementState:', managementState)
+    //     type: 'alert',
-      setManagementState(managementStateLoaded)
+    //     confirmFn: () => {
-    }
+    //       closePopup(id)
-    console.log('🚀 ~ useEffect ~ managementState:', managementState)
+    //     },
-    // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
+    //   })
-    //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
+    // }
-    //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
-    // })
   }, [])
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (selectedMaker) {
+  //   console.log('🚀 ~ CircuitTrestleSetting ~ series:', series)
-      getPcsMakerList(selectedMaker).then((res) => {
+  //   const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd)
-        const series = res.data.map((series) => {
+  //   if (selectedSeries.length > 0) {
-          return { ...series, selected: false }
+  //     getPcsMakerList(selectedSeries).then((res) => {
-        })
+  //       setModels(res.data)
-        setSeries(series)
+  //     })
-      })
+  //   }
-    }
+  // }, [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])
   // 회로 할당 유형
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
 
   const powerConditionalSelectProps = {
     tabNum,
     setTabNum,
-    makers,
-    selectedMaker,
-    setSelectedMaker,
-    series,
-    setSeries,
-    selectedSeries,
-    setSelectedSeries,
-    models,
-    setModels,
-    selectedModels,
-    setSelectedModels,
-    managementState,
   }
   const circuitProps = {
     tabNum,

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 {
+  let { tabNum, setTabNum } = props
-    makers,
+  const [makerData, setMakerData] = useRecoilState(makerState)
-    selectedMaker,
+  const [makers, setMakers] = useState(makerData.makers)
-    setSelectedMaker,
+  const [selectedMaker, setSelectedMaker] = useState(makerData.selectedMaker)
-    series,
+  const [series, setSeries] = useRecoilState(seriesState)
-    setSeries,
+  const [seriesList, setSeriesList] = useState(series.series)
-    selectedSeries,
+  const [selectedSeries, setSelectedSeries] = useState(series.selectedSeries)
-    setSelectedSeries,
+  const model = useRecoilValue(modelState)
-    models,
+  const [models, setModels] = useState(model.models)
-    selectedModels,
+  const [selectedModels, setSelectedModels] = useState(model.selectedModels)
-    tabNum,
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-    setTabNum,
-    managementState,
-  } = props
   const { getMessage } = useMessage()
-  const [selectedRowIndex, setSelectedRowIndex] = useState(null)
+  const [selectedRow, setSelectedRow] = useState(null)
-  const [powerConditions, setPowerConditions] = useState([])
   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',
+      prop: 'moduleMaxQty',
-    },
-    {
-      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`,
-      width: '10%',
-      prop: 'outputCurrent',
     },
   ]
+
+  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 (
     <>
       <div className="outline-form mb15">
@@ -80,9 +161,9 @@ export default function PowerConditionalSelect(props) {
       <div className="module-table-box mb10">
         <div className="module-table-inner">
           <div className="circuit-check-inner overflow">
-            {series?.map((series, index) => (
+            {seriesList?.map((series, index) => (
               <div className="d-check-box pop sel">
-                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
+                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} />
                 <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
               </div>
             ))}
@@ -105,11 +186,11 @@ export default function PowerConditionalSelect(props) {
                 </thead>
                 <tbody>
                   {models
-                    ?.filter((model) => model.series === selectedSeries?.code)
+                    ?.filter((model) => !model.selected)
-                    .map((row, index) => (
+                    .map((model, index) => (
-                      <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
+                      <tr key={index} onClick={() => setSelectedRow(model)} className={model === selectedRow ? 'on' : ''}>
                         {modelHeader.map((header) => (
-                          <td>{row[header.prop]}</td>
+                          <td>{model[header.prop]}</td>
                         ))}
                       </tr>
                     ))}
@@ -118,12 +199,14 @@ export default function PowerConditionalSelect(props) {
             </div>
           </div>
           <div className="circuit-right-wrap mb10">
-            <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
+            <button className="btn-frame self mr5" onClick={() => onAddSelectedModel()}>
+              {getMessage('modal.common.add')}
+            </button>
           </div>
           <div className="circuit-data-form">
             {selectedModels?.map((model) => (
               <span className="normal-font">
-                {model.name} <button className="del"></button>
+                {model.itemNm} <button className="del"></button>
               </span>
             ))}
           </div>

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,
   }
 }