- 实现修改用户表单的重置
给表单添加colse事件，事件处理函数中将表单重置resetFields()
//监听修改用户对话框关闭事件
editDialogClosed() {
//重置表单
this.$refs.editFormRef.resetFields()
}
- 实现提交修改之前表单预验证validate()
//修改表单预验证
editUserInfo() {
this.$refs.editFormRef.validate(valid => {
// console.log(valid); true or false
if(!valid) return
//TODO 发起请求
})
}
- 实现修改功能
//修改表单预验证
editUserInfo() {
this.$refs.editFormRef.validate(async valid => {
// console.log(valid); true or false
if(!valid) return
//发起put请求
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('更新用户信息成功！')
})
}
- 实现删除用户的操作
使用elementUI中的MessageBox给用户的删除一个提示
调用confirm方法即可打开消息提示，它模拟了系统的 confirm，在这里我们用了 Promise 来处理后续响应。
引入方式不同，通过原型挂载的形式把MessageBox.comfirm这个函数挂载到了Vue原型对象上，这样的话在每一个组件中都可以通过this.$comfirm来弹出一个确认消息的提示框
Vue.prototype.$confirm = MessageBox.confirm
//通过ID删除用户
removeUserById() {
//提示用户
const res = this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
console.log(res);
}
返回的是promise对象
通过async await来优化这次请求
加了async await的确认结果
点击取消会报错，用catch捕获这个错误
//提示用户
const res =await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => {
return err
})
加了catch能正常显示结果
catch代码只有一个参数一个return，可以简化成以下代码
const res =await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
分配角色功能需要等到完成权限管理后再进行开发
完整的删除代码
//通过ID删除用户
async removeUserById(id) {
//提示用户
const confirmResult =await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// console.log(confirmResult);
if(confirmResult !== "confirm") {
return this.$message.info('已取消删除')
}
// console.log("确认了删除");
//TODO 发起delete请求删除用户
const {data: res} = await this.$http.delete(`users/${id}`)
if(res.meta.status !== 200) return this.$message.error('删除用户失败！')
this.$message.success("删除用户成功")
this.getUserList()
}
},
- 提交用户列表功能代码
git branch查看当前分支
将代码迁移到user分支
创建并切换到新分支
此时代码已经在user分支上
git status检查当前分支状态
git add . 将修改新增的文件添加到暂存区
git commit -m "" 提交代码到仓库
检查状态，是干净的
将分支推送到github
合并到主分支
把本地main推送到云端，不用加-u，云端已经有了，直接push就行。
4.3 权限管理的开发
-
git管理分支
创建新分支rights
git checkout -b rights
把新分支推送到云端，第一次推送，用git push -u origin rights
git push -u origin rights
- 创建新组件，定义路由规则，展示组件
通过路由的形式加载组件 - 权限管理布局
面包屑和卡片 - 请求权限列表的数据
data() {
return {
//响应数据的数组
rightsList: []
}
},
created() {
this.getRightsList()
},
methods: {
async getRightsList() {
const {data: res} = await this.$http.get('rights/list')
if(res.meta.status !== 200) {
return this.$message.error('获取权限列表失败！')
}
this.rightsList = res.data
console.log(this.rightsList);
}
},
- 渲染权限列表数据
:data绑定数据源，stripe表格隔行变色， border表格边框线，label列的名字， prop对应对象中的键名填入数据， 权限等级那一列要用到作用域插槽和v-if判断，通过作用域插槽scope.row.level获取到这一行对应的等级（0、1、2），v-if判断显示哪一个。
<!-- 卡片区域 -->
<el-card>
<el-table :data="rightsList" stripe border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="level">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.level === '1'"
>二级</el-tag
>
<el-tag type="warning" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
- 实现角色列表
除了展开功能，都是相同的思路。
网友评论