sc

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

@@ -7,13 +7,15 @@
           :data="peroidList"
           :props="defaultProps"
           :render-after-expand="false"
-          default-expand-all
+          :default-expand-all="false"
+          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>
@@ -23,7 +25,7 @@
 
     <OkrTable ref="okrTableRef" />
     <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
-    <DialogOkrInfo ref="dialogOkrInfo" />
+    <DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" />
   </div>
 </template>
 
@@ -91,9 +93,9 @@ function handleUpdateProcess() {
 }
 
 const dialogOkr = ref(null)
-// function handleShowOkr(row) {
+function handleShowOkr(id) {
-//   dialogOkr.value.open(row.id)
+  dialogOkr.value.open(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>寻驾全年目标 -> 1月</span>
+            <span>{{ nodeInfo.nodeName }}</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">张三</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">张三、李四</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">3</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="60" :stroke-width="8" />
+                <el-progress :percentage="nodeInfo.progress || 0" :stroke-width="8" />
               </div>
             </div>
             <div class="flex detail-basic-info">
-              <span>开始日期：2025-01-01</span>
+              <span>开始日期：{{ nodeInfo.startTime }}</span>
-              <span>截止日期：2025-01-31</span>
+              <span>截止日期：{{ nodeInfo.endTime }}</span>
-              <span>最新更新时间：2025-01-15</span>
+              <span>最新更新时间：{{ nodeInfo.updateTime }}</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="index in 12"
+                  v-for="item in childNodeList"
-                  :key="index"
+                  :key="item.nodeId"
                   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">【节点】子节点{{ index }}</div>
+                    <div class="child-label">【节点】{{ item.nodeName }}</div>
                     <el-progress
                       type="line"
-                      :percentage="0"
+                      :percentage="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">4</span>
+                    <span style="color: #aaa">{{ item.objectiveCount }}</span>
                     <el-divider direction="vertical" style="margin: 0 20px" />
                     <div
                       class="flex-1 overflow-hidden h-30px"
                       style="text-overflow: ellipsis; white-space: nowrap"
                     >
                       <span>执行人：</span>
-                      <span style="color: #aaa">张三、李四、王二</span>
+                      <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>开始日期：2025-01-01</span>
+                    <span>开始日期：{{ item.startTime }}</span>
                     <el-divider direction="vertical" style="margin: 0 20px" />
-                    <span>截止日期：2025-01-31</span>
+                    <span>截止日期：{{ item.endTime }}</span>
                   </div>
                 </div>
               </div>
@@ -276,6 +276,8 @@
 <script setup name="DialogOkr">
 import OkrTable from './OkrTable.vue'
 
+import { getOkrNodeDetail } from '@/api/okr/okr'
+
 const emit = defineEmits(['edit'])
 
 const show = ref(false)
@@ -298,123 +300,33 @@ const toolbarConfig = {
 
 const workIndex = ref('okr')
 const okrList = ref([])
+const childNodeList = ref([])
 const sideIndex = ref('subNode')
 
 const okrTableRef = ref(null)
+const nodeInfo = ref({})
 
 async function open(id) {
-  show.value = true
+  try {
-  // 获取数据详情
+    getOkrNodeDetail(id).then((resp) => {
-  console.log(id)
+      nodeInfo.value = resp
-  okrList.value = [
+      if (resp.objectives) {
-    {
+        okrList.value = resp.objectives.map((item) => ({
-      id: 1,
+          ...item,
-      name: '销售成交额达到1000万，总体成交率15%',
+          keyResults: item.keyResults || []
-      process: 60,
+        }))
-      type: 'object',
+      } else {
-      children: [
+        okrList.value = []
-        {
-          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: '张三、李四'
       }
-      ]
+      childNodeList.value = [...resp.children]
-    },
-    {
-      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)
       })
+    })
+  } finally {
+  }
+  show.value = true
+  // 获取数据详情
 }
 
 function close() {

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

@@ -19,7 +19,7 @@
       </div>
     </template>
     <template #default>
-      <div class="dialog-okr-body">
+      <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">
@@ -514,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}月第3周`,
+                  nodeName: `${month + 1}月第4周`,
                   children: []
                 }
               ]

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

@@ -7,9 +7,9 @@
           :data="peroidList"
           :props="defaultProps"
           :render-after-expand="false"
-          default-expand-all
+          :default-expand-all="false"
           style="width: 400px"
-          @change="handleSearchOkr"
+          @change="getOkrList"
         />
       </el-row>
       <el-row>
@@ -27,6 +27,9 @@
 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()
 
@@ -38,185 +41,34 @@ const defaultProps = {
 
 const okrTableRef = ref(null)
 const searchForm = ref({
-  nodeId: 4
+  nodeId: undefined
 })
 
 const peroidList = ref([])
 
 onMounted(() => {
   handleSearchPeroid()
-  getOkrList()
 })
 
 async function handleSearchPeroid() {
-  peroidList.value = [
+  getMyNodeTree().then((resp) => {
-    {
+    peroidList.value = listToTree(resp.tree, {
-      nodeId: 1,
+      id: 'nodeId',
-      nodeName: '2025年寻驾okr',
+      pid: 'parentId',
-      startDate: '2022-01-01',
+      children: 'children'
-      endDate: '2022-01-31',
+    })
-      children: [
+    searchForm.value.nodeId = resp.nodeId
-        {
+    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() {
-  const list = [
+  getMyOkrPage(searchForm.value).then((resp) => {
-    {
+    const list = resp
-      id: 1,
-      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)
     })
+  })
 }
 
 const dialogOkrInfo = ref(null)

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

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