물건현황 화면 페이징 적용중
This commit is contained in:
parent
07e11f3148
commit
63b500e0c0
@ -15,6 +15,7 @@ import { convertNumberToPriceDecimal } from '@/util/common-utils'
|
||||
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
||||
import KO from '@/locales/ko.json'
|
||||
import JA from '@/locales/ja.json'
|
||||
import QPagination from '../common/pagination/QPagination'
|
||||
import '@/styles/grid.scss'
|
||||
import { sessionStore } from '@/store/commonAtom'
|
||||
|
||||
@ -24,9 +25,9 @@ export default function Stuff() {
|
||||
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 [pageNo, setPageNo] = useState(1) //현재 페이지 번호
|
||||
const [pageSize, setPageSize] = useState(100) //페이지 당 게시물 수
|
||||
const [totalCount, setTotalCount] = useState(0) //총 갯수
|
||||
const [defaultSortType, setDefaultSortType] = useState('R')
|
||||
|
||||
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
||||
@ -62,10 +63,6 @@ export default function Stuff() {
|
||||
const [gridProps, setGridProps] = useState({
|
||||
gridData: [],
|
||||
isPageable: false,
|
||||
// sets 10 rows per page (default is 100)
|
||||
// paginationPageSize: 100,
|
||||
// allows the user to select the page size from a predefined list of page sizes
|
||||
// paginationPageSizeSelector: [100, 200, 300, 400],
|
||||
gridColumns: [
|
||||
{
|
||||
field: 'lastEditDatetime',
|
||||
@ -228,56 +225,42 @@ export default function Stuff() {
|
||||
// 진입시 그리드 데이터 조회
|
||||
useEffect(() => {
|
||||
if (isObjectNotEmpty(sessionState)) {
|
||||
//물건 메뉴 눌러서 최초 진입 sessionState
|
||||
if (stuffSearchParams?.code === 'S') {
|
||||
const params = {
|
||||
schObjectNo: '',
|
||||
schAddress: '',
|
||||
schObjectName: '',
|
||||
schSaleStoreName: '',
|
||||
schReceiveUser: '',
|
||||
schDispCompanyName: '',
|
||||
schDateType: 'U',
|
||||
schObjectNo: stuffSearchParams?.schObjectNo,
|
||||
schAddress: stuffSearchParams?.schAddress,
|
||||
schObjectName: stuffSearchParams?.schObjectName,
|
||||
schSaleStoreName: stuffSearchParams?.schSaleStoreName,
|
||||
schReceiveUser: stuffSearchParams?.schReceiveUser,
|
||||
schDispCompanyName: stuffSearchParams?.schDispCompanyName,
|
||||
schDateType: stuffSearchParams.schDateType,
|
||||
schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
|
||||
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
|
||||
startRow: (curPage - 1) * defaultSize + 1,
|
||||
endRow: curPage * defaultSize,
|
||||
startRow: (pageNo - 1) * pageSize + 1,
|
||||
endRow: pageNo * pageSize,
|
||||
schSelSaleStoreId: '',
|
||||
schSortType: 'R',
|
||||
schSortType: stuffSearchParams.schSortType,
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
//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
|
||||
|
||||
// console.log('화면진입 세션정보::::::::::', sessionState)
|
||||
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
|
||||
|
||||
await get({
|
||||
url: apiUrl,
|
||||
}).then((res) => {
|
||||
if (!isEmptyArray(res)) {
|
||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||
setGridCount(res[0].totCnt)
|
||||
setTotalCount(res[0].totCnt)
|
||||
}
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
} else {
|
||||
//메인화면에서 진입
|
||||
const params = {
|
||||
schObjectNo: '',
|
||||
schObjectNo: stuffSearchParams.schObjectNo,
|
||||
schAddress: '',
|
||||
schObjectName: '',
|
||||
schSaleStoreName: '',
|
||||
@ -286,30 +269,13 @@ 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) * defaultSize + 1,
|
||||
endRow: curPage * defaultSize,
|
||||
startRow: (pageNo - 1) * pageSize + 1,
|
||||
endRow: pageNo * pageSize,
|
||||
schSelSaleStoreId: '',
|
||||
schSortType: 'R',
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
//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
|
||||
|
||||
// console.log('화면진입 세션정보::::::::::', sessionState)
|
||||
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
|
||||
|
||||
await get({
|
||||
@ -317,34 +283,36 @@ export default function Stuff() {
|
||||
}).then((res) => {
|
||||
if (!isEmptyArray(res)) {
|
||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||
setGridCount(res[0].totCnt)
|
||||
setTotalCount(res[0].totCnt)
|
||||
}
|
||||
})
|
||||
}
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
}, [sessionState])
|
||||
}, [pageNo, sessionState])
|
||||
|
||||
useEffect(() => {
|
||||
if (stuffSearchParams?.code === 'E') {
|
||||
//console.log('조회누름::::::::', stuffSearchParams)
|
||||
stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
|
||||
stuffSearchParams.endRow = curPage * defaultSize
|
||||
//console.log('조회누름::::::::', stuffSearchParams, sessionState)
|
||||
// stuffSearchParams.startRow = (pageNo - 1) * pageSize + 1
|
||||
// stuffSearchParams.endRow = pageNo * pageSize
|
||||
stuffSearchParams.startRow = 1
|
||||
stuffSearchParams.endRow = 1 * pageSize
|
||||
stuffSearchParams.schSortType = defaultSortType
|
||||
|
||||
setPageNo(1)
|
||||
|
||||
async function fetchData() {
|
||||
// console.log('조회누름 세션정보:::::::::::::', sessionState)
|
||||
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||
await get({ url: apiUrl }).then((res) => {
|
||||
// console.log('검색조건 변경 조회 API결과:::::::', res)
|
||||
if (!isEmptyArray(res)) {
|
||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||
setGridCount(res[0].totCnt)
|
||||
setTotalCount(res[0].totCnt)
|
||||
} else {
|
||||
setGridProps({ ...gridProps, gridData: [], count: 0 })
|
||||
setGridCount(0)
|
||||
setTotalCount(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -354,53 +322,58 @@ export default function Stuff() {
|
||||
|
||||
//페이지 갯수 변경 이벤트
|
||||
const onChangePerPage = (e) => {
|
||||
let startRow = (curPage - 1) * e.target.value + 1
|
||||
let startRow = (1 - 1) * e.target.value + 1
|
||||
stuffSearchParams.startRow = startRow
|
||||
stuffSearchParams.endRow = curPage * e.target.value
|
||||
setDefaultSize(e.target.value)
|
||||
stuffSearchParams.endRow = 1 * e.target.value
|
||||
setPageSize(e.target.value)
|
||||
setStuffSearch({
|
||||
...stuffSearch,
|
||||
code: 'S',
|
||||
startRow: startRow,
|
||||
endRow: curPage * e.target.value,
|
||||
endRow: 1 * e.target.value,
|
||||
})
|
||||
// console.log('페이지 갯수 변경 때 셋팅된 검색조건:::', stuffSearchParams)
|
||||
// console.log('페이지 갯수 변경 때 sessionState:::', sessionState)
|
||||
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||
|
||||
setPageNo(1)
|
||||
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
|
||||
get({ url: apiUrl }).then((res) => {
|
||||
if (!isEmptyArray(res)) {
|
||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||
setGridCount(res[0].totCnt)
|
||||
setTotalCount(res[0].totCnt)
|
||||
} else {
|
||||
setGridProps({ ...gridProps, gridData: [], count: 0 })
|
||||
setGridCount(0)
|
||||
setTotalCount(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//최근 등록일 수정일 정렬 이벤트
|
||||
const onChangeSortType = (e) => {
|
||||
let startRow = (1 - 1) * pageSize + 1
|
||||
stuffSearchParams.startRow = startRow
|
||||
stuffSearchParams.endRow = 1 * pageSize
|
||||
|
||||
stuffSearchParams.schSortType = e.target.value
|
||||
// console.log('셋팅된 검색조건:::', stuffSearchParams)
|
||||
setDefaultSortType(e.target.value)
|
||||
setStuffSearch({
|
||||
...stuffSearch,
|
||||
code: 'S',
|
||||
startRow: startRow,
|
||||
endRow: 1 * pageSize,
|
||||
schSortType: e.target.value,
|
||||
})
|
||||
// console.log('정렬 변경시 세션정보::::::::::::', sessionState)
|
||||
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
|
||||
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||
|
||||
setPageNo(1)
|
||||
|
||||
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
|
||||
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
|
||||
get({ url: apiUrl }).then((res) => {
|
||||
if (!isEmptyArray(res)) {
|
||||
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
|
||||
setGridCount(res[0].totCnt)
|
||||
setTotalCount(res[0].totCnt)
|
||||
} else {
|
||||
setGridProps({ ...gridProps, gridData: [], count: 0 })
|
||||
setGridCount(0)
|
||||
setTotalCount(0)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -413,6 +386,20 @@ export default function Stuff() {
|
||||
}
|
||||
}, [globalLocaleState])
|
||||
|
||||
// 페이징 현재페이지 변경
|
||||
const handleChangePage = (page) => {
|
||||
stuffSearchParams.code = 'S'
|
||||
|
||||
setStuffSearch({
|
||||
...stuffSearch,
|
||||
code: 'S',
|
||||
startRow: (page - 1) * pageSize + 1,
|
||||
endRow: page * pageSize,
|
||||
})
|
||||
|
||||
setPageNo(page)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 퍼블시작 */}
|
||||
@ -423,7 +410,7 @@ export default function Stuff() {
|
||||
<ul className="info-wrap">
|
||||
<li>
|
||||
전체
|
||||
<span>{convertNumberToPriceDecimal(gridCount)}</span>
|
||||
<span>{convertNumberToPriceDecimal(totalCount)}</span>
|
||||
</li>
|
||||
<li>
|
||||
선택
|
||||
@ -450,7 +437,9 @@ export default function Stuff() {
|
||||
<div className="grid-table-wrap">
|
||||
<div className="q-grid">
|
||||
<StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
|
||||
<div className="pagination-wrap">페이징 컴포넌트예정</div>
|
||||
<div className="pagination-wrap">
|
||||
<QPagination pageNo={pageNo} pageSize={pageSize} pagePerBlock={10} totalCount={totalCount} handleChangePage={handleChangePage} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -323,7 +323,7 @@ export default function StuffSearchCondition() {
|
||||
setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}등록일</label>
|
||||
<label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="date-picker-wrap">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user