Skip to content

Commit df4c6be

Browse files
superDCFsuperDCF
authored
feature:allow set vars filter in router configuration page (#160)
* feature:allow set vars filter * feature:allow set vars filter in router configuration page * feature:allow set vars filter in router configuration page * fiexed some irregular style
1 parent b3045dd commit df4c6be

File tree

5 files changed

+155
-3
lines changed

5 files changed

+155
-3
lines changed

‎src/components/VarArgs/index.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!--
2+
#
3+
# Licensed to the Apache Software Foundation (ASF) under one or more
4+
# contributor license agreements. See the NOTICE file distributed with
5+
# this work for additional information regarding copyright ownership.
6+
# The ASF licenses this file to You under the Apache License, Version 2.0
7+
# (the "License"); you may not use this file except in compliance with
8+
# the License. You may obtain a copy of the License at
9+
#
10+
# http://www.apache.org/licenses/LICENSE-2.0
11+
#
12+
# Unless required by applicable law or agreed to in writing, software
13+
# distributed under the License is distributed on an "AS IS" BASIS,
14+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
# See the License for the specific language governing permissions and
16+
# limitations under the License.
17+
#
18+
-->
19+
20+
<template>
21+
<el-form>
22+
<el-form-item
23+
v-for="(item, index) in vars"
24+
:key="index"
25+
:label="'Var' + (index + 1)"
26+
class="var-item"
27+
>
28+
<el-form-item :prop="'var.' + index + '.ip'">
29+
<el-select
30+
v-model="item.name"
31+
:placeholder="$t('schema.route.inputMultipleValues')"
32+
filterable
33+
allow-create
34+
default-first-option
35+
@change="onChange"
36+
>
37+
<el-option
38+
v-for="name in varNames"
39+
:key="name"
40+
:label="name"
41+
:value="name"
42+
/>
43+
</el-select>
44+
<el-select
45+
v-model="item.operator"
46+
placeholder="Operator"
47+
@change="onChange"
48+
>
49+
<el-option
50+
v-for="operator in varOperator"
51+
:key="operator"
52+
:label="operator"
53+
:value="operator"
54+
/>
55+
</el-select>
56+
</el-form-item>
57+
<el-form-item>
58+
<el-input
59+
v-model="item.value"
60+
placeholder=""
61+
@input="onChange"
62+
/>
63+
</el-form-item>
64+
<el-form-item>
65+
<el-button
66+
type="danger"
67+
@click.prevent="removeVar(index)"
68+
>
69+
{{ $t("button.delete") }}
70+
</el-button>
71+
</el-form-item>
72+
</el-form-item>
73+
<el-form-item>
74+
<el-button @click="addVar">
75+
{{ $t("button.add_var") }}
76+
</el-button>
77+
</el-form-item>
78+
</el-form>
79+
</template>
80+
81+
<script lang="ts">
82+
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
83+
84+
@Component({
85+
name: 'VarArgs'
86+
})
87+
export default class extends Vue {
88+
@Prop({ default: () => [] }) private pVars!: any
89+
private isFullscreen = false;
90+
private get vars() {
91+
const _vars = this.pVars.map((arr:Array<any>) => {
92+
const [name, operator, value] = arr
93+
return { name, operator, value }
94+
})
95+
return _vars
96+
}
97+
private varNames = ['remote_addr', 'host', 'uri', 'http_user_agent', 'http_referer', 'http_cookie', 'http_accept_language', 'request_uri', 'query_string', 'remote_port', 'hostname', 'arg_id'];
98+
99+
private varOperator = ['==', '~=', '>', '<', '~~'];
100+
101+
private onChange() {
102+
const val = this.vars.map((e:any) => Object.values(e))
103+
this.$emit('update:pVars', val)
104+
}
105+
106+
private addVar() {
107+
(this.vars as any).push({
108+
name: null,
109+
operator: null,
110+
value: null
111+
})
112+
this.onChange()
113+
}
114+
115+
private removeVar(index:number) {
116+
this.$confirm('Do you want to remove the var?', 'Warning', {
117+
confirmButtonText: 'Confirm',
118+
cancelButtonText: 'Cancel',
119+
type: 'warning'
120+
})
121+
.then(async() => {
122+
this.vars.splice(index, 1)
123+
this.onChange()
124+
})
125+
.catch(() => {})
126+
}
127+
}
128+
</script>

‎src/lang/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export default {
6767
cancel: 'Cancel',
6868
add_plugin: 'Add Plugin',
6969
add_node: 'Add Node',
70+
add_var: 'Add Var',
7071
delete: 'Delete',
7172
addValue: 'Add Value'
7273
},

‎src/lang/zh.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ export default {
7575
cancel: '取消',
7676
add_plugin: '添加 Plugin',
7777
add_node: '添加 Node',
78+
add_var: '添加 Var',
7879
delete: '删除',
7980
addValue: '添加值'
8081
},

‎src/views/schema/routes/edit.vue‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,10 @@
194194
{{ $t('button.add_plugin') }}
195195
</el-button>
196196
</el-form-item>
197+
<VarArgs
198+
:p-vars.sync="form.vars"
199+
@onChange="onVarArgsChange"
200+
/>
197201

198202
<el-form-item>
199203
<el-button
@@ -222,6 +226,7 @@ import { Component, Vue } from 'vue-property-decorator'
222226
import { Form } from 'element-ui'
223227
224228
import PluginDialog from '@/components/PluginDialog/index.vue'
229+
import VarArgs from '@/components/VarArgs/index.vue'
225230
226231
import { getRouter, createRouter, updateRouter } from '@/api/schema/routes'
227232
import { getPluginList } from '@/api/schema/plugins'
@@ -232,7 +237,8 @@ import { TagsViewModule } from '@/store/modules/tags-view'
232237
@Component({
233238
name: 'RouterEdit',
234239
components: {
235-
PluginDialog
240+
PluginDialog,
241+
VarArgs
236242
}
237243
})
238244
@@ -245,6 +251,7 @@ export default class extends Vue {
245251
service_id: '',
246252
methods: [],
247253
plugins: {},
254+
vars: [],
248255
desc: ''
249256
}
250257
@@ -294,6 +301,7 @@ export default class extends Vue {
294301
service_id: '',
295302
methods: [],
296303
plugins: {},
304+
vars: [],
297305
desc: ''
298306
}
299307
}
@@ -338,6 +346,7 @@ export default class extends Vue {
338346
service_id = '',
339347
methods = [],
340348
plugins = {},
349+
vars = [],
341350
desc = ''
342351
}
343352
}
@@ -359,6 +368,7 @@ export default class extends Vue {
359368
service_id,
360369
methods,
361370
plugins,
371+
vars,
362372
desc
363373
}
364374
}
@@ -476,6 +486,10 @@ export default class extends Vue {
476486
Vue.delete(this.form.plugins, name)
477487
}).catch(() => {})
478488
}
489+
490+
private onVarArgsChange(val: any) {
491+
this.form.vars = val
492+
}
479493
}
480494
</script>
481495

@@ -497,5 +511,14 @@ export default class extends Vue {
497511
}
498512
}
499513
}
514+
.var-item {
515+
.el-form-item {
516+
margin-bottom: 10px;
517+
display: inline-block;
518+
.el-form-item__content {
519+
margin-right: 10px;
520+
}
521+
}
522+
}
500523
}
501524
</style>

‎src/views/schema/upstream/edit.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@ export default class extends Vue {
389389
}
390390
391391
private removeNode(item: any) {
392-
this.$confirm(`Do you want to remove the node?`, 'Warning', {
392+
this.$confirm('Do you want to remove the node?', 'Warning', {
393393
confirmButtonText: 'Confirm',
394394
cancelButtonText: 'Cancel',
395395
type: 'warning'
@@ -425,7 +425,6 @@ export default class extends Vue {
425425
.el-form-item {
426426
margin-bottom: 10px;
427427
display: inline-block;
428-
.el-form-item__label {}
429428
.el-form-item__content {
430429
margin-right: 10px;
431430
}

0 commit comments

Comments
 (0)