src/api/okr/okr.js

@@ -63,21 +63,3 @@ export const getAllOkrPage = (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 }
-  })
-}

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

@@ -7,15 +7,13 @@
           :data="peroidList"
           :props="defaultProps"
           :render-after-expand="false"
-          :default-expand-all="false"
+          default-expand-all
-          check-strictly
           style="width: 400px"
           @change="getOkrList"
         />
         <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" @click="handleEditOkr(searchForm.nodeId)">
           修改当前节点
         </el-button>
@@ -25,7 +23,7 @@
 
     <OkrTable ref="okrTableRef" />
     <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
-    <DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" />
+    <DialogOkrInfo ref="dialogOkrInfo" />
   </div>
 </template>
 
@@ -93,9 +91,9 @@ function handleUpdateProcess() {
 }
 
 const dialogOkr = ref(null)
-function handleShowOkr(id) {
+// function handleShowOkr(row) {
-  dialogOkr.value.open(id)
+//   dialogOkr.value.open(row.id)
-}
+// }
 </script>
 
 <style lang="scss" scoped>

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

@@ -18,7 +18,7 @@
           <span class="text-14px ml-0.25">ork落地</span>
           <div class="ml-20px text-14px">
             <span>【节点】</span>
-            <span>{{ nodeInfo.nodeName }}</span>
+            <span>寻驾全年目标 -> 1月</span>
           </div>
         </div>
         <div class="flex items-center">
@@ -43,25 +43,25 @@
             <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 class="basic-title-value">张三</div>
               </div>
               <div class="basic-title-item">
                 <div class="basic-title-label">执行人</div>
-                <div class="basic-title-value">{{ nodeInfo.executorName }}</div>
+                <div class="basic-title-value">张三、李四</div>
               </div>
               <div class="basic-title-item">
                 <div class="basic-title-label">目标数</div>
-                <div class="basic-title-value">{{ okrList.length }}</div>
+                <div class="basic-title-value">3</div>
               </div>
               <div class="basic-title-item" style="min-width: 200px">
                 <div class="basic-title-label">总体进度</div>
-                <el-progress :percentage="nodeInfo.progress || 0" :stroke-width="8" />
+                <el-progress :percentage="60" :stroke-width="8" />
               </div>
             </div>
             <div class="flex detail-basic-info">
-              <span>开始日期：{{ nodeInfo.startTime }}</span>
+              <span>开始日期：2025-01-01</span>
-              <span>截止日期：{{ nodeInfo.endTime }}</span>
+              <span>截止日期：2025-01-31</span>
-              <span>最新更新时间：{{ nodeInfo.updateTime }}</span>
+              <span>最新更新时间：2025-01-15</span>
             </div>
           </div>
           <div class="flex" style="position: relative; flex: 1; height: 100px">
@@ -82,8 +82,8 @@
             <el-tab-pane label="子节点" name="subNode">
               <div class="overflow-y-auto" style="height: calc(100% - 50px)">
                 <div
-                  v-for="item in childNodeList"
+                  v-for="index in 12"
-                  :key="item.nodeId"
+                  :key="index"
                   class="border-b-1 child-item"
                   style="padding: 10px 5px; cursor: pointer"
                   @click="handleChildItem"
@@ -92,33 +92,33 @@
                     class="flex justify-between items-center overflow-hidden text-16px"
                     style="line-height: 30px"
                   >
-                    <div class="child-label">【节点】{{ item.nodeName }}</div>
+                    <div class="child-label">【节点】子节点{{ index }}</div>
                     <el-progress
                       type="line"
-                      :percentage="item.progress || 0"
+                      :percentage="0"
                       :stroke-width="6"
                       style="width: 120px"
                     />
                   </div>
                   <div class="ml-10px flex items-center text-13px" style="line-height: 30px">
                     <span>目标数：</span>
-                    <span style="color: #aaa">{{ item.objectiveCount }}</span>
+                    <span style="color: #aaa">4</span>
                     <el-divider direction="vertical" style="margin: 0 20px" />
                     <div
                       class="flex-1 overflow-hidden h-30px"
                       style="text-overflow: ellipsis; white-space: nowrap"
                     >
                       <span>执行人：</span>
-                      <span style="color: #aaa">{{ item.executorName }}</span>
+                      <span style="color: #aaa">张三、李四、王二</span>
                     </div>
                   </div>
                   <div
                     class="ml-10px flex items-center text-12px"
                     style="line-height: 20px; color: #aaa"
                   >
-                    <span>开始日期：{{ item.startTime }}</span>
+                    <span>开始日期：2025-01-01</span>
                     <el-divider direction="vertical" style="margin: 0 20px" />
-                    <span>截止日期：{{ item.endTime }}</span>
+                    <span>截止日期：2025-01-31</span>
                   </div>
                 </div>
               </div>
