ss-oa-manage-web/src/views/OKR/Management/index.vue

<template>
  <div :style="{ height: `${height}px` }">
    <el-tabs tab-position="left" v-model="tabIndex" style="height: 100%">
      <el-tab-pane disabled name="-1">
        <template #label>
          <div class="w-full">
            <div style="text-align: left; transform: translateX(-10px)">目标</div>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="我负责的" name="0">
        <MyDuty v-if="tabIndex == 0" />
      </el-tab-pane>
      <el-tab-pane label="待办事项" name="1">
        <WaitTarget v-if="tabIndex == 1" />
      </el-tab-pane>
      <el-tab-pane label="全部目标" name="2">
        <AllTarget v-if="tabIndex == 2" />
      </el-tab-pane>
      <el-tab-pane label="目标关系树" name="3">
        <ObjectList v-if="tabIndex == 3" />
      </el-tab-pane>
      <el-tab-pane disabled>
        <template #label>
          <div class="w-full">
            <el-divider
              direction="horizontal"
              style="width: calc(100% + 10px) !important; transform: translateX(-10px)"
            />
            <div style="text-align: left; transform: translateX(-10px)">成员</div>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="张三">张三</el-tab-pane>
      <el-tab-pane label="李四">李四</el-tab-pane>
      <el-tab-pane label="王二">王二</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="OkrManagement">
import AllTarget from './Components/AllTarget.vue'
import MyDuty from './Components/MyDuty.vue'
import ObjectList from './Components/ObjectList.vue'
import WaitTarget from './Components/WaitTarget.vue'

const tabIndex = ref('0')
const height = ref(innerHeight - 115)
</script>

<style lang="scss" scoped>
:deep(.el-tabs__content) {
  height: 100%;
}
:deep(.el-tab-pane) {
  height: 100%;
}
:deep(.el-popover__title) {
  font-size: 0.875rem;
  color: #aaa !important;
}
</style>