分配角色对话框
<el-tooltip
effect="dark"
placement="top"
content="分配角色"
:enterable="false"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
@click="showRoleDialog(scope.row)"
></el-button>
</el-tooltip>
<!--分配角色对话框-->
<el-dialog
title="分配角色"
:visible.sync="roleDialogVisible"
width="50%"
@close="setRoleDialogClosed"
>
<div>
<p>当前用户:{{userInfo.username}}</p>
<p>当前角色:{{userInfo.role_name}}</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="roleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="allotRole">确 定</el-button>
</span>
</el-dialog>
// 分配角色对话框显示和隐藏
roleDialogVisible:false,
userInfo:{},
// 角色列表
rolesList:[],
//显示分配角色对话框
showRoleDialog(userInfo){
this.userInfo = userInfo
// 获取角色列表
const {data:res} = await this.$http.get('roles')
if(res.meta.status !== 200){
return this.$message.error('获取角色列表失败')
}
this.rolesList = res.data
this.roleDialogVisible=true
},
// 监听分配角色对话框的关闭事件
setRoleDialogClosed(){
},
// 分配角色
allotRole(){
}
elementui select
<!-- 分配新的角色: -->
<el-select v-model="selectedRoleId" placeholder="请选择">
<!-- label 展示文本 :value表示获取到的值 = selectedRoleId-->
<el-option
v-for="item in rolesList"
:key="item.id"
:label="item.roleName"
:value="item.id"
>
</el-option>
</el-select>
//显示分配角色对话框
async showRoleDialog(userInfo) {
this.userInfo = userInfo;
// 获取角色列表
const { data: res } = await this.$http.get("roles");
if (res.meta.status !== 200) {
return this.$message.error("获取角色列表失败");
}
this.rolesList = res.data;
this.roleDialogVisible = true;
},
// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {},
// 分配角色
async allotRole() {
// 判断是否选择了角色
if(!this.selectedRoleId){
return this.$message.error('请选择角色!')
}
const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId})
console.log(res)
if(res.meta.status !== 200){
return this.$message.error('更新角色失败')
}
this.$message.success('更新角色成功!')
this.getUserList()
this.roleDialogVisible=false
},
// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
this.selectedRoleId=null
this.userInfo={}
},
细节优化
分页离上方表格太近,由于在很多地方都用到,可以设置全局样式
global.css
.el-pagination {
margin-top: 15px;
}
vs-code 格式化的时候单引号会自动变成双引号,代码结构看的不方便
根目录下新建文件 文件名为.prettierrc 这个文件是可以自动识别的
{
//不需要分号结尾
"semi":false,
// 使用单引号
"singleQuote":true,
每一行宽度
"printWidth":200,
}
完整代码
<template>
<div>
<!-- 面包屑导航-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片试图-->
<el-card>
<!-- 搜索和添加 -->
<!-- gutter每列之间的间隔 槽宽 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" class="input-with-select" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户表格-->
<!-- 一页有很多行,这个不用关心 会自动帮我们循环 stripe隔行展示 -->
<el-table :data="userList" border stripe>
<!-- type="index" 会自动排序 -->
<el-table-column type="index" label="索引"> </el-table-column>
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="email" label="邮箱"> </el-table-column>
<el-table-column prop="mobile" label="电话"> </el-table-column>
<el-table-column prop="role_name" label="角色"> </el-table-column>
<el-table-column label="状态">
<!--自定义模板 使用作用域插槽,通过scope.row获取当前行数据-->
<template slot-scope="scope">
<div>
<el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"> </el-switch>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
<!-- enterable 文字是否可以移入提示信息,默认是可以的 -->
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
<el-tooltip effect="dark" placement="top" content="分配角色" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="showRoleDialog(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页功能-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
<!--添加用户对话框-->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password" show-password></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
<!--修改用户对话框-->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUser">确 定</el-button>
</span>
</el-dialog>
<!--分配角色对话框-->
<el-dialog title="分配角色" :visible.sync="roleDialogVisible" width="50%" @close="setRoleDialogClosed">
<div>
<p>当前用户:{{ userInfo.username }}</p>
<p>当前角色:{{ userInfo.role_name }}</p>
<p>
<!-- 分配新的角色: -->
<el-select v-model="selectedRoleId" placeholder="请选择">
<!-- label 展示文本 :value表示获取到的值 = selectedRoleId-->
<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id"> </el-option>
</el-select>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="roleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="allotRole">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// 查询用户列表的参数对象
queryInfo: {
query: '',
pagenum: 1, //页码
pagesize: 5, // 页大小
},
// 用户列表数据
userList: [],
// 总条数
total: 0,
// 添加对话框的显示或隐藏
addDialogVisible: false,
// 添加用户的表单数据对象
addForm: {
username: '',
password: '',
email: '',
mobile: '',
},
// 添加用户的校验规则
addFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '长度在 3 到 10 个字符',
trigger: 'blur',
},
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 15,
message: '长度在 6 到 15 个字符',
trigger: 'blur',
},
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: '邮箱格式不正确',
trigger: 'blur',
},
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/,
message: '手机号码格式不正确',
trigger: 'blur',
},
],
},
// 修改用户对话框的显示或隐藏
editDialogVisible: false,
editForm: {},
// 修改用户的校验规则
editFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
message: '邮箱格式不正确',
trigger: 'blur',
},
],
mobile: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1(3[0-9]|5[189]|8[6789])[0-9]{8}$/,
message: '手机号码格式不正确',
trigger: 'blur',
},
],
},
// 分配角色对话框显示和隐藏
roleDialogVisible: false,
userInfo: {},
// 角色列表
rolesList: [],
// select选中的值
selectedRoleId: null,
}
},
created() {
this.getUserList()
},
methods: {
// 获取用户列表数据
async getUserList() {
const { data: res } = await this.$http.get('users', {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
return this.$message.error('获取失败')
}
this.userList = res.data.users
this.total = res.data.total
},
// 监听页面大小(pagesize)改变的事件(每页显示多少条)
handleSizeChange(pagesize) {
// 改变pagesize的大小
this.queryInfo.pagesize = pagesize
// 重新加载用户列表数据
this.getUserList()
},
// 监听pagenum的事件(点击第几页)
handleCurrentChange(pagenum) {
// 把页码改了
this.queryInfo.pagenum = pagenum
// 重新加载用户列表数据
this.getUserList()
},
// 监听 switch开关状态的改变
async userStateChange(userinfo) {
const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
console.log(res.meta)
if (res.meta.status !== 200) {
//更新失败时回父为原始数据 (实际上点击按钮时就会更新状态,所以此时需要取反,回到原始)
userinfo.mg_state = !userinfo.mg_state
return this.$message.error('更新用户状态失败!')
}
this.$message.success('更新用户状态成功!')
},
// 监听添加用户对话框的关闭事件
addDialogClosed() {
//重置表单
this.$refs.addFormRef.resetFields()
},
// 添加用户
addUser() {
// 校验添加用户这个表单 valid(该参数校验是否成功)
this.$refs.addFormRef.validate(async (valid) => {
if (!valid) {
return
}
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status !== 201) {
return this.$message.error('添加用户失败')
}
// 成功后
//关闭对话框
this.addDialogVisible = false
// 刷新用户列表
this.getUserList()
// 提示添加用户成功
this.$message.success('添加用户成功')
})
},
// 显示编辑用户对话框
async showEditDialog(id) {
const { data: res } = await this.$http.get(`users/${id}`)
if (res.meta.status !== 200) {
return this.$message.error('查询用户失败')
}
this.editForm = res.data
this.editDialogVisible = true
},
// 修改用户
editUser() {
this.$refs.editFormRef.validate(async (valid) => {
if (!valid) {
return
}
const { data: res } = await this.$http.put(`users/${this.editForm.id}`, {
email: this.editForm.email,
mobile: this.editForm.mobile,
})
if (res.meta.status !== 200) {
return this.$message.error('修改用户失败')
}
this.editDialogVisible = false
this.getUserList()
this.$message.success('修改成功!')
})
},
// 监听修改用户对话框的关闭事件
editDialogClosed() {
//重置表单
this.$refs.addFormRef.resetFields()
},
// 根据ID删除用户
removeUserById(id) {
this.$confirm('确定要删除该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const { data: res } = await this.$http.delete(`users/${id}`)
if (res.meta.status !== 200) {
return this.$message.error('删除用户失败')
}
this.getUserList()
this.$message.success('删除用户成功!')
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除',
})
})
},
//显示分配角色对话框
async showRoleDialog(userInfo) {
this.userInfo = userInfo
// 获取角色列表
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败')
}
this.rolesList = res.data
this.roleDialogVisible = true
},
// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
this.selectedRoleId = null
this.userInfo = {}
},
// 分配角色
async allotRole() {
// 判断是否选择了角色
if (!this.selectedRoleId) {
return this.$message.error('请选择角色!')
}
const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId })
console.log(res)
if (res.meta.status !== 200) {
return this.$message.error('更新角色失败')
}
this.$message.success('更新角色成功!')
this.getUserList()
this.roleDialogVisible = false
},
},
}
</script>