From a5a64b7131d2eeb151e56642e2125485f609c7ae Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Mon, 17 Feb 2025 14:12:34 +0800
Subject: [PATCH] sc

---
 .env.base                                     |   4 +-
 .env.dev                                      |   2 +-
 .env.front                                    |   4 +-
 .env.stage                                    |   2 +-
 .env.static                                   |   2 +-
 .env.test                                     |   2 +-
 package.json                                  |   1 +
 src/router/modules/remaining.ts               |  58 +-
 src/views/Home/FalseDiligenceReport/index.vue |   9 +-
 src/views/Home/Salary/index.vue               |   2 +-
 .../OKR/Management/Components/DialogOkr.vue   | 611 ++++++++++++++++++
 .../Management/Components/DialogOkrInfo.vue   | 526 +++++++++++++++
 .../OKR/Management/Components/ObjectList.vue  | 165 +++++
 src/views/OKR/Management/index.vue            |  53 ++
 yarn.lock                                     |  12 +
 15 files changed, 1417 insertions(+), 36 deletions(-)
 create mode 100644 src/views/OKR/Management/Components/DialogOkr.vue
 create mode 100644 src/views/OKR/Management/Components/DialogOkrInfo.vue
 create mode 100644 src/views/OKR/Management/Components/ObjectList.vue
 create mode 100644 src/views/OKR/Management/index.vue

diff --git a/.env.base b/.env.base
index 1cbc08d..ef509f9 100644
--- a/.env.base
+++ b/.env.base
@@ -4,11 +4,11 @@ VITE_NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-# VITE_BASE_URL='http://118.31.23.45:48080'
+# VITE_BASE_URL='http://47.98.161.246:48080'
 VITE_BASE_URL='http://114.55.169.15:48080'
 
 # 上传路径
-VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
+VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
 # VITE_UPLOAD_URL='http://114.55.169.15:48080/admin-api/system/file/upload'
 
 # 接口前缀
diff --git a/.env.dev b/.env.dev
index c1c1d41..2d7d01d 100644
--- a/.env.dev
+++ b/.env.dev
@@ -7,7 +7,7 @@ VITE_DEV=false
 VITE_BASE_URL='http://localhost:48080'
 
 # 上传路径
-VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
+VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
 
 # 接口前缀
 VITE_API_BASEPATH=/oa-api
diff --git a/.env.front b/.env.front
index 17ac8f7..c33e9c1 100644
--- a/.env.front
+++ b/.env.front
@@ -4,10 +4,10 @@ VITE_NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://118.31.23.45:48080'
+VITE_BASE_URL='http://47.98.161.246:48080'
 
 # 上传路径
-VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
+VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
 
 # 接口前缀
 VITE_API_BASEPATH=/oa-api
diff --git a/.env.stage b/.env.stage
index a01f3af..a6929a4 100644
--- a/.env.stage
+++ b/.env.stage
@@ -7,7 +7,7 @@ VITE_DEV=false
 VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
 
 # 上传路径
-VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
+VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
 
 # 接口前缀
 VITE_API_BASEPATH=/oa-api
diff --git a/.env.static b/.env.static
index 92ebab9..2936e60 100644
--- a/.env.static
+++ b/.env.static
@@ -7,7 +7,7 @@ VITE_DEV=false
 VITE_BASE_URL='http://localhost:48080'
 
 # 上传路径
-VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
+VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
 
 # 接口前缀
 VITE_API_BASEPATH=/oa-api
diff --git a/.env.test b/.env.test
index caa2f7c..4b719d8 100644
--- a/.env.test
+++ b/.env.test
@@ -7,7 +7,7 @@ VITE_DEV=false
 VITE_BASE_URL='http://localhost:48080'
 
 # 上传路径
-VITE_UPLOAD_URL='http://118.31.23.45:48080/admin-api/system/file/upload'
+VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'
 
 # 接口前缀
 VITE_API_BASEPATH=/oa-api
diff --git a/package.json b/package.json
index fbda02b..cb33cf5 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.1",
     "vue-types": "^5.0.3",
+    "vue3-tree-org": "^4.2.2",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
     "xe-utils": "^3.5.7",
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index cb2703c..0b546ef 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -106,29 +106,41 @@ const remainingRouter: AppRouteRecordRaw[] = [
       }
     ]
   },
