Skip to content

V
VueElementTemplate
Commit 58918baa authored by 杨柠瑞's avatar 杨柠瑞
Browse files
Options

coding

parents 0e9eeba5 c0a72b97
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 79 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 58918baa
......@@ -15,20 +15,16 @@
label-width="200px"
style="width:80%;margin:0 auto">
<el-form-item v-for="column in showUserColumns"
v-show="!column.hide"
:key="column.id"
:label="column.name"
:rules="column.rule?column.rule:null"
:prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input>-->
<!-- 1 普通input -->
<el-input v-if="column.widgetType === 1"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="column.change && column.change($event)"></el-input>
<!-- 2 日期选择 -->
<el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
<!-- -->
<el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
:type="column.dateType || 'date'"
align="right" :disabled="column.disabled"
......@@ -84,8 +80,8 @@
:disabled="column.disabled"
@change="column.change && column.change($event)"
v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options"
:key="key" :label="key">{{option}}</el-radio>
<el-radio v-for="option in column.options"
:key="option.label" :label="option.label">{{option.value}}</el-radio>
</el-radio-group>
<!-- 8 文件 -->
<el-upload v-else-if="column.widgetType === 8"
......@@ -99,6 +95,11 @@
<el-button slot="trigger" size="small" type="primary"
:disabled="column.disabled">选取文件</el-button>
</el-upload>
<!-- 1 普通input -->
<el-input v-else
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="column.change && column.change($event)"></el-input>
</el-form-item>
<!--按钮-->
<el-form-item v-if="buttons && buttons.length > 0">
......@@ -111,7 +112,7 @@
@click="resetForm(btn.method)">{{btn.text}}</el-button>
<el-button v-if="btn.type === 3"
type="primary"
@click="btn.method || ''">{{btn.text}}</el-button>
@click="cancel(btn.method)">{{btn.text}}</el-button>
</el-col>
</el-form-item>
</el-form>
......@@ -155,43 +156,46 @@
/**
* 必传，指定要显示的表单字段及类型。数组的元素为对象类型，对象的属性有name、codeCamel、widgetType、disabled、
* options、multiple、dateType等，不同的表单类型需配置的属性不同，
* codeCamel属性必须有，表示要显示的表单字段,
* name属性表示自定义的字段名，如果不传，默认为数据库中的字段名，
* widgetType属性表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* change属性，值为函数类型，表示input的change事件的执行方法，参数即为input输入内容
* codeCamel属性，表示要显示的表单字段, 如果其他字段都不需要传，可以只写codeCamel的值，比如['username','departmentId']
* name属性可选，表示自定义的字段名，如果不传，默认为数据库中的字段名，
* change属性可选，值为函数类型，表示input的change事件的执行方法，参数即为input输入内容
* default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
* hide属性可选，设置该表单字段是否显示,值为boolean
* widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
* 对于复选框，如果只有一个备选项则不必传options,
* 若表单类型为下拉框，还可传入multiple字段，取值bolean类型，true/false，表示是否多选，默认false
* 若表单类型为下拉框，还可传入multiple字段，取值boolean类型，true/false，表示是否多选，默认false
* 若表单类型为时间日期，可传入dateType字段，值为'date'（只显示日期）或'datetime'（显示日期和时间），如果不传，
* 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
* 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-dd HH:mm:ss'，如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
* 所有的表单类型都可传入disabled属性，取值bolean类型,true/false，表示是否禁用，默认不禁用
* input类表单还可传入rule属性来进行自定义验证规则，rule取值规范参照elementUI，下面有简单示例
* 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-ddHH:mm:ss'，
* 如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
* disabled属性可选，取值boolean类型,true/false，表示是否禁用，默认不禁用
* rule属性可选，进行自定义验证规则，rule取值规范参照elementUI，下面有简单示例
* 示例：[
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true,
rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
},
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
},
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
options: [
{ value: 0, label: '选项1' },
{ value: 1, label: '选项2' },
{ value: 2, label: '选项3' },
{ value: 3, label: '选项4' },
{ value: 4, label: '选项5' }
]
},
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] },
{ codeCamel: 'password', widgetType: 4 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 }
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true,
rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
},
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
},
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
options: [
{ value: 0, label: '选项1' },
{ value: 1, label: '选项2' },
{ value: 2, label: '选项3' },
{ value: 3, label: '选项4' },
{ value: 4, label: '选项5' }
]
},
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] },
{ codeCamel: 'password', widgetType: 4 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 }
]
*/
columns: {
......@@ -240,6 +244,31 @@
layout: {
type: Object,
required: false
},
/**
* 用来将本表的外链字段(table_id类似的字段)指向的外链表相关联, 格式为:
* {
* "hm_user": { //外链表 表名 本表所对应的主键表）
* includes:['user_id'] // 与主表所对应的外键
* }
* }
*
*/
includes: {
type: Object,
required: false
},
/**
* 用来将其他表的外链字段指向本表关联，同时返回数据, 格式为:
* {
* 'auth_token': { //主键id所对应的外键表 表名1 （本表所对应的外键表）
* includes: ['user_id'] //外键表的外键字段
* }
* }
*/
refers: {
type: Object,
required: false
}
},
data() {
......@@ -367,12 +396,12 @@
if (item.widgetType === 8) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
self.formModel[key] = response.visitName
self.formModel[key] = response.message || response.visitName
}
})
}
})
console.log(self.formModel)
console.log(404, self.formModel)
},
// inputChange(val) {
// // console.log(event)
......@@ -453,7 +482,19 @@
var formArray = _.keys(self.formModel) // 提取formModel的属性到数组
// console.log(formArray)
self.formModel = _.pick(resp.data, formArray) // 根据数组中的属性提取出data中对应的数据
// console.log(self.formModel)
// 下拉框多选时将字符串转为数组
_.each(self.columns, function(item, index) {
if (item.widgetType === 2) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// console.log(11111, self.formModel[key])
self.formModel[key] = self.formModel[key].split(',')
}
})
}
})
// console.log(2222, self.formModel)
})
},
init() {
......@@ -461,15 +502,24 @@
console.log(self.columns)
if (self.columns && self.columns.length) {
self.showUserColumns = _.cloneDeep(self.columns)
// 提取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, '')
}
})
console.log(self.formModel)
console.log(self.showUserColumns)
// 将字符串对象进行替换处理
_.each(self.showUserColumns, function(column, index) {
if (typeof column === 'object') {
if (typeof column === 'string') {
// 生成一个新对象
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.codeCamel]
// console.log(tmp)
// self.$set(tmp, 'code', tmp.code.toLowerCase())
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column]
/* self.$set(tmp, 'code', tmp.code.toLowerCase())
column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
self.$set(tmp, 'widgetType', column.widgetType || 1) // 设置表单类型
column.rule && self.$set(tmp, 'rule', column.rule) // 设置表单校验规则
column.disabled && self.$set(tmp, 'disabled', column.disabled) // 设置是否禁用
column.options && self.$set(tmp, 'options', column.options) // 设置下拉框或者多选的选项
......@@ -477,19 +527,12 @@
column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
column.change && self.$set(tmp, 'change', column.change) // 设置change函数
column.url && self.$set(tmp, 'url', column.url) // 设置文件上传地址
column.url && self.$set(tmp, 'url', column.url) // 设置文件上传地址 */
self.$set(tmp, 'widgetType', 1) // 设置表单类型
self.$set(self.showUserColumns, index, tmp) // 顺序
}
})
// 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 {
self.$set(self.formModel, item.codeCamel, '')
}
})
console.log(self.showUserColumns)
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
......@@ -590,8 +633,20 @@
* 清空所有输入及提示信息。
*/
resetForm(callback) {
const self = this
console.log('重置')
this.$refs.form.resetFields()
console.log(self.formModel)
// // 清空
// _.each(self.formModel, function(value, index) {
// self.formModel[index] = ''
// })
// 执行回调
if (typeof (callback) === 'function') {
callback()
}
},
cancel(callback) {
if (typeof (callback) === 'function') {
callback()
}
......
src/views/haomo/components/forms/index.vue
View file @ 58918baa
<template>
<!--:tableId="tableId"-->
<!---->
<div>
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:buttons="showUserButtons"
:layout="layout"
>
:tableId="tableId"
:refers="judgeRefers">
</hm-complex-form>
</div>
</template>
......@@ -26,42 +27,84 @@
return {
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 8: 文件上传
showUserColumns: [
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: false,
// 1普通input
{ name: '选择类型', codeCamel: 'type', widgetType: 1, disabled: false,
change: this.inputChange
// rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
// hide: true
// default: '默认值',
},
// 5富文本
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
change: this.inputChange
change: this.inputChange, hide: false
// rule: [
// { required: true, message: '请输入邮箱地址', trigger: 'blur' },
// { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
// ]
},
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
change: this.inputChange,
// 2下拉框
{ name: '用户名称', codeCamel: 'username', widgetType: 2, multiple: true,
change: this.inputChange, // default: [1], 如果开启多选，默认选中项用数组[1]、[1,2,3]
options: [
{ value: 1, label: '企业' },
{ value: 3, label: '代理商' }
{ value: '1', label: '企业' }, // 下拉框的label是选项文字，value是选中值
{ value: '2', label: '代理商' },
{ value: '3', label: '会员' },
{ value: '4', label: '访客' }
]
},
// 3多选 不支持默认值
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'], change: this.inputChange },
{ codeCamel: 'password', widgetType: 4, change: this.inputChange },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'], change: this.inputChange },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 } // url是后台接口地址
// 4密码
// { 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
// default: '2018-01-01 00:07:08'
},
'lastUpdateTime',
// 7单选
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7,
options: [
{ label: 1, value: '会员' }, // 单选的value是选项文字，label是选中值
{ label: 2, value: '访客' }
], // default: 1
change: this.inputChange },
// 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' }}
],
// 要显示按钮
//, method: this.method1, beforeSubmit: this.processData
// , method: this.method2
// , method: this.method3
//
// ,
// , method:
showUserButtons: [
{ text: '确定', type: 1 },
{ text: '重置', type: 2 },
{ text: '取消', type: 3 }
{ text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
{ text: '重置', type: 2, method: this.method2 },
{ text: '取消', type: 3, method: this.method3 }
],
// showUserButtons: []
// 布局方式
layout: { left: 6, middle: 12, right: 6 }
layout: { left: 6, middle: 12, right: 6 },
// 'cc_option': {
// includes: ['ccSubjectId']
// }
judgeRefers: { // 主查外
'cc_hm_user': {
includes: ['applicantId']
}
}
}
},
computed: {
......@@ -72,7 +115,7 @@
this.schema = schema
// console.log(this.schema)
// this.tableId = '1efff63125954583b0ac5a9c252b9041'
this.tableId = '363fff1772b840aa9714b491aea70806'
this.tableId = 'b08d2220d2574bf2ac09ec4f470ed999'
},
methods: {
inputChange(val) {
......
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