.

src/views/deviceManagement/CameraManagement.vue

@@ -57,57 +57,83 @@
                 <el-form-item label="名称：">
                     <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
+
                 <el-form-item label="设备类型：">
-                    <el-select
-                        v-for="(arrItem,key) in typeTree"
-                        :key="key"
-                        v-model="selectArr[key]"
-                        filterable
-                        placeholder="请选择"
-                        value-key="id"
-                        @change="selectedEvt"
-                        @focus="position=key"
-                    >
-                        <el-option
-                            v-for="item in arrItem"
-                            :key="item.id"
-                            :value="item.id"
-                            :label="item.name"
-                        ></el-option>
-                    </el-select>
+                    <cascader
+                        :options="cameraInfoTree"
+                        @expandChange="expandChange"
+                        @change="change"
+                        :props="{ children: 'childs', label: 'nodeName' ,value:'id'}"
+                    ></cascader>
                 </el-form-item>
+
                 <el-form-item label="MAC/SN：">
-                    <el-input v-model="formData.deviceNo" placeholder="MAC或者SN"></el-input>
+                    <el-input v-model="formData.deviceNo" placeholder="设备序列号"></el-input>
                 </el-form-item>
-                <!-- <el-form-item label="配置信息：">
-                    <el-input
-                        type="textarea"
-                        autosize
-                        :rows="2"
-                        v-model="formData.meta"
-                        placeholder="先用json做配置，后期可不同类型不同编辑框"
-                    ></el-input>
-                </el-form-item> -->
+
                 <el-form-item label="配置信息：">
-                    <el-row type="flex" justify="space-between" :gutter="20" style="margin-bottom:10px" v-for="item in configItems" :key="item">
-                        <el-col :span="3" style="text-align:right">
-                            rtsp：{{item}}
-                        </el-col>
+                    <el-row
+                        type="flex"
+                        justify="space-between"
+                        :gutter="20"
+                        style="margin-bottom:10px"
+                        v-for="item in configItems"
+                        :key="item"
+                    >
+                        <el-col :span="3" style="text-align:right">rtsp：{{item}}</el-col>
                         <el-col :span="7">
-                            <el-input  placeholder="请输入内容"></el-input>
-                        </el-col>
-                        <el-col :span="3" style="text-align:right">
-                            ws：
+                            <el-input placeholder="请输入内容"></el-input>
                         </el-col>
+                        <el-col :span="3" style="text-align:right">ws：</el-col>
                         <el-col :span="7">
-                            <el-input  placeholder="请输入内容"></el-input>
+                            <el-input placeholder="请输入内容"></el-input>
                         </el-col>
                         <el-col :span="4">
-                            <el-button v-show="item==configItems" @click="plus" type="primary" icon="el-icon-plus" circle></el-button>
-                            <el-button v-show="item==configItems&configItems>1" @click="minus" type="primary" icon="el-icon-minus" circle></el-button>
+                            <el-button
+                                v-show="item==configItems"
+                                @click="plus"
+                                type="primary"
+                                icon="el-icon-plus"
+                                circle
+                            ></el-button>
+                            <el-button
+                                v-show="item==configItems&configItems>1"
+                                @click="minus"
+                                type="primary"
+                                icon="el-icon-minus"
+                                circle
+                            ></el-button>
                         </el-col>
                     </el-row>
                 </el-form-item>
+
+                <el-form-item label="状态：">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.status"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+
+                <el-form-item label="软件版本">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.sVer"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+
+                <el-form-item label="硬件版本">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.hVer"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+
                 <el-form-item label="描述：">
                     <el-input
                         type="textarea"
@@ -132,19 +158,17 @@
 <script>
 import { mapActions } from "vuex";
 import rtspPlayer from "../common/rtsp-player/index";
