kd-aiot-frontend-wt/src/views/bpm/tickets/index.vue

<template>
  <div class="tickets_index">
    <el-card :body-style="{ padding: 10 }">
      <!-- tab切换 -->
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="activeComp = item.key"
            >
              {{ item.name }}
              <span v-if="item.count > 0">{{
                item.count > 99 ? '99+' : item.count
              }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="content-wrapper" style="margin-left: 10px">
        <component :is="activeComp" @recount="setCount"></component>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { statistics } from '@/api/bpm/components/inspectionManage';
  import patrolInspection from './patrolInspection';
  import maintenance from './maintenance';
  import delivery from './delivery';
  import repair from './repair';
  export default {
    components: {
      patrolInspection,
      maintenance,
      delivery,
      repair
    },
    data() {
      return {
        activeComp: 'patrolInspection',
        tabOptions: [
          { key: 'patrolInspection', name: '巡点检工单' },
          { key: 'maintenance', name: '保养工单' },
          // { key: 'delivery', name: '量具送检工单' },
          { key: 'repair', name: '维修工单' }
          // { key: 'repair', name: '计划性维修工单' },
          // { key: 'malfunction', name: '盘点工单' }
        ]
      };
    },
    mounted() {
      // this.setCount();
      switch (this.$route.query.title) {
        case '巡点检工单':
          this.activeComp = 'patrolInspection';
          break;
        case '保养工单':
          this.activeComp = 'maintenance';
          break;
        case '量具送检工单':
          this.activeComp = 'delivery';
          break;
        case '维修工单':
          this.activeComp = 'repair';
          break;
        default:
          break;
      }
    },
    methods: {
      setCount() {
        statistics().then((data) => {
          this.tabOptions = this.tabOptions.map((item) => {
            console.log(item);
            switch (item.key) {
              case 'maintenance':
                return { ...item, count: data.maintenanceNum };
              case 'patrolInspection':
                return { ...item, count: data.patrolInspection };
              case 'delivery':
                return { ...item, count: data.quantityNum };
              case 'repair':
                return { ...item, count: data.repairsNum };
            }
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tickets_index {
    width: 100%;
    // height: calc(100vh - 96px);
    ::v-deep .el-card {
      height: 100%;
      width: 100%;
      .el-card__body {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .switch {
          flex: 0 0 50px;
          .switch_left > ul > li {
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              width: 15px;
              height: 15px;
              line-height: 15px;
              background-color: red;
              color: #fff;
              border-radius: 50%;
              font-size: 10px;
              margin-left: 10px;
            }
          }
        }
        .content-wrapper {
          flex: 1;
        }
      }
    }
  }
  .content-wrapper {
    background-color: #fff;
  }
  .page-title {
    background: #fff;
    padding: 26px 10px 15px;
    border-bottom: 1px solid #eaeefb;
  }
</style>