做公司的OA项目也有很久了，中间遇到过一些问题，也做了一些优化。记录一下。

在最项目最开始的时候，已知的比较明确的需求只有财务的。例如报销、借款、采购…每个流程都有很多节点，每个节点也相对比较复杂，有各自需要输入的内容。于是在初代开发的过程中，代码写成了如下的样子：

// 举个例子 reimbursement.vue
<step1 :stepIndex="1"...
<step2 :stepIndex="2"...
<step3 :stepIndex="3"...
<step3_5 :stepIndex="4"...
<step6 :stepIndex="5"...
....
<step4 :stepIndex="12"...
<step12 :stepIndex="13"...
...

data(){
    return {
        steps:['apply','departmentManager',...,'finance',...'cashier','end']
    }
}

看似直观有逻辑，实则没什么逻辑，有的数字是顺序，有的又不是。上面的数字又和下面的steps有强逻辑关系。要修改某个结点的时候光看reimbursement.vue是看不出到底是哪个节点，节点的中文描述在各自的组件之中，英文id也在遥远的data中，想快速浏览节点顺序十分困难。更别提新增节点（step3_5)，修改节点顺序之类的操作了。

🌰新增节点操作

• 新增节点时由于1,2,3,4,5之类的都用完了，所以取名的时候按之前的逻辑就变成了奇怪的3_5。
• 新建节点组件，引入并添加组件。即便已经有无数个一模一样功能只是中文描述不一样的节点。
• 在data.steps中的正确位置添加上后端告知我的对应英文id。
• 然后将新组建的 stepIndex修改成对应的索引。
• 以及之后的所有组件的stepIndex的值都需要修改。

十分难受。特别是当流程节点很多的情况下，虽然好像不太花时间，操作起来也不用动脑子，但实际上改动了许多原本没有问题、与需求不相关的代码，大大提高了出错的可能。更别说有种精神上的折磨。（其实还有 editable,showable之类的属性要做类似逻辑的编辑）

后续优化

在后面三四个月的时间里，实现了更多流程，修改了更多节点，更重要的是跟后端深入了解整个项目后，我决定逐步优化这个项目，目的是更快的开发，更方便的维护，以及降低出错的风险。

能实现这次优化的重要一点在于，后端的数据其实十分完善：节点顺序、英文id、中文描述。这些都有数据（其实按我理解应当都有的）。

首先是将节点分类，主要分为3类：

• “010提交节点”：这是流程的第一个节点，通常要填写的内容很多，形式也各种各样，每个流程单独写组件。
• “普通审批节点”：这是最常见的节点，只有"是否同意"以及"备注"，部分节点有tips，抽离成共用组件basicStep，中文描述以及tips用传参实现。
• “复杂节点”：相比“普通审批节点”，会出现一些其他需要填写的内容，复杂程度大相径庭。

其次前端不再维护steps而是从后端返回的内容中获取。

然后使用<component:is="stepName" v-for=... 的形式，实现动态的节点组件。此后不再需要关注节点顺序的修改，只需要配置一次即可。新增的”普通审批节点“通常情况下同样也不需要前端修改任何内容。