addRole.vue 4.77 KB
<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: "添加角色",
      appsUnid:'',
      hasMenu:[]
    }
  },
  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.url+"/auth/api/v1/auth/roles";
          if (this.curData != "")Url = this.API.url+"/auth/api/v1/auth/roles/"+this.curData.role_unid;

          this.axios.post(Url, this.addform).then(response => {
            this.setPrem(response.data);
            this.closeroledialong();
            this.$refs["addroleform"].resetFields();
            this.$message({
              type: "success",
              message: "保存成功!"
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    dealHasMenu(menu) {
      console.log(menu)
          menu.children.forEach(item => {
              if(!item.children) {
                  this.hasMenu.push(item.perm_unid)
              }else if(item.children && item.children.length > 0){
                  this.dealHasMenu(item)
              }
          })
          this.$refs.roletree.setCheckedKeys(this.hasMenu);
      },
    // 添加权限
    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.url+"/auth/api/v1/auth/roles/"+data.role_unid+"/apps/"+this.appsUnid+"/menus",
            {
              list_size: permunidData.length,
              list_data: aList
            }
          )
          .then(response => {
            console.log(response.data);
          });
      }
    },
    getCheckedNodes() {
      return [...this.$refs.roletree.getHalfCheckedNodes(),...this.$refs.roletree.getCheckedNodes()];
    },
    getMenuApp(){
        return  new Promise((reslove, reject) =>{
          this.axios.get(this.API.url + "/auth/api/v1/auth/apps").then(response => {
            reslove(response);
          })
        });

    },
    async getmenu() {
        let res =await this.getMenuApp();
        res.data.list_data.forEach(item=>{
          if(item.name=='shebao'){
            this.appsUnid=item.unid
          }
        })
          this.axios.get(this.API.url + "/auth/api/v1/auth/apps/" + this.appsUnid + "/menus?shape=tree").then(response => {
            this.roleData= response.data.menu_tree;
          })
    },
    getRolePerms(data) {
      var _this = this;
      this.axios
        .get(this.API.url+"/auth/api/v1/auth/apps/"+this.appsUnid+"/menus",{
          params:{
            role:data.role_unid
          }
        })
        .then(response => {
          this.hasMenu = [];
          this.dealHasMenu(response.data.menu_tree[0])
        });
    }
  },
  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>