添加首页跳转默认选择条件

src/components/filter-search/index.vue

@@ -1,13 +1,44 @@
 <template>
-  <div class="filter-search" v-if="show">
-    <img src="./icon.svg"/>
-    <span>{{desced}}</span>
-    <i class="el-icon-circle-close" @click="close"/>
+  <div class="container">
+    <el-tag
+      class="filter-search"
+      v-for="item in activeItems"
+      :key="item.key"
+      @click="toggleItem(item)"
+      :effect="isActive(item) ? 'dark' : 'plain'">
+      {{desced(item)}}
+    </el-tag>
+    <!-- <div
+      class="filter-search"
+      :class="{active: isActive(item)}" v-for="item in activeItems" :key="item.key"
+      @click="toggleItem(item)"
+    >
+      <span>{{desced(item)}}</span>
+    </div> -->
   </div>
 </template>
 <script>
 import { errorType } from '@/views/main/constant'
 import cleanDeep from 'clean-deep'
+
+const typesByUrl = {}
+
+for (const key in errorType) {
+  if (Object.hasOwnProperty.call(errorType, key)) {
+    const item = errorType[key];
+    if (!typesByUrl[item.url]) {
+      typesByUrl[item.url] = []
+    }
+
+    typesByUrl[item.url].push({
+      ...item,
+      key
+    })
+  }
+}
+
+console.log(typesByUrl)
+
 export default {
   name: 'filter-search',
   props: {
@@ -29,10 +60,6 @@ export default {
     },
   },
   computed: {
-    desced() {
-      const { name } = errorType[this.$route.query.filter_type] || {}
-      return name ? `仅显示: ${name}` : this.desc
-    },
     hasSearch() {
       return this.$route.query[this.searchKey]
     },
@@ -46,8 +73,36 @@ export default {
     show() {
       return this.hasSearch || this.hasForm
     },
+    activeItems() {
+      return typesByUrl[this.$route.path]
+    }
+  },
+  mounted() {
+    console.log(this.activeItems)
   },
   methods: {
+    desced(item) {
+      return item.name ? `仅显示: ${item.name}` : this.desc
+    },
+    isActive(item) {
+      return item.key === this.$route.query.filter_type
+    },
+    toggleItem(item) {
+      if (this.isActive(item)) {
+        this.close()
+      } else {
+        this.$router.replace({
+          path: item.url,
+          query: {
+            ...item.query,
+            filter_type: item.key,
+            [item.resultKey]: item.resultKey ? (item.result || []).join(',') : undefined
+          }
+        })
+        this.$emit('setTimeForSearch')
+        this.$emit('reload', true)
+      }
+    },
     close() {
       const keys = {}
       for (const item of [...this.keys, ...this.moreKeys]) {
@@ -67,13 +122,17 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.container{
+  display: flex;
+}
   .filter-search{
-    font-size: 14px;
     margin-left: 10px;
     display: flex;
     align-items: center;
     cursor: pointer;
-    color: #e6a23c;
+    &.active{
+      color: #e6a23c;
+    }
     >img{
       width: 20px;
       height: auto;

src/views/teamDetail/teamCourseList.vue

@@ -6,6 +6,7 @@
       <filter-search
         ref="filterSearch"
         @reload="reloadSearch"
+        @setTimeForSearch="setTimeForSearch"
         :keys="['searchType']"
         :moreKeys="['start', 'end', 'organId']"
       />
@@ -783,11 +784,21 @@ export default {
     init() {
       this.getList();
     },
+    setTimeForSearch() {
+      const { query } = this.$route;
+      if (query.start || query.end) {
+        this.searchForm.timer = [query.start, query.end];
+      } else {
+        this.searchForm.timer = []
+      }
+    },
     permission(str, parent) {
       return permission(str, parent);
     },
-    reloadSearch() {
-      this.searchForm.timer = [nowTime, nowTime];
+    reloadSearch(notSetTime) {
+      if (!notSetTime) {
+        this.searchForm.timer = [nowTime, nowTime];
+      }
       this.getList();
     },
     async removeCourse(row) {