构建企业级督办任务系统：Vue3 + TypeScript 实战（多级任务拆解+批量操作+进度追踪+单元格合并）

构建企业级督办任务系统：Vue3 + TypeScript 实战（多级任务拆解+批量操作+进度追踪）

在大型组织管理中，如何将宏观目标拆解为可执行、可追踪、可量化的具体任务？一个结构清晰、功能强大的督办任务管理系统是关键。

本文将基于真实的 Vue3 + TypeScript 项目代码与 UI 界面，深入剖析如何打造一个企业级督办平台。我们将重点讲解三级任务层级管理 、批量发起与进度汇报 、多维度筛选查询 以及数据导出可视化的核心实现，带你掌握复杂业务系统的架构设计精髓。

🎯 系统核心亮点

本系统不仅是一个简单的任务列表，它解决的是目标落地难 与过程管控弱的痛点：

三级任务拆解体系：支持"一级→二级→三级"任务无限嵌套，将宏大目标逐层分解至最小执行单元。
批量操作引擎：支持一键批量发起任务、批量提交进度、批量导出报表，大幅提升管理效率。
动态频率控制：每个任务可独立设置"工作落实情况提交频率"，实现差异化管理。
全生命周期追踪：从创建、分配、执行到完成，全程记录时间节点与责任人，确保事事有回音。

🏗️ 核心模块深度解析

1. 三级任务层级管理与表格渲染

采用扁平化数据结构存储树形关系，通过 rowSpan 或前端递归组件实现视觉上的层级缩进，兼顾性能与可读性。

复制代码

<template>
  <a-table 
    :columns="columns" 
    :data-source="taskList" 
    :pagination="false"
    row-key="id"
  >
    <!-- 自定义列渲染：一级任务 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'levelOne'">
        <span :style="{ paddingLeft: `${(record.level - 1) * 20}px` }">
          {{ record.taskName }}
        </span>
      </template>
      
      <!-- 状态标签 -->
      <template v-if="column.key === 'status'">
        <a-tag :color="record.status === 'completed' ? 'green' : 'blue'">
          {{ record.statusText }}
        </a-tag>
      </template>
    </template>
  </a-table>
</template>

<script setup lang="ts">
interface TaskItem {
  id: number;
  taskName: string;
  level: 1 | 2 | 3; // 任务层级
  parentId?: number;
  frequency: string; // 提交频率
  deadline: string;
  completedTime?: string;
  status: 'pending' | 'processing' | 'completed';
}

const columns = [
  { title: '一级任务', dataIndex: 'taskName', key: 'levelOne' },
  { title: '二级任务', dataIndex: 'subTaskName', key: 'levelTwo' },
  { title: '三级任务', dataIndex: 'subSubTaskName', key: 'levelThree' },
  { title: '编号', dataIndex: 'code', key: 'code' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '提交频率', dataIndex: 'frequency', key: 'frequency' },
  { title: '本次截止', dataIndex: 'deadline', key: 'deadline' },
  { title: '完成时间', dataIndex: 'completedTime', key: 'completedTime' },
  { title: '操作', key: 'action' },
];
</script>

UI 细节：

左侧导航栏显示"全部项目"、"归档项目"，支持快速切换视图。
表格右侧固定"操作"列，包含编辑、删除、查看详情等按钮。
支持按"工作落实情况显示日期范围"进行时间维度筛选。

2. 批量操作引擎：发起、汇报、导出

顶部工具栏提供三大核心批量操作，满足大规模任务管理需求。

🚀 批量发起任务

选择多个模板或历史任务，一键生成新周期任务，自动继承原任务的层级结构与负责人。

复制代码

const handleBatchCreate = async () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请至少选择一个任务模板');
    return;
  }

  Modal.confirm({
    title: `确定要批量发起 ${selectedRowKeys.value.length} 个任务吗？`,
    content: '新任务将沿用原任务的层级结构和负责人，仅更新截止时间。',
    onOk: async () => {
      const params = {
        taskIds: selectedRowKeys.value,
        newDeadline: formatDate(new Date()), // 默认设置为今天
      };
      await batchCreateTasks(params);
      message.success('批量发起成功！');
      loadTaskList(); // 刷新列表
    },
  });
};

📊 批量进度汇报

选中多个正在执行的任务，统一填写当前进展，系统自动记录提交时间与内容。

复制代码

<a-button @click="handleBatchReport">
  <template #icon><FileTextOutlined /></template>
  批量进度汇报
</a-button>

<script setup>
const handleBatchReport = () => {
  if (selectedRowKeys.value.length === 0) {
    message.warning('请选择需要汇报的任务');
    return;
  }

  // 弹出模态框，让用户填写统一进度或分别填写
  showBatchReportModal(selectedRowKeys.value);
};
</script>

💾 数据导出

支持将当前筛选结果导出为 Excel 或 PDF，便于线下汇报与存档。

复制代码

const handleExport = async () => {
  const params = {
    ...searchFilters.value,
    exportType: 'excel', // 或 'pdf'
  };
  
  const [err, res] = await to(exportTaskData(params));
  if (!err && res) {
    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
    saveAs(blob, `督办任务报表_${formatDate(new Date())}.xlsx`);
    message.success('导出成功！');
  }
};

3. 多维度筛选与智能查询

顶部搜索区提供灵活的条件组合，帮助用户精准定位目标任