增加了设备信息的分页功能

src/views/deviceManagement/DeviceInfo.vue

@@ -26,7 +26,7 @@
         </el-row>
         <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
         <el-row>
-            <el-table :data="deviceList" empty-text="请在上面选择要查看的类型">
+            <el-table :data="deviceList.content" empty-text="请在上面选择要查看的类型">
                 <el-table-column prop="id" label="序号" width="120px"></el-table-column>
                 <el-table-column prop="name" label="名称"></el-table-column>
                 <el-table-column prop="deviceNo" label="设备序列号"></el-table-column>
@@ -47,6 +47,16 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-row type="flex" justify="end">
+                <el-col :span="8" class="pagination">
+                    <el-pagination
+                        @current-change="pageChange"
+                        background
+                        layout="prev, pager, next"
+                        :page-count="deviceList.totalPages"
+                    ></el-pagination>
+                </el-col>
+            </el-row>
         </el-row>
 
         <!-- 设备信息新建、编辑 -->
@@ -124,7 +134,7 @@
                 </el-form-item>
             </el-form>
             <div slot="footer">
-                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button @click="isShowDialogMount=false">取 消</el-button>
                 <el-button type="primary" @click="submitMountForm('mountForm')">确认挂载</el-button>
             </div>
         </el-dialog>
@@ -141,7 +151,14 @@ const rules = {
 };
 // 挂载设备 表单验证规则
 const mountRules = {
-    moumtArea: [{ type: 'array', required: true, message: "请选择挂载区域", trigger: "change" }],
+    moumtArea: [
+        {
+            type: "array",
+            required: true,
+            message: "请选择挂载区域",
+            trigger: "change"
+        }
+    ],
     meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
 };
 
@@ -149,6 +166,8 @@ const mountRules = {
 const deviceTypeCode = "device-type";
 // 区域树 code
 const arearCode = "area-info";
+// 每页数据条数
+const pageSize = 5;
 
 const formDataInit = {
     name: "",
@@ -181,7 +200,9 @@ export default {
             configItems: 2, // 配置项的通道配置项数
             isAdd: true,
             rules,
-            mountRules
+            mountRules,
+            pageSize,
+            page: 1
         };
     },
     created() {
@@ -201,12 +222,11 @@ export default {
             });
         },
         submitMountForm(formName) {
-            if(this.mountform.areaId) this.mountRules.moumtArea = null
+            if (this.mountform.areaId) this.mountRules.moumtArea = null;
             this.$refs[formName].validate(valid => {
                 if (valid) {
-                    console.log(this.mountform);
                     // 请求 挂载设备
-                    this.getMountDevice(this.mountform)
+                    this.getMountDevice(this.mountform);
                 } else {
                     return false;
                 }
@@ -237,14 +257,14 @@ export default {
                 }
             });
         },
-        // 获取设备列表
-        getDeviceList(categoryId) {
+        // 获取设备列表 page pageSize
+        getDeviceList(data) {
             this.fetch({
                 api: "/device/device/list",
                 method: "POST",
-                data: { categoryId }, //目前只有一个组织,其他参数调整钟 732971735112749056
+                data,
                 success: res => {
-                    this.deviceList = res.content;
+                    this.deviceList = res;
                 },
                 fail: err => {
                     if (err.errCode == "request_not_authorize") {
@@ -279,14 +299,14 @@ export default {
 
         // 请求 挂载设备
         getMountDevice(data) {
-            data.areaId = data.areaId[data.areaId.length-1]
+            data.areaId = data.areaId[data.areaId.length - 1];
             this.fetch({
                 api: "/device/device/mount",
                 method: "POST",
                 data,
                 success: res => {
-                    console.log(res)
-                    this.$message.success("挂载设备成功！")
+                    this.$message.success("挂载设备成功！");
+                    this.isShowDialogMount = false;
                 },
                 fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);
@@ -313,7 +333,7 @@ export default {
                 }
             });
         },
-        // 编辑的保存按钮
+        // 新增的保存按钮
         save() {
             if (this.formData.meta instanceof Object) {
                 this.formData.meta = JSON.stringify(this.formData.meta);
@@ -329,12 +349,19 @@ export default {
                 api,
                 data: this.formData,
                 success: res => {
-                    this.getDeviceList(this.id); //重新加载
+                    let categoryId = this.formData.categoryId;
+                    if (categoryId instanceof Object) {
+                        categoryId = categoryId[categoryId.length - 1];
+                    }
+                    let data = {
+                        categoryId,
+                        pageSize,
+                        page: this.page
+                    };
+                    this.getDeviceList(data); //重新加载
                     // this.isShowDialog = false;
                     this.$message.success(
-                        this.isAdd
-                            ? "添加摄像头数据成功！"
-                            : "修改摄像头数据成功！"
+                        this.isAdd ? "添加设备数据成功！" : "修改设备数据成功！"
                     );
                     this.isShowDialog = false;
                 },
@@ -351,8 +378,16 @@ export default {
                 api: "/device/delete",
                 data: { id },
                 success: res => {
-                    let temp = this.formData.categoryId;
-                    this.getDeviceList(temp[temp.length - 1]); //重新加载
+                    let categoryId = this.formData.categoryId;
+                    if (categoryId instanceof Object) {
+                        categoryId = categoryId[categoryId.length - 1];
+                    }
+                    let data = {
+                        categoryId,
+                        pageSize,
+                        page: this.page
+                    };
+                    this.getDeviceList(data); //重新加载
                 },
                 fail: err => {
                     console.log(err);
@@ -374,17 +409,22 @@ export default {
         // header级联选择器选中 时
         cascaderChange(value) {
             console.log(value);
-            this.getDeviceList(value[value.length - 1]);
+            let data = {
+                categoryId: value[value.length - 1],
+                pageSize,
+                page: this.page
+            };
+            this.getDeviceList(data);
         },
-        //
+        // 挂载设备的 区域选择 改变
         selectAreaChange(value) {
             console.log(value);
             let areaId = value[value.length - 1];
             let areaTree = this.areaTree;
-            let areaName = findName(areaId)
-            this.mountform.areaName = areaName
+            let areaName = findName(areaId);
+            this.mountform.areaName = areaName;
             console.log(areaName);
-            
+
             function findName(id) {
                 let nodeName = undefined;
                 loopFind(areaTree);
@@ -415,12 +455,26 @@ export default {
             this.isShowDialog = true;
             this.formData = row;
             if (this.formData.meta instanceof Object) {
-                this.formData.meta = JSON.stringify(row.meta);
+                this.formData.meta = JSON.stringify(row.meta,null,2);
             }
         },
         // 删除
         del(row) {
             this.reqDelete(row.id);
+        },
+        pageChange(p) {
+            console.log(p);
+            this.page = p;
+            let categoryId = this.formData.categoryId;
+            if (categoryId instanceof Object) {
+                categoryId = categoryId[categoryId.length - 1];
+            }
+            let data = {
+                categoryId,
+                pageSize,
+                page: p
+            };
+            this.getDeviceList(data);
         }
     }
 };
@@ -434,4 +488,8 @@ export default {
         }
     }
 }
+
+.pagination {
+    margin-top: 20px;
+}
 </style>