优化青云DNS翻页

app/lib/DnsHelper.php

@@ -320,7 +320,7 @@ class DnsHelper
             'log' => false,
             'weight' => true,
             'page' => false,
-            'add' => true,
+            'add' => false,
         ],
         'bt' => [
             'name' => '宝塔域名',
@@ -475,7 +475,7 @@ class DnsHelper
             'log' => false,
             'weight' => false,
             'page' => false,
-            'add' => true,
+            'add' => false,
         ],
         'powerdns' => [
             'name' => 'PowerDNS',
@@ -620,6 +620,7 @@ class DnsHelper
         'baidu' => ['DEF' => 'default', 'CT' => 'ct', 'CU' => 'cnc', 'CM' => 'cmnet', 'AB' => ''],
         'jdcloud' => ['DEF' => '-1', 'CT' => '1', 'CU' => '2', 'CM' => '3', 'AB' => '4'],
         'bt' => ['DEF' => '0', 'CT' => '285344768', 'CU' => '285345792', 'CM' => '285346816'],
+        'qingcloud' => ['DEF' => '0', 'CT' => '2', 'CU' => '3', 'CM' => '4', 'AB' => '8'],
         'cloudflare' => ['DEF' => '0'],
         'namesilo' => ['DEF' => 'default'],
         'powerdns' => ['DEF' => 'default'],

app/lib/dns/qingcloud.php

@@ -65,7 +65,8 @@ class qingcloud implements DnsInterface
         if ($SubDomain) {
             return $this->getHostRecords($SubDomain);
         }
-        $param = ['zone_name' => $this->domainid, 'offset' => 0, 'limit' => 100];
+        $offset = ($PageNumber - 1) * $PageSize;
+        $param = ['zone_name' => $this->domainid, 'offset' => $offset, 'limit' => $PageSize];
         if (!isNullOrEmpty($KeyWord)) {
             $param['search_word'] = $KeyWord;
         }

app/view/domain/qingcloud.html

@@ -5,7 +5,6 @@
 td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;}
 .dns-parent-row { cursor: pointer; }
 .dns-child-row td { background: #fafafa; }
-.dns-child-row td:nth-child(4) { padding-left: 24px; }
 .dns-child-empty td { background:#fafafa; }
 .glyphicon-spin { animation: spin 1s infinite linear; }
 @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }
@@ -126,7 +125,7 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
         <th>线路类型</th>
         <th>记录类型</th>
         <th>模式</th>
-        <th>记录值</th>
+        <th style="min-width:150px">记录值</th>
         <th>TTL</th>
         <th>状态</th>
         <th>操作</th>
@@ -193,6 +192,33 @@ td{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width:360px;
     </tbody>
   </table>
 </div>
+  <div class="row" style="margin-top:10px;">
+    <div class="col-sm-6 text-muted" style="padding-top:6px;">
+      共 {{ total }} 条，当前第 {{ currentPage }} / {{ totalPages }} 页
+    </div>
+
+    <div class="col-sm-6 text-right">
+      <ul class="pagination pagination-sm" style="margin:0;">
+        <li :class="{disabled: currentPage === 1}">
+          <a href="javascript:;" @click="goPage(1)">&laquo;</a>
+        </li>
+        <li :class="{disabled: currentPage === 1}">
+          <a href="javascript:;" @click="goPage(currentPage - 1)">上一页</a>
+        </li>
+
+        <li v-for="n in pageList" :key="'pg-' + n" :class="{active: n === currentPage}">
+          <a href="javascript:;" @click="goPage(n)">{{ n }}</a>
+        </li>
+
+        <li :class="{disabled: currentPage === totalPages}">
+          <a href="javascript:;" @click="goPage(currentPage + 1)">下一页</a>
+        </li>
+        <li :class="{disabled: currentPage === totalPages}">
+          <a href="javascript:;" @click="goPage(totalPages)">&raquo;</a>
+        </li>
+      </ul>
+    </div>
+  </div>
 
     </div>
   </div>
@@ -228,6 +254,9 @@ new Vue({
         mx: 10,
       },
       keyword: '',
+      total: 0,
+      offset: 0,
+      limit: 10,
       parents: [],
       expandedMap: {},   // {pid: true/false}
       loadingMap: {},    // {pid: true/false}
@@ -241,6 +270,29 @@ new Vue({
       ]
     };
   },
+  computed: {
+    currentPage: function () {
+      return Math.floor(this.offset / this.limit) + 1;
+    },
+    totalPages: function () {
+      return Math.max(1, Math.ceil(this.total / this.limit));
+    },
+    pageList: function () {
+      // 显示最多 5 个页码，居中
+      var totalPages = this.totalPages;
+      var cur = this.currentPage;
+      var windowSize = 5;
+      var half = Math.floor(windowSize / 2);
+
+      var start = Math.max(1, cur - half);
+      var end = Math.min(totalPages, start + windowSize - 1);
+      start = Math.max(1, end - windowSize + 1);
+
+      var arr = [];
+      for (var i = start; i <= end; i++) arr.push(i);
+      return arr;
+    }
+  },
   mounted: function () {
     this.loadParents();
     $('[data-toggle="tooltip"]').tooltip();
@@ -251,20 +303,31 @@ new Vue({
       var vm = this;
       vm.loading = true;
       vm.expandedMap = {};
+      vm.loadingMap = {};
       vm.childrenMap = {};
       $.ajax({
         url: '/record/data/{$domainId}',
         method: 'POST',
-        data: { keyword: vm.keyword },
+        data: { keyword: vm.keyword, offset: vm.offset, limit: vm.limit },
         dataType: 'json'
       }).done(function (res) {
         vm.loading = false;
-        vm.parents = (res && res.rows) ? res.rows : [];
+        vm.total = res.total || 0;
+        vm.parents = res.rows || [];
       }).fail(function () {
         layer.msg('加载父级列表失败');
       });
     },
 
+    goPage: function (page) {
+      if (!page) return;
+      page = Math.max(1, Math.min(this.totalPages, page));
+      if (page === this.currentPage) return;
+
+      this.offset = (page - 1) * this.limit;
+      this.loadParents();
+    },
+
     toggleParent: function (p) {
       var pid = p.RecordId;
 

config/app.php

@@ -31,7 +31,7 @@ return [
     'show_error_msg'   => true,
     'exception_tmpl'   => \think\facade\App::getAppPath() . 'view/exception.tpl',
 
-    'version' => '1045',
+    'version' => '1046',
 
     'dbversion' => '1045'
 ];