Skip to content

V
VueElementTemplate
Commit 1a22d103 authored by 高天阳's avatar 高天阳
Browse files
Options

面板文档

parent d26ead50
Hide whitespace changes
Inline Side-by-side
Showing with 469 additions and 27 deletions
src/views/haomo/components/panel/HmComplexPanel.md
View file @ 1a22d103
### 基本使用
```jsx
<hm-complex-panel :hmTitle="面板标题"
:hmTitleClass='center'
:hmContentClass='center'
:hmContentText='面板文字'
:hmPanelHeight="200px"
: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'
},
{
'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-panel>
```
### 指定显示的表单类型
```vue
<template>
<div>
<hm-complex-panel :schema="schema['HmUser']" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass" :hmContentClass="hmContentClass"
:hmContentText="hmContentText" :hmPanelHeight="hmPanelHeight">
</hm-complex-panel>
</div>
</template>
<script>
export default {
name: 'HmComplexPanel',
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'
},
{
'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'
}
]
}
},
hmTitle: '面板标题',
hmTitleClass: 'weight',
hmContentClass: 'center',
hmContentText: '面板文字',
hmPanelHeight: {
height: '100px'
}
}
},
created() {
this.schema = schema
}
}
</script>
```
\ No newline at end of file
src/views/haomo/components/panel/HmComplexPanel.vue
View file @ 1a22d103
...@@ -8,8 +8,7 @@ ...@@ -8,8 +8,7 @@
</div> </div>
<div :style="hmPanelHeight" :class="hmContentClass"> <div :style="hmPanelHeight" :class="hmContentClass">
<span>{{hmContentText}}</span> <span>{{hmContentText}}</span>
<hm-complex-detail :schema="schema['HmUser']" :tableId="userId" :columns="showFields"> <slot></slot>
</hm-complex-detail>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
...@@ -17,19 +16,15 @@ ...@@ -17,19 +16,15 @@
</template> </template>
<script> <script>
import HmComplexDetail from '../details/HmComplexDetail.vue'
import schema from '../../schemas/hm_org_schema'
import _ from 'lodash' import _ from 'lodash'
import request from '@/utils/request' import request from '@/utils/request'
export default { export default {
name: 'HmComplexDetail', name: 'HmComplexPanel',
// 继承其他组件 // 继承其他组件
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
components: { components: {},
'hm-complex-detail': HmComplexDetail
},
props: { props: {
/** /**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。 * 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
...@@ -65,39 +60,53 @@ ...@@ -65,39 +60,53 @@
return true return true
} }
}, },
/* /**
* 在详情页需要传入用户的id用来带出用户信息 * 在面板页传入面板标题
* */ */
userId: {
type: String,
required: true
},
hmTitle: { hmTitle: {
type: String, type: String,
required: false required: false
}, },
/**
* 在面板页传入标题类名
*/
hmTitleClass: { hmTitleClass: {
type: String, type: String,
required: false required: false
}, },
/**
* 在面板页传入内容类名
*/
hmContentClass: { hmContentClass: {
type: String, type: String,
required: false required: false
}, },
/**
* 在面板页传入内容
*/
hmContentText: { hmContentText: {
type: String, type: String,
required: false required: false
}, },
/**
* 在面板页传入面板样式
*/
hmStyle: { hmStyle: {
type: Object, type: Object,
required: false required: false
}, },
/**
* 在面板页传入面板内容高度
*/
hmPanelHeight: { hmPanelHeight: {
type: Object, type: Object,
required: false required: false
}, },
/**
* 在面板页传入面板宽度
*/
hmCollapse: { hmCollapse: {
type: null, type: String,
required: false required: false
}, },
showFields: { showFields: {
...@@ -116,11 +125,7 @@ ...@@ -116,11 +125,7 @@
}, },
filters: { filters: {
}, },
created() { created() {},
this.schema = schema
this.getList()
this.init()
},
methods: { methods: {
validate() { validate() {
const self = this const self = this
...@@ -189,8 +194,8 @@ ...@@ -189,8 +194,8 @@
} }
</script> </script>
<style scoped> <style scoped>
.title{ .weight{
text-align: center; font-weight: 700;
} }
.center{ .center{
text-align: center; text-align: center;
......
src/views/haomo/components/panel/index.vue
View file @ 1a22d103
<template> <template>
<div> <div>
<hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="titleBak" :hmContentClass="hmContentClass" :showFields="showFields" <hm-complex-panel :schema="schema['HmUser']" :hmTitle="titleBak" :hmContentClass="hmContentClass"
:hmStyle="styleBak" :hmPanelHeight="panelHeightBak" :hmCollapse="collapseBak"> :hmStyle="styleBak" :hmPanelHeight="panelHeightBak" :hmCollapse="collapseBak">
</hm-complex-panel> </hm-complex-panel>
<hm-complex-panel :schema="schema['HmUser']" :userId="userId2" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass" :showFields="showFields2" <hm-complex-panel :schema="schema['HmUser']" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass"
:hmContentText="hmContentText" :hmStyle="hmStyle" :hmPanelHeight="hmPanelHeight" :hmCollapse="collapses"> :hmContentText="hmContentText" :hmStyle="hmStyle" :hmPanelHeight="hmPanelHeight" :hmCollapse="collapses">
</hm-complex-panel> </hm-complex-panel>
</div> </div>
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<script> <script>
import HmComplexPanel from './HmComplexPanel.vue' import HmComplexPanel from './HmComplexPanel.vue'
import schema from '../../schemas/hm_org_schema' import schema from '../../schemas/hm_org_schema'
import HmComplexDetail from '../details/HmComplexDetail.vue'
export default { export default {
name: 'HmComplexPanel', name: 'HmComplexPanel',
...@@ -19,7 +20,8 @@ ...@@ -19,7 +20,8 @@
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
components: { components: {
'hm-complex-panel': HmComplexPanel 'hm-complex-panel': HmComplexPanel,
'hm-complex-detail': HmComplexDetail
}, },
data() { data() {
return { return {
......
styleguide.config.js
View file @ 1a22d103
...@@ -28,7 +28,8 @@ const sections = [ ...@@ -28,7 +28,8 @@ const sections = [
return [ return [
'./src/views/haomo/components/tables/HmComplexTable.vue', './src/views/haomo/components/tables/HmComplexTable.vue',
'./src/views/haomo/components/forms/HmComplexForm.vue', './src/views/haomo/components/forms/HmComplexForm.vue',
'./src/views/haomo/components/details/HmComplexDetail.vue' './src/views/haomo/components/details/HmComplexDetail.vue',
'./src/views/haomo/components/panel/HmComplexPanel.vue'
] ]
} }
}, },
......
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