물건현황 getMessage 적용

This commit is contained in:
basssy 2024-09-10 17:37:41 +09:00
parent 7697bfeca0
commit 3b2a756389
5 changed files with 220 additions and 91 deletions

View File

@ -4,8 +4,8 @@ import React, { useEffect, useState, useRef } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { Button } from '@nextui-org/react'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import StuffQGrid from './StuffQGrid'
import { useI18n } from '@/locales/client'
import { useRecoilValue } from 'recoil'
import { stuffSearchState } from '@/store/stuffAtom'
import { queryStringFormatter } from '@/util/common-utils'
@ -15,10 +15,11 @@ dayjs.extend(isLeapYear)
export default function Stuff() {
const stuffSearchParams = useRecoilValue(stuffSearchState)
const { getMessage } = useMessage()
const [curPage, setCurPage] = useState(1) //
const [size, setSize] = useState(100) //
const { get, del } = useAxios()
const gridRef = useRef()
const lang = useI18n()
const [gridCount, setGridCount] = useState(0)
const [selectedRowData, setSelectedRowData] = useState([])
@ -47,7 +48,7 @@ export default function Stuff() {
gridColumns: [
{
field: 'lastEditDatetime',
headerName: lang('stuff.gridHeader.lastEditDatetime'),
headerName: getMessage('stuff.gridHeader.lastEditDatetime'),
headerCheckboxSelection: true,
headerCheckboxSelectionCurrentPageOnly: true, //
checkboxSelection: true,
@ -73,7 +74,7 @@ export default function Stuff() {
},
{
field: 'objectNo',
headerName: lang('stuff.gridHeader.objectNo'),
headerName: getMessage('stuff.gridHeader.objectNo'),
// headerClass: 'centered', //_test.scss
cellRenderer: function (params) {
if (params.data.objectNo) {
@ -100,22 +101,22 @@ export default function Stuff() {
},
{
field: 'planTotCnt',
headerName: lang('stuff.gridHeader.planTotCnt'),
headerName: getMessage('stuff.gridHeader.planTotCnt'),
cellStyle: { textAlign: 'right' },
},
{ field: 'objectName', headerName: lang('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
{ field: 'objectName', headerName: getMessage('stuff.gridHeader.objectName'), cellStyle: { textAlign: 'left' } },
{
field: 'saleStoreId',
headerName: lang('stuff.gridHeader.saleStoreId'),
headerName: getMessage('stuff.gridHeader.saleStoreId'),
cellStyle: { textAlign: 'left' },
},
{ field: 'saleStoreName', headerName: lang('stuff.gridHeader.saleStoreName'), cellStyle: { textAlign: 'left' } },
{ field: 'address', headerName: lang('stuff.gridHeader.address'), cellStyle: { textAlign: 'left' } },
{ field: 'dispCompanyName', headerName: lang('stuff.gridHeader.dispCompanyName'), cellStyle: { textAlign: 'left' } },
{ field: 'receiveUser', headerName: lang('stuff.gridHeader.receiveUser'), cellStyle: { textAlign: 'left' } },
{ field: 'saleStoreName', headerName: getMessage('stuff.gridHeader.saleStoreName'), cellStyle: { textAlign: 'left' } },
{ field: 'address', headerName: getMessage('stuff.gridHeader.address'), cellStyle: { textAlign: 'left' } },
{ field: 'dispCompanyName', headerName: getMessage('stuff.gridHeader.dispCompanyName'), cellStyle: { textAlign: 'left' } },
{ field: 'receiveUser', headerName: getMessage('stuff.gridHeader.receiveUser'), cellStyle: { textAlign: 'left' } },
{
field: 'specDate',
headerName: lang('stuff.gridHeader.specDate'),
headerName: getMessage('stuff.gridHeader.specDate'),
valueFormatter: function (params) {
if (params.value) {
return dayjs(params?.value).format('YYYY.MM.DD')
@ -127,7 +128,7 @@ export default function Stuff() {
},
{
field: 'createDatetime',
headerName: lang('stuff.gridHeader.createDatetime'),
headerName: getMessage('stuff.gridHeader.createDatetime'),
valueFormatter: function (params) {
if (params.value) {
return dayjs(params?.value).format('YYYY.MM.DD')
@ -264,12 +265,30 @@ export default function Stuff() {
schDateType: 'U',
schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
startRow: (curPage - 1) * size + 1,
endRow: curPage * size,
}
async function fetchData() {
console.log('화면진입:::::::::::::', params)
console.log('현재페이지::::::', curPage)
console.log('페이지당 게시물수::::::', size)
//api startRow, endRow
// let startRow
// let endRow
// startRow = (curPage - 1) * size + 1
// endRow = curPage * size
// console.log('startrow::', startRow)
// console.log('endRow::', endRow)
// let curPage
// let totalpage
// let totalCount
// let size
// let pageCount
const apiUrl = `/api/object/v1.0/object?saleStoreId=201TES01&${queryStringFormatter(params)}`
// console.log('apiUrl::', apiUrl)
await get({
url: apiUrl,

View File

@ -2,14 +2,46 @@
import React, { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem, Select, SelectItem, Checkbox, Textarea } from '@nextui-org/react'
import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem, Select, SelectItem, Checkbox, Textarea, button } from '@nextui-org/react'
import Link from 'next/link'
import { get } from '@/lib/Axios'
import { queryStringFormatter } from '@/util/common-utils'
import dayjs from 'dayjs'
import { useForm } from 'react-hook-form'
export default function StuffDetail() {
const router = useRouter()
const searchParams = useSearchParams()
//form
const formInitValue = {
// T...() R...()
dispCompanyName: '', //
objectStatusId: '0', //(:0 : 1)
objectName: '', //
objectNameOmit: '', //
objectNameKana: '', //
saleStoreId: '', //ID
saleStoreName: '', //
zipNo: '', //
prefId: '', //
address: '', //
powerSimArea: '', //
windSpeed: '', //
snowCover: '', //
coldAreaChk: false, //
surfaceType: '', //( / )
saltAreaChk: false, //
installHeight: '', //
powerConTerms: '', //
remark: '', //
tempFlag: 'T', //(1) (0)
}
const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
defaultValues: formInitValue,
})
const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
const [receiveUser, setReceiveUser] = useState('') //
const [name2, setName2] = useState('') //
const [name3, setName3] = useState('') //
@ -25,7 +57,7 @@ export default function StuffDetail() {
const [isFormValid, setIsFormValid] = useState(false) //,
const [testSelOption, setTestSelOption] = useState([]) //
const [autoSelectValue, setAutoSelectValue] = useState('') //
const [buttonValid, setButtonValid] = useState(true) //
const [buttonValid, setButtonValid] = useState(false) //
const [isSelected, setIsSelected] = useState(false) //
const [isSelected2, setIsSelected2] = useState(false) //
const [gubun2, setGubun2] = useState('1') //
@ -33,47 +65,50 @@ export default function StuffDetail() {
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 [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(() => {
// console.log(':::::::::', searchParams.get('objectNo'))
// console.log('::::', objectNo)
console.log('물건번호::::', objectNo)
if (objectNo) {
console.log('상세::')
// console.log('::', objectNo)
setEditMode('EDIT')
//http://localhost:8080/api/object/v1.0/object/R201TES01240906007/1
if (objectNo.substring(0, 1) === 'R') {
setIsFormValid(true)
}
// 1
//API
get({ url: `/api/object/v1.0/object/${objectNo}/1` }).then((res) => {
if (res != null) {
// console.log('res:::::::', res)
setDetailData(res)
//setTestSelOption(res)
}
})
} else {
console.log('신규:::')
}
}, [objectNo])
useEffect(() => {
validateForm()
// validateForm()
}, [receiveUser, name2, name3, gubun, sel, autoSelectValue, zipCode, sel2, sel3, name5, sel4])
//
const textTypeHandler = (e) => {
//\D () , [^0-9]
if (!e.target.value.match(/\D/g)) {
setZipCode(e.target.value)
const _zipNo = watch('zipNo')
useEffect(() => {
console.log('실시간이니:::::', _zipNo)
if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
console.log('벨리통과했군')
setButtonValid(true)
} else {
setButtonValid(false)
}
}
}, [_zipNo])
//
const textTypeHandler2 = (e) => {
@ -127,28 +162,29 @@ export default function StuffDetail() {
errors.name5 = '수직적설량 is required.'
}
// console.log('errors::', errors)
console.log('errors::', errors)
setErrors(errors)
setIsFormValid(Object.keys(errors).length === 0)
}
// API
const onSearchPostNumber = () => {
if (!zipCode) {
return alert('우편번호 입력해')
}
const params = {
zipcode: zipCode,
zipcode: _zipNo,
}
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
console.log('우편API RES::::::::', res)
//7830060
if (res.status === 200) {
if (res.results.length > 0) {
setAddress1(res.results[0].address1)
setAddress2(res.results[0].address2)
setAddress3(res.results[0].address3)
setPrefCode(res.results[0].prefcode)
if (res.results?.length > 0) {
// setAddress1(res.results[0].address1)
// setAddress2(res.results[0].address2)
// setAddress3(res.results[0].address3)
// setPrefCode(res.results[0].prefcode)
// prefId: '', //
// address: '', //
form.setValue('prefId', res.results[0].prefcode)
form.setValue('address', res.results[0].address2 + res.results[0].address3)
} else {
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
}
@ -174,10 +210,90 @@ export default function StuffDetail() {
console.log('e:::::::', e.target.value)
}
//
const onValid = (data) => {
console.log('data::::::', data)
const formData = form.getValues()
//console.log('formData::::', formData)
const _dispCompanyName = watch('dispCompanyName')
const _objectStatusId = watch('objectStatusId')
const _objectNameOmit = watch('objectNameOmit')
const _zipno = watch('zipno')
console.log(_dispCompanyName)
console.log(_objectStatusId)
console.log(_objectNameOmit)
console.log(_zipno)
}
//
const onInvalid = (errors) => {
console.log('실패', errors)
}
return (
<>
{(editMode === 'NEW' && <div>신규:::::::::::</div>) || <div>상세:::::::::::</div>}
<div className="flex w-full flex-wrap md:flex-nowrap gap-4">
{(editMode === 'NEW' && (
<form onSubmit={handleSubmit(onValid, onInvalid)}>
<div>
<div>(*필수 입력항목)</div>
<div className="form-input">
<label>담당자*</label>
<input type="text" className="input-origin" {...form.register('dispCompanyName', { required: true })} />
</div>
<div className="form-input">
<label>물건구분/물건명*</label>
<input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
<label htmlFor="objectStatus0">신축</label>
<input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
<label htmlFor="objectStatus0">기축</label>
<input type="text" className="input-origin" {...form.register('objectName', { required: true })} />
<div className="flex w-full max-w-xs flex-col gap-2">
<select name="objectNameOmit" {...register('objectNameOmit', { 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>
<input type="text" className="input-origin" {...form.register('objectNameKana', { required: true })} />
</div>
<div className="form-input">
<label>1 판매점명 / ID</label>
</div>
<div className="form-input">
<label>2 판매점명 / ID</label>
</div>
<div className="form-input">
<label>우편번호</label>
<input
type="text"
className="input-origin"
maxLength={7}
{...form.register('zipNo', {
required: true,
minLength: { value: 7, message: '7자리만가능' },
pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
})}
/>
<Button isDisabled={!buttonValid} onClick={onSearchPostNumber}>
주소검색
</Button>
*우편번호 7자리를 입력한 , 주소검색 버튼을 클릭해 주십시오
</div>
<div className="form-input">
<label>도도부현 / 주소</label>
<input type="text" className="input-origin" value={form.watch('address')} {...form.register('address')} />
</div>
</div>
<button type="submit">저장!!!!!!!!!</button>
</form>
)) || <div>상세:::::::::::</div>}
{/* <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
<div>
<span>물건번호</span>
<span>{objectNo}</span>
@ -200,36 +316,9 @@ export default function StuffDetail() {
<span>등록일</span>
<span></span>
</div>
</div>
<div>(*필수 입력항목)</div>
<div>
<span>담당자*</span>
<input type="text" placeholder="Kim Ji Young" defaultValue={detailData?.receiveUser} onChange={(e) => setReceiveUser(e.target.value)} />
</div>
<div>
<span>물건구분/물건명 *</span>
<input
type="radio"
name="radio_gubun"
id="radio_new"
value={'NEW'}
checked={gubun === 'NEW' ? true : false}
onChange={(e) => {
setGubun(e.target.value)
}}
/>
<label htmlFor="radio_new">신축</label>
<input
type="radio"
name="radio_gubun"
id="radio_old"
value={'OLD'}
checked={gubun === 'OLD' ? true : false}
onChange={(e) => {
setGubun(e.target.value)
}}
/>
<label htmlFor="radio_old">기축</label>
</div> */}
{/* <div>(* )</div>
<div>
<input type="text" placeholder="물건명" value={name2} onChange={(e) => setName2(e.target.value)} />
</div>
@ -244,8 +333,8 @@ export default function StuffDetail() {
<span>물건명 후리가나</span>
<input type="text" placeholder="물건명 후리가나" value={name3} onChange={(e) => setName3(e.target.value)} />
</div>
</div>
<div>
</div> */}
{/* <div>
<span>판매점명 /ID *</span>
<div className="flex w-full max-w-xs flex-col gap-2">
<Autocomplete
@ -258,21 +347,20 @@ export default function StuffDetail() {
{(option) => <AutocompleteItem key={option.id}>{option.name}</AutocompleteItem>}
</Autocomplete>
</div>
</div>
<div>
</div> */}
{/* <div>
<span>우편번호*</span>
<input type="text" placeholder="숫자7자리 입력여부 체크" value={zipCode} maxLength="7" onChange={textTypeHandler} />
<Button onClick={onSearchPostNumber} isDisabled={buttonValid}>
주소검색
</Button>
*우편번호 7자리를 입력한 , 주소검색 버튼을 클릭해 주십시오
</div>
<div>
</div> */}
{/* <div>
<span>도도부현 / 주소*</span>
{/* <input type="text" placeholder="주소검색 결과 select로 변경하기 공통코드 api리턴값 selected" disabled /> */}
<input type="text" placeholder="주소검색 결과 주소 셋팅 칸" value={address2 + address3} onChange={changeAddress2} />
</div>
<div>
</div> */}
{/* <div>
<span>발전량시뮬레이션지역*</span>
<Select label="발전량시뮬레이션지역" className="max-w-xs" onChange={(e) => setSel2(e.target.value)}>
<SelectItem key="1">111</SelectItem>
@ -295,8 +383,8 @@ export default function StuffDetail() {
<Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
한랭지대책시행
</Checkbox>
</div>
<div>
</div> */}
{/* <div>
<span>면조도구분*</span>
<input
type="radio"
@ -381,8 +469,7 @@ export default function StuffDetail() {
)}
<Link href="/management/stuff">
<button type="button">물건목록</button>
</Link>
{/* <Button onPress={moveList}>물건목록2</Button> */}
</Link> */}
</>
)
}

View File

@ -82,6 +82,7 @@ export default function StuffQGrid(props) {
}, [])
const onGridReady = useCallback((event) => {
// console.log('event:::', event)
// width
event.api.sizeColumnsToFit()
}, [])

View File

@ -86,5 +86,16 @@
"common.message.backToG3": "Back to G3処理実行しますか",
"common.message.writeToConfirm": "作成解除を実行しますか?",
"common.message.password.init.success": "パスワード [{0}] に初期化されました。",
"common.message.no.edit.save": "この文書は変更できません。"
"common.message.no.edit.save": "この文書は変更できません。",
"stuff.gridHeader.lastEditDatetime": "갱신일시",
"stuff.gridHeader.objectNo": "물건번호",
"stuff.gridHeader.planTotCnt": "플랜 수",
"stuff.gridHeader.objectName": "물건명",
"stuff.gridHeader.saleStoreId": "대리점ID",
"stuff.gridHeader.saleStoreName": "대리점명",
"stuff.gridHeader.address": "물건주소",
"stuff.gridHeader.dispCompanyName": "견적처",
"stuff.gridHeader.receiveUser": "담당자",
"stuff.gridHeader.specDate": "사양확인",
"stuff.gridHeader.createDatetime": "등록일"
}

View File

@ -86,5 +86,16 @@
"common.message.backToG3": "Back to G3 처리를 실행하시겠습니까?",
"common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
"common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
"common.message.no.edit.save": "This document cannot be changed."
"common.message.no.edit.save": "This document cannot be changed.",
"stuff.gridHeader.lastEditDatetime": "갱신일시",
"stuff.gridHeader.objectNo": "물건번호",
"stuff.gridHeader.planTotCnt": "플랜 수",
"stuff.gridHeader.objectName": "물건명",
"stuff.gridHeader.saleStoreId": "대리점ID",
"stuff.gridHeader.saleStoreName": "대리점명",
"stuff.gridHeader.address": "물건주소",
"stuff.gridHeader.dispCompanyName": "견적처",
"stuff.gridHeader.receiveUser": "담당자",
"stuff.gridHeader.specDate": "사양확인",
"stuff.gridHeader.createDatetime": "등록일"
}