山东大学项目实训（八）—— 核心功能（5）

不良事件基本情况填写

一、设计思路

很显然，这是表单的一部分。其中有两个字段比较特殊——不良事件发生场所和不良事件发生前患者所属状态。前者只能单选，后者可多选。 为了系统的可拓展性，所以这两个字段的数据都需要从服务器上获取。此外，既然是表单，那就得有表单的验证。

二、实现方案

表单组件在之前的患者信息显示那里有用到过，因此直接使用对应的组件。

在实现发生场所和发生前患者所处状态的时候，笔者在 UNI-APP 文档中发现了能够完全对应笔者所需功能的组件 —— uni-data-checkbox，它即能满足单选，也能满足多选，同时还能绑定从服务器中获取到的数据。这个组件和之前使用的 uni-data-picker 十分相似，这也是笔者为什么写了一个统一方法管理的 function.js
至于表单校验，UNI-APP 文档中也有详细说明，笔者就根据文档的说明结合项目做出了校验。
此外，还有一个发生日期字段。看下图，在 UNI-APP 表单组件中真可谓是应用仅有，拿来即用！

三、应用介绍

<uni-forms ref="valiForm" :rules="rules" :modelValue="formData.baseCaseInfo" validate-trigger="submit">
	<uni-forms-item label="发生场所" name="occurLocation">
		<uni-data-checkbox v-model="formData.baseCaseInfo.occurLocation" :localdata="location" />
	</uni-forms-item>
	<uni-forms-item label="发生前患者所处状态" name="patientStates">
		<uni-data-checkbox v-model="formData.baseCaseInfo.patientStates" multiple
			:localdata="patientStates" />
	</uni-forms-item>
	<uni-forms-item label="具体地点" name="exactLocation">
		<uni-easyinput type="textarea" v-model="formData.baseCaseInfo.exactLocation" />
	</uni-forms-item>
	<uni-forms-item label="发生经过" name="description">
		<uni-easyinput type="textarea" v-model="formData.baseCaseInfo.description" />
	</uni-forms-item>
	<uni-forms-item label="发生时间" name="occurTime">
		<uni-datetime-picker type="datetime" return-type="timestamp" hideSecond :end="Date.now()"
			v-model="formData.baseCaseInfo.occurTime" />
	</uni-forms-item>
</uni-forms>

校验规则

// 表单校验规则
rules: {
	// 基本情况
	occurTime: {
		rules: [{
			required: true,
			errorMessage: '请输入事件发生时间'
		}]
	},
	exactLocation: {
		rules: [{
			required: true,
			errorMessage: '请输入事件发生具体地点'
		}]
	},
	description: {
		rules: [{
			required: true,
			errorMessage: '请输入事件发生经过'
		}]
	},
	patientStates: {
		rules: [{
			required: true,
			errorMessage: '请选择事件发生前患者所处状态',
		}]
	},
	occurLocation: {
		rules: [{
			required: true,
			errorMessage: '请选择事件发生场所',
		}]
	}					
},

主要属性介绍

• :rules=“rules” —— 绑定校验规则
• :localdata=“location” —— 绑定从服务器中获取的发生场所数据
• :localdata=“patientStates” —— 绑定从服务器中获取的发生前患者所属状态数据
• return-type=“timestamp” —— 返回类型为服务器需要的时间戳
• hideSecond —— 隐藏秒，发生时间精确到分即可
• :end="Date.now() —— 可选择的截止时间为当前时间，发生时间不可能为未来的时间

主要方法实现逻辑

同步网络请求

其实到现在的网络请求，基本上就是照葫芦画瓢，没啥可说的。

// 获取发生场所
async getLocation() {
	let res = await this.$api.incidentOccurLocationDict()
	res = res.data
	if (res.code === 200) {
		this.location = assist.getArrayData(res)
	}
},
// 获取发生前患者状态
async getPatientStates() {
	let res = await this.$api.patientStateBeforeIncidentDicts()
	res = res.data
	if (res.code === 200) {
		this.patientStates = assist.getArrayData(res)
	}
},

患者信息页的下一步

一、设计思路
患者信息页的下一步，逻辑是很清晰的。
首先，要隐藏类型组件和患者信息组件，同时展示基本情况组件。
其次，要确保用户是真的查询到相应的患者信息。
最后，同时加载下一组件需要用到的动态数据 —— 在点下一步的同时去发起同步网络请求。

为什么不在onLoad生命周期函数执行时，先加载完这些需要的数据呢？
答：1、确保用户体验， 因为上报事件需要向服务器发起很多次请求，同时将这么多请求发给服务器，服务器要进行多次处理，并做出响应，而用户则需要一直等待服务器响应完这些请求，才能进入到上报页面，这显然是不友好的；2、减轻服务器负担， 正如上面所说的，这对服务器也不太友好，因此将请求进行分开发送；3、友好的代码可读性， 每一个组件需要什么数据，都在上一个组件的下一步中进行获取，逻辑清晰。

二、实现方案
1、隐藏和显示相应组件，则修改对应的 flag 即可。
2、确保用户是真的查询到相应的患者信息，笔者用患者名字作为flag，如果患者名字不为空，则说明查询到对应的患者了，反之，则提示用户输入患者证件信息。
3、直接调用并发起同步网络请求即可。

三、应用介绍
代码命名对应的意思通俗易懂，因此笔者就不阐述说明了。

// 第一个下一步：患者信息页的下一步
nextStep() {
	if (this.formData.patientInfo.name) {
		this.getLocation()
		this.getPatientStates()
		this.currentStep = '2'
		this.showTypeInfo = false
		this.showPatientInfo = false
		this.showBaseCaseInfo = true
	} else {
		uni.showToast({
			title: '请输入患者证件号码',
			icon: 'none'
		})
	}
},

功能效果展示链接: https://blog.csdn.net/long99920/article/details/124097466.