主要功能我們只實(shí)現(xiàn)分配角色微峰，其余功能都是重復(fù)工作舷丹，可以快速完成
布局與準(zhǔn)備
在user/index.vue中調(diào)用組件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，分頁(yè)功能待完善
<template>
<el-card>
<div slot="header">
<el-form :inline="true" :model="filterParams" ref="filter-form">
<el-form-item label="手機(jī)號(hào)" prop="phone">
<el-input v-model="filterParams.phone"></el-input>
</el-form-item>
<el-form-item label="注冊(cè)時(shí)間" prop="rangeDate">
<el-date-picker
v-model="filterParams.rangeDate"
type="datetimerange"
range-separator="至"
start-placeholder="開(kāi)始時(shí)間"
end-placeholder="結(jié)束時(shí)間"
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="手機(jī)號(hào)"> </el-table-column>
<el-table-column prop="createTime" label="注冊(cè)時(shí)間">
<template slot-scope="scope">
<span>{{ scope.row.createTime | dateFormat }}</span>
</template>
<!-- 用戶狀態(tài)操作（服務(wù)端沒(méi)有開(kāi)放權(quán)限蜓肆，只能演示） -->
</el-table-column>
<el-table-column prop="name" label="狀態(tài)" 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)
// 將選定的時(shí)間范圍存入數(shù)組颜凯，再將第一項(xiàng)第二項(xiàng)發(fā)送到接口
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)
// 接口禁用，這里沒(méi)法使用
console.log(data)
},
// 將查詢的結(jié)果放置到第一頁(yè)
handleQuery () {
this.filterParams.currentPage = 1
this.loadUsers()
},
// 重置
handleReset () {
this.$refs['filter-form'].resetFields()
this.loadUsers()
},
// 點(diǎn)擊用戶的分配角色按鈕
handleSelectRole () {}
},
filters: {
dateFormat
}
}
</script>
<style lang="scss" scoped>
</style>
對(duì)應(yīng)的接口封裝：
// 分頁(yè)查詢用戶信息 - 用戶管理
export const getUserPages = data => {
return request({
method: 'POST',
url: '/boss/user/getUserPages',
data
})
}
// 封禁用戶（服務(wù)端關(guān)閉了權(quán)限仗扬，無(wú)法進(jìn)行實(shí)機(jī)操作）
export const forbidUser = userId => {
return request({
method: 'POST',
url: 'boss/user/forbidUser',
params: {
userId
}
})
}
分配角色
重頭戲來(lái)了症概，這里我們依然使用的是Element組件中的Dialog對(duì)話框組件
放入頁(yè)面最后的位置，修改title早芭，width彼城，去除關(guān)閉處理函數(shù)，聲明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>
點(diǎn)擊了分配角色按鈕顯示對(duì)話框
<el-button
type="text"
@click="handleSelectRole(scope.row)"
>分配角色</el-button>
...
<script>
</script>
設(shè)置多選下拉菜單退个，通過(guò)Element的Select選擇器的基礎(chǔ)多功能設(shè)置
// list.vue
<el-dialog
...
>
<!-- <span>這是一段信息</span> -->
<el-select v-model="value1" multiple placeholder="請(qǐng)選擇">
<!-- 根據(jù) options 遍歷生成選項(xiàng)列表 -->
<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 {
...
// 列表數(shù)據(jù)
options: [{
value: '選項(xiàng)1',
label: '黃金糕'
}, {
value: '選項(xiàng)2',
label: '雙皮奶'
}, {
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
value: '選項(xiàng)4',
label: '龍須面'
}, {
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
// 選中的數(shù)據(jù)
value1: []
}
布局完成
展示角色列表
封裝所有的角色接口：地址
// services/role.js
...
// 獲取所有角色 - 用戶管理
export const getAllRoles = () => {
return request({
method: 'GET',
url: '/boss/role/all'
})
}
引入并且使用：
- 引入
- 聲明數(shù)據(jù)
- 綁定給下拉框
- 點(diǎn)擊分配角色時(shí)發(fā)送請(qǐng)求
- 請(qǐng)求成功設(shè)置數(shù)據(jù)
import { getAllRoles } from '@/services/role'
...
data () {
return {
...
// 所有角色募壕，對(duì)象示例的 option
roles: [],
// 選中角色，對(duì)應(yīng)示例的 value1
roleIdList: []
}
},
...
<el-select v-model="roleIdList" multiple placeholder="請(qǐng)選擇">
<el-option
v-for="item in roles"
:key="item.value"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
...
// 點(diǎn)擊用戶的分配角色按鈕
async handleSelectRole () {
// 顯示對(duì)話框
this.dialogVisible = true
// 點(diǎn)擊后加載角色列表
const { data } = await getAllRoles()
if (data.code === '000000') {
this.roles = data.data
}
}
提交分配
設(shè)置點(diǎn)擊事件
<el-button type="primary" @click="handleAllocRole">確 定</el-button>
...
// 提交分配角色操作（等提交完畢再隱藏對(duì)話框）
async handleAllocRole () {
}
觀察接口給用戶分配角色：地址
需要的請(qǐng)求參數(shù)是用戶ID和分配的角色I(xiàn)D組成的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({
})
}
請(qǐng)求用戶ID可以在顯示對(duì)話框時(shí)接收到組件傳值语盈，保存即可
// 當(dāng)前分配角色的ID（聲明在 data 中）
currentRoleID: null
...
// 點(diǎn)擊用戶的分配角色按鈕
async handleSelectRole (userData) {
// 將當(dāng)前操作的用戶ID保存舱馅，以便提交使用
this.currentRoleID = userData.id
...
},
傳參發(fā)送
// 提交分配角色操作
async handleAllocRole () {
// 提交
// - 用戶 ID 可以在顯示對(duì)話框時(shí)接收到組件傳值，保存即可
const { data } = await allocateUserRoles({
userId: this.currentRoleID,
roleIdList: this.roleIdList
})
if (data.code === '000000') {
// 提示
this.$message.success('分配角色成功')
// 關(guān)閉對(duì)話框
this.dialogVisible = false
}
}
默認(rèn)選中已經(jīng)分配的角色
roleList中保存的為已經(jīng)選中的選項(xiàng)刀荒，可以請(qǐng)求用戶已經(jīng)分配的角色代嗤，并且修改roleIdList即可
這里使用查詢用戶角色接口：地址
// services/role.js
...
// 查詢用戶角色
export const getUserRoles = userId => {
return request({
method: 'GET',
url: `/boss/role/user/${userId}`
})
}
引入
import { getAllRoles, allocateUserRoles, getUserRoles } from '@/services/role'
在點(diǎn)擊角色分配按鈕時(shí)棘钞，根據(jù)當(dāng)前用戶id查詢角色并更新到roleIdList即可
// 點(diǎn)擊用戶的分配角色按鈕
async handleSelectRole (userData) {
...
// 根據(jù)用戶id請(qǐng)求角色信息（data 被之前的請(qǐng)求使用過(guò)了，換個(gè)名字）
const { data2 } = await getUserRoles(userData.id)
// 遍歷得到的角色列表干毅，將id組成數(shù)據(jù)替換給 roleIdList 即可
this.roleIdList = data2.data.map(item => item.id)
},
其余的功能都是重復(fù)性工作宜猜，可以迅速完成
