kd-aiot-frontend-eom/src/views/salesServiceManagement/index.vue

<template>
  <div class="repair">
    <div class="ele-body">
      <el-card shadow="never">
        <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 }}
              </li>
            </ul>
          </div>
          <!-- <div class="right" style="padding: 10px">
            <el-button @click="$router.go(-1)">返回</el-button>
          </div> -->
        </div>
        <div class="main">
          <div v-if="activeComp == 'demandList'">
            <demandList ref="demandListRef" />
          </div>
          <div v-if="activeComp == 'toDoList'">
            <toDoList ref="toDoListRef" />
          </div>
          <div v-if="activeComp == 'workOrder'">
            <workOrder ref="workOrderRef" />
          </div>
          <div v-if="activeComp == 'evaluate'">
            <evaluate ref="evaluateRef" />
          </div>
        </div>
      </el-card>
    </div>

  </div>
</template>
<script>
  import demandList from './demandList';
  import toDoList from './toDoList';
  import workOrder from './workOrder';
  import evaluate from './evaluate';
  export default {
    components: { demandList, toDoList, workOrder, evaluate },
    data() {
      return {
        activeComp: 'demandList',
        tabOptions: [
          { key: 'demandList', name: '售后需求' },
          { key: 'toDoList', name: '售后计划' },
          { key: 'workOrder', name: '售后工单' },
          { key: 'evaluate', name: '客户评价' },
          { key: '3', name: '配件申请记录' },
          { key: '4', name: '故障知识库' },
          { key: '2', name: '统计报表' }
        ]
      };
    },
    mounted() {
      // switch (this.$route.query.title) {
      //   case '工单':
      //     this.activeComp = 'workOrder';
      //     break;
      //   default:
      //     break;
      // }
    }
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-card__body {
    padding-top: 0;
    padding-left: 0;
  }

  .main {
    padding-left: 17px;

    .plan {
      padding-top: 15px;
    }
  }
</style>