Javascript

【金秋打卡】第13天 全新升级,基于Vue3最新标准,打造后台综合解决方案之为用户分配角色

本文主要是介绍【金秋打卡】第13天 全新升级,基于Vue3最新标准,打造后台综合解决方案之为用户分配角色,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:全新升级,基于Vue3新标准,打造后台综合解决方案

课程章节:8-05辅助业务:为用户分配角色1

课程讲师:Sunday

课程内容:

目标: 通过rrbac权限控制系统,来完成对用户分配角色。例如点击用户列表旁边的查看弹出角色分配的对话框。

核心点:提炼出一个对话框组件

实现步骤:

  1. 创建为用户分配角色弹出层 views/usermanage/components/roles.vue
  <template>
 <el-dialog
   :title="$t('msg.excel.roleDialogTitle')"
   :model-value="modelValue"
   @close="closed"
 >
   内容

   <template #footer>
     <span class="dialog-footer">
       <el-button @click="closed">{{ $t('msg.universal.cancel') }}</el-button>
       <el-button type="primary" @click="onConfirm">{{
         $t('msg.universal.confirm')
       }}</el-button>
     </span>
   </template>
 </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
defineProps({
 modelValue: {
   type: Boolean,
   required: true
 }
})
const emits = defineEmits(['update:modelValue'])

/**
 确定按钮点击事件
*/
const onConfirm = async () => {
 closed()
}

/**
* 关闭
*/
const closed = () => {
 emits('update:modelValue', false)
}
</script>

<style lang="scss" scoped></style>
  1. 在 user-manage 中点击查看,展示弹出层
<roles-dialog v-model="roleDialogVisible"></roles-dialog>

import RolesDialog from './components/roles.vue'

/**
* 查看角色的点击事件
*/
const roleDialogVisible = ref(false)
const onShowRoleClick = row => {
 roleDialogVisible.value = true
}
  1. 在弹出层中我们需要利用 el-checkbox 进行数据展示,此时数据分为两种:
    a. 所有角色(已存在)
    b.用户当前角色
  2. 所以我们需要先获取对应数据
  3. 在api/user-manage 中定义获取用户当前角色接口
/*
  获取指定用户角色
 */
export const userRoles = (id) => {
  return request({
    url: `/user-manage/role/${id}`
  })
}
  1. 在roles 组件中获取所有角色数据
import { defineProps, defineEmits, ref } from 'vue'
import { roleList } from '@/api/role'
import { watchSwitchLang } from '@/utils/i18n'
...

// 所有角色
const allRoleList = ref([])
// 获取所有角色数据的方法
const getListData = async () => {
  allRoleList.value = await roleList()
}
getListData()
watchSwitchLang(getListData)

// 当前用户角色
const userRoleTitleList = ref([])
  1. 利用 el-checkbox 渲染所有角色
    
    
  2. 接下来渲染选中项,即:用户当前角色
    调用 userRoles 接口需要 当前用户 ID,所以我们需要定义对应的 props

    <el-checkbox
    v-for=“item in allRoleList”
    :key=“item.id”
    :label=“item.title”
    ```

课程收获:

谢谢老师,讲的非常细致,很容易懂。这一节学的为用户为用户分配角色。说通俗易懂点就是之前角色那个按钮的关闭打开,设置给用户设置角色。分为了所有角色和用户当前角色两部分。

课程截图:

图片描述

这篇关于【金秋打卡】第13天 全新升级,基于Vue3最新标准,打造后台综合解决方案之为用户分配角色的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!