山东大学项目实训（九）—— 核心功能（6）

不良事件级别选择（树结构）

这个功能的实现，在当时花了笔者的不少功夫！因为不良事件级别是包含子级别的，详观下图。为什么包含子级别就很难实现呢？
答：笔者当时是真的不知道怎么实现，毫无头绪，并且UNI-APP 文档中也没有相应的组件，笔者压根想不到能用树结构来实现，主要是在以往的项目开发中，并没有用过树结构！了解得很少。

一、设计思路

在毫无头绪，无法实现该功能的时候，笔者在 DCloud 插件市场中，找到了类似的功能，并且他们称其为树组件！然后选了一个比较适合笔者的组件进行调用，但是里面的功能并不能完全满足笔者的需求，因此笔者修改了它的部分源码，进而满足笔者的需求 —— 当然这是后续需求，在这里并不影响。

二、实现方案

可以看到，笔者使用不了一个不再维护的树组件插件，笔者并没有自己实现该功能，只是调用了别人现成的组件到自己的项目中来。

三、功能实现难点

1. 拿到他人的组件，首先要看懂他人的树组件代码和文档，结合自身项目，进行参数修改。

2. 数据展示，因为笔者引用的树组件的接入数据和服务器返回的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 this.$api.adverseEventRankDicts()
	res = res.data
	if (res.code === 200) {
    
    
		var temp = []
		for (var i = 0; i < res.data.length; i++) {
    
    
			// 如果 parent_id = 0 ,则将其存入父级别数组中
			if (res.data[i].parentId == 0) {
    
    
				var parentParam = {
    
    }
				// 将id存入
				parentParam.id = res.data[i].id
				// 将级别和描述放在同一属性下
				parentParam.name = res.data[i].rank + " ： " + res.data[i].description
				this.rankRoot.children.push(parentParam)
			} else {
    
    
				var childParam = {
    
    }
				// 将id存入
				childParam.id = res.data[i].id
				// 将父id存入
				childParam.parent_id = res.data[i].parentId
				// 将级别和描述放在同一属性下
				childParam.name = res.data[i].rank + " ： " + res.data[i].description
				temp.push(childParam)
			}
		}
		// 将父子级别分离后，进行归属操作,对每一个子级别进行判断
		for (var i = 0; i < temp.length; i++) {
    
    
			// 如果它的父ID等于父级别的ID,则说明该父级别下有子级别
			for (var j = 0; j < this.rankRoot.children.length; j++) {
    
    
				if (temp[i].parent_id == this.rankRoot.children[j].id) {
    
    
					// 展开父级别
					var expendId = {
    
    }
					// 给父级别赋予子级别
					this.rankRoot.children[j].children = []
					// 将父级别的 id 传给 this.expendId.id
					expendId.id = this.rankRoot.children[j].id
					this.expand.push(expendId)
				}
			}
		}
		// 将子级别存入对应父级别的子数组中
		for (var i = 0; i < temp.length; i++) {
    
    
			for (var j = 0; j < this.rankRoot.children.length; j++) {
    
    
				if (temp[i].parent_id == this.rankRoot.children[j].id) {
    
    
					this.rankRoot.children[j].children.push(temp[i])
				}
			}
		}
	}
},

主要属性介绍

• 关键在于 rankRoot 和 expand 。注释有详细讲解。

基本情况页下一步实现逻辑

其实下一步的逻辑就分分步骤：1、数据校验；2、向服务器发起获取下一组件需要的数据的请求；3、隐藏和显示。
所以，之后的下一步介绍就简单介绍或者略过了。至于上一步就是 flag 取反，就不再说明了。

// 第二个下一步：基本情况页的下一步
secondStep(ref) {
    
    
	this.$refs[ref].validate().then(res => {
    
    
		this.getEventRank()
		this.currentStep = '3'
		this.showBaseCaseInfo = false
		this.showEventRankInfo = true
	}).catch(err => {
    
    })
},