1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<template>
<el-row type="flex">
<el-col :span="24" class="detail-content">
<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-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用来带出用户信息
*/
tableId: {
type: String,
required: true
}
},
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.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.tableId) {
self.detail = item
}
})
})
}
}
}
</script>
<style scoped>
.title{
text-align: center;
}
</style>