web: Add goto page input

web/src/components/generic-manager.vue

@@ -150,6 +150,11 @@
         <CPaginationItem href="javascript:void(0)" :disabled="offset == 0" @click="goto_page(-this.meta.limit)">上一页</CPaginationItem>
         <CPaginationItem href="javascript:void(0)" :disabled="meta.total_count <= offset + meta.limit" @click="goto_page(this.meta.limit)">下一页</CPaginationItem>
         <CPaginationItem href="javascript:void(0)" :disabled="offset == 0" @click="goto_page(-this.offset)">第一页</CPaginationItem>
+        <div class="page-jump">
+          跳转到第 <input type="number" v-model="jump_page" min="1" :max="total_pages" class="page-input" @keyup.enter="jump_to_page"> 页
+          (共 {{ total_pages }} 页)
+        </div>
+        <button class="btn btn-primary btn-sm mx-3" @click="jump_to_page" id="jump-btn">跳转</button>
       </CPagination>
       <div>
         <span>当前显示第 {{ offset + 1 }} - {{ Math.min(offset + meta.limit, meta.total_count) }} 条数据，共 {{ meta.total_count }} 条数据</span>
@@ -195,6 +200,7 @@ export default {
       detail_object: null,
       search_query: '',
       current_query: '',
+      jump_page: 1,
     };
   },
   computed: {
@@ -254,6 +260,9 @@ export default {
       }
       return uri;
     },
+    total_pages: function() {
+      return Math.ceil(this.meta?.total_count / this.meta?.limit) || 1;
+    },
   },
   methods: {
     do_search: function() {
@@ -270,6 +279,10 @@ export default {
         this.offset = new_val;
         this.reload_data();
       }
+      this.update_jump_page();
+    },
+    update_jump_page: function() {
+      this.jump_page = Math.ceil((this.offset + 1) / this.meta.limit);
     },
     select_all: function() {
       for (var x in this.rows) {
@@ -370,6 +383,13 @@ export default {
     get_handle_btn: function(i,j){
       return "handle-btn-"+i+"-"+j
     },
+    jump_to_page: function() {
+      if (!this.jump_page) return;
+      const page = parseInt(this.jump_page);
+      if (page < 1 || page > this.total_pages) return;
+      const new_offset = (page - 1) * this.meta.limit;
+      this.goto_page(new_offset - this.offset);
+    },
   },
   mounted() {
     this.reload();
@@ -407,5 +427,15 @@ td {
 .public-badge {
   margin-left: 1rem;
 }
+.page-jump {
+  display: inline-block;
+  margin-left: 1rem;
+}
+
+.page-input {
+  width: 60px;
+  margin: 0 0.5rem;
+  padding: 0.1rem 0.3rem;
+}
 </style>