在前端实现一个步骤审批流程，通常是通过 div 标签和 CSS 来构建一个可视化的流程图，结合 JavaScript 控制审批的状态变化。你可以使用 div 标签创建每一个步骤节点，通过不同的样式（如颜色、边框等）表示审批的不同状态，并通过事件控制流程的进度。
1. 基本思路
- 每一个步骤使用一个
div标签来表示。 - 步骤之间使用箭头或连接线表示流程的顺序。
- 每个步骤有不同的状态，比如
待审批、已通过、已拒绝，用颜色来区分。 - 使用 JavaScript 或框架（如 Vue.js、React）来动态控制步骤的状态。
2. 示例代码
HTML + CSS + JavaScript 实现简单的步骤审批流程
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>步骤审批流程</title><style>.approval-flow {display: flex;justify-content: space-around;margin-top: 50px;}.step {position: relative;width: 100px;height: 100px;border-radius: 50%;text-align: center;line-height: 100px;font-size: 14px;color: white;cursor: pointer;transition: background-color 0.3s;}.step p {margin: 0;}/* 步骤状态 */.pending {background-color: gray;}.approved {background-color: green;}.rejected {background-color: red;}/* 箭头连接线 */.arrow {position: absolute;top: 50%;width: 50px;height: 3px;background-color: gray;left: 100%;margin-left: 10px;transform: translateY(-50%);}.arrow-right {transform: rotate(90deg);}</style>
</head>
<body><div class="approval-flow"><div class="step pending" id="step1" onclick="changeStatus(1)"><p>步骤1</p></div><div class="arrow"></div><div class="step pending" id="step2" onclick="changeStatus(2)"><p>步骤2</p></div><div class="arrow"></div><div class="step pending" id="step3" onclick="changeStatus(3)"><p>步骤3</p></div></div><script>let currentStep = 1;// 改变步骤的状态function changeStatus(step) {if (step < currentStep) return; // 如果点击的步骤是已完成的，不能点击const stepElement = document.getElementById('step' + step);if (step === currentStep) {stepElement.classList.remove('pending');stepElement.classList.add('approved'); // 当前步骤通过currentStep++; // 前进到下一个步骤}}</script></body>
</html>
3. 解释代码
HTML 结构
- 我们创建了一个包含三个步骤的流程。每个步骤都是一个
div元素，标记为step。 - 每个步骤之间有一个
div连接线，代表步骤之间的流程顺序。 - 点击每个步骤时，触发
changeStatus函数，动态改变步骤的状态。
CSS 样式
.approval-flow：使用flex布局将步骤水平排列。.step：每个步骤是一个圆形，通过border-radius: 50%和固定的width和height实现。pending：默认状态，灰色表示该步骤还未审批。approved：步骤通过时，绿色表示已通过。rejected：如果需要拒绝状态，可以用红色来表示。
.arrow：用来表示步骤之间的连接线，使用了position: absolute来定位并通过transform: rotate(90deg)实现箭头的方向。
JavaScript 逻辑
changeStatus(step)函数用于改变步骤的状态。点击步骤后，该步骤的颜色会变成绿色（表示通过），并且流程会前进到下一个步骤。currentStep变量用来跟踪当前审批到的步骤。
4. 改进建议
- 动态数据：如果你想让这个流程变得更加灵活，可以通过 JavaScript 或后端提供数据动态生成步骤。
- 更多状态：可以加入更多的步骤状态，比如
已拒绝、处理中等。 - 动画效果：可以使用 CSS 动画增强交互体验，比如步骤完成时添加渐变、动画过渡等。
- 后端集成：如果步骤审批是基于实际数据（比如审批结果来自服务器），你可以通过 Ajax 或 Fetch API 从后端获取数据并更新流程状态。
这个简单的流程图可以为你提供一个良好的起点，你可以根据需要继续扩展和优化。
