挂载设备完成

src/views/deviceManagement/DeviceInfo.vue

@@ -39,6 +39,7 @@
                 </el-table-column>
                 <el-table-column fixed="right" label="操作" width="200">
                     <template slot-scope="scope">
+                        <el-button @click="mount(scope.row)" type="text" size="small">挂载</el-button>
                         <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                         <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                             <el-button slot="reference" type="text" size="small">删除</el-button>
@@ -50,7 +51,7 @@
 
         <!-- 设备信息新建、编辑 -->
         <el-dialog :title="isAdd?'新增设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
-            <el-form :model="formData" ref="cameraForm" :rules="rules" label-width="120px">
+            <el-form :model="formData" ref="addDeviceForm" :rules="rules" label-width="120px">
                 <el-form-item label="名称：" prop="name">
                     <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
@@ -89,7 +90,42 @@
             </el-form>
             <div slot="footer">
                 <el-button @click="isShowDialog=false">取 消</el-button>
-                <el-button type="primary" @click="submitForm('cameraForm')">保 存</el-button>
+                <el-button type="primary" @click="submitForm('addDeviceForm')">保 存</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 设备挂载dialog -->
+        <el-dialog title="设备挂载" :visible.sync="isShowDialogMount" append-to-body>
+            <el-form :model="mountform" ref="mountForm" :rules="mountRules" label-width="120px">
+                <el-form-item label="挂载区域：">
+                    <el-cascader
+                        :options="areaTree"
+                        :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
+                        v-model="mountform.areaId"
+                        @change="selectAreaChange"
+                        clearable
+                        placeholder="请选择要查看的类型"
+                    >
+                        <template slot-scope="{ node, data }">
+                            <span>{{ data.nodeName }}</span>
+                            <!-- <span v-if="!node.isLeaf">({{ data.childs.length }})</span> -->
+                        </template>
+                    </el-cascader>
+                </el-form-item>
+
+                <el-form-item label="配置信息：" prop="meta">
+                    <el-input
+                        v-model="mountform.meta"
+                        placeholder="请输入JSON格式的配置信息"
+                        type="textarea"
+                        :rows="3"
+                        :autosize="{ minRows: 4 }"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button type="primary" @click="submitMountForm('mountForm')">确认挂载</el-button>
             </div>
         </el-dialog>
     </div>
@@ -98,11 +134,21 @@
 <script>
 import { mapActions } from "vuex";
 
-// 表单验证规则
+// 新增设备 表单验证规则
 const rules = {
     name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
     deviceNo: [{ required: true, message: "请输入设备序列号", trigger: "blur" }]
 };
+// 挂载设备 表单验证规则
+const mountRules = {
+    moumtArea: [{ type: 'array', required: true, message: "请选择挂载区域", trigger: "change" }],
+    meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
+};
+
+// 设备树 code
+const deviceTypeCode = "device-type";
+// 区域树 code
+const arearCode = "area-info";
 
 const formDataInit = {
     name: "",
@@ -112,6 +158,13 @@ const formDataInit = {
     status: "",
     description: ""
 };
+// 设备挂载formData 初始化
+const mountformInit = {
+    id: null,
+    areaId: null,
+    areaName: null,
+    meta: null
+};
 
 export default {
     name: "DeviceInfo",
@@ -119,17 +172,22 @@ export default {
         return {
             id: "",
             deviceTypeTree: [],
+            areaTree: [],
             deviceList: [],
             isShowDialog: false,
+            isShowDialogMount: false,
             formData: formDataInit,
+            mountform: mountformInit,
             configItems: 2, // 配置项的通道配置项数
             isAdd: true,
-            rules
+            rules,
+            mountRules
         };
     },
     created() {
         // 获取设备信息 树
-        this.getTreeByCode("device-type");
+        this.getTreeByCode(deviceTypeCode);
+        this.getTreeByCode(arearCode);
     },
     methods: {
         ...mapActions(["fetch"]),
@@ -142,6 +200,18 @@ export default {
                 }
             });
         },
+        submitMountForm(formName) {
+            if(this.mountform.areaId) this.mountRules.moumtArea = null
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.mountform);
+                    // 请求 挂载设备
+                    this.getMountDevice(this.mountform)
+                } else {
+                    return false;
+                }
+            });
+        },
         // 通过code获取树
         getTreeByCode(code) {
             this.fetch({
@@ -150,9 +220,11 @@ export default {
                 data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
                     this.id = res.id;
-                    // this.getDeviceList(res.id);
-
-                    this.getDeviceTree(res.id);
+                    if (code == deviceTypeCode) {
+                        this.getDeviceTree(res.id);
+                    } else if (code == arearCode) {
+                        this.getAreaTree(res.id);
+                    }
                 },
                 fail: err => {
                     console.log(err);
@@ -172,7 +244,7 @@ export default {
                 method: "POST",
                 data: { categoryId }, //目前只有一个组织,其他参数调整钟 732971735112749056
                 success: res => {
-                    this.deviceList = res;
+                    this.deviceList = res.content;
                 },
                 fail: err => {
                     if (err.errCode == "request_not_authorize") {
@@ -186,7 +258,7 @@ export default {
             });
         },
 
-        // 请求 拿到摄像头列表
+        // 请求 拿到设备树
         getDeviceTree(parentId) {
             this.fetch({
                 api: "/publics/treenode/listNodeByParent",
@@ -204,6 +276,43 @@ export default {
                 }
             });
         },
+
+        // 请求 挂载设备
+        getMountDevice(data) {
+            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("挂载设备成功！")
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+
+        // 请求 区域树
+        getAreaTree(parentId) {
+            this.fetch({
+                api: "/publics/treenode/listNodeByParent",
+                method: "POST",
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.areaTree = res;
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
         // 编辑的保存按钮
         save() {
             if (this.formData.meta instanceof Object) {
@@ -262,11 +371,43 @@ export default {
             if (this.formData.id) delete this.formData.id;
             this.isShowDialog = true;
         },
-        // 级联选择器选中 时
+        // header级联选择器选中 时
         cascaderChange(value) {
             console.log(value);
             this.getDeviceList(value[value.length - 1]);
         },
+        //
+        selectAreaChange(value) {
+            console.log(value);
+            let areaId = value[value.length - 1];
+            let areaTree = this.areaTree;
+            let areaName = findName(areaId)
+            this.mountform.areaName = areaName
+            console.log(areaName);
+            
+            function findName(id) {
+                let nodeName = undefined;
+                loopFind(areaTree);
+                function loopFind(tree) {
+                    tree.forEach(item => {
+                        if (item.id == id) {
+                            nodeName = item.nodeName;
+                        } else if (item.childs) {
+                            loopFind(item.childs);
+                        } else {
+                            return;
+                        }
+                    });
+                }
+                return nodeName;
+            }
+        },
+        // 挂载
+        mount(row) {
+            console.log(row);
+            this.isShowDialogMount = true;
+            this.mountform.id = row.id;
+        },
 
         // 编辑
         edit(row) {

src/views/deviceManagement/DeviceType.vue

@@ -146,6 +146,7 @@ export default {
                             message: "请重新登录",
                             type: "warning"
                         });
+                        this.$router.push("login")
                     }
                 }
             });