dy-admin-manager/src/views/main/abnormal/index.vue

<template>
  <div>
    <save-form inline :model="search" @submit="FetchList" @reset="FetchList">
      <el-form-item prop="organIds">
        <el-select
          multiple
          clearable
          filterable
          collapse-tags
          v-model="search.organIds"
        >
          <el-option v-for="(item,index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-button native-type="submit" type="primary">搜索</el-button>
      <el-button native-type="reset" type="danger">重置</el-button>
    </save-form>
    <div class="tags">
      <el-badge
        :hidden="listByType[item.type].length === 0"
        :value="listByType[item.type].length"
        :max="99"
        v-for="(item, index) in tags"
        :key="index"
      >
        <el-tag
          :effect="activeKey === item.type ? 'dark' : 'plain'"
          @click="activeKey = item.type"
        >{{item.name}}</el-tag>
      </el-badge>
    </div>
    <empty desc="暂无需要处理异常" v-if="!activeList.length"/>
    <title-item
      v-else
      :type="item[0].isError ? 'error' : 'warning'"
      v-for="(item, index) in activeList"
      :key="index"
      :data="item.map(title => ({name: title.desc, num: title.num}))"
    >
      <el-button type="text">立即处理<i class="el-icon-d-arrow-right"/></el-button>
    </title-item>
  </div>
</template>
<script>
import { getIndexError } from '@/views/main/api'
import { createNotification } from '@/helpers/notification'
import { errorType } from '@/views/main/constant'
import title from './title'
export default {
  components: {
    'title-item': title
  },
  data() {
    return {
      activeKey: '',
      search: {
        organIds: []
      },
      listByType: {},
      list: [],
    }
  },
  computed: {
    tags() {
      const tags = this.list.map(item => ({name: item.desc, type: item.errorType}))
      if (tags.length && !this.activeKey) {
        this.activeKey = tags[0].type
      }
      return tags
    },
    activeList() {
      const list = this.listByType[this.activeKey] || []
      return list
    },
  },
  mounted() {
    this.FetchList()
    this.$store.dispatch('setBranchs')
  },
  methods: {
    formatData(data) {
      const list = {}
      for (const item of data) {
        const row = errorType[item.errorType] || {}
        const key = row.parent || item.errorType
        if (!list[key]) {
          list[key] = []
        }
        list[key].push(
          {
            ...item,
            isError: row.isError
          }
        )
      }
      return Object.values(list)
    },
    async FetchList() {
      try {
        const res = await getIndexError({
          ...this.search,
          organIds: this.search.organIds.join(',')
        })
        this.list = res.data.data
        const data = {}
        for (const item of this.list) {
          data[item.errorType] = this.formatData(item?.result || [])
        }
        this.listByType = data
      } catch (error) {}
    },
    send() {
      createNotification({
        title: '测试发送通知',
        body: '您有一条待处理通知，请及时处理',
        onClick: () => {
          this.$router.replace('/main/main')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .tags{
    margin-bottom: 20px;
    >div{
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>