로그인화면, 물건현황
This commit is contained in:
parent
67f56df408
commit
d2ec45437d
@ -1,10 +1,11 @@
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { sessionStore } from '@/store/commonAtom'
|
||||
import { useRecoilValue, useRecoilState } from 'recoil'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function ChangePasswordPop() {
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
@ -12,7 +13,7 @@ export default function ChangePasswordPop() {
|
||||
const { patch } = useAxios(globalLocaleState)
|
||||
const { getMessage } = useMessage()
|
||||
const [sessionState, setSessionState] = useRecoilState(sessionStore)
|
||||
|
||||
const router = useRouter()
|
||||
const formInitValue = {
|
||||
password1: '',
|
||||
password2: '',
|
||||
@ -74,6 +75,8 @@ export default function ChangePasswordPop() {
|
||||
if (res.result.resultCode === 'S') {
|
||||
alert(getMessage('main.popup.login.success'))
|
||||
setSessionState({ ...sessionState, pwdInitYn: 'Y' })
|
||||
//메인으로 이동
|
||||
router.push('/')
|
||||
} else {
|
||||
alert(res.result.resultMsg)
|
||||
}
|
||||
@ -154,7 +157,6 @@ export default function ChangePasswordPop() {
|
||||
className="btn-origin grey"
|
||||
onClick={() => {
|
||||
router.push('/login')
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
{getMessage('main.popup.login.btn2')}
|
||||
|
||||
@ -76,16 +76,7 @@ export default function Stuff() {
|
||||
headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
|
||||
checkboxSelection: true,
|
||||
showDisabledCheckboxes: true,
|
||||
// .centered {
|
||||
// .ag-header-cell-label {
|
||||
// justify-content: center !important;
|
||||
// }
|
||||
// }
|
||||
cellStyle: { textAlign: 'center' },
|
||||
//suppressMovable: true, //헤더 못움직이게
|
||||
// width : 100
|
||||
// minWidth : 100
|
||||
// maxWidth : 100
|
||||
valueFormatter: function (params) {
|
||||
if (params.value) {
|
||||
return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
|
||||
@ -96,8 +87,8 @@ export default function Stuff() {
|
||||
},
|
||||
{
|
||||
field: 'objectNo',
|
||||
width: '180px',
|
||||
headerName: getMessage('stuff.gridHeader.objectNo'),
|
||||
// headerClass: 'centered', //_test.scss에 추가 테스트
|
||||
cellRenderer: function (params) {
|
||||
if (params.data.objectNo) {
|
||||
return (
|
||||
|
||||
@ -7,11 +7,16 @@ import Select from 'react-dropdown-select'
|
||||
import Link from 'next/link'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
|
||||
import { isEmptyArray } from '@/util/common-utils'
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { sessionStore } from '@/store/commonAtom'
|
||||
import FindAddressPop from './popup/FindAddressPop'
|
||||
import DesignRequestPop from './popup/DesignRequestPop'
|
||||
export default function StuffDetail() {
|
||||
const sessionState = useRecoilValue(sessionStore)
|
||||
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const { getMessage } = useMessage()
|
||||
@ -56,14 +61,18 @@ export default function StuffDetail() {
|
||||
const [prefValue, setPrefValue] = useState('')
|
||||
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
|
||||
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
|
||||
const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
|
||||
|
||||
const [areaIdList, setAreaIdList] = useState([]) //발전시뮬레이션 리스트
|
||||
|
||||
const [windSpeedList, setWindSpeedList] = useState([]) //기준풍속 리스트
|
||||
const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
|
||||
const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
|
||||
const [showButtonValid, setShowButtonValid] = useState(false) //주소검색 활성화 컨트롤
|
||||
const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
|
||||
|
||||
// const [] //1차판매점 자동완성 선택값
|
||||
// const [] //2차판매점 자동완성 선택값
|
||||
|
||||
const [editMode, setEditMode] = useState('NEW')
|
||||
const [detailData, setDetailData] = useState({})
|
||||
|
||||
@ -85,15 +94,15 @@ export default function StuffDetail() {
|
||||
// 도도부현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 - 판매점 목록 조회
|
||||
// 임시 1차점 판매점코드 saleStoreId=201TES01
|
||||
// T01
|
||||
//1차점 : X167
|
||||
get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
|
||||
// get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
|
||||
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
|
||||
if (!isEmptyArray(res)) {
|
||||
// console.log('판매점 결과:::::', res)
|
||||
setSaleStoreList(res)
|
||||
@ -111,32 +120,31 @@ export default function StuffDetail() {
|
||||
// 도도부현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 - 판매점 목록 조회
|
||||
// 임시 1차점 판매점코드 saleStoreId=201TES01
|
||||
// T01
|
||||
//1차점 : X167
|
||||
get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
|
||||
get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
|
||||
// get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
|
||||
if (!isEmptyArray(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('otherList:::::', otherList)
|
||||
|
||||
//1차점 셀렉트박스
|
||||
setSaleStoreList(firstList)
|
||||
//1차 판매점 자동완성 값 셋팅
|
||||
form.setValue('saleStoreId', firstList[0].saleStoreId)
|
||||
//form.setValue('saleStoreId', firstList[0].saleStoreId)
|
||||
//1차 판매점 번호 셋팅
|
||||
form.setValue('saleStoreName', firstList[0].saleStoreId)
|
||||
form.setValue('saleStoreName', firstList[0]?.saleStoreId)
|
||||
|
||||
//1차점 아닌 판매점 셀렉트박스
|
||||
setOriginOtherSaleStoreList(otherList)
|
||||
setOtherSaleStoreList(otherList)
|
||||
form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
|
||||
form.setValue('otherSaleStoreName', otherList[0].saleStoreId)
|
||||
// form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
|
||||
form.setValue('otherSaleStoreName', otherList[0]?.saleStoreId)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -144,32 +152,83 @@ export default function StuffDetail() {
|
||||
|
||||
//1차점 변경 이벤트
|
||||
const onSelectionChange = (key) => {
|
||||
if (key == null) {
|
||||
if (!isEmptyArray(key)) {
|
||||
setOtherSaleStoreList(otherSaleStoreList)
|
||||
form.setValue('saleStoreId', key[0].saleStoreId)
|
||||
form.setValue('saleStoreName', key[0].saleStoreId)
|
||||
|
||||
//선택한 1차점 정보로 2차점 list 추리기
|
||||
//長府工産株式会社 大阪支社
|
||||
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key[0].saleStoreId)
|
||||
setOtherSaleStoreList(newOtherSaleStoreList)
|
||||
} else {
|
||||
//X누름
|
||||
form.setValue('saleStoreId', '')
|
||||
form.setValue('saleStoreName', '')
|
||||
} else {
|
||||
const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
|
||||
form.setValue('saleStoreId', key.target.value)
|
||||
form.setValue('saleStoreName', name)
|
||||
setOtherSaleStoreList(originOtherSaleStoreList)
|
||||
}
|
||||
}
|
||||
|
||||
//2차점 변경 이벤트
|
||||
const onSelectionChange2 = (key) => {
|
||||
const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
|
||||
form.setValue('otherSaleStoreId', key.target.value)
|
||||
form.setValue('otherSaleStoreNm', name)
|
||||
if (!isEmptyArray(key)) {
|
||||
form.setValue('otherSaleStoreId', key[0].saleStoreId)
|
||||
form.setValue('otherSaleStoreId', key[0].saleStoreId)
|
||||
} else {
|
||||
form.setValue('otherSaleStoreId', '')
|
||||
form.setValue('otherSaleStoreId', '')
|
||||
}
|
||||
}
|
||||
// 우편번호 숫자만 체크
|
||||
const _zipNo = watch('zipNo')
|
||||
useEffect(() => {
|
||||
if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
|
||||
setButtonValid(true)
|
||||
//setButtonValid(true)
|
||||
} else {
|
||||
setButtonValid(false)
|
||||
//setButtonValid(false)
|
||||
}
|
||||
}, [_zipNo])
|
||||
|
||||
//팝업에서 넘어온 우편정보
|
||||
const setZipInfo = (info) => {
|
||||
console.log('팝업에서 넘어온 데이타::::::::', info)
|
||||
|
||||
// const params = {
|
||||
// zipcode: _zipNo,
|
||||
// }
|
||||
|
||||
// get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
|
||||
// //7830060
|
||||
// //9302226
|
||||
// //0790177 3개짜리
|
||||
// if (res.status === 200) {
|
||||
// if (res.results != null) {
|
||||
// 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)
|
||||
// form.setValue('prefId', res.results[0].prefcode)
|
||||
// form.setValue('prefName', res.results[0].address1)
|
||||
// form.setValue('address', res.results[0].address2 + res.results[0].address3)
|
||||
// } else {
|
||||
// alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
|
||||
// form.setValue('prefId', '')
|
||||
// form.setValue('prefName', '')
|
||||
// form.setValue('address', '')
|
||||
// form.setValue('zipNo', '')
|
||||
// setPrefValue('')
|
||||
// setAreaIdList([])
|
||||
// form.setValue('areaId', '')
|
||||
// // form.setValue('areaName', '')
|
||||
// setWindSpeedList([])
|
||||
// form.setValue('windSpeed', '')
|
||||
// }
|
||||
// } else {
|
||||
// alert(res.message)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
//임시저장 저장 버튼 컨트롤
|
||||
// dispCompanyName: '', //담당자
|
||||
// objectName: '', //물건명
|
||||
@ -201,10 +260,10 @@ export default function StuffDetail() {
|
||||
const _installHeight = watch('installHeight')
|
||||
|
||||
useEffect(() => {
|
||||
// console.log('mode:::::', editMode)
|
||||
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
|
||||
@ -251,7 +310,7 @@ export default function StuffDetail() {
|
||||
errors.installHeight = true
|
||||
}
|
||||
|
||||
// console.log('errors::', errors)
|
||||
console.log('errors::', errors)
|
||||
setIsFormValid(Object.keys(errors).length === 0)
|
||||
} else {
|
||||
// console.log('상세일때 폼체크')
|
||||
@ -273,49 +332,21 @@ export default function StuffDetail() {
|
||||
|
||||
// 주소검색 API
|
||||
const onSearchPostNumber = () => {
|
||||
const params = {
|
||||
zipcode: _zipNo,
|
||||
}
|
||||
console.log('주소검색클릭!!')
|
||||
|
||||
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
|
||||
//7830060
|
||||
//9302226
|
||||
//0790177 3개짜리
|
||||
if (res.status === 200) {
|
||||
if (res.results != null) {
|
||||
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)
|
||||
form.setValue('prefId', res.results[0].prefcode)
|
||||
form.setValue('prefName', res.results[0].address1)
|
||||
form.setValue('address', res.results[0].address2 + res.results[0].address3)
|
||||
} else {
|
||||
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
|
||||
form.setValue('prefId', '')
|
||||
form.setValue('prefName', '')
|
||||
form.setValue('address', '')
|
||||
form.setValue('zipNo', '')
|
||||
setPrefValue('')
|
||||
setAreaIdList([])
|
||||
form.setValue('areaId', '')
|
||||
// form.setValue('areaName', '')
|
||||
setWindSpeedList([])
|
||||
form.setValue('windSpeed', '')
|
||||
}
|
||||
} else {
|
||||
alert(res.message)
|
||||
}
|
||||
})
|
||||
setShowButtonValid(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('우편번호검색해서 값이왔어:::::::::::', prefValue)
|
||||
if (prefValue !== '') {
|
||||
// 발전량시뮬레이션 지역 목록
|
||||
// /api/object/prefecture/도도부현코드/list
|
||||
get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
|
||||
if (!isEmptyArray(res)) {
|
||||
// console.log('발전량 시뮬레이션::::::::', res)
|
||||
console.log('발전량 시뮬레이션::::::::', res)
|
||||
//res에 areaId추가됨
|
||||
// form.setValue('areaId', res[0].areaId)
|
||||
form.setValue('areaId', res[0].prefId)
|
||||
form.setValue('areaName', res[0].prefName)
|
||||
setAreaIdList(res)
|
||||
@ -404,7 +435,7 @@ export default function StuffDetail() {
|
||||
workName: null,
|
||||
}
|
||||
console.log('임시저장params::', params)
|
||||
return
|
||||
// return
|
||||
await post({ url: '/api/object/save-object', data: params }).then((res) => {
|
||||
console.log('res::::::', res)
|
||||
})
|
||||
@ -498,18 +529,16 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||
{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 style={{ width: '567px', marginRight: '5px' }}>
|
||||
<Select
|
||||
options={saleStoreList}
|
||||
value={form.watch('saleStoreId')}
|
||||
onChange={onSelectionChange}
|
||||
labelField="saleStoreName"
|
||||
valueField="saleStoreId"
|
||||
searchBy="saleStoreName"
|
||||
clearable={true}
|
||||
></Select>
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '216px' }}>
|
||||
<input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
|
||||
@ -526,18 +555,17 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="select-wrap mr5" style={{ width: '567px' }}>
|
||||
{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 style={{ width: '567px', marginRight: '5px' }}>
|
||||
<Select
|
||||
options={otherSaleStoreList}
|
||||
value={form.watch('otherSaleStoreId')}
|
||||
labelField="saleStoreName"
|
||||
valueField="saleStoreId"
|
||||
searchBy="saleStoreName"
|
||||
clearable={true}
|
||||
onChange={onSelectionChange2}
|
||||
disabled={form.watch('saleStoreId') !== '' ? false : true}
|
||||
></Select>
|
||||
</div>
|
||||
<div className="input-wrap" style={{ width: '216px' }}>
|
||||
<input
|
||||
@ -558,20 +586,12 @@ export default function StuffDetail() {
|
||||
<td>
|
||||
<div className="flx-box">
|
||||
<div className="input-wrap mr5" style={{ width: '200px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-light"
|
||||
maxLength={7}
|
||||
{...form.register('zipNo', {
|
||||
minLength: { value: 7, message: '7자리만가능' },
|
||||
pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
|
||||
})}
|
||||
/>
|
||||
<input type="text" className="input-light" disabled />
|
||||
</div>
|
||||
<Button className="btn-origin grey" isDisabled={!buttonValid} onClick={onSearchPostNumber}>
|
||||
<Button className="btn-origin grey" onClick={onSearchPostNumber}>
|
||||
주소검색
|
||||
</Button>
|
||||
<div className="guide">*우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오</div>
|
||||
<div className="guide">*주소검색 버튼을 클릭한 후, 도도부현 정보를 선택해주십시오.</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -581,20 +601,16 @@ export default function StuffDetail() {
|
||||
</th>
|
||||
<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) => {
|
||||
return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
|
||||
})}
|
||||
</Select>
|
||||
)} */}
|
||||
{/* {prefCodeList?.length > 0 && (
|
||||
<select>
|
||||
<option value=""></option>
|
||||
<div className="select-wrap" style={{ width: '200px' }}>
|
||||
{prefCodeList?.length > 0 && (
|
||||
<select className="select-light" name="prefName" {...register('prefId')} disabled>
|
||||
{prefCodeList.map((row) => (
|
||||
<option key={row.prefId} value={row.prefId}>
|
||||
{row.prefName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)} */}
|
||||
)}
|
||||
</div>
|
||||
<div className="input-wrap mr5" style={{ width: '580px' }}>
|
||||
<input type="text" className="input-light" value={form.watch('address')} {...form.register('address')} />
|
||||
@ -644,8 +660,8 @@ export default function StuffDetail() {
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
<span>m/s이하</span>
|
||||
<button className="btn-origin grey mr5">풍속선택</button>
|
||||
<span className="mr10">m/s이하</span>
|
||||
<button className="btn-origin grey">풍속선택</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -784,6 +800,8 @@ export default function StuffDetail() {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{showButtonValid && <FindAddressPop setShowButtonValid={setShowButtonValid} zipInfo={setZipInfo} />}
|
||||
<DesignRequestPop />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -40,7 +40,6 @@ export default function StuffQGrid(props) {
|
||||
suppressMovable: true,
|
||||
resizable: false,
|
||||
suppressSizeToFit: false,
|
||||
headerClass: 'centered', //_test.scss에 추가 테스트
|
||||
}
|
||||
}, [])
|
||||
|
||||
@ -67,11 +66,7 @@ export default function StuffQGrid(props) {
|
||||
|
||||
//더블클릭
|
||||
const onCellDoubleClicked = useCallback((event) => {
|
||||
// if (event.column.colId === 'company') {
|
||||
// return
|
||||
// } else {
|
||||
props.getCellDoubleClicked(event)
|
||||
// }
|
||||
}, [])
|
||||
|
||||
//컨텐츠에 따라 컬럼넓이 자동조절
|
||||
@ -82,7 +77,6 @@ export default function StuffQGrid(props) {
|
||||
}, [])
|
||||
|
||||
const onGridReady = useCallback((event) => {
|
||||
// console.log('event:::', event)
|
||||
// 헤더 사이즈 조정 컬럼에 width값으로 계산
|
||||
event.api.sizeColumnsToFit()
|
||||
}, [])
|
||||
@ -92,6 +86,13 @@ export default function StuffQGrid(props) {
|
||||
gridData ? setRowData(gridData) : ''
|
||||
}, [gridData])
|
||||
|
||||
// 임시는 row색깔 구분
|
||||
const getRowClass = (row) => {
|
||||
if (row.data.objectNo.substring(0, 1) === 'T') {
|
||||
return 'important_row'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ag-theme-quartz" style={{ height: 500 }}>
|
||||
<AgGridReact
|
||||
@ -107,10 +108,10 @@ export default function StuffQGrid(props) {
|
||||
onSelectionChanged={onSelectionChanged}
|
||||
onCellDoubleClicked={onCellDoubleClicked}
|
||||
pagination={isPageable}
|
||||
//paginationPageSize={paginationPageSize}
|
||||
//paginationPageSizeSelector={paginationPageSizeSelector}
|
||||
autoSizeStrategy={autoSizeStrategy}
|
||||
overlayNoRowsTemplate={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
|
||||
// getRowStyle={getRowStyle}
|
||||
getRowClass={getRowClass}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -260,7 +260,8 @@ export default function StuffSearchCondition() {
|
||||
options={schSelSaleStoreList}
|
||||
value={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
|
||||
labelField="saleStoreName"
|
||||
valueField="saleStoreName"
|
||||
valueField="saleStoreId"
|
||||
searchBy="saleStoreName"
|
||||
onChange={onSelectionChange}
|
||||
clearable={true}
|
||||
onClearAll={handleClear}
|
||||
|
||||
5
src/components/management/popup/DesignRequestPop.jsx
Normal file
5
src/components/management/popup/DesignRequestPop.jsx
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function DesignRequestPop() {
|
||||
return <div></div>
|
||||
}
|
||||
111
src/components/management/popup/FindAddressPop.jsx
Normal file
111
src/components/management/popup/FindAddressPop.jsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { queryStringFormatter } from '@/util/common-utils'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { globalLocaleStore } from '@/store/localeAtom'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import FindAddressPopQGrid from './FindAddressPopQGrid'
|
||||
|
||||
export default function FindAddressPop(props) {
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
|
||||
const { get } = useAxios(globalLocaleState)
|
||||
const [prefId, setPrefId] = useState('')
|
||||
const [address1, setAddress1] = useState('')
|
||||
const [address2, setAddress2] = useState('')
|
||||
const [address3, setAddress3] = useState('')
|
||||
const gridRef = useRef()
|
||||
|
||||
const [gridProps, setGridProps] = useState({
|
||||
gridData: [],
|
||||
isPageable: false,
|
||||
gridColumns: [],
|
||||
})
|
||||
const formInitValue = {
|
||||
zipNo: '',
|
||||
}
|
||||
const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
|
||||
defaultValues: formInitValue,
|
||||
})
|
||||
|
||||
const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
|
||||
//우편번호 검색
|
||||
const searchPostNum = () => {
|
||||
// //7830060
|
||||
// //9302226
|
||||
// //0790177 3개짜리
|
||||
console.log(watch('zipNo'))
|
||||
const params = {
|
||||
zipcode: watch('zipNo'),
|
||||
}
|
||||
|
||||
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
|
||||
console.log('우편조회 API결과:::::', res)
|
||||
if (res.status === 200) {
|
||||
} else {
|
||||
alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
|
||||
}
|
||||
})
|
||||
}
|
||||
// 주소적용 클릭
|
||||
const zipInfo = () => {
|
||||
console.log('주소적용 클릭:::::::::')
|
||||
// setAddress3('3333')
|
||||
// setAddress3('4444')
|
||||
// setAddress3('5555')
|
||||
props.zipInfo({
|
||||
zipNo: '3434343',
|
||||
address1: '3333',
|
||||
address2: '4444',
|
||||
address3: '5555',
|
||||
})
|
||||
|
||||
props.setShowButtonValid(false)
|
||||
}
|
||||
|
||||
//숫자만
|
||||
const handleKeyUp = (e) => {
|
||||
let input = e.target
|
||||
input.value = input.value.replace(/[^0-9]/g, '')
|
||||
}
|
||||
return (
|
||||
<div className="modal-popup">
|
||||
<div className="modal-dialog middle">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h1 className="title">우편번호 郵便番号</h1>
|
||||
<button className="modal-close" onClick={() => props.setShowButtonValid(false)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-body-inner">
|
||||
<div className="address-input-wrap">
|
||||
<input
|
||||
type="text"
|
||||
className="address-input"
|
||||
maxLength={7}
|
||||
onKeyUp={handleKeyUp}
|
||||
{...form.register('zipNo')}
|
||||
placeholder="우편번호의 7자리를 입력하세요. 郵便番号の7桁を入力してください。"
|
||||
/>
|
||||
<button className="search-btn" onClick={searchPostNum}></button>
|
||||
</div>
|
||||
<div className="address-grid">
|
||||
<FindAddressPopQGrid {...gridProps} gridRef={gridRef} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-btn-wrap">
|
||||
<button className="btn-origin grey mr5" onClick={() => props.setShowButtonValid(false)}>
|
||||
닫다 閉じる
|
||||
</button>
|
||||
<button className="btn-origin navy " onClick={zipInfo}>
|
||||
주소적용 住所適用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
6
src/components/management/popup/FindAddressPopQGrid.jsx
Normal file
6
src/components/management/popup/FindAddressPopQGrid.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function FindAddressPopGrid(props) {
|
||||
const { gridData, gridColumns, isPageable = true, gridRef } = props
|
||||
return <div></div>
|
||||
}
|
||||
@ -1,64 +1,63 @@
|
||||
.q-grid{
|
||||
height: fit-content;
|
||||
.ag-theme-quartz {
|
||||
outline: none;
|
||||
border: none;
|
||||
--ag-border-radius: 0px;
|
||||
--ag-wrapper-border-radius: 0px;
|
||||
--ag-header-height: 40px;
|
||||
--ag-header-foreground-color: white;
|
||||
--ag-header-background-color: #5D6A76;
|
||||
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
|
||||
--ag-header-cell-moving-background-color: #5D6A76;
|
||||
.ag-root-wrapper{
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
}
|
||||
.ag-header{
|
||||
border-bottom: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ag-header-cell{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
.ag-header-cell-label{
|
||||
justify-content: center;
|
||||
}
|
||||
.ag-header-cell-resize{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ag-row{
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
&:nth-child(2n){
|
||||
background-color: #F7F9FA;
|
||||
}
|
||||
&.important_row{
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.ag-cell{
|
||||
font-size: 13px;
|
||||
color: #45576F;
|
||||
}
|
||||
.ag-icon-desc::before,
|
||||
.ag-icon-asc::before,
|
||||
.ag-icon-filter::before{
|
||||
color: #fff;
|
||||
}
|
||||
.q-grid {
|
||||
height: fit-content;
|
||||
.ag-theme-quartz {
|
||||
outline: none;
|
||||
border: none;
|
||||
--ag-border-radius: 0px;
|
||||
--ag-wrapper-border-radius: 0px;
|
||||
--ag-header-height: 40px;
|
||||
--ag-header-foreground-color: white;
|
||||
--ag-header-background-color: #5d6a76;
|
||||
// --ag-header-cell-hover-background-color: rgb(80, 40, 140);
|
||||
--ag-header-cell-moving-background-color: #5d6a76;
|
||||
.ag-root-wrapper {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.copy-ico-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy_ico{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.ag-header {
|
||||
border-bottom: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.ag-header-cell {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
.ag-header-cell-label {
|
||||
justify-content: center;
|
||||
}
|
||||
.ag-header-cell-resize {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.ag-row {
|
||||
border-bottom: 1px solid #ecf0f4;
|
||||
&:nth-child(2n) {
|
||||
background-color: #f7f9fa;
|
||||
}
|
||||
&.important_row {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.ag-cell {
|
||||
font-size: 13px;
|
||||
color: #45576f;
|
||||
}
|
||||
.ag-icon-desc::before,
|
||||
.ag-icon-asc::before,
|
||||
.ag-icon-filter::before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.copy-ico-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy_ico {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url(../../public/static/images/sub/copy_grid_ico.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user