feat: 新增渠道页面选择每页显示数量

controller/channel.go

@@ -11,10 +11,14 @@ import (
 
 func GetAllChannels(c *gin.Context) {
 	p, _ := strconv.Atoi(c.Query("p"))
+	pageSize, _ := strconv.Atoi(c.Query("page_size"))
 	if p < 0 {
 		p = 0
 	}
-	channels, err := model.GetAllChannels(p*common.ItemsPerPage, common.ItemsPerPage, false)
+	if pageSize < 0 {
+		pageSize = common.ItemsPerPage
+	}
+	channels, err := model.GetAllChannels(p*pageSize, pageSize, false)
 	if err != nil {
 		c.JSON(http.StatusOK, gin.H{
 			"success": false,

web/src/components/ChannelsTable.js

@@ -55,16 +55,17 @@ const ChannelsTable = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
   const [searching, setSearching] = useState(false);
   const [updatingBalance, setUpdatingBalance] = useState(false);
+  const [pageSize, setPageSize] = useState(ITEMS_PER_PAGE);
 
   const loadChannels = async (startIdx) => {
-    const res = await API.get(`/api/channel/?p=${startIdx}`);
+    const res = await API.get(`/api/channel/?p=${startIdx}&page_size=${pageSize}`);
     const { success, message, data } = res.data;
     if (success) {
       if (startIdx === 0) {
         setChannels(data);
       } else {
         let newChannels = [...channels];
-        newChannels.splice(startIdx * ITEMS_PER_PAGE, data.length, ...data);
+        newChannels.splice(startIdx * pageSize, data.length, ...data);
         setChannels(newChannels);
       }
     } else {
@@ -75,14 +76,21 @@ const ChannelsTable = () => {
 
   const onPaginationChange = (e, { activePage }) => {
     (async () => {
-      if (activePage === Math.ceil(channels.length / ITEMS_PER_PAGE) + 1) {
+      if (activePage === Math.ceil(channels.length / pageSize) + 1) {
         // In this case we have to load more data and then append them.
-        await loadChannels(activePage - 1);
+        await loadChannels(activePage - 1, pageSize);
       }
       setActivePage(activePage);
     })();
   };
 
+  const setItemsPerPage = (e) => {
+    console.log(e.target.value);
+    //parseInt(e.target.value);
+    setPageSize(parseInt(e.target.value));
+    loadChannels(0);
+  }
+
   const refresh = async () => {
     setLoading(true);
     await loadChannels(activePage - 1);
@@ -124,7 +132,7 @@ const ChannelsTable = () => {
       showSuccess('操作成功完成！');
       let channel = res.data.data;
       let newChannels = [...channels];
-      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      let realIdx = (activePage - 1) * pageSize + idx;
       if (action === 'delete') {
         newChannels[realIdx].deleted = true;
       } else {
@@ -195,7 +203,7 @@ const ChannelsTable = () => {
     const { success, message, time } = res.data;
     if (success) {
       let newChannels = [...channels];
-      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      let realIdx = (activePage - 1) * pageSize + idx;
       newChannels[realIdx].response_time = time * 1000;
       newChannels[realIdx].test_time = Date.now() / 1000;
       setChannels(newChannels);
@@ -221,7 +229,7 @@ const ChannelsTable = () => {
     const { success, message, balance } = res.data;
     if (success) {
       let newChannels = [...channels];
-      let realIdx = (activePage - 1) * ITEMS_PER_PAGE + idx;
+      let realIdx = (activePage - 1) * pageSize + idx;
       newChannels[realIdx].balance = balance;
       newChannels[realIdx].balance_updated_time = Date.now() / 1000;
       setChannels(newChannels);
@@ -369,8 +377,8 @@ const ChannelsTable = () => {
         <Table.Body>
           {channels
             .slice(
-              (activePage - 1) * ITEMS_PER_PAGE,
+              (activePage - 1) * pageSize,
-              activePage * ITEMS_PER_PAGE
+              activePage * pageSize
             )
             .map((channel, idx) => {
               if (channel.deleted) return <></>;
@@ -485,7 +493,7 @@ const ChannelsTable = () => {
 
         <Table.Footer>
           <Table.Row>
-            <Table.HeaderCell colSpan='9'>
+            <Table.HeaderCell colSpan='10'>
               <Button size='small' as={Link} to='/channel/add' loading={loading}>
                 添加新的渠道
               </Button>
@@ -494,18 +502,25 @@ const ChannelsTable = () => {
               </Button>
               <Button size='small' onClick={updateAllChannelsBalance}
                       loading={loading || updatingBalance}>更新所有已启用通道余额</Button>
-              <Pagination
+
-                floated='right'
+              <div style={{ float: 'right' }}>
-                activePage={activePage}
+                <div className="ui labeled input" style={{marginRight: '10px'}}>
-                onPageChange={onPaginationChange}
+                  <div className="ui label">每页数量</div>
-                size='small'
+                  <Input type="number" style={{width: '70px'}} defaultValue={ITEMS_PER_PAGE} onBlur={setItemsPerPage}></Input>
-                siblingRange={1}
+                </div>
-                totalPages={
+                <Pagination
-                  Math.ceil(channels.length / ITEMS_PER_PAGE) +
+                    activePage={activePage}
-                  (channels.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
+                    onPageChange={onPaginationChange}
-                }
+                    size='small'
-              />
+                    siblingRange={1}
+                    totalPages={
+                        Math.ceil(channels.length / pageSize) +
+                        (channels.length % pageSize === 0 ? 1 : 0)
+                    }
+                />
+              </div>
               <Button size='small' onClick={refresh} loading={loading}>刷新</Button>
+
             </Table.HeaderCell>
           </Table.Row>
         </Table.Footer>