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