山东大学项目实训（十）—— 核心功能（7）

不良事件类别选择

根据项目需求，不同事件类型是有不同事件类别的，故用户在第一步的操作不仅影响模板，也影响这里的数据展示。如药物相关和诊疗不良事件，详见下图。

一、设计思路

1、数据的获取，通过不良事件类型的ID向服务器发起获取对应的类别数据请求；2、数据的展示，之前用过树组件，但是因为这里的类别是没有父子关系的。因此笔者想着只需要使用普通的单选组件即可。

二、实现方案

因为笔者当时都做到这些步骤了，其实已经很熟悉项目的开发了。设计思路也不很少出现差错，想到的可能就是目前最好的设计方案！故直接就根据上述设计思路进行了实现。

三、应用介绍

简单的 radio 组件使用。使用 v-for 遍历所有数据。

<radio-group @change="radioChange">
	<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in eventCategorys"
		:key="item.value">
		<view class="category-des">
			<radio style="transform:scale(0.7)" :value="item.value" :checked="item.value == formData.eventCategory.id" color="#2979FF" />
			{
   
   {item.text}}			
		</view>
	</label>
</radio-group>

四、主要方法实现逻辑

和前面类似，照葫芦画瓢。

// 获取事件类别
async getEventCategory() {
    
    
	let _this = this
	let res = await _this.$api.adverseEventSecondaryClassificationDict(_this.formData.typeId)
	res = res.data
	if (res.code === 200) {
    
    
		_this.eventCategorys = assist.getArrayData(res)
	}
},
// 选中的事件类别
radioChange(res) {
    
    
	this.formData.eventCategory.id = res.detail.value
},