물건현황 -

src/components/management/Stuff.jsx

@@ -12,20 +12,24 @@ import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
 import dayjs from 'dayjs'
 import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
 dayjs.extend(isLeapYear)
-import { globalLocaleStore } from '@/store/localeAtom'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
+import '@/styles/grid.scss'
 export default function Stuff() {
+  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
   const stuffSearchParams = useRecoilValue(stuffSearchState)
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const { getMessage } = useMessage()
   const [curPage, setCurPage] = useState(1) //현재 페이지 번호
   const [defaultSize, setDefaultSize] = useState(100) //페이지 당 게시물 수
+  const [gridCount, setGridCount] = useState(0) //총 갯수
   const [defaultSortType, setDefaultSortType] = useState('R')
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
   const gridRef = useRef()
 
-  const [gridCount, setGridCount] = useState(0)
   const [selectedRowData, setSelectedRowData] = useState([])
   const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
 
@@ -273,14 +277,12 @@ export default function Stuff() {
 
         // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
         const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
-
         await get({
           url: apiUrl,
         }).then((res) => {
           if (!isEmptyArray(res)) {
-            // console.log('화면진입API결과::', res)
+            setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-            setGridProps({ ...gridProps, gridData: res, count: res.length })
+            setGridCount(res[0].totCnt)
-            setGridCount(res.length)
           }
         })
       }
@@ -293,15 +295,14 @@ export default function Stuff() {
       stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
       stuffSearchParams.endRow = curPage * defaultSize
       stuffSearchParams.schSortType = defaultSortType
-      // console.log('조회 눌럿을때 ::::::::::::::', stuffSearchParams)
       async function fetchData() {
         // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
         const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
-          console.log('API결과:::::::', res)
+          // console.log('검색조건 변경 조회 API결과:::::::', res)
           if (!isEmptyArray(res)) {
-            setGridProps({ ...gridProps, gridData: res, count: res.length })
+            setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-            setGridCount(res.length)
+            setGridCount(res[0].totCnt)
           } else {
             setGridProps({ ...gridProps, gridData: [], count: 0 })
             setGridCount(0)
@@ -324,15 +325,14 @@ export default function Stuff() {
       startRow: startRow,
       endRow: curPage * e.target.value,
     })
-    // console.log('셋팅된 검색조건:::', stuffSearchParams)
+    console.log('페이지 갯수 변경 때 셋팅된 검색조건:::', stuffSearchParams)
     //조회API호출
     // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
     const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
-      // console.log('보여줄개수바꿨을때 조회 ::::::::::', res)
       if (!isEmptyArray(res)) {
-        setGridProps({ ...gridProps, gridData: res, count: res.length })
+        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-        setGridCount(res.length)
+        setGridCount(res[0].totCnt)
       } else {
         setGridProps({ ...gridProps, gridData: [], count: 0 })
         setGridCount(0)
@@ -352,18 +352,24 @@ export default function Stuff() {
     })
     // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
     const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
-    // console.log('apiUrl::', apiUrl)
     get({ url: apiUrl }).then((res) => {
-      // console.log('정렬바꿨을때 조회 ::::::::::', res)
       if (!isEmptyArray(res)) {
-        setGridProps({ ...gridProps, gridData: res, count: res.length })
+        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-        setGridCount(res.length)
+        setGridCount(res[0].totCnt)
       } else {
         setGridProps({ ...gridProps, gridData: [], count: 0 })
         setGridCount(0)
       }
     })
   }
+
+  useEffect(() => {
+    if (globalLocaleState === 'ko') {
+      setAppMessageState(KO)
+    } else {
+      setAppMessageState(JA)
+    }
+  }, [globalLocaleState])
   return (
     <>
       {/* 퍼블시작 */}

src/components/management/StuffDetail.jsx

@@ -11,6 +11,7 @@ import dayjs from 'dayjs'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { useRecoilState, useRecoilValue } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
 export default function StuffDetail() {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -38,7 +39,7 @@ export default function StuffDetail() {
     windSpeed: '', //기준풍속
     snowCover: '', //수직적설량
     coldAreaChk: false, //한랭지대책시행
-    surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
+    surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ)
     saltAreaChk: false, //염해지역용아이템사용
     installHeight: '', //설치높이
     powerConTerms: '0', //계약조건(잉여 / 전량)
@@ -77,14 +78,13 @@ export default function StuffDetail() {
       get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
         // console.log('물건번호로 상세 API 호출')
         if (res != null) {
-          // console.log('상세res:::::::', res)
           setDetailData(res)
 
           // 신규 상세 공통APi
           // 도도부현API
           get({ url: '/api/object/prefecture/list' }).then((res) => {
             if (!isEmptyArray(res)) {
-              //console.log('도도부현API 결과:::', res)
+              console.log('도도부현API 결과:::', res)
               setPrefCodeList(res)
             }
           })
@@ -106,12 +106,11 @@ export default function StuffDetail() {
         }
       })
     } else {
-      console.log('신규화면')
       // 신규 상세 공통APi
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
-          //console.log('도도부현API 결과:::', res)
+          // console.log('신규화면 도도부현API 결과:::', res)
           setPrefCodeList(res)
         }
       })
@@ -121,11 +120,11 @@ export default function StuffDetail() {
       //1차점 : X167
       get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
         if (!isEmptyArray(res)) {
-          console.log('판매점 결과:::::', res)
+          // console.log('판매점 결과:::::', res)
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
-          console.log('first:::::', firstList)
+          // console.log('first:::::', firstList)
-          console.log('otherList:::::', otherList)
+          // console.log('otherList:::::', otherList)
           //1차점 셀렉트박스
           setSaleStoreList(firstList)
           //1차 판매점 자동완성 값 셋팅
@@ -135,6 +134,8 @@ export default function StuffDetail() {
 
           //1차점 아닌 판매점 셀렉트박스
           setOtherSaleStoreList(otherList)
+          form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
+          form.setValue('otherSaleStoreName', otherList[0].saleStoreId)
         }
       })
     }
