利用mixins混入增删改查公共方法
源码如下
export const formPage = {
data() {
return {
//当前用户信息
userInfo: {},
/** 当前页面权限 */
pagePermission: {},
pageTitle: '',
//新增表单
// 表单弹框
formConfigModel: {
show: false,
title: '',
loading: false,
isEdit: false,
},
/** 预览图片 */
previewImage: '',
/** 预览显示 */
previewVisible: false,
/***table数据 */
pageDataConfigModel: {
index: 1,
size: 10,
// loading: false,
data: [],
data_count: 0,
pageSizeList:[10,20,30,40]
},
//需要编辑的参数
checkOneData: {},
}
},
created() {
this.refreshData()
},
methods: {
/** 预览功能 */
previewHandle(url) {
this.previewImage = url;
this.previewVisible = true;
},
/** 显示添加表单模态框 */
showAddFormModal() {
this.formConfigModel.title = "新增" + this.pageTitle;
this.formConfigModel.show = true;
this.formConfigModel.loading = false;
this.formConfigModel.isEdit = false;
this.afterShowAddModalHandle();
},
/** 显示修改表单模态框 */
showEditFormModal(row) {
this.formConfigModel.title = "修改" + this.pageTitle;;
this.formConfigModel.show = true;
this.formConfigModel.loading = false;
this.formConfigModel.isEdit = true;
this.afterShowEditModalHandle(row);
},
/** 显示模态框之后操作 */
afterShowModalHandle() { },
/** 关闭表单配置模态框 */
closeFormConfigModel() {
this.$refs.CreatFormRef.resetFields();
this.formConfigModel.show = false;
},
/** 添加表单数据 */
addFormData(url, form) {
return new Promise((resolve, reject) => {
this.formConfigModel.loading = true;
this.$http.post(url, form)
.then((res) => {
if(res.data.status==1){
this.formConfigModel.show = false;
}
this.formConfigModel.loading = false;
resolve(res);
return;
})
.catch((err) => {
this.formConfigModel.loading = false;
reject(err);
return;
});
});
},
//修改表单数据
updateFormData(url, form) {
return new Promise((resolve, reject) => {
var params = this.form.value;
this.formConfigModel.loading = true;
this.$http
.post(url, form)
.then((res) => {
if(res.data.status==1){
this.formConfigModel.show = false;
}
this.formConfigModel.loading = false;
console.log(res)
resolve(res);
return;
})
.catch((err) => {
this.formConfigModel.loading = false;
reject(err);
return;
});
});
},
/** 删除表单数据 */
deleteData(url) {
return new Promise((resolve, reject) => {
this.$http.get(url)
.then((res) => {
resolve(res);
this.refreshData()
return;
})
.catch((err) => {
reject(err);
return;
});
});
},
//获取数据信息
refreshData() {
this.pageDataConfigModel.index = 1;
this.getTableData();
},
changePageSize(newSize){
this.pageDataConfigModel.size= newSize;
this.getTableData();
},
changePageIndex(newIndex){
this.pageDataConfigModel.index= newIndex;
this.getTableData();
},
/** 重置搜索条件获取数据 */
researchForm(searchForm) {
this.$refs.searchForm.reset();
this.refreshData();
},
/** 查询页面数据处理（可重载） */
searchPageDataHandle(data) {
let arr = data.data|| []
this.pageDataConfigModel.data = arr
this.pageDataConfigModel.data_count = data.total
},
/** 查询页面数据错误处理(可重载) */
searchPageDataErrHandle() { }
},
}
2.再页面中直接用
import { formPage } from "@/mixins/formPage";
就可以之家调用混入的方法及定义的变量，并且 变量可以重写