-  // {
-  //   path: '/Basic',
-  //   component: Layout,
-  //   name: 'Basic',
-  //   meta: {
-  //     title: '菜单管理'
-  //   },
-  //   redirect: '/Basic/menu',
-  //   children: [
-  //     {
-  //       path: 'menu',
-  //       component: () => import('@/views/Basic/Menu/index.vue'),
-  //       name: 'Menu',
-  //       meta: {
-  //         canTo: true,
-  //         hidden: true,
-  //         noTagsView: false,
-  //         icon: 'ep:user',
-  //         title: '菜单管理'
-  //       }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/Basic',
+    component: Layout,
+    name: 'Basic',
+    meta: {
+      title: '菜单管理'
+    },
+    redirect: '/Basic/menu',
+    children: [
+      {
+        path: 'menu',
+        component: () => import('@/views/Basic/Menu/index.vue'),
+        name: 'Menu',
+        meta: {
+          canTo: true,
+          // hidden: true,
+          noTagsView: false,
+          icon: 'ep:user',
+          title: '菜单管理'
+        }
+      },
+      {
+        path: 'okr',
+        component: () => import('@/views/OKR/Management/index.vue'),
+        name: 'OkrManagement',
+        meta: {
+          canTo: true,
+          // hidden: true,
+          noTagsView: false,
+          icon: 'ep:user',
+          title: 'Okr管理'
+        }
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/Login/Login.vue'),
diff --git a/src/views/Home/FalseDiligenceReport/index.vue b/src/views/Home/FalseDiligenceReport/index.vue
index c1fca50..b7c1396 100644
--- a/src/views/Home/FalseDiligenceReport/index.vue
+++ b/src/views/Home/FalseDiligenceReport/index.vue
@@ -48,7 +48,7 @@
       :tree-props="{ children: 'userDingAttendanceRespVOList', hasChildren: 'hasChildren' }"
       :span-method="spanMethod"
     >
-      <el-table-column label="姓名" min-width="90px">
+      <el-table-column label="姓名" min-width="90px" fixed="left">
         <template #default="{ row }">
           <span v-if="row.userDingAttendanceRespVOList && row.userDingAttendanceRespVOList.length">
             <span>{{ row.period }}</span>
@@ -67,7 +67,8 @@
           {{ row.needAttendance ? '考勤' : '不考勤' }}
         </template>
       </el-table-column>
-      <el-table-column prop="shouldWorkDay" label="计薪天数" min-width="90px" />
+      <el-table-column prop="shouldWorkDay" label="应出勤天数" min-width="90px" />
+      <el-table-column prop="paidLeaveDay" label="带薪假天数" min-width="90px" />
       <el-table-column label="出勤天数" align="center">
         <template #default="{ row }">
           <el-input-number
@@ -286,8 +287,8 @@ async function getList() {
 function spanMethod({ row, columnIndex }) {
   if (row.userDingAttendanceRespVOList && row.userDingAttendanceRespVOList.length > 0) {
     if (columnIndex === 0) {
-      return [1, 13]
-    } else if (columnIndex == 13 && row.id) {
+      return [1, 14]
+    } else if (columnIndex == 14 && row.id) {
       return [1, 1]
     } else {
       return [0, 0]
diff --git a/src/views/Home/Salary/index.vue b/src/views/Home/Salary/index.vue
index 644617b..bd43f76 100644
--- a/src/views/Home/Salary/index.vue
+++ b/src/views/Home/Salary/index.vue
@@ -41,7 +41,7 @@
       :tree-props="{ children: 'userSalaryGrantRespVOList', hasChildren: 'hasChildren' }"
       :span-method="spanMethod"
     >
-      <el-table-column label="姓名" min-width="90px">
+      <el-table-column label="姓名" min-width="90px" fixed="left">
         <template #default="{ row }">
           <span v-if="row.userSalaryGrantRespVOList && row.userSalaryGrantRespVOList.length">
             <span>{{ row.period }}</span>
diff --git a/src/views/OKR/Management/Components/DialogOkr.vue b/src/views/OKR/Management/Components/DialogOkr.vue
new file mode 100644
index 0000000..4c8cfb6
--- /dev/null
+++ b/src/views/OKR/Management/Components/DialogOkr.vue
@@ -0,0 +1,611 @@
+<template>
+  <el-dialog
+    v-if="show"
+    v-model="show"
+    width="94vw"
+    class="dialog-okr"
+    :show-close="false"
+    :close-on-click-modal="false"
+  >
+    <template #header>
+      <div class="dialog-okr-header">
+        <div class="flex-1 flex items-center" style="line-height: 50px">
+          <div class="dialog-okr-title">
+            <Icon icon="ep:circle-check-filled" color="#30d1fc" :size="14" />
+            <span>目标</span>
+          </div>
+          <el-divider direction="vertical" />
+          <span class="text-14px ml-0.25">ork落地</span>
+          <div class="ml-20px text-14px">
+            <span>【节点】</span>
+            <span>寻驾全年目标 -> 1月</span>
+          </div>
+        </div>
+        <div class="flex items-center">
+          <el-button link @click="emit('edit')">
+            <el-tooltip content="编辑" placement="top" effect="dark">
+              <Icon icon="ep:edit" :size="16" />
+            </el-tooltip>
+          </el-button>
+
+          <el-button link @click="show = false">
+            <el-tooltip content="关闭" placement="top" effect="dark">
+              <Icon icon="ep:close" :size="16" />
+            </el-tooltip>
+          </el-button>
+        </div>
+      </div>
+    </template>
+    <template #default>
+      <div class="dialog-okr-body">
+        <div class="dialog-okr-content pr-10px">
+          <div class="dialog-okr-content-detail">
+            <div class="detail-basic-title">
+              <div class="basic-title-item">
+                <div class="basic-title-label">创建人</div>
+                <div class="basic-title-value">张三</div>
+              </div>
+              <div class="basic-title-item">
+                <div class="basic-title-label">执行人</div>
+                <div class="basic-title-value">张三、李四</div>
+              </div>
+              <div class="basic-title-item">
+                <div class="basic-title-label">目标数</div>
+                <div class="basic-title-value">3</div>
+              </div>
+              <div class="basic-title-item" style="min-width: 200px">
+                <div class="basic-title-label">总体进度</div>
+                <el-progress :percentage="60" :stroke-width="8" />
+              </div>
+            </div>
+            <div class="flex detail-basic-info">
+              <span>开始日期：2025-01-01</span>
+              <span>截止日期：2025-01-31</span>
+              <span>最新更新时间：2025-01-15</span>
+            </div>
+          </div>
+          <div class="flex" style="position: relative; flex: 1; height: 100px">
+            <el-tabs v-model="workIndex" style="flex: 1">
+              <el-tab-pane label="目标/关键成果" name="okr">
+                <div class="content-wrap">
+                  <el-table :data="okrList" default-expand-all row-key="id" size="large">
+                    <el-table-column label="目标/关键成果">
+                      <template #default="{ row }">
+                        <span v-if="row.type === 'object'">【目标】{{ row.name }}</span>
+                        <template v-else>
+                          <span>
+                            【关键成果】{{ row.channelName }} {{ row.target }}
+                            <span v-if="row.targetType == 'value'">{{ row.targetNum }}</span>
+                          </span>
+                          <div class="flex items-center mt-10px ml-50px">
+                            <span>当前进度：</span>
+                            <span v-if="row.isSystem">{{ row.currentNum }}</span>
+                            <el-input
+                              v-else-if="row.targetType == 'value'"
+                              v-model="row.currentNum"
+                              clearable
+                              size="small"
+                              style="width: 200px"
+                            />
+                            <el-radio-group
+                              v-else-if="row.targetType == 'radio'"
+                              v-model="row.currentValue"
+                              size="small"
+                            >
+                              <el-radio :label="true">是</el-radio>
+                              <el-radio :label="false">否</el-radio>
+                            </el-radio-group>
+                          </div>
+                        </template>
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="process" label="进度" width="200px">
+                      <template #default="{ row }">
+                        <el-progress :percentage="row.process" />
+                      </template>
+                    </el-table-column>
+                    <el-table-column prop="users" label="执行人" width="200px" />
+                  </el-table>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+            <el-button class="sav-btn" type="primary" @click="handleSaveProcess">
+              保存并更新
+            </el-button>
+          </div>
+        </div>
+        <div class="dialog-okr-side pl-10px">
+          <el-tabs v-model="sideIndex" style="flex: 1; height: 100%">
+            <el-tab-pane label="子节点" name="subNode">
+              <div class="overflow-y-auto" style="height: calc(100% - 50px)">
+                <div
+                  v-for="index in 12"
+                  :key="index"
+                  class="border-b-1 child-item"
+                  style="padding: 10px 5px; cursor: pointer"
+                  @click="handleChildItem"
+                >
+                  <div
+                    class="flex justify-between items-center overflow-hidden text-16px"
+                    style="line-height: 30px"
+                  >
+                    <div class="child-label">【节点】子节点{{ index }}</div>
+                    <el-progress
+                      type="line"
+                      :percentage="0"
+                      :stroke-width="6"
+                      style="width: 120px"
+                    />
+                  </div>
+                  <div class="ml-10px flex items-center text-13px" style="line-height: 30px">
+                    <span>目标数：</span>
+                    <span style="color: #aaa">4</span>
+                    <el-divider direction="vertical" style="margin: 0 20px" />
+                    <div
+                      class="flex-1 overflow-hidden h-30px"
+                      style="text-overflow: ellipsis; white-space: nowrap"
+                    >
+                      <span>执行人：</span>
+                      <span style="color: #aaa">张三、李四、王二</span>
+                    </div>
+                  </div>
+                  <div
+                    class="ml-10px flex items-center text-12px"
+                    style="line-height: 20px; color: #aaa"
+                  >
+                    <span>开始日期：2025-01-01</span>
+                    <el-divider direction="vertical" style="margin: 0 20px" />
+                    <span>截止日期：2025-01-31</span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="评论" name="conclusion">
+              <div class="relative overflow-y-auto" style="height: calc(100% - 50px)">
+                <div class="flex justify-between items-center">
+                  <el-select
+                    v-if="addNewComment"
+                    v-model="form.commentType"
+                    filterable
+                    size="small"
+                    style="width: 120px"
+                    @change="getCommentTemplate"
+                  >
+                    <el-option label="总结" :value="1" />
+                    <el-option label="日报" :value="2" />
+                    <el-option label="周报" :value="3" />
+                    <el-option label="月报" :value="4" />
+                    <!-- <el-option label="评论" :value="5" disabled /> -->
+                  </el-select>
+
+                  <div v-if="addNewComment">
+                    <el-button size="small" @click="addNewComment = false"> 取消 </el-button>
+                    <el-button type="primary" size="small" @click="handleSaveComment">
+                      发布
+                    </el-button>
+                  </div>
+                  <el-button v-else type="primary" size="small" @click="handleInsertComment">
+                    新增评论
+                  </el-button>
+                </div>
+                <div class="mt-10px" v-if="addNewComment">
+                  <Editor
+                    v-model:modelValue="form.commentValue"
+                    height="300px"
+                    :toolbarConfig="toolbarConfig"
+                  />
+                </div>
+                <div v-for="index in 12" :key="index" class="border-b-1" style="padding: 10px 5px">
+                  <div
+                    class="flex items-center justify-between overflow-hidden text-16px"
+                    style="line-height: 30px"
+                  >
+                    <div class="flex items-center">
+                      <el-avatar
+                        shape="circle"
+                        style="
+                          background-color: var(--el-color-primary-light-3);
+                          width: 30px;
+                          height: 30px;
+                        "
+                        fit="fill"
+                      >
+                        <span class="text-12px">门庆</span>
+                      </el-avatar>
+                      <div class="ml-10px text-16px">西门庆</div>
+                    </div>
+                    <div class="ml-10px text-13px text-gray-400">01-01 12:15</div>
+                  </div>
+                  <div class="ml-10px" v-dompurify-html="commentListVal"></div>
+                  <div
+                    class="ml-10px mt-10px flex items-center text-12px"
+                    style="line-height: 20px; color: #aaa"
+                  >
+                    <div class="flex items-center mr-50px">
+                      <el-button link @click="good(index)">
+                        <Icon icon="fa:thumbs-o-up" :size="16" />
+                      </el-button>
+                      <span class="ml-5px">6</span>
+                    </div>
+                    <div class="flex items-center mr-50px">
+                      <el-button link @click="showComment(index)">
+                        <Icon icon="ep:chat-dot-square" :size="16" />
+                      </el-button>
+                      <span class="ml-5px">1</span>
+                    </div>
+                  </div>
+                  <!-- 评论 -->
+                  <div
+                    v-if="showCommentIndex == index"
+                    class="bg-gray-100 pl-10px pr-10px pt-5px pb-5px"
+                    style="margin: 10px 10px 0 10px; border-radius: 4px"
+                    label="评论"
+                  >
+                    <div class="text-14px" style="line-height: 24px">
+                      <span class="font-bold">武大郎：</span>
+                      <span>
+                        大官人，你要脆饼不要，卖完最后一个我要回家了，我家婆娘熬了鸡汤给我补身子
+                      </span>
+                    </div>
+                    <div class="text-14px" style="line-height: 24px">
+                      <span class="font-bold">潘金莲：</span>
+                      <span>西门大官人，我要给你生猴子❥(^_-)</span>
+                    </div>
+                    <div class="text-14px" style="line-height: 24px">
+                      <span class="font-bold">武二郎：</span>
+                      <span>如同天上降魔主，真乃人间太岁</span>
+                    </div>
+                    <div class="mt-10px relative">
+                      <el-input
+                        v-model="form.commentValue"
+                        placeholder="请输入评论"
+                        type="textarea"
+                        :autosize="{ minRows: 4 }"
+                        clearable
+                        size="small"
+                        style="width: 100%"
+                      />
+                      <el-button
+                        type="primary"
+                        size="small"
+                        style="position: absolute; right: 2px; bottom: 2px"
+                        @click="handleSendCommnet"
+                      >
+                        发布
+                      </el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="进度历史" name="history">
+              <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
+                <el-timeline class="ml-10px">
+                  <el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
+                    <div>张三</div>
+                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
+                      进度变化：40% -> 60%
+                      （节点进度是读取目标进度计算的，目标进度根据关键成果计算，关键成果在提交跟新时会有）
+                    </div>
+                  </el-timeline-item>
+                  <el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
+                    <div>张三</div>
+                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
+                      更新节点
+                    </div>
+                  </el-timeline-item>
+                  <el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
+                    <div>张三</div>
+                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
+                      创建节点
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="DialogOkr">
+const emit = defineEmits(['edit'])
+
+const show = ref(false)
+
+const toolbarConfig = {
+  toolbarKeys: [
+    'bold', // 加粗
+    'underline', // 下划线
+    'italic', // 斜体
+    'color', // 文字颜色
+    'bgColor', // 背景色
+    'fontSize', // 字号
+    'bulletedList', // 无序列表
+    'numberedList', // 有序列表
+    'insertTable', // 插入表格
+    'insertLink', // 插入链接
+    'undo' // 撤销
+  ]
+}
+
+const workIndex = ref('okr')
+const okrList = ref([])
+const sideIndex = ref('subNode')
+
+async function open(id) {
+  show.value = true
+  // 获取数据详情
+  console.log(id)
+  okrList.value = [
+    {
+      id: 1,
+      name: '销售成交额达到1000万，总体成交率15%',
+      process: 60,
+      type: 'object',
+      children: [
+        {
+          id: 11,
+          type: 'keyresult',
+          channelName: '抖音',
+          target: '线索目标',
+          targetType: 'value',
+          isSystem: true,
+          targetNum: 10000,
+          targetValue: false,
+          currentNum: 5000,
+          currentValue: false,
+          process: 60,
+          users: '张三、李四'
+        },
+        {
+          id: 12,
+          type: 'keyresult',
+          channelName: '抖音',
+          target: '成交数',
+          isSystem: true,
+          targetType: 'value',
+          targetNum: 2500,
+          targetValue: false,
+          currentNum: 500,
+          currentValue: false,
+          process: 60,
+          users: '张三、李四'
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: '运营消耗预算控制在20万以内，获得10万条线索',
+      process: 80,
+      type: 'object',
+      children: [
+        {
+          id: 21,
+          type: 'keyresult',
+          target: '本月抖音运营投入相较上月少10%',
+          targetType: 'radio',
+          isSystem: false,
+          targetNum: 0,
+          targetValue: false,
+          currentNum: 0,
+          currentValue: false,
+          process: 0,
+          users: ''
+        },
+        {
+          id: 22,
+          type: 'keyresult',
+          target: '累计输出作品',
+          process: 15,
+          users: '',
+          isSystem: false,
+          targetType: 'value',
+          targetNum: 200,
+          targetValue: false,
+          currentNum: 30,
+          currentValue: false
+        }
+      ]
+    },
+    {
+      id: 3,
+      name: '目标3',
+      process: 40,
+      type: 'object',
+      children: [
+        {
+          id: 31,
+          type: 'keyresult',
+          target: '关键成果1',
+          process: 100,
+          users: '',
+          isSystem: false,
+          targetType: 'radio',
+          targetNum: 0,
+          targetValue: false,
+          currentNum: 0,
+          currentValue: true
+        },
+        {
+          id: 22,
+          type: 'keyresult',
+          target: '关键成果2',
+          process: 15,
+          users: '',
+          isSystem: false,
+          targetType: 'value',
+          targetNum: 200,
+          targetValue: false,
+          currentNum: 30,
+          currentValue: false
+        }
+      ]
+    }
+  ]
+}
+
+function close() {
+  show.value = false
+}
+
+defineExpose({ open, close })
+
+function handleSaveProcess() {
+  console.log(okrList.value)
+}
+
+function handleChildItem() {
+  console.log('handleChildItem')
+}
+
+const addNewComment = ref(false)
+const form = ref({
+  commentValue: '',
+  commentType: 1
+})
+function handleInsertComment() {
+  addNewComment.value = true
+  form.value = {
+    commentValue: '',
+    commentType: 1
+  }
+  getCommentTemplate()
+}
+
+function getCommentTemplate() {
+  form.value.commentValue = `<h2 style=\"text-align: start;\">一、工作概况</h2><p> &nbsp; &nbsp;</p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：</li><li>有效沟通数：</li><li>销售成果</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p><br></p>`
+}
+
+function handleSaveComment() {
+  addNewComment.value = false
+}
+
+const commentListVal = ref(
+  `<h2 style=\"text-align: start;\">一、工作概况</h2><p> &nbsp; 刷牙洗脸吃饭穿鞋出门开车上班捣台球&nbsp;</p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：666</li><li>有效沟通数：123</li><li>销售成果：今日成交20，本月成交120，距离目标还差888</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p>无<br></p>`
+)
+
+function good(index) {
+  console.log(index)
+}
+
+const showCommentIndex = ref(-1)
+function showComment(index) {
+  showCommentIndex.value = showCommentIndex.value == index ? -1 : index
+}
+
+function handleSendCommnet() {
+  console.log(form.value.commentValue)
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-okr {
+  .dialog-okr-header {
+    display: flex;
+    height: 51px;
+    min-height: 51px;
+    vertical-align: middle;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 0 1.25rem;
+    .dialog-okr-title {
+      display: flex;
+      margin-right: 5px;
+      align-items: center;
+      background: rgba(48, 209, 252, 0.1);
+      border-radius: 3px;
+      padding: 0 10px;
+      line-height: 24px;
+      span {
+        color: #2a344b;
+        font-size: 12px;
+        margin-left: 6px;
+      }
+    }
+  }
+  .dialog-okr-body {
+    display: flex;
+    background: #f0f3fa;
+    overflow: hidden;
+    min-width: 1064px;
+    height: calc(94vh - 85px);
+    .dialog-okr-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      width: 70%;
+      flex: auto;
+      min-width: 700px;
+      background: #fff;
+      margin: 0 1px 0 0;
+      justify-content: space-between;
+      overflow-y: hidden !important;
+      .dialog-okr-content-detail {
+        position: relative;
+        margin-bottom: 30px;
+        overflow-y: auto;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        .detail-basic-title {
+          display: flex;
+          font-size: 14px;
+          margin-bottom: 16px;
+          .basic-title-item {
+            margin-right: 50px;
+            .basic-title-label {
+              color: #aaa;
+              margin-bottom: 6px;
+            }
+            .basic-title-value {
+              color: #2a344b;
+              font-size: 14px;
+            }
+          }
+        }
+        .detail-basic-info {
+          font-size: 14px;
+          color: #aaa;
+          span {
+            margin-right: 40px;
+          }
+        }
+      }
+      .content-wrap {
+        overflow-y: auto;
+        max-height: calc(100% - 70px);
+      }
+    }
+    .dialog-okr-side {
+      padding-left: 10px;
+      display: flex;
+      flex-direction: column;
+      width: 30%;
+      overflow: hidden;
+      min-width: 364px;
+      max-width: 500px;
+      background: #fff;
+      margin: 0;
+      .child-item:hover {
+        background: #f0f3fa;
+      }
+    }
+  }
+}
+
+.sav-btn {
+  position: absolute;
+  right: 10px;
+  top: 0;
+  width: auto;
+}
+</style>
diff --git a/src/views/OKR/Management/Components/DialogOkrInfo.vue b/src/views/OKR/Management/Components/DialogOkrInfo.vue
new file mode 100644
index 0000000..4a08730
--- /dev/null
+++ b/src/views/OKR/Management/Components/DialogOkrInfo.vue
@@ -0,0 +1,526 @@
+<template>
+  <el-dialog
+    v-if="show"
+    v-model="show"
+    width="900px"
+    class="dialog-okr"
+    :show-close="false"
+    :close-on-click-modal="false"
+  >
+    <template #header>
+      <div class="dialog-okr-header">
+        <div class="flex-1 flex items-center" style="line-height: 50px"> 修改Okr </div>
+        <div class="flex items-center">
+          <el-button type="primary" link :disabled="formLoading" @click="handleSave">
+            保存
+          </el-button>
+          <el-button link @click="show = false"> 关闭 </el-button>
+        </div>
+      </div>
+    </template>
+    <template #default>
+      <div class="dialog-okr-body">
+        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
+          <el-row :gutter="20">
+            <el-col :span="4" :offset="0">
+              <el-form-item label="父节点" prop="parentId">
+                <el-tree-select
+                  v-model="form.parentId"
+                  :data="parentNodeList"
+                  check-strictly
+                  :props="{ value: 'id', label: 'label', children: 'children' }"
+                  :render-after-expand="false"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item label="节点名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item label="开始日期" prop="createTime">
+                <el-date-picker
+                  v-model="form.createTime"
+                  type="date"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期时间"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item label="截止日期" prop="endTime">
+                <el-date-picker
+                  v-model="form.endTime"
+                  type="date"
+                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期时间"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item label="执行人" prop="executor">
+                <el-select
+                  v-model="form.executor"
+                  placeholder="选择执行人，可多选"
+                  multiple
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-tabs v-model="okrKey">
+          <el-tab-pane label="目标/关键成果" name="okr">
+            <div>
+              <div class="flex items-center w-full" v-for="(item, i) in objectList" :key="item.id">
+                <div class="flex-1 w-100px">
+                  <div class="flex items-center">
+                    <el-tag type="success" class="mr-10px">O{{ i + 1 }}</el-tag>
+                    <el-input v-model="item.name" placeholder="目标名称" class="flex-1 w-150px" />
+                    <el-select
+                      v-model="item.objExecutor"
+                      placeholder="选择执行人，可多选"
+                      multiple
+                      clearable
+                      filterable
+                      style="min-width: 240px; margin-left: 10px"
+                    >
+                      <el-option
+                        v-for="it in userOptions"
+                        :key="it.id"
+                        :label="it.name"
+                        :value="it.id"
+                      />
+                    </el-select>
+                    <div class="ml-10px">
+                      <el-button type="primary" text @click="AddKR">新增关键成果</el-button>
+                      <el-button type="danger" text @click="removeObj">删除目标</el-button>
+                    </div>
+                  </div>
+                  <div style="background: #f0f3fa; padding-bottom: 15px">
+                    <div class="ml-50px" v-for="(kr, index) in item.children" :key="kr.id">
+                      <div class="flex flex-1 items-center pb-5px pt-5px">
+                        <el-tag class="mr-10px">KR{{ index + 1 }}</el-tag>
+                        <el-select
+                          v-model="kr.id"
+                          placeholder="选择或输入"
+                          filterable
+                          :props="{ value: 'id', label: 'name' }"
+                          allow-create
+                          :reserve-keyword="false"
+                          class="flex-1 w-150px"
+                        >
+                          <el-option
+                            v-for="it in item.children"
+                            :key="it.id"
+                            :label="it.name"
+                            :value="it.id"
+                          />
+                        </el-select>
+                        <el-button type="danger" text @click="removeKR">删除关键成果</el-button>
+                      </div>
+                      <div class="mt-5px flex items-center">
+                        <el-tree-select
+                          v-model="kr.sourceId"
+                          :data="sourceOptions"
+                          :props="defaultProps"
+                          check-strictly
+                          clearable
+                          filterable
+                          node-key="sourceId"
+                          placeholder="请选择渠道"
+                        />
+                        <el-radio-group v-model="kr.targetType" class="ml-10px">
+                          <el-radio-button label="value">目标值</el-radio-button>
+                          <el-radio-button label="radio">是/否</el-radio-button>
+                        </el-radio-group>
+
+                        <el-input
+                          v-if="kr.targetType === 'value'"
+                          v-model="kr.targetNum"
+                          type="number"
+                          placeholder="目标值"
+                          class="ml-10px"
+                          style="width: 100px"
+                        />
+
+                        <el-select
+                          v-model="kr.objExecutor"
+                          placeholder="选择执行人，可多选"
+                          multiple
+                          clearable
+                          filterable
+                          style="min-width: 240px; margin-left: 10px"
+                        >
+                          <el-option
+                            v-for="it in userOptions"
+                            :key="it.id"
+                            :label="it.name"
+                            :value="it.id"
+                          />
+                        </el-select>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- <div class="w-100px"></div> -->
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="子节点" name="childNode">
+            <el-button class="mb-10px" type="primary" @click="addChildNode">新增子节点</el-button>
+
+            <el-table :data="childNodeList">
+              <el-table-column label="名称">
+                <template #default="{ row }">
+                  <el-input v-model="row.name" placeholder="子节点名称" />
+                </template>
+              </el-table-column>
+              <el-table-column label="开始日期" width="250px">
+                <template #default="{ row }">
+                  <el-date-picker
+                    v-model="row.createTime"
+                    type="date"
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                    placeholder="选择日期时间"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="截止日期" width="250px">
+                <template #default="{ row }">
+                  <el-date-picker
+                    v-model="row.endTime"
+                    type="date"
+                    format="yyyy-MM-dd"
+                    value-format="yyyy-MM-dd"
+                    placeholder="选择日期时间"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column label="执行人">
+                <template #default="{ row }">
+                  <el-select
+                    v-model="row.executor"
+                    placeholder="选择执行人，可多选"
+                    multiple
+                    clearable
+                    filterable
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in userOptions"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                    />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column fixed="right" label="删除" :width="100">
+                <template #default="{ $index }">
+                  <el-button type="danger" text @click="removeChildNode($index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="DialogOkrInfo">
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const show = ref(false)
+
+watch(
+  () => show.value,
+  (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      emit('close')
+    }
+  }
+)
+
+const title = ref('')
+const formType = ref('create')
+
+const form = ref({})
+const formLoading = ref(false)
+const rules = ref({})
+
+const okrKey = ref('okr')
+
+const parentNodeList = ref([
+  {
+    id: 1,
+    label: '寻驾全年目标',
+    children: [
+      { id: 2, label: '1月' },
+      { id: 3, label: '2月' },
+      { id: 4, label: '3月' },
+      { id: 5, label: '4月' },
+      { id: 6, label: '5月' },
+      { id: 7, label: '6月' },
+      { id: 8, label: '7月' },
+      { id: 9, label: '8月' },
+      { id: 10, label: '9月' },
+      { id: 11, label: '10月' },
+      { id: 12, label: '11月' },
+      { id: 13, label: '12月' }
+    ]
+  }
+])
+
+const childNodeList = ref([{}])
+
+const userOptions = ref([
+  { id: 1, name: '张三' },
+  { id: 2, name: '李四' },
+  { id: 3, name: '王五' },
+  { id: 4, name: '赵六' }
+])
+const defaultProps = {
+  children: 'children',
+  label: 'sourceName',
+  value: 'sourceId',
+  isLeaf: 'leaf'
+}
+const sourceOptions = ref([])
+const objectList = ref([
+  {
+    nodeId: 2,
+    name: '1月销售任务概述，例：销售额100万，成交率15%',
+    objExecutor: [1, 2],
+    id: 'a1',
+    children: [
+      {
+        id: 'a1-1',
+        name: '销售额',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a1-2',
+        name: '成交数',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a1-3',
+        name: '成交率',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a1-4',
+        name: '本月抖音运营投入相较上月少10%',
+        isSystem: false,
+        targetNum: 0,
+        targetValue: false,
+        targetType: 'radio'
+      }
+    ]
+  },
+  {
+    nodeId: 3,
+    name: '1月运营目标',
+    objExecutor: [1, 2],
+    id: 'a2',
+    children: [
+      {
+        id: 'a2-1',
+        name: '销售额',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a2-2',
+        name: '成交数',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a1-3',
+        name: '成交率',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a1-4',
+        name: '本月抖音运营投入相较上月少10%',
+        isSystem: false,
+        targetNum: 0,
+        targetValue: false,
+        targetType: 'radio'
+      }
+    ]
+  },
+  {
+    nodeId: 4,
+    name: '1月主播任务',
+    objExecutor: [1, 2],
+    id: 'a3',
+    children: [
+      {
+        id: 'a3-1',
+        name: '销售额',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a3-2',
+        name: '成交数',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a3-3',
+        name: '成交率',
+        isSystem: true,
+        targetNum: 10000,
+        targetValue: false,
+        targetType: 'value'
+      },
+      {
+        id: 'a3-4',
+        name: '本月抖音运营投入相较上月少10%',
+        isSystem: false,
+        targetNum: 0,
+        targetValue: false,
+        targetType: 'radio'
+      }
+    ]
+  }
+])
+
+async function open(type, val) {
+  show.value = true
+  title.value = type == 'update' ? '修改Okr' : '新增Okr'
+  formType.value = type
+  resetForm()
+  if (val) {
+    formLoading.value = true
+    try {
+      // form.value = await KpiApi.getKpiDetail(val)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // getOptions()
+}
+function resetForm() {
+  form.value = {
+    parentId: '',
+    name: '',
+    createTime: '',
+    endTime: '',
+    executor: []
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const formRef = ref()
+/** 提交表单 */
+const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调
+
+function AddKR() {
+  objectList.value.push({
+    name: '',
+    objExecutor: [],
+    children: []
+  })
+}
+
+function removeObj() {
+  objectList.value.pop()
+}
+
+function removeKR() {
+  objectList.value.pop()
+}
+
+function addChildNode() {
+  childNodeList.value.push({})
+}
+
+function removeChildNode(idx) {
+  childNodeList.value.splice(idx, 1)
+}
+
+async function handleSave() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    if (formType.value === 'create') {
+      // await KpiApi.createKpi(form.value)
+      message.success(t('common.createSuccess'))
+    } else {
+      // await KpiApi.updateKpi(form.value)
+      message.success(t('common.updateSuccess'))
+    }
+    show.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-okr {
+  .dialog-okr-header {
+    display: flex;
+    height: 51px;
+    min-height: 51px;
+    vertical-align: middle;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 0 1.25rem;
+  }
+  .dialog-okr-body {
+    overflow-x: hidden;
+    overflow-y: auto;
+    min-width: 1064px;
+    height: calc(94vh - 85px);
+  }
+}
+</style>
diff --git a/src/views/OKR/Management/Components/ObjectList.vue b/src/views/OKR/Management/Components/ObjectList.vue
new file mode 100644
index 0000000..6e3213f
--- /dev/null
+++ b/src/views/OKR/Management/Components/ObjectList.vue
@@ -0,0 +1,165 @@
+<template>
+  <div style="height: 100vh">
+    <vue3-tree-org :data="dataList" center collapsable @on-node-click="handleClickNode">
+      <template #default="{ node }">
+        <div style="cursor: pointer">
+          <div class="tree-org-node__text node-label">
+            <el-popover placement="right" title="目标" width="270px" trigger="hover">
+              <template #reference>
+                <div>
+                  <div style="max-height: 40px; overflow: hidden">{{ node.label }}</div>
+                  <div class="tip"> 目标数： 3</div>
+                </div>
+              </template>
+              <template #default>
+                <div style="font-size: 0.875rem; line-height: 1.5">
+                  <div v-for="i in 3" :key="i" class="mt-5">
+                    <span style="color: #aaa">0%</span>
+                    <span style="margin-left: 0.5rem">
+                      成交数达到10个，且订单的利润不能低于成交价的30%
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </el-popover>
+          </div>
+          <div class="p-5px">
+            <el-progress type="line" :percentage="80" text-inside :stroke-width="12" />
+          </div>
+        </div>
+      </template>
+    </vue3-tree-org>
+    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
+    <DialogOkrInfo ref="dialogOkrInfo" @close="openOkr" />
+  </div>
+</template>
+
+<script setup name="ObjectList">
+import { Vue3TreeOrg } from 'vue3-tree-org'
+import 'vue3-tree-org/lib/vue3-tree-org.css'
+import DialogOkr from './DialogOkr.vue'
+import DialogOkrInfo from './DialogOkrInfo.vue'
+
+const dataList = ref({
+  id: 1,
+  label: '寻驾全年目标',
+  noDragging: true,
+  disabled: true,
+  children: [
+    {
+      id: 2,
+      pid: 1,
+      label: '1月',
+      noDragging: true,
+      disabled: true,
+      children: [
+        { id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
+        { id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
+        { id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
+        { id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
+      ]
+    },
+    {
+      id: 3,
+      pid: 1,
+      label: '2月',
+      noDragging: true,
+      disabled: true,
+      children: [
+        { id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
+        { id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
+        { id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
+        { id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
+      ]
+    },
+    {
+      id: 4,
+      pid: 1,
+      label: '3月',
+      noDragging: true,
+      disabled: true,
+      children: [
+        { id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
+        { id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
+        { id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
+        { id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
+      ]
+    }
+  ]
+})
+
+function toggleExpand(data, val) {
+  if (Array.isArray(data)) {
+    data.forEach((item) => {
+      item.expand = val
+      if (item.children) {
+        toggleExpand(item.children, val)
+      }
+    })
+  } else {
+    data.expand = val
+    if (data.children) {
+      toggleExpand(data.children, val)
+    }
+  }
+}
+
+toggleExpand(dataList.value, true)
+
+const dialogOkr = ref(null)
+const okrId = ref(null)
+function handleClickNode(node, data) {
+  okrId.value = data.id
+  openOkr()
+}
+
+function openOkr() {
+  dialogOkr.value.open(okrId.value)
+}
+
+const dialogOkrInfo = ref(null)
+function handleEditOkr() {
+  dialogOkr.value.close()
+  dialogOkrInfo.value.open('update', 1)
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-org-node__text {
+  min-width: 200px;
+  min-height: 80px;
+  text-align: left;
+  font-size: 14px;
+  border-bottom: 1px solid #ccc;
+  padding: 5px;
+}
+.tip {
+  position: relative;
+  color: #aaa;
+  font-size: 0.875rem;
+}
+:deep(.el-progress-bar__innerText) {
+  display: block;
+  font-size: 0.75rem !important;
+}
+:deep(.el-overlay-dialog) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:deep(.dialog-okr) {
+  width: 94vw;
+  height: 94vh;
+  max-width: 1800px;
+  max-height: 1000px;
+  margin: 0;
+}
+:deep(.dialog-okr .el-dialog__header) {
+  padding: 0 !important;
+}
+:deep(.okr-info-dialog) {
+  .el-dialog__body {
+    padding-top: 0;
+  }
+}
+</style>
diff --git a/src/views/OKR/Management/index.vue b/src/views/OKR/Management/index.vue
new file mode 100644
index 0000000..fb6d22a
--- /dev/null
+++ b/src/views/OKR/Management/index.vue
@@ -0,0 +1,53 @@
+<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">我负责的</el-tab-pane>
+      <el-tab-pane label="我的待办" name="1">我的待办</el-tab-pane>
+      <el-tab-pane label="全部目标" name="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 ObjectList from './Components/ObjectList.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>
diff --git a/yarn.lock b/yarn.lock
index 21e6c31..0e62347 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3362,6 +3362,11 @@ core-js@^3.31.1:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.1.tgz#c97a7160ebd00b2de19e62f4bbd3406ab720e578"
   integrity sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==
 
+core-js@^3.6.5:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.40.0.tgz#2773f6b06877d8eda102fc42f828176437062476"
+  integrity sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==
+
 cors@^2.8.5:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
@@ -8215,6 +8220,13 @@ vue-types@^5.0.3:
   dependencies:
     is-plain-object "5.0.0"
 
+vue3-tree-org@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/vue3-tree-org/-/vue3-tree-org-4.2.2.tgz#6b711dc6e7c5aac99d9b7ff169a432435080cb4b"
+  integrity sha512-AG2SykyD6dw0jIyqBm8iuF9j9GWli6KrwudxR1RjULCCBTDFsoNm7MmP/weKT7wowN/sPk+e2RsnvEJMw2OJMw==
+  dependencies:
+    core-js "^3.6.5"
+
 vue@3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"