Skip to content

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

form

parent 7307c7e6
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 34 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ fbd137a0
......@@ -9,11 +9,12 @@
<div>
<!--表单部分-->
<el-form ref="form"
:label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
element-loading-text="加载中"
:label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '170px'"
:model="formModel"
:rules="rules"
label-width="200px"
style="width:80%;margin:0 auto">
:style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}">
<el-form-item v-for="column in showUserColumns"
v-show="!column.hide"
:key="column.id"
......@@ -26,6 +27,7 @@
<!-- -->
<el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '65%'}"
:type="column.dateType || 'date'"
align="right" :disabled="column.disabled"
@change="column.change && column.change($event)"
......@@ -36,8 +38,10 @@
<el-select v-else-if="column.widgetType === 2"
v-model="formModel[column.codeCamel]"
@change="column.change && column.change($event)"
:style="formStyle && formStyle.select && formStyle.select.style || {width: '65%'}"
:multiple="column.multiple"
:disabled="column.disabled"
style="width: 50%"
clearable>
<el-option v-for="(item,key) in column.options"
:key="key"
......@@ -47,10 +51,12 @@
</el-select>
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4"
:style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '65%'}"
v-model="formModel[column.codeCamel]"
type="textarea" :disabled="column.disabled"
:autosize="{ minRows: 2, maxRows: 5}"
:rows="2" @change="column.change && column.change($event)">
:resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
:autosize="formStyle && formStyle.textarea && formStyle.textarea.autosize || { minRows: 4, maxRows: 6}"
:rows="formStyle && formStyle.textarea && formStyle.textarea.rows || 4" @change="column.change && column.change($event)">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options"
......@@ -69,6 +75,7 @@
<quill-editor v-else-if="column.widgetType === 5"
ref="textEditor" :disabled="column.disabled"
v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.quillEdito && formStyle.quillEdito.style || {width:'65%'}"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
......@@ -97,6 +104,7 @@
</el-upload>
<!-- 1 普通input -->
<el-input v-else
:style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="column.change && column.change($event)"></el-input>
......@@ -288,6 +296,26 @@
tips: {
type: Object,
required: false
},
/**
* 表单样式设置,格式为:
* formStyle: {
* formOptions: { labelWidth: '170px', labelPosition: 'right' },
* datePicker: { style: { width: '60%' }},
* input: { style: { width: '60%' }},
* select: { style: { width: '60%' }},
* textarea: {
* style: { width: '60%' },
* resize: 'none',
* autosize: { minRows: 3, maxRows: 5 },
* rows: 3
* },
* quillEdito: { style: { width: '65%' }}
* },
*/
formStyle: {
type: Object,
required: false
}
},
data() {
......@@ -461,9 +489,11 @@
},
// 判断是否一个对象的所有属性都为空
isEmpty(obj) {
_.forEach(obj, function(val) {
if (val) return false
})
for (var key in obj) {
if (obj[key] && _.trim(obj[key])) {
return false
}
}
return true
},
validate() {
......@@ -523,7 +553,7 @@
self.showUserColumns = _.cloneDeep(self.columns)
// console.log(504, self.showUserColumns)
// console.log(514, self.formModel)
// 将字符串对象进行替换处理
// 处理传来的表单字段
_.each(self.showUserColumns, function(column, index) {
if (typeof column === 'string') {
// 生成一个新对象
......@@ -576,7 +606,9 @@
const self = this
console.log('点击了提交函数')
console.log(self.formModel)
self.formModel = processData ? processData(self.formModel, self.isCancel) : self.formModel // 对表单数据进行处理
// 对表单数据进行处理
self.formModel = processData ? processData(self.formModel, self.isCancel) : self.formModel
// 如果在processData中禁止提交了，显示提示信息
if (self.isCancel.cancelSubmit) {
console.log('取消提交')
if (self.tips && !self.tips.hidde) {
......@@ -591,11 +623,18 @@
// var params = _.cloneDeep(self.formModel)
// params = JSON.stringify(params)
// console.log(self.formModel)
// console.log(params)
// if (self.isEmpty(self.formModel)) return
// 如果所有值都为空 禁止提交
if (self.isEmpty(self.formModel)) {
self.$message({
message: '不能都为空',
type: 'error'
})
return
}
// 验证、提交
self.$refs.form.validate((valid) => {
if (valid) {
console.log('valid通过!')
// console.log('valid通过!')
// 存在tableId 则修改信息
if (self.tableId) {
request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', {
......@@ -605,10 +644,10 @@
transformRequest:
function(obj) {
var str = []
// // 删除空值的属性
// obj = _.omitBy(obj, function(value) {
// return !value
// })
// 删除空值的属性
obj = _.omitBy(obj, function(value) {
return value === null // 删除value=null的属性，剩下的返回给新对象
})
for (var p in obj) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
}
......@@ -616,7 +655,7 @@
}
}).then(resp => {
console.log('修改成功')
self.resetForm()
// self.resetForm()
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.editSuccess.text,
......@@ -637,6 +676,14 @@
}
})
} else { // 不存在tableId 则创建一条数据
console.log(self.formModel)
// if (self.isEmpty(self.formModel)) {
// self.$message({
// message: '不能都为空',
// type: 'error'
// })
// return
// }
request(self.schema.modelUnderscorePlural + '/new', {
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
......
src/views/haomo/components/forms/index.vue
View file @ fbd137a0
<template>
<!---->
<!--:refers="judgeRefers"-->
<div>
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:buttons="showUserButtons"
:layout="layout"
:tips="tips"
:tableId="tableId"
:refers="judgeRefers">
:refers="userRefers">
</hm-complex-form>
</div>
</template>
......@@ -56,8 +55,8 @@
// 3多选 不支持默认值
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'], change: this.inputChange },
// 4密码
// { codeCamel: 'password', widgetType: 4, change: this.inputChange },
'password',
{ name: '密码', codeCamel: 'password', widgetType: 4, change: this.inputChange },
// 'password',
// 6日期
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime',
dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange
......@@ -73,18 +72,28 @@
// 8文件
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
],
showUserColumnss: [
{ name: '模板名称', codeCamel: 'name', widgetType: 1, rule: { required: true, message: '模板名称不能为空', trigger: 'blur' }},
{ name: '选择模板', codeCamel: 'template', widgetType: 8, url: '/zhangjiakouOA/upload_template', rule: { required: true, message: '模板不能为空', trigger: 'blur' }},
{ name: '使用科室', codeCamel: 'departmentId', widgetType: 2, multiple: true,
options: [
{ value: '104', label: 'APP技术支持' },
{ value: '105', label: '党组成员' },
{ value: '106', label: '专职检委' },
{ value: '107', label: '正处级检察员' }
],
rule: { required: true, message: '科室不能为空', trigger: 'blur' }}
showUserColumns2: [
// 1普通input
{ name: '用户名称', codeCamel: 'username', widgetType: 1 },
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 1 },
{ name: '部门名称', codeCamel: 'departmentName', widgetType: 1 },
{ name: '密码', codeCamel: 'password', widgetType: 1 },
{ name: '电话', codeCamel: 'mobile', widgetType: 1 },
{ name: '电子邮件', codeCamel: 'email', widgetType: 1 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 1 },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 1 }
],
userIncludes: {
'hm_user': {
includes: ['user_id']
}
},
// 主查外
userRefers: {
'cc_shift': {
includes: ['applicant_id']
}
},
// 要显示按钮
showUserButtons: [
{ text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
......@@ -94,7 +103,7 @@
],
// showUserButtons: []
// 布局方式
layout: { left: 2, middle: 20, right: 2 },
layout: { left: 4, middle: 16, right: 4 },
// 自定义提示消息
tips: {
hidde: false, // 是否显示提示，默认false显示
......@@ -104,6 +113,23 @@
editError: { text: '编辑失败' }, // 编辑失败的提示
otherError: { text: '填写有误，不可以提交' } // processData中取消提交的提示
},
// 各类型表单样式设置
formStyle: {
formOptions: {
labelWidth: '170px',
labelPosition: 'right'
},
datePicker: { style: { width: '60%' }},
input: { style: { width: '60%' }},
select: { style: { width: '60%' }},
textarea: {
style: { width: '60%' },
resize: 'none',
autosize: { minRows: 3, maxRows: 5 },
rows: 3
},
quillEdito: { style: { width: '65%' }}
},
// 'cc_option': {
// includes: ['ccSubjectId']
// }
......
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