【用户管理的角色的新增、删除、授权（权限管理）】

用户管理的角色的新增、删除、授权（权限管理）

<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-tag effect="light" round style="font-size: 28px;padding: 25px;margin: 30px 0">角色管理</el-tag>
    <el-card style="margin: 22px auto;">
      <el-row style="margin-bottom: 20px">
        <el-col :span="2">
          <el-button type="primary" @click="addRole" style="width: 100%">新增</el-button>
        </el-col>
        <el-col :span="6" :offset="16">
          <el-input v-model="keyword" placeholder="请输入查询信息" @change="getRoleList">
            <template #prefix>
              <el-icon>
                <search/>
              </el-icon>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="roles" stripe empty-text="暂无">
        <el-table-column prop="id" label="ID" align="center" width="80"/>
        <el-table-column prop="name" label="角色名" align="center"/>
        <el-table-column prop="remark" label="备注" align="center"/>
        <el-table-column prop="strCreateTime" label="创建时间" align="center"/>
        <el-table-column label=操作 align="center">
          <template #default="scope">
            <el-button type="primary" link @click="editRoleMenus(scope.row.id)">授权</el-button>
            <el-button type="primary" link @click="editRole(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="deleteRole(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          layout="total, sizes, prev, pager, next,"
          :total="totalCount"
          v-model:page-size="pageSize"
          :page-sizes="[10,20,50]"
          v-model:current-page="currPage"
          @current-change="getRoleList"
          @size-change="getRoleList"
          style="justify-content: center;margin-top: 20px"
      />

    </el-card>
  </div>

  <!--    添加弹窗-->
  <el-dialog
      v-model="dialogVisible"
      :title="form.id?'修改角色':'新增角色'"
      :width="500"
      :lock-scroll="false"
      draggable
  >
    <el-form :model="form" ref="form" label-width="120px">
      <el-form-item label="角色名" prop="name" :rules="[{ required: true, message:'请输入角色名', trigger: 'blur' }]">
        <el-input v-model="form.name" clearable/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" clearable/>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button type="primary" @click="saveRole">确定</el-button>
    </template>
  </el-dialog>

  <!--    角色权限弹窗-->
  <el-dialog
      v-model="rightVisible"
      title="授权"
      :width="500"
      :lock-scroll="false"
      draggable
  >
    <el-tree
        ref="tree"
        :data="menus"
        show-checkbox
        node-key="id"
        highlight-current
        :props="{children:'children',label:'name'}"
    />
    <template #footer>
      <el-button type="primary" @click="saveRoleMenus">确定</el-button>
    </template>
  </el-dialog>

</template>

<script>
import { Search } from '@element-plus/icons-vue'
import { deleteRole, getMenuTree, getRoleList, getRoleMenus, updateRole, updateRoleMenus } from '@/apis'

const defaultForm = {
  name: '',
  remark: '',
}

export default {
  name: 'RoleManagement',
  components: {
    Search,
  },
  data() {
    return {
      roles: [],
      totalCount: 0,
      pageSize: 10,
      currPage: 1,
      keyword: '',
      dialogVisible: false,
      rightVisible: false,
      form: { ...defaultForm },
      menus: [],
      currentRoleId: '',
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods: {
    // 获取信息列表
    async getRoleList() {
      const data = await getRoleList(this.currPage, this.pageSize, this.keyword)
      if (!data) return
      this.roles = data.content
      this.totalCount = data.totalSize
      this.pageSize = data.pageSize
      this.currPage = data.pageNum
    },

    // 新增
    addRole() {
      this.form = { ...defaultForm }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()    //resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果
      })
    },

    //修改
    async editRole(data) {
      // const data = await getVehicleInfo(id)
      // if (!data) return
      this.form = {
        id: data.id,
        name: data.name,
        remark: data.remark,
      }
      this.dialogVisible = true
      await this.$nextTick(() => {
        this.$refs.form.clearValidate()    //clearValidate	移除该表单项的校验结果
      })
    },

    // 保存
    async saveRole() {
      if (!await updateRole(this.form)) return
      this.dialogVisible = false
      await this.getRoleList()
    },

    // 删除
    deleteRole(id) {
      this.$confirm('确定删除', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      }).then(async () => {
        if (!await deleteRole(id)) return
        await this.getRoleList()
      }).catch(() => {
      })
    },

    // 授权
    async editRoleMenus(id) {
      this.currentRoleId = id
      // 先获取完整菜单树，再获取该角色已授权的菜单
      const menus = await getMenuTree()
      console.log(menus);
      if (!menus) return
      this.menus = menus
      this.rightVisible = true
      await this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])  //setCheckedNodes	设置目前勾选的节点，使用此方法必须设置 node-key 属性
      })
      const roleMenus = await getRoleMenus(id)
      if (!roleMenus) return
      const keys = []
      roleMenus.forEach(element => {
        keys.push(element.id)
      })
      this.$refs.tree.setCheckedKeys(keys)    //setCheckedNodes	设置目前勾选的节点，使用此方法必须设置 node-key 属性
    },

    async saveRoleMenus() {    //确定保存
      const data = []
      this.$refs.tree.getCheckedKeys().forEach(key => {
        data.push({
          roleId: this.currentRoleId,
          menuId: key,
        })
      })
      // 取消所有权限则传一个0
      if (data.length === 0) data.push({
        roleId: this.currentRoleId,
        menuId: 0,
      })
      if (!await updateRoleMenus(data)) return
      this.rightVisible = false
    },
  },
}
</script>

<style scoped>

</style>