.

src/components/Cascader/Cascader.vue

@@ -16,17 +16,13 @@ import { mapActions } from "vuex";
 /*  描述说明：
 options: 级联选择 树形数据
 props：配置项  （可看 https://element.eleme.cn/#/zh-CN/component/cascader ）
-expandChange： 等于 expand-change 属性
-change： 等于 change 属性
 */
 
 export default {
     name: "Cascader",
     props: {
         options: { type: Array },
-        props: { type: Object },
-        expandChange: {},
-        change: {}
+        props: { type: Object }
     },
     data() {
         return {
@@ -37,35 +33,27 @@ export default {
     methods: {
         ...mapActions(["fetch"]),
         $expandChange(value) {
-            if (typeof this.expandChange == "function") {
-                this.expandChange(value);
-            }
+            this.$emit("expand-change",value)
             this.cascaderPlaceholder = this.findAreaName(value);
-            console.log(this.props)
-            console.log(this.cascaderPlaceholder);
-            // inputValue   presentText $children
             this.$children[0].presentText= this.cascaderPlaceholder
         },
         $change(value) {
-            if (typeof this.change == "function") {
-                this.change(value);
-            }
-            console.log(value);
-            console.log(this.$children[0])
+            this.$emit("change",value)
         },
 
         // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
-        findAreaName(tree) {
+        findAreaName(valueArr) {
             let _this = this
             let i = 0;
             let tmpStr = "";
             find(this.options);
             function find(subTree) {
                 subTree.forEach(item => {
-                    if (item.id == tree[i]) {
-                        tmpStr += item.name + "/";
+                    // debugger
+                    if (item.id == valueArr[i]) {
+                        tmpStr += item[_this.props.label] + "/";
                         if (
-                            i < tree.length &&
+                            i < valueArr.length &&
                             item[_this.props.children] &&
                             item[_this.props.children].length > 0
                         ) {

src/views/deviceManagement/CameraManagement.vue

@@ -53,21 +53,21 @@
 
         <!-- 设备信息新建、编辑 -->
         <el-dialog :title="isAdd?'新建设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
-            <el-form :model="formData" label-width="100px">
-                <el-form-item label="名称：">
+            <el-form :model="formData" ref="cameraForm" :rules="rules" label-width="100px">
+                <el-form-item label="名称：" prop="name">
                     <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                 </el-form-item>
 
                 <el-form-item label="设备类型：">
                     <cascader
                         :options="cameraInfoTree"
-                        @expandChange="expandChange"
+                        @expand-change="expandChange"
                         @change="change"
                         :props="{ children: 'childs', label: 'nodeName' ,value:'id'}"
                     ></cascader>
                 </el-form-item>
 
-                <el-form-item label="MAC/SN：">
+                <el-form-item label="设备序列号：" prop="deviceNo">
                     <el-input v-model="formData.deviceNo" placeholder="设备序列号"></el-input>
                 </el-form-item>
 
@@ -108,36 +108,26 @@
                 </el-form-item>
 
                 <el-form-item label="状态：">
-                    <el-input
-                        type="textarea"
-                        :rows="4"
-                        v-model="formData.status"
-                        placeholder="输入描述"
-                    ></el-input>
+                    <el-select v-model="formData.status" placeholder="请选择">
+                        <el-option label="链接中" :value="0"></el-option>
+                        <el-option label="链接中" :value="1"></el-option>
+                        <el-option label="链接中" :value="1"></el-option>
+                        <el-option label="链接中" :value="1"></el-option>
+                    </el-select>
                 </el-form-item>
 
                 <el-form-item label="软件版本">
-                    <el-input
-                        type="textarea"
-                        :rows="4"
-                        v-model="formData.sVer"
-                        placeholder="输入描述"
-                    ></el-input>
+                    <el-input 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-input v-model="formData.hVer" placeholder="输入描述"></el-input>
                 </el-form-item>
 
                 <el-form-item label="描述：">
                     <el-input
                         type="textarea"
-                        :rows="4"
+                        :rows="2"
                         v-model="formData.description"
                         placeholder="输入描述"
                     ></el-input>
@@ -145,7 +135,7 @@
             </el-form>
             <div slot="footer">
                 <el-button @click="isShowDialog=false">取 消</el-button>
-                <el-button type="primary" @click="save">保 存</el-button>
+                <el-button type="primary" @click="submitForm('cameraForm')">保 存</el-button>
             </div>
         </el-dialog>
         <!-- 摄像头播放 -->
@@ -160,6 +150,13 @@ import { mapActions } from "vuex";
 import rtspPlayer from "../common/rtsp-player/index";
 import cascader from "../../components/Cascader/Cascader";
 
+// 表单验证规则
+const rules = {
+    name: [{ required: true, message: "请输入消息点编码", trigger: "blur" }],
+    categoryId: [{required: true,message: "请输入消息点描述",trigger: "blur"}],
+    deviceNo: [{ required: true, message: "请输入消息点描述", trigger: "blur" }]
+};
+
 export default {
     name: "CameraManagement",
     components: { rtspPlayer, cascader },
@@ -171,8 +168,10 @@ export default {
             searchParams: "",
             formData: {
                 name: "",
-                categoryId: 4,
+                categoryId: "",
                 deviceNo: "",
+                sVer: "",
+                hVer: "",
                 description: "",
                 meta: ""
             },
@@ -183,7 +182,8 @@ export default {
                 ws: null
             },
             configItems: 2, // 配置项的通道配置项数
-            isAdd: true
+            isAdd: true,
+            rules
         };
     },
     created() {
@@ -193,6 +193,15 @@ export default {
     },
     methods: {
         ...mapActions(["fetch"]),
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.dyForm);
+                } else {
+                    return false;
+                }
+            });
+        },
         // 通过code获取树
         getTreeByCode(code) {
             this.fetch({
@@ -200,9 +209,8 @@ export default {
                 method: "POST",
                 data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    console.log(res);
                     this.doSearch(res.id);
-                    this.getCameraList(res.id)
+                    this.getCameraList(res.id);
                 },
                 fail: err => {
                     console.log(err);
@@ -248,7 +256,7 @@ export default {
                     hasSub: true
                 },
                 success: res => {
-                    this.cameraInfoTree = res
+                    this.cameraInfoTree = res;
                 },
                 fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);
@@ -257,11 +265,12 @@ export default {
             });
         },
         // 选择改变
-        expandChange(e) {
-
+        expandChange(value) {
+            console.log(value);
+            this.formData.categoryId = value[value.length];
         },
-        change(e) {
-
+        change(value) {
+            console.log(value);
         },
 
         add() {