@@ -244,16 +244,23 @@
             <el-tab-pane label="进度历史" name="history">
               <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
                 <el-timeline class="ml-10px">
-                  <el-timeline-item
+                  <el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
-                    v-for="item in nodeRecords"
+                    <div>张三</div>
-                    :key="item.recordId"
+                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
-                    placement="bottom"
+                      进度变化：40% -> 60%
-                    :timestamp="formatDate(item.createTime)"
+                      （节点进度是读取目标进度计算的，目标进度根据关键成果计算，关键成果在提交跟新时会有）
-                    color="#30d1fc"
+                    </div>
-                  >
+                  </el-timeline-item>
-                    <div>{{ item.creator }}</div>
+                  <el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
+                    <div>张三</div>
                     <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
-                      {{ item.content }}
+                      更新节点
+                    </div>
+                  </el-timeline-item>
+                  <el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
+                    <div>张三</div>
+                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
+                      创建节点
                     </div>
                   </el-timeline-item>
                 </el-timeline>
@@ -267,11 +274,8 @@
 </template>
 
 <script setup name="DialogOkr">
-import { formatDate } from '@/utils/formatTime'
 import OkrTable from './OkrTable.vue'
 
-import { getOkrNodeDetail, getOkrNodeHistory } from '@/api/okr/okr'
-
 const emit = defineEmits(['edit'])
 
 const show = ref(false)
