[JavaScript知识库]Vue+ElementUI电商项目（四）

实现权限列表

1. 权限列表

添加权限列表路由

创建权限管理组件（Rights.vue），并在router.js添加对应的路由规则

import Rights from '@/views/rightsManagement/Rights.vue'
......
      path: '/home', component: Home, redirect: '/welcome', children: [
        { path: "/welcome", component: Welcome },
        { path: "/users", component: Users },
        { path: "/rights", component: Rights }
      ]
......

添加面包屑导航

在Rights.vue中添加面包屑组件展示导航路径

权限操作相关API

创建 api/role.js

import http from '../utils/http.js'

// get请求 获取所有角色列表
export function getRoles() {
  return http.get('roles', null)
}

// post请求 新增角色信息
export function addRoles(params) {
  return http.post('roles', params)
}

// 根据id获取角色信息
export function getRolesById(id) {
  return http.get(`roles/${id}`, null)
}

// 修改角色信息
export function updateRoles(id, params) {
  return http.put(`roles/${id}`, params)
}

// 删除角色信息
export function deleteRoles(id) {
  return http.delete(`roles/${id}`, null)
}

创建 api/right.js

import http from '../utils/http.js'

// get请求 获取所有权限列表
export function getRights() {
  return http.get('rights/list', null)
}

// 删除权限
export function delRight(roleId, rightId) {
  return http.delete(`roles/${roleId}/rights/${rightId}`, null)
}

// 获取权限树
export function getRightTree() {
  return http.get('rights/tree', null)
}

// 设置权限
export function setRight(roleId, rights) {
  return http.post(`roles/${roleId}/rights`, rights)
}

显示数据

在data中添加一个rightsList数据，在methods中提供一个getRightsList方法发送请求获取权限列表数据，在mounted中调用这个方法获取数据

