You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.2 KiB
77 lines
2.2 KiB
<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 v-if="employeeList.length > 0">
|
|
<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
|
|
v-for="item in employeeList"
|
|
:key="item.userId"
|
|
:label="item.userName"
|
|
:name="item.userId"
|
|
>
|
|
<MySon v-if="tabIndex == item.userId" :userId="item.userId" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="OkrManagement">
|
|
import AllTarget from './Components/AllTarget.vue'
|
|
import MyDuty from './Components/MyDuty.vue'
|
|
import MySon from './Components/MySon.vue'
|
|
import ObjectList from './Components/ObjectList.vue'
|
|
import WaitTarget from './Components/WaitTarget.vue'
|
|
|
|
import { getMyMemberList } from '@/api/okr/okr'
|
|
|
|
const tabIndex = ref('0')
|
|
const height = ref(innerHeight - 115)
|
|
|
|
const employeeList = ref([])
|
|
onMounted(() => {
|
|
getMyMemberList().then((res) => {
|
|
employeeList.value = res
|
|
})
|
|
})
|
|
</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>
|
|
|