물건현황

src/components/management/StuffDetail.jsx

@@ -44,45 +44,39 @@ export default function StuffDetail() {
 
   const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
   const [prefValue, setPrefValue] = useState('')
+  const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
 
-  const [receiveUser, setReceiveUser] = useState('') //담당자
+  const [powerSimAreaList, setPowerSimAreaList] = useState([]) //발전시뮬레이션 리스트
-  const [name2, setName2] = useState('') //물건명
-  const [name3, setName3] = useState('') //물건명후리가나
-  const [zipCode, setZipCode] = useState('') //우편번호
-  const [name5, setName5] = useState('') //수직적설량
-  const [gubun, setGubun] = useState('NEW') //신축 기축
-  const [sel, setSel] = useState('') //경칭선택
-  const [sel2, setSel2] = useState('') //발전량시뮬레이션지역
-  const [sel3, setSel3] = useState('') //기준풍속
-  const [sel4, setSel4] = useState('') //설치높이
 
-  const [errors, setErrors] = useState({})
   const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
-  const [testSelOption, setTestSelOption] = useState([]) // 테스트용
-  const [autoSelectValue, setAutoSelectValue] = useState('') //판매점명 자동완성
   const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
-  const [isSelected, setIsSelected] = useState(false) //한랭지대첵 체크박스
-  const [isSelected2, setIsSelected2] = useState(false) //염해지역용아이템사용 체크박스
-  const [gubun2, setGubun2] = useState('1') //면조도구분 라디오
-  const [gubun3, setGubun3] = useState('A') //계약조건 라디오
-  const [memo, setMemo] = useState('') //메모
   const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
 
-  // const [address1, setAddress1] = useState('') //우편API리턴 도도부현명
-  // const [address2, setAddress2] = useState('') //우편API리턴 시구정촌명
-  // const [address3, setAddress3] = useState('') //우편API리턴 마을 지역명
-  // const [prefCode, setPrefCode] = useState(1) //우편API prefcode
-
   const [editMode, setEditMode] = useState('NEW')
   const [detailData, setDetailData] = useState({})
 
   useEffect(() => {
+    // 도도부현API
     get({ url: '/api/object/prefecture/list' }).then((res) => {
       if (!isEmptyArray(res)) {
-        console.log('도도부현API 결과:::', res)
+        //console.log('도도부현API 결과:::', res)
         setPrefCodeList(res)
       }
     })
+    // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
+    // salesStoreLevel 추가되면 붙여서 보내기
+    // 임시 1차점 판매점코드 saleStoreId=201TES01
+    // T01
+    get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
+      if (!isEmptyArray(res)) {
+        console.log('판매점 결과:::::', res)
+        setSaleStoreList(res)
+        //1차 판매점 자동완성 값 셋팅
+        form.setValue('saleStoreId', res[0].saleStoreId)
+        //1차 판매점 번호 셋팅
+        form.setValue('saleStoreName', res[0].saleStoreId)
+      }
+    })
     // console.log('상세화면진입:::::::::', searchParams.get('objectNo'))
     // console.log('물건번호::::', objectNo)
 
@@ -100,10 +94,16 @@ export default function StuffDetail() {
     }
   }, [objectNo])
 
-  useEffect(() => {
+  //1차점 변경 이벤트
-    // validateForm()
+  const onSelectionChange = (key) => {
-  }, [receiveUser, name2, name3, gubun, sel, autoSelectValue, zipCode, sel2, sel3, name5, sel4])
+    if (key == null) {
-
+      form.setValue('saleStoreId', '')
+      form.setValue('saleStoreName', '')
+    } else {
+      form.setValue('saleStoreId', key)
+      form.setValue('saleStoreName', key)
+    }
+  }
   // 우편번호 숫자만 체크
   const _zipNo = watch('zipNo')
   useEffect(() => {
@@ -114,62 +114,82 @@ export default function StuffDetail() {
     }
   }, [_zipNo])
 
