Skip to content

V
VueElementTemplate
Commit f6137c2b authored by 王康's avatar 王康
Browse files
Options

form

parent c0a72b97
Show whitespace changes
Inline Side-by-side
Showing with 105 additions and 35 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ f6137c2b
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
:multiple="column.multiple" :multiple="column.multiple"
:disabled="column.disabled" :disabled="column.disabled"
clearable> clearable>
<el-option v-for="item in column.options" <el-option v-for="(item,key) in column.options"
:key="item.value" :key="key"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
...@@ -113,6 +113,9 @@ ...@@ -113,6 +113,9 @@
<el-button v-if="btn.type === 3" <el-button v-if="btn.type === 3"
type="primary" type="primary"
@click="cancel(btn.method)">{{btn.text}}</el-button> @click="cancel(btn.method)">{{btn.text}}</el-button>
<el-button v-if="!btn.type"
type="primary"
@click="cancel(btn.method)">{{btn.text}}</el-button>
</el-col> </el-col>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -213,9 +216,10 @@ ...@@ -213,9 +216,10 @@
* 非必传，指定要显示的按钮及类型，默认不显示。 * 非必传，指定要显示的按钮及类型，默认不显示。
* 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，还可以传入了method字段，值为函数， * 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，还可以传入了method字段，值为函数，
* 该函数会作为提交方法的回调函数执行，函数接受一个参数为新建或修改的数据, * 该函数会作为提交方法的回调函数执行，函数接受一个参数为新建或修改的数据,
* 同时还可以传入beforeSubmit字段，值为函数，函数接受一个包含表单数据的对象类型参数， * 同时还可以传入beforeSubmit字段，值为函数，函数接受两个参数(value,isCancel)
* 该函数可以在提交之前对表单数据进行处理，参数类似{username: 'name', loginid: 'id'}, * value为包含表单数据的对象，{username: 'name', loginid: 'id'},其中键为调用者传入的codeCamel
* 其中键为调用者传入的codeCamel * 该函数可以在提交之前对表单数据进行处理，并返回数据；对象isCancel包含一个值为false的属性cancelSubmit
* 如果需要取消提交，将cancelSubmit值改为true
* type=2，执行组件的重置方法,如果用户传入了method，会作为重置方法的回调函数执行 * type=2，执行组件的重置方法,如果用户传入了method，会作为重置方法的回调函数执行
* type=3，直接执行用户传入的方法 * type=3，直接执行用户传入的方法
* 如果要传入了确定/取消的回调函数，请先传入对应的按钮 * 如果要传入了确定/取消的回调函数，请先传入对应的按钮
...@@ -269,6 +273,21 @@ ...@@ -269,6 +273,21 @@
refers: { refers: {
type: Object, type: Object,
required: false required: false
},
/**
* 请求成功或失败时的提示信息,格式为:
* tips: {
* hidde: false, // 是否显示提示，默认false显示
* newSuccess: { text: '发布成功' }, // 新建成功的提示
* newError: { text: '发布失败' }, // 新建失败的提示
* editSuccess: { text: '编辑成功' }, // 编辑成功的提示
* editError: { text: '编辑失败' } // 编辑失败的提示
* otherError: { text: '没有传ID，不可以提交' }
* }
*/
tips: {
type: Object,
required: false
} }
}, },
data() { data() {
...@@ -369,8 +388,8 @@ ...@@ -369,8 +388,8 @@
}] }]
}, },
fileList: [], // 上传文件列表 fileList: [], // 上传文件列表
fileCode: '' // 上传组件对应的数据库字段 fileCode: '', // 上传组件对应的数据库字段
isCancel: { cancelSubmit: false }
} }
}, },
created() { created() {
...@@ -389,9 +408,9 @@ ...@@ -389,9 +408,9 @@
uploadSuccess(response, file, fileList) { uploadSuccess(response, file, fileList) {
const self = this const self = this
console.log('上传成功') console.log('上传成功')
console.log(response) // console.log(response)
console.log('fileList', fileList) // console.log('fileList', fileList)
console.log(self.fileList) // console.log(self.fileList)
_.each(self.columns, function(item, index) { _.each(self.columns, function(item, index) {
if (item.widgetType === 8) { if (item.widgetType === 8) {
_.forEach(self.formModel, function(value, key) { _.forEach(self.formModel, function(value, key) {
...@@ -401,7 +420,7 @@ ...@@ -401,7 +420,7 @@
}) })
} }
}) })
console.log(404, self.formModel) // console.log(404, self.formModel)
}, },
// inputChange(val) { // inputChange(val) {
// // console.log(event) // // console.log(event)
...@@ -497,22 +516,13 @@ ...@@ -497,22 +516,13 @@
// console.log(2222, self.formModel) // console.log(2222, self.formModel)
}) })
}, },
// 初始化
init() { init() {
const self = this const self = this
console.log(self.columns)
if (self.columns && self.columns.length) { if (self.columns && self.columns.length) {
self.showUserColumns = _.cloneDeep(self.columns) self.showUserColumns = _.cloneDeep(self.columns)
// console.log(504, self.showUserColumns)
// 提取v-model绑定的变量 // console.log(514, self.formModel)
_.each(self.showUserColumns, function(item) {
if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
self.$set(self.formModel, item.codeCamel, [])
} else {
item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
}
})
console.log(self.formModel)
console.log(self.showUserColumns)
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.each(self.showUserColumns, function(column, index) { _.each(self.showUserColumns, function(column, index) {
if (typeof column === 'string') { if (typeof column === 'string') {
...@@ -533,6 +543,14 @@ ...@@ -533,6 +543,14 @@
} }
}) })
console.log(self.showUserColumns) console.log(self.showUserColumns)
// 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) {
if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
self.$set(self.formModel, item.codeCamel, [])
} else {
item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
}
})
if (!request.defaults.baseURL) { if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api' request.defaults.baseURL = '/org/api'
} }
...@@ -558,7 +576,17 @@ ...@@ -558,7 +576,17 @@
const self = this const self = this
console.log('点击了提交函数') console.log('点击了提交函数')
console.log(self.formModel) console.log(self.formModel)
self.formModel = processData ? processData(self.formModel) : self.formModel // 对表单数据进行处理 self.formModel = processData ? processData(self.formModel, self.isCancel) : self.formModel // 对表单数据进行处理
if (self.isCancel.cancelSubmit) {
console.log('取消提交')
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.otherError.text,
type: 'error'
})
}
return
}
// self.formModel = JSON.stringify(self.formModel) // self.formModel = JSON.stringify(self.formModel)
// var params = _.cloneDeep(self.formModel) // var params = _.cloneDeep(self.formModel)
// params = JSON.stringify(params) // params = JSON.stringify(params)
...@@ -589,10 +617,24 @@ ...@@ -589,10 +617,24 @@
}).then(resp => { }).then(resp => {
console.log('修改成功') console.log('修改成功')
self.resetForm() self.resetForm()
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.editSuccess.text,
type: 'success'
})
}
// self.formModel = {} // 新建完成清空数据 // self.formModel = {} // 新建完成清空数据
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback(resp.data) callback(resp.data)
} }
}).catch(err => {
console.log(err)
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.editError.text,
type: 'error'
})
}
}) })
} else { // 不存在tableId 则创建一条数据 } else { // 不存在tableId 则创建一条数据
request(self.schema.modelUnderscorePlural + '/new', { request(self.schema.modelUnderscorePlural + '/new', {
...@@ -609,15 +651,33 @@ ...@@ -609,15 +651,33 @@
} }
}).then(resp => { }).then(resp => {
console.log('创建成功') console.log('创建成功')
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.newSuccess.text,
type: 'success'
})
}
// self.formModel = {} // 新建完成清空数据 // self.formModel = {} // 新建完成清空数据
// self.resetForm() // self.resetForm()
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback(resp.data) callback(resp.data)
} }
}).catch(err => {
console.log(err)
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.newError.text,
type: 'error'
})
}
}) })
} }
} else { } else {
console.log('提交失败!!') console.log('提交失败!!')
self.$message({
message: '验证未通过',
type: 'error'
})
return false return false
} }
}) })
...@@ -633,10 +693,10 @@ ...@@ -633,10 +693,10 @@
* 清空所有输入及提示信息。 * 清空所有输入及提示信息。
*/ */
resetForm(callback) { resetForm(callback) {
const self = this // const self = this
console.log('重置') console.log('重置')
this.$refs.form.resetFields() this.$refs.form.resetFields()
console.log(self.formModel) // console.log(self.formModel)
// // 清空 // // 清空
// _.each(self.formModel, function(value, index) { // _.each(self.formModel, function(value, index) {
// self.formModel[index] = '' // self.formModel[index] = ''
......
src/views/haomo/components/forms/index.vue
View file @ f6137c2b
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
:columns="showUserColumns" :columns="showUserColumns"
:buttons="showUserButtons" :buttons="showUserButtons"
:layout="layout" :layout="layout"
:tableId="tableId" :tips="tips"
:refers="judgeRefers"> :refers="judgeRefers">
</hm-complex-form> </hm-complex-form>
</div> </div>
...@@ -62,7 +62,6 @@ ...@@ -62,7 +62,6 @@
dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange
// default: '2018-01-01 00:07:08' // default: '2018-01-01 00:07:08'
}, },
'lastUpdateTime',
// 7单选 // 7单选
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, { name: '登陆id', codeCamel: 'loginid', widgetType: 7,
options: [ options: [
...@@ -86,17 +85,24 @@ ...@@ -86,17 +85,24 @@
rule: { required: true, message: '科室不能为空', trigger: 'blur' }} rule: { required: true, message: '科室不能为空', trigger: 'blur' }}
], ],
// 要显示按钮 // 要显示按钮
//
// ,
// , method:
showUserButtons: [ showUserButtons: [
{ text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData }, { text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
{ text: '重置', type: 2, method: this.method2 }, { text: '重置', type: 2, method: this.method2 },
{ text: '生成', method: this.method4 },
{ text: '取消', type: 3, method: this.method3 } { text: '取消', type: 3, method: this.method3 }
], ],
// showUserButtons: [] // showUserButtons: []
// 布局方式 // 布局方式
layout: { left: 6, middle: 12, right: 6 }, layout: { left: 2, middle: 20, right: 2 },
// 自定义提示消息
tips: {
hidde: false, // 是否显示提示，默认false显示
newSuccess: { text: '发布成功' }, // 新建成功的提示
newError: { text: '发布失败' }, // 新建失败的提示
editSuccess: { text: '编辑成功' }, // 编辑成功的提示
editError: { text: '编辑失败' }, // 编辑失败的提示
otherError: { text: '填写有误，不可以提交' } // processData中取消提交的提示
},
// 'cc_option': { // 'cc_option': {
// includes: ['ccSubjectId'] // includes: ['ccSubjectId']
// } // }
...@@ -122,9 +128,10 @@ ...@@ -122,9 +128,10 @@
// console.log(event) // console.log(event)
console.log(val) console.log(val)
}, },
processData(object) { processData(object, isCancel) {
console.log(object) isCancel.cancelSubmit = false // 如果要取消提交，设为true
return object console.log(125, object)
return object // 将数据返回
}, },
method1() { method1() {
console.log('method1') console.log('method1')
...@@ -134,6 +141,9 @@ ...@@ -134,6 +141,9 @@
}, },
method3() { method3() {
console.log('method3') console.log('method3')
},
method4() {
console.log('method4')
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment