2021SC@SDUSC 软件工程应用与实践（10）——addNewRole

最新推荐文章于 2022-06-11 09:57:14 发布

LiuFangdi145

最新推荐文章于 2022-06-11 09:57:14 发布

阅读量108

点赞数

分类专栏： 2021SC@SDUSC 文章标签： java

本文链接：https://blog.csdn.net/Fancy145/article/details/121709155

版权

2021SC@SDUSC 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在项目中实现用户角色的添加功能，包括在用户管理界面添加分配角色的按钮，设计分配角色的弹框，并提供添加、删除角色以及更新角色权限的API操作。通过示例代码展示了使用Vue.js和Element UI组件库构建的用户角色管理界面，以及对应的后端请求方法。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

一、引言

本篇文章将对项目中添加用户角色的功能模块进行分析。

二、代码分析

添加用户角色

首先在用户管理操作中加入分配角色按钮。
定义好分配角色的弹框。

<template>
  <div>
    <div style="text-align: left" v-loading="loading">
      <el-input placeholder="请输入角色英文名称..."
                size="mini"
                style="width: 250px"
                v-model="newRole">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input
        placeholder="请输入角色中文名称..."
        size="mini"
        style="width: 250px"
        v-model="newRoleZh">
      </el-input>
      <el-button type="primary" size="mini" style="margin-left: 5px" @click="addNewRole">添加角色</el-button>
    </div>
    <div style="margin-top: 10px;text-align: left">
      <el-collapse v-model="activeColItem" accordion style="width: 500px;" @change="collapseChange">
        <el-collapse-item v-for="(item,index) in roles" :title="item.nameZh" :name="item.id" :key="item.name">
          <el-card class="box-card">
            <div slot="header">
              <span>可访问的资源</span>
              <el-button type="text"
                         style="color: #f6061b;margin: 0px;float: right; padding: 3px 0;width: 15px;height:15px"
                         icon="el-icon-delete" @click="deleteRole(item.id,item.nameZh)"></el-button>
            </div>
            <div>
              <el-tree :props="props"
                       :key="item.id"
                       :data="treeData"
                       :default-checked-keys="checkedKeys"
                       node-key="id"
                       ref="tree"
                       show-checkbox
                       highlight-current
                       @check-change="handleCheckChange">
              </el-tree>
            </div>
            <div style="display: flex;justify-content: flex-end;margin-right: 10px">
              <el-button size="mini" @click="cancelUpdateRoleMenu">取消修改</el-button>
              <el-button type="primary" size="mini" @click="updateRoleMenu(index)">确认修改</el-button>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

发送api请求，在methods中定义方法实现。

<script>
  import {isNotNullORBlank} from '../../../utils/utils'
  export default{
    mounted: function () {
      this.loading = true;
      this.initRoles();
    },
    methods: {
      deleteRole(rid, rname){
        var _this = this;
        this.$confirm('删除角色[' + rname + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.loading = true;
          _this.deleteRequest("/system/basic/role/" + rid).then(resp=> {
            if (resp && resp.status == 200) {
              var data = resp.data;
              _this.$message({type: data.status, message: data.msg})
              _this.initRoles();
            } else {
              _this.loading = false;
            }
          })
        }).catch(() => {
          _this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addNewRole(){
        if (isNotNullORBlank(this.newRole, this.newRoleZh)) {
          this.loading = true;
          var _this = this;
          this.postRequest("/system/basic/addRole", {
            role: this.newRole,
            roleZh: this.newRoleZh
          }).then(resp=> {
            if (resp && resp.status == 200) {
              var data = resp.data;
              _this.$message({type: data.status, message: data.msg});
              _this.initRoles();
              _this.newRole = '';
              _this.newRoleZh = '';
            } else {
              _this.loading = false;
            }
          })
        }
      },
      //有五个树，但是五个树用的同一个数据源
      updateRoleMenu(index){
        var checkedKeys = this.$refs.tree[index].getCheckedKeys(true);
        var _this = this;
        this.putRequest("/system/basic/updateMenuRole", {
          rid: this.activeColItem,
          mids: checkedKeys
        }).then(resp=> {
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.status, message: data.msg})
            _this.activeColItem = -1;
          }
        })
      },
      collapseChange(activeName){
        if (activeName == '') {
          return;
        }
        var _this = this;
        this.getRequest("/system/basic/menuTree/" + activeName).then(resp=> {
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.treeData = data.menus;
            _this.checkedKeys = data.mids;
          }
        })
      },
      handleCheckChange(data, checked, indeterminate) {
//        console.log(data,checked,indeterminate)
      },
      initRoles(){
        var _this = this;
        this.getRequest("/system/basic/roles").then(resp=> {
          _this.loading = false;
          if (resp && resp.status == 200) {
            _this.roles = resp.data;
            _this.activeColItem=-1
          }
        })
      },
      cancelUpdateRoleMenu(){
        this.activeColItem = -1;
      }
    },
    data(){
      return {
        props: {
          label: 'name',
          children: 'children'
        },
        newRole: '',
        newRoleZh: '',
        roles: [],
        treeData: [],
        checkedKeys: [],
        loading: false,
        activeColItem: -1
      };
    }
  }
</script>