增加了树形目录的组件

.vscode/cc.code-snippets

@@ -10,7 +10,7 @@
 		"scope": "javascript,typescript",
 		"prefix": "cc",
 		"body": [
-			"console.log('$1')",
+			"console.log($1)",
 		],
 		"description": "Log output to console"
 	}

src/components/Cascader/Cascader.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="Cascader">
+        <el-cascader
+            :options="options"
+            :props="props"
+            @expand-change="$expandChange"
+            @change="$change"
+            style="width:335px;"
+            :placeholder="cascaderPlaceholder"
+        ></el-cascader>
+    </div>
+</template>
+
+<script>
+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: {}
+    },
+    data() {
+        return {
+            cascaderPlaceholder: "请选择/不选择默认根级"
+        };
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+        $expandChange(value) {
+            if (typeof this.expandChange == "function") {
+                this.expandChange(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])
+        },
+
+        // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
+        findAreaName(tree) {
+            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 + "/";
+                        if (
+                            i < tree.length &&
+                            item[_this.props.children] &&
+                            item[_this.props.children].length > 0
+                        ) {
+                            i++;
+                            find(item[_this.props.children]);
+                        }
+                    }
+                });
+            }
+            return tmpStr;
+        }
+    }
+};
+</script>

src/components/HelloWorld.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>

src/components/Logo.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="logo">
-    <img class="img" alt="Vue logo"
-         src="../assets/logo.png">
-         
-  </div>
-</template>
-<script>
-export default {
-  name: 'logo'
-}
-</script>
-<style>
-  .img{
-    border: 1px solid #f00;
-  }
-</style>

src/module.js

@@ -1,4 +1,3 @@
-import Logo from './components/Logo.vue'
 import routes from './router/routes'
 import storeModule from './store/store-module'
 

src/views/areaManagement/AreaInfo.vue

@@ -18,8 +18,9 @@
                         <p class="hint" style="color: rgb(250, 80, 61)">提示：选择好后，点击旁白就会选中！</p>
 
                         <el-row type="flex">
-                            <el-col :span="9">
+                            <el-col :span="14">
                                 <el-cascader
+                                    style="width:335px;"
                                     :options="areaInfoTree"
                                     :props="{ children: 'children', label: 'name' ,value:'id'}"
                                     @expand-change="handleChange"
@@ -65,15 +66,32 @@
                         </el-col>
                     </el-row>
                 </el-form-item>
+               
+               <!-- 直接删除此处就行 -->
+                <hr/>
+                <el-form-item label="">
+                    <p>封装组件测试用的 </p>
+                    <cascader
+                        :options="areaInfoTree"
+                        @expandChange="()=>{}"
+                        @change="()=>{}"
+                        :props="{ children: 'children', label: 'name' ,value:'id'}"
+                    ></cascader>
+                </el-form-item>
+
             </el-form>
         </el-dialog>
     </div>
 </template>
 <script>
 import { mapActions } from "vuex";
+import Cascader from "../../components/Cascader/Cascader";
 
 export default {
     name: "AreaInfo",
+    components: {
+        cascader: Cascader
+    },
     data() {
         return {
             isShowDialog: false,
@@ -82,7 +100,7 @@ export default {
             cascaderPlaceholder: "请选择/不选择默认根级",
             formData: {
                 parentId: "-1",
-                name: "",
+                name: ""
                 // orgId: "1"
             },
             areaInfoTree: [], // tree 数据
@@ -133,13 +151,14 @@ export default {
             console.log(value);
             this.formData.parentId = value[value.length - 1];
             // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
-            this.findAreaName(value);
+            this.cascaderPlaceholder = this.findAreaName(value);
         },
         change(value) {
             console.log("aa");
             console.log(value);
             this.formData.parentId = value[value.length - 1];
             console.log("a==>>" + this.formData.parentId);
+            console.log(this.$children)
         },
         // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
         findAreaName(tree) {

src/views/deviceManagement/SubDeviceAdmin.vue

@@ -16,9 +16,9 @@
             <el-table-column prop="communicationId" label="通讯ID"></el-table-column>
             <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
             <el-table-column prop="channelNo" label="通道"></el-table-column>
-            <el-table-column label="是否可用">
+            <el-table-column label="使能状态">
                 <template slot-scope="scope">
-                    <span>{{ scope.row.enable==1?"可用":scope.row.enable==0?"不可用":scope.row.enable }}</span>
+                    <span>{{ scope.row.enable==1?"工作":scope.row.enable==0?"关闭":scope.row.enable }}</span>
                 </template>
             </el-table-column>
             <el-table-column label="最后一次">