添加正则过滤器，关键词过滤器

web/src/components/KeywordFilter.vue

@@ -4,7 +4,7 @@
       <v-icon left color="primary">filter_list</v-icon>
       关键词过滤
       <v-spacer></v-spacer>
-      <v-btn icon>
+      <v-btn icon @click="$emit('deleteProcess', idx)">
         <v-icon color="error">mdi-delete</v-icon>
       </v-btn>
       <v-dialog>
@@ -24,14 +24,14 @@
       </v-dialog>
     </v-card-title>
     <v-card-text>
-      模式
+      工作模式
       <v-radio-group v-model="mode">
         <v-row>
           <v-col>
-            <v-radio label="保留" value="IN"/>
+            <v-radio label="保留模式" value="IN"/>
           </v-col>
           <v-col>
-            <v-radio label="过滤" value="OUT"/>
+            <v-radio label="过滤模式" value="OUT"/>
           </v-col>
         </v-row>
       </v-radio-group>
@@ -61,8 +61,10 @@
 
 <script>
 export default {
+  props: ['args'],
   data: function () {
     return {
+      idx: this.$vnode.key,
       mode: "IN",
       form: {
         keyword: ""
@@ -82,6 +84,25 @@ export default {
     remove(idx) {
       this.keywords.splice(idx, 1);
     }
+  },
+  created() {
+    if (this.args) {
+      this.keywords = this.args.keywords || [];
+      if (this.args.keep) this.mode = this.args.keep ? "IN" : "OUT";
+      else this.mode = "IN";
+    }
+  },
+  watch: {
+    keywords() {
+      this.$emit("dataChanged", {
+        idx: this.idx,
+        type: "Keyword Filter",
+        args: {
+          keywords: this.keywords,
+          keep: this.mode === 'IN'
+        }
+      })
+    }
   }
 }
 </script>

web/src/components/RegexFilter.vue

@@ -4,7 +4,7 @@
       <v-icon left color="primary">code</v-icon>
       正则过滤
       <v-spacer></v-spacer>
-      <v-btn icon>
+      <v-btn icon @click="$emit('deleteProcess', idx)">
         <v-icon color="error">mdi-delete</v-icon>
       </v-btn>
       <v-dialog>
@@ -28,14 +28,14 @@
       </v-dialog>
     </v-card-title>
     <v-card-text>
-      模式
+      工作模式
       <v-radio-group v-model="mode">
         <v-row>
           <v-col>
-            <v-radio label="保留" value="IN"/>
+            <v-radio label="保留模式" value="IN"/>
           </v-col>
           <v-col>
-            <v-radio label="过滤" value="OUT"/>
+            <v-radio label="过滤模式" value="OUT"/>
           </v-col>
         </v-row>
       </v-radio-group>
@@ -65,13 +65,15 @@
 
 <script>
 export default {
+  props: ['args'],
   data: function () {
     return {
       mode: "IN",
       form: {
         regex: ""
       },
-      regexps: []
+      regexps: [],
+      idx: this.$vnode.key,
     }
   },
   methods: {
@@ -86,6 +88,25 @@ export default {
     remove(idx) {
       this.regexps.splice(idx, 1);
     }
+  },
+  watch: {
+    regexps() {
+      this.$emit("dataChanged", {
+        idx: this.idx,
+        type: "Regex Filter",
+        args: {
+          regex: this.regexps,
+          keep: this.mode === 'IN'
+        }
+      })
+    }
+  },
+  created() {
+    if (this.args) {
+      this.regexps = this.args.regex || [];
+      if (this.args.keep) this.mode = this.args.keep ? "IN" : "OUT";
+      else this.mode = "IN";
+    }
   }
 }
 </script>

web/src/components/RegionFilter.vue

@@ -18,7 +18,7 @@
             区域过滤器
           </v-card-title>
           <v-card-text>
-            根据区域过滤节点，至少需要保留一个区域！
+            根据区域过滤节点，至少需要保留一个区域！选中的区域会被保留。
           </v-card-text>
         </v-card>
       </v-dialog>

web/src/components/TypeFilter.vue

@@ -18,7 +18,7 @@
             节点类型过滤器
           </v-card-title>
           <v-card-text>
-            根据节点类型过滤节点，至少需要保留一种类型！
+            根据节点类型过滤节点，至少需要保留一种类型！选中的类型会被保留。
           </v-card-text>
         </v-card>
       </v-dialog>