📝 formMixin.js 注释添加
This commit is contained in:
@@ -3,19 +3,28 @@ import pick from 'lodash.pick'
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 当前表单对象
|
||||||
form: this.$form.createForm(this),
|
form: this.$form.createForm(this),
|
||||||
|
|
||||||
formAction: this.FORM_ACTION.NONE,
|
// 标签和数值框布局
|
||||||
labelCol: { lg: { span: 3 }, sm: { span: 3 } },
|
labelCol: { lg: { span: 3 }, sm: { span: 3 } },
|
||||||
wrapperCol: { lg: { span: 8 }, sm: { span: 19 } },
|
wrapperCol: { lg: { span: 8 }, sm: { span: 19 } },
|
||||||
|
|
||||||
|
// v-decorator 属性
|
||||||
decoratorOptions: {},
|
decoratorOptions: {},
|
||||||
|
|
||||||
|
// 只显示的表单数据
|
||||||
displayData: {
|
displayData: {
|
||||||
createTime: '',
|
createTime: '',
|
||||||
updateTime: ''
|
updateTime: ''
|
||||||
},
|
},
|
||||||
|
|
||||||
// 提交按钮防止重复提交
|
// 提交按钮防止重复提交
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
|
|
||||||
|
// 表单行为
|
||||||
|
formAction: this.FORM_ACTION.NONE,
|
||||||
|
// 请求方法,属性key为表单行为,value为对应请求方法(返回值为一个promise对象)
|
||||||
reqFunctions: {
|
reqFunctions: {
|
||||||
create: function() {},
|
create: function() {},
|
||||||
update: function() {}
|
update: function() {}
|
||||||
@@ -23,21 +32,28 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// ============ 添加 ======================
|
/**
|
||||||
|
* 构建新建型表单
|
||||||
|
* @param argument 额外参数,用于透传到表单构建完成的回调函数中
|
||||||
|
*/
|
||||||
buildCreatedForm(argument) {
|
buildCreatedForm(argument) {
|
||||||
this.form.resetFields()
|
this.form.resetFields()
|
||||||
this.formAction = this.FORM_ACTION.CREATE
|
this.formAction = this.FORM_ACTION.CREATE
|
||||||
// 钩子函数 处理某些页面定制需求
|
// 钩子函数 处理某些页面定制需求
|
||||||
this.createdFormCallback(argument)
|
this.createdFormCallback(argument)
|
||||||
},
|
},
|
||||||
/*eslint-disable*/
|
|
||||||
createdFormCallback(argument) {
|
|
||||||
// 组件复写此方法 完成添加之前的事件
|
|
||||||
},
|
|
||||||
/**
|
/**
|
||||||
* ==============表单数据回显===============
|
* 构建新建型表单成功后的回调方法
|
||||||
* @param data 回显数据
|
* 默认无行为,组件可复写此方法 完成添加之前的事件
|
||||||
* @param needReset 回显前是否清空现有数据,变更部分数据时传递 false
|
*/
|
||||||
|
/*eslint-disable*/
|
||||||
|
createdFormCallback(argument) {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单数据回填
|
||||||
|
* @param data 回填数据
|
||||||
|
* @param needReset 回填前是否清空现有数据,默认不请空,增量回填
|
||||||
*/
|
*/
|
||||||
fillFormData: function(data, needReset = false) {
|
fillFormData: function(data, needReset = false) {
|
||||||
// 延迟加载 避免隐藏展示元素时出现的bug
|
// 延迟加载 避免隐藏展示元素时出现的bug
|
||||||
@@ -52,7 +68,12 @@ export default {
|
|||||||
})
|
})
|
||||||
}, 0)
|
}, 0)
|
||||||
},
|
},
|
||||||
// ============ 修改 ======================
|
|
||||||
|
/**
|
||||||
|
* 构建 => 修改型表单
|
||||||
|
* @param record 回显数据
|
||||||
|
* @param argument 额外参数,用于透传到表单构建完成的回调函数中
|
||||||
|
*/
|
||||||
buildUpdatedForm(record, argument) {
|
buildUpdatedForm(record, argument) {
|
||||||
let that = this
|
let that = this
|
||||||
that.formAction = that.FORM_ACTION.UPDATE
|
that.formAction = that.FORM_ACTION.UPDATE
|
||||||
@@ -60,22 +81,32 @@ export default {
|
|||||||
this.fillFormData(record, true)
|
this.fillFormData(record, true)
|
||||||
this.updatedFormCallback(argument)
|
this.updatedFormCallback(argument)
|
||||||
},
|
},
|
||||||
echoDataProcess(data) {
|
|
||||||
// 对准备回显的数据做预处理
|
/**
|
||||||
return data
|
* 钩子函数,回显数据处理
|
||||||
},
|
* 默认无操作,子组件可重写此方法,拿到回显数据,对回显数据做处理,或者从回显数据中取值
|
||||||
|
* @param data 回显数据
|
||||||
|
*/
|
||||||
|
/*eslint-disable*/
|
||||||
|
echoDataProcess(data) {},
|
||||||
|
|
||||||
/*eslint-disable*/
|
/*eslint-disable*/
|
||||||
updatedFormCallback(argument) {
|
updatedFormCallback(argument) {
|
||||||
// 组件复写此方法 完成修改之后的事件
|
// 组件复写此方法 完成修改之后的事件
|
||||||
},
|
},
|
||||||
|
|
||||||
// ============ 提交 ======================
|
/**
|
||||||
|
* 表单提交处理函数
|
||||||
|
* @param e event
|
||||||
|
*/
|
||||||
handleSubmit(e) {
|
handleSubmit(e) {
|
||||||
// 阻止 submit 事件的默认行为
|
// 阻止 submit 事件的默认行为
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
// 钩子函数 处理提交之前处理的事件
|
// 表单提交前事件
|
||||||
this.beforeStartSubmit()
|
this.beforeStartSubmit()
|
||||||
|
// 根据表单行为,获取对应的请求方法
|
||||||
const reqFunction = this.reqFunctions[this.formAction]
|
const reqFunction = this.reqFunctions[this.formAction]
|
||||||
|
// 表单校验,成功则进行提交
|
||||||
this.form.validateFields((err, values) => {
|
this.form.validateFields((err, values) => {
|
||||||
if (!err) {
|
if (!err) {
|
||||||
this.submitLoading = true
|
this.submitLoading = true
|
||||||
@@ -85,7 +116,7 @@ export default {
|
|||||||
this.$message.success(res.msg)
|
this.$message.success(res.msg)
|
||||||
this.submitSuccess(res)
|
this.submitSuccess(res)
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(res.msg)
|
this.submitError(res)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
@@ -97,21 +128,40 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
/*eslint-disable*/
|
|
||||||
beforeStartSubmit(record) {
|
/**
|
||||||
// 组件复写此方法 提交之前处理的事件
|
* 表单准备提交前的回调函数
|
||||||
},
|
*/
|
||||||
|
beforeStartSubmit() {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单提交数据处理函数
|
||||||
|
* 子组件可复写此方法,在这里进行偷梁换柱
|
||||||
|
* @param data 表单待提交数据
|
||||||
|
* @returns {*} 真正的提交数据
|
||||||
|
*/
|
||||||
submitDataProcess(data) {
|
submitDataProcess(data) {
|
||||||
// 在此处理表单提交的数据
|
// 在此处理表单提交的数据
|
||||||
return data
|
return data
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单提交成功回调函数
|
||||||
|
* 子组件可复写进行扩展
|
||||||
|
* @param res 服务端返回值
|
||||||
|
*/
|
||||||
/*eslint-disable*/
|
/*eslint-disable*/
|
||||||
submitSuccess(res) {
|
submitSuccess(res) {
|
||||||
// 提交表单成功的回调函数
|
// 提交表单成功的回调函数
|
||||||
},
|
},
|
||||||
/*eslint-disable*/
|
|
||||||
|
/**
|
||||||
|
* 表单提交失败的回调函数
|
||||||
|
* 子组件可复写进行扩展
|
||||||
|
* @param res 服务端返回值
|
||||||
|
*/
|
||||||
submitError(res) {
|
submitError(res) {
|
||||||
// 提交表单失败的回调函数
|
this.$message.error(res.msg)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -143,7 +143,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
singleGenerate(record) {
|
singleGenerate(record) {
|
||||||
this.$refs.generateModal.show([record.tableName])
|
this.$refs.generateModal.show([record.tableName])
|
||||||
//this.handleGenerate([record.tableName])
|
|
||||||
},
|
},
|
||||||
multiGenerate() {
|
multiGenerate() {
|
||||||
const tableNames = this.selectedRowKeys
|
const tableNames = this.selectedRowKeys
|
||||||
|
|||||||
Reference in New Issue
Block a user