分组中添加设备支持分页

2025-12-17 16:36:03 +08:00 · 2022-07-08 23:49:26 +08:00
parent faaf0e387a
commit 89595fbf84
3 changed files with 60 additions and 61 deletions
--- a/vue/src/views/iot/device/product-list.vue
+++ b/vue/src/views/iot/device/product-list.vue
@@ -59,7 +59,7 @@ import {
 } from "@/api/iot/product";

 export default {
-    name: "Product",
+    name: "ProductList",
    dicts: ['iot_vertificate_method', 'iot_network_method'],
    props: {
        productId: {
--- a/vue/src/views/iot/group/device-list.vue
+++ b/vue/src/views/iot/group/device-list.vue
@@ -1,12 +1,11 @@
 <template>
-<div style="padding:6px;">
+<el-dialog title="选择设备" :visible.sync="openDeviceList" width="800px" append-to-body>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

@@ -27,15 +26,19 @@
            </template>
        </el-table-column>
    </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

-    <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
-
-</div>
+    <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleDeviceSelected">确 定</el-button>
+        <el-button @click="closeSelectDeviceList">取 消</el-button>
+    </div>
+</el-dialog>
 </template>

 <script>
 import {
-    getDeviceIds
+    getDeviceIds,
+    updateDeviceGroups
 } from "@/api/iot/group"
 import {
    listDeviceByGroup,
@@ -58,8 +61,8 @@ export default {
            loading: true,
            // 选中数组
            ids: [],
-            // 显示搜索条件
-            showSearch: true,
+            // 是否显示设备列表
+            openDeviceList: false,
            // 总条数
            total: 0,
            // 设备表格数据
@@ -67,8 +70,7 @@ export default {
            // 查询参数
            queryParams: {
                pageNum: 1,
-                pageSize: 500,
-                userId: null,
+                pageSize: 10,
                deviceName: null,
                productId: null,
                productName: null,
@@ -87,11 +89,13 @@ export default {
        // 获取到父组件传递的group后，刷新列表
        group: {
            handler(newVal, oldVal) {
-                this.deviceGroup = newVal;
-                // 获取分组下的设备
-                this.queryParams.userId = this.deviceGroup.userId;
-                this.queryParams.pageNum = 1;
-                this.getDeviceIdsByGroupId();
+                if (newVal.groupId) {
+                    this.deviceGroup = newVal;
+                    // 获取分组下的设备
+                    this.queryParams.userId = this.deviceGroup.userId;
+                    this.queryParams.pageNum = 1;
+                    this.getDeviceIdsByGroupId(this.deviceGroup.groupId);
+                }
            },
            immediate: true
        }
@@ -101,11 +105,9 @@ export default {
    },
    methods: {
        // 获取分组下关联的设备ID数组
-        getDeviceIdsByGroupId() {
-            getDeviceIds(this.deviceGroup.groupId).then(response => {
+        getDeviceIdsByGroupId(groupId) {
+            getDeviceIds(groupId).then(response => {
                this.ids = response.data;
-                // Id数组传递到父组件
-                this.$emit('idsToParentEvent', this.ids)
                this.getList();
            });
        },
@@ -143,13 +145,34 @@ export default {
            this.handleQuery();
        },
        // 多选框选中数据
-        handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.deviceId)
+        handleSelectionChange(selection, row) {
            this.single = selection.length !== 1
-            this.multiple = !selection.length
-            // Id数组传递到父组件
-            this.$emit('idsToParentEvent', this.ids)
+            this.multiple = !selection.length;
+
+            // 设备ID是否存在于原始设备ID数组中
+            let index = this.ids.indexOf(row.deviceId);
+            // 是否选中
+            let value = selection.indexOf(row);
+            if (index == -1 && value != -1) {
+                // 不存在且选中
+                this.ids.push(row.deviceId);
+            } else if (index != -1 && value == -1) {
+                // 存在且取消选中
+                this.ids.splice(index, 1);
+            }
        },
+        // 关闭选择设备列表
+        closeSelectDeviceList() {
+            this.openDeviceList = false;
+        },
+        // 更新分组下的设备
+        handleDeviceSelected() {
+            this.group.deviceIds=this.ids;
+            updateDeviceGroups(this.group).then(response => {
+                this.$modal.msgSuccess("更新分组下的设备成功");
+                this.openDeviceList = false;
+            })
+        }
    }
 };
 </script>
--- a/vue/src/views/iot/group/index.vue
+++ b/vue/src/views/iot/group/index.vue
@@ -39,13 +39,8 @@
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

-        <el-dialog title="选择设备" :visible.sync="openDeviceList" width="800px" append-to-body>
-            <device-list ref="deviceList" :group="group" @idsToParentEvent="getChildData($event)"></device-list>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="handleDeviceSelected">确 定</el-button>
-                <el-button @click="closeSelectDeviceList">取 消</el-button>
-            </div>
-        </el-dialog>
+        <!-- 分组设备列表 -->
+        <deviceList ref="groupDeviceList" :group="group"></deviceList>

        <!-- 添加或修改设备分组对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -78,7 +73,6 @@ import {
    delGroup,
    addGroup,
    updateGroup,
-    updateDeviceGroups
 } from "@/api/iot/group";

 export default {
@@ -89,9 +83,9 @@ export default {
    data() {
        return {
            // 是否管理员
-            isAdmin:false,
+            isAdmin: false,
            // 我的分组
-            myGroup:false,
+            myGroup: false,
            // 遮罩层
            loading: true,
            // 选中数组
@@ -110,8 +104,6 @@ export default {
            title: "",
            // 是否显示弹出层
            open: false,
-            // 是否显示设备列表
-            openDeviceList: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
@@ -131,11 +123,10 @@ export default {
                    trigger: "blur"
                }],
                groupOrder: [{
-                        required: true,
-                        message: "分组排序不能为空,最大值为99",
-                        trigger: "blur"
-                    }
-                ],
+                    required: true,
+                    message: "分组排序不能为空,最大值为99",
+                    trigger: "blur"
+                }],
            }
        };
    },
@@ -150,8 +141,8 @@ export default {
            }
        },
        // 我的分组改变事件
-        myGroupChange(){
-            this.queryParams.userId=this.myGroup?this.$store.state.user.userId:null;
+        myGroupChange() {
+            this.queryParams.userId = this.myGroup ? this.$store.state.user.userId : null;
        },
        /** 查看设备按钮操作 */
        handleViewDevice(groupId) {
@@ -177,10 +168,6 @@ export default {
            this.open = false;
            this.reset();
        },
-        // 关闭选择设备列表
-        closeSelectDeviceList() {
-            this.openDeviceList = false;
-        },
        // 表单重置
        reset() {
            this.form = {
@@ -233,8 +220,8 @@ export default {
        /** 选择设备 */
        selectDevice(row) {
            this.group = row;
-            this.openDeviceList = true;
-            // this.$refs.deviceList.getDeviceIdsByGroupId(row.groupId);
+            // 刷新子组件
+            this.$refs.groupDeviceList.openDeviceList = true;
        },
        /** 提交按钮 */
        submitForm() {
@@ -272,17 +259,6 @@ export default {
                ...this.queryParams
            }, `group_${new Date().getTime()}.xlsx`)
        },
-        // 获取子组件选中的ID数组
-        getChildData(data) {
-            this.group.deviceIds = data;
-        },
-        // 更新分组下的设备
-        handleDeviceSelected() {
-            updateDeviceGroups(this.group).then(response => {
-                this.$modal.msgSuccess("更新分组下的设备成功");
-                this.openDeviceList = false;
-            })
-        }
    }
 };
 </script>