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="hander(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 v-if="activeComp == 'accessory'">
            <accessory ref="accessoryRef" />
          </div>
          <div v-if="activeComp == 'recycle'">
            <recycle ref="recycleRef" />
          </div>
          <div v-if="activeComp == 'knowledge'">
            <knowledge ref="knowledgeRef" />
          </div>
          <div v-if="activeComp == 'cost'">
            <Cost ref="costRef" />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
  import demandList from './demandList';
  import toDoList from './toDoList';
  import workOrder from './workOrder';
  import evaluate from './evaluate';
  import accessory from './accessory';
  import knowledge from './knowledge';
  import recycle from './recycle';
  import Cost from './cost';
  export default {
    components: {
      demandList,
      toDoList,
      workOrder,
      evaluate,
      accessory,
      knowledge,
      recycle,
      Cost
    },
    data() {
      return {
        activeComp: 'demandList',
        tabOptions: [
          { key: 'demandList', name: '售后需求' },
          { key: 'toDoList', name: '售后计划' },
          { key: 'workOrder', name: '售后工单' },
          { key: 'cost', name: '费用清单' },
          { key: 'evaluate', name: '客户评价' },
          { key: 'accessory', name: '配件申请记录' },
          { key: 'recycle', name: '配件回收记录' },
          { key: 'knowledge', name: '故障知识库' },
          { key: '2', name: '统计报表' }
        ]
      };
    },
    mounted() {
      // switch (this.$route.query.title) {
      //   case '工单':
      //     this.activeComp = 'workOrder';
      //     break;
      //   default:
      //     break;
      // }
    },
    methods: {
      hander(key) {
        this.activeComp = key;
      }
    }
  };
</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>