树状图

src/views/devicePhotoSchedule/components/setdevice.vue

@@ -1,8 +1,28 @@
 <template>
-  <el-dialog class="addLineDialog" title="设置" :visible.sync="isShow" :close-on-click-modal="false" width="40%" >
-    <el-form label-position="left" ref="formInfo" label-width="100px" :rules="rules" :model="formdata" >
+  <el-dialog
+    class="addLineDialog"
+    title="设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="40%"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="100px"
+      :rules="rules"
+      :model="formdata"
+    >
       <el-form-item label="通道：" prop="name">
-        <el-tree :data="listnr" show-checkbox :props="defaultProps" ref="tree" node-key="id" ></el-tree>
+        <el-tree
+          :data="listnr"
+          show-checkbox
+          :props="defaultProps"
+          ref="tree"
+          node-key="id"
+          :default-expand-all="true"
+          @check-change="handleCheckChange"
+        ></el-tree>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
@@ -13,63 +33,83 @@
   </el-dialog>
 </template>
 <script>
-import { setScheduleRulel,getScheduleRulelAccessList } from "@/utils/api/index";
+import {
+  setScheduleRulel,
+  getScheduleRulelAccessList,
+} from "@/utils/api/index";
 export default {
   props: {
-    title:String
+    title: String,
   },
   data() {
     return {
       isShow: false,
       formdata: {},
       rules: {
-        name: [
-          { required: true, message: "请选择通道", trigger: "blur" },
-        ],
+        name: [{ required: true, message: "请选择通道", trigger: "blur" }],
       },
       listnr: [],
       defaultProps: {
-        children: 'list',
-        label: 'name'
+        children: "list",
+        label: "name",
       },
-      selid:0
+      selid: 0,
     };
   },
   mounted() {
-    this.getlistnr()
+    this.getlistnr();
   },
   methods: {
     //判断
-    getdataform(val){
-      this.selid = val.id
+    getdataform(val) {
+      this.selid = val.id;
       // if (val==null) {
       //   return this.formdata = {}
-      // } 
+      // }
       // this.formdata = val
       // this.$set(this.formdata,'time',[val.startTime, val.endTime])
     },
     //获取所有通道
-    getlistnr(){
-      getScheduleRulelAccessList({}).then((res) => {
-        this.listnr = res.data.list
-      }).catch((err) => {});
+    getlistnr() {
+      getScheduleRulelAccessList({})
+        .then((res) => {
+          this.listnr = res.data.list;
+        })
+        .catch((err) => {});
     },
+    handleCheckChange(data, checked, indeterminate) {
+      //获取所有选中的节点 start
+
+      if (checked == true) {
+        console.log(checked, indeterminate);
+
+        console.log(data);
+
+        //获取所有选中的节点 end
+      }
+    },
+
     //获取所选值
     getCheckedNodes() {
-      console.log(this.$refs.tree.getCheckedNodes());
+      console.log(this.$refs.tree);
+
+      console.log("当前选中的id是" + this.$refs.tree.getCheckedKeys(true));
+      console.log("当前选中的id是" + this.$refs.tree.getCheckedKeys(false));
     },
+
     // 保存确定操作
     submitForm() {
       this.$refs.formInfo.validate((valid) => {
         if (valid) {
-          setScheduleRulel({ list: formArr }).then((res) => {
-            this.isShow = false
-            this.$message.success("添加成功");
-            this.$parent.deviceList()
-          })
-          .catch((err) => {
-            this.$message.error("添加失败");
-          });
+          setScheduleRulel({ list: formArr })
+            .then((res) => {
+              this.isShow = false;
+              this.$message.success("添加成功");
+              this.$parent.deviceList();
+            })
+            .catch((err) => {
+              this.$message.error("添加失败");
+            });
         } else {
           console.log("error submit!!");
           return false;
@@ -77,11 +117,11 @@ export default {
       });
     },
     display() {
-      this.isShow = true
+      this.isShow = true;
     },
     hide() {
-      this.isShow = false
-    }
-  }
+      this.isShow = false;
+    },
+  },
 };
 </script>