Skip to content

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

form

parent e8e112af
Hide whitespace changes
Inline Side-by-side
Showing with 464 additions and 469 deletions
src/views/haomo/components/forms/HmComplexForm.md
View file @ 2becc703
### 基本使用
```jsx
<hm-complex-form
:schema="{
<hm-complex-form :columns="[
{ name: 'username', widgetType: 1 },
{ name: 'securityLevel', widgetType: 5 },
{ name: 'type', widgetType: 2, options: ['企业', '代理商'] },
{ name: 'avatar', widgetType: 3 },
{ name: 'departmentId', widgetType: 4 },
{ name: 'createTime', widgetType: 6 }
]"
:schema="{
'model': 'HmUser',
'modelPlural': 'HmUserS',
'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUserS',
'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_userS',
'columns': [
{
'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字',
'code': 'USERNAME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1517859502',
'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'username',
'codeCamelPlural': 'usernames',
'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames',
'type': 'string'
},
{
'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID',
'code': 'LOGINID',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'columnMandatory': '1',
'codeCamel': 'loginid',
'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids',
'type': 'string'
},
{
'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码',
'code': 'PASSWORD',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'password',
'codeCamelPlural': 'passwords',
'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords',
'type': 'string'
},
{
'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话',
'code': 'MOBILE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)',
'length': '16',
'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles',
'type': 'string'
},
{
'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱',
'code': 'EMAIL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'email',
'codeCamelPlural': 'emails',
'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails',
'type': 'string'
},
{
'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像',
'code': 'AVATAR',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024',
'codeCamel': 'avatar',
'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars',
'type': 'string',
'widgetType': 'checkbox'
},
{
'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间',
'code': 'CREATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times',
'type': 'datetime'
},
{
'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间',
'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times',
'type': 'datetime'
},
{
'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times',
'type': 'datetime'
},
{
'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别',
'code': 'SECURITY_LEVEL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels',
'type': 'number',
'widgetType': 'richText'
},
{
'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型',
'code': 'TYPE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'type',
'codeCamelPlural': 'types',
'codeUnderscore': 'type',
'codeUnderscorePlural': 'types',
'type': 'number',
'widgetType': 'selectType'
},
{
'id': 'o340',
'objectId': 'B5BCB5C5-192F-4BD0-8215-BB65A8288168',
'name': '部门id',
'code': 'department_id',
'creationDate': '1503476586',
'creator': 'yide',
'modificationDate': '1517186153',
'modifier': 'yide',
'dataType': 'varchar(128)',
'length': '128',
'codeCamel': 'departmentId',
'codeCamelPlural': 'departmentIds',
'codeUnderscore': 'department_id',
'codeUnderscorePlural': 'department_ids',
'type': 'string',
'widgetType': 'textarea'
}
]
}"></hm-complex-form>
'modelPlural': 'HmUsers',
'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users',
'columns': [
{
'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字',
'code': 'USERNAME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1517859502',
'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'username',
'codeCamelPlural': 'usernames',
'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames',
'type': 'string'
},
{
'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID',
'code': 'LOGINID',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'columnMandatory': '1',
'codeCamel': 'loginid',
'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids',
'type': 'string'
},
{
'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码',
'code': 'PASSWORD',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'password',
'codeCamelPlural': 'passwords',
'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords',
'type': 'string'
},
{
'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话',
'code': 'MOBILE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)',
'length': '16',
'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles',
'type': 'string'
},
{
'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱',
'code': 'EMAIL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'email',
'codeCamelPlural': 'emails',
'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails',
'type': 'string'
},
{
'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像',
'code': 'AVATAR',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024',
'codeCamel': 'avatar',
'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars',
'type': 'string'
},
{
'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间',
'code': 'CREATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times',
'type': 'datetime'
},
{
'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间',
'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times',
'type': 'datetime'
},
{
'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times',
'type': 'datetime'
},
{
'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别',
'code': 'SECURITY_LEVEL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels',
'type': 'number'
},
{
'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型',
'code': 'TYPE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'type',
'codeCamelPlural': 'types',
'codeUnderscore': 'type',
'codeUnderscorePlural': 'types',
'type': 'number'
}
]
}"></hm-complex-form>
```
### 指定显示的表单类型
### 指定显示的表单类型及按钮
```vue
<template>
<div>
<hm-complex-form
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:tableId="tableId"
:schema="schema['HmUser']"
:columns="showUserColumns">
:buttons="showUserButtons">
</hm-complex-form>
</div>
</template>
<script>
......@@ -239,207 +225,206 @@
data() {
return {
schema: {
'HmUser': {
'model': 'HmUser',
'modelPlural': 'HmUsers',
'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users',
'columns': [
{
'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字',
'code': 'USERNAME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1517859502',
'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'username',
'codeCamelPlural': 'usernames',
'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames',
'type': 'string'
},
{
'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID',
'code': 'LOGINID',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'columnMandatory': '1',
'codeCamel': 'loginid',
'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids',
'type': 'string'
},
{
'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码',
'code': 'PASSWORD',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'password',
'codeCamelPlural': 'passwords',
'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords',
'type': 'string'
},
{
'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话',
'code': 'MOBILE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)',
'length': '16',
'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles',
'type': 'string'
},
{
'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱',
'code': 'EMAIL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'email',
'codeCamelPlural': 'emails',
'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails',
'type': 'string'
},
{
'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像',
'code': 'AVATAR',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024',
'codeCamel': 'avatar',
'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars',
'type': 'string',
'widgetType': 'checkbox'
},
{
'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间',
'code': 'CREATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times',
'type': 'datetime'
},
{
'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间',
'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times',
'type': 'datetime'
},
{
'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times',
'type': 'datetime'
},
{
'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别',
'code': 'SECURITY_LEVEL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels',
'type': 'number',
'widgetType': 'richText'
},
{
'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型',
'code': 'TYPE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'type',
'codeCamelPlural': 'types',
'codeUnderscore': 'type',
'codeUnderscorePlural': 'types',
'type': 'number',
'widgetType': 'selectType'
}
]
}
},
showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email']
'HmUser': {
'model': 'HmUser',
'modelPlural': 'HmUsers',
'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users',
'columns': [
{
'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字',
'code': 'USERNAME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1517859502',
'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'username',
'codeCamelPlural': 'usernames',
'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames',
'type': 'string'
},
{
'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID',
'code': 'LOGINID',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'columnMandatory': '1',
'codeCamel': 'loginid',
'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids',
'type': 'string'
},
{
'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码',
'code': 'PASSWORD',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'password',
'codeCamelPlural': 'passwords',
'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords',
'type': 'string'
},
{
'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话',
'code': 'MOBILE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)',
'length': '16',
'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles',
'type': 'string'
},
{
'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱',
'code': 'EMAIL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'email',
'codeCamelPlural': 'emails',
'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails',
'type': 'string'
},
{
'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像',
'code': 'AVATAR',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024',
'codeCamel': 'avatar',
'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars',
'type': 'string'
},
{
'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间',
'code': 'CREATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times',
'type': 'datetime'
},
{
'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间',
'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times',
'type': 'datetime'
},
{
'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times',
'type': 'datetime'
},
{
'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别',
'code': 'SECURITY_LEVEL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels',
'type': 'number'
},
{
'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型',
'code': 'TYPE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'type',
'codeCamelPlural': 'types',
'codeUnderscore': 'type',
'codeUnderscorePlural': 'types',
'type': 'number'
}
]
}
},
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['企业', '代理商'] }, { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
}
},
created() {
......@@ -448,4 +433,6 @@
}
}
</script>
```
\ No newline at end of file
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 2becc703
......@@ -8,21 +8,14 @@
<!--表单部分-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showUserColumns" :key="index" :label="column.name" :prop="column.codeCamel">
<el-form-item v-for="(column,index) in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input>-->
<!-- 富文本 -->
<quill-editor v-if="column.widgetType === 5"
ref="textEditor"
v-model="formModel[column.codeCamel]"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 日期选择 -->
<el-date-picker v-else-if="column.type === 'datetime' || column.type === 'date'"
<!-- 1 普通input -->
<el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
<!-- 2 日期选择 -->
<el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
type="datetime"
align="right"
......@@ -30,31 +23,36 @@
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 下拉框 -->
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]">
<el-option v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value">
<!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" @change="selectChange(formModel[column.codeCamel])">
<el-option v-for="(item,key) in column.options"
:key="key"
:label="item"
:value="key">
</el-option>
</el-select>
<!-- 文本域 -->
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]"
type="textarea"
:autosize="{ minRows: 2, maxRows: 5}"
:rows="2">
</el-input>
<!-- 复选框 -->
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3" v-model="formModel[column.codeCamel]"></el-checkbox>
<!-- 普通input -->
<el-input v-else v-model="formModel[column.codeCamel]"></el-input>
<!-- 6 富文本 -->
<quill-editor v-else-if="column.widgetType === 5"
ref="textEditor"
v-model="formModel[column.codeCamel]"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</el-form-item>
<el-form-item>
<el-col :span="12">
<el-button type="primary" @click="onSubmit()">确定</el-button>
</el-col>
<el-col :span="12">
<el-button @click="resetForm()">重置</el-button>
<el-form-item v-if="buttons.length">
<el-col :span="12" v-for="(btn,key) in buttons" :key="key">
<el-button v-if="btn === '确定' || btn === '提交'" type="primary" @click="onSubmit()">{{btn}}</el-button>
<el-button v-if="btn === '取消' || btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
</el-col>
</el-form-item>
</el-form>
......@@ -69,7 +67,6 @@
<script>
import _ from 'lodash'
import request from '@/utils/request'
// import { parseTime } from '@/utils/index'
/**
* 毫末科技的表单组件.
......@@ -82,7 +79,8 @@
// 集成其他组件
extends: {},
// 使用其它组件
components: {},
components: {
},
// 混入公共对象
mixins: [],
props: {
......@@ -95,11 +93,18 @@
required: true
},
/**
* 指定要显示的表单字段及类型。默认为根据schema得到的所有字段。
* 指定要显示的表单字段及类型，必传。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-6(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式)，若表单类型为下拉框，还需传入options字段，值为数组(数组元素是下拉框的选项)
* 示例：[
* { name: 'username', widgetType: 1 },
* { name: 'securityLevel', widgetType: 5 },
* { name: 'type', widgetType: 2, options: ['企业', '代理商'] },
* { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 },
* { name: 'createTime', widgetType: 6 }
* ]
*/
columns: {
type: Array,
required: false,
required: true,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`)
......@@ -109,6 +114,13 @@
return true
}
},
/**
* 指定要显示的按钮(确定、取消、重置)。默认不显示。
*/
buttons: {
type: Array,
required: false
},
/**
* 传入用户的id用来修改用户信息
*/
......@@ -152,7 +164,6 @@
// }
// }
return {
requestUrl: '',
form: null,
formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段
......@@ -213,24 +224,19 @@
picker.$emit('pick', date)
}
}]
},
selectOptions: [{
value: '1',
label: '企业'
}, {
value: '2',
label: '代理商'
}]
}
}
},
created() {
// this.validate()
this.init()
// console.log(this.schema)
console.log(this.buttons)
},
methods: {
selectChange(v) {
console.log(v)
},
logTimeChange(value) {
// value = parseTime(value)
console.log(value)
},
validate() {
......
src/views/haomo/components/forms/index.vue
View file @ 2becc703
<template>
<div>
<hm-complex-form :schema="schema['HmUser2']" :columns="showUserColumns" :tableId="tableId">
<hm-complex-form :schema="schema['HmUser2']" :columns="showUserColumns" :buttons="showUserButtons" :tableId="tableId">
</hm-complex-form>
</div>
</template>
......@@ -21,7 +21,9 @@
return {
// showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime']
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['企业', '代理商'] }, { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }]
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['企业', '代理商'] }, { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
}
},
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