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

一个双子座的程序猿

已于 2022-04-14 16:07:30 修改

阅读量354

点赞数

分类专栏：智慧医院不良事件精细化管理平台文章标签：微信小程序 vue css json js

于 2022-04-14 15:47:09 首次发布

本文链接：https://blog.csdn.net/long99920/article/details/124157314

版权

本文档详细介绍了如何使用UNI-APP开发不良事件上报系统的核心功能，包括不良事件基本信息表单的设计与实现。表单组件如uni-data-checkbox用于选择发生场所和患者状态，uni-datetime-picker处理发生时间，同时实现了表单验证。通过异步网络请求获取数据并展示了患者信息页下一步的操作逻辑，确保了用户体验和服务器效率。

摘要由CSDN通过智能技术生成

不良事件基本情况填写

一、设计思路

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

二、实现方案

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

在实现发生场所和发生前患者所处状态的时候，笔者在 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