Commit 47cbaf72 authored by 高天阳's avatar 高天阳

Merge remote-tracking branch 'origin/master'

parents d812dcce 775f6b27
### 开发新组件 关于如何进行组件化开发,请见文档:http://factory.haomo-studio.com/frontend/react/react-element-based.html
\ No newline at end of file
### 基本使用 ### 基本使用
```jsx ```jsx
<hm-complex-detail :userId="0e26566e953449a7a7500c34be39fd26" <hm-complex-detail :tableId="0e26566e953449a7a7500c34be39fd26"
:schema="{ :schema="{
'model': 'HmUser', 'model': 'HmUser',
'modelPlural': 'HmUsers', 'modelPlural': 'HmUsers',
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
<template> <template>
<div> <div>
<hm-complex-detail :schema="schema['HmUser']" <hm-complex-detail :schema="schema['HmUser']"
:userId="userId" :tableId="tableId"
:columns="showUserColumns"> :columns="showUserColumns">
</hm-complex-detail> </hm-complex-detail>
</div> </div>
...@@ -430,7 +430,7 @@ ...@@ -430,7 +430,7 @@
filters: { filters: {
}, },
created() { created() {
this.userId = '0e26566e953449a7a7500c34be39fd26' this.tableId = '0e26566e953449a7a7500c34be39fd26'
}, },
methods: {} methods: {}
} }
......
<template> <template>
<el-row type="flex"> <el-row type="flex">
<el-col :span="24" class="detail-content"> <el-col :span="24" class="detail-content">
<h2 class="title">详情页面</h2>
<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto"> <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"> <el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">
<div>{{detail[column.codeCamel]}}</div> <div>{{detail[column.codeCamel]}}</div>
...@@ -56,11 +55,11 @@ ...@@ -56,11 +55,11 @@
return true return true
} }
}, },
/* /**
* 在详情页需要传入用户的id用来带出用户信息 * 在详情页需要传入用户的id用来带出用户信息
* */ */
userId: { tableId: {
type: null, type: String,
required: true required: true
} }
}, },
...@@ -68,7 +67,7 @@ ...@@ -68,7 +67,7 @@
return { return {
list: null, list: null,
detail: null, detail: null,
showColumns: [] // 要显示的列数据 showColumns: [] // 要显示的列数据,
} }
}, },
computed: { computed: {
...@@ -138,7 +137,7 @@ ...@@ -138,7 +137,7 @@
self.list = resp.data self.list = resp.data
// 匹配需要展示的用户 // 匹配需要展示的用户
_.each(self.list, function(item) { _.each(self.list, function(item) {
if (item.id === self.userId) { if (item.id === self.tableId) {
self.detail = item self.detail = item
} }
}) })
......
<template> <template>
<div> <div>
<hm-complex-detail :schema="schema['HmUser']" :userId="userId"> <hm-complex-detail :schema="schema['HmUser']" :tableId="tableId">
</hm-complex-detail> </hm-complex-detail>
<hm-complex-detail :schema="schema['HmUser']" :userId="userId" :columns="showUserColumns"> <hm-complex-detail :schema="schema['HmUser']" :tableId="tableId" :columns="showUserColumns">
</hm-complex-detail> </hm-complex-detail>
</div> </div>
</template> </template>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
}, },
created() { created() {
this.schema = schema this.schema = schema
this.userId = '0e26566e953449a7a7500c34be39fd26' this.tableId = '0e26566e953449a7a7500c34be39fd26'
}, },
methods: {} methods: {}
} }
......
...@@ -200,6 +200,7 @@ ...@@ -200,6 +200,7 @@
}"></hm-complex-form> }"></hm-complex-form>
``` ```
### 指定显示的表单类型 ### 指定显示的表单类型
```vue ```vue
<template> <template>
<div> <div>
...@@ -210,17 +211,8 @@ ...@@ -210,17 +211,8 @@
</template> </template>
<script> <script>
import HmComplexForm from './HmComplexForm.vue'
import schema from '../../schemas/hm_org_schema'
export default { export default {
name: 'HmComplexForm', name: 'HmComplexForm',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-complex-form': HmComplexForm
},
data() { data() {
return { return {
schema: { schema: {
...@@ -424,16 +416,9 @@ ...@@ -424,16 +416,9 @@
showFields: ['username', 'loginid', 'password', 'mobile', 'email'] showFields: ['username', 'loginid', 'password', 'mobile', 'email']
} }
}, },
computed: {
},
filters: {
},
created() { created() {
this.schema = schema this.schema = schema
}, }
methods: {}
} }
</script> </script>
<style scoped>
</style>
``` ```
\ No newline at end of file
<template> <template>
<el-row type="flex" class="hm-form"> <el-row type="flex" class="hm-form" style="margin-top: 50px">
<el-col :span="6"> <el-col :span="6">
<div></div> <div></div>
</el-col> </el-col>
<el-col :span="12" style="border:1px solid orange"> <el-col :span="12">
<div> <div>
<h2 class="title">表单页面</h2>
<!--表单部分--> <!--表单部分-->
<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">
...@@ -136,6 +135,7 @@ ...@@ -136,6 +135,7 @@
_.each(self.showFields, function(column, index) { _.each(self.showFields, function(column, index) {
if (typeof column === 'string') { if (typeof column === 'string') {
// 生成一个新对象 // 生成一个新对象
console.log(column)
const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()] const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
// console.log(tmp) // console.log(tmp)
// self.$set(tmp, 'code', tmp.code.toLowerCase()) // self.$set(tmp, 'code', tmp.code.toLowerCase())
...@@ -209,12 +209,5 @@ ...@@ -209,12 +209,5 @@
} }
</script> </script>
<style scoped> <style scoped>
.title {
line-height: 40px;
background: orange;
color: #fff;
text-align: center;
margin-top: 0;
}
</style> </style>
...@@ -83,19 +83,12 @@ ...@@ -83,19 +83,12 @@
}, },
/** /**
* 搜索过滤选项。默认没有过滤功能。完整的示例为: * 搜索过滤选项。默认没有过滤功能。完整的示例为:
*
* { * {
*
* "column1": { * "column1": {
*
* like: '%abc%', 模糊查询,包含字符”abc” * like: '%abc%', 模糊查询,包含字符”abc”
*
* notLike: '' 模糊查询,不包含字符 * notLike: '' 模糊查询,不包含字符
*
* between: [1, 10], 取值在[1,10]之间,包含1与10 * between: [1, 10], 取值在[1,10]之间,包含1与10
*
* notBetween: [1, 10], 取值小于1大于10 * notBetween: [1, 10], 取值小于1大于10
*
* isNull: true, // 只能为true 判断字段是否为空 * isNull: true, // 只能为true 判断字段是否为空
* isNotNull: true, // 只能为true 判断字段是否不为空 * isNotNull: true, // 只能为true 判断字段是否不为空
* equalTo: "abc", 相等于 * equalTo: "abc", 相等于
......
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