2023-12-30 分配角色概念思考和 前端准备/实现

1. e31aa2e686c20644247a8ec018763682.jpg
2. 10ed661f4d8c8c71101a71bc89a1c416.jpg
掌握 表设计 和逻辑分析 1对1 1对多 多对多。多对多 需要第三张维护关系但是关系多的时候怎么做表？
1张关系表 多张其他表？ 思考思考是不是都这样 怎么优化 表设计

///////////////// 文档看下来 做出来轻轻松松 就差一些问题要慢慢处理
1 UI 11实现

1. 查询所有 角色列表
   2.用户提交数据角色
   3.用户角色数据查询

1.3 重叠注意
/////////////////
1.1）查询所有 角色列表

image.png

---

<el-button type="warning" size="small" @click="showAssignRole(scope.row)">
分配角色
</el-button>

---

<el-dialog v-model="dialogRoleVisible" title="分配角色" width="40%">
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input disabled :value="sysUser.userName"></el-input>
</el-form-item>
<el-form-item label="角色列表">
<el-checkbox-group v-model="userRoleIds">
<el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">
{{ role.roleName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary">提交</el-button>
<el-button @click="dialogRoleVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<script setup>

// 角色列表
const userRoleIds = ref([])
const allRoles = ref([
{"id":1 , "roleName":"管理员"},
{"id":2 , "roleName":"业务人员"},
{"id":3 , "roleName":"商品录入员"},
])
const dialogRoleVisible = ref(false)
const showAssignRole = async row => {
sysUser.value = row
dialogRoleVisible.value = true
}

</script>
/////////////////
2.用户提交数据角色
/////////////////
3.用户角色数据查询

/////////////////
11.实现
11.1）

---

image.png

在src/api/sysRole.js文件中添加如下的请求方法：
// 查询所有的角色数据
export const GetAllRoleList = () => {
return request({
url: '/admin/system/sysRole/findAllRoles',
method: 'get'
})
}

---

image.png

<el-table-column label="操作" align="center" width="280" #default="scope">
<el-button type="primary" size="small" @click="editSysUser(scope.row)">
修改
</el-button>
<el-button type="danger" size="small" @click="deleteById(scope.row)">
删除
</el-button>
<el-button type="warning" size="small" @click="showAssignRole(scope.row)">
分配角色
</el-button>
</el-table-column>
<el-dialog v-model="dialogRoleVisible" title="分配角色" width="40%">
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input disabled :value="sysUser.userName"></el-input>
</el-form-item>
<el-form-item label="角色列表">
<el-checkbox-group v-model="userRoleIds">
<el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">
{{ role.roleName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary">提交</el-button>
<el-button @click="dialogRoleVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>

---

image.png

import { GetAllRoleList } from '@/api/sysRole';

// 角色列表
const userRoleIds = ref([])
const allRoles = ref([
{"id":1 , "roleName":"管理员"},
{"id":2 , "roleName":"业务人员"},
{"id":3 , "roleName":"商品录入员"},
])
const dialogRoleVisible = ref(false)
const showAssignRole = async row => {
sysUser.value = row
dialogRoleVisible.value = true

// 查询所有的角色数据
const {code , message , data } = await GetAllRoleList() ;
allRoles.value = data.allRolesList

}

/////////////////
2.用户提交数据角色
11.2）

image.png

// 给用户分配角色请求
export const DoAssignRoleToUser = (assginRoleVo) => {
return request({
url: "/admin/system/sysUser/doAssign",
method: 'post',
data: assginRoleVo
})
}

---

image.png

// 分配角色表单提交按钮添加doAssign事件处理函数
<el-button type="primary" @click="doAssign">提交</el-button>

<script setup>
import { DoAssignRoleToUser} from '@/api/sysUser';

// 角色分配按钮事件处理函数
const doAssign = async () => {
let assginRoleVo = {
userId: sysUser.value.id ,
roleIdList: userRoleIds.value
}
const { code , message , data} = await DoAssignRoleToUser(assginRoleVo) ;
if(code === 200) {
ElMessage.success('操作成功')
dialogRoleVisible.value = false
fetchData()
}
}
/////////////////
3.用户角色数据查询

image.png

// 查询所有的角色数据
export const GetAllRoleList = (userId) => {
return request({
url: '/admin/system/sysRole/findAllRoles/' + userId,
method: 'get'
})
}

---

image.png

<script setup>
// 角色列表
const userRoleIds = ref([])
const allRoles = ref([])
const dialogRoleVisible = ref(false)
const showAssignRole = async row => {
sysUser.value = row
dialogRoleVisible.value = true

// 查询所有的角色数据
const {code , message , data } = await GetAllRoleList(row.id) ;
allRoles.value = data.allRolesList

// 获取当前登录用户的角色数据
userRoleIds.value = data.sysUserRoles

}
</script>