41、实现添加用户前的表单预校验
点击确定按钮时不是直接关闭对话框，而是在点击按钮时，调用函数对填入的信息进行校验。
给确定按钮绑定事件处理函数：
<el-button type="primary" @click="addUser">确 定</el-button>
调用函数：
methods: {
addUser(){
this.$refs.addFormRef.validate(valid =>{
console.log(valid);
// if(!valid) return;
// 可以发起添加用户的网络请求
})
}
}
42、调用API接口完成添加用户操作
addUser(){
this.$refs.addFormRef.validate(async valid =>{
console.log(valid);
// if(!valid) return;
// 可以发起添加用户的网络请求
const {data: res} = await this.$http.post('users', this.addForm);
if(res.meta.status !== 201){
this.$message.error('添加用户失败！');
}
this.$message.success('添加用户成功！');
// 隐藏添加用户的对话框
this.addDialogVisible = false;
// 重新获取用户
this.getUserList();
})
}
43、展示修改用户的对话框
实现点击修改按钮后弹出框：
1、给修改按钮绑定click事件，指定一个处理函数，只要调用这个函数就会弹出框。@click="showEditDialog()
<!-- 修改按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog()"></el-button>
2、在methods里定义这个处理函数
// 展示用户编辑的对话框
showEditDialog() { }
3、添加对应的对话框组件
<!-- 修改用户的对话框 -->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
4、在return里定义布尔值editDialogVisible
// 控制修改用户对话框的显示与隐藏
editDialogVisible:false
5、给处理函数showEditDialog()重新赋值就能弹出框
// 展示用户编辑的对话框
showEditDialog() {
this.editDialogVisible = true;
}
44、根据ID查询对应的用户信息
怎样根据ID查询用户的信息：通过形参的形式在处理函数里获取用户的ID，通过修改按钮的单机事件传进去。
修改按钮的外面通过作用域插槽接收到了scope数据对象，通过scope.row可以获取这一行对应的数据信息，所以scope.row就是用户信息，从而能获取到用户的ID。
获取到ID后，调用对应的接口获取用户信息。把查询到的信息保存到editForm表单数据对象上。
<el-table-column label="状态">
<template slot-scope="scope">
<!-- scope的scope.row的属性，代表当前这一行的数据 -->
<!-- {{scope.row}} -->
<el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<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"></el-button>
<!-- 分配角色按钮 -->
<el-tooltip effect="dark" content="分配角色" placement="top">
<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
async showEditDialog(id) {
// console.log(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;
}
45、渲染修改用户的表单、实现重置
<!-- 修改用户的对话框 -->
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" disabled>
<el-form-item label="用户名">
<el-input v-model="editForm.username"></el-input>
</el-form-item>
</el-form>
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
</el-form>
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="手机" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-dialog>
data() {
return {
// 修改表单的验证规则对象
editFormRules:{
email:[
{required: true, message: '请输入用户邮箱', trigger: 'blur'},
{validator: checkEmail,trigger:'blur'}
],
mobile:[
{required: true, message: '请输入用户手机号码', trigger: 'blur'},
{validator: checkMobile,trigger:'blur'}
]
}
}
}
如何实现重置操作？监听对话框的close事件，在close事件的处理函数中重置当前表单。
<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
methods: {
// 监听修改用户对话框的关闭事件
editDialogClosed(){
this.$refs.editFormRef.resetFields();
}
}
46、完成提交修改之前的表单预验证、完成修改
对提交修改点击确定之前对表单进行预验证，验证通过之后才发起真正的网络请求，进行真正的修改。
<el-button type="primary" @click="editUserInfo">确 定</el-button>
methods: {
// 监听修改用户对话框的关闭事件
editDialogClosed(){
this.$refs.editFormRef.resetFields();
},
// 修改用户信息并提交
editUserInfo(){
this.$refs.editFormRef.validate(valid =>{
console.log(valid);
})
}
如果验证通过，控制台会打印出true，不通过则打印出false。
然后发起修改用户信息的数据请求：
// 修改用户信息并提交
editUserInfo(){
this.$refs.editFormRef.validate(async valid =>{
// console.log(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('更新用户信息成功！');
})
}
47、弹框询问用户是否确认删除
在点击“删除”按钮的同时弹出“是否确认删除”的框。
给“删除”按钮绑定单击事件，@click="removeUserById(scope.row.id)"。
再新增这个处理函数，确定是否能打印出用户的ID：
// 根据ID删除对应的用户信息
removeUserById(id){
console.log(id);
}
引入组件：
.catch捕获了用户的取消行为。
// 根据ID删除对应的用户信息
async removeUserById(id){
// console.log(id);
// 弹框询问用户是否删除数据
const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).catch(err => err);
// 如果用户确认删除，则返回值为字符串confirm
// 如果用户取消删除，则返回值为字符串cancel
// console.log(confirmResult);
if(confirmResult !== 'confirm'){
return this.$message.info('已取消删除！');
}
console.log('确认删除！');
}
48、调用API接口完成删除用户的操作
// 如果用户确认删除，则返回值为字符串confirm
// 如果用户取消删除，则返回值为字符串cancel
// console.log(confirmResult);
if(confirmResult !== 'confirm'){
return this.$message.info('已取消删除！');
}
// console.log('确认删除！');
const {data:res} = await this.$http.delete('users/' + id);
if(res.meta.status !== 200) {
return this.$message.error('删除用户失败！');
}
this.$message.success('删除成功！！');
// 删除成功后需要刷新用户列表，调用getuserlist()函数即可
this.getUserList();
49、创建user子分支、rights子分支
目前已经实现了用户列表里的所有功能，接下来应该把代码提交到码云仓库里进行保存。
创建user子分支：
git branch //检查当前所处的分支
* login
master
应该把代码放到一个新的分支里，
git checkout -b user //新建子分支，把代码迁移到一个新的分支 user 里面
git branch //当前已经处于user分支里
login
master
* user
git status //检查user文件里的状态，有些文件是修改的，有些文件是新增的，它们都是红色
On branch user
git add . //将修改和新增的文件统一添加到暂存区
git status //检查user文件里的状态，已经变成绿色了，说明添加到暂存区成功
git commit -m "完成用户列表功能的开发" //将代码提交到user子分支里
git status //检查状态，此时工作目录是干净的，user里的代码就是最新的了
git branch //此时，本地已添加分支user，但云端并没有同步
login
master
* user
git push -u origin user //第一次把本地的分支推送到云端，要用到origin云端仓库的别名，这里可能会需要填入码云的账号和密码
git branch //检查所处分支
login
master
* user
git checkout master //切换到主分支
Switched to branch 'master'
git merge user //从主分支把user的代码合并，这样本地master里的代码也是最新的了，但云端的还不是
git push //本地的master代码推送到云端进行保存，这样云端和本地的代码都是最新的了
创建rights子分支：
git branch //检查当前所处的分支
git checkout -b rights //创建新的子分支rights
git branch //检查当前所处的分支
git push -u origin rights //把新建的分支推送到云端保存
50、展示权限列表组件、绘制面包屑导航和卡片视图
在权限管理页面里的权限列表里展示组件，先创建对应的组件，再定义对应的路由规则。
rights.vue
<template>
<div>
<h3>权限列表组件页面</h3>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
</style>
在index.js里引入组件：
import Rights from '../components/power/rights.vue'
{ path: '/rights', component: Rights}
接下来绘制面包屑导航和卡片视图区。
<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>123
</el-card>
</div>
</template>
下一步就是获取对应的权限列表数据，通过表格的形式渲染出来。
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
