上报功能流程（有部分修改）

在这里插入图片描述

第一步：不良事件类型选择

根据流程，点击上报按钮后，首先让用户选择不良事件类型。

一、设计思路
笔者刚开始的想法是：当用户点击上报按钮，进入上报界面后，能够自动弹出不良事件类型选择下拉框。但是笔者当时并不会实现这样的功能，然后查询了相关资料，也难以实现这样的功能。

二、实现方案
最终在翻阅 UNI-APP 官方文档中，找到一个类似功能的组件 —— uni-data-picker
在这里插入图片描述
三、应用介绍
通过查阅组件使用参数，结合自身项目进行配置。以下为 uni-data-picker 的在项目中的使用。

<uni-data-picker placeholder="请选择不良事件类型" popup-title="不良事件类型" :localdata="typeItems"
	v-model="formData.typeId" @change="typeChange" :clear-icon="false">
</uni-data-picker>

主要属性介绍

:localdata=“typeItems” —— 绑定弹窗显示的数据，typeItems的数据从数据库中获取
v-model=“formData.typeId” —— 双向数据绑定，为上报的事件类型ID
@change=“typeChange” —— 类型改变方法，当类型改变时，动态改变value，从而显示不同的事件类型。

在这里插入图片描述

主要方法实现逻辑

不良事件类型请求方法

由于笔者是按流程进行项目开发的，笔者当时因为不太懂同步网络请求和异步网络请求的概念的， 所以卡在这里挺久的 —— 不知道怎么设计这个方法！

并不像笔者之前写的那篇网络请求封装显得很轻松。（由于前面不太懂怎么样写这个项目博客，请求封装介绍写的太简陋了，后续将进行补充）

这里就先假装笔者经历了重重困难，然后终于在网络请求的知识上有所收获，才有了如下的设计思路。

一、设计思路

在用户点击上报按钮进入上报事件页面的之后，在用户点击选择不良事件类型之前，系统能够向服务器发起获取不良事件类型的请求，还要能从服务器得到响应，在得到响应之后才能加载完页面。

二、解决方案

在熟知了同步网络请求和异步网络请求的概念后，由于之前学习 VUE 框架时学习过相应的生命周期函数，并且UNI-APP 中也支持相应的生命周期函数。
当时很自然而然的想到了：1、在页面加载的时候（即调用OnLoad生命周期函数的时候），就发起这个请求。 2、为了解决静态页面已经展示了，而动态数据还没有加载进来的问题，采取了发起同步网络请求的措施！ 同步请求即需要响应返回了，才能执行后面的代码！

三、应用介绍

这里先简单说明一下：同步网络请求需要async、await以及Promise
async、await、Promise等关键字将在后面网络请求封装的补充中进行详细介绍。

// 获取不良事件类型
async getEventType() {
	let res = await this.$api.adverseEventPrimaryClassificationDicts()
	res = res.data
	if (res.code === 200) {
		this.typeItems = assist.getArrayData(res)
	}
},

onLoad 生命周期函数

onLoad() {
	// 页面加载时，向服务器发起获取不良事件类型请求
	this.getEventType()
}

辅助函数 function.js

注释中有详细的介绍

/**
 *  常用方法封装统一管理
 */

/**
 * 鉴于 <uni-data-checkbox> 和 <uni-data-picker> 的特殊性：
 * 与这些标签绑定的数组内部的键必须为 text 和 value
 * 并且使用频率较高,因此封装了该方法，提高代码复用率
 */
export const getArrayData = (res) => {
	var params = []
	for (var i = 0; i < res.data.length; i++) {
		var param = {};
		param.text = res.data[i].description;
		param.value = res.data[i].id;
		params.push(param);
	}
	return params
}


export default {
	getArrayData
}