【前端——项目实践-权限管理系统】：编辑角色、分配限权-EW帮帮网

编辑角色

src/api/role/role.js

export async function updateRole(data) {
  return await http.put("/api/role/update",data)
  
}

src/views/system/role/roleList.vue

/**
     * 窗口确定事件
     */
    onConfirm(){
      //表单验证
      this.$refs.roleForm.validate(async(valid)=>{
        if(valid){
          let res=null;
          //判断角色ID是否为空
          if(this.role.id===""){
            //新增
            //发送请求
            res=await roleApi.addRole(this.role);
          }else{
            //发送修改请求
            res =await roleApi.updateRole(this.role);
          }
          //判断是否成功
          if(res.success){
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo,this.pageSize);
            //关闭窗口
            this.roleDialog.visible=false;
          }else{
            //提示失败
            this.$message.error(res.message);
          }
          //关闭窗口
          this.roleDialog.visible=false
        }
      });
    },

/**
     * 打开编辑器
     */
    handleEdit(row){
      //数据回显
      this.$objCopy(row,this.tole);
      //设置窗口标题
      this.roleDialog.title="编辑角色"
      //显示编辑角色窗口
      this.role.Dialog.visible=true
    },

分配限权

src/api/role.js

/**
 * 查询分配限权树列表
 */
export async function getAssignTree(params){
  return await http.get("/api/role/getAssignPermissionTress",params);
}

src/views/system/role/roleList.vue

<!-- 分配限权树列表 -->
  <system-dialog
    :title="assignDialog.title"
    :visible="assignDialog.visible"
    :width="assignDialog.width"
    :hegiht="onAssignClose"
    @onClose="onAssignClose"
    @onConfirm="onAssignConfirm"
  >
    <div slot="content">
      <el-tree
        ref="assignTress"
        :data="assignTressData"
        node-key="id"
        :props="defaultProps"
        empty-text="暂无数据"
        :show-checkbox="true"
        :highlight-current="ture"
        default-expand-all
        ></el-tree>
    </div>
  </system-dialog>

src/utils创建leaf.js

//判断菜单节点是否是末级节点
export default function leafUtils(){
  const setLeaf=(arr)=>{
    if(arr&arr.length>0){
      for(let i=0;i<arr.length;i++){
        if(arr[i].children&&arr[i].children.length>0){
          arr[i].open=false;
          setLeaf(arr[i].children)
        }else{
          arr[i].open=true;
        }
        }
      }
    }
    return arr
  }return{
    setLeaf
  }

src/views/system/role/roleList.vue

