From 3595e352d0ccb4a9fe908d31b5fed2912765b6ef Mon Sep 17 00:00:00 2001
From: CaIon <1808837298@qq.com>
Date: Sat, 23 Sep 2023 03:51:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B8=A0=E9=81=93?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=80=89=E6=8B=A9=E6=AF=8F=E9=A1=B5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 controller/channel.go               |  6 ++-
 web/src/components/ChannelsTable.js | 57 ++++++++++++++++++-----------
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/controller/channel.go b/controller/channel.go
index 50b2b5f6..5c733670 100644
--- a/controller/channel.go
+++ b/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,
diff --git a/web/src/components/ChannelsTable.js b/web/src/components/ChannelsTable.js
index 1450cd58..895de27e 100644
--- a/web/src/components/ChannelsTable.js
+++ b/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 * ITEMS_PER_PAGE
+              (activePage - 1) * pageSize,
+              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'
-                activePage={activePage}
-                onPageChange={onPaginationChange}
-                size='small'
-                siblingRange={1}
-                totalPages={
-                  Math.ceil(channels.length / ITEMS_PER_PAGE) +
-                  (channels.length % ITEMS_PER_PAGE === 0 ? 1 : 0)
-                }
-              />
+
+              <div style={{ float: 'right' }}>
+                <div className="ui labeled input" style={{marginRight: '10px'}}>
+                  <div className="ui label">每页数量</div>
+                  <Input type="number" style={{width: '70px'}} defaultValue={ITEMS_PER_PAGE} onBlur={setItemsPerPage}></Input>
+                </div>
+                <Pagination
+                    activePage={activePage}
+                    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>