4
4
<div class =" tab-card-t" >
5
5
<div class =" tab-card-t-l" >
6
6
<SvgIcon icon-class =" biao" style =" fontSize : 16px ;" />
7
- <span style =" marginLeft : 8px ; fontSize : 16px " >{{ model.name }} </span >
7
+ <span style =" marginLeft : 8px ; fontSize : 16px " v-html = " model.name " > </span >
8
8
</div >
9
9
<div class =" tab-card-t-r" >
10
10
<!-- <span>读取次数:{{ model.readCount }}次</span> -->
11
+ <div >负责人:<span v-html =" model.owner" class =" content-html" ></span ></div >
12
+ <div :title =" model.createTime" >创建时间:{{ model.createTime }}</div >
11
13
</div >
14
+
12
15
</div >
13
16
14
17
<!-- bottom -->
15
18
<div class =" tab-card-b" >
16
- <div :title =" model.owner" >负责人:{{ model.owner }}</div >
17
- <div :title =" model.createTime" >创建时间:{{ model.createTime }}</div >
18
- <div :title =" model.dbName" >数据库:{{ model.dbName }}</div >
19
- <div :title =" subject" >主题域:{{ subject }}</div >
20
- <div :title =" layer" >分层:{{ layer }}</div >
19
+ <div :title =" model.dbName" >数据库:<span v-html =" model.dbName" class =" content-html" ></span ></div >
20
+ <div :title =" subject" >主题域:<span v-html =" subject" class =" content-html" ></span ></div >
21
+ <div :title =" layer" >分层:<span v-html =" layer" class =" content-html" ></span ></div >
22
+ </div >
23
+
24
+ <div class =" tab-card-b" >
25
+ <div v-if =" !model.comment" >
26
+ <span >描述:-</span >
27
+ </div >
28
+ <div v-else >
29
+ 描述:<span v-html =" model.comment" class =" content-html" ></span >
30
+ </div >
31
+ </div >
32
+
33
+ <div class =" tab-card-b" style =" width : 100% " >
34
+ <div v-if =" model.labels.length > 0" >
35
+ <span >标签:</span >
36
+ <span class =" tab-card-b-tag content-html" v-for =" (label, idx) in model.labels" :key =" idx" v-html =" label" ></span >
37
+ </div >
38
+ <div v-else >
39
+ <span >标签:-</span >
40
+ </div >
41
+ </div >
42
+
43
+ <div class =" tab-card-b" v-if =" model.columns && model.columns.length > 0" >
44
+ <div class =" tab-card-b-field" style =" width : 100% " >
45
+ <span >相关字段:</span >
46
+ <span
47
+ v-for =" (item, idx) in model.columns"
48
+ :key =" idx"
49
+ v-html =" idx + 1 < model.columns.length ? item+'/' : item"
50
+ class =" content-html" ></span >
51
+ </div >
21
52
</div >
22
53
</div >
23
54
</template >
24
55
25
56
<script >
57
+ import Tag from " ../../../../../components/tag/index.vue" ;
58
+ import { EventBus } from " ../../../module/common/eventBus/event-bus" ;
26
59
export default {
27
60
name: " tabCard" ,
28
61
props: {
29
62
model: {
30
63
type: Object ,
31
64
default: null
32
- }
65
+ },
33
66
},
34
67
data () {
35
68
return {
36
- modal: []
37
- };
69
+ modal: [],
70
+ query: ' '
71
+ }
72
+ },
73
+ mounted () {
74
+ EventBus .$on (" onQueryForHighLight" , query => {
75
+ this .query = query
76
+ });
77
+ },
78
+ destroyed () {
79
+ EventBus .$off (" onQueryForHighLight" )
38
80
},
39
81
methods: {
40
82
onChoose () {
41
83
this .$emit (" on-choose" , this .model );
42
- }
43
- },
44
- computed: {
45
- subject : function () {
46
- let classifications = this .model .classifications ;
47
- let subject = " " ;
48
- if (classifications && classifications .length ) {
49
- classifications .forEach (classification => {
50
- if (
51
- classification .superTypeNames &&
52
- classification .superTypeNames .length
53
- ) {
54
- if (classification .superTypeNames [0 ] === " subject" ) {
55
- subject = classification .typeName ;
56
- }
57
- }
58
- });
59
84
}
60
- return subject;
61
85
},
62
- layer : function () {
63
- let classifications = this .model .classifications ;
64
- let layer = " " ;
65
- if (classifications && classifications .length ) {
66
- classifications .forEach (classification => {
67
- if (
68
- classification .superTypeNames &&
69
- classification .superTypeNames .length
70
- ) {
71
- if (
72
- classification .superTypeNames [0 ] === " layer" ||
73
- classification .superTypeNames [0 ] === " layer_system"
74
- ) {
75
- layer = classification .typeName ;
86
+ computed: {
87
+ subject : function () {
88
+ let classifications = this .model .classifications ;
89
+ let subject = " " ;
90
+ if (classifications && classifications .length ) {
91
+ classifications .forEach (classification => {
92
+ if (classification .superTypeNames &&
93
+ classification .superTypeNames .length ) {
94
+ if (classification .superTypeNames [0 ] === " subject" ) {
95
+ subject = classification .typeName ;
96
+ }
76
97
}
77
- }
78
- });
98
+ });
99
+ }
100
+ if ( this .query ) {
101
+ let reg = new RegExp (this .query , ' g' )
102
+ let _query = ` <span>${ this .query } </span>`
103
+ subject = subject .replace (reg, _query)
104
+ }
105
+ return subject
106
+ },
107
+ layer : function () {
108
+ let classifications = this .model .classifications ;
109
+ let layer = " " ;
110
+ if (classifications && classifications .length ) {
111
+ classifications .forEach (classification => {
112
+ if (classification .superTypeNames &&
113
+ classification .superTypeNames .length ) {
114
+ if (classification .superTypeNames [0 ] === " layer" ||
115
+ classification .superTypeNames [0 ] === " layer_system" ) {
116
+ layer = classification .typeName ;
117
+ }
118
+ }
119
+ });
120
+ }
121
+ if ( this .query ) {
122
+ let reg = new RegExp (this .query , ' g' )
123
+ let _query = ` <span>${ this .query } </span>`
124
+ layer = layer .replace (reg, _query)
125
+ }
126
+ return layer;
79
127
}
80
- return layer;
81
- }
82
- }
128
+ },
129
+ components: { Tag }
83
130
};
84
131
</script >
85
132
@@ -122,6 +169,9 @@ export default {
122
169
@include font-color (rgba (0 , 0 , 0 , 0.85 ), $dark-text-color );
123
170
text-align : left ;
124
171
line-height : 22px ;
172
+ display : flex ;
173
+ flex : 1 ;
174
+ justify-content : space-between ;
125
175
}
126
176
}
127
177
.tab-card-b {
@@ -141,6 +191,30 @@ export default {
141
191
@include font-color (rgba (0 , 0 , 0 , 0.65 ), $dark-text-color );
142
192
display : inline-block ;
143
193
}
194
+
195
+ & -field {
196
+ height : 40px ;
197
+ line-height : 40px ;
198
+ @include bg-color (#F4F7FB , $dark-border-color-base );
199
+ padding-left : 12px ;
200
+ font-family : PingFangSC- Regular;
201
+ font-size : 14px ;
202
+ text-align : left ;
203
+ font-weight : 400 ;
204
+ }
205
+
206
+ & -tag {
207
+ background : rgba (0 ,0 ,0 ,0.04 );
208
+ border : 1px solid #DEE4EC ;
209
+ border-radius : 2px ;
210
+ padding : 4px 8px ;
211
+ }
212
+ }
213
+ }
214
+ .content-html {
215
+ /deep / span {
216
+ color : #3495F7 ;
144
217
}
145
218
}
219
+
146
220
</style >
0 commit comments