ss-oa-manage-web/src/views/OKR/Management/Components/OkrTable.vue

<template>
  <div>
    <el-table
      ref="tableRef"
      :data="okrList"
      default-expand-all
      row-key="id"
      size="large"
      @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.keyResultId ? '30px' : 0,
              height: getHeight(row, $index)
            }"
          ></span>
          <span v-if="!row.keyResultId">【目标】{{ row.objectiveName }}</span>
          <template v-else>
            <span class="line2"></span>
            <span>
              【关键成果】{{ row.channelName }} {{ row.target }}
              <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.isSystem">{{ row.currentNum }}</span>
              <el-input
                v-else-if="row.targetType == 'value'"
                v-model="row.currentNum"
                clearable
                size="small"
                style="width: 200px"
              />
              <el-radio-group
                v-else-if="row.targetType == 'radio'"
                v-model="row.currentValue"
                size="small"
              >
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="process" label="进度" width="200px">
        <template #default="{ row }">
          <el-progress :percentage="row.process" />
        </template>
      </el-table-column>
      <el-table-column prop="executorName" label="执行人" width="200px" />
    </el-table>
  </div>
</template>

<script setup name="OkrTable">
const emit = defineEmits(['rowClick'])

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

defineExpose({
  prepareData
})

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