Skip to content

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

form

parent 44c06920
Show whitespace changes
Inline Side-by-side
Showing with 85 additions and 26 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 8e4a50d1
......@@ -84,8 +84,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"
......@@ -111,7 +111,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>
......@@ -240,6 +240,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() {
......@@ -461,6 +486,21 @@
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 {
if (item.widgetType === 6) {
item.default && self.$set(self.formModel, item.codeCamel, new Date())
} 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') {
......@@ -481,15 +521,7 @@
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'
}
......@@ -595,6 +627,11 @@
if (typeof (callback) === 'function') {
callback()
}
},
cancel(callback) {
if (typeof (callback) === 'function') {
callback()
}
}
}
......
src/views/haomo/components/forms/index.vue
View file @ 8e4a50d1
......@@ -5,7 +5,7 @@
:columns="showUserColumns"
:buttons="showUserButtons"
:layout="layout"
>
:refers="judgeRefers">
</hm-complex-form>
</div>
</template>
......@@ -26,10 +26,12 @@
return {
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 8: 文件上传
showUserColumns: [
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: false,
// 1普通input
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: false, default: '默认值',
change: this.inputChange
// rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
},
// 5富文本
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
change: this.inputChange
// rule: [
......@@ -37,31 +39,51 @@
// { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
// ]
},
// 2下拉框
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
change: this.inputChange,
change: this.inputChange, default: 1, // 如果开启多选，默认选中项用数组[1]、[1,2,3]
options: [
{ value: 1, label: '企业' },
{ value: 1, label: '企业' }, // 下拉框的label是选项文字，value是选中值
{ value: 3, label: '代理商' }
]
},
// 3多选 不支持默认值
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'], change: this.inputChange },
// 4密码
{ 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是后台接口地址
// 6日期
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime',
dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange, default: true },
// 7单选
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7,
options: [
{ label: 1, value: '会员' }, // 单选的value是选项文字，label是选中值
{ label: 2, value: '访客' }
],
change: this.inputChange, default: 1 },
// 8文件
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
],
// 要显示按钮
//, 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: {
......
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