|
vue获取后端接口实现的增删改查
查询
添加
取 消
确 定
修改
删除
总条数
export default {
data() {
return {
tableData: [],
//条数初始值
currentPage: 1,
// 当前开始开始页数
pageSize: 3,
//一页几条条数
total: 0,
//搜索条件
selectemp: {},
//删除事获取的id
empId:"",
//隐藏form表单
dialogVisible:false,
//添加form数据，否则页面不显示
form:{},
//表单的添加和修改
titleMap:{
addData:"添加数据",
updateData:"修改数据",
},
//表单名为一个字符串
dialogTitle:"",
//显示id行
addflag:true,
}
},
created() {
// 页面运行先加载
this.getAll();
// this.initTable();
},
methods: {
// initTable: function () {
// var than = this;
// this.axios.get("http://localhost:8081/emp/All").then(reap => {
// //console.log(reap)
// if (reap.data.code == 200) {
// than.tableData = reap.data.data;
// }
// });
// },
getAll: function () {
var than = this;
// this.axios.get("http://localhost:8081/emp/getAll/" + this.currentPage+"/"+this.pageSize).then(res => {
this.axios.post(`http://localhost:8081/emp/getAll/${this.currentPage}/${this.pageSize}`, this.selectemp).then(res => {
console.log(res)
if (res.data.code == 200) {
than.tableData = res.data.data.records;
than.total = res.data.data.total;
}
})
},
// // 查询分页的一条几条
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getAll();
},
//当前页数有几页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
this.getAll();
},
//搜索方法
onSubmit() {
this.getAll();
},
// 删除
deleteRow(id){
var than=this;
this.empId=id.empId;
//console.log(this.empId)
// this.axios.delete("http://localhost:8081/emp/delEmp?empId="+this.empId).then(res => {
this.axios.delete(`http://localhost:8081/emp/delEmp/${than.empId}`).then(res => {
//console.log(res)
if(res.data.code==200){
this.$message({
type:"success",
message: '删除成功',
center: true,
})
than.getAll();
}else {
this.$message({
type:"error",
message: '删除失败',
center: true,
})
than.getAll();
}
than.getAll();
})
},
//添加修改方法
submit() {
this.getAll();
this.dialogVisible=false;
if (this.dialogTitle=="addData"){
this.add();
this.dialogVisible=false;
this.getAll();
}else if (this.dialogTitle=="updateData"){
this.updateemp();
this.dialogVisible=false;
this.getAll();
}
this.getAll();
// console.log(this.selectemp)
},
// 修改
update(row){
//console.log(row)
// this.empId=row.empId;
this.dialogVisible=true;
this.dialogTitle="updateData";
this.form=row;
// this.updateemp()
// console.log(this.form);
},
//确定修改
updateemp(){
var than=this;
this.axios.put(`http://localhost:8081/emp/upEmp/${than.form.did}/${than.form.email}/${than.form.empId}/${than.form.empName}/${than.form.gender}`)
.then(res => {
if (res.data.code==200){
this.$message({
type:"success",
message: '修改成功',
center: true,
})
this.dialogVisible=false;
than.getAll();
}
})
},
// 添加
adds(){
this.form={};
this.dialogVisible=true;
this.addflag=false;
this.dialogTitle="addData";
// console.log(this.form)
},
//添加方法
add(){
var than=this;
// console.log(than.form)
this.axios.post(`http://localhost:8081/emp/addEmp/${than.form.did}/${than.form.email}/${than.form.empName}/${than.form.gender}`)
.then(res => {
if (res.data.code==200){
this.$message({
type:"success",
message: '添加成功',
center: true,
})
this.dialogVisible=false;
than.getAll();
}
})
},
}
}
|