methods: { tableSelectionChange(val) { console.log(val); this.selected = val; }, pageSizeChange(val) { console.log(`每页 ${val} 条`); this.filter.per_page = val; this.getUsers(); }, pageCurrentChange(val) { console.log(`当前页: ${val}`); this.filter.page = val; this.getUsers(); }, setCurrent(user){ this.currentId=user.id; this.update.name=user.name; this.update.phone=user.phone; this.update.email=user.email; this.update.is_active=user.is_active; this.dialogUpdateVisible=true; }, // 重置表单 reset() { this.$refs.create.resetFields(); }, query(){ this.filter.name=''; this.filter.username=''; this.filter.phone=''; this.filter[this.select]=this.keywords; this.getUsers(); }, // 获取用户列表 getUsers() { this.loading = true; var resource = this.$resource(this.url); resource.query(this.filter) .then((response) => { this.users = response.data.datas; this.total_rows = response.data.total_rows; this.loading = false; }) .catch((response)=> { this.$message.error('错了哦，这是一条错误消息'); this.loading = false; }); }, // 创建用户 createUser() { // 主动校验 this.$refs.create.validate((valid) => { if (valid) { this.create.id=getuuid(); this.createLoading=true; var resource = this.$resource(this.url); resource.save(this.create) .then((response) => { this.$message.success('创建用户成功！'); this.dialogCreateVisible=false; this.createLoading=false; this.reset(); this.getUsers(); }) .catch((response) => { var data=response.data; if(data instanceof Array){ this.$message.error(data[0]["message"]); } else if(data instanceof Object){ this.$message.error(data["message"]); } this.createLoading=false; }); } else { //this.$message.error('存在输入校验错误!'); return false; } }); }, // 更新用户资料 updateUser() { this.$refs.update.validate((valid) => { if (valid) { this.updateLoading=true; var actions = { update: {method: 'patch'} } var resource = this.$resource(this.url,{},actions); resource.update({"ids":this.currentId},this.update) .then((response) => { this.$message.success('修改用户资料成功！'); this.dialogUpdateVisible=false; this.updateLoading=false; //this.reset(); this.getUsers(); }) .catch((response) => { var data=response.data; console.log(data); if(data instanceof Array){ this.$message.error(data[0]["message"]); } else if(data instanceof Object){ this.$message.error(data["message"]); } this.updateLoading=false; }); } else { //this.$message.error('存在输入校验错误!'); return false; } }); }, // 删除单个用户 removeUser(user) { this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' }) .then(() => { // 向请求服务端删除 var resource = this.$resource(this.url + "{/id}"); resource.delete({ id: user.id }) .then((response) => { this.$message.success('成功删除了用户' + user.username + '!'); this.getUsers(); }) .catch((response) => { this.$message.error('删除失败!'); }); }) .catch(() => { this.$message.info('已取消操作!'); }); }, //删除多个用户 removeUsers() { this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' }) .then(() => { console.log(this.selected); var ids = []; //提取选中项的id $.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向请求服务端删除 var resource = this.$resource(this.url); resource.remove({ids: ids.join(",") }) .then((response) => { this.$message.success('删除了' + this.selected.length + '个用户!'); this.getUsers(); }) .catch((response) => { this.$message.error('删除失败!'); }); }) .catch(() => { this.$Message('已取消操作!'); }); } }
这就是整个增删改查的过程