<template>
  <div class="main">
    <el-card>
      <!-- 表格展示数据 -->
      <el-table :data="rightsList" border stripe class="table">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级" prop="label">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === '0'">一级权限</el-tag>
            <el-tag v-if="scope.row.level === '1'" type="success">二级权限</el-tag>
            <el-tag v-if="scope.row.level === '2'" type="warning">三级权限</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import {
    getRights
  } from '@/api/rights.js'
  export default {
    name: 'rightsList',
    data() {
      return {
        // 保存请求回来的数据
        rightsList: []
      }
    },
    mounted() {
      this.getRightsList()
    },
    methods: {
      getRightsList() {
        // 发送请求获取权限列表数据
        getRights().then(res => {
          const data = res.data
          // 如果返回状态为异常状态则报错并返回
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.mgs)
          }
          // 如果返回状态正常，将请求的数据保存在data中
          this.rightsList = data.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>

2.角色列表

添加角色列表路由

添加角色列表子组件（rightsManagement/Roles.vue），并添加对应的规则

  {
    path: '/home',
    name: 'home',
    component: Home,
    children: [
      { path: '', redirect: 'welcome' },
      { path: 'welcome', component: Welcome },
      { path: 'users', component: Users },
      { path: 'rights', component: Rights },
      { path: 'roles', component: Roles }
    ]
  }

添加面包屑导航

在Roles.vue中添加面包屑组件展示导航路径

显示数据

在data中添加一个roleList数据，在methods中提供一个getRoleList方法发送请求获取权限列表数据，在created）中调用这个方法获取数据

<!-- 角色列表区域 -->
<!-- row-key="id" 是2019年3月提供的新特性，
if there's nested data, rowKey is required.
如果这是一个嵌套的数据，rowkey 是必须添加的属性 -->
<template>
  <div class="main">
    <el-card>
      <!-- 表格展示数据 -->
      <el-table row-key="id" :data="roleList" border :tree-props="{children: 'no'}">
        <el-table-column type="expand"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template>
            <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
            <el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import {
    getRoles
  } from '../api/role.js'
  export default {
    data() {
      return {
        // 保存角色信息
        roleList: []
      }
    },
    created() {
      this.getRoleList()
    },
    methods: {
      getRoleList() {
        // 发送请求获取角色列表数据
        getRoles().then(res => {
          const data = res.data
          // 如果返回状态为异常状态则报错并返回
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.mgs)
          }
          // 如果返回状态正常，将请求的数据保存在data中
          this.roleList = data.data
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>

生成权限下拉列表

使用三重嵌套for循环生成权限下拉列表

		<!-- 添加展开列 -->
        <el-table-column type="expand">
          <template v-slot="scope">
            <el-row :class="['bdbottom','v-center',i1===0?'bdtop':'']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
              <!-- 渲染一级权限 -->
              <el-col :span="5">
                <el-tag>
                  {{item1.authName}}
                </el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 渲染二，三级权限 -->
              <el-col :span="19">
                <!-- 通过for循环嵌套渲染二级权限  -->
                <el-row :class="['v-center',i2===0?'':'bdtop' ]" v-for="(item2,i2) in item1.children" :key="item2.id">
                  <el-col :span="6">
                    <el-tag type="success">{{item2.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18" class="col-height">
                    <el-tag type="warning" class="margin-left" v-for="(item3) in item2.children" :key="item3.id">
                      {{item3.authName}}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>

美化样式

通过给一级权限el-row添加display:flex,align-items:center的方式解决一级权限垂直居中的问题，二级权限也类似添加，因为需要给多个内容添加，可以将这个样式设置为一个.vcenter{display:flex;align-items:center}

  .bdtop {
    border-top: 1px solid #eee;
  }

  .bdbottom {
    border-bottom: 2px solid #eee;
  }

  .v-center {
    display: flex;
    align-items: center;
  }
  .col-height{
    line-height: 40px;
  }
  .margin-left{
    margin-left: 5px;
  }

添加角色

    <!-- 对话框组件 -->
    <el-dialog :visible.sync="addDialogVisible" width="50%" title="添加角色" @close="addDialogClosed()">
      <el-form :model="addForm" ref="addFormRef" label-width="70px">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogClosed()">取 消</el-button>
        <el-button type="primary" @click="saveRole()">确 定</el-button>
      </span>
    </el-dialog>

<script>
  import { getRoles, addRoles } from '../api/role.js'
  export default {
    data() {
      return {
        addForm: {
          roleName: '',
          roleDesc: ''
        },
        addDialogVisible: false,
        // 添加表单的验证规则对象
        addFormRules: {
          rolename: [{
              required: true,
              message: '请输入角色名称',
              trigger: 'blur'
            }]
        }
      }
    },
    methods: {
      addDialogClosed() {
        // 对话框关闭之后，重置表达式
        this.$refs.addFormRef.resetFields()
        // 关闭对话框
        this.addDialogVisible = false
      },
      saveRole() {
        addRoles(this.addForm).then(res => {
          const data = res.data
          if (data.meta.status !== 201) {
            this.$message.error(res.data.meta.msg)
          } else {
            this.$message.success(res.data.meta.msg)
          }
          // 关闭对话框
          this.addDialogVisible = false
          // 重新请求最新的数据
          this.getRoleList()
        })
      }
    }
  }
</script>

删除角色

<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRolesByID(scope.row.id)">删除</el-button>

  import {
    getRoles,
    addRoles,
    deleteRoles
  } from '../api/role.js'	

	async removeRolesByID(id) {
        // 弹出确定取消框，是否删除角色
        const confirmResult = await this.$confirm('请问是否要永久删除该角色', '删除提示', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 如果用户点击确认，则confirmResult 为'confirm'
        // 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
        deleteRoles(id).then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          } else {
            this.$message.success(data.meta.msg)
          }
          // 显示弹出窗
          this.editDialogVisible = false
          // 重新请求最新的数据
          this.getRoleList()
        })
      }

编辑角色

获取角色信息

    <!-- 对话框组件 -->
    <el-dialog :visible.sync="editDialogVisible" width="50%" title="修改角色" @close="editDialogClosed()">
      <el-form :model="editForm" ref="editFormRef" label-width="70px">
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="editForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogClosed()">取 消</el-button>
        <el-button type="primary" @click="editRoles()">确 定</el-button>
      </span>
    </el-dialog>

		editDialogVisible: false,
        editForm: {
          roleName: '',
          roleDesc: ''
        },
        // 添加表单的验证规则对象
        editFormRules: {
          rolename: [{
              required: true,
              message: '请输入角色名称',
              trigger: 'blur'
            }]
        }

  import {
    getRoles,
    addRoles,
    deleteRoles,
    getRolesById,
    updateRoles
  } from '../api/role.js'

    // 展示编辑角色的对话框
    showEditDialog(id) {
        // 发送请求根据id获取角色信息
        getRolesById(id).then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error('获取角色信息失败')
          }
          // 将获取到的数据保存到数据editForm中
          this.editForm = data.data
          // 显示弹出窗
          this.editDialogVisible = true
        })
      },
      editDialogClosed() {
        // 对话框关闭之后，重置表达式
        this.$refs.editFormRef.resetFields()
        // 关闭对话框
        this.editDialogVisible = false
      },
      editRoles() {
        updateRoles(this.editForm.roleId, this.editForm).then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          } else {
            this.$message.success(data.meta.msg)
          }
          // 显示弹出窗
          this.editDialogVisible = false
          // 重新请求最新的数据
          this.getRoleList()
        })

添加权限删除功能

1. 给每一个权限的el-tag添加closable属性，是的权限右侧出现“X”图标

2. 再给el-tag添加绑定close事件处理函数

   removeRightById(scope.row,item1.id)
   removeRightById(scope.row,item2.id)
   removeRightById(scope.row,item3.id)

import {
    delRight
  } from '../api/rights.js'	

	async removeRightById(role, id) {
        // 弹窗提示用户是否要删除
        const confirmResult = await this.$confirm('请问是否要删除该权限', '删除提示', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 如果用户点击确认，则confirmResult 为'confirm'
        // 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
        if (confirmResult !== 'confirm') {
          return this.$message.info('已经取消删除')
        }
        delRight(role.id, id).then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          } else {
            this.$message.success(data.meta.msg)
            // 无需再重新加载所有权限
            // 只需要对现有的角色权限进行更新即可
            role.children = data.data
          }
        })
      }

