From 0b9b621d3d60d29b1590bf17cb402b387e90444f Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 13:07:29 +0800
Subject: [PATCH 1/4] feature:allow set vars filter

---
 src/components/VarArgs/index.vue | 121 +++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/components/VarArgs/index.vue

diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
new file mode 100644
index 0000000000..9e36fbab8c
--- /dev/null
+++ b/src/components/VarArgs/index.vue
@@ -0,0 +1,121 @@
+<!--
+#
+# 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"
+          filterable
+          allow-create
+          default-first-option
+          :placeholder="$t('schema.route.inputMultipleValues')"
+        >
+          <el-option
+            v-for="name in varNames"
+            :key="name"
+            :label="name"
+            :value="name"
+          />
+        </el-select>
+        <el-select
+          v-model="item.operator"
+          placeholder="Operator"
+        >
+          <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=""
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="danger"
+          @click.prevent="removeVar(item)"
+        >
+          {{ $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 } from 'vue-property-decorator'
+
+@Component({
+  name: 'VarArgs'
+})
+export default class extends Vue {
+  private isFullscreen = false;
+  private vars = [];
+  private varNames = ['arg_id', 'arg_name'];
+
+  private varOperator = ['==', '~=', '>', '<', '~~'];
+
+  @Watch('vars', { immediate: true, deep: true })
+  private onvarsChange() {
+    console.log(this.vars)
+    const val = this.vars.map(e => Object.values(e))
+    this.$emit('onChange', val)
+  }
+
+  private addVar() {
+    (this.vars as any).push({
+      name: null,
+      operator: null,
+      value: 0
+    })
+  }
+
+  private removeVar(item: any) {
+    this.$confirm(`Do you want to remove the var?`, 'Warning', {
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      type: 'warning'
+    })
+      .then(async() => {
+        const index = (this.vars as any).indexOf(item)
+        if (index !== -1) {
+          this.vars.splice(index, 1)
+        }
+      })
+      .catch(() => {})
+  }
+}
+</script>

From 5afc406849aa5d59b6342a4bc641c813f1b32bd6 Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 13:11:58 +0800
Subject: [PATCH 2/4] feature:allow set vars filter in router configuration
 page

---
 src/lang/en.ts                   |  1 +
 src/lang/zh.ts                   |  1 +
 src/views/schema/routes/edit.vue | 23 ++++++++++++++++++++++-
 vue.config.js                    |  2 +-
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 40157301ab..8a2f4c2c16 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 c594dda522..64164e1085 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 890f6760a2..8acefae0a9 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -194,6 +194,7 @@
           {{ $t('button.add_plugin') }}
         </el-button>
       </el-form-item>
+      <VarArgs @onChange="onVarArgsChange" />
 
       <el-form-item>
         <el-button
@@ -222,6 +223,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 +234,8 @@ import { TagsViewModule } from '@/store/modules/tags-view'
 @Component({
   name: 'RouterEdit',
   components: {
-    PluginDialog
+    PluginDialog,
+    VarArgs
   }
 })
 
@@ -245,6 +248,7 @@ export default class extends Vue {
     service_id: '',
     methods: [],
     plugins: {},
+    vars: [],
     desc: ''
   }
 
@@ -294,6 +298,7 @@ export default class extends Vue {
       service_id: '',
       methods: [],
       plugins: {},
+      vars: [],
       desc: ''
     }
   }
@@ -338,6 +343,7 @@ export default class extends Vue {
           service_id = '',
           methods = [],
           plugins = {},
+          vars = [],
           desc = ''
         }
       }
@@ -359,6 +365,7 @@ export default class extends Vue {
       service_id,
       methods,
       plugins,
+      vars,
       desc
     }
   }
@@ -476,6 +483,10 @@ export default class extends Vue {
         Vue.delete(this.form.plugins, name)
       }).catch(() => {})
   }
+
+  private onVarArgsChange(val: any) {
+    this.form.vars = val
+  }
 }
 </script>
 
@@ -497,5 +508,15 @@ export default class extends Vue {
       }
     }
   }