-  // 수직적설량 숫자만
+  //임시저장 저장 버튼 컨트롤
-  const textTypeHandler2 = (e) => {
+  // dispCompanyName: '', //담당자
-    if (!e.target.value.match(/[^0-9]/g)) {
+  // objectName: '', //물건명
-      setName5(e.target.value)
+  // objectNameOmit: '', //경칭선택
-    }
+  // saleStoreId: '', //판매점ID
-  }
+  // zipNo: '', //우편번호
-  const validateForm = () => {
+  // prefId: '', //도도부현
+  // address: '', //주소
+  // powerSimArea: '', //발전량시뮬레이션지역
+  // windSpeed: '', //기준풍속
+  // snowCover: '', //수직적설량
+  // coldAreaChk: false, //한랭지대책시행
+  // surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
+  // saltAreaChk: false, //염해지역용아이템사용
+  // installHeight: '', //설치높이
+  // powerConTerms: '0', //계약조건(잉여 / 전량)
+  // remark: '', //메모
+  // tempFlag: 'T', //임시저장(1) 저장(0)
+  const _dispCompanyName = watch('dispCompanyName')
+  const _objectName = watch('objectName')
+  const _objectNameOmit = watch('objectNameOmit')
+  const _saleStoreId = watch('saleStoreId')
+  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(() => {
+    const formData = form.getValues()
+    console.log('폼::::::::::::', formData)
     let errors = {}
-
+    if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
-    if (!receiveUser || receiveUser.trim().length === 0) {
+      errors.dispCompanyName = true
-      errors.receiveUser = '담당자 is required.'
+    }
+    if (!_objectName || _objectName.trim().length === 0) {
+      errors.objectName = true
+    }
+    if (!_objectNameOmit) {
+      errors.objectNameOmit = true
+    }
+    if (!_saleStoreId) {
+      errors.saleStoreId = true
     }
 
-    if (!name2 || name2.trim().length === 0) {
+    if (!_zipNo || _zipNo.length != 7) {
-      errors.name2 = '물건명 is required.'
+      errors.zipCode = true
     }
 
-    if (!name3 || name3.trim().length === 0) {
+    if (!_prefId) {
-      errors.name3 = '물건명후리가나 is required.'
+      errors.prefId = true
     }
 
-    if (!sel) {
+    if (!_address.trim().length === 0) {
-      errors.sel = '경칭선택 is required'
+      errors.address = true
     }
 
-    if (!sel2) {
+    if (!_powerSimArea) {
-      errors.sel2 = '발전량시뮬레이션지역 is required'
+      errors.powerSimArea = true
     }
 
-    if (!sel3) {
+    if (!_windSpeed) {
-      errors.sel3 = '기준풍속 is required'
+      errors.windSpeed = true
     }
 
-    if (!sel4) {
+    if (!_snowCover) {
-      errors.sel4 = '설치높이 is required'
+      errors.snowCover = true
     }
 
-    if (!autoSelectValue) {
+    if (!_installHeight) {
-      errors.autoSelectValue = '판매점ID자동완성 is required'
+      errors.installHeight = true
     }
 
-    if (!zipCode || zipCode.length != 7) {
+    // console.log('errors::', errors)
-      errors.zipCode = '우편번호 is required.'
-      setButtonValid(true)
-    } else {
-      setButtonValid(false)
-    }
-
-    if (!name5) {
-      errors.name5 = '수직적설량 is required.'
-    }
-
-    console.log('errors::', errors)
-    setErrors(errors)
     setIsFormValid(Object.keys(errors).length === 0)
-  }
+  }, [_dispCompanyName, _objectName, _objectNameOmit, _saleStoreId, _zipNo, _prefId, _address, _powerSimArea, _windSpeed, _snowCover, _installHeight])
 
   // 주소검색 API
   const onSearchPostNumber = () => {
@@ -179,9 +199,8 @@ export default function StuffDetail() {
     get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
       //7830060
       if (res.status === 200) {
-        console.log('res.results::', res.results)
         if (res.results != null) {
-          console.log('res.results::', res.results)
+          console.log('주소검색::', res.results)
           // prefId: '', //도도부현
           // address: '', //주소
           console.log('prefcode::', res.results[0].prefcode)
@@ -193,7 +212,10 @@ export default function StuffDetail() {
           alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
           form.setValue('prefId', '')
           form.setValue('address', '')
+          form.setValue('zipNo', '')
           setPrefValue('')
+          setPowerSimAreaList([])
+          form.setValue('powerSimArea', '')
         }
       } else {
         alert(res.message)
@@ -201,6 +223,21 @@ export default function StuffDetail() {
     })
   }
 
+  useEffect(() => {
+    if (prefValue !== '') {
+      console.log('우편번호 검색해서  도도부현골랐을때::::', prefValue)
+      // 발전시뮬레이션 지역 목록
+      // /api/object/prefecture/도도부현코드/list
+      get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
+        if (!isEmptyArray(res)) {
+          console.log('발전시뮬레이션::::::::', res)
+          setPowerSimAreaList(res)
+          // form.setValue('powerSimArea', res[0].prefId)
+        }
+      })
+    }
+  }, [prefValue])
+
   const onTempSave = () => {
     console.log('임시저장::', isFormValid)
   }
@@ -213,35 +250,33 @@ export default function StuffDetail() {
     router.push('/management/stuff')
   }
 
-  const changeAddress2 = (e) => {
-    console.log('e:::::::', e.target.value)
-  }
-
   //필수값 다 입력했을때
   const onValid = (data) => {
+    console.log('필수값 다 있고 저장')
     console.log('data::::::', data)
     const formData = form.getValues()
-    //console.log('formData::::', formData)
+    console.log('formData::::', formData)
-    const _dispCompanyName = watch('dispCompanyName')
+    // const _dispCompanyName = watch('dispCompanyName')
-    const _objectStatusId = watch('objectStatusId')
+    // const _objectStatusId = watch('objectStatusId')
-    const _objectNameOmit = watch('objectNameOmit')
+    // const _objectNameOmit = watch('objectNameOmit')
-    const _zipNo = watch('zipNo')
+    // const _zipNo = watch('zipNo')
-    const _prefId = watch('prefId')
+    // const _prefId = watch('prefId')
-    const _address = watch('address')
+    // const _address = watch('address')
-    const _coldAreaChk = watch('coldAreaChk')
+    // const _coldAreaChk = watch('coldAreaChk')
-    console.log(_dispCompanyName)
+    // console.log(_dispCompanyName)
-    console.log(_objectStatusId)
+    // console.log(_objectStatusId)
-    console.log(_objectNameOmit)
+    // console.log(_objectNameOmit)
-    console.log(_zipNo)
+    // console.log(_zipNo)
-    console.log(_prefId)
+    // console.log(_prefId)
-    console.log('prefValue::', prefValue)
+    // console.log('prefValue::', prefValue)
-    console.log(_address)
+    // console.log(_address)
-    console.log('_coldAreaChk::', _coldAreaChk)
+    // console.log('_coldAreaChk::', _coldAreaChk)
   }
 
-  //필수값 안넣었을때
+  //필수값 안넣었을때 임시저장
   const onInvalid = (errors) => {
-    console.log('실패', errors)
+    const formData = form.getValues()
+    console.log('임시저장formData::::', formData)
   }
 
   return (
@@ -276,6 +311,22 @@ export default function StuffDetail() {
             </div>
             <div className="form-input">
               <label>1차 판매점명 / ID</label>
+              <div className="flex w-full max-w-xs flex-col gap2">
+                {saleStoreList?.length > 0 && (
+                  <Autocomplete
+                    className="max-w-xs"
+                    defaultItems={saleStoreList}
+                    label="판매점ID자동완성"
+                    // selectedKey={saleStoreValue}
+                    selectedKey={form.watch('saleStoreId')}
+                    {...form.register('saleStoreId', { required: true })}
+                    onSelectionChange={onSelectionChange}
+                  >
+                    {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
+                  </Autocomplete>
+                )}
+                <input type="text" className="input-origin" value={form.watch('saleStoreName')} {...form.register('saleStoreName')} disabled />
+              </div>
             </div>
             <div className="form-input">
               <label>2차 판매점명 / ID</label>
@@ -313,9 +364,33 @@ export default function StuffDetail() {
             </div>
             <div className="form-input">
               <label>발전량시뮬레이션지역</label>
+              {powerSimAreaList?.length > 0 && (
+                <select name="powerSimArea" {...register('powerSimArea', { required: true })}>
+                  {powerSimAreaList.map((row) => {
+                    return (
+                      <option key={row.prefName} value={row.prefId}>
+                        {row.prefName}
+                      </option>
+                    )
+                  })}
+                </select>
+                // <Select className="max-w-xs" selectedKeys={form.watch('powerSimArea')} {...form.register('powerSimArea', { required: true })}>
+                //   {powerSimAreaList.map((row) => {
+                //     return <SelectItem key={row.prefName}>{row.prefName}</SelectItem>
+                //   })}
+                // </Select>
+              )}
             </div>
             <div className="form-input">
               <label>기준풍속</label>
+              <div className="flex w-full max-w-xs flex-col gap-2">
+                <select name="windSpeed" {...register('windSpeed', { required: true })}>
+                  <option value="">기준풍속</option>
+                  <option value="11">111</option>
+                  <option value="22">222</option>
+                  <option value="33">333</option>
+                </select>
+              </div>
             </div>
             <div className="form-input">
               <label>수직적설량</label>
@@ -354,7 +429,15 @@ export default function StuffDetail() {
               </Checkbox>
             </div>
             <div className="form-input">
-              <label>설치높이 installHeight</label>
+              <label>설치높이</label>
+              <div className="flex w-full max-w-xs flex-col gap-2">
+                <select name="installHeight" {...register('installHeight', { required: true })}>
+                  <option value="">설치높이</option>
+                  <option value="11">111</option>
+                  <option value="22">222</option>
+                  <option value="33">333</option>
+                </select>
+              </div>
             </div>
             <div className="form-input">
               <label>계약조건</label>
@@ -379,7 +462,14 @@ export default function StuffDetail() {
               />
             </div>
           </div>
-          <button type="submit">신규화면임시저장!!!!!!!!!</button>
+          {!isFormValid ? (
+            <>
+              <button type="submit">신규화면임시저장!!!!!!!!!</button>
+              <Button type="submit">신규화면임시저장!!!!!</Button>
+            </>
+          ) : (
+            <button type="submit">저장</button>
+          )}
         </form>
       )) || <div>상세:::::::::::</div>}