目录
-
功能：
- 列表渲染
- 分页
- 修改用户的状态
- 添加用户
- 编辑
- 删除
- 分配权限
- 搜索
-
详细功能介绍：
- table表格渲染
- queryInfo 指的是 这个对象内的参数，去获取数据哦 里面有着 表单查询的参数，当前页，显示多少页
- 先获取用户列表，然后数据渲染
- prop是对应的字段名 label对应的头部标题
- 需要当前行数据的时候，需要在当前
template包裹 然后使用 scope插槽的方式 里面之中 组件拿到当前行的数据scope.row.XXX
- 分页实现
- size-change 事件来处理页码大小 就是修改了 当前页设置为1 和 显示的数据 设置为新选择的值 然后调用获取最新的用户列表
- current-change 当前页变动时候触发的事件 当前页设置为新选择的值 然后调用获取最新的用户列表
- 修改用户的状态 当状态发生改变的时候 拿到当前用户 的所有信息，向后台发起请求，id 还有状态 即可！
- 添加用户：
- 点击按钮 弹出对话框 (dialog) 需要在data数据之中定义一个变量
dialogVisible这个是弹出窗的显示或者隐藏的状态 - 注意点：就是这个表单 在关闭的时候，需要监听那个事件调用的，然后把表单重置一下
// 监听 添加用户对话框的关闭事件 addDialogClosed () { // 拿到当前 添加用户的 弹出对话框的节点 重置表单后 this.$refs.addUserFormRef.resetFields() }, - 添加用户的一个对象
addUserForm存放着添加用户的数据等 与对话框的数据绑定 - 还有绑定校验规则
- 添加用户后，点击确定
addUser- 先校验规则后 如果校验不过 直接return
- 否则的话就发起请求·向后台写入数据
- 然后显示提示信息 还有 调用获取 最新的用户列表 隐藏对话框隐藏！
- 点击按钮 弹出对话框 (dialog) 需要在data数据之中定义一个变量
- 编辑用户
- 点击编辑用户的时候 ，先 控制 editDialogVisible 编辑对话框 为显示状态
- 从点击的时候，传递当前编辑id，发起请求，拿到当前要编辑的信息
- 针对编辑对话框的 事件处理
- editUserForm 编辑的对象 这是从 根据id请求来的数据对象
- 对于数据渲染到对话框之中
- editUser 点击确定的时候 表单需要验证通过
- 然后把编辑对象数据 发送修改请求，修改数据
- 然后隐藏对话框 还有 调用 获取最新的用户列表等！
- 需要监听 编辑 对话框的 关闭，然后对表单进行重置
- 删除用户
- 点击删除的时候 传递当前删除的id
- 添加一个一个信息 (MessageBox 弹框)
- 根据这个删除的id 发起请求，删除后台数据
- 然后在使用
filter过滤掉删除的id 这样的话就 (或者 直接调用 获取最新的列表数据)
- 分配权限
- 点击分配权限的时候 传递当前行的数据
- 控制 分配权限的对话框 setRoleDialogVisible 设置为显示
- userInfo 当前需要被分配角色的用户 这是从 传递行的数据 赋值的
- rolesLsit 权限列表 需要发起请求获取权限列表
- Select 选择器 组件的使用
- 点击对话框中的分配权限 确定按钮
saveRoleInfo- 若是非当前角色id 直接给提示 请选择要分配的角色
- 拿到当前 userInfo 需要分配角色的id 还有所选中的id(this.selectRoleId)
- 然后调用 最新用户的列表
- 关闭分配权限
- 把需要分配的角色 清空
- 把当前选中的 权限id 清空
- 搜索
- 就是获取 最新的 用户列表之中 调用即可 因为里面已经有着 相对于的请求，还有参数！
- table表格渲染
<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>
<!-- 搜索 添加 -->
<el-row :gutter="20">
<el-col :span="6">
<el-input placeholder="请输入内容" 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>
<!-- 用户列表区域 -->
<el-table :data="userlist" border stripe>
<!-- stripe: 斑马条纹
border：边框-->
<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="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
circle
@click="showEditDialog(scope.row.id)"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
circle
@click="removeUserById(scope.row.id)"
></el-button>
<el-tooltip
class="item"
effect="dark"
content="角色分配"
:enterable="false"
placement="top"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
circle
@click="showSetRole(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="[2, 5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totle"
></el-pagination>
</el-card>
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<!-- 内容主体 -->
<el-form
:model="addUserForm"
ref="addUserFormRef"
:rules="addUserFormRules"
label-width="100px"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="addUserForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addUserForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addUserForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addUserForm.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="editUserForm"
ref="editUserFormRef"
:rules="editUserFormRules"
label-width="70px"
>
<el-form-item label="用户名">
<el-input v-model="editUserForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editUserForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="editUserForm.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="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
<div>
<p>当前用户：{{userInfo.username}}</p>
<p>当前角色：{{userInfo.role_name}}</p>
<p>
分配角色：
<el-select
v-model="selectRoleId"
filterable
allow-create
default-first-option
placeholder="请选择文章标签"
>
<el-option
v-for="item in rolesLsit"
:key="item.id"
:label="item.roleName"
:value="item.id"
></el-option>
</el-select>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
// 自定义邮箱规则
var checkEmail = (rule, value, callback) => {
const regEmail = /^\w+@\w+(\.\w+)+$/
if (regEmail.test(value)) {
// 合法邮箱
return callback()
}
callback(new Error('请输入合法邮箱'))
}
// 自定义手机号规则
var checkMobile = (rule, value, callback) => {
const regMobile = /^1[34578]\d{9}$/
if (regMobile.test(value)) {
return callback()
}
// 返回一个错误提示
callback(new Error('请输入合法的手机号码'))
}
return {
// 获取用户列表查询参数对象
queryInfo: {
query: '',
// 当前页数
pagenum: 1,
// 每页显示多少数据
pagesize: 5
},
userlist: [],
totle: 0,
// 添加用户对话框
addDialogVisible: false,
// 用户添加
addUserForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 用户添加表单验证规则
addUserFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{
min: 2,
max: 10,
message: '用户名的长度在2～10个字',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入用户密码', trigger: 'blur' },
{
min: 6,
max: 18,
message: '用户密码的长度在6～18个字',
trigger: 'blur'
}
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 修改用户
editDialogVisible: false,
editUserForm: {},
// 编辑用户表单验证
editUserFormRules: {
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 分配角色对话框
setRoleDialogVisible: false,
// 当前需要被分配角色的用户
userInfo: {},
// 所有角色数据列表
rolesLsit: [],
// 已选中的角色Id值
selectRoleId: ''
}
},
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.totle = res.data.totle
},
// 监听 pagesize改变的事件
handleSizeChange (newSize) {
this.queryInfo.pagesize = newSize
this.queryInfo.pagenum = 1;
this.getUserList()
},
// 监听 页码值 改变事件
handleCurrentChange (newSize) {
this.queryInfo.pagenum = newSize
this.getUserList()
},
// 监听 switch开关 状态改变
async userStateChanged (userInfo) {
// console.log(userInfo)
const { data: res } = await this.$http.put(
`users/${userInfo.id}/state/${userInfo.mg_state}`
)
if (res.meta.status !== 200) {
userInfo.mg_state = !userInfo.mg_state
return this.$message.error('更新用户状态失败')
}
this.$message.success('更新用户状态成功！')
},
// 监听 添加用户对话框的关闭事件
addDialogClosed () {
this.$refs.addUserFormRef.resetFields()
},
// 添加用户
addUser () {
// 提交请求前，表单预验证
this.$refs.addUserFormRef.validate(async valid => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.post('users', this.addUserForm)
if (res.meta.status !== 201) {
this.$message.error('添加用户失败！')
}
this.$message.success('添加用户成功！')
// 隐藏添加用户对话框
this.addDialogVisible = false
this.getUserList()
})
},
// 编辑用户信息
async showEditDialog (id) {
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查询用户信息失败！')
}
this.editUserForm = res.data
this.editDialogVisible = true
},
// 监听修改用户对话框的关闭事件
editDialogClosed () {
this.$refs.editUserFormRef.resetFields()
},
// 修改用户信息
editUser () {
// 提交请求前，表单预验证
this.$refs.editUserFormRef.validate(async valid => {
// console.log(valid)
// 表单预校验失败
if (!valid) return
const { data: res } = await this.$http.put(
'users/' + this.editUserForm.id,
{
email: this.editUserForm.email,
mobile: this.editUserForm.mobile
}
)
if (res.meta.status !== 200) {
this.$message.error('更新用户信息失败！')
}
// 隐藏添加用户对话框
this.editDialogVisible = false
this.$message.success('更新用户信息成功！')
this.getUserList()
})
},
// 删除用户
async removeUserById (id) {
const confirmResult = await this.$confirm(
'此操作将永久删除该用户, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 点击确定 返回值为：confirm
// 点击取消 返回值为： cancel
if (confirmResult !== 'confirm') {
return this.$message.info('已取消删除')
}
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) return this.$message.error('删除用户失败！')
this.$message.success('删除用户成功！')
this.getUserList()
},
// 展示分配角色的对话框
async showSetRole (role) {
this.userInfo = role
// 展示对话框之前，获取所有角色列表
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败！')
}
this.rolesLsit = res.data
this.setRoleDialogVisible = true
},
// 分配角色
async saveRoleInfo () {
if (!this.selectRoleId) {
return this.$message.error('请选择要分配的角色')
}
const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectRoleId })
if (res.meta.status !== 200) {
return this.$message.error('更新用户角色失败！')
}
this.$message.success('更新角色成功！')
this.getUserList()
this.setRoleDialogVisible = false
},
// 分配角色对话框关闭事件
setRoleDialogClosed () {
this.selectRoleId = ''
this.userInfo = {}
}
}
}
</script>
<style lang="less" scoped>
</style>
1791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
