分页bug

src/views/ledgerAssets/camera/index.vue

@@ -10,6 +10,10 @@
         :datasource="datasource"
         :selection.sync="selection"
         :cache-key="cacheKeyUrl"
+        :response="{
+          dataName: 'data.records', // 数据列表的字段名称，支持嵌套，例如：data.rows
+          countName: 'data.total' // 数据总数的字段名称，例如：data.total
+        }"
       >
         <!-- 表头工具栏 -->
         <template v-slot:toolbar>
@@ -26,7 +30,9 @@
             type="danger"
             icon="el-icon-delete"
             class="ele-btn-icon"
-            v-if="$hasPermission('ledgerAssets:camera:delete') && selection.length"
+            v-if="
+              $hasPermission('ledgerAssets:camera:delete') && selection.length
+            "
             @click="handleBatchDelete"
           >
             批量删除
@@ -74,190 +80,190 @@
 </template>
 
 <script>
-import * as CameraApi from '@/api/ledgerAssets/camera'
-import formModel from './components/formModel.vue'
-import cameraSearch from './components/camera-search.vue'
+  import * as CameraApi from '@/api/ledgerAssets/camera';
+  import formModel from './components/formModel.vue';
+  import cameraSearch from './components/camera-search.vue';
 
-export default {
-  name: 'LedgerCamera',
-  components: {
-    formModel,
-    cameraSearch
-  },
-  data() {
-    return {
-      cacheKeyUrl: 'ledgerCameraTable',
-      delColor: '#F56C6C',
-      selection: [],
-      // 表格列配置
-      columns: [
-        {
-          width: 45,
-          type: 'selection',
-          columnKey: 'selection',
-          align: 'center',
-          fixed: 'left'
-        },
-        {
-          columnKey: 'index',
-          label: '序号',
-          type: 'index',
-          width: 55,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
-        },
-        {
-          prop: 'deviceCode',
-          label: '摄像机编号',
-          headerAlign: 'center',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 150
-        },
-        {
-          prop: 'name',
-          label: '摄像机名称',
-          headerAlign: 'center',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 200
-        },
-        {
-          prop: 'brandName',
-          label: '设备品牌',
-          headerAlign: 'center',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 150
-        },
-        {
-          prop: 'modelName',
-          label: '设备型号',
-          headerAlign: 'center',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 150
-        },
-        {
-          prop: 'classifyName',
-          label: '摄像机类型',
-          headerAlign: 'center',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 150
-        },
-        // {
-        //   prop: 'loadDeviceName',
-        //   label: '关联设备',
-        //   headerAlign: 'center',
-        //   align: 'center',
-        //   showOverflowTooltip: true,
-        //   width: 150
-        // },
-        {
-          prop: 'activityStatus',
-          label: '摄像机状态',
-          align: 'center',
-          showOverflowTooltip: true,
-          width: 100,
-          slot: 'activityStatus'
-        },
-        {
-          columnKey: 'action',
-          fixed: 'right',
-          label: '操作',
-          width: 150,
-          align: 'center',
-          resizable: false,
-          slot: 'action',
-          showOverflowTooltip: true
-        }
-      ],
-      loading: false
-    }
-  },
-  methods: {
-    /* 表格数据源 */
-    async datasource({ page, limit, where }) {
-      const res = await CameraApi.getDevicePage({
-        pageNo: page,
-        pageSize: limit,
-        ...where
-      })
+  export default {
+    name: 'LedgerCamera',
+    components: {
+      formModel,
+      cameraSearch
+    },
+    data() {
+      return {
+        cacheKeyUrl: 'ledgerCameraTable',
+        delColor: '#F56C6C',
+        selection: [],
+        // 表格列配置
+        columns: [
+          {
+            width: 45,
+            type: 'selection',
+            columnKey: 'selection',
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'deviceCode',
+            label: '摄像机编号',
+            headerAlign: 'center',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 150
+          },
+          {
+            prop: 'name',
+            label: '摄像机名称',
+            headerAlign: 'center',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 200
+          },
+          {
+            prop: 'brandName',
+            label: '设备品牌',
+            headerAlign: 'center',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 150
+          },
+          {
+            prop: 'modelName',
+            label: '设备型号',
+            headerAlign: 'center',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 150
+          },
+          {
+            prop: 'classifyName',
+            label: '摄像机类型',
+            headerAlign: 'center',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 150
+          },
+          // {
+          //   prop: 'loadDeviceName',
+          //   label: '关联设备',
+          //   headerAlign: 'center',
+          //   align: 'center',
+          //   showOverflowTooltip: true,
+          //   width: 150
+          // },
+          {
+            prop: 'activityStatus',
+            label: '摄像机状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            width: 100,
+            slot: 'activityStatus'
+          },
+          {
+            columnKey: 'action',
+            fixed: 'right',
+            label: '操作',
+            width: 150,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            showOverflowTooltip: true
+          }
+        ],
+        loading: false
+      };
+    },
+    methods: {
+      /* 表格数据源 */
+      async datasource({ page, limit, where }) {
+        return await CameraApi.getDevicePage({
+          pageNum: page,
+          size: limit,
+          ...where
+        });
 
-      console.log('获取摄像机分页数据', res)
+        console.log('获取摄像机分页数据', res);
 
-      return res.data.records
-    },
+        return res.data.records;
+      },
 
-    /* 刷新表格 */
-    reload(where) {
-      this.$refs.table.reload({ page: 1, where })
-    },
+      /* 刷新表格 */
+      reload(where) {
+        this.$refs.table.reload({ page: 1, where });
+      },
 
-    /** 添加/修改操作 */
-    openForm(type, id) {
-      this.$refs.formRef.open(type, id)
-    },
+      /** 添加/修改操作 */
+      openForm(type, id) {
+        this.$refs.formRef.open(type, id);
+      },
 
-    /** 状态切换 */
-    handleStatusChange(row) {
-      const text = row.activityStatus === 1 ? '启用' : '停用'
-      this.$confirm('确认要' + text + '摄像机"' + row.name + '"吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          row.extInfo = row.extInfo || '{}'
-          await CameraApi.updateDevice(row)
-          this.$message.success(text + '成功')
-          this.reload()
+      /** 状态切换 */
+      handleStatusChange(row) {
+        const text = row.activityStatus === 1 ? '启用' : '停用';
+        this.$confirm('确认要' + text + '摄像机"' + row.name + '"吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
-        .catch(() => {
-          row.activityStatus = row.activityStatus === 1 ? 0 : 1
-        })
-    },
+          .then(async () => {
+            row.extInfo = row.extInfo || '{}';
+            await CameraApi.updateDevice(row);
+            this.$message.success(text + '成功');
+            this.reload();
+          })
+          .catch(() => {
+            row.activityStatus = row.activityStatus === 1 ? 0 : 1;
+          });
+      },
 
-    /** 删除按钮操作 */
-    handleDelete(id) {
-      this.$confirm('是否确认删除该数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          await CameraApi.deletedDevice(id)
-          this.$message.success('删除成功')
-          this.reload()
+      /** 删除按钮操作 */
+      handleDelete(id) {
+        this.$confirm('是否确认删除该数据项?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
-        .catch(() => {})
-    },
+          .then(async () => {
+            await CameraApi.deletedDevice(id);
+            this.$message.success('删除成功');
+            this.reload();
+          })
+          .catch(() => {});
+      },
 
-    /** 批量删除按钮操作 */
-    handleBatchDelete() {
-      if (this.selection.length === 0) {
-        this.$message.warning('请选择要删除的数据项')
-        return
-      }
-      this.$confirm('是否确认删除选中的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async () => {
-          const ids = this.selection.map((item) => item.id)
-          for (const id of ids) {
-            await CameraApi.deletedDevice(id)
-          }
-          this.$message.success('删除成功')
-          this.reload()
+      /** 批量删除按钮操作 */
+      handleBatchDelete() {
+        if (this.selection.length === 0) {
+          this.$message.warning('请选择要删除的数据项');
+          return;
+        }
+        this.$confirm('是否确认删除选中的数据项?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
         })
-        .catch(() => {})
+          .then(async () => {
+            const ids = this.selection.map((item) => item.id);
+            for (const id of ids) {
+              await CameraApi.deletedDevice(id);
+            }
+            this.$message.success('删除成功');
+            this.reload();
+          })
+          .catch(() => {});
+      }
     }
-  }
-}
+  };
 </script>
 
 <style lang="scss" scoped></style>