在点js文件中写入以下代码 配置全局 axios
// 统一请求路径前缀在libs/axios.js中修改
import {
getRequest,
putRequest,
postRequest,
deleteRequest,
} from "@/libs/axios";
// 获取列表
export const selectTaskReason = (params) => {
return postRequest("/TaskReason/selectTaskReason", params);
};
// 添加列表
export const saveTaskReason = (params, header) => {
return postRequest("/TaskReason/saveTaskReason", params, header);
};
// 编辑列表
export const updateTaskReason = (params, header) => {
return postRequest("/TaskReason/updateTaskReason", params, header);
};
// 删除列表
export const deleteTaskReason = (params) => {
return postRequest("/TaskReason/deleteTaskReason", params);
};
在.vue中间调用
// 添加用户
add() {
this.$refs.form.resetFields();
this.form = { // 表单
id: params.row.id,
taskName: this.taskName,
taskSubType: this.taskSubType,
taskStatus: this.taskStatus,
taskAmountType: this.taskAmountType,
taskMoney: this.taskMoney,
createBy: this.createBy,
updateTime: this.updateTime,
updateBy: this.updateBy,
beginTime: this.beginTime,
endTime: this.endTime,
flag1: this.flag1,
taskUnionId: this.taskUnionId,
isUpload: this.isUpload,
commissionRate: this.commissionRate,
fissionMission: this.fissionMission,
begitaskRecommendationnTime: this.taskRecommendation,
},
this.modalTitle = "添加用户"
this.userModalVisible = true;//弹框
},
submitUser() {
API_Demo.AddDemo(this.form, { 'Content-Type': 'application/json' }).then((res) => {
if (res.code == 200) {
this.getDemoData();
this.$Message.success('添加成功');
this.userModalVisible = false;
}
})
},
update() {
this.updateMemberSubmit();
},//编辑列表
updateMemberSubmit() {
API_TaskReason.updateTaskReason(this.updateForm, { 'Content-Type': 'application/json' }).then((res) => {
if (res.code == 200) {
this.getTaskReasonData();
this.$Message.success('编辑成功');
this.updateModalVisible = false;
}})
},//刪除列表
deleteMember() {
API_TaskReason.deleteTaskReason({ id: this.id }).then((res) => {if (res.code == 200) {
this.remove = false;
console.log(111111);
this.$Message.success('删除成功');
this.getTaskReasonData();
}})
},// 分页 修改页码
changePage(v) {
this.searchForm.pageNumber = v;
// this.getUserList();
this.getTaskReasonData();
},
// 分页 修改页数
changePageSize(v) {
this.searchForm.pageSize = v;
this.searchForm.pageNumber = 1;
// this.getUserList();
this.getTaskReasonData();
},
//查询列表
getTaskReasonData() {
API_TaskReason.selectTaskReason(this.searchForm).then((res) => {
console.log(24234324, res.result)
console.log(2323232323, res.result.records);
if (res.result.records) {
//把你的数据存入到data
this.data = res.result.records
this.total = res.result.total
}
});
},
vue中需要声明的
form表单中的就是你前端获取到的后端传过来的值
form: { // 表单
id: "",
taskName: "",
taskType: "",
taskSubType: ""
}
searchForm表单就是分页数据
searchForm: {
// 请求参数
pageNumber: 1,
pageSize: 10,
order: "desc",
disabled: "OPEN",
createTimeStart: "",
createTimeEnd: ""
},
这些都是调用接口想在前端页面实现 你需要弄一个点击事件 点击调用
例如删除 弄个确定和取消
//删除
ok() {
this.deleteMember();
},
cancel() {
},
查询数据的话不需要弄点击事件 不过你需要在你data里面去定义一个空数组
表格中设置一个 :data去等于它
由于查询不需要点击事件我们需要设置一个mounted方法
这样去调用查询接口
mounted() {
this.getTaskReasonData();
}