项目核心功能——上报不良事件介绍
不良事件级别选择(树结构)
这个功能的实现,在当时花了笔者的不少功夫!因为不良事件级别是包含子级别的,详观下图。为什么包含子级别就很难实现呢?
答:笔者当时是真的不知道怎么实现,毫无头绪,并且UNI-APP 文档中也没有相应的组件,笔者压根想不到能用树结构来实现,主要是在以往的项目开发中,并没有用过树结构!了解得很少。
一、设计思路
在毫无头绪,无法实现该功能的时候,笔者在 DCloud 插件市场中,找到了类似的功能,并且他们称其为树组件!然后选了一个比较适合笔者的组件进行调用,但是里面的功能并不能完全满足笔者的需求,因此笔者修改了它的部分源码,进而满足笔者的需求 —— 当然这是后续需求,在这里并不影响。
二、实现方案
可以看到,笔者使用不了一个不再维护的树组件插件,笔者并没有自己实现该功能,只是调用了别人现成的组件到自己的项目中来。
三、功能实现难点
-
拿到他人的组件,首先要看懂他人的树组件代码和文档,结合自身项目,进行参数修改。
-
数据展示,因为笔者引用的树组件的接入数据和服务器返回的JSON数据格式完全不一致,需要通过JS进行数据对接。
四、应用介绍
1、第一个难点
<lis-tree show-checkbox :root="rankRoot" :expand="expand" :change-handler="changeHandler"
:selected="formData.eventRank"></lis-tree>
主要属性介绍
- show-checkbox —— 源码里是展示多选框,但笔者修改了源码,将里面的参数改成了展示单选框。
- :root=“rankRoot” —— 绑定事件级别数据,包含子树。
- :expand=“expand” —— 绑定展开级别,用于展开有子树的父树。
- :selected=“formData.eventRank” —— 绑定选中的事件级别
- :change-handler=“changeHandler” —— 修改选择项时,显示选中的地方。
2、第二个难点
// 获取事件级别
async getEventRank() {
let res = await