完成权限分配功能

先给分配权限按钮添加事件
<el-button size=“mini” type=“warning” icon=“el-icon-setting” @click=“showSetRightDialog”>分配权限
在showSetRightDialog函数中请求权限树数据并显示对话框

import {
    delRight,
    getRightTree
  } from '../api/rights.js'	

	showSetRightDialog() {
        // 当点击分配权限按钮时，展示对应的对话框
        this.setRightDialogVisible = true
        // 获取所有权限的数据
        getRightTree().then(res => {
          // 如果返回状态为异常状态则报错并返回
          if (res.meta.status !== 200) {
             return this.$message.error('获取权限树失败')
          }
          // 如果返回状态正常，将请求的数据保存在data中
          this.rightsList = res.data
        })
      }

添加分配权限对话框，并添加绑定数据setRightDialogVisible

<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button>
    </span>
</el-dialog>

完成树形结构弹窗

在element.js中引入Tree，注册Tree

    <!-- 分配权限对话框 -->
    <el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
      <!-- 树形组件
            show-checkbox:显示复选框
            node-key:设置选中节点对应的值
            default-expand-all:是否默认展开所有节点
            :default-checked-keys 设置默认选中项的数组
            ref:设置引用 -->
      <el-tree :data="rightsList" :props="treeProps" show-checkbox node-key="id" default-expand-all
        :default-checked-keys="defKeys" ref="treeRef"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogClose">取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>
    </el-dialog>

在data中增加如下数据：

		// 权限树数据
        rightsList: [],
        // 树形控件的属性绑定对象
        treeProps: {
          // 通过label设置树形节点文本展示authName
          label: 'authName',
          // 设置通过children属性展示子节点信息
          children: 'children'
        },
        // 设置树形控件中默认选中的内容
        defKeys: [],
        // 保存正在操作的角色id
        roleId: ''

在methods中添加分配权限相关的方法

import {
    delRight,
    getRightTree,
    setRight
  } from '../api/rights.js'