export default {
  name:"roleList",
  //注册组件
  components:{
    SystemDialog
  },
  data(){
    return{
      //查询条件
      searchModel:{
        roleName:'',
        pageNo:1,
        pageSize:10,
        userId:this.$store.getters.userId,//用户id

      },
      roleList:[],//数据列表
      tableHeight:0,//表格数据
      pageNo:1,//当前页码
      pageSize:10,//煤业显示数量
      total:0,//总数量

      rules:{
        roleCode:[{required:true, tigger:'blur', message:"请输入角色编码"}],
        roleName:[{required:true, tigger:'blur',message:"请输入角色名称"}]
      },
      //添加和修改角色窗口属性
      roleDialog:{
        title:'',
        visible:false,
        height:230,
        width:500
      },
      //角色对象
      role:{
        id:"",
        roleCode:"",
        roleName:"",
        remark:"",
        createUser:this.$store.getters.userId
      },
      //分配限权窗口属性
      assignDialog:{
        title:'',
        visible:false,
        height:450,
        width:300
      },
      roleId:"",//角色Id
      assignTreeData:[],//树节点数据
      //树节点属性
      defaultProps:{
        children:'children',
        label:'label'
      }
    }
  },

/**
     * 分配限权
     */
    async assignRole(row){
      //设置角色id
      this.roleId=row.id
      //构架参数
      let params={
        roleId:row.id,
        userId:this.$store.getters.userId
      }
      //发送查询请求
      let res =await roleApi.getAssignTressApi(params)
      //判断是否成功
      if(res.success){
        //获取当前登录用户拥有的限权
        let permissionList =res.data.permissionList
        //获取当前被分配的角色已经拥有的限权信息
        let checkList=res.data.checkList
        //判断当前菜单是否是末级
        let {setLeaf}=leafUtils()
        //设置权限菜单列表
        let newPermissionList=setLeaf(permissionList)
        //设置树节点菜单数据
        this.assignTressData=newPermissionList
        //将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用他，然后等DOM更新
        this.$nextTick(()=>{
          //获取树菜单的节点数据
          let nodes=this.$refs.assignTree.children
          //设置子节点
          this.setChild(nodes,checkList)
        })
      }
      //显示窗口
      this.assignDialog.visible=true
      //设置窗口标题
      this.assignDialog.title=`给【${row.roleName}】分配限权`
    },
    /**
     * 设置子节点
     */
    setChild(childNodes,checkList){
      //判断是否存在子节点
      if(childNodes&&childNodes.length>0){
        //循环所有的权限
        for(let i=0;i<childNodes.length;i++){
          //根据data或者key拿到Tree组件中的node
          let node=this.$refs.assignTree.getNode(childNodes[i])
          //判断是否以及拥有对应的角色数据
          if(checkList&&checkList.length>0){
            //循环遍历已有的权限集合
            for(let j=0;j<checkList.length;j++){
              //找到已存在的菜单权限节点
              if(checkList[j]==childNodes[i].id){
              //如果节点是展开状态，贼将树节点选中
                if(childNodes[i].open){
                  this.$refs.assignTress.setChecked(node,true)
                  break
                }
              }
            }
          }
          //如果存在子节点，则递归选中
          if(childNodes[i].children){
            this.setChild(childNodes[i].children,checkList)
          }
        }
      }
    },
    /**
     * 分配权限窗口取消事件
     */
    onAssignClose(){
      this.assignDialog.visible=false
    },
    /**
     * 分配限权窗口确定事件
     */
    async onAssignConfirm(){

    },

src/api/role.js

/**
 * 分配限权
 */
export async function assignSave(params){
  return await http.post("/api/role/saveRoleAssign",params);
}

src/views/system/role/roleList.vue

  /**
     * 分配限权窗口确定事件
     */
    async onAssignConfirm(){
      //获取选中树节点的key
      let ids=this.$refs.assignTree.getCheckedKeys()
      //获取选中节点的父节点id
      let pids=this.$refs.assginTree.getHalfCheckedKeys()
      //组装选中节点ID数据
      let listId=ids.concat(pids)
      //组装参数
      let params={
        roleId:this.roleId,
        list:listId
      }
      //发送请求
      let res=await roleApi.assignSave(params);
      //判断是否成功
      if(res.success){
        //关闭窗口
        this.assignDialog.visible=false;
        //提示成功
        this.$message.success(res.message)
      }else{
        //提示失败
        this.$message.error(res.message)
      }
     },

删除角色

src/api/role.js

/**
 * 检查角色是否被使用
 * @param {*} params 
 * @returns 
 */
export async function checkRole(params){
  return await http.getRestApi('/api/role/check',params);
}
/**
 * 删除角色
 * @param {*} params 
 * @returns 
 */
export function deleteRole(params) {
  return await http.delete("/api/role/delete",params)
}

用户管理

查询用户列表

src/api/user.js

export default{
  /**
   * 查询用户列表
   */
  async getUserList(params){
    return await http.get("/api/user/list",params);
  }
}

src/views/system/user创建userList.vue

<template>
 <el-container :style="{height:containerHeight+'px'}">
  <!-- 左侧部门树形菜单 -->
  <el-aside
    style="
      padding:10px 0px 0px 0px;
      background:#fff;
      border-right:1px solid #dfe6ec;
    "
    width="200px"
  >
    <el-tree
      style="font-size:14px"
      ref="leftTree"
      :data="deptList"
      node-key="id"
      :props="defaultProps"
      default-expand-all
      empty-text="暂无数据"
      :show-checkbox="false"
      :highlight-current="true"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
      <div class ="custom-tree-node" slot-scope="{node,data}">
        <div>
          <span v-if="data.children.length==0">
            <i class="el-icon-document"></i>
          </span>
          <span v-else @click.stop="changeIcon(data)">
            <svg-icon v-if="data.open" icon-class="add-s" />
            <svg-icon v-else icon-class="sub-s" />
          </span>
          <!-- 名称 -->
          <span style="margin-left:3px">{{node.label}}</span>
        </div>
      </div>
    </el-tree>
  </el-aside>
  <!-- 右侧用户数据 -->
  <!-- 表格数据 -->
  <el-main>
    <!-- 查询条件 -->
    <el-form
      :model="searchModel"
      ref="searchForm"
      label-width="80px"
      :linine="true"
      size="samll"
    >
      <el-form-item>
        <el-input v-model="searchModel.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchModel.realName" placeholder="请输入真实姓名" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchModel.phone" placeholder="请输入电话" />
      </el-form-item>
      <el-form-item>
       <el-button icon="el-icon-search" type="primary" @click="search(departmentId,pageNo,pageSize)">查询</el-button>
       <el-button icon="el-icon-delete" @click="resetValue()">重置</el-button>
        <el-button icon="el-icon-plus" size="small" type="success" @click="openAddWindow()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户数据 -->
    <el-table
      :height="tableHeight"
      :data="userList"
      border
      stripe
      style="width:100%; margin-bottom:10px"
    >
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column 
        prop="departmetName" 
        label="所属部门"
        ></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="center" width="290" label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button icon="el-icon-delete" type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          <el-button icon="el-icon-setting" type="primary" size="mini" @click="assignRole(scope.row)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10,20,30,40,50]"
      :page-size="10"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
    >
    </el-pagination>
  </el-main>
 </el-container>

</template>

<script>
//导入部门api脚本
import departmentApi from '@/api/department'
//导入用户api脚本
import userApi from '@/api/user';

export default {
  name:'userList',
  data(){
    return{
      containerHeight:0,//容器高度
      deptList:[],//左侧部门树形菜单列表
      //树节点属性
      defaultProps:{
        children:'children',
        label:'departmentName'   
      },
       //查询条件对象
        searchModel:{
          username:"",
          realName:"",
          phone:"",
          departmentId:"",
          pageNo:1,
          pageSize:10,
        },
        userList:[], //用户列表
        tableHeight:0, //表格高度
        pageNo:1, //当前页码
        pageSize:10, //每页显示数量
        total:0, //总数量
        departmentId:"",//部门编号
    };
  },

  methods:{
    /**
     * 查询部门列表
     */
    async getDeptList(){
      //发送请求
      let res=await departmentApi.getDepartmentList(null);
      //判断是否成功
      if(res.success){
        this.deptList=res.data;
        //树加载完成后，默认点击第一个节点
        this.$nextTick(()=>{
          const firstNode=document.querySelector(".el-tree-node");
          firstNode.click();
        });
      }
    },
    /**
     * 左侧树节点点击事件
     */
    handleNodeClick(data){
      //给部门编号赋值
      this.departmentId=data.id;
      //查询数据
      this.search(this.departmentId)
    },
    /**
     * 查询用户列表
     */
    async search(deparmentId,pageNo=1,pageSize=10){
      this.searchModel.pageNo=pageNo;
      this.searchModel.pageSize=pageSize;
      this.searchModel.departmentId=this.departmentId;
      //发送查询请求
      let res=await userApi.getUserList(this.searchModel);
      if(res.success){
        this.userList=res.data.records;
        this.total=res.data.total;
      }
    },
    /**
     * 当每页数量发生变化时触发该事件
     */
    handleSizeChange(size){
      //赋值给成员变量pageSize
      this.pageSize=size;
      //查询
      this.search(this.departmentId,this.pageNo,size)
    },
    /**
     * 当页码发生变化时触发
     */
    handleCurrentChange(page){
      this,pageNo=page;
      //调用查询方法
      this.search(this.departmentId,page,this.pageSize)
    },
    /**
     * 重置查询条件
     */
    resetValue(){
      this.searchModel={};
      //重新查询
      this.search(this.departmentId);
    },
    //加减号图片点击事件
    openBtn(data){
      //修改折叠展开状态
      data.open=!data.open
      this.$refs.leftTree.store.nodeMap[data.id].expanded=!data.open;
    },

  },
  created(){
    //查询部门列表
    this.getDeptList();
    //调用查询部门列表
    this.search(this.departmentId);
  },
  mounted(){
    this.$nextTick(()=>{
      //内容高度
      this.containerHeight=window.innerHeight-85;
      //表格高度
      yhis.tableHeight=window.innerHeight-220;
    })
  }
}
</script>
<style lang="scss" scoped >
  
</style>

新增用户

src/views/system/user/userList.vue

  <!-- 添加和编辑用户窗口 -->
    <system-dialog
      :title="userDialog.title" 
      :height="userDialog.height" 
      :width="userDialog.width" 
      :visible="userDialog.visible" 
      @onClose="onClose" 
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form 
        :model="user" 
        ref="userForm" 
        :rules="rules" 
        label-width="80px" 
        :inline="true" 
        size="small" 
       >
        <el-form-item prop="username" label="用户名">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" v-if="user.id === ''" label="密码">
          <el-input type="password" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="departmentName" label="所属部门">
          <el-input 
          v-model="user.departmentName" 
          :readonly="true" 
          @click.native="selectDepartment()" 
        ></el-input>
        </el-form-item>
        <el-form-item prop="realName" label="姓名">
          <el-input v-model="user.realName"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="user.nickName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-radio-group v-model="user.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <!-- 用户头像：待补充 -->
      </el-form>
      </div>
    </system-dialog>