addRole.vue

<template>
   <el-dialog :title="headertitle" :visible.sync="opaddroledialog" size="tiny" :before-close="closeroledialong">
        <div>
            <el-form ref="addroleform" :model="addform" label-width="80px">
                <el-form-item label="角色名称" prop="name" :rules="[{ required: true, message: '角色不能为空'}]">
                    <el-input v-model="addform.name"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div>分配权限：</div>
        <div class="tree-box">
          <el-tree
            ref="roletree"
            :data="roleData"
            :props="defaultProps"
            show-checkbox
            node-key="perm_unid"
            default-expand-all
            :expand-on-click-node="false">
          </el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeroledialong">取 消</el-button>
            <el-button type="primary" @click="addRoleSubmit">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      roleData: [],
      defaultProps: {
        children: "children",
        label: "name",
        id:'perm_unid'
      },
      addform: {
        name: ""
      },
      headertitle: "添加角色"
    };
  },
  props: {
    opaddroledialog: {},
    curData: {}
  },
  methods: {
    closeroledialong(state) {
      this.$emit("closedialong", true);
      if (this.curData != "") this.$refs["addroleform"].resetFields();
    },
    addRoleSubmit() {
      this.$refs["addroleform"].validate(valid => {
        if (valid) {
          var Url = "";
          if (this.curData == "") Url =this.API.auth.role;
          if (this.curData != "")Url = this.API.auth.editrole(this.curData.role_unid);

          this.axios.post(Url, this.addform).then(response => {
            debugger
            this.setPrem(response.data);
            this.closeroledialong();
            this.$refs["addroleform"].resetFields();
            this.$message({
              type: "success",
              message: "保存成功!"
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加权限
    setPrem(data) {
      var permunidData = this.getCheckedNodes();
      if (permunidData.length > 0) {
        var aList = [];
        permunidData.forEach(ele => {
          var obj = {
            unid: ele.unid,
            perm_unid: ele.perm_unid
          };
          aList.push(obj);
        });
        this.axios.post(this.API.auth.menusRole(data.role_unid),
            {
              list_size: permunidData.length,
              list_data: aList
            },{
              headers:{
                "authorization": localStorage.getItem("atoken"),
              }
            }
          )
          .then(response => {
            console.log(response.data);
          });
      }
    },
    getCheckedNodes() {
      return this.$refs.roletree.getCheckedNodes();
    },
    getmenu() {
      this.axios
        .get(this.API.menus +'?shape=tree', {
            headers: {
              authorization: localStorage.getItem("atoken")
            }
          }
        )
        .then(response => {
          this.roleData = response.data.menu_tree;
        });
    },
    getRolePerms(data) {
      debugger
      var _this = this;
      this.axios
        .get(this.API.auth.perms(data.role_unid),{ headers: {
              authorization: localStorage.getItem("atoken")
            }})
        .then(response => {
          var IDs = [];
          if (response.data.list_data) {
            response.data.list_data.forEach((ele, i) => {
              IDs.push(ele.perm_unid);
            }, this);
          }
          _this.$refs.roletree.setCheckedKeys(IDs);
        });
    }
  },
  watch: {
    curData(val) {
      this.addform.name = val.name;
      if (val != "") {
        this.headertitle = "编辑角色";
        this.getRolePerms(val);
      }
    }
  },
  created() {
    this.getmenu();
  }
};
</script>
<style lang="stylus" scoped>
.tree-box {
  height: 400px;
  overflow: auto;
  background: #272e42;
}

.el-tree {
  cursor: default;
  background: #272e42;
  color: #fff;
  border: none;
}
</style>