+  .var-item {
+    .el-form-item {
+      margin-bottom: 10px;
+      display: inline-block;
+      .el-form-item__label {}
+      .el-form-item__content {
+        margin-right: 10px;
+      }
+    }
+  }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index 5e6dad19b7..06f3289fc6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -28,7 +28,7 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     // https://cli.vuejs.org/zh/config/#devserver-proxy
-    proxy: 'http://127.0.0.1:9080/apisix/admin/'
+    proxy: 'http://192.168.10.152/apisix/admin/'
   },
   pluginOptions: {
     'style-resources-loader': {

From 1f8ab14eed03ddc116eb4ee1c36b2fe06e77a661 Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 15:39:35 +0800
Subject: [PATCH 3/4] feature:allow set vars filter in router configuration
 page

---
 src/components/VarArgs/index.vue | 39 +++++++++++++++++++-------------
 src/views/schema/routes/edit.vue |  5 +++-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
index 9e36fbab8c..23d2d3ce6d 100644
--- a/src/components/VarArgs/index.vue
+++ b/src/components/VarArgs/index.vue
@@ -28,10 +28,11 @@
       <el-form-item :prop="'var.' + index + '.ip'">
         <el-select
           v-model="item.name"
+          :placeholder="$t('schema.route.inputMultipleValues')"
           filterable
           allow-create
           default-first-option
-          :placeholder="$t('schema.route.inputMultipleValues')"
+          @change="onChange"
         >
           <el-option
             v-for="name in varNames"
@@ -43,6 +44,7 @@
         <el-select
           v-model="item.operator"
           placeholder="Operator"
+          @change="onChange"
         >
           <el-option
             v-for="operator in varOperator"
@@ -56,12 +58,13 @@
         <el-input
           v-model="item.value"
           placeholder=""
+          @input="onChange"
         />
       </el-form-item>
       <el-form-item>
         <el-button
           type="danger"
-          @click.prevent="removeVar(item)"
+          @click.prevent="removeVar(index)"
         >
           {{ $t("button.delete") }}
         </el-button>
@@ -76,44 +79,48 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator'
+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 vars = [];
-  private varNames = ['arg_id', 'arg_name'];
+  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 = ['==', '~=', '>', '<', '~~'];
 
-  @Watch('vars', { immediate: true, deep: true })
-  private onvarsChange() {
-    console.log(this.vars)
-    const val = this.vars.map(e => Object.values(e))
-    this.$emit('onChange', val)
+  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: 0
+      value: null
     })
+    this.onChange()
   }
 
-  private removeVar(item: any) {
+  private removeVar(index:number) {
     this.$confirm(`Do you want to remove the var?`, 'Warning', {
       confirmButtonText: 'Confirm',
       cancelButtonText: 'Cancel',
       type: 'warning'
     })
       .then(async() => {
-        const index = (this.vars as any).indexOf(item)
-        if (index !== -1) {
-          this.vars.splice(index, 1)
-        }
+        this.vars.splice(index, 1)
+        this.onChange()
       })
       .catch(() => {})
   }
diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue
index 8acefae0a9..a8797d66e1 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -194,7 +194,10 @@
           {{ $t('button.add_plugin') }}
         </el-button>
       </el-form-item>
-      <VarArgs @onChange="onVarArgsChange" />
+      <VarArgs
+        :p-vars.sync="form.vars"
+        @onChange="onVarArgsChange"
+      />
 
       <el-form-item>
         <el-button

From 1e4ad8fed70c004d41bad98afc6b51a69ab0bc14 Mon Sep 17 00:00:00 2001
From: dingchaofa <571797089@qq.com>
Date: Tue, 24 Mar 2020 15:56:55 +0800
Subject: [PATCH 4/4] fiexed some irregular style

---
 src/components/VarArgs/index.vue   | 2 +-
 src/views/schema/routes/edit.vue   | 1 -
 src/views/schema/upstream/edit.vue | 3 +--
 vue.config.js                      | 2 +-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/VarArgs/index.vue b/src/components/VarArgs/index.vue
index 23d2d3ce6d..1abcdecd8c 100644
--- a/src/components/VarArgs/index.vue
+++ b/src/components/VarArgs/index.vue
@@ -113,7 +113,7 @@ export default class extends Vue {
   }
 
   private removeVar(index:number) {
-    this.$confirm(`Do you want to remove the var?`, 'Warning', {
+    this.$confirm('Do you want to remove the var?', 'Warning', {
       confirmButtonText: 'Confirm',
       cancelButtonText: 'Cancel',
       type: 'warning'
diff --git a/src/views/schema/routes/edit.vue b/src/views/schema/routes/edit.vue
index a8797d66e1..84135c67b5 100644
--- a/src/views/schema/routes/edit.vue
+++ b/src/views/schema/routes/edit.vue
@@ -515,7 +515,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;
       }
diff --git a/src/views/schema/upstream/edit.vue b/src/views/schema/upstream/edit.vue
index 7994700922..445e42d032 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;
       }
diff --git a/vue.config.js b/vue.config.js
index 06f3289fc6..5e6dad19b7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -28,7 +28,7 @@ module.exports = {
   productionSourceMap: false,
   devServer: {
     // https://cli.vuejs.org/zh/config/#devserver-proxy
-    proxy: 'http://192.168.10.152/apisix/admin/'
+    proxy: 'http://127.0.0.1:9080/apisix/admin/'
   },
   pluginOptions: {
     'style-resources-loader': {