dy-admin-manager/src/components/filter-search/index.vue

<template>
  <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
    })
  }
}

//  (typesByUrl)

export default {
  name: 'filter-search',
  props: {
    desc: {
      type: String,
      default: '已筛选部分数据'
    },
    searchKey: {
      type: String,
      default: 'search'
    },
    keys: {
      type: Array,
      default: () => []
    },
    moreKeys: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return{
      initSearch: {}
    }
  },
  computed: {
    hasSearch() {
      return this.$route.query[this.searchKey]
    },
    hasForm() {
      const keys = {}
      for (const item of this.keys) {
        keys[item] = this.$route.query[item]
      }

      return !!Object.keys(cleanDeep(keys)).length
    },
    show() {
      return this.hasSearch || this.hasForm
    },
    activeItems() {
      return typesByUrl[this.$route.path]
    }
  },
  mounted() {
    this.initSearch = this.$route.query
  },
  watch: {
    $route() {
      this.$emit('setTimeForSearch')
      this.$emit('reload', this.show)
    },
  },
  methods: {
    desced(item) {
      let fiterName = item.filterName
      return item.filterName?item.filterName :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: {
            ...this.$route.query,
            ...item.query,
            filter_type: item.key,
            [this.searchKey]: this.initSearch[this.searchKey]
          }
        })
        this.$emit('setTimeForSearch')
        // this.$emit('reload', true)
      }
    },
    close() {
      const keys = {}
      for (const item of [...this.keys, ...this.moreKeys]) {
        keys[item] = undefined
      }
      this.$router.replace({
        query: {
          ...this.$route.query,
          [this.searchKey]: undefined,
          filter_type: undefined,
          ...keys
        }
      })
      // this.$emit('reload')
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  display: flex;
}
  .filter-search{
    margin-left: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    &.active{
      color: #e6a23c;
    }
    >img{
      width: 20px;
      height: auto;
    }
    >span{
      margin: 0 6px
    }
    >i{
      font-size: 16px;
    }
  }
  ::v-deep .el-tag--plain {
    background: transparent;
  }
</style>