Merge branch 'main' of http://114.55.169.15:3000/qiushanhe/ss-oa-manage-web into dev-cl

src/api/okr/okr.js

@@ -63,3 +63,21 @@ 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,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) {
-//   dialogOkr.value.open(row.id)
-// }
+function handleShowOkr(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>截止日期：2025-01-31</span>
-              <span>最新更新时间：2025-01-15</span>
+              <span>开始日期：{{ nodeInfo.startTime }}</span>
+              <span>截止日期：{{ nodeInfo.endTime }}</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"
-                  :key="index"
+                  v-for="item in childNodeList"
+                  :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>
@@ -244,23 +244,16 @@
             <el-tab-pane label="进度历史" name="history">
               <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
                 <el-timeline class="ml-10px">
-                  <el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
-                    <div>张三</div>
-                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
-                      进度变化：40% -> 60%
-                      （节点进度是读取目标进度计算的，目标进度根据关键成果计算，关键成果在提交跟新时会有）
-                    </div>
-                  </el-timeline-item>
-                  <el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
-                    <div>张三</div>
-                    <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
-                      更新节点
-                    </div>
-                  </el-timeline-item>
-                  <el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
-                    <div>张三</div>
+                  <el-timeline-item
+                    v-for="item in nodeRecords"
+                    :key="item.recordId"
+                    placement="bottom"
+                    :timestamp="formatDate(item.createTime)"
+                    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>
@@ -274,8 +267,11 @@
 </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)
@@ -298,123 +294,38 @@ 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">
+      <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">
@@ -181,9 +181,9 @@
                           >
                             <el-option
                               v-for="it in krOptions"
-                              :key="it.keyResultId"
-                              :label="it.keyResultName"
-                              :value="it.keyResultId"
+                              :key="it.value"
+                              :label="it.label"
+                              :value="it.value"
                             />
                           </el-select>
                           <el-button type="danger" text @click="removeKR(i, index)">
@@ -331,7 +331,8 @@ import {
   getOkrNodeDetail,
   createOkrNode,
   updateOkrNode,
-  getAllOkrPage
+  getAllOkrPage,
+  getDefaultOkrOptions
 } from '@/api/okr/okr'
 import { listToTree } from '@/utils/tree'
 import { getEmployeeSimpleList } from '@/api/pers/employee'
@@ -393,6 +394,9 @@ function open(type, val) {
       children: 'children'
     })
   })
+  getDefaultOkrOptions().then((resp) => {
+    krOptions.value = resp
+  })
   if (val) {
     formLoading.value = true
     try {
@@ -514,19 +518,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,184 +41,33 @@ const defaultProps = {
 
 const okrTableRef = ref(null)
 const searchForm = ref({
-  nodeId: 4
+  nodeId: undefined
 })
 
 const peroidList = ref([])
 
 onMounted(() => {
   handleSearchPeroid()
-  getOkrList()
 })
 
 async function handleSearchPeroid() {
-  peroidList.value = [
-    {
-      nodeId: 1,
-      nodeName: '2025年寻驾okr',
-      startDate: '2022-01-01',
-      endDate: '2022-01-31',
-      children: [
-        {
-          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)
+  getMyNodeTree().then((resp) => {
+    peroidList.value = listToTree(resp.tree, {
+      id: 'nodeId',
+      pid: 'parentId',
+      children: 'children'
+    })
+    searchForm.value.nodeId = resp.nodeId
+    getOkrList()
+  })
 }
 
 async function getOkrList() {
-  const list = [
-    {
-      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)
+  getMyOkrPage(searchForm.value).then((resp) => {
+    const list = resp
+    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.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 }}
-              <span v-if="row.targetType == 'value'">{{ row.targetNum }}</span>
+              【关键成果】{{ row.channelName }} {{ row.name }}
+              <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-model="row.currentNum"
+                v-else-if="row.resultType == 1"
+                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) => {
-    helpList.value.push(item)
-    item.children?.map((child) => {
-      helpList.value.push(child)
-    })
+  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,
+          name: child.keyResultName,
+          progress: child.progress,
+          executorName: child.executorName,
+          type: '关键成果',
+          resultType: child.resultType,
+          targetValue: child.targetValue
+        }
+        helpList.value.push(kr)
+        return kr
+      })
+    }
+    return obj
   })
 }