<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <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>
      <component :is='activeComp'>
      </component>
    </el-card>
  </div>
</template>
<script>


export default {
  name: "index",
  components: {
    'tab1': () => import('./dispatchManage/page.vue'),
    'tab2': () => import('./taskWorkManage/page.vue'),
  },
  computed: {
    tabOptions() {
      return [
        {
          key: 'tab1',
          name: '计划'
        },
        {
          key: 'tab2',
          name: '工单'
        },
      ]
    },
  },
  data() {
    return {
      loading: false,
      activeComp: 'tab1'
    }
  },
}
</script>
<style scoped lang="scss">

</style>
