U 优化表格分页支持调整pageSize

spug_web/src/pages/alarm/alarm/Table.js

@@ -17,6 +17,7 @@ class ComTable extends React.Component {
       groupMap: {}
     }
   }
+
   componentDidMount() {
     store.fetchRecords();
     if (groupStore.records.length === 0) {
@@ -65,7 +66,17 @@ class ComTable extends React.Component {
       data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
     }
     return (
-      <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+      <Table
+        rowKey="id"
+        loading={store.isFetching}
+        dataSource={data}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}
+        columns={this.columns}/>
     )
   }
 }

spug_web/src/pages/alarm/contact/Table.js

@@ -46,7 +46,7 @@ class ComTable extends React.Component {
       <span>
         <LinkButton auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</LinkButton>
         <Divider type="vertical"/>
-        <LinkButton auth="alarm.contact.del"  onClick={() => this.handleDelete(info)}>删除</LinkButton>
+        <LinkButton auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</LinkButton>
       </span>
     )
   }];
@@ -72,7 +72,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/alarm/group/Table.js

@@ -91,7 +91,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/config/app/Table.js

@@ -66,7 +66,17 @@ class ComTable extends React.Component {
       data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
     }
     return (
-      <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+      <Table
+        rowKey="id"
+        loading={store.isFetching}
+        dataSource={data}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}
+        columns={this.columns}/>
     )
   }
 }

spug_web/src/pages/config/environment/Table.js

@@ -64,7 +64,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/config/service/Table.js

@@ -66,7 +66,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/config/setting/Record.js

@@ -64,7 +64,17 @@ class Record extends React.Component {
         title={`${store.env.name} - 更改历史记录`}
         onCancel={() => store.recordVisible = false}
         footer={null}>
-        <Table rowKey="id" loading={loading} dataSource={records} columns={this.columns} />
+        <Table
+          rowKey="id"
+          loading={loading}
+          dataSource={records}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
       </Modal>
     )
   }

spug_web/src/pages/config/setting/TableView.js

@@ -73,7 +73,18 @@ class TableView extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table size="small" rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          size="small"
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/deploy/app/Table.js

@@ -119,7 +119,7 @@ class ComTable extends React.Component {
       loading={record['deploys'] === undefined}
       columns={columns}
       dataSource={record['deploys']}
-      pagination={false} />
+      pagination={false}/>
   };
 
   render() {
@@ -134,6 +134,12 @@ class ComTable extends React.Component {
         loading={store.isFetching}
         dataSource={data}
         expandedRowRender={this.expandedRowRender}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}
         columns={this.columns}/>
     )
   }

spug_web/src/pages/deploy/request/Table.js

@@ -190,7 +190,17 @@ class ComTable extends React.Component {
       }
     }
     return (
-      <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+      <Table
+        rowKey="id"
+        loading={store.isFetching}
+        dataSource={data}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}
+        columns={this.columns}/>
     )
   }
 }

spug_web/src/pages/exec/template/Table.js

@@ -66,7 +66,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/host/Table.js

@@ -32,7 +32,7 @@ class ComTable extends React.Component {
   }, {
     title: '连接地址',
     dataIndex: 'hostname',
-  },  {
+  }, {
     title: '端口',
     dataIndex: 'port'
   }, {
@@ -84,7 +84,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
         {store.importVisible && <ComImport/>}
       </React.Fragment>

spug_web/src/pages/monitor/Table.js

@@ -147,7 +147,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/schedule/Record.js

@@ -48,7 +48,17 @@ class Record extends React.Component {
         title={`任务执行记录 - ${store.record.name}`}
         onCancel={() => store.recordVisible = false}
         footer={null}>
-        <Table rowKey="id" columns={this.columns} dataSource={this.state.records} loading={this.state.loading}/>
+        <Table
+          rowKey="id"
+          columns={this.columns}
+          dataSource={this.state.records}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          loading={this.state.loading}/>
       </Modal>
     )
   }

spug_web/src/pages/schedule/Table.js

@@ -147,7 +147,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
         {store.infoVisible && <Info/>}
         {store.recordVisible && <Record/>}

spug_web/src/pages/system/account/Table.js

@@ -116,7 +116,17 @@ class ComTable extends React.Component {
     }
     return (
       <React.Fragment>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+        <Table
+          rowKey="id"
+          loading={store.isFetching}
+          dataSource={data}
+          pagination={{
+            showSizeChanger: true,
+            showLessItems: true,
+            hideOnSinglePage: true,
+            pageSizeOptions: ['10', '20', '50', '100']
+          }}
+          columns={this.columns}/>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/system/role/Table.js

@@ -64,7 +64,17 @@ class ComTable extends React.Component {
       data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
     }
     return (
-      <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
+      <Table
+        rowKey="id"
+        loading={store.isFetching}
+        dataSource={data}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}
+        columns={this.columns}/>
     )
   }
 }