Skip to content

V
VueElementTemplate
Commit 93176873 authored by 胡小根's avatar 胡小根
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents e2b76f93 50c0f9d4
Show whitespace changes
Inline Side-by-side
Showing with 1422 additions and 413 deletions
src/router/index.js
View file @ 93176873
......@@ -109,6 +109,15 @@ export const asyncRouterMap = [
title: '详情',
icon: 'table'
}
},
{
path: 'panel',
component: _import('haomo/components/panel/index'),
name: 'haomo-panel',
meta: {
title: '面板',
icon: 'table'
}
}
]
},
......
src/views/haomo/components/details/HmComplexDetail.md
View file @ 93176873
### 基本使用
```jsx
<hm-complex-detail :userId="0e26566e953449a7a7500c34be39fd26"
: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-detail>
```
### 指定列表显示的列
```vue
<template>
<div>
<hm-complex-detail :schema="schema['HmUser']"
:userId="userId"
:columns="showUserColumns">
</hm-complex-detail>
</div>
</template>
<script>
import HmComplexDetail from './HmComplexDetail.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexDetail',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-complex-detail': HmComplexDetail
},
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'
}
]
}
},
showUserColumns: ['mobile', 'loginid']
}
},
computed: {
},
filters: {
},
created() {
this.userId = '0e26566e953449a7a7500c34be39fd26'
},
methods: {}
}
</script>
```
\ No newline at end of file
src/views/haomo/components/details/HmComplexDetail.vue
View file @ 93176873
<template>
<el-row type="flex">
<el-col :span="6"><div></div></el-col>
<el-col :span="12" class="detail-content">
<el-col :span="24" class="detail-content">
<h2 class="title">详情页面</h2>
<el-form :model="detail" ref="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item label="姓名" prop="name">
<a href="#">{{detail.name}}</a>
</el-form-item>
<el-form-item label="性别" prop="gender">
<div>{{detail.gender}}</div>
</el-form-item>
<el-form-item label="年龄" prop="age">
<div>{{detail.age}}</div>
</el-form-item>
<el-form-item label="出生日期" prop="date">
<div>{{detail.date}}</div>
</el-form-item>
<el-form-item label="照片" prop="img">
<img style="width: 50px;" :src=detail.img alt="...">
</el-form-item>
<el-form-item label="学历" prop="education">
<div>{{detail.education}}</div>
</el-form-item>
<el-form-item label="最常用的网站" prop="website">
<a :href="detail.website">{{detail.website}}</a>
</el-form-item>
<el-form-item label="最喜欢的颜色" prop="color" class="color">
<input type="color" v-model="detail.color" style="width:200px;height:36px;border:none;outline:0"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<div>{{detail.phone}}</div>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<div>{{detail.email}}</div>
</el-form-item>
<el-form-item label="住址" prop="address">
<div>{{detail.address}}</div>
<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">
<div>{{detail[column.codeCamel]}}</div>
</el-form-item>
</el-form>
</el-col>
<el-col :span="6"><div ></div></el-col>
</el-row>
</template>
<script>
import _ from 'lodash'
import request from '@/utils/request'
export default {
name: 'HmComplexDetail',
// 继承其他组件
extends: {},
// 使用其它组件
components: {},
props: {
/**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
schema: {
type: Object,
required: true
},
/**
* 指定要显示的列。默认为根据schema得到的所有列。完整示例为：
* [
* {
* "name": "姓名",
* "code": "username",
* "render": function(value){
* return "<a href='value'></a>"
* }
* },
* "mobile",
* "sexual"
* ]
*/
columns: {
type: Array,
required: false,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`)
return false
}
return true
}
},
/*
* 在详情页需要传入用户的id用来带出用户信息
* */
userId: {
type: null,
required: true
}
},
data() {
return {
detail: {
name: 'haomokeji',
gender: '男',
age: '18',
password: '123456',
website: 'https://www.baidu.com',
img: 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=936c94db60600c33e474d69a7b253a6a/5243fbf2b21193134871a87f6e380cd790238dcb.jpg',
date: '2018/02/06',
education: '本科',
color: '#ff0000',
phone: '18034935566',
email: '18034935566@gmail.com',
address: '北京市海淀区文思海辉大厦'
}
list: null,
detail: null,
showColumns: [] // 要显示的列数据
}
},
computed: {
......@@ -73,15 +76,79 @@
filters: {
},
created() {
this.getList()
this.init()
},
methods: {
validate() {
const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
// 由于vue中不允许通过其他的props来验证当前props，只能在created里进行调用
_.each(self.columns, function(item) {
if (!item) {
return 0
}
if (typeof item !== 'string' && typeof item !== 'object') {
console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
}
if (typeof item === 'string' && !_.keyBy(self.schema['columns'], 'code')[item.toUpperCase()]) {
console.error(`传入的columns不符合要求，字符串元素[${item}]必须是schema中定义的列[code]`)
}
if (typeof item === 'object' && !_.keyBy(self.schema['columns'], 'code')[item['code'].toUpperCase()]) {
console.error(`传入的columns不符合要求，元素的code属性[${item['code']}]必须是schema中定义的列[code]`)
}
})
},
methods: {}
init() {
const self = this
// 处理要显示的列
if (!self.columns || !self.columns.length) {
_.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column))
self.showColumns.push(tmp)
})
} else {
self.showColumns = [];
// 将字符串对象进行替换处理
_.each(self.columns,function(item){
_.each(self.schema['columns'], function(column) {
if(item===column.codeCamel){
console.log(item);
const tmp = JSON.parse(JSON.stringify(column))
self.showColumns.push(tmp)
}
})
})
}
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
},
getList: function() {
const self = this
self.listLoading = true
const params = {}
// 拿到所有的用户
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
self.list = resp.data
// 匹配需要展示的用户
_.each(self.list, function(item) {
if (item.id === self.userId) {
self.detail = item
}
})
})
}
}
}
</script>
<style scoped>
.title{
text-align: center;
}
.detail-content{
background-color: #F8F8F8;
}
</style>
src/views/haomo/components/details/index.vue
View file @ 93176873
<template>
<div>
<hm-complex-detail>
<!--<hm-complex-detail :schema="schema['HmUser']" :userId="userId">-->
<!--</hm-complex-detail>-->
<hm-complex-detail :schema="schema['HmUser']" :userId="userId" :columns="showUserColumns">
</hm-complex-detail>
</div>
</template>
<script>
import HmComplexDetail from './HmComplexDetail.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexDetail',
......@@ -17,13 +20,17 @@
'hm-complex-detail': HmComplexDetail
},
data() {
return {}
return {
showUserColumns: ['mobile', 'loginid']
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
this.userId = '0e26566e953449a7a7500c34be39fd26'
},
methods: {}
}
......
src/views/haomo/components/forms/HmComplexForm.md
View file @ 93176873
### 基本使用
```jsx
<hm-complex-form :fields="['username', 'loginid', 'password', 'mobile', 'email']"
: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-form>
```
### 指定显示的表单类型
```vue
<template>
<div>
<hm-complex-form :schema="schema['HmUser']"
:fields="showFields">
</hm-complex-form>
</div>
</template>
<script>
import HmComplexForm from './HmComplexForm.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexForm',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-complex-form': HmComplexForm
},
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'
}
]
}
},
showFields: ['username', 'loginid', 'password', 'mobile', 'email']
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
},
methods: {}
}
</script>
<style scoped>
</style>
```
\ No newline at end of file
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 93176873
<template>
<el-row type="flex" class="hm-form">
<!--左侧留白-->
<el-col :span="6"><div></div></el-col>
<el-col :span="12" style="border:1px solid orange"><div>
<!--标题-->
<el-col :span="6">
<div></div>
</el-col>
<el-col :span="12" style="border:1px solid orange">
<div>
<h2 class="title">表单页面</h2>
<!--表单部分-->
<el-form :model="form" ref="form" :rules="rules" label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item label="姓名" prop="name">
<el-input type="text" v-model="form.name" autofocus placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input type="age" v-model.number="form.age" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="date">
<el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="照片" prop="img">
<input type="file">
</el-form-item>
<!--选择学历-->
<el-form-item label="学历" prop="education">
<el-select v-model="form.education" placeholder="请选择学历">
<el-option label="博士" value="doctor"></el-option>
<el-option label="硕士" value="master"></el-option>
<el-option label="本科" value="bachelor"></el-option>
<el-option label="专科" value="professional"></el-option>
<el-option label="其他" value="others"></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="最常用的网站" prop="website">
<el-input type="url" v-model="form.url" placeholder="请输入网址"></el-input>
</el-form-item>
<el-form-item label="最喜欢的颜色" prop="color" class="color">
<input type="color" v-model="form.color" style="width:200px;height:36px;border:none;outline:0"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号"></el-input>
<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 showFields" :key="index" :label="column.name" :prop="column.codeCamel">
<el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name"
v-model="formModel[column.codeCamel]"></el-input>
<el-input v-if="column.codeCamel!=='password'" :placeholder="column.name"
v-model="formModel[column.codeCamel]"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="住址" prop="address">
<el-input type="textarea" placeholder="请填写地址" :autosize="{ minRows: 2, maxRows: 4}" resize="none" v-model="form.address"></el-input>
</el-form-item>
<!--确定提交和重置-->
<el-form-item>
<el-col :span="12">
<el-button type="primary" @click="onSubmit()">确定</el-button>
......@@ -65,12 +26,16 @@
</el-form>
</div>
</el-col>
<!--右侧留白-->
<el-col :span="6"><div></div></el-col>
<el-col :span="6">
<div></div>
</el-col>
</el-row>
</template>
<script>
import _ from 'lodash'
import request from '@/utils/request'
/**
* 表单页面。
*/
......@@ -82,52 +47,114 @@
components: {},
// 混入公共对象
mixins: [],
props: {},
/**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
props: {
schema: {
type: Object,
required: true
},
/**
* 指定要显示的字段。默认为根据schema得到的所有字段。
*/
fields: {
type: Array,
required: false,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的fields不符合要求，必须是数组`)
return false
}
return true
}
}
},
data() {
return {
form: {
name: '',
gender: '男',
age: '',
password: '',
website: '',
img: '',
date: '',
education: '',
color: '#ff0000',
phone: '',
email: '',
address: ''
},
form: null,
formModel: {}, // 双向绑定的数据变量
showFields: [], // 要显示的字段
// form: {
// name: '',
// gender: '男',
// age: '',
// password: '',
// website: '',
// img: '',
// date: '',
// education: '',
// color: '#ff0000',
// phone: '',
// email: '',
// address: ''
// },
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'change' }
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
website: [
{ required: true, message: '请输入网址', trigger: 'blur' },
{ pattern: /[a-zA-z]+:\/\/[^\s]*/, message: '请输入正确的网址', trigger: 'change' }
loginid: [
{ required: true, message: '请输入登陆ID', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
],
phone: [
{ type: 'number', required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
mobile: [
{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码或手机号', trigger: 'blur&change' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change' }
]
}
}
},
created() {
this.init()
// console.log(this.schema)
},
methods: {
init() {
const self = this
// 如果没有传fields，则全部显示
if (!self.fields || !self.fields.length) {
_.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column))
// self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showFields.push(tmp)
})
// console.log(self.showFields)
} else { // 如果传入了fields，则只显示传入的字段
self.showFields = JSON.parse(JSON.stringify(self.fields))
console.log('1111111')
// console.log(self.showFields)
// 将字符串对象进行替换处理
_.each(self.showFields, function (column, index) {
if (typeof column === 'string') {
// 生成一个新对象
const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
// console.log(tmp)
// self.$set(tmp, 'code', tmp.code.toLowerCase())
self.$set(self.showFields, index, tmp)
}
})
console.log('2222222')
console.log(self.showFields)
}
// 提取v-model绑定的变量
_.each(self.showFields, function(item) {
self.formModel[item.codeCamel] = ''
})
console.log(self.formModel)
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
console.log(request.defaults)
},
// 提交
/**
* 确定提交函数。
......@@ -136,14 +163,36 @@
* 验证失败，禁止提交并给出提示
*/
onSubmit() {
this.$refs.form.validate((valid) => {
const self = this
console.log(self.formModel)
self.$refs.form.validate((valid) => {
if (valid) {
console.log('提交成功!')
request(self.schema.modelUnderscorePlural + '/new', {
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
data: self.formModel,
transformRequest:
function(obj) {
var str = []
for (var p in obj) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
}
return str.join('&')
}
}).then(resp => {
console.log(resp.data)
self.resetForm()
})
} else {
console.log('提交失败!!')
return false
}
})
// paramsSerializer: function(data) {
// const keys = Object.keys(data)
// return encodeURI(keys.map(name => `${name}=${data[name]}`).join('&'))
// }
},
// 重置
/**
......@@ -159,12 +208,12 @@
}
</script>
<style scoped>
.title{
.title {
line-height: 40px;
background:orange;
color:#fff;
text-align:center;
margin-top:0;
background: orange;
color: #fff;
text-align: center;
margin-top: 0;
}
</style>
src/views/haomo/components/forms/Readme.md deleted 100644 → 0
View file @ e2b76f93
输入姓名:
```jsx
<input/> JACK
```
选择性别:
```jsx
<input type="radio" value="男" name="gender"/>
<input type="radio" value="女" name="gender"/>
```
输入年龄:
```jsx
<input/> 18
```
输入出生日期:
```jsx
<input/> 20180207
```
上传照片:
```jsx
<input type="file"/>
```
学历:
```jsx
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>专科</option>
<option>其他</option>
</select>
```
密码:
```jsx
<input type="password"/>
```
填写网站:
```jsx
<input type="url"/>
```
最喜欢的颜色:
```jsx
<input type="color"/>
```
填写手机号:
```jsx
<input type="number"/>
```
填写邮箱:
```jsx
<input type="email"/>
```
填写地址:
```jsx
<textarea>家庭地址</textarea>
```
```vue
<template>
<el-row type="flex" class="hm-form">
<!--左侧留白-->
<el-col :span="6"><div></div></el-col>
<el-col :span="12" style="border:1px solid orange"><div>
<!--标题-->
<h2 class="title">表单页面</h2>
<!--表单部分-->
<el-form :model="form" ref="form" :rules="rules" label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item label="姓名" prop="name">
<el-input type="text" v-model="form.name" autofocus placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input type="age" v-model.number="form.age" placeholder="请输入年龄"></el-input>
</el-form-item>
<el-form-item label="出生日期" prop="date">
<el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="照片" prop="img">
<input type="file">
</el-form-item>
<!--选择学历-->
<el-form-item label="学历" prop="education">
<el-select v-model="form.education" placeholder="请选择学历">
<el-option label="博士" value="doctor"></el-option>
<el-option label="硕士" value="master"></el-option>
<el-option label="本科" value="bachelor"></el-option>
<el-option label="专科" value="professional"></el-option>
<el-option label="其他" value="others"></el-option>
</el-select>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="最常用的网站" prop="website">
<el-input type="url" v-model="form.url" placeholder="请输入网址"></el-input>
</el-form-item>
<el-form-item label="最喜欢的颜色" prop="color" class="color">
<input type="color" v-model="form.color" style="width:200px;height:36px;border:none;outline:0"/>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="form.phone" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="住址" prop="address">
<el-input type="textarea" placeholder="请填写地址" :autosize="{ minRows: 2, maxRows: 4}" resize="none" v-model="form.address"></el-input>
</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-col>
</el-form-item>
</el-form>
</div>
</el-col>
<!--右侧留白-->
<el-col :span="6"><div></div></el-col>
</el-row>
</template>
<script>
/**
* 表单页面。
*/
export default {
name: 'HmComplexForm',
// 集成其他组件
extends: {},
// 使用其它组件
components: {},
// 混入公共对象
mixins: [],
props: {},
data() {
return {
form: {
name: '',
gender: '男',
age: '',
password: '',
website: '',
img: '',
date: '',
education: '',
color: '#ff0000',
phone: '',
email: '',
address: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'change' }
],
website: [
{ required: true, message: '请输入网址', trigger: 'blur' },
{ pattern: /[a-zA-z]+:\/\/[^\s]*/, message: '请输入正确的网址', trigger: 'change' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
],
phone: [
{ type: 'number', required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
}
}
},
methods: {
// 提交
/**
* 确定提交函数。
*
* 所有选项输入正并验证通过，正确提交
* 验证失败，禁止提交并给出提示
*/
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('提交成功!')
} else {
console.log('提交失败!!')
return false
}
})
},
// 重置
/**
* 表单重置函数。
*
* 清空所有输入及提示信息。
*/
resetForm() {
this.$refs.form.resetFields()
}
}
}
</script>
<style scoped>
.title{
line-height: 40px;
background:orange;
color:#fff;
text-align:center;
margin-top:0;
}
</style>
```
src/views/haomo/components/forms/index.vue
View file @ 93176873
<template>
<div>
<hm-complex-form>
<hm-complex-form :schema="schema['HmUser']" :fields="showFields">
</hm-complex-form>
</div>
</template>
<script>
import HmComplexForm from './HmComplexForm.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexForm',
......@@ -17,13 +18,16 @@
'hm-complex-form': HmComplexForm
},
data() {
return {}
return {
showFields: ['username', 'loginid', 'password', 'mobile', 'email']
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
},
methods: {}
}
......
src/views/haomo/components/panel/HmComplexPanel.vue 0 → 100644
View file @ 93176873
<template>
<el-row type="flex">
<el-col :span="hmCollapse" class="detail-content" style="margin:0 auto">
<h2 class="title">面板页面</h2>
<el-card class="box-card" :style="hmStyle">
<div slot="header" class="clearfix" :class="hmTitleClass">
<span>{{hmTitle}}</span>
</div>
<div :style="hmPanelHeight" :class="hmContentClass">
<span>{{hmContentText}}</span>
<!--<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">-->
<!--<el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">-->
<!--<div>{{detail[column.codeCamel]}}</div>-->
<!--</el-form-item>-->
<!--</el-form>-->
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import _ from 'lodash'
import request from '@/utils/request'
export default {
name: 'HmComplexDetail',
// 继承其他组件
extends: {},
// 使用其它组件
components: {},
props: {
/**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
schema: {
type: Object,
required: true
},
/**
* 指定要显示的列。默认为根据schema得到的所有列。完整示例为：
* [
* {
* "name": "姓名",
* "code": "username",
* "render": function(value){
* return "<a href='value'></a>"
* }
* },
* "mobile",
* "sexual"
* ]
*/
columns: {
type: Array,
required: false,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`)
return false
}
return true
}
},
/*
* 在详情页需要传入用户的id用来带出用户信息
* */
userId: {
type: null,
required: true
},
hmTitle: {
type: null,
required: false
},
hmTitleClass: {
type: null,
required: false
},
hmContentClass: {
type: null,
required: false
},
hmContentText: {
type: null,
required: false
},
hmStyle: {
type: Object,
required: false
},
hmPanelHeight: {
type: Object,
required: false
},
hmCollapse: {
type: null,
required: false
}
},
data() {
return {
list: null,
detail: null,
showColumns: [] // 要显示的列数据
}
},
computed: {
},
filters: {
},
created() {
this.getList()
this.init()
},
methods: {
validate() {
const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
// 由于vue中不允许通过其他的props来验证当前props，只能在created里进行调用
_.each(self.columns, function(item) {
if (!item) {
return 0
}
if (typeof item !== 'string' && typeof item !== 'object') {
console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
}
if (typeof item === 'string' && !_.keyBy(self.schema['columns'], 'code')[item.toUpperCase()]) {
console.error(`传入的columns不符合要求，字符串元素[${item}]必须是schema中定义的列[code]`)
}
if (typeof item === 'object' && !_.keyBy(self.schema['columns'], 'code')[item['code'].toUpperCase()]) {
console.error(`传入的columns不符合要求，元素的code属性[${item['code']}]必须是schema中定义的列[code]`)
}
})
},
init() {
const self = this
// 处理要显示的列
if (!self.columns || !self.columns.length) {
_.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column))
self.showColumns.push(tmp)
})
} else {
self.showColumns = [];
// 将字符串对象进行替换处理
_.each(self.schema['columns'], function(column) {
_.each(self.columns,function(item){
if(column.codeCamel===item){
const tmp = JSON.parse(JSON.stringify(column))
self.showColumns.push(tmp)
}
})
})
}
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
},
getList: function() {
const self = this
self.listLoading = true
const params = {}
// 拿到所有的用户
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
self.list = resp.data
// 匹配需要展示的用户
_.each(self.list, function(item) {
if (item.id === self.userId) {
self.detail = item
}
})
})
}
}
}
</script>
<style scoped>
.title{
text-align: center;
}
.center{
text-align: center;
}
</style>
src/views/haomo/components/panel/index.vue 0 → 100644
View file @ 93176873
<template>
<div>
<hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass"
:hmContentText="hmContentText" :hmStyle="hmStyle" :hmPanelHeight="hmPanelHeight" :hmCollapse="collapses">
</hm-complex-panel>
<hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="titleBak" :hmContentClass="hmContentClass" :showFields="showFields"
:hmContentText="hmContentTextBak" :hmStyle="styleBak" :hmPanelHeight="panelHeightBak" :hmCollapse="collapseBak">
</hm-complex-panel>
</div>
</template>
<script>
import HmComplexPanel from './HmComplexPanel.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexPanel',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-complex-panel': HmComplexPanel
},
data() {
return {
showFields: ['username', 'loginid', 'password', 'mobile', 'email']
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
this.userId = '0e26566e953449a7a7500c34be39fd26'
this.hmTitle = '面版名称'
this.hmTitleClass = 'center'
this.hmContentClass = 'center'
this.hmContentText = '面板文字'
this.hmStyle = {
width: '50%',
background: '#42b983',
margin: '0 auto'
}
this.hmPanelHeight = {
height: '100px'
}
this.collapses = 12
this.showFields = ['username', 'loginid', 'password', 'mobile', 'email']
this.titleBak = '测试面板'
this.hmContentTextBak = '我测试一下'
this.styleBak = {
width: '100%',
background: '#f56c6c',
marginBottom: '20px'
}
this.panelHeightBak = {
height: '200px'
}
this.collapseBak = 22
},
methods: {}
}
</script>
<style scoped>
</style>
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 93176873
......@@ -21,7 +21,7 @@
<!-- 表格 -->
<el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
style="width: 100%">
<el-table-column v-for="column in showColumns" align="center" :label="column.name">
<el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name">
<template slot-scope="scope">
<span>{{ scope.row[column.code] }}</span>
</template>
......@@ -241,16 +241,22 @@
self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showColumns.push(tmp)
})
console.log(self.showColumns)
} else {
self.showColumns = JSON.parse(JSON.stringify(self.columns))
console.log('1111111')
console.log(self.showColumns)
// 将字符串对象进行替换处理
_.each(self.showColumns, function(column, index) {
if (typeof column === 'string') {
const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
console.log(tmp)
self.$set(tmp, 'code', tmp.code.toLowerCase())
self.$set(self.showColumns, index, tmp)
}
})
console.log('2222222')
console.log(self.showColumns)
}
// 处理过滤条件
......
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