@@ -294,38 +298,123 @@ const toolbarConfig = {
 
 const workIndex = ref('okr')
 const okrList = ref([])
-const childNodeList = ref([])
 const sideIndex = ref('subNode')
 
 const okrTableRef = ref(null)
-const nodeInfo = ref({})
-
-const nodeRecords = ref([])
 
 async function open(id) {
-  try {
-    getOkrNodeDetail(id).then((resp) => {
-      nodeInfo.value = resp
-      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(id).then((resp) => {
-      nodeRecords.value = resp
-    })
-  } finally {
-  }
   show.value = true
   // 获取数据详情
+  console.log(id)
+  okrList.value = [
+    {
+      id: 1,
+      name: '销售成交额达到1000万，总体成交率15%',
+      process: 60,
+      type: 'object',
+      children: [
+        {
+          id: 11,
+          type: 'keyresult',
+          channelName: '抖音',
+          target: '线索目标',
+          targetType: 'value',
+          isSystem: true,
+          targetNum: 10000,
+          targetValue: false,
+          currentNum: 5000,
+          currentValue: false,
+          process: 60,
+          users: '张三、李四'
+        },
+        {
+          id: 12,
+          type: 'keyresult',
+          channelName: '抖音',
+          target: '成交数',
+          isSystem: true,
+          targetType: 'value',
+          targetNum: 2500,
+          targetValue: false,
+          currentNum: 500,
+          currentValue: false,
+          process: 60,
+          users: '张三、李四'
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: '运营消耗预算控制在20万以内，获得10万条线索',
+      process: 80,
+      type: 'object',
+      children: [
+        {
+          id: 21,
+          type: 'keyresult',
+          target: '本月抖音运营投入相较上月少10%',
+          targetType: 'radio',
+          isSystem: false,
+          targetNum: 0,
+          targetValue: false,
+          currentNum: 0,
+          currentValue: false,
+          process: 0,
+          users: ''
+        },
+        {
+          id: 22,
+          type: 'keyresult',
+          target: '累计输出作品',
+          process: 15,
+          users: '',
+          isSystem: false,
+          targetType: 'value',
+          targetNum: 200,
+          targetValue: false,
+          currentNum: 30,
+          currentValue: false
+        }
+      ]
+    },
+    {
+      id: 3,
+      name: '目标3',
+      process: 40,
+      type: 'object',
+      children: [
+        {
+          id: 31,
+          type: 'keyresult',
+          target: '关键成果1',
+          process: 100,
+          users: '',
+          isSystem: false,
+          targetType: 'radio',
+          targetNum: 0,
+          targetValue: false,
+          currentNum: 0,
+          currentValue: true
+        },
+        {
+          id: 22,
+          type: 'keyresult',
+          target: '关键成果2',
+          process: 15,
+          users: '',
+          isSystem: false,
+          targetType: 'value',
+          targetNum: 200,
+          targetValue: false,
+          currentNum: 30,
+          currentValue: false
+        }
+      ]
+    }
+  ]
+  nextTick(() => {
+    okrTableRef.value.prepareData(okrList.value)
+  })
 }
 
 function close() {

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

@@ -19,7 +19,7 @@
       </div>
     </template>
     <template #default>
-      <div class="dialog-okr-body" v-loading="formLoading">
+      <div class="dialog-okr-body">
         <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
           <el-row :gutter="10">
             <el-col :span="4" :offset="0">
@@ -181,9 +181,9 @@
                           >
                             <el-option
                               v-for="it in krOptions"
-                              :key="it.value"
+                              :key="it.keyResultId"
-                              :label="it.label"
+                              :label="it.keyResultName"
-                              :value="it.value"
+                              :value="it.keyResultId"
                             />
                           </el-select>
                           <el-button type="danger" text @click="removeKR(i, index)">
@@ -331,8 +331,7 @@ import {
   getOkrNodeDetail,
   createOkrNode,
   updateOkrNode,
-  getAllOkrPage,
+  getAllOkrPage
-  getDefaultOkrOptions
 } from '@/api/okr/okr'
 import { listToTree } from '@/utils/tree'
 import { getEmployeeSimpleList } from '@/api/pers/employee'
@@ -394,9 +393,6 @@ function open(type, val) {
       children: 'children'
     })
   })
-  getDefaultOkrOptions().then((resp) => {
-    krOptions.value = resp
-  })
   if (val) {
     formLoading.value = true
     try {
@@ -518,19 +514,19 @@ async function handleSave() {
               )}-${getLastDayOfMonth(defaultTime.getFullYear(), month)}`,
               children: [
                 {
-                  nodeName: `${month + 1}月第1周`,
+                  nodeName: `第${month + 1}月第1周`,
                   children: []
                 },
                 {
-                  nodeName: `${month + 1}月第2周`,
+                  nodeName: `第${month + 1}月第2周`,
                   children: []
                 },
                 {
-                  nodeName: `${month + 1}月第3周`,
+                  nodeName: `第${month + 1}月第3周`,
                   children: []
                 },
                 {
-                  nodeName: `${month + 1}月第4周`,
+                  nodeName: `第${month + 1}月第3周`,
                   children: []
                 }
               ]

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

@@ -7,9 +7,9 @@
           :data="peroidList"
           :props="defaultProps"
           :render-after-expand="false"
-          :default-expand-all="false"
+          default-expand-all
           style="width: 400px"
-          @change="getOkrList"
+          @change="handleSearchOkr"
         />
       </el-row>
       <el-row>
@@ -27,9 +27,6 @@
 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()
 
@@ -41,33 +38,184 @@ const defaultProps = {
 
 const okrTableRef = ref(null)
 const searchForm = ref({
-  nodeId: undefined
+  nodeId: 4
 })
 
 const peroidList = ref([])
 
 onMounted(() => {
   handleSearchPeroid()
+  getOkrList()
 })
 
 async function handleSearchPeroid() {
-  getMyNodeTree().then((resp) => {
+  peroidList.value = [
-    peroidList.value = listToTree(resp.tree, {
+    {
-      id: 'nodeId',
+      nodeId: 1,
-      pid: 'parentId',
+      nodeName: '2025年寻驾okr',
-      children: 'children'
+      startDate: '2022-01-01',
-    })
+      endDate: '2022-01-31',
-    searchForm.value.nodeId = resp.nodeId
+      children: [
-    getOkrList()
+        {
-  })
+          nodeId: 2,
+          nodeName: '1月',
+          startDate: '2022-01-01',
+          endDate: '2022-01-31',
+          children: [
+            {
+              nodeId: 3,
+              nodeName: '第1周',
+              startDate: '2022-01-01',
+              endDate: '2022-01-31',
+              children: [
+                {
+                  nodeId: 4,
+                  nodeName: '仇山河',
+                  startDate: '2022-01-01',
+                  endDate: '2022-01-31'
+                }
+              ]
+            },
+            {
+              nodeId: 5,
+              nodeName: '第2周',
+              startDate: '2022-02-01',
+              endDate: '2022-02-28',
+              children: [
+                {
+                  nodeId: 6,
+                  nodeName: '仇山河',
+                  startDate: '2022-02-01',
+                  endDate: '2022-02-28'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+// function handleSelectPeroid(row) {
+//   searchForm.value.peroidName = row.name
+//   searchForm.value.nodeId = row.id
+//   handleSearchOkr()
+// }
+
+function handleSearchOkr() {
+  console.log(searchForm.value)
 }
 
 async function getOkrList() {
-  getMyOkrPage(searchForm.value).then((resp) => {
+  const list = [
-    const list = resp
+    {
-    nextTick(() => {
+      id: 1,
-      okrTableRef.value.prepareData(list)
+      name: '销售成交额达到1000万，总体成交率15%',
-    })
+      process: 60,
+      type: '目标',
+      children: [
+        {
+          id: 11,
+          type: 'keyresult',
+          channelName: '抖音',
+          target: '线索目标',
+          targetType: 'value',
+          isSystem: true,
+          targetNum: 10000,
+          targetValue: false,
+          currentNum: 5000,
+          currentValue: false,
+          process: 60,
+          users: '张三、李四'
+        },
+        {
+          id: 12,
+          type: 'keyresult',
+          channelName: '抖音',
+          target: '成交数',
+          isSystem: true,
+          targetType: 'value',
+          targetNum: 2500,
+          targetValue: false,
+          currentNum: 500,
+          currentValue: false,
+          process: 60,
+          users: '张三、李四'
+        }
+      ]
+    },
+    {
+      id: 2,
+      name: '运营消耗预算控制在20万以内，获得10万条线索',
+      process: 80,
+      type: '目标',
+      children: [
+        {
+          id: 21,
+          type: 'keyresult',
+          target: '本月抖音运营投入相较上月少10%',
+          targetType: 'radio',
+          isSystem: false,
+          targetNum: 0,
+          targetValue: false,
+          currentNum: 0,
+          currentValue: false,
+          process: 0,
+          users: ''
+        },
+        {
+          id: 22,
+          type: 'keyresult',
+          target: '累计输出作品',
+          process: 15,
+          users: '',
+          isSystem: false,
+          targetType: 'value',
+          targetNum: 200,
+          targetValue: false,
+          currentNum: 30,
+          currentValue: false
+        }
+      ]
+    },
+    {
+      id: 3,
+      name: '目标3',
+      process: 40,
+      type: '目标',
+      children: [
+        {
+          id: 31,
+          type: 'keyresult',
+          target: '关键成果1',
+          process: 100,
+          users: '',
+          isSystem: false,
+          targetType: 'radio',
+          targetNum: 0,
+          targetValue: false,
+          currentNum: 0,
+          currentValue: true
+        },
+        {
+          id: 22,
+          type: 'keyresult',
+          target: '关键成果2',
+          process: 15,
+          users: '',
+          isSystem: false,
+          targetType: 'value',
+          targetNum: 200,
+          targetValue: false,
+          currentNum: 30,
+          currentValue: false
+        }
+      ]
+    }
+  ]
+  nextTick(() => {
+    okrTableRef.value.prepareData(list)
   })
 }
 

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

@@ -15,29 +15,29 @@
             v-if="!expandedRows[row.id]"
             class="line1"
             :style="{
-              top: row.type == '目标' ? '30px' : 0,
+              top: !row.keyResultId ? '30px' : 0,
               height: getHeight(row, $index)
             }"
           ></span>
-          <span v-if="row.type == '目标'">【目标】{{ row.name }}</span>
+          <span v-if="!row.keyResultId">【目标】{{ row.objectiveName }}</span>
           <template v-else>
             <span class="line2"></span>
             <span>
-              【关键成果】{{ row.channelName }} {{ row.name }}
+              【关键成果】{{ row.channelName }} {{ row.target }}
-              <span v-if="row.resultType == 1">达 {{ row.targetValue }}</span>
+              <span v-if="row.targetType == 'value'">{{ row.targetNum }}</span>
             </span>
             <div class="flex items-center mt-10px ml-50px">
               <span>当前进度：</span>
-              <span v-if="row.isSys">{{ row.currentValue }}</span>
+              <span v-if="row.isSystem">{{ row.currentNum }}</span>
               <el-input
-                v-else-if="row.resultType == 1"
+                v-else-if="row.targetType == 'value'"
-                v-model="row.currentValue"
+                v-model="row.currentNum"
                 clearable
                 size="small"
                 style="width: 200px"
               />
               <el-radio-group
-                v-else-if="row.resultType == 2"
+                v-else-if="row.targetType == 'radio'"
                 v-model="row.currentValue"
                 size="small"
               >
@@ -48,9 +48,9 @@
           </template>
         </template>
       </el-table-column>
-      <el-table-column prop="progress" label="进度" width="200px">
+      <el-table-column prop="process" label="进度" width="200px">
         <template #default="{ row }">
-          <el-progress :percentage="row.progress || 0" />
+          <el-progress :percentage="row.process" />
         </template>
       </el-table-column>
       <el-table-column prop="executorName" label="执行人" width="200px" />
@@ -65,33 +65,13 @@ const okrList = ref([])
 const helpList = ref([])
 
 function prepareData(list) {
+  okrList.value = list
   helpList.value = []
-  expandedRows.value = {}
+  okrList.value.map((item) => {
-  okrList.value = list.map((item) => {
+    helpList.value.push(item)
-    let obj = {
+    item.children?.map((child) => {
-      id: item.objectiveId,
+      helpList.value.push(child)
-      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,
-          name: child.keyResultName,
-          progress: child.progress,
-          executorName: child.executorName,
-          type: '关键成果',
-          resultType: child.resultType,
-          targetValue: child.targetValue
-        }
-        helpList.value.push(kr)
-        return kr
-      })
-    }
-    return obj
   })
 }