1.概述
由于我们在主表User表中加入了新的字段,并且做了与新表的关联,所以,我们应该做一些新的内容显示与操作
2.User表中显示新字段
其实就是在显示中多加一个对应字段名的列
<!-- src/components/user/User.vue -->
看不明白就对应完整版代码查看!!!!
<el-table-column prop="role_name" label="权限名称"></el-table-column>
3.在User表修改用户功能中增加下拉框
需要实现在user表中给用户选择修改用户的权限,在element-ui中加入下拉框更加友好。
我们需要发送一个请求获取到角色表中的数据,在把名称返回给下拉框中的选项
<el-form-item label="角色">
<el-select v-model="editForm.role_name" placeholder="请选择角色">
<el-option :label="r.name" :value="r.id" v-for="r in roles" :key="r.id"></el-option>
</el-select>
</el-form-item>
// 获取角色列表
// 创建时候就应该调用此函数
async getRole(){
const { data: res } = await this.$axios.get('/api/role')
if (res.status !== 200) return this.$msg.error(res.msg)
// roles记得去data中定义
this.roles = res.data
console.log(this.roles);
}
4.给新增用户也加上这个功能
方法是一样的,复制过去就好,改一下属性名
<el-form-item label="角色">
<el-select v-model="addForm.role_name" placeholder="请选择角色">
<el-option :label="r.name" :value="r.id" v-for="r in roles" :key="r.id"></el-option>
</el-select>
</el-form-item>
5.测试
6.报错——Form输入框无法写入数据
如果说代码不出错的前提下,可以刷新一下页面,有可能是没同步过来
7.完整代码
<!-- src/components/user/User.vue -->
<template>
<div>
<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>
</div>
<el-card>
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入用户名" v-model="queryInfo.name">
<el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
</el-input>
</el-col>
<el-col :span="2">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible=true">新增用户</el-button>
</el-col>
</el-row>
<el-row>
<el-col>
<el-table :data="userList" border style="width:100%">
<el-table-column type="index"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="用户名"></el-table-column>
<el-table-column prop="nick_name" label="昵称"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="role_name" label="权限名称"></el-table-column>
<el-table-column label="操作">
<!--
当一个方框中有多个按键功能时,可以使用查槽的方式去传递信息。
利用slot-scope定义的属性scope.row,可以直接获取到整行的信息
-->size="small"
<template slot-scope="scope">
<el-button size="small" type="primary" icon="el-icon-edit" circle @click="showEdit(scope.row)"></el-button>
<el-button size="small" type="warning" icon="el-icon-refresh" circle @click="showReset(scope.row)"></el-button>
<el-button size="small" type="danger" icon="el-icon-delete" circle @click="showDel(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pnum" :page-sizes="[1,2,5,10]" :page-size="queryInfo.psize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<!-- 新增用户的dialog模态框 -->
<!-- 通过visible.sync显示 -->
<el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%" :before-close="addFormClose">
<!-- ref用于获取表单数据,绑定表单。 -->
<el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
<!-- prop绑定规则 -->
<el-form-item label="账号" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nick_name">
<el-input v-model="addForm.nick_name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="addForm.pwd"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="real_pwd">
<el-input v-model="addForm.real_pwd"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="addForm.phone"></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="角色">
<el-select v-model="addForm.role_name" placeholder="请选择角色">
<el-option :label="r.name" :value="r.id" v-for="r in roles" :key="r.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addFormClose">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑用户的dialog模态框 -->
<el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="30%">
<!-- ref用于获取表单数据,绑定表单。 -->
<el-form ref="editFormRef" :model="editForm" :rules="editFormRules" label-width="80px">
<!-- prop绑定规则 -->
<el-form-item label="账号" prop="name">
<el-input v-model="editForm.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nick_name">
<el-input v-model="editForm.nick_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="editForm.phone"></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="角色">
<el-select v-model="editForm.role_name" placeholder="请选择角色">
<el-option :label="r.name" :value="r.id" v-for="r in roles" :key="r.id"></el-option>
</el-select>
</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>
<!-- 删除用户的dialog模态框 -->
<el-dialog title="删除用户" :visible.sync="delDialogVisible" width="30%">
<span>确定是否删除用户名为:{{delName}} 昵称为:{{delNickName}}吗????</span>
<span slot="footer" class="dialog-footer">
<el-button @click="delDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="delUser">确 定</el-button>
</span>
</el-dialog>
<!-- 重置用户密码的dialog模态框 -->
<el-dialog title="重置用户密码" :visible.sync="resetDialogVisible" width="30%">
<span>确定是否重置用户名为:{{resetName}} 昵称为:{{resetNickName}}吗????</span>
<span slot="footer" class="dialog-footer">
<el-button @click="resetDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="resetUser">确 定</el-button>
</span>
</el-dialog>
</el-card>
</div>
</template>
<script>
export default {
data () {
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.addForm.pwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
}
const validatePhone = (rule, value, callback) => {
// 定义一个正则来验证手机号是否有效
let phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
if (phoneReg.test(value)){
return callback()
}
return callback(new Error('请输入有效的手机号'))
}
const validateEmail = (rule, value, callback) => {
// 定义一个正则来验证手机号是否有效
let EmailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if (EmailReg.test(value)){
return callback()
}
return callback(new Error('请输入有效的邮箱号'))
}
return {
userList : [],
// 用于传递页码和每页的条数,控制搜索条件
queryInfo: {
// 默认值
name:'',
pnum: 1,
psize: 2
},
// 用于统计总共有几条数据
total: 0,
addDialogVisible:false,
editDialogVisible:false,
delDialogVisible:false,
resetDialogVisible:false,
addForm:{},
editForm:{},
delName : '',
delNickName: '',
delId: 0,
resetName : '',
resetNickName: '',
resetId: 0,
roles: [],
addFormRules:{
// 一个字段可以多个规则
// required是否必填,message提示信息(输入框下面),trigger:什么时候触发(光标不在输入框或回车)
name:[
{ required: true, message: '请输入用户名', trigger:'blur' },
{ min: 1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
],
nick_name:[
{ required: true, message: '请输入昵称', trigger:'blur' },
{ min: 1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
],
pwd:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 1, max:20, message: '长度在1~20个字符之间', trigger:'blur'}
],
real_pwd:[
{ validator: validatePass2, trigger:'blur'}
],
phone:[
{ validator: validatePhone, trigger:'blur'}
],
email:[
{ validator: validateEmail, trigger:'blur'}
]
},
editFormRules:{
phone:[
{ validator: validatePhone, trigger:'blur'}
],
email:[
{ validator: validateEmail, trigger:'blur'}
]
}
}
},
// 创建时进行的操作
created(){
this.getUserList()
this.getRole()
},
// 异步操作转同步:因为加载到这个页面时候就必须加载此数据
methods: {
async getUserList(){
// 发送请求到后端:当时定义的请求方式是put,定义的地址是/user_list, 传递第几页第几条
const { data : res } = await this.$axios.get('/api/user/user_list', { params: this.queryInfo })
// 避免报错
if(res.status != 200) return this.$msg.error(res.msg)
console.log(res.data);
this.total = res.data.totalPage
this.userList = res.data.users
},
// 改变每页显示多少条数据
handleSizeChange(val) {
this.queryInfo.psize = val
// 一定记得改变完要调用方法
this.getUserList()
},
// 改变展示哪一页
handleCurrentChange(val) {
this.queryInfo.pnum = val
this.getUserList()
},
searchUser(){
this.queryInfo.pnum = 1
this.getUserList()
},
// 每次打开之前触发的函数
addFormClose(){
// $refs.addFormRef获取到整个组件
this.$refs.addFormRef.resetFields()
this.addDialogVisible = false
},
addUser(){
// 发送请求之前,验证数据是否规范valid
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
// 发送请求
const { data: res } = await this.$axios.post(
'/api/user/user',
this.$qs.stringify(this.addForm)
)
// 验证结果
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
// 隐藏窗口
this.addDialogVisible = false
// 重置增加用户的表单
this.$refs.addFormRef.resetFields()
// 重新获取用户列表
this.getUserList()
})
},
// 显示信息在编辑用户窗口
async showEdit(row){
// 发送请求:获取后台实时数据
const { data: res} = await this.$axios.get('/api/user/user', {params: { id: row.id }})
if (res.status !== 200) return this.$msg.error(res.msg)
console.log(res)
this.editForm = res.data
// 先获取数据再显示窗口
this.editDialogVisible = true
},
editUser(){
// 发送请求之前,验证数据是否规范valid
this.$refs.editFormRef.validate(async valid=>{
if(!valid) return
// 发送请求
const {data: res} = await this.$axios.put('/api/user/user',this.$qs.stringify(this.editForm))
// 验证结果
if (res.status !== 200 ) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.editDialogVisible = false
this.getUserList()
})
},
// 显示确认删除用户的弹窗
showDel(row){
this.delId = row.id
this.delName = row.name
this.delNickName = row.nick_name
this.delDialogVisible = true
},
async delUser(){
const {data: res} = await this.$axios.delete('/api/user/user', { data:{ id: this.delId}})
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.delDialogVisible = false
this.getUserList()
},
// 显示重置密码的弹窗
showReset(row){
this.resetId = row.id
this.resetName = row.name
this.resetNickName = row.nick_name
this.resetDialogVisible = true
},
// 重置密码弹窗中的确认操作
async resetUser(){
const {data: res} = await this.$axios.get('/api/user/reset', {params: {id:this.resetId} })
if (res.status !== 200) return this.$msg.error(res.msg)
this.$msg.success(res.msg)
this.resetDialogVisible = false
this.getUserList()
},
// 获取角色列表
// 创建时候就应该调用此函数
async getRole(){
const { data: res } = await this.$axios.get('/api/role')
if (res.status !== 200) return this.$msg.error(res.msg)
// roles记得去data中定义
this.roles = res.data
console.log(this.roles);
}
}
}
</script>
<style>
.el-table{
margin-top: 10px;
}
</style>