摘要:徐小夕【知乎专栏作家】掘金签约作者,定期分享AI创业,可视化,企业实战项目知识,深度复盘企业中经常遇到的500+技术问题解决方案。【关注趣谈前端,技术路上不迷茫】
hi, 大家好, 我是徐小夕.
徐小夕【知乎专栏作家】掘金签约作者,定期分享AI创业,可视化,企业实战项目知识,深度复盘企业中经常遇到的500+技术问题解决方案。【关注趣谈前端,技术路上不迷茫】
之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:
H5-Dooring(页面可视化搭建平台)灵语智能文档Flowmix/Docx 多模态文档编辑器: 让文档不止于文档这段时间一直在研发多维表格,已经实现的多维表格进行了功能模块的优化以及表格能力的增强,目前已经发布了1.0版本,暂且起名叫Mute。
演示效果如下:
大家感兴趣的可以参考体验一下。
表格视图是多维表格的核心功能,提供了直观的任务列表,支持以下功能:
任务创建、编辑和删除任务分组和排序自定义字段配置任务筛选和搜索任务优先级调整拖拽排序批量编辑数据导入导出历史记录和版本控制单元格格式化和条件格式下面演示一下编辑表格的能力:
我们不仅能编辑每一个任务表格,还能对表格列进行拖拽:
看板视图提供了可视化的任务管理方式,支持以下功能:
人员分配视图帮助您管理团队成员的工作分配:
统计分析功能提供了多维度的任务数据分析,帮助我们了解项目进展和资源分配:
任务状态分布任务优先级分布人员工作负载项目进度趋势自定义报表数据导出周期性报告关键指标监控预测分析技术实现
目前我设计的多维表格的项目结构如下:
多维表格的数据结构对于二次开发至关重要。以下是我设计的核心数据模型:
// 任务类型定义interface Task { id: string; // 任务唯一标识符 description: string; // 任务描述 summary: string; // 任务情况总结 assignee: User; // 任务执行人 status: "已停滞" | "待开始" | "进行中" | "已完成"; // 任务状态 startDate: string; // 开始日期 (格式: YYYY/MM/DD) expectedEndDate?: string; // 预计完成日期 (可选) actualEndDate?: string; // 实际完成日期 (可选) isDelayed: boolean; // 是否延期 completed: boolean; // 是否已完成 priority: "重要紧急" | "紧急不重要" | "重要不紧急"; // 优先级}对于不同人员用户来说,也需要规范数据结构,如下是一个基础的用户维度的定义:
// 用户类型定义interface User { id: string; // 用户唯一标识符 name: string; // 用户名称 avatar?: string; // 用户头像 (可选) role?: string; // 用户角色 (可选) department?: string; // 所属部门 (可选)}整个多维表格的数据结构我采用了结构化的JSON来设计,也就意味着可以通过后端直接生成多维表格。
目前我已经实现了批量导入任务数据,并支持一键导出数据,如下:
目前该项目1.0版本我已经发布上线,大家可以参考体验一下。
来源:趣谈前端