@@ -146,14 +147,17 @@ export default function StuffDetail() {
       form.setValue('saleStoreId', '')
       form.setValue('saleStoreName', '')
     } else {
-      form.setValue('saleStoreId', key)
+      const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
-      form.setValue('saleStoreName', key)
+      form.setValue('saleStoreId', key.target.value)
+      form.setValue('saleStoreName', name)
     }
   }
 
   //2차점 변경 이벤트
   const onSelectionChange2 = (key) => {
-    console.log(key)
+    const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
+    form.setValue('otherSaleStoreId', key.target.value)
+    form.setValue('otherSaleStoreNm', name)
   }
   // 우편번호 숫자만 체크
   const _zipNo = watch('zipNo')
@@ -187,17 +191,19 @@ export default function StuffDetail() {
   const _objectName = watch('objectName')
   const _objectNameOmit = watch('objectNameOmit')
   const _saleStoreId = watch('saleStoreId')
+  const _otherSaleStoreId = watch('otherSaleStoreId')
   const _prefId = watch('prefId')
   const _address = watch('address')
   const _powerSimArea = watch('powerSimArea')
   const _windSpeed = watch('windSpeed')
   const _snowCover = watch('snowCover')
   const _installHeight = watch('installHeight')
+
   useEffect(() => {
     // console.log('mode:::::', editMode)
     if (editMode === 'NEW') {
       const formData = form.getValues()
-      // console.log('폼::::::::::::', formData)
+      console.log('폼::::::::::::', formData)
       let errors = {}
       if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
         errors.dispCompanyName = true
@@ -212,6 +218,10 @@ export default function StuffDetail() {
         errors.saleStoreId = true
       }
 
+      // if (!_otherSaleStoreId) {
+      //   errors.otherSaleStoreId = true
+      // }
+
       if (!_zipNo || _zipNo.length != 7) {
         errors.zipCode = true
       }
@@ -240,12 +250,25 @@ export default function StuffDetail() {
         errors.installHeight = true
       }
 
-      // console.log('errors::', errors)
+      console.log('errors::', errors)
       setIsFormValid(Object.keys(errors).length === 0)
     } else {
       // console.log('상세일때 폼체크')
     }
-  }, [_dispCompanyName, _objectName, _objectNameOmit, _saleStoreId, _zipNo, _prefId, _address, _powerSimArea, _windSpeed, _snowCover, _installHeight])
+  }, [
+    _dispCompanyName,
+    _objectName,
+    _objectNameOmit,
+    _saleStoreId,
+    // _otherSaleStoreId,
+    _zipNo,
+    _prefId,
+    _address,
+    _powerSimArea,
+    _windSpeed,
+    _snowCover,
+    _installHeight,
+  ])
 
   // 주소검색 API
   const onSearchPostNumber = () => {
@@ -257,7 +280,7 @@ export default function StuffDetail() {
       //9302226
       if (res.status === 200) {
         if (res.results != null) {
-          // console.log('주소검색::', res.results)
+          console.log('주소검색::', res.results)
           // console.log('prefcode::', res.results[0].prefcode)
           // console.log('address::', res.results[0].address2 + res.results[0].address3)
           setPrefValue(res.results[0].prefcode)
@@ -287,7 +310,7 @@ export default function StuffDetail() {
       // /api/object/prefecture/도도부현코드/list
       get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
         if (!isEmptyArray(res)) {
-          // console.log('발전시뮬레이션::::::::', res)
+          console.log('발전량 시뮬레이션::::::::', res)
           setPowerSimAreaList(res)
         }
       })
@@ -328,7 +351,6 @@ export default function StuffDetail() {
   // 임시저장
   const onTempSave = async () => {
     const formData = form.getValues()
-    //console.log('임시저장::::::::', formData)
 
     const params = {
       saleStoreId: formData.saleStoreId,
@@ -348,8 +370,8 @@ export default function StuffDetail() {
       snowCover: formData.snowCover,
       surfaceType: formData.surfaceType,
       powerConTerms: formData.powerConTerms,
-      saltAreaChk: formData.saltAreaChk,
       coldAreaChk: formData.coldAreaChk,
+      saltAreaChk: formData.saltAreaChk,
       tempFlg: '1',
       workNo: null,
       workName: null,
@@ -364,8 +386,9 @@ export default function StuffDetail() {
   // 발전량 시뮬레이션 변경
   const handlePowerSimAreaOnChange = (e) => {
     // console.log('가지고있는 도도부현코드:::::::::', prefValue)
-    // console.log('발전량시뮬레이션변경:::::::::', e.target.value)
+    console.log('발전량시뮬레이션변경:::::::::', e.target.value)
-    //값 set해주고 그거 useEffect로 api호출
+    form.setValue('powerSimArea', e.target.value)
+    //값 set해주고 그거 useEffect로 기준풍속, 수직적설량 api호출
   }
 
   // 물건삭제
@@ -426,7 +449,7 @@ export default function StuffDetail() {
                           <input type="text" className="input-light" {...form.register('objectName')} />
                         </div>
                         <div className="select-wrap" style={{ width: '120px' }}>
-                          <select name="objectNameOmit" {...register('objectNameOmit')}>
+                          <select className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
                             <option value="">경칭공통코드선택</option>
                             <option value="11">경칭11</option>
                             <option value="22">경칭22</option>
@@ -457,16 +480,20 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="select-wrap mr5" style={{ width: '567px' }}>
-                          <select className="select-light" name="" id=""></select>
+                          {saleStoreList?.length > 0 && (
+                            <select className="select-light" onChange={onSelectionChange} value={form.watch('saleStoreId')}>
+                              {saleStoreList.map((row) => {
+                                return (
+                                  <option key={row.saleStoreLevel} value={row.saleStoreId}>
+                                    {row.saleStoreName}
+                                  </option>
+                                )
+                              })}
+                            </select>
+                          )}
                         </div>
                         <div className="input-wrap" style={{ width: '216px' }}>
-                          <input
+                          <input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
-                            type="text"
-                            className="input-light"
-                            value={form.watch('saleStoreName')}
-                            {...form.register('saleStoreName')}
-                            readOnly
-                          />
                         </div>
                       </div>
                     </td>
@@ -474,20 +501,34 @@ export default function StuffDetail() {
                   <tr>
                     <th>
                       <div className="flx-box">
-                        <div className="title">
+                        <div className="title">2차 판매점명 / ID</div>
-                          2차 판매점명 / ID <span className="important">*</span>
-                        </div>
                         <div className="tooltips"></div>
                       </div>
                     </th>
                     <td>
                       <div className="flx-box">
                         <div className="select-wrap mr5" style={{ width: '567px' }}>
-                          <select className="select-light" name="" id=""></select>
+                          {otherSaleStoreList?.length > 0 && (
+                            <select className="select-light" onChange={onSelectionChange2} value={form.watch('otherSaleStoreId')}>
+                              {otherSaleStoreList.map((row) => {
+                                return (
+                                  <option key={row.saleStoreId} value={row.saleStoreId} text={row.saleStoreName}>
+                                    {row.saleStoreName}
+                                  </option>
+                                )
+                              })}
+                            </select>
+                          )}
+                        </div>
+                        <div className="input-wrap" style={{ width: '216px' }}>
+                          <input
+                            type="text"
+                            className="input-light"
+                            value={form.watch('otherSaleStoreId')}
+                            {...form.register('otherSaleStoreId')}
+                            readOnly
+                          />
                         </div>
-                      </div>
-                      <div className="input-wrap" style={{ width: '216px' }}>
-                        <input type="text" className="input-ligth" readOnly defaultValue={'선택한2차점 판매점명찍기 예정'} />
                       </div>
                     </td>
                   </tr>
@@ -522,6 +563,7 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
+                          <input type="text" className="input-light" value={form.watch('prefName')} {...form.register('prefName')} readOnly />
                           {/* {prefCodeList?.length > 0 && (
                             <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
                               {prefCodeList.map((row) => {
@@ -529,6 +571,11 @@ export default function StuffDetail() {
                               })}
                             </Select>
                           )} */}
+                          {/* {prefCodeList?.length > 0 && (
+                            <select>
+                              <option value=""></option>
+                            </select>
+                          )} */}
                         </div>
                         <div className="input-wrap mr5" style={{ width: '580px' }}>
                           <input type="text" className="input-light" value={form.watch('address')} {...form.register('address')} />
@@ -541,7 +588,19 @@ export default function StuffDetail() {
                       발전량시뮬레이션지역 <span className="important">*</span>
                     </th>
                     <td>
-                      <div className="select-wrap" style={{ width: '200px' }}></div>
+                      <div className="select-wrap" style={{ width: '200px' }}>
+                        {powerSimAreaList?.length > 0 && (
+                          <select className="select-light" name="powerSimArea" onChange={handlePowerSimAreaOnChange}>
+                            {powerSimAreaList.map((row) => {
+                              return (
+                                <option key={row.prefName} value={row.prefId}>
+                                  {row.prefName}
+                                </option>
+                              )
+                            })}
+                          </select>
+                        )}
+                      </div>
                     </td>
                   </tr>
                   <tr>
@@ -568,11 +627,17 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr10" style={{ width: '200px' }}></div>
+                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                          <select className="select-light" name="snowCover" {...register('snowCover')}>
+                            <option value="">수직적설량코드?</option>
+                            <option value="30">30</option>
+                            <option value="40">40</option>
+                          </select>
+                        </div>
                         <span className="mr10">cm</span>
                         <div className="d-check-box light">
-                          <input type="checkbox" />
+                          <input type="checkbox" id="coldAreaChk" {...form.register('coldAreaChk')} />
-                          <label htmlFor="">한랭지대책시행</label>
+                          <label htmlFor="coldAreaChk">한랭지대책시행</label>
                         </div>
                       </div>
                     </td>
@@ -592,8 +657,8 @@ export default function StuffDetail() {
                           <label htmlFor="surfaceType1">Ⅱ</label>
                         </div>
                         <div className="d-check-box light mr5">
-                          <input type="checkbox" />
+                          <input type="checkbox" id="saltAreaChk" {...form.register('saltAreaChk')} />
-                          <label htmlFor="">염해지역용아이템사용</label>
+                          <label htmlFor="saltAreaChk">염해지역용아이템사용</label>
                         </div>
                         <div className="tooltips"></div>
                       </div>