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

3fcbf1f0 · CaIon · 5fea713c · 3fcbf1f0 · 3fcbf1f0
Commit 3fcbf1f0 authored Sep 23, 2023 by CaIon
Hide whitespace changes
Inline Side-by-side

Showing with 41 additions and 22 deletions

controller/channel.go
+5 -1

web/src/components/ChannelsTable.js
+36 -21

No files found.
--- 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,

--- 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 - 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>