From 8f6b3d26bde4e22773cc53386dfbae669a7472ed Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 13 十月 2020 09:16:21 +0800
Subject: [PATCH] 2020-10-13
---
src/tabviews/custom/components/card/data-card/index.jsx | 53 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 46 insertions(+), 7 deletions(-)
diff --git a/src/tabviews/custom/components/card/data-card/index.jsx b/src/tabviews/custom/components/card/data-card/index.jsx
index 8e459c4..3d1c86d 100644
--- a/src/tabviews/custom/components/card/data-card/index.jsx
+++ b/src/tabviews/custom/components/card/data-card/index.jsx
@@ -9,6 +9,8 @@
import UtilsDM from '@/utils/utils-datamanage.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
+import preImg from '@/assets/img/prev.png'
+import nextImg from '@/assets/img/next.png'
import './index.scss'
const CardItem = asyncComponent(() => import('../cardItem'))
@@ -26,9 +28,11 @@
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀
config: null, // 鍥捐〃閰嶇疆淇℃伅
+ pageIndex: 1,
empty: false,
loading: false, // 鏁版嵁鍔犺浇鐘舵��
- data: null // 鏁版嵁
+ data: null, // 鏁版嵁
+ total: null
}
UNSAFE_componentWillMount () {
@@ -63,7 +67,7 @@
async loadData () {
const { mainSearch, BID, menuType, dataManager } = this.props
- const { config, arr_field } = this.state
+ const { config, arr_field, pageIndex } = this.state
let searches = []
if (mainSearch && mainSearch.length > 0) { // 涓昏〃鎼滅储鏉′欢
@@ -75,12 +79,13 @@
})
let _orderBy = config.setting.order || ''
- let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, 1, config.setting.pageSize, BID, menuType, dataManager)
+ let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, pageIndex, config.setting.pageSize, BID, menuType, dataManager)
let result = await Api.genericInterface(param)
if (result.status) {
this.setState({
data: result.data,
+ total: result.total,
loading: false
})
} else {
@@ -95,8 +100,38 @@
}
}
+ prevPage = () => {
+ const { pageIndex } = this.state
+
+ if (pageIndex === 1) return
+
+ this.setState({
+ pageIndex: pageIndex - 1
+ }, () => {
+ this.loadData()
+ })
+ }
+ nextPage = () => {
+ const { config, pageIndex, total } = this.state
+ let _total = config.setting.pageSize * pageIndex
+
+ if (_total >= total) return
+
+ this.setState({
+ pageIndex: pageIndex + 1
+ }, () => {
+ this.loadData()
+ })
+ }
+
render() {
- const { config, empty, loading, data } = this.state
+ const { config, empty, loading, data, pageIndex, total } = this.state
+
+ let _total = config.setting.pageSize * pageIndex
+ let pageable = config.pageable && config.setting.laypage
+ if ((pageIndex === 1 && total <= _total) || !data) {
+ pageable = false
+ }
return (
<div className="custom-card-box" style={config.style}>
@@ -106,9 +141,13 @@
<Spin />
</div> : null
}
- {data && data.length > 0 ? data.map((item, index) => (
- <CardItem key={index} card={config.subcards[0]} cards={config} data={item} />
- )) : null}
+ {pageable ? <div className={'prev-page ' + (pageIndex === 1 ? 'disabled' : '')} onClick={this.prevPage}><div><div><img src={preImg} alt=""/></div></div></div> : null}
+ {data && data.length > 0 ? <div className="card-row-list">
+ {data.map((item, index) => (
+ <CardItem key={index} card={config.subcards[0]} cards={config} data={item} />
+ ))}
+ </div> : null}
+ {pageable ? <div className={'prev-page ' + (total <= _total ? 'disabled' : '')} onClick={this.nextPage}><div><div><img src={nextImg} alt=""/></div></div></div> : null}
{empty ? <Empty description={false}/> : null}
</div>
)
--
Gitblit v1.8.0