|  | @@ -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;
 |