主要功能我们只实现分配角色，其余功能都是重复工作，可以快速完成
布局与准备
在user/index.vue中调用组件UserList
// user/index.vue
<template>
<div class="user">
<user-list></user-list>
</div>
</template>
<script>
import UserList from './components/list'
export default {
name: 'UserIndex',
components: {
UserList
}
}
</script>
<style lang="scss" scoped></style>
编辑组件user/components/list.vue，分页功能待完善
<template>
<el-card>
<div slot="header">
<el-form :inline="true" :model="filterParams" ref="filter-form">
<el-form-item label="手机号" prop="phone">
<el-input v-model="filterParams.phone"></el-input>
</el-form-item>
<el-form-item label="注册时间" prop="rangeDate">
<el-date-picker
v-model="filterParams.rangeDate"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="yyyy-MM-dd"
/>
</el-form-item>
<el-form-item>
<el-button :disabled="isLoading" @click="handleReset">重置</el-button>
<el-button type="primary" @click="handleQuery" :disabled="isLoading"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
<el-table :data="users" style="width: 100%" v-loading="isLoading">
<el-table-column prop="id" label="用户ID" width="150"> </el-table-column>
<el-table-column prop="name" label="头像" width="100">
<template slot-scope="scope">
<img
width="30px"
:src="
scope.row.portrait ||
'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
"
/>
</template>
</el-table-column>
<el-table-column prop="name" label="用户名"> </el-table-column>
<el-table-column prop="phone" label="手机号"> </el-table-column>
<el-table-column prop="createTime" label="注册时间">
<template slot-scope="scope">
<span>{{ scope.row.createTime | dateFormat }}</span>
</template>
<!-- 用户状态操作（服务端没有开放权限，只能演示） -->
</el-table-column>
<el-table-column prop="name" label="状态" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="ENABLE"
inactive-value="DISABLE"
active-color="#13ce66"
inactive-color="#ff4949"
@change="handleForbidUser(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column prop="address" label="操作">
<template slot-scope="scope">
<el-button type="text" @click="handleSelectRole(scope.row)"
>分配角色</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
import { getUserPages, forbidUser } from '@/services/user'
import dateFormat from '@/utils/dateformat'
export default {
name: 'UserList',
data () {
return {
users: [],
filterParams: {
currentPage: 1,
pageSize: 100,
phone: '',
startCreateTime: '',
endCreateTime: '',
rangeDate: []
},
isLoading: true
}
},
created () {
this.loadUsers()
},
methods: {
// 加载用户
async loadUsers () {
this.isLoading = true
const { rangeDate } = this.filterParams
console.log(rangeDate)
// 将选定的时间范围存入数组，再将第一项第二项发送到接口
if (rangeDate && rangeDate.length) {
this.filterParams.startCreateTime = rangeDate[0]
this.filterParams.endCreateTime = rangeDate[1]
} else {
this.filterParams.startCreateTime = ''
this.filterParams.endCreateTime = ''
}
const { data } = await getUserPages(this.filterParams)
this.users = data.data.records
this.isLoading = false
},
async handleForbidUser (user) {
const { data } = await forbidUser(user.id)
// 接口禁用，这里没法使用
console.log(data)
},
// 将查询的结果放置到第一页
handleQuery () {
this.filterParams.currentPage = 1
this.loadUsers()
},
// 重置
handleReset () {
this.$refs['filter-form'].resetFields()
this.loadUsers()
},
// 点击用户的分配角色按钮
handleSelectRole () {}
},
filters: {
dateFormat
}
}
</script>
<style lang="scss" scoped>
</style>
对应的接口封装：
// 分页查询用户信息 - 用户管理
export const getUserPages = data => {
return request({
method: 'POST',
url: '/boss/user/getUserPages',
data
})
}
// 封禁用户（服务端关闭了权限，无法进行实机操作）
export const forbidUser = userId => {
return request({
method: 'POST',
url: 'boss/user/forbidUser',
params: {
userId
}
})
}
分配角色
重头戏来了，这里我们依然使用的是Element组件中的Dialog对话框组件
放入页面最后的位置，修改title，width，去除关闭处理函数，声明dialogVisible
// user/components/list.vue
<template>
<el-card>
...
<!-- 分配角色的 Dialog -->
<el-dialog
title="分配角色"
:visible.sync="dialogVisible"
width="50%"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</el-card>
</template>
<script>
...
data () {
return {
...
dialogVisible: false
}
},
...
</script>
点击了分配角色按钮显示对话框
<el-button
type="text"
@click="handleSelectRole(scope.row)"
>分配角色</el-button>
...
<script>
</script>
设置多选下拉菜单，通过Element的Select选择器的基础多功能设置
// list.vue
<el-dialog
...
>
<!-- <span>这是一段信息</span> -->
<el-select v-model="value1" multiple placeholder="请选择">
<!-- 根据 options 遍历生成选项列表 -->
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
...
</span>
</el-dialog>
data () {
return {
...
// 列表数据
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
// 选中的数据
value1: []
}
布局完成
展示角色列表
封装所有的角色接口：地址
// services/role.js
...
// 获取所有角色 - 用户管理
export const getAllRoles = () => {
return request({
method: 'GET',
url: '/boss/role/all'
})
}
引入并且使用：
- 引入
- 声明数据
- 绑定给下拉框
- 点击分配角色时发送请求
- 请求成功设置数据
import { getAllRoles } from '@/services/role'
...
data () {
return {
...
// 所有角色，对象示例的 option
roles: [],
// 选中角色，对应示例的 value1
roleIdList: []
}
},
...
<el-select v-model="roleIdList" multiple placeholder="请选择">
<el-option
v-for="item in roles"
:key="item.value"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
...
// 点击用户的分配角色按钮
async handleSelectRole () {
// 显示对话框
this.dialogVisible = true
// 点击后加载角色列表
const { data } = await getAllRoles()
if (data.code === '000000') {
this.roles = data.data
}
}
提交分配
设置点击事件
<el-button type="primary" @click="handleAllocRole">确 定</el-button>
...
// 提交分配角色操作（等提交完毕再隐藏对话框）
async handleAllocRole () {
}
观察接口给用户分配角色：地址
需要的请求参数是用户ID和分配的角色ID组成的shuju
// services/role.js
...
// 给用户分配角色 - 用户挂你
export const allocateUserRoles = data => {
return request({
method: 'POST',
url: '/boss/role/allocateUserRoles',
data
})
}
引入并且使用
import { getAllRoles, allocateUserRoles } from '@/services/role'
...
// 提交分配角色操作
async handleAllocRole () {
// 提交
allocateUserRoles({
})
}
请求用户ID可以在显示对话框时接收到组件传值，保存即可
// 当前分配角色的ID（声明在 data 中）
currentRoleID: null
...
// 点击用户的分配角色按钮
async handleSelectRole (userData) {
// 将当前操作的用户ID保存，以便提交使用
this.currentRoleID = userData.id
...
},
传参发送
// 提交分配角色操作
async handleAllocRole () {
// 提交
// - 用户 ID 可以在显示对话框时接收到组件传值，保存即可
const { data } = await allocateUserRoles({
userId: this.currentRoleID,
roleIdList: this.roleIdList
})
if (data.code === '000000') {
// 提示
this.$message.success('分配角色成功')
// 关闭对话框
this.dialogVisible = false
}
}
默认选中已经分配的角色
roleList中保存的为已经选中的选项，可以请求用户已经分配的角色，并且修改roleIdList即可
这里使用查询用户角色接口：地址
// services/role.js
...
// 查询用户角色
export const getUserRoles = userId => {
return request({
method: 'GET',
url: `/boss/role/user/${userId}`
})
}
引入
import { getAllRoles, allocateUserRoles, getUserRoles } from '@/services/role'
在点击角色分配按钮时，根据当前用户id查询角色并更新到roleIdList即可
// 点击用户的分配角色按钮
async handleSelectRole (userData) {
...
// 根据用户id请求角色信息（data 被之前的请求使用过了，换个名字）
const { data2 } = await getUserRoles(userData.id)
// 遍历得到的角色列表，将id组成数据替换给 roleIdList 即可
this.roleIdList = data2.data.map(item => item.id)
},
其余的功能都是重复性工作，可以迅速完成
