sc

.env.base

@@ -4,8 +4,8 @@ VITE_NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://47.98.161.246:48080'
-# VITE_BASE_URL='http://114.215.207.150:48080'
+# VITE_BASE_URL='http://47.98.161.246:48080'
+VITE_BASE_URL='http://114.215.207.150:48080'
 
 # 小程序接口请求路劲
 VITE_APPLET_URL='https://cloud.ahduima.com'

package.json

@@ -51,7 +51,7 @@
     "diagram-js": "^11.6.0",
     "echarts": "^5.4.2",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.3.4",
+    "element-plus": "2.9.4",
     "fast-xml-parser": "^4.2.2",
     "highlight.js": "^11.8.0",
     "intro.js": "^7.0.1",
@@ -69,9 +69,11 @@
     "vue": "3.3.4",
     "vue-amap": "^0.5.10",
     "vue-dompurify-html": "^5.0.1",
+    "vue-draggable-plus": "^0.6.0",
     "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",

src/api/okr/comment.js

@@ -0,0 +1,38 @@
+import request from '@/config/axios'
+
+// 创建
+export const createComment = (data) => {
+  return request.post({
+    url: '/admin-api/okr/comments/create',
+    data,
+    isSubmitForm: true
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 分页
+export const getCommentPage = (params) => {
+  return request.get({
+    url: '/admin-api/okr/comments/page',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取评论类型
+export const getCommentTypeOptions = () => {
+  return request.get({
+    url: '/admin-api/okr/dict-data/get-by-type',
+    params: { dictType: 'comment_type' }
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 点赞评论
+export const likeComment = (commentId) => {
+  return request.put({
+    url: '/admin-api/okr/comments-likes/update',
+    data: { commentId }
+    // headers: { 'instance-id': 1016 }
+  })
+}

src/api/okr/okr.js

@@ -0,0 +1,145 @@
+import request from '@/config/axios'
+
+// 创建
+export const createOkrNode = (data) => {
+  return request.post({
+    url: '/admin-api/okr/node/add',
+    data,
+    isSubmitForm: true
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 修改
+export const updateOkrNode = (data) => {
+  return request.put({
+    url: '/admin-api/okr/node/update',
+    data
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 查询详情
+export const getOkrNodeDetail = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/get',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 我负责的 - 节点树
+export const getMyNodeTree = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/my/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 我负责的 - okr列表
+export const getMyOkrPage = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/my/object/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 全部目标 - 节点树
+export const getAllNodeTree = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/all/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 全部目标 - okr列表
+export const getAllOkrPage = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/all/object/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取节点操作历史
+export const getOkrNodeHistory = (nodeId) => {
+  return request.get({
+    url: '/admin-api/okr/record/list',
+    params: { nodeId }
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取系统默认的关键成果内容
+export const getDefaultOkrOptions = () => {
+  return request.get({
+    url: '/admin-api/okr/dict-data/get-by-type',
+    params: { dictType: 'key_result_source' }
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 更新OKR进度
+export const updateOkrProgress = (data) => {
+  return request.put({
+    url: '/admin-api/okr/node/progress/update',
+    data
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取目标关系树一级节点
+export const getOkrRelationTree = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/first-node',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取目标关系树下级节点数据
+export const getOkrRelationTreeChildren = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/node-tree',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取我的组员
+export const getMyMemberList = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/my-members',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取我的组员节点树
+export const getMySonNodeTree = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/member/node/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取我的组员OKR列表
+export const getMySonOkrPage = (params) => {
+  return request.get({
+    url: '/admin-api/okr/node/member/objective/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 获取渠道
+export const getChannelOptions = () => {
+  return request.get({
+    url: '/admin-api/okr/node/source'
+    // headers: { 'instance-id': 1016 }
+  })
+}

src/api/okr/wait.js

@@ -0,0 +1,83 @@
+import request from '@/config/axios'
+
+// 创建
+export const createWait = (data) => {
+  return request.post({
+    url: '/admin-api/okr/agent-work/create',
+    data,
+    isSubmitForm: true
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 修改
+export const updateWait = (data) => {
+  return request.put({
+    url: '/admin-api/okr/agent-work/update',
+    data
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 分页
+export const getWaitPage = (params) => {
+  return request.get({
+    url: '/admin-api/okr/agent-work/page',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 详情
+export const getWaitDetail = (id) => {
+  return request.get({
+    url: '/admin-api/okr/agent-work/get',
+    params: { id }
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 删除
+export const deleteWait = (id) => {
+  return request.delete({
+    url: '/admin-api/okr/agent-work/delete',
+    params: { id }
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 催办
+export const urgeWait = (workId) => {
+  return request.get({
+    url: '/admin-api/okr/agent-work/urge',
+    params: { workId }
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 跟进待办
+export const followWait = (data) => {
+  return request.post({
+    url: '/admin-api/okr/agent-work-follow/create',
+    data,
+    isSubmitForm: true
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+// 查询跟进记录
+export const getFollowWaitPage = (params) => {
+  return request.get({
+    url: '/admin-api/okr/agent-work-follow/list',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}
+
+export const getWaitCount = (params) => {
+  return request.get({
+    url: '/admin-api/okr/agent-work/getAgentWorkNum',
+    params
+    // headers: { 'instance-id': 1016 }
+  })
+}

src/api/pers/attendancePlan.js

@@ -0,0 +1,36 @@
+import request from '@/config/axios'
+
+// 创建
+export const createPlan = (data) => {
+  return request.post({ url: '/admin-api/oa/attendance-setting/create', data, isSubmitForm: true })
+}
+
+// 修改
+export const updatePlan = (data) => {
+  return request.put({ url: '/admin-api/oa/attendance-setting/update', data })
+}
+
+//  修改状态
+export const updatePlanStatus = (data) => {
+  return request.put({ url: '/admin-api/oa/attendance-setting/status/update', data })
+}
+
+// 分页
+export const getPlanPage = (params) => {
+  return request.get({ url: '/admin-api/oa/attendance-setting/page', params })
+}
+
+// 列表
+export const getPlanSimpleList = (params) => {
+  return request.get({ url: '/admin-api/oa/attendance-setting/simple-list', params })
+}
+
+// 详情
+export const getPlanDetail = (id) => {
+  return request.get({ url: '/admin-api/oa/attendance-setting/get', params: { id } })
+}
+
+// 删除
+export const deletePlan = (id) => {
+  return request.delete({ url: '/admin-api/oa/attendance-setting/delete', params: { id } })
+}

src/api/pers/employee.js

@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+// 创建
+export const createEmployee = (data) => {
+  return request.post({ url: '/admin-api/oa/employee/create', data, isSubmitForm: true })
+}
+
+// 分页
+export const getEmployeeSimpleList = (params) => {
+  return request.get({ url: '/admin-api/oa/employee/list-all-simple', params })
+}
+
+// 修改
+export const updateEmployee = (data) => {
+  return request.put({ url: '/admin-api/oa/employee/update', data })
+}
+
+//  修改状态
+export const updateEmployeeStatus = (data) => {
+  return request.put({ url: '/admin-api/oa/employee/status/update', data })
+}
+
+// 分页
+export const getEmployeePage = (params) => {
+  return request.get({ url: '/admin-api/oa/employee/page', params })
+}
+
+// 详情
+export const getEmployeeDetail = (id) => {
+  return request.get({ url: '/admin-api/oa/employee/get', params: { id } })
+}
+
+// 删除
+export const deleteEmployee = (id) => {
+  return request.delete({ url: '/admin-api/oa/employee/delete', params: { id } })
+}
+
+// 获取钉钉id
+export const getDingUserId = (params) => {
+  return request.get({ url: '/admin-api/oa/employee/getDingTalkUserIdByMobile', params })
+}

src/permission.js

@@ -1,6 +1,6 @@
 import router from './router'
 import { isRelogin } from '@/config/axios/service'
-import { getAccessToken, removeToken } from '@/utils/auth'
+import { getAccessToken } from '@/utils/auth'
 import { useTitle } from '@/hooks/web/useTitle'
 import { useNProgress } from '@/hooks/web/useNProgress'
 import { usePageLoading } from '@/hooks/web/usePageLoading'
@@ -9,7 +9,6 @@ import { useUserStoreWithOut } from '@/store/modules/user'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { getTenantId, getAppId, setTenantId, setAppId } from '@/utils/auth'
-import cache from '@/plugins/cache'
 
 const { start, done } = useNProgress()
 
@@ -30,57 +29,51 @@ const whiteList = [
 router.beforeEach(async (to, from, next) => {
   start()
   loadStart()
-  if (getAppId() && to.query?.appId && getAppId() != to.query?.appId) {
-    removeToken()
-    cache?.local?.delete('appInfo')
-    cache?.local?.delete('roleRouters')
-    cache?.local?.delete('user')
-    cache?.local?.delete('App_ID')
-    next(`/login?tenantId=${to.query?.tenantId}&appId=${to.query?.appId}`)
-  } else {
-    if (getAccessToken()) {
-      if (to.path === '/login') {
-        if (to.query?.tenantId && to.query?.appId) {
-          setApp(to.query.tenantId, to.query.appId)
-          await waitTime(1500)
-        }
-        next({ path: '/' })
-      } else {
-        // 获取所有字典
-        const dictStore = useDictStoreWithOut()
-        const userStore = useUserStoreWithOut()
-        const permissionStore = usePermissionStoreWithOut()
-        if (!dictStore.getIsSetDict) {
-          await dictStore.setDictMap()
-        }
-        if (!userStore.getIsSetUser) {
-          isRelogin.show = true
-          await userStore.setUserInfoAction()
-          isRelogin.show = false
-          // 后端过滤菜单
-          await permissionStore.generateRoutes()
-          permissionStore.getAddRouters.forEach((route) => {
-            router.addRoute(route) // 动态添加可访问路由表
-          })
-          const redirectPath = from.query.redirect || to.path
-          const redirect = decodeURIComponent(redirectPath)
-          const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
-          next(nextData)
-        } else {
-          next()
-        }
+  const userStore = useUserStoreWithOut()
+  if (to.path == '/login') {
+    userStore.resetState() // 重置用户信息状态
+  }
+  if (getAccessToken()) {
+    if (to.path === '/login') {
+      if (to.query?.tenantId && to.query?.appId) {
+        setApp(to.query.tenantId, to.query.appId)
+        await waitTime(1500)
       }
+      next({ path: '/' })
     } else {
-      if (whiteList.indexOf(to.path) !== -1) {
+      // 获取所有字典
+      const dictStore = useDictStoreWithOut()
+      const permissionStore = usePermissionStoreWithOut()
+      if (!dictStore.getIsSetDict) {
+        await dictStore.setDictMap()
+      }
+      if (!userStore.getIsSetUser) {
+        isRelogin.show = true
+        await userStore.setUserInfoAction()
+        isRelogin.show = false
+        // 后端过滤菜单
+        await permissionStore.generateRoutes()
+        permissionStore.getAddRouters.forEach((route) => {
+          router.addRoute(route) // 动态添加可访问路由表
+        })
+        const redirectPath = from.query.redirect || to.path
+        const redirect = decodeURIComponent(redirectPath)
+        const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
+        next(nextData)
+      } else {
         next()
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      const tenantId = getTenantId()
+      const appId = getAppId()
+      if (tenantId && appId) {
+        next(`/login?tenantId=${tenantId}&appId=${appId}&redirect=${to.fullPath}`) // 否则全部重定向到登录页
       } else {
-        const tenantId = getTenantId()
-        const appId = getAppId()
-        if (tenantId && appId) {
-          next(`/crm/login?tenantId=${tenantId}&appId=${appId}&redirect=${to.fullPath}`) // 否则全部重定向到登录页
-        } else {
-          next(`/crm/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-        }
+        next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
       }
     }
   }

src/router/modules/remaining.ts

@@ -59,31 +59,20 @@ const remainingRouter: AppRouteRecordRaw[] = [
       title: '首页',
       hidden: true
     }
-    //   children: [
-    //     {
-    //       path: '/index',
-    //       component: () => import('@/views/Home/Index.vue'),
-    //       name: 'Home',
-    //       meta: {
-    //         title: '首页',
-    //         icon: 'ep:home-filled',
-    //         noTagsView: true,
-    //         affix: true
-    //         // hidden: true
-    //       }
+    // children: [
+    //   {
+    //     path: '/index',
+    //     component: () => import('@/views/Basic/Menu/index.vue'),
+    //     name: 'Home',
+    //     meta: {
+    //       title: '首页',
+    //       icon: 'ep:home-filled',
+    //       noTagsView: true,
+    //       affix: true
+    //       // hidden: true
     //     }
-    // {
-    //   path: 'menu',
-    //   component: () => import('@/views/Basic/Menu/index.vue'),
-    //   name: 'Menu',
-    //   meta: {
-    //     affix: true,
-    //     noTagsView: true,
-    //     icon: 'ep:user',
-    //     title: '菜单管理'
     //   }
-    // }
-    //   ]
+    // ]
   },
   {
     path: '/swagger',

src/router/modules/static.ts

@@ -0,0 +1,73 @@
+const staticRouter: AppCustomRouteRecordRaw[] = [
+  {
+    icon: 'ep:calendar',
+    path: '/Okr',
+    component: '',
+    name: 'OKR',
+    componentName: '',
+    redirect: '',
+    parentId: 0,
+    visible: true,
+    alwaysShow: true,
+    children: [
+      {
+        icon: 'ep:finished',
+        path: 'okr-management',
+        name: 'OKR管理',
+        componentName: 'OkrManagement',
+        component: 'OKR/Management/index',
+        visible: true,
+        alwaysShow: true,
+        meta: {
+          title: 'OKR管理'
+        },
+        redirect: ''
+      },
+      {
+        icon: 'ep:alarm-clock',
+        path: 'okr-wait',
+        name: '待办事项',
+        componentName: 'OkrWait',
+        component: 'OKR/Wait/index',
+        meta: {
+          title: '待办事项'
+        },
+        visible: true,
+        alwaysShow: true,
+        redirect: ''
+      },
+      {
+        icon: 'ep:data-line',
+        path: 'okr-analysis',
+        name: 'Okr统计',
+        componentName: 'OkrAnalysis',
+        component: 'OKR/Analysis/index',
+        meta: {
+          title: 'Okr统计'
+        },
+        visible: true,
+        alwaysShow: true,
+        redirect: ''
+      }
+      // {
+      //   icon: 'ep:data-board',
+      //   path: 'okr-metting',
+      //   name: '会议管理',
+      //   componentName: 'OkrMetting',
+      //   component: 'OKR/Meeting/index',
+      //   meta: {
+      //     title: '会议管理'
+      //   },
+      //   visible: true,
+      //   alwaysShow: true,
+      //   redirect: ''
+      // }
+    ],
+    meta: {
+      title: 'OKR',
+      icon: 'ep:calendar'
+    }
+  }
+]
+
+export default staticRouter

src/store/modules/permission.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { store } from '../index'
 import { cloneDeep } from 'lodash-es'
 import remainingRouter from '@/router/modules/remaining'
+import staticRouter from '@/router/modules/static'
 import { generateRoute, flatMultiLevelRoutes } from '@/utils/routerHelper'
 import { CACHE_KEY } from '@/hooks/web/useCache'
 import cache from '@/plugins/cache'
@@ -36,6 +37,25 @@ export const usePermissionStore = defineStore('permission', {
         if (cache.local.get(CACHE_KEY.ROLE_ROUTERS)) {
           res = cache.local.get(CACHE_KEY.ROLE_ROUTERS) as AppCustomRouteRecordRaw[]
         }
+        const staticRouters = cloneDeep(staticRouter)
+        // 与动态路由比较，首先判断目录是否存在，如果存在就合并，并替换动态路由中的目录
+        staticRouters.forEach((item) => {
+          const index = res.findIndex((item2) => item2.path === item.path)
+          if (index !== -1) {
+            const arr = []
+            if (!item.children || item.children.length === 0) {
+              item.children = arr
+            }
+            if (res[index].children && res[index].children.length > 0) {
+              item.children = item.children.concat(res[index].children)
+            }
+            // routerMap[index].children = item.children
+            // 插入动态路由数组的第二位
+            res[index] = { ...res, ...item }
+          } else {
+            res = [...staticRouters, ...res]
+          }
+        })
         const routerMap: AppRouteRecordRaw[] = generateRoute(res)
         // 动态路由，404一定要放到最后面
         this.addRouters = routerMap.concat([

src/store/modules/user.ts

@@ -77,6 +77,7 @@ export const useUserStore = defineStore('admin-user', {
         nickname: '',
         currentRole: 0
       }
+      cache.local.delete(CACHE_KEY.USER)
     },
     refresh() {
       cache.local.delete(CACHE_KEY.USER)

src/views/Home/Index.vue

@@ -13,6 +13,32 @@
           </el-col>
           <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
             <div class="flex h-40px items-center justify-end <sm:mt-10px">
+              <div
+                class="px-8px text-right"
+                @click="router.push({ path: '/Okr/okr-wait', query: { type: 1 } })"
+              >
+                <div class="text-14px text-red-600 mb-20px">今日待办</div>
+                <CountTo
+                  class="text-20px number-font"
+                  :start-val="0"
+                  :end-val="waitCount.dayEndAgentWorkNum"
+                  :duration="2600"
+                />
+              </div>
+              <el-divider direction="vertical" border-style="dashed" />
+              <div
+                class="px-8px text-right"
+                @click="router.push({ path: '/Okr/okr-wait', query: { type: 2 } })"
+              >
+                <div class="text-14px text-gray-400 mb-20px">我的待办</div>
+                <CountTo
+                  class="text-20px number-font"
+                  :start-val="0"
+                  :end-val="waitCount.myAgentWorkNum"
+                  :duration="2600"
+                />
+              </div>
+              <el-divider direction="vertical" border-style="dashed" />
               <div class="px-8px text-right">
                 <div class="text-14px text-gray-400 mb-20px">今日待跟进</div>
                 <CountTo
@@ -149,11 +175,13 @@ import { useUserStore } from '@/store/modules/user'
 import avatarImg from '@/assets/imgs/avatar.gif'
 import { lineOptions } from './echarts-data'
 import * as HomeApi from '@/api/home/index'
+import { getWaitCount } from '@/api/okr/wait'
 import { useAppStore } from '@/store/modules/app'
 
 const { t } = useI18n()
 const userStore = useUserStore()
 const appStore = useAppStore()
+const router = useRouter() // 路由对象
 const loading = ref(false)
 const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
 const username = userStore.getUser.nickname
@@ -243,8 +271,30 @@ function getSignList() {
   })
 }
 
+function getWaitTargetCount() {
+  getWaitCount({
+    title: searchForm.value.title,
+    priority: searchForm.value.priority
+  }).then((res) => {
+    waitCount.value = res
+  })
+}
+
+const waitCount = ref({
+  dayEndAgentWorkNum: 0,
+  myAgentWorkNum: 0,
+  urgeAgentWorkNum: 0,
+  notifyNum: 0
+})
+
 const getAllApi = async () => {
-  await Promise.all([getClueInfo(), getSignList(), getMonthlySaleRate(), getFollowList()])
+  await Promise.all([
+    getClueInfo(),
+    getSignList(),
+    getMonthlySaleRate(),
+    getFollowList(),
+    getWaitTargetCount()
+  ])
   loading.value = false
 }
 

src/views/OKR/Analysis/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <el-row class="mb-10px">
+      <el-tree-select
+        v-model="searchForm.nodeId"
+        :data="peroidList"
+        :props="defaultProps"
+        :render-after-expand="false"
+        :default-expand-all="false"
+        check-strictly
+        style="width: 400px"
+        @change="nodeChange"
+      />
+    </el-row>
+
+    <el-table :data="originList" border :span-method="objectSpanMethod">
+      <el-table-column prop="objectInfo.objectiveName" label="目标">
+        <template #default="{ row }">
+          {{ row.objectInfo.objectiveName }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column prop="objectiveId" label="占比" width="100px">
+        <template #default> 0 </template>
+      </el-table-column> -->
+      <el-table-column prop="keyResultShowName" label="关键成果">
+        <template #default="{ row }">
+          {{ row.sourceName ? `【${row.sourceName}】` : '' }} {{ row.keyResultShowName }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="targetValue" label="目标值" width="100px" />
+      <el-table-column prop="currentValue" label="当前进度" width="100px" />
+      <el-table-column label="开始日期" width="120px">
+        <template #default>
+          {{ currentNode.startTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="完成状态" width="100px">
+        <template #default="{ row }">
+          <el-tag v-if="row.currentValue >= row.targetValue" type="success">完成</el-tag>
+          <el-tag v-else type="danger">未完成</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="muis" label="差值" width="100px">
+        <template #default="{ row }">
+          <span
+            :style="{
+              color: row.targetValue >= row.currentValue ? 'red' : '#333',
+              'font-weight': row.targetValue >= row.currentValue ? 'bold' : '500'
+            }"
+          >
+            {{ parseInt(row.targetValue - row.currentValue) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="complete" label="完成度" width="200px">
+        <template #default="{ row }">
+          <el-progress :percentage="parseInt(row.progress)" :color="customColors" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束日期" width="120px">
+        <template #default>
+          {{ currentNode.endTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="objectInfo.progress" label="目标完成度" width="100px" align="center">
+        <template #default="{ row }">
+          {{ parseInt(row.objectInfo.progress) }}%
+          <!-- <el-progress :percentage="parseInt(row.objectInfo.progress)" :color="customColors" /> -->
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup name="Analysis">
+import { listToTree, findNode } from '@/utils/tree'
+import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr'
+import { cloneDeep } from 'lodash-es'
+
+const message = useMessage()
+const defaultProps = {
+  value: 'nodeId',
+  label: 'nodeName',
+  children: 'children'
+}
+const searchForm = ref({
+  nodeId: undefined
+})
+
+const currentNode = ref(undefined)
+
+const customColors = [
+  { color: 'rgb(196, 86.4, 86.4)', percentage: 20 },
+  { color: 'rgb(196, 86.4, 86.4)', percentage: 40 },
+  { color: 'rgb(237.5, 189.9, 118.5)', percentage: 60 },
+  { color: 'rgb(159.5, 206.5, 255)', percentage: 80 },
+  { color: 'rgb(179, 224.5, 156.5)', percentage: 100 }
+]
+
+const peroidList = ref([])
+
+handleSearchPeroid()
+
+// 当前是否是叶子节点
+// 如果不是叶子节点，则表格数据不可修改
+const isCurrentLeafNode = ref(false)
+
+function handleSearchPeroid() {
+  getAllNodeTree().then((resp) => {
+    if (resp.nodeId) {
+      peroidList.value = listToTree(resp?.tree || [], {
+        id: 'nodeId',
+        pid: 'parentId',
+        children: 'children'
+      })
+      nodeChange(resp.nodeId)
+      currentNode.value = (resp.tree || []).find((item) => item.nodeId === resp.nodeId)
+    } else {
+      message.warning('请先创建节点数据')
+    }
+  })
+}
+
+function nodeChange(nodeId) {
+  if (nodeId) {
+    searchForm.value.nodeId = nodeId
+    getOkrList()
+    currentNode.value = findNode(peroidList.value, (node) => {
+      return node.nodeId == nodeId
+    })
+    searchForm.value.creatorId = currentNode.value.creatorId
+    if (!currentNode.value.children || currentNode.value.children.length == 0) {
+      isCurrentLeafNode.value = true
+    } else {
+      isCurrentLeafNode.value = false
+    }
+  }
+}
+
+const originList = ref([])
+const spanObj = ref([])
+function getOkrList() {
+  getAllOkrPage(searchForm.value).then((resp) => {
+    originList.value = []
+    spanObj.value = []
+    if (resp && resp.length) {
+      resp.map((o) => {
+        if (o.keyResults && o.keyResults.length) {
+          const arr = o.keyResults.map((k, index) => {
+            spanObj.value.push(index == 0 ? o.keyResults.length : 0)
+            const obj = cloneDeep(o)
+            delete obj.keyResults
+            return {
+              ...k,
+              objectInfo: obj
+            }
+          })
+          originList.value = [...originList.value, ...arr]
+        }
+      })
+    }
+  })
+}
+
+function objectSpanMethod({ column, rowIndex }) {
+  if (['目标', '目标完成度'].includes(column.label)) {
+    let _row = spanObj.value[rowIndex]
+    let _col = _row > 0 ? 1 : 0
+    return {
+      rowspan: _row,
+      colspan: _col
+    }
+  }
+}
+</script>
+
+<style scoped></style>

src/views/OKR/Management/Components/AllTarget.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="flex flex-col w-full h-full p-4 bg-white rounded-lg shadow-md overflow-hidden">
+    <div class="flex items-center justify-between">
+      <el-row>
+        <el-tree-select
+          v-model="searchForm.nodeId"
+          :data="peroidList"
+          :props="defaultProps"
+          :render-after-expand="false"
+          :default-expand-all="false"
+          check-strictly
+          style="width: 400px"
+          @change="nodeChange"
+        />
+        <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
+      </el-row>
+      <el-row>
+        <el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
+        <el-button
+          type="warning"
+          v-if="currentUserId == searchForm.creatorId"
+          @click="handleEditOkr(searchForm.nodeId)"
+        >
+          修改当前节点
+        </el-button>
+        <el-button
+          type="success"
+          v-if="searchForm.executor?.includes(currentUserId)"
+          @click="handleUpdateProcess"
+          >更新进度</el-button
+        >
+      </el-row>
+    </div>
+    <OkrTable ref="okrTableRef" :canEdit="isCurrentLeafNode" />
+    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
+    <DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" />
+  </div>
+</template>
+
+<script setup name="AllTarget">
+import OkrTable from './OkrTable.vue'
+import DialogOkrInfo from './DialogOkrInfo.vue'
+import DialogOkr from './DialogOkr.vue'
+
+import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr'
+import { listToTree, findNode } from '@/utils/tree'
+import { useUserStore } from '@/store/modules/user'
+
+const message = useMessage()
+const userStore = useUserStore()
+const currentUserId = userStore.getUser.id
+
+const defaultProps = {
+  value: 'nodeId',
+  label: 'nodeName',
+  children: 'children'
+}
+
+const okrTableRef = ref(null)
+const searchForm = ref({
+  nodeId: undefined
+})
+
+const peroidList = ref([])
+
+handleSearchPeroid()
+
+// 当前是否是叶子节点
+// 如果不是叶子节点，则表格数据不可修改
+const isCurrentLeafNode = ref(false)
+
+function handleSearchPeroid() {
+  getAllNodeTree().then((resp) => {
+    if (resp.nodeId) {
+      peroidList.value = listToTree(resp?.tree || [], {
+        id: 'nodeId',
+        pid: 'parentId',
+        children: 'children'
+      })
+      nodeChange(resp.nodeId)
+    } else {
+      message.warning('请先创建节点数据')
+    }
+  })
+}
+
+function nodeChange(nodeId) {
+  if (nodeId) {
+    searchForm.value.nodeId = nodeId
+    getOkrList()
+    const currentNode = findNode(peroidList.value, (node) => {
+      return node.nodeId == nodeId
+    })
+    searchForm.value.creatorId = currentNode.creatorId
+    if (!currentNode.children || currentNode.children.length == 0) {
+      isCurrentLeafNode.value = true
+    } else {
+      isCurrentLeafNode.value = false
+    }
+  }
+}
+
+function getOkrList() {
+  getAllOkrPage(searchForm.value).then((resp) => {
+    const list = resp
+    if (list && list.length > 0) {
+      nextTick(() => {
+        okrTableRef.value.prepareData(list)
+      })
+    } else {
+      // 如果没有数据，清空表格
+      okrTableRef.value.prepareData([])
+    }
+  })
+}
+
+const dialogOkrInfo = ref(null)
+function handleAddNode() {
+  dialogOkrInfo.value.open('create', null)
+}
+
+function handleEditOkr(nodeId = undefined) {
+  dialogOkr.value.close()
+  dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2)
+}
+
+function handleUpdateProcess() {
+  okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => {
+    message.success('更新成功')
+    getOkrList()
+  })
+}
+
+const dialogOkr = ref(null)
+function handleShowOkr(id) {
+  dialogOkr.value.open({
+    nodeId: id,
+    canEdit: isCurrentLeafNode.value,
+    queryType: 2
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-overlay-dialog) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/OKR/Management/Components/DialogOkr.vue

@@ -0,0 +1,681 @@
+<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
+              v-for="(item, index) in nodeInfo.parentNodes"
+              :key="item.nodeId"
+              @click="handleChildItem(item)"
+            >
+              <span
+                class="cursor-pointer"
+                :style="{
+                  color: index < nodeInfo.parentNodes.length - 1 ? '#409eff' : '#333',
+                  borderBottom:
+                    index < nodeInfo.parentNodes.length - 1 ? '1px solid #409eff' : 'none'
+                }"
+              >
+                {{ item.nodeName }}
+              </span>
+              <span v-if="index != nodeInfo.parentNodes.length - 1"> -> </span>
+            </span>
+          </div>
+        </div>
+        <div class="flex items-center">
+          <el-button
+            v-if="nodeInfo.creatorId == currentUserId"
+            link
+            @click="emit('edit', nodeInfo.nodeId)"
+          >
+            <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">{{ nodeInfo.creator }}</div>
+              </div>
+              <div class="basic-title-item">
+                <div class="basic-title-label">执行人</div>
+                <div class="basic-title-value">{{ nodeInfo.executorName || '无' }}</div>
+              </div>
+              <div class="basic-title-item">
+                <div class="basic-title-label">目标数</div>
+                <div class="basic-title-value">{{ okrList.length }}</div>
+              </div>
+              <div class="basic-title-item" style="min-width: 200px">
+                <div class="basic-title-label">总体进度</div>
+                <el-progress :percentage="parseInt(nodeInfo.progress) || 0" :stroke-width="8" />
+              </div>
+            </div>
+            <div class="flex detail-basic-info">
+              <span>开始日期：{{ nodeInfo.startTime }}</span>
+              <span>截止日期：{{ nodeInfo.endTime }}</span>
+              <span>最新更新时间：{{ nodeInfo.updateTime }}</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">
+                  <OkrTable ref="okrTableRef" :canEdit="canEdit" />
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+            <el-button v-if="canEdit" 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" key=" ">
+              <div class="overflow-y-auto" style="height: calc(100% - 50px)">
+                <div
+                  v-for="item in childNodeList"
+                  :key="item.nodeId"
+                  class="border-b-1 child-item"
+                  style="padding: 10px 5px; cursor: pointer"
+                  @click="handleChildItem(item)"
+                >
+                  <div
+                    class="flex justify-between items-center overflow-hidden text-16px"
+                    style="line-height: 30px"
+                  >
+                    <div class="child-label">【节点】{{ item.nodeName }}</div>
+                    <el-progress
+                      type="line"
+                      :percentage="parseInt(item.progress) || 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">{{ item.objectiveNum }}</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">{{ item.executorName || '无' }}</span>
+                    </div>
+                  </div>
+                  <div
+                    class="ml-10px flex items-center text-12px"
+                    style="line-height: 20px; color: #aaa"
+                  >
+                    <span>开始日期：{{ item.startTime }}</span>
+                    <el-divider direction="vertical" style="margin: 0 20px" />
+                    <span>截止日期：{{ item.endTime }}</span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="评论" name="conclusion" key="conclusion">
+              <div class="relative overflow-y-auto" style="height: calc(100% - 50px)">
+                <div v-if="addNewComment">
+                  <div class="flex justify-between items-center">
+                    <el-select
+                      v-model="form.commentType"
+                      filterable
+                      size="small"
+                      style="width: 120px"
+                      @change="getCommentTemplate"
+                    >
+                      <el-option
+                        v-for="it in commentTypeOptions"
+                        :label="it.label"
+                        :value="it.id"
+                        :key="it.id"
+                      />
+                    </el-select>
+
+                    <div>
+                      <el-button size="small" @click="addNewComment = false"> 取消 </el-button>
+                      <el-button type="primary" size="small" @click="handleSaveComment">
+                        发布
+                      </el-button>
+                    </div>
+                  </div>
+                  <div class="mt-10px" v-if="addNewComment">
+                    <Editor
+                      v-model:modelValue="form.commentValue"
+                      height="300px"
+                      :toolbarConfig="toolbarConfig"
+                    />
+                  </div>
+                </div>
+                <el-button v-else type="primary" size="small" @click="handleInsertComment">
+                  新增评论
+                </el-button>
+                <div
+                  v-for="(it, index) in commentList"
+                  :key="it.commentId"
+                  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">{{ it.creatorName.slice(-2) }}</span>
+                      </el-avatar>
+                      <div class="ml-10px text-16px">{{ it.creatorName }}</div>
+                    </div>
+                  </div>
+                  <div class="ml-10px" v-dompurify-html="it.content"></div>
+                  <div
+                    class="ml-10px mt-10px flex items-center justify-between text-12px"
+                    style="line-height: 20px; color: #aaa"
+                  >
+                    <div class="flex items-center">
+                      <div class="flex items-center mr-50px">
+                        <el-button link @click="good(it)">
+                          <Icon
+                            icon="fa:thumbs-o-up"
+                            :size="16"
+                            :color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'"
+                          />
+                        </el-button>
+                        <span
+                          class="ml-5px"
+                          :style="{
+                            color: it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'
+                          }"
+                          >{{ it.likeCount }}</span
+                        >
+                      </div>
+                      <div class="flex items-center mr-50px">
+                        <el-button link @click="showComment(index)">
+                          <Icon icon="ep:chat-dot-square" :size="16" color="#333" />
+                        </el-button>
+                        <span class="ml-5px" style="color: #333">{{ it.commentCount }}</span>
+                      </div>
+                    </div>
+                    <div class="ml-10px text-13px text-gray-400">
+                      {{ formatDate(it.createTime, 'YYYY-MM-DD HH:mm') }}
+                    </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
+                      v-for="subComment in it.children.sort((a, b) => a.createTime - b.createTime)"
+                      :key="subComment.commentId"
+                      class="text-14px"
+                      style="line-height: 24px"
+                    >
+                      <span class="font-bold">{{ subComment.creatorName }}：</span>
+                      <span>
+                        {{ subComment.content }}
+                      </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-mention
+                        v-model="form.commentValue"
+                        type="textarea"
+                        :autosize="{ minRows: 4 }"
+                        :options="employeeOptions"
+                        style="width: 100%"
+                        size="small"
+                        whole
+                        placeholder="请输入评论"
+                        @select="handleMention"
+                      >
+                        <template #label="{ item }">
+                          <div class="flex items-center justify-between h-full">
+                            <span class="text-14px text-dark-700">{{ item.name }}</span>
+                            <span class="text-12px text-gray-400">{{ item.dept }}</span>
+                          </div>
+                        </template>
+                      </el-mention>
+                      <el-button
+                        type="primary"
+                        size="small"
+                        style="position: absolute; right: 2px; bottom: 2px"
+                        @click="handleSendCommnet(index)"
+                      >
+                        发布
+                      </el-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="进度历史" name="history" key="history">
+              <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
+                <el-timeline class="ml-10px">
+                  <el-timeline-item
+                    v-for="item in nodeRecords"
+                    :key="item.recordId"
+                    placement="bottom"
+                    :timestamp="formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')"
+                    color="#30d1fc"
+                  >
+                    <div>{{ item.creator }}</div>
+                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
+                      {{ item.content }}
+                    </div>
+                  </el-timeline-item>
+                </el-timeline>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="DialogOkr">
+import { formatDate } from '@/utils/formatTime'
+import OkrTable from './OkrTable.vue'
+
+import { getOkrNodeDetail, getOkrNodeHistory } from '@/api/okr/okr'
+import {
+  getCommentTypeOptions,
+  createComment,
+  getCommentPage,
+  likeComment
+} from '@/api/okr/comment'
+import { listToTree } from '@/utils/tree'
+import { getEmployeeSimpleList } from '@/api/pers/employee'
+import { useUserStore } from '@/store/modules/user'
+
+const message = useMessage()
+const userStore = useUserStore()
+const currentUserId = userStore.getUser.id
+const emit = defineEmits(['edit', 'close'])
+
+const show = ref(false)
+
+watch(
+  () => show.value,
+  (newValue, oldValue) => {
+    if (oldValue && !newValue) {
+      emit('close', nodeInfo.value)
+    }
+  }
+)
+
+const canEdit = ref(false)
+
+const toolbarConfig = {
+  toolbarKeys: [
+    'bold', // 加粗
+    'underline', // 下划线
+    'italic', // 斜体
+    'color', // 文字颜色
+    'bgColor', // 背景色
+    'fontSize', // 字号
+    'bulletedList', // 无序列表
+    'numberedList', // 有序列表
+    'insertTable', // 插入表格
+    'insertLink', // 插入链接
+    'undo' // 撤销
+  ]
+}
+
+const workIndex = ref('okr')
+const okrList = ref([])
+const childNodeList = ref([])
+const sideIndex = ref('subNode')
+
+const okrTableRef = ref(null)
+const nodeInfo = ref({})
+
+const nodeRecords = ref([])
+const commentTypeOptions = ref([])
+
+const queryType = ref(1)
+function open(curNode) {
+  canEdit.value = curNode.canEdit
+  nodeInfo.value.nodeId = curNode.nodeId
+  queryType.value = curNode.queryType
+  // 获取数据详情
+  searchInfo(curNode)
+  show.value = true
+}
+
+const employeeOptions = ref([])
+
+function searchInfo(curNode) {
+  try {
+    getOkrNodeDetail({ nodeId: curNode.nodeId, queryType: queryType.value }).then((resp) => {
+      nodeInfo.value = {
+        ...resp,
+        executor: resp.executor || []
+      }
+      canEdit.value = canEdit.value && nodeInfo.value.executor.includes(currentUserId + '')
+      if (resp.objectives) {
+        okrList.value = resp.objectives.map((item) => ({
+          ...item,
+          keyResults: item.keyResults || []
+        }))
+      } else {
+        okrList.value = []
+      }
+      childNodeList.value = [...resp.children]
+      nextTick(() => {
+        okrTableRef.value.prepareData(okrList.value)
+      })
+    })
+    getOkrNodeHistory(curNode.nodeId).then((resp) => {
+      nodeRecords.value = resp
+    })
+    getEmployeeSimpleList({ status: 0 }).then((resp) => {
+      employeeOptions.value = resp.map((item) => ({
+        ...item,
+        label: item.name,
+        value: item.name
+      }))
+    })
+    getCommentTypeOptions().then((resp) => {
+      commentTypeOptions.value = resp
+    })
+    searchCommentList()
+  } finally {
+  }
+}
+
+function close() {
+  show.value = false
+}
+
+defineExpose({ open, close })
+
+function handleMention(item) {
+  form.value.mentionedUserIdList.push(item.id)
+}
+
+function handleSaveProcess() {
+  okrTableRef.value.updateProcess(nodeInfo.value.nodeId).then(() => {
+    message.success('更新成功')
+    searchInfo({ nodeId: nodeInfo.value.nodeId })
+  })
+}
+
+function handleChildItem(item) {
+  const arr = item.executor || []
+  const isExecutor = arr.includes(currentUserId)
+  canEdit.value = isExecutor && (!item.children || item.children.length == 0)
+  searchInfo(item)
+}
+
+const addNewComment = ref(false)
+const form = ref({
+  commentValue: '',
+  commentType: undefined,
+  mentionedUserIdList: []
+})
+function handleInsertComment() {
+  addNewComment.value = true
+  const defaultComment = commentTypeOptions.value[0]
+  if (defaultComment) {
+    form.value = {
+      commentType: defaultComment.id,
+      mentionedUserIdList: []
+    }
+  }
+  getCommentTemplate()
+}
+
+function getCommentTemplate() {
+  if (form.value.commentType) {
+    form.value.commentValue = commentTypeOptions.value.find(
+      (item) => item.id == form.value.commentType
+    ).remark
+  } else {
+    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
+  try {
+    const data = {
+      businessType: 1,
+      businessId: nodeInfo.value.nodeId,
+      contentType: 1,
+      content: form.value.commentValue,
+      mentionedUserIdList: form.value.mentionedUserIdList
+    }
+    createComment(data)
+      .then(() => {
+        message.success('评论成功')
+        searchCommentList()
+      })
+      .finally(() => {
+        form.value.commentValue = ''
+      })
+  } catch (error) {
+    message.error('评论失败')
+  }
+}
+const commentList = ref([])
+
+function searchCommentList() {
+  getCommentPage({
+    businessType: 1,
+    businessId: nodeInfo.value.nodeId,
+    pageNum: 1,
+    pageSize: -1
+  }).then((resp) => {
+    commentList.value = listToTree(resp.list, {
+      id: 'commentId',
+      pid: 'parentId',
+      children: 'children'
+    })
+  })
+}
+
+function good(item) {
+  likeComment(item.commentId).then(() => {
+    message.success('点赞成功')
+    searchCommentList()
+  })
+}
+
+const showCommentIndex = ref(-1)
+function showComment(index) {
+  showCommentIndex.value = showCommentIndex.value == index ? -1 : index
+}
+
+function handleSendCommnet(idx) {
+  try {
+    // 过滤掉删除的用户，方式为遍历mentionedUserIdList，查找评论中是否有对应的用户名
+    const userList = [...form.value.mentionedUserIdList]
+    const arr = []
+    userList.map((item) => {
+      if (form.value.commentValue.indexOf(`@${item.name}`) != -1) {
+        arr.push(item.id)
+        // 然后移除对应的用户名，防止有多个
+        form.value.commentValue = form.value.commentValue.replace(`@${item.name}`, '')
+      }
+    })
+    const data = {
+      businessType: 1,
+      businessId: nodeInfo.value.nodeId,
+      contentType: 1,
+      content: form.value.commentValue,
+      mentionedUserIdList: arr,
+      parentId: commentList.value[idx].commentId
+    }
+    createComment(data)
+      .then(() => {
+        message.success('评论成功')
+        searchCommentList()
+      })
+      .finally(() => {
+        form.value.commentValue = ''
+      })
+  } catch (error) {
+    message.error('评论失败')
+  }
+}
+</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 {
+        display: flex;
+        flex-direction: column;
+        height: calc(100% - 15px);
+      }
+    }
+    .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>

src/views/OKR/Management/Components/DialogOkrInfo.vue

@@ -0,0 +1,632 @@
+<template>
+  <el-dialog
+    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"> {{ title }} </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" v-loading="formLoading">
+        <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
+          <el-row :gutter="10">
+            <el-col :span="4" :offset="0">
+              <el-form-item prop="parentId">
+                <el-tree-select
+                  v-model="form.parentId"
+                  :data="parentNodeList"
+                  check-strictly
+                  :props="{ value: 'nodeId', label: 'nodeName', children: 'children' }"
+                  :render-after-expand="false"
+                  placeholder="父节点"
+                  clearable
+                  :disabled="!!form.nodeId"
+                  @change="handleChangeParent"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item prop="nodeName">
+                <el-input v-model="form.nodeName" placeholder="请输入节点名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item prop="startTime">
+                <el-date-picker
+                  v-model="form.startTime"
+                  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 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 prop="executor">
+                <el-select
+                  v-model="form.executor"
+                  placeholder="选择执行人，可多选"
+                  multiple
+                  collapse-tags
+                  collapse-tags-tooltip
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in userOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id + ''"
+                    :disabled="item.status == 1"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" :offset="0">
+              <el-form-item prop="dataScope">
+                <el-select v-model="form.dataScope" placeholder="选择权限" clearable filterable>
+                  <el-option label="公开" :value="1" />
+                  <el-option label="仅上级可见" :value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="relative">
+          <el-button
+            v-if="okrKey == 'okr'"
+            style="position: absolute; right: 10px; top: 10px; z-index: 9"
+            type="primary"
+            size="small"
+            @click="addObjective"
+          >
+            添加目标
+          </el-button>
+          <el-button
+            v-else-if="okrKey == 'childNode'"
+            style="position: absolute; right: 10px; top: 10px; z-index: 9"
+            type="primary"
+            size="small"
+            @click="addChildNode"
+          >
+            添加子节点
+          </el-button>
+          <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.objectiveId"
+                  style="padding-bottom: 5px"
+                >
+                  <div class="flex-1 w-100px">
+                    <div class="flex items-center">
+                      <el-tooltip content="点击可折叠/展开目标" placement="top" effect="dark">
+                        <el-tag
+                          type="success"
+                          class="mr-10px"
+                          @click="item.hideChild = !item.hideChild"
+                        >
+                          O{{ i + 1 }}
+                        </el-tag>
+                      </el-tooltip>
+
+                      <el-input
+                        v-model="item.objectiveName"
+                        placeholder="目标名称"
+                        class="flex-1 w-150px"
+                        :disabled="!!item.objectiveId"
+                      />
+                      <el-select
+                        v-model="item.executor"
+                        placeholder="选择执行人，可多选"
+                        multiple
+                        clearable
+                        collapse-tags
+                        filterable
+                        style="width: 240px; margin-left: 10px"
+                      >
+                        <el-option
+                          v-for="it in userOptions"
+                          :key="it.id"
+                          :label="it.name"
+                          :value="it.id + ''"
+                          :disabled="it.status == 1"
+                        />
+                      </el-select>
+                      <el-select
+                        v-model="item.dataScope"
+                        placeholder="选择权限"
+                        clearable
+                        filterable
+                        style="width: 120px; margin-left: 10px"
+                      >
+                        <el-option label="公开" :value="1" />
+                        <el-option label="仅上级可见" :value="2" />
+                      </el-select>
+                      <div class="ml-10px">
+                        <el-button type="primary" text @click="AddKR(i)">新增关键成果</el-button>
+                        <el-button type="danger" text @click="removeObj(i)">删除目标</el-button>
+                      </div>
+                    </div>
+                    <div v-if="!item.hideChild" style="background: #f0f3fa; padding-bottom: 10px">
+                      <div
+                        class="ml-50px"
+                        v-for="(kr, index) in item.keyResults"
+                        :key="kr.keyResultId"
+                      >
+                        <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.keyResultName"
+                            placeholder="选择或输入关键成果"
+                            filterable
+                            :props="{ value: 'keyResultId', label: 'keyResultName' }"
+                            allow-create
+                            :reserve-keyword="false"
+                            class="flex-1 w-150px"
+                            @change="krChange(i, index)"
+                          >
+                            <el-option
+                              v-for="it in krOptions"
+                              :key="it.value"
+                              :label="it.label"
+                              :value="it.value"
+                            />
+                          </el-select>
+                          <el-button type="danger" text @click="removeKR(i, index)">
+                            删除关键成果
+                          </el-button>
+                        </div>
+                        <div class="mt-5px flex items-center">
+                          <el-tree-select
+                            v-model="kr.source"
+                            :data="sourceOptions"
+                            :props="defaultProps"
+                            check-strictly
+                            clearable
+                            filterable
+                            style="width: 200px"
+                            node-key="sourceId"
+                            placeholder="请选择渠道"
+                          />
+                          <!-- <el-radio-group v-model="kr.resultType" class="ml-10px">
+                            <el-radio-button :value="1">目标值</el-radio-button>
+                            <el-radio-button :value="2">是/否</el-radio-button>
+                          </el-radio-group> -->
+
+                          <el-input
+                            v-if="kr.resultType == 1"
+                            v-model="kr.targetValue"
+                            type="number"
+                            placeholder="目标值"
+                            class="ml-10px"
+                            style="width: 120px"
+                          />
+
+                          <el-select
+                            v-model="kr.executor"
+                            placeholder="选择执行人，可多选"
+                            multiple
+                            clearable
+                            filterable
+                            collapse-tags
+                            collapse-tags-tooltip
+                            style="width: 240px; margin-left: 10px"
+                          >
+                            <el-option
+                              v-for="it in userOptions"
+                              :key="it.id"
+                              :label="it.name"
+                              :value="it.id + ''"
+                              :disabled="it.status == 1"
+                            />
+                          </el-select>
+                          <el-select
+                            v-model="kr.dataScope"
+                            placeholder="选择权限"
+                            clearable
+                            filterable
+                            style="width: 120px; margin-left: 10px"
+                          >
+                            <el-option label="公开" :value="1" />
+                            <el-option label="仅上级可见" :value="2" />
+                          </el-select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- <div class="w-100px"></div> -->
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="子节点" name="childNode">
+              <el-table :data="childNodeList">
+                <el-table-column label="名称">
+                  <template #default="{ row }">
+                    <el-input v-model="row.nodeName" placeholder="子节点名称" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="开始日期" width="160px">
+                  <template #default="{ row }">
+                    <el-date-picker
+                      v-model="row.startTime"
+                      type="date"
+                      format="YYYY-MM-DD"
+                      value-format="YYYY-MM-DD"
+                      placeholder="选择日期时间"
+                      style="width: 130px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="截止日期" width="160px">
+                  <template #default="{ row }">
+                    <el-date-picker
+                      v-model="row.endTime"
+                      type="date"
+                      format="YYYY-MM-DD"
+                      value-format="YYYY-MM-DD"
+                      placeholder="选择日期时间"
+                      style="width: 130px"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="权限" width="160px">
+                  <template #default="{ row }">
+                    <el-select v-model="row.dataScope" placeholder="请选择" style="width: 130px">
+                      <el-option label="公开" :value="1" />
+                      <el-option label="仅上级可见" :value="2" />
+                    </el-select>
+                  </template>
+                </el-table-column>
+                <el-table-column label="执行人" width="300px">
+                  <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 + ''"
+                        :disabled="item.status == 1"
+                      />
+                    </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>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup name="DialogOkrInfo">
+import {
+  getAllNodeTree,
+  getOkrNodeDetail,
+  createOkrNode,
+  updateOkrNode,
+  getAllOkrPage,
+  getDefaultOkrOptions,
+  getChannelOptions
+} from '@/api/okr/okr'
+import { listToTree } from '@/utils/tree'
+import { getEmployeeSimpleList } from '@/api/pers/employee'
+
+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({
+  nodeName: { required: true, message: '节点名称不可为空', trigger: 'blur' },
+  startTime: { required: true, message: '开始日期不可为空', trigger: 'change' },
+  endTime: { required: true, message: '截止日期不可为空', trigger: 'change' }
+})
+
+const okrKey = ref('okr')
+
+const parentNodeList = ref([])
+
+const childNodeList = ref([])
+
+const userOptions = ref([])
+const krOptions = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'sourceName',
+  value: 'sourceId',
+  isLeaf: 'leaf'
+}
+const sourceOptions = ref([])
+const objectList = ref([])
+function open(type, val, queryType) {
+  show.value = true
+  title.value = type == 'update' ? '修改Okr' : '新增Okr'
+  formType.value = type
+  resetForm()
+  getEmployeeSimpleList().then((data) => {
+    userOptions.value = data
+  })
+  getAllNodeTree().then((resp) => {
+    parentNodeList.value = listToTree(resp.tree, {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+  })
+  getDefaultOkrOptions().then((resp) => {
+    krOptions.value = resp
+  })
+  getChannelOptions().then((resp) => {
+    sourceOptions.value = listToTree(resp, {
+      id: 'sourceId',
+      pid: 'parentId',
+      children: 'children'
+    })
+  })
+  if (val) {
+    formLoading.value = true
+    try {
+      getOkrNodeDetail({
+        nodeId: val,
+        queryType
+      }).then((resp) => {
+        form.value = resp
+        if (resp.objectives) {
+          objectList.value = resp.objectives.map((item) => ({
+            ...item,
+            keyResults: item.keyResults || []
+          }))
+        } else {
+          objectList.value = []
+        }
+        childNodeList.value = [...resp.children]
+      })
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+function resetForm() {
+  form.value = {
+    parentId: undefined,
+    nodeName: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    executor: [],
+    dataScope: 1
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const formRef = ref()
+/** 提交表单 */
+const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调
+
+function addObjective() {
+  objectList.value.push({
+    objectiveName: '',
+    executor: [],
+    keyResults: [],
+    dataScope: 1
+  })
+}
+
+function AddKR(idx) {
+  if (!objectList.value[idx].keyResults) {
+    objectList.value[idx].keyResults = []
+  }
+  const obj = objectList.value[idx]
+  objectList.value[idx].keyResults.push({
+    keyResultName: undefined,
+    resultType: 1,
+    source: undefined,
+    targetValue: undefined,
+    process: undefined,
+    currentValue: undefined,
+    executor: obj.executor,
+    dataScope: obj.dataScope
+  })
+}
+
+function removeObj(idx) {
+  objectList.value.splice(idx, 1)
+}
+
+function removeKR(oIdx, krIdx) {
+  objectList.value[oIdx].keyResults.splice(krIdx, 1)
+}
+
+function addChildNode() {
+  childNodeList.value.push({ dataScope: 1 })
+}
+
+function removeChildNode(idx) {
+  childNodeList.value.splice(idx, 1)
+}
+
+// 读取父节点的OKR，并展示出来
+function handleChangeParent() {
+  // 通过父节点Id,查询父节点的okr，需要继承
+  if (form.value.parentId) {
+    getAllOkrPage({ nodeId: form.value.parentId }).then((resp) => {
+      objectList.value = resp
+    })
+  }
+}
+
+function getLastDayOfMonth(year, month) {
+  // 创建一个日期对象，将月份设置为指定月份的下一个月，日期设置为 0
+  const date = new Date(year, month + 1, 0)
+  // 返回该日期对象的日期部分，即指定年月的最后一天
+  return date.getDate()
+}
+
+function krChange(idx, krIdx) {
+  const kr = objectList.value[idx].keyResults[krIdx]
+  if (kr.keyResultName) {
+    const obj = krOptions.value.find((item) => item.value == kr.keyResultName)
+    if (obj) {
+      kr.isSys = true
+    } else {
+      kr.isSys = false
+    }
+  }
+}
+
+async function handleSave() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  form.value.executor = form.value.executor || []
+  if (form.value.executor.length > 1) {
+    message
+      .confirm('是否按照当前节点所选的多个执行人自动新增对应的员工节点？', {
+        type: 'warning',
+        showCancelButton: true,
+        cancelButtonText: '取消',
+        confirmButtonText: '确定'
+      })
+      .then(() => {
+        saveOkrData(true)
+      })
+      .catch(() => {
+        saveOkrData(false)
+      })
+  } else {
+    saveOkrData(false)
+  }
+}
+
+async function saveOkrData(isAutoAddChild = false) {
+  // 提交请求
+  formLoading.value = true
+  try {
+    form.value.isAutoAddChild = isAutoAddChild
+    form.value.objectives = objectList.value
+    form.value.children = childNodeList.value
+    if (formType.value === 'create') {
+      // 创建的是一级节点,且子节点为空时，自动新增12个月子节点，并且每月添加4周的周子节点
+      if (!form.value.parentId) {
+        if (form.value.children.length == 0) {
+          const defaultTime = new Date(form.value.startTime)
+          for (let month = 0; month < 12; month++) {
+            form.value.children.push({
+              nodeName: `${month + 1}月`,
+              startTime: `${defaultTime.getFullYear()}-${String(month + 1).padStart(2, '0')}-01`,
+              endTime: `${defaultTime.getFullYear()}-${String(month + 1).padStart(
+                2,
+                '0'
+              )}-${getLastDayOfMonth(defaultTime.getFullYear(), month)}`,
+              children: [
+                {
+                  nodeName: `${month + 1}月第1周`,
+                  children: []
+                },
+                {
+                  nodeName: `${month + 1}月第2周`,
+                  children: []
+                },
+                {
+                  nodeName: `${month + 1}月第3周`,
+                  children: []
+                },
+                {
+                  nodeName: `${month + 1}月第4周`,
+                  children: []
+                }
+              ]
+            })
+          }
+        }
+      }
+      await createOkrNode(form.value)
+      message.success(t('common.createSuccess'))
+    } else {
+      await updateOkrNode(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>

src/views/OKR/Management/Components/MyDuty.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="flex items-center justify-between">
+      <el-row>
+        <el-tree-select
+          v-model="searchForm.nodeId"
+          :data="peroidList"
+          :props="defaultProps"
+          :render-after-expand="false"
+          :default-expand-all="false"
+          style="width: 400px"
+          @change="getOkrList"
+        />
+      </el-row>
+      <el-row>
+        <el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
+        <el-button type="success" @click="handleUpdateProcess">更新进度</el-button>
+      </el-row>
+    </div>
+
+    <OkrTable ref="okrTableRef" canEdit />
+    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
+    <DialogOkrInfo ref="dialogOkrInfo" />
+  </div>
+</template>
+
+<script setup name="MyDuty">
+import OkrTable from './OkrTable.vue'
+import DialogOkrInfo from './DialogOkrInfo.vue'
+import DialogOkr from './DialogOkr.vue'
+import { listToTree } from '@/utils/tree'
+
+import { getMyNodeTree, getMyOkrPage } from '@/api/okr/okr'
+
+const message = useMessage()
+
+const defaultProps = {
+  value: 'nodeId',
+  label: 'nodeName',
+  children: 'children'
+}
+
+const okrTableRef = ref(null)
+const searchForm = ref({
+  nodeId: undefined
+})
+
+const peroidList = ref([])
+
+// onMounted(() => {
+handleSearchPeroid()
+// })
+
+function handleSearchPeroid() {
+  getMyNodeTree().then((resp) => {
+    peroidList.value = listToTree(resp?.tree || [], {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+    searchForm.value.nodeId = resp.nodeId
+    getOkrList()
+  })
+}
+
+function getOkrList() {
+  getMyOkrPage(searchForm.value).then((resp) => {
+    const list = resp
+    if (list && list.length > 0) {
+      nextTick(() => {
+        okrTableRef.value.prepareData(list)
+      })
+    } else {
+      // 如果没有数据，清空表格
+      okrTableRef.value.prepareData([])
+    }
+  })
+}
+
+const dialogOkrInfo = ref(null)
+// function handleAddNode() {
+//   dialogOkrInfo.value.open('create', null)
+// }
+
+function handleEditOkr(nodeId = undefined) {
+  dialogOkr.value.close()
+  dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 1)
+}
+
+function handleUpdateProcess() {
+  okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => {
+    message.success('更新成功')
+    getOkrList()
+  })
+}
+
+const dialogOkr = ref(null)
+function handleShowOkr(id) {
+  dialogOkr.value.open({
+    nodeId: id,
+    canEdit: true,
+    queryType: 1
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-overlay-dialog) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/OKR/Management/Components/MySon.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="h-full flex flex-col">
+    <div class="flex items-center justify-between">
+      <el-row>
+        <el-tree-select
+          v-model="searchForm.nodeId"
+          :data="peroidList"
+          :props="defaultProps"
+          :render-after-expand="false"
+          :default-expand-all="false"
+          style="width: 400px"
+          @change="nodeChange"
+        />
+      </el-row>
+      <el-row>
+        <el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
+        <el-button
+          type="warning"
+          v-if="currentUserId == searchForm.creatorId"
+          @click="handleEditOkr(searchForm.nodeId)"
+        >
+          修改当前节点
+        </el-button>
+      </el-row>
+    </div>
+
+    <OkrTable ref="okrTableRef" canEdit />
+    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
+    <DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" />
+  </div>
+</template>
+
+<script setup name="MySon">
+import OkrTable from './OkrTable.vue'
+import DialogOkr from './DialogOkr.vue'
+import DialogOkrInfo from './DialogOkrInfo.vue'
+import { listToTree, findNode } from '@/utils/tree'
+import { useUserStore } from '@/store/modules/user'
+
+import { getMySonNodeTree, getMySonOkrPage } from '@/api/okr/okr'
+
+const props = defineProps({
+  userId: {
+    type: Number,
+    default: undefined
+  }
+})
+
+const defaultProps = {
+  value: 'nodeId',
+  label: 'nodeName',
+  children: 'children'
+}
+
+const userStore = useUserStore()
+const currentUserId = userStore.getUser.id
+
+const okrTableRef = ref(null)
+const searchForm = ref({
+  nodeId: undefined
+})
+
+const peroidList = ref([])
+
+handleSearchPeroid()
+
+function handleSearchPeroid() {
+  getMySonNodeTree({ userId: props.userId }).then((resp) => {
+    peroidList.value = listToTree(resp?.tree || [], {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+    nodeChange(resp.nodeId)
+  })
+}
+
+function getOkrList() {
+  getMySonOkrPage({
+    ...searchForm.value,
+    userId: props.userId
+  }).then((resp) => {
+    if (resp && resp.length > 0) {
+      nextTick(() => {
+        okrTableRef.value.prepareData(resp)
+      })
+    } else {
+      // 如果没有数据，清空表格
+      okrTableRef.value.prepareData([])
+    }
+  })
+}
+
+function nodeChange(nodeId) {
+  searchForm.value.nodeId = nodeId
+  getOkrList()
+  const currentNode = findNode(peroidList.value, (node) => {
+    return node.nodeId == nodeId
+  })
+  searchForm.value.creatorId = currentNode.creatorId
+}
+
+const dialogOkr = ref(null)
+function handleShowOkr(id) {
+  dialogOkr.value.open({
+    nodeId: id,
+    canEdit: true,
+    queryType: 2
+  })
+}
+
+const dialogOkrInfo = ref(null)
+function handleEditOkr(nodeId = undefined) {
+  dialogOkr.value.close()
+  dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2)
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-overlay-dialog) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/OKR/Management/Components/ObjectList.vue

@@ -0,0 +1,270 @@
+<template>
+  <div style="height: 100vh">
+    <div class="flex items-center">
+      <el-popover placement="bottom" width="500px" trigger="click" @show="handleSearchPeroid">
+        <template #reference>
+          <div class="flex items-center border-1px w-300px h-32px p-10px peroid-select">
+            <Icon icon="ep:calendar" style="color: #aaa" />
+            <span class="text-14px ml-10px" style="color: #aaa">
+              {{ searchForm.nodeName ? searchForm.nodeName : '选择周期' }}
+            </span>
+          </div>
+        </template>
+        <div>
+          <div class="mt-10px" style="height: 400px">
+            <el-table :data="peroidList" @row-click="handleSelectPeroid">
+              <el-table-column label="节点名称">
+                <template #default="{ row }">
+                  <el-radio v-model="searchForm.nodeId" :label="row.nodeId">{{
+                    row.nodeName
+                  }}</el-radio>
+                </template>
+              </el-table-column>
+              <el-table-column label="开始日期" prop="startTime" width="120" />
+              <el-table-column label="截止日期" prop="endTime" width="120" />
+            </el-table>
+          </div>
+        </div>
+      </el-popover>
+      <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
+    </div>
+
+    <vue3-tree-org
+      ref="treeOrgRef"
+      :data="dataList"
+      center
+      collapsable
+      :default-expand-keys="lastExpendKeys"
+      :props="treeProps"
+      @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"> 目标数： {{ getNodePropData(node.id, 'objectiveNum') }}</div>
+                  <!-- 执行人 -->
+                  <div class="tip">
+                    执行人： {{ getNodePropData(node.id, 'executorName') || '无' }}
+                  </div>
+                </div>
+              </template>
+              <template #default>
+                <div style="font-size: 0.875rem; line-height: 1.5">
+                  <div v-for="i in getNodePropData(node.id, 'objectives')" :key="i.id" class="mt-5">
+                    <span style="color: #aaa">{{ parseInt(i.progress) }}%</span>
+                    <span style="margin-left: 0.5rem">
+                      {{ i.objectiveName }}
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </el-popover>
+          </div>
+          <div class="p-5px">
+            <el-progress
+              type="line"
+              :percentage="parseInt(getNodePropData(node.id, 'progress')) || 0"
+              text-inside
+              :stroke-width="12"
+            />
+          </div>
+        </div>
+      </template>
+    </vue3-tree-org>
+    <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
+    <DialogOkrInfo ref="dialogOkrInfo" @close="openOkr" @success="resetTreeData" />
+  </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'
+
+import { getOkrRelationTree, getOkrRelationTreeChildren } from '@/api/okr/okr'
+import { listToTree } from '@/utils/tree'
+
+const dataList = ref({})
+const helpDataList = ref([])
+const lastExpendKeys = ref([])
+const treeProps = {
+  children: 'children',
+  label: 'nodeName',
+  id: 'nodeId',
+  pid: 'parentId'
+}
+
+const searchForm = ref({
+  nodeName: '',
+  nodeId: null
+})
+
+const peroidList = ref([])
+
+handleSearchPeroid()
+
+function handleSearchPeroid() {
+  lastExpendKeys.value = []
+  getOkrRelationTree().then((resp) => {
+    peroidList.value = resp
+    if (resp && resp.length && !searchForm.value.nodeId) {
+      searchForm.value.nodeId = resp[0].nodeId
+      searchForm.value.nodeName = resp[0].nodeName
+      getOkrList()
+    }
+  })
+}
+
+const treeOrgRef = ref(null)
+function resetTreeData() {
+  if (treeOrgRef.value) {
+    lastExpendKeys.value = treeOrgRef.value.getExpandKeys()
+  }
+
+  // 重新获取tree数据
+  getOkrRelationTree().then((resp) => {
+    peroidList.value = resp
+    if (resp && resp.length) {
+      if (!searchForm.value.nodeId) {
+        searchForm.value.nodeId = resp[0].nodeId
+        searchForm.value.nodeName = resp[0].nodeName
+      }
+      getOkrRelationTreeChildren({
+        nodeId: searchForm.value.nodeId
+      }).then((resp) => {
+        const tree = listToTree(resp, {
+          id: 'nodeId',
+          pid: 'parentId',
+          children: 'children'
+        })
+        // // 设置展开的keys
+        // if (treeOrgRef.value) {
+        //   treeOrgRef.value.setExpandKeys(lastExpendKeys.value)
+        // }
+        helpDataList.value = resp
+        if (tree && tree.length) {
+          dataList.value = tree[0]
+        } else {
+          dataList.value = {}
+        }
+      })
+    }
+  })
+}
+
+function getOkrList() {
+  getOkrRelationTreeChildren({
+    nodeId: searchForm.value.nodeId
+  }).then((resp) => {
+    const tree = listToTree(resp, {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+    helpDataList.value = resp
+    if (tree && tree.length) {
+      dataList.value = tree[0]
+    } else {
+      dataList.value = {}
+    }
+  })
+}
+
+function handleSelectPeroid(row) {
+  searchForm.value.nodeName = row.nodeName
+  searchForm.value.nodeId = row.nodeId
+  getOkrList()
+}
+
+function getNodePropData(nodeId, prop) {
+  const nodeData = helpDataList.value.find((it) => it.nodeId == nodeId)
+  if (nodeData) {
+    return nodeData[prop]
+  } else {
+    return ''
+  }
+}
+
+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 clickNode = ref(null)
+function handleClickNode(node, data) {
+  clickNode.value = data
+  openOkr()
+}
+
+function openOkr() {
+  clickNode.value &&
+    dialogOkr.value.open({
+      nodeId: clickNode.value.nodeId,
+      queryType: 2,
+      canEdit: !clickNode.value.children || clickNode.value.children.length == 0
+    })
+}
+
+const dialogOkrInfo = ref(null)
+function handleAddNode() {
+  clickNode.value = null
+  dialogOkrInfo.value.open('create', null)
+}
+
+function handleEditOkr(nodeId = undefined) {
+  dialogOkr.value.close()
+  dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2)
+}
+</script>
+
+<style lang="scss" scoped>
+.peroid-select {
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover {
+    border-color: var(--el-color-primary-light-5);
+  }
+}
+
+.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;
+}
+</style>

src/views/OKR/Management/Components/OkrTable.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="flex-1 h-200px overflow-hidden">
+    <el-table
+      ref="tableRef"
+      :data="okrList"
+      default-expand-all
+      row-key="id"
+      size="large"
+      height="100%"
+      @row-click="handleRowClick"
+      @expand-change="handleExpand"
+    >
+      <el-table-column label="目标/关键成果">
+        <template #default="{ row, $index }">
+          <span
+            v-if="!expandedRows[row.id]"
+            class="line1"
+            :style="{
+              top: row.type == '目标' ? '30px' : 0,
+              height: getHeight(row, $index)
+            }"
+          ></span>
+          <span v-if="row.type == '目标'">
+            <el-tag type="success" size="small">目标</el-tag>
+            {{ row.name }}
+          </span>
+          <template v-else>
+            <span class="line2"></span>
+            <span>
+              <el-tag type="primary" size="small">关键成果</el-tag>
+              <span class="font-bold text-black" v-if="row.sourceName">
+                【{{ row.sourceName }}】
+              </span>
+              <span>{{ row.name }}</span>
+              <span v-if="row.resultType == 1">达 {{ row.targetValue }}</span>
+            </span>
+            <div class="flex items-center mt-10px ml-50px">
+              <span>当前进度：</span>
+              <span v-if="row.isSys || !props.canEdit">{{ row.currentValue }}</span>
+              <el-input
+                v-else-if="row.resultType == 1"
+                v-model="row.currentValue"
+                clearable
+                size="small"
+                style="width: 200px"
+              />
+              <el-radio-group
+                v-else-if="row.resultType == 2"
+                v-model="row.currentValue"
+                size="small"
+              >
+                <el-radio :value="1">是</el-radio>
+                <el-radio :value="0">否</el-radio>
+              </el-radio-group>
+            </div>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column prop="progress" label="进度" width="200px">
+        <template #default="{ row }">
+          <el-progress :percentage="parseInt(row.progress) || 0" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="executorName" label="执行人" width="200px" />
+    </el-table>
+  </div>
+</template>
+
+<script setup name="OkrTable">
+import { updateOkrProgress } from '@/api/okr/okr'
+
+const emit = defineEmits(['rowClick'])
+
+const props = defineProps({
+  canEdit: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const okrList = ref([])
+const helpList = ref([])
+
+function prepareData(list) {
+  if (!list || !Array.isArray(list) || list.length === 0) {
+    okrList.value = []
+    return
+  }
+  helpList.value = []
+  expandedRows.value = {}
+  okrList.value = list.map((item) => {
+    let obj = {
+      id: item.objectiveId,
+      name: item.objectiveName,
+      progress: item.progress,
+      executorName: item.executorName,
+      type: '目标'
+    }
+    helpList.value.push(obj)
+    if (item.keyResults) {
+      obj.children = item.keyResults.map((child) => {
+        let kr = {
+          id: child.keyResultId,
+          keyResultId: child.keyResultId,
+          objectiveId: child.objectiveId,
+          nodeId: child.nodeId,
+          isSys: child.isSys,
+          processId: child.id,
+          name: child.keyResultShowName,
+          progress: child.progress,
+          executorName: child.executorName,
+          type: '关键成果',
+          resultType: child.resultType,
+          targetValue: child.targetValue,
+          currentValue: Number(child.currentValue),
+          sourceName: child.sourceName
+        }
+        helpList.value.push(kr)
+        return kr
+      })
+    }
+    return obj
+  })
+}
+
+defineExpose({
+  prepareData,
+  updateProcess
+})
+function getHeight(row, index) {
+  if (helpList.value.length - 1 == index || helpList.value[index + 1].type == '目标') {
+    return '22px'
+  } else {
+    return '100%'
+  }
+}
+
+const expandedRows = ref({})
+function handleExpand(row, expanded) {
+  expandedRows.value[row.id] = !expanded
+}
+
+function updateProcess(nodeId) {
+  return new Promise((resolve, reject) => {
+    try {
+      let arr = []
+      okrList.value.map((item) => {
+        arr = [...arr, ...(item.children || []).map((it) => ({ ...it, id: it.processId }))]
+      })
+      updateOkrProgress({
+        nodeId,
+        keyResultProgressList: arr
+      }).then((resp) => {
+        resolve(resp)
+      })
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+function handleRowClick(row) {
+  emit('rowClick', row)
+}
+</script>
+
+<style lang="scss" scoped>
+.line1 {
+  position: absolute;
+  width: 1px;
+  left: 21px;
+  border-left: 1px dashed #ccc;
+}
+.line2 {
+  position: absolute;
+  width: 26px;
+  height: 1px;
+  left: 21px;
+  top: 22px;
+  border-bottom: 1px dashed #ccc;
+  &::after {
+    position: absolute;
+    left: 25px;
+    top: -3px;
+    display: block;
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    margin: 0 auto;
+    border: 1px solid #ddd;
+    content: '';
+  }
+}
+</style>

src/views/OKR/Management/index.vue

@@ -0,0 +1,77 @@
+<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>

src/views/OKR/Wait/Components/DialogWait.vue

@@ -0,0 +1,347 @@
+<template>
+  <Dialog :title="title" v-model="show" :width="formType == 'create' ? '750px' : '1100px'">
+    <div class="flex items-baseline">
+      <el-form
+        :model="form"
+        ref="formRef"
+        :disabled="formType == 'do'"
+        :rules="rules"
+        label-width="80px"
+        class="flex-1"
+      >
+        <el-row :gutter="20">
+          <el-col :span="24" :offset="0">
+            <el-form-item label="标题" prop="title">
+              <el-input v-model="form.title" placeholder="请输入待办标题" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="内容" prop="content">
+              <Editor
+                v-model:modelValue="form.content"
+                height="400px"
+                :disabled="formType == 'do'"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="优先级" prop="priority">
+              <el-select v-model="form.priority" placeholder="选择优先级" filterable>
+                <el-option
+                  v-for="item in props.priorityOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="完成状态" prop="completeStatus">
+              <el-select v-model="form.completeStatus" placeholder="选择完成状态" filterable>
+                <el-option
+                  v-for="item in props.statusOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item label="截止日期" prop="endDate">
+              <el-date-picker
+                v-model="form.endDate"
+                type="date"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期时间"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <el-form-item label="执行人" prop="userList">
+              <el-select
+                v-model="form.userList"
+                placeholder="选择执行人，可多选"
+                multiple
+                clearable
+                filterable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in employeeOptions"
+                  :key="item.id"
+                  :disabled="item.status == 1"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="0">
+          <el-col :span="8" :offset="0">
+            <el-form-item prop="notifyType">
+              <template #label>
+                <el-tooltip
+                  content="新增待办时会立刻发送消息通知执行人，若后续无需再次提醒，频率可选择“不提醒”"
+                  placement="top"
+                  effect="dark"
+                >
+                  <Icon icon="ep:info-filled" :size="12" />
+                </el-tooltip>
+                <span>提醒频率</span>
+              </template>
+              <el-select v-model="form.notifyType" placeholder="选择提醒频率">
+                <el-option label="不提醒" value="1" />
+                <el-option label="单次提醒" value="2" />
+                <el-option label="循环提醒" value="3" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" :offset="0" v-if="form.notifyType != 1">
+            <el-form-item label="提醒时间" prop="remindTime" class="wait-form">
+              <el-input
+                v-if="form.notifyType == 2"
+                v-model="form.notifyBeforeTime"
+                placeholder="输入小时数"
+                min="0"
+                type="number"
+              >
+                <template #prepend>
+                  <span>提前</span>
+                </template>
+                <template #append> 小时 </template>
+              </el-input>
+              <el-input
+                v-else-if="form.notifyType == 3"
+                v-model="form.intervalTime"
+                placeholder="输入小时数"
+                min="0"
+                type="number"
+              >
+                <template #prepend>
+                  <span>每</span>
+                </template>
+                <template #append> 小时 </template>
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" :offset="0" v-if="form.notifyType == 3">
+            <el-form-item label="首次提醒" prop="firstNotifyTime">
+              <el-time-picker
+                v-model="form.firstNotifyTime"
+                format="HH:mm"
+                value-format="HH:mm"
+                style="width: 100%"
+                :picker-options="enableTimeRange"
+                placeholder="选择时间点"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div v-if="formType != 'create'" class="w-350px ml-10px h-full">
+        <div class="mb-10px" v-if="formType == 'do'">
+          <Editor
+            v-model:modelValue="form.followUpContent"
+            height="150px"
+            :toolbarConfig="toolbarConfig"
+          />
+          <el-button class="absolute" style="right: 20px; top: 195px" type="primary" @click="addDo">
+            更新进度
+          </el-button>
+        </div>
+        <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
+          <el-timeline class="ml-10px">
+            <el-timeline-item
+              v-for="item in followList"
+              :key="item.followId"
+              placement="bottom"
+              :timestamp="formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')"
+              color="#30d1fc"
+            >
+              <div class="font-bold" style="font-size: 16px">{{ item.followUserName }}</div>
+              <div v-dompurify-html="item.content"></div>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+      </div>
+    </div>
+
+    <template #footer v-if="formType != 'do'">
+      <span>
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" :disabled="formLoading" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </Dialog>
+</template>
+
+<script setup name="DialogWait">
+import {
+  createWait,
+  updateWait,
+  getWaitDetail,
+  getFollowWaitPage,
+  followWait
+} from '@/api/okr/wait'
+import { getEmployeeSimpleList } from '@/api/pers/employee'
+import { formatDate } from '@/utils/formatTime'
+
+const props = defineProps({
+  priorityOptions: {
+    type: Array,
+    default: () => [
+      { label: '高', value: '1' },
+      { label: '中', value: '2' },
+      { label: '低', value: '3' }
+    ]
+  },
+  statusOptions: {
+    type: Array,
+    default: () => [
+      { label: '未完成', value: '1', tagType: 'warning' },
+      { label: '已关闭', value: '2', tagType: 'success' }
+    ]
+  }
+})
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const toolbarConfig = {
+  toolbarKeys: []
+}
+
+const enableTimeRange = {
+  selectableRange: '07:00 - 22:00'
+}
+
+const show = ref(false)
+const title = ref('')
+const formType = ref('create')
+
+const form = ref({})
+const formLoading = ref(false)
+const rules = ref({
+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  endDate: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
+  userList: [{ required: true, message: '请选择执行人', trigger: 'change' }]
+})
+
+const followList = ref([])
+
+function open(type, id) {
+  show.value = true
+  title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type]
+  formType.value = type
+  resetForm()
+  if (id) {
+    formLoading.value = true
+    try {
+      // 表单数据
+      getWaitDetail(id).then((info) => {
+        form.value = {
+          ...info,
+          endDate: formatDate(info.endDate, 'YYYY-MM-DD'),
+          userList: info.userIdList
+        }
+      })
+      getFollowList(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  getOptions()
+}
+
+function getFollowList(id) {
+  // 跟进数据
+  getFollowWaitPage({
+    workId: id
+  }).then((data) => {
+    followList.value = data
+  })
+}
+
+function getOptions() {
+  getEmployeeSimpleList().then((data) => {
+    employeeOptions.value = data
+  })
+}
+
+function resetForm() {
+  form.value = {
+    title: undefined,
+    content: undefined,
+    priority: '1',
+    completeStatus: '1',
+    endDate: undefined,
+    userList: [],
+    notifyType: '3',
+    remindTime: 12,
+    firstNotifyTime: '09:00'
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const formRef = ref()
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+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 createWait(form.value)
+      message.success(t('common.createSuccess'))
+    } else {
+      await updateWait(form.value)
+      message.success(t('common.updateSuccess'))
+    }
+    show.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const employeeOptions = ref([])
+
+function addDo() {
+  followWait({
+    workId: form.value.workId,
+    content: form.value.followUpContent
+  }).then(() => {
+    message.success('跟进成功')
+    getFollowList(form.value.workId)
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.wait-form {
+  :deep(.el-input-group__prepend) {
+    padding: 0 10px;
+  }
+  :deep(.el-input-group__append) {
+    padding: 0 10px;
+  }
+  :deep(.el-input__inner) {
+    text-align: center;
+  }
+}
+</style>

src/views/OKR/Wait/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div>
+    <el-form :model="searchForm" inline label-width="0" @submit.prevent="searchList">
+      <el-form-item>
+        <el-input v-model="searchForm.title" placeholder="输入标题" />
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searchForm.priority" placeholder="选择优先级" clearable filterable>
+          <el-option
+            v-for="item in priorityOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item>
+        <el-select
+          v-model="searchForm.completeStatus"
+          placeholder="选择完成状态"
+          clearable
+          filterable
+        >
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button @click="searchList"> 搜索</el-button>
+        <el-button type="primary" @click="handleAdd"> 新增</el-button>
+      </el-form-item>
+    </el-form>
+    <el-tabs v-model="tabIndex" @tab-change="searchList">
+      <el-tab-pane :name="1">
+        <template #label>
+          <el-badge :value="tabCount.dayEndAgentWorkNum" :max="99" :show-zero="false">
+            <el-tooltip content="截止日在今日及之前的未关闭事项" placement="top" effect="dark">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+            <span>今日截止</span>
+          </el-badge>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane :name="2">
+        <template #label>
+          <el-tooltip content="需要我执行的全部事项" placement="top" effect="dark">
+            <Icon icon="ep:question-filled" />
+          </el-tooltip>
+          <span>我的待办</span>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane :name="3">
+        <template #label>
+          <el-badge :value="tabCount.urgeAgentWorkNum" :max="99" :show-zero="false">
+            <el-tooltip content="指派他人去办的事项" placement="top" effect="dark">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+            <span>催办事项</span>
+          </el-badge>
+        </template>
+      </el-tab-pane>
+      <el-tab-pane :name="4">
+        <template #label>
+          <el-badge :value="tabCount.notifyNum" :max="99" :show-zero="false">
+            <el-tooltip content="特指OKR中@我的消息" placement="top" effect="dark">
+              <Icon icon="ep:question-filled" />
+            </el-tooltip>
+            <span>通知我的</span>
+          </el-badge>
+        </template>
+        <el-table :data="mentionedList">
+          <el-table-column type="index" width="50" />
+          <el-table-column prop="content" label="okr标题" />
+          <el-table-column prop="createUserName" label="创建人" />
+          <el-table-column prop="createDate" label="创建日期" />
+          <el-table-column fixed="right" label="操作" width="140">
+            <template #default="{ row }">
+              <el-button style="padding: 0" type="primary" text @click="handleShow(row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-table v-if="tabIndex != 4" :data="tableList">
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="title" label="标题" />
+      <el-table-column prop="priority" label="优先级">
+        <template #default="{ row }">
+          <el-tag :type="priorityFilter(row.priority)">
+            {{ priorityNameFilter(row.priority) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="creatorName" label="创建人" />
+      <el-table-column prop="createTime" label="创建日期" :formatter="dateFormatter" />
+      <el-table-column prop="userNameStr" label="执行人" />
+      <el-table-column prop="endDate" label="截止日期" :formatter="dateFormatter" />
+      <el-table-column label="状态">
+        <template #default="{ row }">
+          <el-tag :type="statusFilter(row.completeStatus)">{{
+            statusNameFilter(row.completeStatus)
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="completedDate" label="关闭日期" :formatter="dateFormatter" />
+      <el-table-column fixed="right" label="操作" width="140">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.userIdList.includes(currentUserId) && row.completeStatus == 1"
+            style="padding: 0; margin-right: 10px"
+            type="primary"
+            text
+            @click="handleDo(row)"
+          >
+            跟进
+          </el-button>
+          <el-button
+            v-if="!row.userIdList.includes(currentUserId) && row.completeStatus == 1"
+            style="padding: 0; margin-right: 10px; margin-left: 0"
+            type="primary"
+            text
+            @click="handleNotice(row)"
+          >
+            催办
+          </el-button>
+          <el-button
+            v-if="row.creator == currentUserId && row.completeStatus == 1"
+            style="padding: 0; margin-right: 10px; margin-left: 0"
+            type="primary"
+            text
+            @click="handleEdit(row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            v-if="row.creator == currentUserId && row.completeStatus == 1"
+            style="padding: 0; margin-right: 10px; margin-left: 0"
+            type="danger"
+            text
+            @click="handleDelete(row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      v-model:limit="searchForm.pageSize"
+      v-model:page="searchForm.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <DialogWait ref="waitDialogRef" @success="getList" />
+  </div>
+</template>
+
+<script setup name="WaitTarget">
+import { useUserStore } from '@/store/modules/user'
+import { dateFormatter } from '@/utils/formatTime'
+import DialogWait from './Components/DialogWait.vue'
+
+import { getWaitPage, deleteWait, getWaitCount, urgeWait } from '@/api/okr/wait'
+
+const route = useRoute()
+const userStore = useUserStore()
+const currentUserId = userStore.getUser.id
+
+const message = useMessage()
+
+const searchForm = ref({
+  title: undefined,
+  completeStatus: undefined,
+  priority: undefined,
+  pageNo: 1,
+  pageSize: 50
+})
+
+const statusOptions = [
+  { label: '未完成', value: 1, tagType: 'warning' },
+  { label: '已关闭', value: 2, tagType: 'success' }
+]
+
+const statusFilter = (status) => {
+  return statusOptions.find((item) => item.value == status)?.tagType
+}
+
+const statusNameFilter = (status) => {
+  return statusOptions.find((item) => item.value == status)?.label
+}
+
+const priorityOptions = [
+  { label: '高', value: '1', tagType: 'danger' },
+  { label: '中', value: '2', tagType: 'warning' },
+  { label: '低', value: '3', tagType: 'info' }
+]
+
+const priorityFilter = (priority) => {
+  return priorityOptions.find((item) => item.value == priority)?.tagType
+}
+
+const priorityNameFilter = (priority) => {
+  return priorityOptions.find((item) => item.value == priority)?.label
+}
+
+const tabIndex = ref(1)
+
+onMounted(() => {
+  if (route?.query?.type) {
+    tabIndex.value = Number(route.query.type)
+  } else {
+    tabIndex.value = 1
+  }
+  searchList()
+})
+
+function searchList() {
+  searchForm.value.pageNo = 1
+  getList()
+}
+
+const tabCount = ref({
+  dayEndAgentWorkNum: 0,
+  myAgentWorkNum: 0,
+  urgeAgentWorkNum: 0,
+  notifyNum: 0
+})
+function getTabCount() {
+  getWaitCount({
+    title: searchForm.value.title,
+    priority: searchForm.value.priority
+  }).then((res) => {
+    tabCount.value = res
+  })
+}
+
+const loading = ref(false)
+const tableList = ref([])
+const mentionedList = ref([])
+const total = ref(0)
+function getList() {
+  loading.value = true
+  try {
+    searchForm.value.queryType = tabIndex.value
+    getWaitPage(searchForm.value).then((res) => {
+      tableList.value = res.list
+      total.value = res.total
+      loading.value = false
+    })
+    getTabCount()
+  } catch (error) {}
+}
+
+function handleDo(row) {
+  waitDialogRef.value.open('do', row.workId)
+}
+
+const waitDialogRef = ref()
+function handleAdd() {
+  waitDialogRef.value.open('create')
+}
+
+function handleEdit(row) {
+  waitDialogRef.value.open('update', row.workId)
+}
+
+function handleDelete(row) {
+  message.confirm('确定删除待办事项吗？').then(() => {
+    deleteWait(row.workId).then(() => {
+      message.success('删除成功')
+      getList()
+    })
+  })
+}
+
+function handleNotice(row) {
+  message.confirm('即将发送微信通知提醒执行人，是否继续？').then(() => {
+    urgeWait(row.workId).then(() => {
+      message.success('发送成功')
+    })
+  })
+}
+
+function handleShow(row) {
+  console.log(row)
+  message.success('打开okr详情页')
+}
+</script>
+
+<style lang="scss" scoped></style>

yarn.lock

@@ -1227,7 +1227,7 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
+"@element-plus/icons-vue@^2.1.0", "@element-plus/icons-vue@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
   integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
@@ -1961,6 +1961,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
+"@types/sortablejs@^1.15.8":
+  version "1.15.8"
+  resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.15.8.tgz#11ed555076046e00869a5ef85d1e7651e7a66ef6"
+  integrity sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==
+
 "@types/svgo@^2.6.1":
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/@types/svgo/-/svgo-2.6.4.tgz#b7298fc1dd687539fd63fc818b00146d96e68836"
@@ -3362,6 +3367,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.42.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.42.0.tgz#edbe91f78ac8cfb6df8d997e74d368a68082fe37"
+  integrity sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==
+
 cors@^2.8.5:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
@@ -3515,7 +3525,12 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-dayjs@^1.11.3, dayjs@^1.11.7:
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
+dayjs@^1.11.7:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
@@ -3827,20 +3842,20 @@ electron-to-chromium@^1.4.668:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.736.tgz#ecb4348f4d5c70fb1e31c347e5bad6b751066416"
   integrity sha512-Rer6wc3ynLelKNM4lOCg7/zPQj8tPOCB2hzD32PX9wd3hgRRi9MxEbmkFCokzcEhRVMiOVLjnL9ig9cefJ+6+Q==
 
-element-plus@2.3.4:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.3.4.tgz#4319f6b0a1096cfac9c53b69da2fe23ac5aea63e"
-  integrity sha512-SQr0J9z7N4z48WYk/l9NE2tizl8Q7j2OhqlpTc42k4pGncry3+rVX6dsmcsglFynn6vt3NzYxWJqmLFyDKQq+g==
+element-plus@2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.9.4.tgz#e4b75055f0f1b1c1f33186321eb3d7a6424051e5"
+  integrity sha512-sGnW0wd9zf6lEGixXV2gfwx3X6VTMkP52qTkX7zbURJ2oariyslrKTBh2txt1sdn1pUvj2l0KY3OfSXoZGmDOw==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
-    "@element-plus/icons-vue" "^2.0.6"
+    "@element-plus/icons-vue" "^2.3.1"
     "@floating-ui/dom" "^1.0.1"
     "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
     "@types/lodash" "^4.14.182"
     "@types/lodash-es" "^4.17.6"
     "@vueuse/core" "^9.1.0"
     async-validator "^4.2.5"
-    dayjs "^1.11.3"
+    dayjs "^1.11.13"
     escape-html "^1.0.3"
     lodash "^4.17.21"
     lodash-es "^4.17.21"
@@ -8161,6 +8176,13 @@ vue-dompurify-html@^5.0.1:
   dependencies:
     dompurify "^3.0.0"
 
+vue-draggable-plus@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/vue-draggable-plus/-/vue-draggable-plus-0.6.0.tgz#e4da6917e94ca73402f34113073f44771691fa5e"
+  integrity sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==
+  dependencies:
+    "@types/sortablejs" "^1.15.8"
+
 vue-eslint-parser@^9.4.2:
   version "9.4.2"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz#02ffcce82042b082292f2d1672514615f0d95b6d"
@@ -8215,6 +8237,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"