需求5：增加一个按钮

在之前的几个需求中，我们逐步从修改字段到新增字段，按部就班地完成了相关工作。通过最近的文章，不难看出我目前正在处理前端的“未完成”和“已完成”按钮。借此机会，我决定趁热打铁，重新梳理一下之前关于按钮实现的需求。

了解需求

当前的问题是，当我上报了一张故障单后，在处理过程中只有一个“开始处理”按钮。如果上报人确实上报了一张故障单，并且该故障单尚未被处理，但故障突然自行解决了，这时就会出现一些不便。

例如，上报人的电脑出现蓝屏故障，他肯定会填写并上报故障单。然而，在故障单还未被接单处理的时间内，蓝屏问题突然消失了，那么这张故障单就变得多余了。

如果我们能够增加一个“撤销故障”的按钮，上报人在上报故障单后，可以自行撤销该故障单，这将会大大提高系统的灵活性和用户的便利性。

大纲思路

在处理需求时，我通常会先考虑模仿现有的功能来实现，因为我知道自己独立编写肯定不会写。然而，如果有一个类似的功能供我参考，我模仿着来写，应该是能够完成任务的。

但具体模仿哪个功能呢？对此我并不太确定。于是我请教了睿哥，他建议我模仿“退回”按钮的实现方式。那么就按照这个思路来进行吧！

代码实现需求

定位接口

首先找到“退回”按钮，点击这个按钮，看看这个按钮调用了哪个接口：

其实，这个按钮相对简单。点击“退回”按钮时，只会触发两个接口，很容易就能找到与按钮对应的接口。但是，有些按钮点击后会触发一堆接口，卧槽，他妈的，你根本不知道哪个接口才是真正与按钮直接交互的。

当时我把这个疑问告诉了睿哥，睿哥建议我查看前端的事件处理函数，看看哪个接口向事件处理函数传递数据，这样就能确定哪个接口是与按钮直接交互的。

修改controller层

现在，接口已经找到了，那么我们就仿照这个接口来写：

其实这个撤销按钮的controller层的模仿没啥难度。

修改service层

进入service层：

其实前面这两步都不算很难，关键在于service层的核心部分，这是最难的。一旦这个service层的核心部分写好了，接下来的工作就会顺利很多。我们来试着写一下service层的核心代码：

其实很简单，先把“退回”按钮的service层核心代码拷贝过来，然后保留有用的部分，注释掉没用的部分。有时候还需要添加一些东西，修改一下代码，这样就可以了。关键是你要清楚这个核心逻辑是什么样的：

把“退回”按钮的service层内核复制一份到“撤回按钮”的service层核心部分后，然后再一行一行的进行修改：

来解释一下第一行代码：

FaultReportEntity report = getFaultReportEntity(reportId);

比如，上报人上报了一张故障单，那么reportId就是故障单的编号。FaultReport表中的每一行其实就是一张故障单。

如果你理解了上面这两句话，那么这行代码就不难理解了。代码的作用是通过故障单编号将属于这个编号的那一行数据提取出来，并放到report对象里。

Assert.isTrue(FaultConfigConstant.FAULT_REPORT_STATUS_0.equals(report.getStatus()), "只有在初始状态下才能进行撤回操作！");
Assert.isTrue(ObjectUtil.equals(UserUtils.getUserId(), report.getReporterId()), "仅上报人可执行撤回操作！");

第一行代码已经获取到了这个故障单的数据。接下来，你需要判断当前尝试点击撤销按钮的用户是否是上报人。如果他不是上报人，那么他就没有权限撤销这张故障单。简而言之，只有上报人自己才可以撤销故障单。

除此之外，你还需要判断这张故障单的状态。只有在故障单处于“待开始”状态时，才可以被撤销。如果故障单已经在处理中，你突然撤销它，那就不合适了。

report.setStatus(FaultConfigConstant.FAULT_REPORT_STATUS_11);

你撤销完之后，就需要把这张故障单的状态设置成“已撤销”状态。

updateById(report);

经过一系列处理后，这个report对象相比于一开始从数据库中获取到的report对象已经发生了变化。这时候，你需要将这个新的report对象同步回数据库。

最后这个接口的service层长这样：

修改mapper层

我想了想，mapper层不需要修改，那我这个撤销按钮的后端接口就完成了。

前端把接口呈现出来

写一个按钮其实不难，真的不难。主要是照猫画虎。我之前的文章已经详细描述了如何照猫画虎。现在我就模仿着“退回”按钮来写，首先先看看“退回”按钮是怎么写的：

通过上面这四幅图，我们已经知道了“退回”按钮的前端是怎么写的，那我们就直接仿照就好了：

写这个需求的一些小心得

其实对于这种需求的修改，我和光哥中午的时候也交流过。你拿到一个需求，不可能从零开始凭空想象。比如说我让你加一个撤回的按钮，你不可能凭空想象然后盲写，这怎么写啊？肯定是先看看有没有一些和这个需求相似的功能，别人已经写好的，可以参照着来写。比如这个需求中的“退回”按钮。能Ctrl+C和Ctrl+V的就绝不会自己重新写，都是复制粘贴完之后，再进行小修小改，然后加一些必要的东西就行了。