This is an automated email from the ASF dual-hosted git repository. juzhiyuan pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push: new df4c6be feature:allow set vars filter in router configuration page (#160) df4c6be is described below commit df4c6bea1717b3c6eba07eeb7e4b5d58f22020d8 Author: chaofa <571797...@qq.com> AuthorDate: Tue Mar 24 16:12:30 2020 +0800 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 --- src/components/VarArgs/index.vue | 128 +++++++++++++++++++++++++++++++++++++ src/lang/en.ts | 1 + src/lang/zh.ts | 1 + src/views/schema/routes/edit.vue | 25 +++++++- src/views/schema/upstream/edit.vue | 3 +- 5 files changed, 155 insertions(+), 3 deletions(-) diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue new file mode 100644 index 0000000..1abcdec --- /dev/null +++ b/src/components/VarArgs/index.vue @@ -0,0 +1,128 @@ +<!-- +# +# Licensed to the Apache Software Foundation (ASF) under one or more +# contributor license agreements. See the NOTICE file distributed with +# this work for additional information regarding copyright ownership. +# The ASF licenses this file to You under the Apache License, Version 2.0 +# (the "License"); you may not use this file except in compliance with +# the License. You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +# +--> + +<template> + <el-form> + <el-form-item + v-for="(item, index) in vars" + :key="index" + :label="'Var' + (index + 1)" + class="var-item" + > + <el-form-item :prop="'var.' + index + '.ip'"> + <el-select + v-model="item.name" + :placeholder="$t('schema.route.inputMultipleValues')" + filterable + allow-create + default-first-option + @change="onChange" + > + <el-option + v-for="name in varNames" + :key="name" + :label="name" + :value="name" + /> + </el-select> + <el-select + v-model="item.operator" + placeholder="Operator" + @change="onChange" + > + <el-option + v-for="operator in varOperator" + :key="operator" + :label="operator" + :value="operator" + /> + </el-select> + </el-form-item> + <el-form-item> + <el-input + v-model="item.value" + placeholder="" + @input="onChange" + /> + </el-form-item> + <el-form-item> + <el-button + type="danger" + @click.prevent="removeVar(index)" + > + {{ $t("button.delete") }} + </el-button> + </el-form-item> + </el-form-item> + <el-form-item> + <el-button @click="addVar"> + {{ $t("button.add_var") }} + </el-button> + </el-form-item> + </el-form> +</template> + +<script lang="ts"> +import { Component, Vue, Watch, Prop } from 'vue-property-decorator' + +@Component({ + name: 'VarArgs' +}) +export default class extends Vue { + @Prop({ default: () => [] }) private pVars!: any + private isFullscreen = false; + private get vars() { + const _vars = this.pVars.map((arr:Array<any>) => { + const [name, operator, value] = arr + return { name, operator, value } + }) + return _vars + } + 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']; + + private varOperator = ['==', '~=', '>', '<', '~~']; + + private onChange() { + const val = this.vars.map((e:any) => Object.values(e)) + this.$emit('update:pVars', val) + } + + private addVar() { + (this.vars as any).push({ + name: null, + operator: null, + value: null + }) + this.onChange() + } + + private removeVar(index:number) { + this.$confirm('Do you want to remove the var?', 'Warning', { + confirmButtonText: 'Confirm', + cancelButtonText: 'Cancel', + type: 'warning' + }) + .then(async() => { + this.vars.splice(index, 1) + this.onChange() + }) + .catch(() => {}) + } +} +</script> diff --git a/src/lang/en.ts b/src/lang/en.ts index 4015730..8a2f4c2 100644 --- a/src/lang/en.ts +++ b/src/lang/en.ts @@ -67,6 +67,7 @@ export default { cancel: 'Cancel', add_plugin: 'Add Plugin', add_node: 'Add Node', + add_var: 'Add Var', delete: 'Delete', addValue: 'Add Value' }, diff --git a/src/lang/zh.ts b/src/lang/zh.ts index c594dda..64164e1 100644 --- a/src/lang/zh.ts +++ b/src/lang/zh.ts @@ -75,6 +75,7 @@ export default { cancel: '取消', add_plugin: '添加 Plugin', add_node: '添加 Node', + add_var: '添加 Var', delete: '删除', addValue: '添加值' }, diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue index 890f676..84135c6 100644 --- a/src/views/schema/routes/edit.vue +++ b/src/views/schema/routes/edit.vue @@ -194,6 +194,10 @@ {{ $t('button.add_plugin') }} </el-button> </el-form-item> + <VarArgs + :p-vars.sync="form.vars" + @onChange="onVarArgsChange" + /> <el-form-item> <el-button @@ -222,6 +226,7 @@ import { Component, Vue } from 'vue-property-decorator' import { Form } from 'element-ui' import PluginDialog from '@/components/PluginDialog/index.vue' +import VarArgs from '@/components/VarArgs/index.vue' import { getRouter, createRouter, updateRouter } from '@/api/schema/routes' import { getPluginList } from '@/api/schema/plugins' @@ -232,7 +237,8 @@ import { TagsViewModule } from '@/store/modules/tags-view' @Component({ name: 'RouterEdit', components: { - PluginDialog + PluginDialog, + VarArgs } }) @@ -245,6 +251,7 @@ export default class extends Vue { service_id: '', methods: [], plugins: {}, + vars: [], desc: '' } @@ -294,6 +301,7 @@ export default class extends Vue { service_id: '', methods: [], plugins: {}, + vars: [], desc: '' } } @@ -338,6 +346,7 @@ export default class extends Vue { service_id = '', methods = [], plugins = {}, + vars = [], desc = '' } } @@ -359,6 +368,7 @@ export default class extends Vue { service_id, methods, plugins, + vars, desc } } @@ -476,6 +486,10 @@ export default class extends Vue { Vue.delete(this.form.plugins, name) }).catch(() => {}) } + + private onVarArgsChange(val: any) { + this.form.vars = val + } } </script> @@ -497,5 +511,14 @@ export default class extends Vue { } } } + .var-item { + .el-form-item { + margin-bottom: 10px; + display: inline-block; + .el-form-item__content { + margin-right: 10px; + } + } + } } </style> diff --git a/src/views/schema/upstream/edit.vue b/src/views/schema/upstream/edit.vue index 7994700..445e42d 100644 --- a/src/views/schema/upstream/edit.vue +++ b/src/views/schema/upstream/edit.vue @@ -389,7 +389,7 @@ export default class extends Vue { } private removeNode(item: any) { - this.$confirm(`Do you want to remove the node?`, 'Warning', { + this.$confirm('Do you want to remove the node?', 'Warning', { confirmButtonText: 'Confirm', cancelButtonText: 'Cancel', type: 'warning' @@ -425,7 +425,6 @@ export default class extends Vue { .el-form-item { margin-bottom: 10px; display: inline-block; - .el-form-item__label {} .el-form-item__content { margin-right: 10px; }