//导入封装后的axios
import {instance} from '@/util/request'
export default{
getUsers:params=>instance.get('/users/getUsers',{params})
}
{{scope.row.auth==1?"超级管理员":scope.row.auth==2?"普通管理员":""}}
编辑
删除
export default {
data() {
return {
list: [],
total: 0,
query:{
pageSize:5,
currentPage:1
}
};
},
methods: {
async getUsers() {
const result = await this.$api.users.getUsers(this.query);
console.log("result", result.data);
this.list = result.data.result;
this.total = result.data.total;
},
changePageSize(args){
this.query.pageSize=args
this.getUsers()
},
changeCurrentPage(args){
this.query.currentPage=args
this.getUsers()
}
},
created() {
this.getUsers();
},
};
首先在data中的query对象中添加type和value属性
export default {
data() {
return {
query:{
type:'',
value:'',
pageSize:5,
currentPage:1
}
};
},
};
页面中进行布局
搜索
略
在api接口中编写修改方法
import {instance} from '@/util/request'
export default{
updateUsers:data=>instance.put('/users/updateUsers',data)
}
为编辑按钮绑定事件
编辑
在data中定义
data(){
return{
updateDialogVisible:false,
updateUserItem:{
username:'',
auth:1
}
}
}
在methods中定义一个修改方法
methods:{
async updateUserApi(){
console.log('修改后的数据',this.updateUserItem);
const result=await this.$api.users.updateUsers(this.updateUserItem)
console.log('resultss',result);
if(result.code){
this.$message.success(result.message)
//模态框关闭
this.updateDialogVisible=false
}
}
}
使用深浅拷贝解决修改中的一个问题
如上程序有一个问题,就是当修改的时候,在未点击确认按钮之前,当文本框中的内容变化,table表格中对应的行也在变化,页面刷新后数据又还原了,实际上这样是有问题的,解决方案就是对数据进行深拷贝
methods:{
updateUser(args){
//对数据进行深拷贝
this.updateUserItem={...args.row}
this.updateDialogVisible=true
},
async updateUserApi(){
const result=await this.$api.users.updateUsers(this.updateUserItem)
if(result.code){
this.$message.success(result.message)
//重新渲染列表页面
this.getUsers()
//模态框关闭
this.updateDialogVisible=false
}
}
}
首先在api/modules文件夹下创建students.js文件,在该文件中编写增加的方法
import {instance} from '@/util/request'
export default{
addStudents:data=>instance.post('/students/addStudents',data)
}
在api文件下的index.js中对studnets模块进行汇总
import users from "./modules/users";
import students from "./modules/students";
export default{
users,students
}
首先在api/modules文件夹下新建subjects.js文件,在该文件下定义查询专业的方法
import {instance} from '@/util/request'
export default{
getSubjects:params=>instance.get("/subjects/getSubjects",{params})
}
然后在api/index.js中进行汇总
import users from "./modules/users";
import students from "./modules/students";
import subjects from "./modules/subjects";
export default{
users,students,subjects
}
在studentList.vue组件中获取所有的专业并绑定到下拉列表中
export default {
data(){
return{
addStudentDialogVisible:false,
subjectsAllList:[]
}
},
methods:{
openAddDialog(){
this.addStudentDialogVisible=true
},
handleCloseAddStudentDialog(){
this.addStudentDialogVisible=false
},
//获取所有的专业
async getAllSubjects(){
const result=await this.$api.subjects.getSubjects()
console.log('所有专业',result.data.result);
this.subjectsAllList=result.data.result
}
},
created(){
this.getAllSubjects()
}
}
这里通过watch监听器来完成
watch:{
'addStudentItem.subjectsId':{
handler:async function(newVal){
let result=await this.$api.classes.getClassesBySubjectsId(newVal)
this.classesBySubjectList=result.data.result
this.addStudentItem.classesId=""
}
}
}
methods:{
handleAvatarSuccess(args){
console.log('args',args);
this.addStudentItem.image=`http://www.zhaijizhe.cn:3005${args.data[0]}`
},
beforeAvatarUpload(file){
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
},
methods:{
async addStudentApi(){
// console.log('学生对象',this.addStudentItem);
const result=await this.$api.students.addStudents(this.addStudentItem)
if(result.code){
this.$message.success(result.message)
//将表单中的数据清空
this.addStudentItem.name=""
this.addStudentItem.age=""
this.addStudentItem.gender=""
this.addStudentItem.subjectsId=""
this.addStudentItem.classesId=""
this.addStudentItem.image=""
this.addStudentDialogVisible=false
}
}
}