showSetRightDialog(role) {
        // 将role.id保存起来以供保存权限时使用
        this.roleId = role.id
        // 当点击分配权限按钮时，展示对应的对话框
        this.setRightDialogVisible = true
        // 获取所有权限的数据
        getRightTree().then(res => {
          const data = res.data
          // 如果返回状态为异常状态则报错并返回
          if (data.meta.status !== 200) {
            return this.$message.error('获取权限树失败')
          }
          // 如果返回状态正常，将请求的数据保存在data中
          this.rightsList = data.data
        })
        // 调用getLeafKeys进行递归，将三级权限添加到数组中
        this.getLeafKeys(role, this.defKeys)
      },
      getLeafKeys(node, arr) {
        // 该函数会获取到当前角色的所有三级权限id并添加到defKeys中
        // 如果当前节点不包含children属性，则表示node为三级权限
        if (!node.children) {
          return arr.push(node.id)
        }
        // 递归调用
        node.children.forEach(item => this.getLeafKeys(item, arr))
      },
      setRightDialogClose() {
        // 当用户关闭树形权限对话框的时候，清除掉所有选中状态
        this.defKeys = []
        // 关闭对话框
        this.setRightDialogVisible = false
      },
      allotRights() {
        // 当用户在树形权限对话框中点击确定，将用户选择的
        // 权限发送请求进行更新

        // 获取所有选中及半选的内容
        const keys = [
          ...this.$refs.treeRef.getCheckedKeys(),
          ...this.$refs.treeRef.getHalfCheckedKeys()
        ]
        // 将数组转换为 , 拼接的字符串
        const idStr = keys.join(',')

        // 发送请求完成更新
        setRight(this.roleId, { rids: idStr }).then(res => {
          if (res.data.meta.status !== 200) {
            return this.$message.error('分配权限失败')
          }
          this.$message.success('分配权限成功')
          this.getRoleList()
          // 关闭对话框
          this.setRightDialogVisible = false
        })
      }

分配角色

打开Users.vue，完成分配角色的功能
添加分配角色对话框

<!-- 分配角色对话框 -->
    <el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%">
      <el-form :model="rolesList" label-width="100px">
        <el-form-item label="当前用户名称">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="当前角色名称">
          <el-input v-model="userInfo.role_name" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogClosed">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
      </span>
    </el-dialog>

给分配角色按钮添加点击事件，点击之后弹出一个对话框进行角色分配

<!-- 修改权限 -->
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRole(scope.row)"></el-button>
            </el-tooltip>

<script>
import {
    getRoles
  } from '@/api/role.js'
    
data(){
    ......
    //控制显示分配角色对话框
    setRoleDialogVisible:false,
    //保存正在操作的那个用户信息
    userInfo:{},
    //保存所有的角色信息
    rolesList:[],
    //保存用户选中的角色id
    selectedRoleId:''
},
methods:{
    ......
    showSetRole(userInfo) {
        // 保存起来以供后续使用
        this.userInfo = userInfo
        // 获取所有角色信息
        getRoles().then(res => {
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          }
          this.setRoleDialogVisible = true
          this.rolesList = data.data
        })
      }
    }
}
</script>

在element.js中引入Select，Option，注册Select，Option

        <el-form-item label="分配新角色">
          <!-- 角色选择下拉框 v-model：设置用户选中角色之后的id绑定数据-->
          <el-select v-model="selectedRoleId" placeholder="请选择角色">
            <!-- :label 显示文本，:value 选中值 -->
            <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

当用户点击对话框中的确定之后，完成分配角色的操作

      <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogClosed">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
      </span>
<script>
methods:{
    .......
   saveRoleInfo() {
        setRoleByUser(this.userInfo.id, this.selectedRoleId).then(res => {
          // 当用户点击确定按钮之后
          // 判断用户是否选择了需要分配的角色
          if (!this.selectedRoleId) {
            return this.$message.error('请选择需要分配的角色')
          }
          const data = res.data
          if (data.meta.status !== 200) {
            return this.$message.error(data.meta.msg)
          } else {
            this.$message.success(data.meta.msg)
            // 关闭分配权限对话框
            this.setRoleDialogVisible = false
            // 重新获取用户列表
            this.getUserList()
          }
        })
      },
      setRoleDialogClosed() {
        // 关闭对话框
        this.setRoleDialogVisible = false
        // 清空当前所选用户信息
        this.userInfo = ''
      }
}
</script>