HTML如何制作OA审批流程表单

本文深入解析了如何用语义化、可维护、高可用的HTML技术构建真正的OA审批流程表单——它远不止是绘制静态流程图，而是以状态驱动为核心，通过`

`明确环节顺序、`data-status`统一标识节点状态（pending/approved/rejected/skipped）、动态按权限注入操作按钮、用`
`原生折叠历史记录、以及利用CSS伪元素稳健绘制自适应连接线；强调前端必须与后端API数据严丝合缝同步，避免硬编码和手动状态管理，从而支撑驳回跳转、多级会签、权限变更等复杂业务场景，兼顾可访问性、响应式体验与长期可维护性。

OA审批流程页不是画个带箭头的流程图就完事——它本质是状态驱动的交互界面，核心在于「当前谁能看到什么、能点什么、点了之后怎么走」。静态 HTML 圆圈+连线撑不住节点增减、驳回跳转、权限动态变化这些真实业务场景。

为什么用

而不用
套流程节点

语义和可维护性直接决定后续能不能改。用

天然表达顺序关系，每个
1. 对应一个审批环节，加 data-status="pending" 这类属性后，CSS 和 JS 都能精准识别当前走到哪步、哪些节点已过、哪些被跳过。
   • data-status 值建议固定为 pending / approved / rejected / skipped，别用中文或随意命名，避免 JS 判断分支爆炸
   • 不要给
   • 加 id="node1" 这种硬编码 ID，靠 data-node-id="20240520-001" 更易对接后端 API 返回结构
   • 如果某节点支持多级会签（比如“法务部3人中2人同意即通过”），
   • 内部再嵌一层
     ，比堆
     更利于样式复用和屏幕阅读器识别

     按钮不渲染比 disabled 更安全

     页面上放一堆 同意 是典型假安全。用户禁用 JS 后能直接点，或者后端状态变了但前端没同步，按钮还灰着却实际能提交成功。

     • 按钮初始完全不写进 HTML，等接口返回当前用户权限和节点状态后再用 JS 插入，例如：document.querySelector('[data-node-id="20240520-001"]').insertAdjacentHTML('beforeend', '同意')
     • 所有操作按钮必须带 data-action 和 data-node-id，统一事件委托绑定，避免每个按钮单独写 click 监听
     • 点击后立刻设 button.disabled = true 并加 loading 状态，响应成功后整段
     • 重载数据，而不是只改按钮文字或颜色

     历史记录用

     折叠，别全展开

     审批人、意见、时间戳、附件这些信息，90% 场景下用户只关心当前节点和自己要干啥。全展开导致页面又长又慢，移动端尤其灾难，而且拖慢首屏渲染。

     • 结构按规范写：
       2024-05-20 14:32|张三|已通过

       意见：资料齐全，同意

       查看附件.pdf
     • Safari 旧版本不支持 open 属性自动展开，如果默认要展开最新一条，得补一句：document.querySelector('details:last-of-type').open = true
     • 别用 JS 模拟折叠效果，
       原生支持，无 JS 也能用，且语义正确，无障碍友好

     连接线用伪元素，别用绝对定位

     很多人用 position: absolute 给节点之间画线，结果一换字体、一调行高，线就偏移。伪元素方案更稳，缩放、换主题色都只改一处 CSS。

     • 在 CSS 中写：li:not(:last-child)::after { content: ""; display: block; width: 2px; height: 1.5rem; background: #e0e0e0; margin: 0 auto; }
     • height 用 rem 单位，随文字行高自适应；若需垂直居中，可用 transform: translateY(-50%) 配合 position: relative 在父
     • 上
     • 如果流程支持横向布局（比如宽屏看板），把伪元素改成 ::before + width + height: 2px，逻辑一致，只是方向换掉

     真正难的不是画出来，而是让每个节点的状态、权限、操作能力跟后端 API 返回的数据严丝合缝对上。前端一旦开始手动维护「这个按钮该不该显示」「这条线该不该画」，离不可维护就不远了。

     本篇关于《HTML如何制作OA审批流程表单》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！