kd-aiot-frontend-wt/src/views/bpm/doneTickets/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 permittedTabs"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="activeComp = item.key"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <div class="content-wrapper" style="margin-left: 10px">
        <component :is="activeComp" way="done"></component>
      </div>
    </el-card>
  </div>
</template>

<script>
  import patrolInspection from './patrolInspection';
  import service from './service';
  import maintenance from './maintenance';
  import delivery from './delivery';
  import repair from './repair';
  import inspectionWork from '@/views/bpm/tickets/inspectionWork/index.vue';
  import productions from '@/views/bpm/tickets/productions/index.vue';
  import work from '@/views/bpm/tickets/work/index.vue';
  export default {
    components: {
      patrolInspection,
      maintenance,
      delivery,
      repair,service,
      inspectionWork,
      productions,
      work
    },
    data() {
      return {
        activeComp: 'patrolInspection',
        tabOptions: [
          { key: 'patrolInspection', name: '巡点检工单', permission: 'wt:ticketstab:xdjgd' },
          { key: 'maintenance', name: '保养工单', permission: 'wt:ticketstab:bygd' },
          { key: 'service', name: '检修工单', permission: 'wt:ticketstab:jxgd' },
          { key: 'repair', name: '维修工单', permission: 'wt:ticketstab:wxgd' },
          { key: 'productions', name: '生产工单', permission: 'wt:ticketstab:scgd' },
          { key: 'inspectionWork', name: '质检工单', permission: 'wt:ticketstab:zjgd' },
          { key: 'work', name: '盘点工单', permission: 'wt:ticketstab:pdgd' }
          // { key: 'delivery', name: '量具送检工单' }
          // { key: 'repair', name: '计划性维修工单' },
          // { key: 'malfunction', name: '盘点工单' }
        ]
      };
    },
    computed: {
      permittedTabs() {
        return this.tabOptions.filter(
          (item) => this.$hasPermission(item.permission)
        );
      }
    },
    created() {
      // 确保 activeComp 指向有权 Tab
      if (this.permittedTabs.length > 0) {
        this.activeComp = this.permittedTabs[0].key;
      }
    },
    mounted() {
      switch (this.$route.query.title) {
        case '巡点检工单':
          this.activeComp = 'patrolInspection';
          break;
        case '保养工单':
          this.activeComp = 'maintenance';
          break;
        case '检修工单':
          this.activeComp = 'service';
          break;
        case '量具送检工单':
          this.activeComp = 'delivery';
          break;
        case '质检工单':
          this.activeComp = 'inspectionWork';
          break;
        case '盘点工单':
          this.activeComp = 'work';
          break;
        case '生产工单':
          this.activeComp = 'productions';
          break;
        default:
          break;
      }
    }
  };
</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;
        }
        .content-wrapper {
          flex: 1;
        }
      }
    }
  }
  .content-wrapper {
    background-color: #fff;
  }
  .page-title {
    background: #fff;
    padding: 26px 10px 15px;
    border-bottom: 1px solid #eaeefb;
  }
</style>