ss-oa-manage-web/src/views/OKR/Analysis/index.vue

<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>