抽离出了 设备挂载的form

src/components/mountForm/mountForm.vue

@@ -0,0 +1,182 @@
+<template>
+    <div>
+        <el-form :model="mountform" :ref="_ref" :rules="mountRules" label-width="120px">
+            <el-form-item label="挂载区域：">
+                <el-cascader
+                    :options="areaTree"
+                    :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
+                    
+                    @change="change"
+                    clearable
+                    placeholder="请选择挂载区域"
+                >
+                    <template slot-scope="{ node, data }">
+                        <span>{{ data.nodeName }}</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="cancel">取 消</el-button>
+            <el-button type="primary" @click="confirm(_ref)">确认挂载</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+
+// 区域树 code
+const arearCode = "area-info";
+// 挂载设备 表单验证规则
+const mountRules = {
+    moumtArea: [
+        {
+            type: "array",
+            required: true,
+            message: "请选择挂载区域",
+            trigger: "change"
+        }
+    ],
+    meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
+};
+
+export default {
+    data() {
+        return {
+            id: "",
+            mountform: {
+                areaId: null,
+                areaName: null,
+                meta: null
+            },
+            areaTree: [],
+            mountRules
+        };
+    },
+    props: {
+        rowData: {},
+        _ref: String
+    },
+    created() {
+        this.getTreeByCode(arearCode);
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        // 通过code获取树
+        getTreeByCode(code) {
+            this.fetch({
+                api: "/publics/treenode/getTreeByCode",
+                method: "POST",
+                data: { code }, //目前只有一个组织,其他参数调整钟
+                success: res => {
+                    this.id = res.id;
+                    this.getAreaTree(res.id);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                }
+            });
+        },
+        // 请求 区域树
+        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("服务器发生异常");
+                }
+            });
+        },
+        // 选择器改变
+        change(value) {
+            // this.$emit('change')
+            console.log(value);
+
+            let areaId = value[value.length - 1];
+            this.mountform.areaId = areaId
+            let areaTree = this.areaTree;
+            this.mountform.areaName = findName(areaId);
+
+            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;
+            }
+        },
+        //确认
+        confirm(formName) {
+            // this.$emit('submitMountForm', formName)
+            if (this.mountform.areaId) this.mountRules.moumtArea = null;
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    // 请求 挂载设备
+                    this.getMountDevice(this.mountform);
+                } else {
+                    return false;
+                }
+            });
+        },
+        // 取消
+        cancel() {
+            this.$emit("cancel");
+        },
+        // 请求 挂载设备
+        getMountDevice(data) {
+            data.id = this.rowData.id
+            data.categoryId = this.rowData.categoryId
+            this.fetch({
+                api: "/device/device/mount",
+                method: "POST",
+                data,
+                success: res => {
+                    this.$message.success("挂载设备成功！");
+                    // this.isShowDialogMount = false;
+                    // this.$parent.$props.visible = false
+                    this.$emit('cancel')
+                    console.log(this.$parent.$props)
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>

src/views/deviceManagement/CameraManagement.vue

@@ -27,6 +27,7 @@
                             type="text"
                             v-if="isCamera(scope.row.categoryId)"
                         >播放</el-button>
+                        <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>
@@ -126,6 +127,7 @@
                 </el-form-item>
             </el-form>
             <div slot="footer">
+                
                 <el-button @click="isShowDialog=false">取 消</el-button>
                 <el-button type="primary" @click="submitForm('cameraForm')">保 存</el-button>
             </div>
@@ -141,11 +143,17 @@
                 <i class="el-icon-loading"></i>
             </div>
         </div>
+
+        <el-dialog title="设备挂载" :visible.sync="showMount" append-to-body>
+            <mountForm _ref="mountFormCamera" @cancel="showMount=false" :rowData="rowData"/>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import { mapActions,mapState } from "vuex";
+import mountForm from "@/components/mountForm/mountForm";
+
 // import rtspPlayer from "../common/rtsp-player/index";
 // import jsmpegPlayer from "../common/jsmpeg-player"
 
@@ -162,10 +170,15 @@ const pageSize = 10;
 
 export default {
     name: "CameraManagement",
+    components:{
+        mountForm
+    },
     data() {
         return {
             id: "",
+            showMount: false,
             cameraInfoTree: [],
+            rowData: {},
             deviceList: [],
             isShowDialog: false,
             formData: {
@@ -210,6 +223,7 @@ export default {
         loginIp:state=>state.loginIp
     }),
     created() {
+        
         // 获取摄像头 树
         this.getTreeByCode(cameraCode);
         console.log(this.wanIp,this.lanIp,this.loginIp)
@@ -224,6 +238,11 @@ export default {
     },
     methods: {
         ...mapActions(["fetch"]),
+        // 摄像头挂载
+        mount(row) {
+            this.rowData = row
+            this.showMount = true
+        },
         submitForm(formName) {
             this.$refs[formName].validate(valid => {
                 if (valid) {

src/views/deviceManagement/DeviceInfo.vue

@@ -105,67 +105,27 @@
         </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="isShowDialogMount=false">取 消</el-button>
-                <el-button type="primary" @click="submitMountForm('mountForm')">确认挂载</el-button>
-            </div>
+        <el-dialog title="设备挂载" :visible.sync="show" append-to-body>
+            <mountForm _ref="mountForm" @cancel="show=false" :rowData="rowData"/>
         </el-dialog>
+        
     </div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
 
+import mountForm from "@/components/mountForm/mountForm";
+
 // 新增设备 表单验证规则
 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 pageSize = 10;
 
@@ -189,26 +149,27 @@ export default {
     name: "DeviceInfo",
     data() {
         return {
+            show: false,
+            rowData: {},
             id: "",
             deviceTypeTree: [],
-            areaTree: [],
             deviceList: [],
             isShowDialog: false,
-            isShowDialogMount: false,
             formData: formDataInit,
-            mountform: mountformInit,
             configItems: 2, // 配置项的通道配置项数
             isAdd: true,
             rules,
-            mountRules,
             pageSize,
             page: 1
         };
     },
+    components:{
+        mountForm
+    },
     created() {
         // 获取设备信息 树
         this.getTreeByCode(deviceTypeCode);
-        this.getTreeByCode(arearCode);
+        // this.getTreeByCode(arearCode);
 
         if (this.formData.categoryId) {
             let categoryId = this.formData.categoryId;
@@ -222,6 +183,12 @@ export default {
     },
     methods: {
         ...mapActions(["fetch"]),
+        // 表格 的 挂载
+        mount(row) {
+            this.rowData = row
+            this.show = true
+        },
+
         submitForm(formName) {
             this.$refs[formName].validate(valid => {
                 if (valid) {
@@ -231,17 +198,6 @@ export default {
                 }
             });
         },
-        submitMountForm(formName) {
-            if (this.mountform.areaId) this.mountRules.moumtArea = null;
-            this.$refs[formName].validate(valid => {
-                if (valid) {
-                    // 请求 挂载设备
-                    this.getMountDevice(this.mountform);
-                } else {
-                    return false;
-                }
-            });
-        },
         // 通过code获取树
         getTreeByCode(code) {
             this.fetch({
@@ -250,11 +206,8 @@ export default {
                 data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
                     this.id = res.id;
-                    if (code == deviceTypeCode) {
-                        this.getDeviceTree(res.id);
-                    } else if (code == arearCode) {
-                        this.getAreaTree(res.id);
-                    }
+                    this.getDeviceTree(res.id);
+                    
                 },
                 fail: err => {
                     console.log(err);
@@ -307,24 +260,6 @@ export default {
             });
         },
 
-        // 请求 挂载设备
-        getMountDevice(data) {
-            data.areaId = data.areaId[data.areaId.length - 1];
-            this.fetch({
-                api: "/device/device/mount",
-                method: "POST",
-                data,
-                success: res => {
-                    this.$message.success("挂载设备成功！");
-                    this.isShowDialogMount = false;
-                },
-                fail: err => {
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
-        },
-        //
         look(row) {
             this.$router.push({
                 path: "deviceHumiture",
@@ -332,24 +267,7 @@ export default {
             });
         },
 
-        // 请求 区域树
-        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) {
@@ -433,38 +351,6 @@ export default {
             };
             this.getDeviceList(data);
         },
-        // 挂载设备的 区域选择 改变
-        selectAreaChange(value) {
-            console.log(value);
-            let areaId = value[value.length - 1];
-            let areaTree = this.areaTree;
-            this.mountform.areaName = findName(areaId);
-
-            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;
-            this.mountform.categoryId = row.categoryId;
-        },
-
         // 编辑
         edit(row) {
             this.isAdd = false;