물건정보신규등록화면

src/components/management/StuffDetail.jsx

@@ -15,7 +15,11 @@ import { sessionStore } from '@/store/commonAtom'
 import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
 import WindSelectPop from './popup/WindSelectPop'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
 export default function StuffDetail() {
+  //공통코드
+  const { commonCode, findCommonCode } = useCommonCode()
   const [selOptions, setSelOptions] = useState('')
 
   const sessionState = useRecoilValue(sessionStore)
@@ -26,7 +30,7 @@ export default function StuffDetail() {
   const { getMessage } = useMessage()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const ref = useRef()
-  const { get, post, del, promisePost } = useAxios(globalLocaleState)
+  const { get, del, promisePost } = useAxios(globalLocaleState)
   //form
   const formInitValue = {
     // 물건번호 T...(임시) R...(진짜)
@@ -63,6 +67,10 @@ export default function StuffDetail() {
 
   const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
 
+  const [honorificCodeList, setHonorificCodeList] = useState([]) //경칭 공통코드 리스트
+  const [selHonorificCode, setSelHonorificCode] = useState('') //선택한 경칭코드
+  const [objectStatusList, setObjectStatusList] = useState([]) //물건구분 공통코드 리스트
+  const [windSpeedList, setWindSpeedList] = useState([]) //기준 풍속 공통코드 리스트
   const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
   const [prefValue, setPrefValue] = useState('')
   const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
@@ -92,7 +100,6 @@ export default function StuffDetail() {
         setIsFormValid(true)
       }
       get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
-        console.log('물건번호로 상세 API 호출')
         if (res != null) {
           setDetailData(res)
         }
@@ -128,6 +135,24 @@ export default function StuffDetail() {
     }
   }, [objectNo, sessionState])
 
+  useEffect(() => {
+    const code1 = findCommonCode(200800) //경칭
+    const code2 = findCommonCode(201700) //신축/기축
+    const code3 = findCommonCode(113600) //기준풍속
+    if (code1 != null) {
+      // console.log('경칭공코::::::', code1)
+      setHonorificCodeList(code1)
+    }
+    if (code2 != null) {
+      // console.log('신축/기축공코::::', code2)
+      setObjectStatusList(code2)
+    }
+    if (code3 != null) {
+      // console.log('기준풍속::::', code3)
+      setWindSpeedList(code3)
+    }
+  }, [commonCode])
+
   useEffect(() => {
     if (isObjectNotEmpty(detailData)) {
       // 도도부현API
@@ -159,6 +184,26 @@ export default function StuffDetail() {
     }
   }, [detailData])
 
+  //경칭선택 변경 이벤트
+  const onChangeHonorificCode = (key) => {
+    if (isObjectNotEmpty(key)) {
+      setSelHonorificCode(key.clCode)
+      form.setValue('objectNameOmit', key.clCode)
+    } else {
+      setSelHonorificCode('')
+      form.setValue('objectNameOmit', '')
+    }
+  }
+
+  //기준풍속 변경 이벤트
+  const onChangeWindSpeedCode = (key) => {
+    if (isObjectNotEmpty(key)) {
+      form.setValue('windSpeed', key.clCode)
+    } else {
+      form.setValue('windSpeed', '')
+    }
+  }
+
   //1차점 변경 이벤트
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
@@ -208,7 +253,7 @@ export default function StuffDetail() {
 
   //팝업에서 넘어온 우편정보
   const setZipInfo = (info) => {
-    console.log('팝업에서 넘어온 우편 데이타::::::::', info)
+    // console.log('팝업에서 넘어온 우편 데이타::::::::', info)
     setPrefValue(info.prefId)
     form.setValue('prefId', info.prefId)
     form.setValue('prefName', info.address1)
@@ -243,7 +288,7 @@ export default function StuffDetail() {
     form.setValue('verticalSnowCover', info.verticalSnowCover)
     form.setValue('surfaceType', info.surfaceType)
     //설치 높이 installHeight
-
+    form.setValue('installHeight', info.installHeight)
     form.setValue('remarks', info.remarks)
   }
 
@@ -285,7 +330,7 @@ export default function StuffDetail() {
   useEffect(() => {
     if (editMode === 'NEW') {
       const formData = form.getValues()
-      // console.log('임시저장폼::::::::::::', formData)
+      // console.log('임시저장폼error체크::::::::::::', formData)
       let errors = {}
       if (!formData.dispCompanyName || formData.dispCompanyName.trim().length === 0) {
         errors.dispCompanyName = true
@@ -415,10 +460,9 @@ export default function StuffDetail() {
 
   // 임시저장
   const onTempSave = async () => {
-    console.log('임시저장:::::')
-    return
     const formData = form.getValues()
-    // console.log('formData::', formData)
+    console.log('임시저장누름:::::', formData)
+    return
     const params = {
       saleStoreId: formData.otherSaleStoreId ? formData.otherSaleStoreId : formData.saleStoreId,
       saleStoreName: formData.otherSaleStoreName ? formData.otherSaleStoreName : formData.saleStoreName,
@@ -518,24 +562,43 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="d-check-radio light mr10">
+                        {/* 라디오시작 */}
-                          <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
+                        {objectStatusList.map((row, index) => {
-                          <label htmlFor="objectStatus0">{getMessage('stuff.detail.objectStatus0')}</label>
+                          return (
-                        </div>
+                            <div className="d-check-radio light mr10" key={`objectStatusId_${row.clCode}`}>
-                        <div className="d-check-radio light mr10">
+                              <input
-                          <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
+                                type="radio"
-                          <label htmlFor="objectStatus1">{getMessage('stuff.detail.objectStatus1')}</label>
+                                name="objectStatusId"
-                        </div>
+                                value={row.clCode}
+                                id={`objectStatus${row.clCode}`}
+                                {...register('objectStatusId')}
+                              />
+                              <label htmlFor={`objectStatus${row.clCode}`}>{row.clCodeNm}</label>
+                            </div>
+                          )
+                        })}
+                        {/* 라디오끝 */}
                         <div className="input-wrap mr5" style={{ width: '545px' }}>
                           <input type="text" className="input-light" {...form.register('objectName')} />
                         </div>
                         <div className="select-wrap" style={{ width: '120px' }}>
-                          <select className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
+                          <Select
-                            <option value="">경칭선택</option>
+                            {...register('objectNameOmit')}
-                            <option value="11">경칭11</option>
+                            id="ng-value-select0"
-                            <option value="22">경칭22</option>
+                            instanceId="long-value-select0"
-                            <option value="33">경칭33</option>
+                            className="react-select-custom"
-                          </select>
+                            classNamePrefix="custom"
+                            placeholder="Select"
+                            options={honorificCodeList}
+                            onChange={onChangeHonorificCode}
+                            getOptionLabel={(x) => x.clCodeNm}
+                            getOptionValue={(x) => x.clCode}
+                            isClearable={true}
+                            isSearchable={false}
+                            value={honorificCodeList.filter(function (option) {
+                              return option.clCode === selHonorificCode
+                            })}
+                          ></Select>
                         </div>
                       </div>
                     </td>
@@ -611,10 +674,10 @@ export default function StuffDetail() {
                             getOptionValue={(x) => x.saleStoreId}
                             isDisabled={form.watch('saleStoreId') !== '' ? false : true}
                             isClearable={true}
-                            value={otherSaleStoreList.filter(function (option) {
+                            //value={otherSaleStoreList.filter(function (option) {
-                              // console.log('2차점::::::', option)
+                            // console.log('2차점::::::', option)
-                              // return option.saleStoreId === selOptions
+                            // return option.saleStoreId === selOptions
-                            })}
+                            //})}
                           />
                         </div>
                         <div className="input-wrap" style={{ width: '216px' }}>
@@ -708,9 +771,30 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="input-wrap mr10">
+                        {/* <div className="input-wrap mr10">
                           <input type="text" className="input-light" readOnly value={form.watch('windSpeed')} {...register('windSpeed')} />
+                        </div> */}
+                        {/* 기준풍속sel시작 */}
+                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                          <Select
+                            {...register('windSpeed')}
+                            id="long-value-select5"
+                            instanceId="long-value-select5"
+                            className="react-select-custom"
+                            classNamePrefix="custom"
+                            placeholder="Select"
+                            options={windSpeedList}
+                            onChange={onChangeWindSpeedCode}
+                            getOptionLabel={(x) => x.clCodeNm}
+                            getOptionValue={(x) => x.clCode}
+                            isClearable={true}
+                            isSearchable={false}
+                            value={windSpeedList.filter(function (option) {
+                              return option.clCode === watch('windSpeed')
+                            })}
+                          ></Select>
                         </div>
+                        {/* 기준풍속sel끝 */}
                         <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
                         <Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                           {getMessage('stuff.detail.btn.windSpeedPop')}
@@ -724,12 +808,15 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                        {/* <div className="select-wrap mr10" style={{ width: '200px' }}>
                           <select className="select-light" name="verticalSnowCover" {...register('verticalSnowCover')}>
-                            <option value="">수직적설량코드?</option>
+                            <option value="">수직적설량 인풋</option>
                             <option value="30">30</option>
                             <option value="40">40</option>
                           </select>
+                        </div> */}
+                        <div className="input-wrap mr10" style={{ width: '200px' }}>
+                          <input type="text" className="input-light" value={form.watch('verticalSnowCover')} {...register('verticalSnowCover')} />
                         </div>
                         <span className="mr10">cm</span>
                         <div className="d-check-box light">
@@ -767,13 +854,8 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                        <div className="input-wrap mr10" style={{ width: '200px' }}>
-                          <select className="select-light" name="installHeight" {...register('installHeight')}>
+                          <input type="text" className="input-light" value={form.watch('installHeight')} {...register('installHeight')} />
-                            <option value="">설치높이공코</option>
-                            <option value="11">111</option>
-                            <option value="22">222</option>
-                            <option value="33">333</option>
-                          </select>
                         </div>
                         <span>m</span>
                       </div>
@@ -866,24 +948,43 @@ export default function StuffDetail() {
                       </th>
                       <td>
                         <div className="flx-box">
-                          <div className="d-check-radio light mr10">
+                          {/* 상세라디오시작 */}
-                            <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
+                          {objectStatusList.map((row) => {
-                            <label htmlFor="objectStatus0">{getMessage('stuff.detail.objectStatus0')}</label>
+                            return (
-                          </div>
+                              <div className="d-check-radio light mr10" key={`objectStatusId_${row.clCode}`}>
-                          <div className="d-check-radio light mr10">
+                                <input
-                            <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
+                                  type="radio"
-                            <label htmlFor="objectStatus1">{getMessage('stuff.detail.objectStatus1')}</label>
+                                  name="objectStatusId"
-                          </div>
+                                  value={row.clCode}
+                                  id={`objectStatus${row.clCode}`}
+                                  {...register('objectStatusId')}
+                                />
+                                <label htmlFor={`objectStatus${row.clCode}`}>{row.clCodeNm}</label>
+                              </div>
+                            )
+                          })}
+                          {/* 상세라디오끝 */}
                           <div className="input-wrap mr5" style={{ width: '545px' }}>
                             <input type="text" className="input-light" {...form.register('objectName')} />
                           </div>
                           <div className="select-wrap" style={{ width: '120px' }}>
-                            <select className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
+                            <Select
-                              <option value="">경칭선택</option>
+                              {...register('objectNameOmit')}
-                              <option value="11">경칭11</option>
+                              id="ng-value-select0"
-                              <option value="22">경칭22</option>
+                              instanceId="long-value-select0"
-                              <option value="33">경칭33</option>
+                              className="react-select-custom"
-                            </select>
+                              classNamePrefix="custom"
+                              placeholder="Select"
+                              options={honorificCodeList}
+                              onChange={onChangeHonorificCode}
+                              getOptionLabel={(x) => x.clCodeNm}
+                              getOptionValue={(x) => x.clCode}
+                              isClearable={true}
+                              isSearchable={false}
+                              value={honorificCodeList.filter(function (option) {
+                                return option.clCode === selHonorificCode
+                              })}
+                            ></Select>
                           </div>
                         </div>
                       </td>

src/components/management/popup/PlanRequestPop.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useRecoilValue } from 'recoil'
@@ -8,7 +8,7 @@ import SingleDatePicker from '@/components/common/datepicker/SingleDatePicker'
 import dayjs from 'dayjs'
 import PlanRequestPopQGrid from './PlanRequestPopQGrid'
 import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
-
+import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Select from 'react-select'
 import QPagination from '@/components/common/pagination/QPagination'
 export default function PlanRequestPop(props) {
@@ -16,6 +16,11 @@ export default function PlanRequestPop(props) {
   const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
   const [totalCount, setTotalCount] = useState(0) //총 갯수
 
+  //공통코드
+  const { commonCode, findCommonCode } = useCommonCode()
+
+  const [planStatCdList, setPlanStatCdList] = useState([])
+
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const [planReqObject, setPlanReqObject] = useState({})
@@ -70,10 +75,8 @@ export default function PlanRequestPop(props) {
 
   // 상태 검색조건 변경
   const onSelectionChange = (key) => {
-    //임시작업
-    // console.log('E::::::::', key)
     if (isObjectNotEmpty(key)) {
-      setSchPlanStatCd(key.value)
+      setSchPlanStatCd(key.clCode)
     } else {
       //X누름
       setSchPlanStatCd('')
@@ -242,24 +245,12 @@ export default function PlanRequestPop(props) {
     }
   }
 
-  const tempList = [
+  useEffect(() => {
-    {
+    const code1 = findCommonCode(115800) //상태
-      label: '완료',
+    if (code1 != null) {
-      value: 'C',
+      setPlanStatCdList(code1)
-    },
+    }
-    {
+  }, [commonCode])
-      label: '저장',
-      value: 'I',
-    },
-    {
-      label: '접수',
-      value: 'R',
-    },
-    {
-      label: '제출',
-      value: 'S',
-    },
-  ]
 
   return (
     <div className="modal-popup">
@@ -378,8 +369,10 @@ export default function PlanRequestPop(props) {
                               className="react-select-custom"
                               classNamePrefix="custom"
                               ref={ref}
-                              options={tempList}
+                              options={planStatCdList}
                               onChange={onSelectionChange}
+                              getOptionLabel={(x) => x.clCodeNm}
+                              getOptionValue={(x) => x.clCode}
                               isSearchable={false}
                               placeholder="Select"
                               isClearable={true}