qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

물건현황 화면 페이징 적용중

Browse Source
This commit is contained in:
basssy 2024-10-17 13:18:50 +09:00
parent 07e11f3148
commit 63b500e0c0
2 changed files with 78 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/management/Stuff.jsx
View File

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

2
src/components/management/StuffSearchCondition.jsx
View File

@ -323,7 +323,7 @@ export default function StuffSearchCondition() {
setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value }) 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> </div>
<div className="date-picker-wrap"> <div className="date-picker-wrap">