tree 数据结构不同显示编辑

<template>
  <div id="contents">

    <div class="viewcontact">
      <div class="viewtable">
        <div class="viewtitle">
          <span class="newpel">
            <el-button size="mini" round @click="buildnew">新增部门</el-button>
          </span>
        </div>
        <div>
          <el-table id="mytable" stripe :data="tableDatas" border :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column label="序号" type="index" :resizable="resizable" align="center">
            </el-table-column>
            <el-table-column prop="name" label="部门名称" :resizable="resizable" align="center">
            </el-table-column>
            <el-table-column prop="create_time" label="添加时间" :resizable="resizable" align="center">
            </el-table-column>
            <el-table-column label="操作" :resizable="resizable" align="center">
              <template slot-scope="scope">
                <span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" v-if="scope.row.state == 2"
                  @click="Detailed(scope.row)">权限明细</span>
                <span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" @click="editinfo(scope.row)">修改名称</span>
                <span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" @click="delinfo(scope.row)">删除</span>
                <span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" @click="Detailed(scope.row)">权限明细</span>
                <span style="color: #409EFF;margin: 0px 8px;display: inline-block;cursor:pointer" v-if="scope.row.state == 1"
                  @click="editinfo(scope.row)">修改名称</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div id="pages">
        </div>
      </div>
    </div>

    <div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="viewshow">
      <div class="el-dialog" style="padding:20px 20px; margin-top: 120px;overflow: hidden;clear: both; width: 30%;">
        <div class="el-dialog__header">
          <span style="display: inline-block;float: left; font-size: 14px;">{{addtitle}}</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeself">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <ul class="addvview" style="margin-top: 50px; width: 80%; margin-left: auto;margin-right: auto;">
          <li>
            <span style="font-size: 14px; width: 90px;">部门名称：</span>
            <el-input v-model="valname" placeholder="请输入内容" class="addinput"></el-input>
          </li>
          <li>
            <el-button type="primary" style="margin:20px auto; display:block; text-align: center;" @click="makesure">确定</el-button>
          </li>
        </ul>
      </div>
    </div>
    <!--//明细显示-->
    <div class="el-dialog__wrapper" style="background: rgba(0,0,0,0.5); z-index: 100;" v-show="detshow">
      <div class="el-dialog" style="padding:20px 20px; margin-top: 120px;overflow: hidden;clear: both; width: 40%;">
        <div class="el-dialog__header">
          <span style="">权限明细</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closedet">
            <i class="el-dialog__close el-icon el-icon-close"></i>
          </button>
        </div>
        <div class="shuzhuangtu">
          <el-tree :data="TreeData" show-checkbox node-key="id" ref="rootTree" :default-expand-all="showall"
            :default-checked-keys="GotData" :props="defaultProps" @check="currentChecked">
          </el-tree>
        </div>
        <ul class="addvview">
          <li style="width: 40%;">
            <el-button type="primary" style="float: left;" @click="Savedata">保存</el-button>
            <el-button type="danger" style="float: left; margin-left: 20px;" @click="detClear">取消</el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  // import HelloWorld from "@/components/HelloWorld.vue";

  export default {
    name: "transfer",
    components: {},
    data() {
      return {
        bumenid: "",
        departmentId: "",
        styleType: "",
        showall: true,
        addtitle: "",
        valpass: "",
        valbank: "",
        valname: "",
        valstate: "",
        isSelect: true,
        source: -1,
        storeId: null,
        fromTime: null,
        toTime: null,
        put_storage: [],
        resizable: false,
        currentPage: 1,
        tableData: [],
        searchValue: '',
        total: 1,
        value2: null,
        value3: -1,
        value4: "",
        value5: "",
        viewshow: false,
        detshow: false,
        multipleSelection: [],
        GotData: [],
        TreeData: [],
        ParentsID: [],
        ALLSonID:[],
        HasBaby:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    methods: {
      //获取tree数据
      GettreeData() {
        this.axios.post(`/role/menu/list`)
          .then(res => {
            if (res.code === 200) {
              this.TreeData = res.data;
              console.log("获取所有树的数据")
              console.log(this.TreeData)
              for (let item of res.data) {
                this.ParentsID.push(item.id)
                if(item.children.length>0){
                  this.HasBaby.push(item.id)
                  for(let each of item.children){
                    this.ALLSonID.push(each.id)
                  }
                }
              }
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
      },

      //树数据整合
      Savedata() {
        var aKey = this.getCheckedKeys(this.TreeData, this.$refs.rootTree.getCheckedKeys(), 'id');
        var logindata = {
          id: this.bumenid,
          ids: aKey.join(',')
        }
        this.axios.post(`/role/permission/do`, logindata).then(res => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.detshow = false;
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      },
      getCheckedKeys(data, keys, key) {
        var res = [];
        recursion(data, false);
        return res;
        // arr -> 树形总数据
        // keys -> getCheckedKeys获取到的选中key值
        // isChild -> 用来判断是否是子节点
        function recursion(arr, isChild) {
          var aCheck = [];
          for (var i = 0; i < arr.length; i++) {
            var obj = arr[i];
            aCheck[i] = false;
            if (obj.children) {
              aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
              if (aCheck[i]) {
                res.push(obj[key]);
              }
            }
            for (var j = 0; j < keys.length; j++) {
              if (obj[key] == keys[j]) {
                aCheck[i] = true;
                if (res.indexOf(obj[key]) == -1) {
                  res.push(obj[key]);
                }
                break;
              }
            }
          }
          if (isChild) {
            return aCheck.indexOf(true) != -1;
          }
        }
      },
      currentChecked(val) {
        //console.log(val)
      },
      detClear() {
        this.detshow = false;
        //this.$refs.multipleTable.clearSelection();
      },
      delinfo(delval) {
        //console.log(delval.id)
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var putdata = {
            id: delval.id
          }
          this.axios.post(`/role/remove`, putdata).then(res => {
            if (res.code == 200) {
              this.getList(1);
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.getList(1);
            } else {
              this.$message({
                type: 'warning',
                message: res.msg
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editinfo(infoval) {
        this.styleType = 2;
        this.viewshow = true;
        this.addtitle = "修改名称";
        this.departmentId = infoval.id;
        this.valname = infoval.name;
        this.valstate = infoval.status;

      },
      //获取权限明细
      Detailed(detval) {
        this.detshow = true;
        this.$refs.rootTree.setCheckedKeys([]);
        this.GotData = [];
        this.bumenid = detval.id;
        let myData = {
          id: detval.id,
        };
        this.axios.post(`/role/permission/get`, myData).then(res => {
          if (res.code === 200) {
            var FATCHdata = [];
            console.log(res.data)
            for (let item of res.data) {
              FATCHdata.push(item.menuId)
            }
            var tempArray1 = []; //临时数组1
            var tempArray2 = []; //临时数组2
            for (var i = 0; i < this.ParentsID.length; i++) {
              tempArray1[this.ParentsID[i]] = true; //将数array2 中的元素值作为tempArray1 中的键，值为true；
            }
            for (var i = 0; i < FATCHdata.length; i++) {
                tempArray2.push(FATCHdata[i]); //过滤array1 中与array2 相同的元素；
            }
            console.log(tempArray2)

             for (var i = 0; i < tempArray2.length; i++) {
                    for (var j = 0; j < this.HasBaby.length; j++) {
                        if (tempArray2[i] === this.HasBaby[j]) {
                            tempArray2.splice(i, 1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
                        }
                    }
                }
            this.GotData = tempArray2
            console.log(this.GotData)
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
        //this.GotData=[24]//这是编辑好的回显需要的数组
        this.detshow = true;
        //这是个接口获取权限明细
      },
      closedet() {
        this.detshow = false;
        //this.$refs.multipleTable.clearSelection();
      },
      makesure() {
        if (this.valname == "") {
          this.$message.error('请填写名称，再次提交！');
          return
        }
        if (this.styleType === 1) { //增加部门
          let myData = {
            name: this.valname,
          };
          this.axios.post(`/role/insert`, myData).then(res => {
            if (res.code === 200) {
              this.getList(1)
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
          this.viewshow = false;
        } else if (this.styleType === 2) { //修改部门名称
          let myData = {
            name: this.valname,
            id: this.departmentId,
          };
          this.axios.post(`/role/update`, myData).then(res => {
            if (res.code === 200) {
              this.getList(1)
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
          this.viewshow = false;
        }
      },
      closeself() {
        this.viewshow = false;
      },
      buildnew() {
        this.styleType = 1;
        this.valname = "";
        this.viewshow = true;
        this.addtitle = "新增部门";
      },
      changepages(a) {
        this.currentPage = a
      },
      reset() {
        this.value4 = this.value5 = this.input = '';
        this.getList(1);
      },
      getLists(a) {
        this.fromTime = this.value4;
        this.toTime = this.value5;
        if (this.value5 == "" || this.value4 == "") {
          this.getList(a)
        } else {
          if (this.value4 <= this.value5) {
            this.getList(a)
          } else {
            this.$message({
              type: 'warning',
              message: '日期选择错误'
            });
            this.value5 = "";
          }
        }
      },
      getList(a) {
        let myData = {
          page: a,
          limit: 10,
        };
        this.axios.post(`/role/list`, myData)
          .then(res => {
            if (res.code === 200) {
              //console.log(res.data.data)
              this.tableData = res.data.records;
              this.total = res.data.count;
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          })
      },
    },
    computed: {
      tableDatas: function() {
        var search = this.searchValue;
        if (search) {
          return this.tableData.filter(function(product) {
            return Object.keys(product).some(function(key) {
              return String(product[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    },
    watch: {
      currentPage: function() {
        this.getList(this.currentPage)
      },
      source: function() {
        // //console.log(this.source)
        if (this.source === -1) {
          this.isSelect = true;
          this.storeId = "";
        } else {
          this.isSelect = false;
        }
      }
    },
    created() {
      this.getList(1);
      this.GettreeData();
    },
  };
</script>
<style scoped="scoped">
  .shuzhuangtu {
    width: 70%;
    margin: 10px auto;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid #E1E1E1;
  }

  .addvview li {
    list-style: none;
    width: 100%;
    overflow: hidden;
    clear: both;
    margin: 15px auto;
  }

  .addvview li span {
    display: inline-block;
    float: left;
    width: 20%;
    line-height: 40px;
  }

  .addvview .addinput {
    display: inline-block;
    float: left;
    width: 70%;
  }

  .el-tree {
    height: 450px;
    overflow: auto;
  }

  .viewcontact {
    overflow: hidden;
    clear: both;
    box-sizing: border-box;
    padding: 10px 30px;
  }

  .mastertree {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .viewtitle {
    width: 100%;
    overflow: hidden;
    clear: both;
    background: rgb(14, 106, 215);
    height: 45px;
    line-height: 45px;
    color: white;
    margin-bottom: 10px;
  }

  .viewtitle span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0px 20px;
  }

  .viewtitle .newpel {
    float: right;
  }

  .viewcontact .viewtree {
    float: left;
    width: 25%;
    box-sizing: border-box;
    border: 1px solid #E1E1E1;
  }

  .viewcontact .viewtable {
    width: 100%;
  }
</style>