CABaggageData2.0/src/views/statisticsCharts/components/statisticsTabs.vue

<template>
  <div class="statistics-tabs">
    <el-row
      :gutter="16"
      type="flex"
    >
      <el-col
        v-for="(tab, index) in newTabList"
        :key="index"
        :span="4"
      >
        <el-dropdown
          v-if="tab.children && tab.children.length"
          placement="bottom"
          @command="commandHandler"
        >
          <div :class="['tab-bar', { 'tab-active': activeIndex === index }]">
            <img
              class="tab-icon"
              :src="activeIndex === index ? activeIcon : defaultIcon"
              :alt="tab.title"
            />
            <el-tooltip
              :content="tab.title"
              placement="top"
            >
              <span class="tab-title">{{ tab.title }}</span>
            </el-tooltip>
            <i class="icon-arrow el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(childTab, childIndex) in tab.children"
              :key="childIndex"
              :command="[tab.path, childTab.path]"
            >{{ childTab.title }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div
          v-else
          :class="['tab-bar tab-bar-single', { 'tab-active': activeIndex === index }]"
          @click="clickHandler(tab.path)"
        >
          <img
            class="tab-icon"
            :src="activeIndex === index ? activeIcon : defaultIcon"
            :alt="tab.title"
          />
          <el-tooltip
            :content="tab.title"
            placement="top"
          >
            <span class="tab-title">{{ tab.title }}</span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'StatisticsTabs',
  data() {
    return {
      defaultIcon: require('@/assets/nav/ic_statistical_top_default.png'),
      activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
      tabList: [
        {
          title: '航司行李相关统计',
          path: '/statisticsCharts/airlineCompany',
          roles: ['airline_baggage_statistics'],
          children: [
            {
              path: 'flight',
              title: '航班量统计'
            },
            {
              path: 'baggage',
              title: '行李量统计'
            },
            {
              path: 'baggagePassenger',
              title: '行李旅客量统计'
            },
            {
              path: 'specialBaggage',
              title: '特殊行李量统计'
            },
            {
              path: 'baggageAverage',
              title: '平均行李量统计'
            },
            {
              path: 'abnormalBaggage',
              title: '异常行李量统计'
            },
            {
              path: 'complaintBaggage',
              title: '投诉行李量统计'
            },
            {
              path: 'compensationBaggage',
              title: '赔偿行李量统计'
            },
            {
              path: 'compensation',
              title: '赔偿金额统计'
            }
          ]
        },
        {
          path: '/statisticsCharts/passengerClassification',
          title: '旅客分类统计',
          roles: ['passenger_luggage_classification_statistics'],
          children: [
            {
              path: 'baggage',
              title: '行李量统计'
            },
            {
              path: 'baggagePassenger',
              title: '行李旅客量统计'
            },
            {
              path: 'specialBaggage',
              title: '特殊行李量统计'
            },
            {
              path: 'abnormalBaggage',
              title: '异常行李量统计'
            },
            {
              path: 'complaintBaggage',
              title: '投诉行李量统计'
            },
            {
              path: 'compensationBaggage',
              title: '赔偿行李量统计'
            },
            {
              path: 'compensation',
              title: '赔偿金额统计'
            }
          ]
        },
        {
          path: '/statisticsCharts/flightClassification',
          title: '航班分类相关统计',
          roles: ['statistics_related_to_flight_classification'],
          children: [
            {
              path: 'flight',
              title: '航班量统计'
            },
            {
              path: 'baggage',
              title: '行李量统计'
            },
            {
              path: 'passenger',
              title: '行李旅客量统计'
            }
          ]
        },
        {
          path: '/statisticsCharts/node',
          title: '扫描节点与位置分析',
          roles: ['scanning_node_and_location_analysis']
        },
        {
          title: '报表统计',
          path: '/statisticsCharts/report',
          roles: ['report_statistics'],
          children: [
            {
              path: 'reportStatistics',
              title: '运送效率报表统计'
            },
            {
              path: 'transitTable',
              title: '中转专项报表统计'
            },
            {
              path: 'ScanningStatistics',
              title: '航站BRS扫描统计'
            }
          ]
        },
        {
          title: '特殊赔偿异常分类统计',
          path: '/statisticsCharts/specialClassification',
          roles: ['special_compensation_exception_classification_statistics'],
          children: [
            {
              path: 'special',
              title: '特殊行李分类统计'
            },
            {
              path: 'abnormal',
              title: '异常行李分类统计'
            },
            {
              path: 'compensationBaggage',
              title: '赔偿行李分类统计'
            },
            {
              path: 'compensation',
              title: '赔偿金额分类统计'
            }
          ]
        },
        {
          path: '/statisticsCharts/statisticalAnalysis',
          title: '统计分析',
          roles: ['statistical_analysis']
        }
      ],
      activeIndex: null
    }
  },
  computed: {
    newTabList() {
      const auths = JSON.parse(sessionStorage.getItem('userAuthList'))
      return this.tabList.filter(tab => !tab.roles || tab.roles.every(role => auths.includes(role)))
    }
  },
  watch: {
    '$route.path': {
      handler(path) {
        let activeIndex = null
        this.tabList.some((tab, index) => {
          if (path.includes(tab.path)) {
            activeIndex = index
            return true
          }
        })
        this.activeIndex = activeIndex
      },
      immediate: true
    }
  },
  methods: {
    commandHandler(pathArray) {
      if (pathArray.some(path => !path)) {
        this.$message.info('开发中')
        return
      }
      this.$router.push({
        path: pathArray.join('/')
      })
    },
    clickHandler(path) {
      if (!path) {
        this.$message.info('开发中')
        return
      }
      this.$router.push({
        path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-tabs {
  > .el-row > .el-col {
    max-width: 232px;
    min-width: 175px;
    .el-dropdown {
      width: 100%;
    }
    .tab-bar {
      width: 100%;
      height: 56px;
      background-color: #ffffff;
      padding-left: 16px;
      padding-right: 16px;
      display: flex;
      align-items: center;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      &-single {
        cursor: pointer;
      }
      &:not(:last-child) {
        margin-right: 16px;
      }
      .tab-icon {
        width: 14px;
        height: 14px;
      }
      .tab-title {
        padding-left: 12px;
        padding-right: 8px;
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        font-weight: bold;
        color: #101116;
        letter-spacing: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &.tab-active {
        background-color: #2d67e3;
        .tab-title {
          color: #ffffff;
        }
      }
      .icon-arrow {
        position: absolute;
        right: 16px;
        color: #101116;
        font-size: 14px;
        transition: transform 0.3s;
      }
      &.tab-active .icon-arrow {
        color: #ffffff;
      }
      &:hover .icon-arrow {
        transform: rotate(180deg);
      }
    }
  }
}
</style>