Skip to content

V
VueElementTemplate
Commit 3d6a8f0b authored by 赵帅's avatar 赵帅
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents 7d433993 eb38f927
master storybook test
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing with 282 additions and 22 deletions
src/views/haomo/components/details/HmComplexDetail.vue
View file @ 3d6a8f0b
......@@ -4,7 +4,7 @@
<el-col :span="12" class="detail-content">
<h2 class="title">详情页面</h2>
<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item v-for="column in showColumns" :label="column.name">
<el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">
<div>{{detail[column.codeCamel]}}</div>
</el-form-item>
</el-form>
......@@ -129,7 +129,7 @@
console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
},
getList: function () {
getList: function() {
const self = this
self.listLoading = true
const params = {}
......@@ -137,9 +137,11 @@
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
console.log('=============')
console.log(self.schema.modelUnderscorePlural)
self.list = resp.data
// 匹配需要展示的用户
_.each(self.list, function (item) {
_.each(self.list, function(item) {
if (item.id === self.userId) {
self.detail = item
}
......
src/views/haomo/components/forms/HmComplexForm.md
View file @ 3d6a8f0b
### 基本使用
```jsx
<hm-complex-form :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>
```
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 3d6a8f0b
......@@ -2,7 +2,6 @@
<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">
......@@ -63,8 +62,8 @@
</el-form-item>
</el-form>-->
<el-form label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item v-for="column in showColumns" :label="column.name">
<el-input :placeholder="column.name"></el-input>
<el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name">
<el-input :placeholder="column.name" v-model="formModel[column.codeCamel]"></el-input>
</el-form-item>
<el-form-item>
<el-col :span="12">
......@@ -95,17 +94,36 @@
components: {},
// 混入公共对象
mixins: [],
/**
* 组件所使用的表定义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 {
list: null,
form: null,
showColumns: [] // 要显示的列数据
formModel: {}, // 双向绑定的数据变量
showFields: [] // 要显示的字段
// form: {
// name: '',
// gender: '男',
......@@ -156,11 +174,37 @@
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.showColumns.push(tmp)
self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showFields.push(tmp)
})
console.log(self.showColumns)
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') {
// 生成一个新对象
var 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'
}
......@@ -174,14 +218,22 @@
* 验证失败，禁止提交并给出提示
*/
onSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('提交成功!')
} else {
console.log('提交失败!!')
return false
}
// this.formModel['X-Auth-Token'] = '111'
// console.log(this.formModel)
// console.log(this.schema)
request(this.schema.modelUnderscorePlural + '/new', {
params: this.formModel
}).then(resp => {
console.log(resp.data)
})
// this.$refs.form.validate((valid) => {
// if (valid) {
// console.log('提交成功!')
// } else {
// console.log('提交失败!!')
// return false
// }
// })
},
// 重置
/**
......
src/views/haomo/components/forms/index.vue
View file @ 3d6a8f0b
<template>
<div>
<hm-complex-form :schema="schema['HmUser']">
<hm-complex-form :schema="schema['HmUser']" :fields="showFields">
</hm-complex-form>
</div>
</template>
......@@ -18,7 +18,9 @@
'hm-complex-form': HmComplexForm
},
data() {
return {}
return {
showFields: ['username', 'loginid', 'password', 'mobile', 'email']
}
},
computed: {
},
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 3d6a8f0b
......@@ -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