+import cascader from "../../components/Cascader/Cascader";
 
 export default {
     name: "CameraManagement",
-    components: { rtspPlayer },
+    components: { rtspPlayer, cascader },
     data() {
         return {
-            typeList: [],
-            typeTree: [],
+            cameraInfoTree: [],
             deviceList: [],
-            position: null,
-            selectArr: [],
             isShowDialog: false,
-            searchParams: '',
+            searchParams: "",
             formData: {
                 name: "",
                 categoryId: 4,
@@ -160,12 +184,11 @@ export default {
             },
             configItems: 2, // 配置项的通道配置项数
             isAdd: true
-            
         };
     },
     created() {
         // 获取摄像头 树
-        this.getTreeByCode("ip-cam")
+        this.getTreeByCode("ip-cam");
         // this.doSearch();
     },
     methods: {
@@ -177,11 +200,12 @@ export default {
                 method: "POST",
                 data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    console.log(res)
-                    this.doSearch(res.id)
+                    console.log(res);
+                    this.doSearch(res.id);
+                    this.getCameraList(res.id)
                 },
                 fail: err => {
-                    console.log(err)
+                    console.log(err);
                     this.$message.error("请重新登录");
 
                     if (err.errCode == "request_not_authorize") {
@@ -197,7 +221,7 @@ export default {
             this.fetch({
                 api: "/device/list",
                 method: "POST",
-                data: { categoryId }, //目前只有一个组织,其他参数调整钟
+                data: { categoryId }, //目前只有一个组织,其他参数调整钟 732971735112749056
                 success: res => {
                     this.deviceList = res;
                 },
@@ -213,12 +237,35 @@ export default {
                 }
             });
         },
-        // 设备信息新建、编辑里的 选择设备类型
-        selectedEvt(item) {
-            //获取下一级列表
+
+        // 请求 拿到摄像头列表
+        getCameraList(parentId) {
+            this.fetch({
+                api: "/publics/treenode/listNodeByParent",
+                method: "POST",
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.cameraInfoTree = res
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
         },
+        // 选择改变
+        expandChange(e) {
+
+        },
+        change(e) {
+
+        },
+
         add() {
-            this.isAdd = true
+            this.isAdd = true;
             this.formData = {
                 orgId: 1,
                 name: "",
@@ -226,7 +273,7 @@ export default {
                 deviceNo: "",
                 description: "",
                 meta: ""
-            }
+            };
             if (this.formData.id) delete this.formData.id;
             this.isShowDialog = true;
         },
@@ -247,18 +294,18 @@ export default {
         // 编辑
         edit(row) {
             console.log(row);
-            this.isAdd = false
+            this.isAdd = false;
             // 判断是为了重复点击不会重复格式化
-            if(typeof row.meta == "object"){
+            if (typeof row.meta == "object") {
                 row.meta = JSON.stringify(row.meta, null, 4);
             }
-                // orgId: 1,
-                // name: "",
-                // categoryId: null,
-                // deviceNo: "",
-                // description: "",
-                // meta: ""
-            
+            // orgId: 1,
+            // name: "",
+            // categoryId: null,
+            // deviceNo: "",
+            // description: "",
+            // meta: ""
+
             if (this.formData.id) {
                 delete this.formData.id;
                 delete this.formData.name;
@@ -283,9 +330,6 @@ export default {
         },
         // 编辑的保存按钮
         save() {
-            this.formData.categoryId = this.selectArr[
-                this.selectArr.length - 1
-            ];
             let api = this.isAdd
                 ? "/device/device/add"
                 : "/device/device/update";
@@ -307,24 +351,23 @@ export default {
         },
         // 配置项增加
         plus() {
-            this.configItems++
+            this.configItems++;
         },
         // 配置项减少
         minus() {
-            if(this.configItems<=1) return
-            this.configItems--
+            if (this.configItems <= 1) return;
+            this.configItems--;
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-.CameraManagement{
-    .dialog{
-        .item_row{
+.CameraManagement {
+    .dialog {
+        .item_row {
             display: flex;
         }
     }
 }
-
 </style>