|
|
1
2
3
4
5
6
7
8
9
10
|
<template>
<a-drawer
:title="title"
:maskClosable="true"
width="45%"
placement="right"
v-if="visible"
:closable="true"
@close="handleCancel"
:visible="visible"
|
|
|
11
12
|
style="overflow: auto;padding-bottom: 53px;"
>
|
|
|
13
|
<a-form-model ref="form" :layout="layout" :label-col="labelCol" :wrapper-col="wrapperCol" :model="router">
|
|
|
14
15
|
<a-form-model-item :label="$t('monitor.routerId')">
<a-input v-model="router.routerId" :placeholder="$t('monitor.routerId')" />
|
|
|
16
|
</a-form-model-item>
|
|
|
17
18
|
<a-form-model-item :label="$t('monitor.routerName')">
<a-input v-model="router.name" :placeholder="$t('monitor.routerName')" />
|
|
|
19
|
</a-form-model-item>
|
|
|
20
21
|
<a-form-model-item :label="$t('monitor.routerURI')">
<a-input v-model="router.uri" :placeholder="$t('monitor.routerURI')" />
|
|
|
22
|
</a-form-model-item>
|
|
|
23
|
<a-form-model-item :label="$t('monitor.status')" prop="status">
|
|
|
24
|
<a-switch default-checked v-model="router.status" />
|
|
|
25
|
</a-form-model-item>
|
|
|
26
|
<a-form-model-item prop="predicates" :label="$t('monitor.routingCondition')">
|
|
|
27
|
<div v-for="(item, index) in router.predicates" :key="index">
|
|
|
28
|
<a-divider>{{ item.name }}
|
|
|
29
|
<a-icon type="delete" size="22" @click="removePredicate(router, index)" />
|
|
|
30
31
32
|
</a-divider>
<div>
<template v-for="(tag, index) in item.args">
|
|
|
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<a-input
v-if="index == currentTagIndex"
ref="input"
type="text"
size="small"
:style="{ width: '190px' }"
:value="tag"
@change="handleInputChange"
@blur="handleInputEditConfirm(item, tag, index)"
@keyup.enter="handleInputEditConfirm(item, tag, index)"
:key="index"
/>
<a-tag
v-else
:key="tag"
:closable="true"
@close="() => removeTag(item, tag)"
@click="editTag(tag, index)"
>
|
|
|
52
53
54
|
{{ tag }}
</a-tag>
</template>
|
|
|
55
56
57
58
59
60
61
62
63
64
65
66
|
<a-input
v-if="inputVisible && index == currentNameIndex"
ref="input"
type="text"
size="small"
:style="{ width: '100px' }"
:value="inputValue"
@change="handleInputChange"
@blur="handleInputConfirm(item)"
@keyup.enter="handleInputConfirm(item)"
/>
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput(item, index)">
|
|
|
67
|
<a-icon type="plus" /> {{ $t('button.search') }}{{ item.name }}
|
|
|
68
69
70
71
72
73
|
</a-tag>
</div>
</div>
<p class="btn" style="padding-top: 10px">
<a-dropdown>
<a-menu slot="overlay" @click="predicatesHandleMenuClick">
|
|
|
74
|
<a-menu-item :key="item" v-for="item in tagArray">{{ item }}</a-menu-item>
|
|
|
75
|
</a-menu>
|
|
|
76
|
<a-button type="dashed" style="margin-left: 8px;width:100%"> {{ $t('monitor.addRoutingCondition') }} <a-icon type="down" /> </a-button>
|
|
|
77
78
79
|
</a-dropdown>
</p>
</a-form-model-item>
|
|
|
80
|
<a-form-model-item prop="predicates" :label="$t('monitor.filter')">
|
|
|
81
|
<div v-for="(item, index) in router.filters" :key="index">
|
|
|
82
|
<a-divider>{{ item.name }}
|
|
|
83
|
<a-icon type="delete" size="22" @click="removeFilter(router, index)" />
|
|
|
84
85
|
</a-divider>
<div v-for="(tag, index) in item.args" :key="tag.key">
|
|
|
86
87
88
|
<a-input v-model="tag.key" placeholder="参数键" style="width: 45%; margin-right: 8px" />
<a-input v-model="tag.value" placeholder="参数值" style="width: 40%; margin-right: 8px" />
<a-icon class="dynamic-delete-button" type="minus-circle-o" @click="removeFilterParams(item, index)" />
|
|
|
89
90
|
</div>
<a-button type="dashed" style="margin-left:28%;width: 30%" size="small" @click="addFilterParams(item)">
|
|
|
91
|
<a-icon type="plus" /> {{ $t('monitor.addParameters') }} </a-button>
|
|
|
92
93
94
95
|
</div>
<p class="btn" style="padding-top: 10px">
<a-dropdown>
<a-menu slot="overlay" @click="filterHandleMenuClick">
|
|
|
96
|
<a-menu-item :key="item.key" :name="item.name" v-for="item in filterArray">{{ item.name }}</a-menu-item>
|
|
|
97
|
</a-menu>
|
|
|
98
|
<a-button type="dashed" style="margin-left: 8px;width:100%"> {{ $t('monitor.addFilter') }} <a-icon type="down" /> </a-button>
|
|
|
99
100
101
|
</a-dropdown>
</p>
</a-form-model-item>
|
|
|
102
|
<a-row :style="{ textAlign: 'right' }" class="drawer-bootom-button">
|
|
|
103
104
|
<a-button :style="{ marginRight: '8px' }" @click="handleCancel"> {{ $t('button.close') }} </a-button>
<a-button @click="handleSubmit" type="primary"> {{ $t('button.ok') }} </a-button>
|
|
|
105
106
107
108
109
|
</a-row>
</a-form-model>
</a-drawer>
</template>
<script>
|
|
|
110
|
import { postAction } from '@/api/manage'
|
|
|
111
|
import { translateResultMessage } from '@/api/api'
|
|
|
112
|
|
|
|
113
114
115
116
117
118
|
export default {
name: 'GateWayRouteModal',
components: {},
data() {
return {
layout: 'horizontal',
|
|
|
119
120
|
labelCol: { span: 3 },
wrapperCol: { span: 14 },
|
|
|
121
122
123
|
currentNameIndex: 0,
currentTagIndex: -1,
predicates: {},
|
|
|
124
|
filterArray: [
|
|
|
125
126
|
{ key: 0, name: this.$t('monitor.fusibleLink'), },
{ key: 1, name: this.$t('monitor.restrictionFilters'), }
|
|
|
127
|
],
|
|
|
128
129
130
131
132
133
134
135
|
tagArray: ['Path', 'Host', 'Cookie', 'Header', 'Method', 'Query', 'After', 'Before', 'Between', 'RemoteAddr'],
inputVisible: false,
inputValue: '',
url: {
update: '/sys/gatewayRoute/updateAll',
clear: '/sys/gatewayRoute/clearRedis'
},
router: this.getRouter(),
|
|
|
136
|
title: this.$t('monitor.routingEditor'),
|
|
|
137
138
139
140
141
142
|
visible: false,
loading: false
}
},
methods: {
getRouter() {
|
|
|
143
|
return {
|
|
|
144
145
146
147
148
|
routerId: '',
name: '',
uri: '',
predicates: [],
filters: []
|
|
|
149
150
|
}
},
|
|
|
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
show(router) {
if (router) {
router.status = Boolean(router.status)
this.router = router
} else {
this.router = this.getRouter()
this.inputValue = ''
}
this.visible = true
this.currentTagIndex = -1
this.currentNameIndex = -1
},
close() {
this.reset()
this.$emit('close')
this.$refs['form'].resetFields()
this.visible = false
},
//删除路由条件配置项
removeTag(item, removedTag) {
const tags = item.args.filter(tag => tag !== removedTag)
item.args = tags
},
//添加路由选项
predicatesHandleMenuClick(e) {
this.router.predicates.push({
args: [],
name: e.key
})
},
editTag(tag, index) {
this.currentTagIndex = index
},
//显示输入框
showInput(item, index) {
this.inputVisible = true
this.currentNameIndex = index
},
//路由选项输入框失去焦点事件
handleInputChange(e) {
this.inputValue = e.target.value
},
//删除路由条件
removePredicate(item, index) {
item.predicates.splice(index, 1)
},
//删除过滤器参数
removeFilterParams(item, index) {
item.args.splice(index, 1)
},
//删除过滤器
removeFilter(item, index) {
item.filters.splice(index, 1)
},
//添加过滤器参数
addFilterParams(item) {
item.args.push({
key: 'key' + item.args.length + 1,
value: ''
})
},
//过滤器添加事件
filterHandleMenuClick(e) {
if (e.key == 0) {
this.router.filters.push({
|
|
|
216
217
218
219
220
221
222
223
224
225
|
args: [
{
key: 'name',
value: 'default'
},
{
key: 'fallbackUri',
value: 'forward:/fallback'
}
],
|
|
|
226
227
|
name: 'Hystrix',
title: this.filterArray[0].name
|
|
|
228
|
})
|
|
|
229
230
231
|
}
if (e.key == 1) {
this.router.filters.push({
|
|
|
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
|
args: [
{
key: 'key-resolver',
value: '#{@ipKeyResolver}'
},
{
key: 'redis-rate-limiter.replenishRate',
value: 20
},
{
key: 'redis-rate-limiter.burstCapacity',
value: 20
}
],
name: 'RequestRateLimiter',
|
|
|
247
|
title: this.filterArray[1].name
|
|
|
248
|
})
|
|
|
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
|
}
},
//输入框确认
handleInputConfirm(item) {
const inputValue = this.inputValue
let tags = item.args
if (inputValue && tags.indexOf(inputValue) === -1) {
item.args = [...tags, inputValue]
}
console.log(tags)
Object.assign(this, {
tags,
inputVisible: false,
inputValue: ''
})
this.currentTagIndex = -1
},
//输入框确认
handleInputEditConfirm(item, tag, index) {
if (this.inputValue) {
|
|
|
269
|
const inputValue = this.inputValue
|
|
|
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
|
item.args[index] = inputValue
}
this.currentTagIndex = -1
},
reset() {
this.expandedKeysss = []
this.checkedKeys = []
this.defaultCheckedKeys = []
this.loading = false
},
//关闭弹窗
handleCancel() {
this.close()
},
//提交路由
handleSubmit() {
|
|
|
286
|
let { predicates, filters, ...other } = this.router
|
|
|
287
288
289
290
291
292
293
294
295
|
let router = other
router.predicates = JSON.stringify(this.router.predicates)
router.filters = JSON.stringify(this.router.filters)
postAction(this.url.update, {
router
}).then(res => {
if (res.success) {
this.close()
this.$emit('ok')
|
|
|
296
|
this.$message.success(translateResultMessage(res, res.message))
|
|
|
297
|
} else {
|
|
|
298
|
this.$message.error(translateResultMessage(res, res.message))
|
|
|
299
300
|
}
})
|
|
|
301
302
|
}
}
|
|
|
303
|
}
|
|
|
304
305
|
</script>
<style lang="less" scoped>
|
|
|
306
307
308
309
310
311
312
313
314
315
316
|
.drawer-bootom-button {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
|
|
|
317
|
</style>
|
