fix: Pagination style change

goodrain · Dec 4, 2024 · c7cc71d · c7cc71d
1 parent 4e7449d
commit c7cc71d
Show file tree

Hide file tree

Showing 27 changed files with 462 additions and 174 deletions.
diff --git a/src/components/ClusterMgtList/index.js b/src/components/ClusterMgtList/index.js
@@ -49,6 +49,9 @@ class Index extends Component {
       showUpdateKubernetes: false,
       showUpdateKubernetesTasks: false,
       isShowAddNodeModal: false,
+      pageSize: 10,
+      total: 0,
+      current: 1
     }
   }
   //节点状态
@@ -143,6 +146,14 @@ class Index extends Component {
     }
 
   }
+  total = (total) => `共 ${total} 条`;
+  pageChange = (current, pageSize) => {
+    console.log(current, pageSize);
+    this.setState({
+      pageSize,
+      current
+    })
+  }
   render() {
     const { nodeList, rowClusterInfo, showInfo, form, eventId } = this.props
     const { selectArr, isShowAddNodeModal } = this.state
@@ -287,6 +298,17 @@ class Index extends Component {
         sm: { span: 16 }
       }
     };
+    const pagination = {
+      total: nodeList.length || 0,
+      current: this.state.current,
+      pageSize: this.state.pageSize,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal:  this.total,
+      onChange: this.pageChange,
+      onShowSizeChange :this.pageChange,
+      hideOnSinglePage: nodeList.length <= 10
+    };    
     return (
       <>
         <Card
@@ -300,7 +322,7 @@ class Index extends Component {
               columns={columns}
               rowKey={(record,index) => index}
               dataSource={nodeList}
-              pagination={nodeList && nodeList.length > 10 ? true : false}
+              pagination={pagination}
               onRow={this.onClickRow}
               rowClassName={styles.rowStyle}
             />

diff --git a/src/components/EnvironmentVariable/index.js b/src/components/EnvironmentVariable/index.js
@@ -748,22 +748,19 @@ class EnvironmentVariable extends React.Component {
                 components={components}
                 columns={columns}
                 dataSource={innerEnvsList}
-                pagination={false}
+                pagination={{
+                  current: page,
+                  pageSize: page_size,
+                  total: Number(total),
+                  onChange: this.onPageChange,
+                  onShowSizeChange: this.onShowSizeChange,
+                  showQuickJumper: true,
+                  showSizeChanger: true,
+                  showTotal: (total) => `共 ${total} 条`,
+                  pageSizeOptions:['5', '10', '20', '30'],
+                  hideOnSinglePage: Number(total) <= 5
+                }}
               />
-              <div style={{ textAlign: 'right', marginTop: '8px' }}>
-              {Number(total) >page_size &&
-                <Pagination
-                  current={page}
-                  pageSize={page_size}
-                  showSizeChanger
-                  total={Number(total)}
-                  defaultCurrent={1}
-                  onChange={this.onPageChange}
-                  pageSizeOptions={['5', '10', '20', '50']}
-                  onShowSizeChange={this.onShowSizeChange}
-                />
-              }
-              </div>
             </EditableContext.Provider>
           </ScrollerX>
 

diff --git a/src/components/GatewayRouteHttp/index.js b/src/components/GatewayRouteHttp/index.js
@@ -30,7 +30,9 @@ export default class index extends Component {
             routeDrawer: false,
             dataSource: [],
             type: 'add',
-            tableLoading: true
+            tableLoading: true,
+            pageSize: 10,
+            page: 1 
         };
     }
     componentDidMount() {
@@ -158,12 +160,20 @@ export default class index extends Component {
         const ComponentID = serviceName.slice(-8);
         dispatch(routerRedux.push(`/team/${teamName}/region/${regionName}/components/${ComponentID}/overview`));
     }
+    onPageChange = (page_num, page_size) => {
+        this.setState({
+            page: page_num,
+            pageSize: page_size
+        })
+    }
     render() {
         const {
             routeDrawer,
             dataSource,
             editInfo,
-            tableLoading
+            tableLoading,
+            page,
+            pageSize
         } = this.state;
         const {
             appID,
@@ -305,6 +315,17 @@ export default class index extends Component {
                         columns={columns}
                         loading={tableLoading}
                         rowKey={record => record.name || record.serviceName}
+                        pagination={{
+                            current: page,
+                            pageSize: pageSize,
+                            total: dataSource.length ,
+                            onChange: this.onPageChange,
+                            showQuickJumper: true,
+                            showSizeChanger: true,
+                            showTotal: (total) => `共 ${total} 条`,
+                            onShowSizeChange: this.onPageChange,
+                            hideOnSinglePage: dataSource.length <= 10
+                        }}
                     />
                 </Card>
                 {routeDrawer &&

diff --git a/src/components/GatewayRouteTcp/index.js b/src/components/GatewayRouteTcp/index.js
@@ -34,7 +34,9 @@ export default class index extends Component {
             type: 'add',
             tableLoading: true,
             comList:[],
-            outer_url:''
+            outer_url:'',
+            pageSize: 10,
+            page: 1 
         };
     }
     componentWillMount(){
@@ -201,13 +203,21 @@ export default class index extends Component {
         )
       );
     }
+    onPageChange = (page_num, page_size) => {
+        this.setState({
+            page: page_num,
+            pageSize: page_size
+        })
+    }
     render() {
         const {
             routeDrawer,
             dataSource,
             editInfo,
             tableLoading,
-            outer_url
+            outer_url,
+            pageSize,
+            page
         } = this.state;
         const {
             appID,
@@ -315,6 +325,17 @@ export default class index extends Component {
                         dataSource={dataSource}
                         columns={columns}
                         loading={tableLoading}
+                        pagination={{
+                            current: page,
+                            pageSize: pageSize,
+                            total: dataSource.length ,
+                            onChange: this.onPageChange,
+                            showQuickJumper: true,
+                            showSizeChanger: true,
+                            showTotal: (total) => `共 ${total} 条`,
+                            onShowSizeChange: this.onPageChange,
+                            hideOnSinglePage: dataSource.length <= 10
+                        }}
                     />
                 </Card>
                 {routeDrawer &&

diff --git a/src/components/RelatumComponentInfo/index.js b/src/components/RelatumComponentInfo/index.js
@@ -28,7 +28,7 @@ export default class Index extends PureComponent {
       viewRelationInfo: null,
       showText: null,
       page: 1,
-      pageSize: 8,
+      pageSize: 5,
       total: 0,
       serviceId: ''
     };
@@ -37,8 +37,8 @@ export default class Index extends PureComponent {
     this.loadRelationedApp();
   }
 
-  onPageChange = page => {
-    this.setState({ page }, () => {
+  onPageChange = (page, pageSize) => {
+    this.setState({ page, pageSize }, () => {
       this.loadRelationedApp();
     });
   };
@@ -145,12 +145,18 @@ export default class Index extends PureComponent {
           <ScrollerX sm={650}>
             <Table
               rowKey={(record,index) => index}
-              pagination={this.state.total > this.state.pageSize ? {
+              pagination={{
                 current: this.state.page,
                 pageSize: this.state.pageSize,
                 total: this.state.total,
-                onChange: this.onPageChange
-              } : false}
+                onChange: this.onPageChange ,
+                onShowSizeChange: this.onPageChange,
+                showQuickJumper: true,
+                showSizeChanger: true,
+                showTotal: (total) => `共 ${total} 条`,
+                pageSizeOptions:['5', '10', '20', '30'],
+                hideOnSinglePage: Number(this.state.total) <= 5
+              }}
               columns={[
                 {
                   // title: '组件名',

diff --git a/src/components/Team/TeamMemberList/index.js b/src/components/Team/TeamMemberList/index.js
@@ -195,7 +195,6 @@ export default class MemberList extends PureComponent {
             <TeamMemberTable
               users={currUser}
               memberPermissions={memberPermissions}
-              pagination={total >8 ? pagination : false}
               team={currentTeam}
               onMoveTeam={this.onMoveTeam}
               onDelete={this.onDelMember}

diff --git a/src/components/TeamImageTable/index.js b/src/components/TeamImageTable/index.js
@@ -9,19 +9,38 @@ class TeamMemberTable extends PureComponent {
   constructor(props) {
     super(props)
     this.state = {
+      page: 1,
+      pageSize: 10
     }
   }
+  onPageChange = (page, pageSize) => {
+    this.setState({
+      page,
+      pageSize
+    });
+  }
   render() {
+    const { page, pageSize } = this.state
     const {
       list,
       members,
-      pagination,
       onDelete,
       onEditAction,
       onMoveTeam,
       memberPermissions: { isEdit, isDelete, isAccess },
       team,
     } = this.props;
+    const pagination = {
+      current: page,
+      pageSize: pageSize,
+      total: list.length ,
+      onChange: this.onPageChange,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条`,
+      onShowSizeChange: this.onPageChange,
+      hideOnSinglePage: list.length<=10
+  }
     const columns = [
       {
         title: formatMessage({id: 'teamManage.tabs.image.table.imageAddress'}),
@@ -86,7 +105,7 @@ class TeamMemberTable extends PureComponent {
     ];
 
     return (
-      <Table rowKey={(record,index) => index} pagination={list.length > 8 ? pagination : false} dataSource={list} columns={columns} />
+      <Table rowKey={(record,index) => index}  pagination={pagination} dataSource={list} columns={columns} />
     );
   }
 }

diff --git a/src/components/TeamMemberTable/index.js b/src/components/TeamMemberTable/index.js
@@ -6,17 +6,41 @@ import cookie from '@/utils/cookie';
 import roleUtil from '../../utils/role';
 
 class TeamMemberTable extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      pageSize: 10
+    };
+  }
+  onPageChange = (page, pageSize) => {
+    this.setState({
+      page,
+      pageSize
+    });
+  }
   render() {
+    const { page, pageSize } = this.state;
     const {
       list,
-      pagination,
       onDelete,
       onEditAction,
       onMoveTeam,
       memberPermissions: { isEdit, isDelete },
       team,
       users
     } = this.props;
+    const pagination = {
+      current: page,
+      pageSize: pageSize,
+      total: list.length ,
+      onChange: this.onPageChange,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条`,
+      onShowSizeChange: this.onPageChange,
+      hideOnSinglePage: list.length<=10
+  }
     const columns = [
       {
         title: formatMessage({id: 'teamManage.tabs.member.table.userName'}),

diff --git a/src/layouts/PageHeaderLayout.less b/src/layouts/PageHeaderLayout.less
@@ -16,6 +16,22 @@
   .ant-card-bordered{
     border-radius: 5px;
   }
+  .ant-pagination-disabled>.ant-pagination-item-link {
+    background-color: #efefef;
+  }
+
+  .ant-pagination-item-active {
+    background-color: @primary-color;
+    &>a {
+      color: #fff;
+    }
+  }
+  .ant-pagination-item-active:focus {
+    background-color: @primary-color;
+    &>a {
+      color: #fff;
+    }
+  }
 }
 .content {
   padding: 24px 0 0 0;
@@ -41,6 +57,7 @@
   }
 }
 
+
 @media screen and (max-width: @screen-sm) {
   .content {
     margin: 24px 0 0;