(简易)测试数据构造平台: 16 (工具列表新增)

【本节目标】设计工具新增。

首先，一个工具的开发，在非低代码平台，也就是本系列中，是不能在线开发的。必须要开发者线下开发后部署上线。

（纯线上开发的属于低代码平台，目前仅在培训收费内容中出现，咨询v：qingwanjianhua）

那么既然一个工具的开发需要实际的平台主程(也就是你)去开发，那平台页面上的菜单的新增工具 是干嘛的呢？

这个就相当于一个提交需求的地方，用户想申请新工具，必须在此填写一些相关的工具描述，然后等你审批，上线后会通知申请者等等。

看看我们菜单中的这个按钮：

我们的设计是，点击新增工具后，出现一个弹层，让用户添加一些必要工具描述后，存放到某个地方。

这个地方，就是工单系统。

包括你作为主程上线后看到的工单提醒，包括你完成了工单后，申请者收到的提醒等等，都归这个工单系统负责。

不过工单系统是我们之后的模块，本节课还是先来搞定这个新增的弹出来的对话框吧...

在elementUI中，代码如下：

（注意写到Menu.vue组件中，这是属于菜单的功能）

首先看dom层改动：

上图中，对话框的代码比较多，大家注意别写错。

这个对话框的显示还是隐藏，是由 dialogFormVisible 这个变量的值控制的，它要是True 就显示，False就隐藏。

而这个对话框内包含的是一个form表单，作用是可以提交表单内的所有数据给到某个请求。不过在这里，我们的form表单仅仅是用来改变某个json数据的。

然后是bom层的这个数据设计：

上图中，有三个数据：

1. dialogFormVisible ，用来控制对话框的显示和隐藏，默认为假，即不显示。
2. form 字典，用来关联和存放我们要新建的工具的值的，包含名字和描述。
3. formLabelWidth ， 用来控制这个对话框宽度的，而高度默认是自适应。

看看效果：

是不是很简简洁和大方。

当然通过观察dom层代码可以发现，取消和确定按钮，似乎都只是让对话框隐藏。等我们之后，就会把确定按钮给它确实的关联到某个函数中~

这个函数就是要去实际的工具列表中创建一个工具记录，页面上也可以看到，但是工具的状态应该是开发中~ 不能点击使用。

然后提交工单给主程，主程就要在线下根据工单的信息，去开发这个工具所需的 页面，脚本，数据表等。

当开发完成后，就把工单状态改为已完成。此时，页面上的这个工具别人才可以使用。

本节到此为止，欢迎继续追更