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

在这篇博客之前的博客中已经介绍完了所有的不良事件模板。只剩下暂存、匿名上报、实名上报以及附件上传功能没有介绍。 而匿名/实名上报功能十分类似，就修改一下字段即可。同时，普通事件模板和器械模板的暂存、上报功能十分相似，修改对应的数据即可。故后面用上报事件指代这两功能。

上报事件功能（普通事件模板和医疗器械模板的上报功能类似，故展示普通事件模板的上报功能）

一、设计思路

对于一个按钮来说，它的逻辑就是当用户点击它的时候触发事件。笔者的想法是：当用户点击上报事件的时候，要进行二次确认，防止误触等情况，以免出现用户原不仍不想上报事件，却不小心上报了这样的情形。
而上报的核心就是用户之前填写的数据的整合以及向服务器发起上报事件请求。
上报成功后，跳转到首页。

二、实现方案

1、当点击上报按钮时，出现二次确认弹窗， 笔者在查阅 UNI-APP 文档时，寻找到有相应组件，故直接引用，并修改相应参数。

2、数据整合，其实就是表单的提交，逻辑应该是十分清晰的，由于不能大量展示源码，故表单的提交即上报事件就采用普通事件模板的上报事件代码作为展示。

三、应用介绍

<view class="button">
	<button type="default" plain size="mini" @click="thirdBack">上一步</button>
	<button type="warn" plain size="mini" @click="temporarySave(formData.typeId)">暂  存</button>
	<button type="primary" plain size="mini" @click="forthStep">实名上报</button>
	<button type="primary" plain size="mini" @click="fifthStep">匿名上报</button>
</view>	
<uni-popup ref="alertFactDialog" type="dialog">
	<uni-popup-dialog type="success" cancelText="关闭" confirmText="确认" title="提醒" 
		content="请再次确认是否上报" @confirm="factConfirm"></uni-popup-dialog>
</uni-popup>

主要属性介绍

• @click=“forthStep” —— 实名上报点击后触发的事件方法，即数据校验，并将对应参数设为实名上报的参数，同时打开二次确认弹窗。
• @click=“fifthStep” —— 匿名上报点击后触发的事件方法，即数据校验，并将对应参数设为匿名上报的参数，同时打开二次确认弹窗。
• @confirm=“factConfirm” —— 二次确认弹窗，点击确认后触发的事方法，即向服务器发起 POST 请求提交表单数据。

四、主要方法实现逻辑

// 第四个下一步：事件二级类别页的实名提交
forthStep() {	
	let _this = this
	if (_this.formData.eventCategory.id > 0) {
		_this.$refs.alertFactDialog.open()
		// 设置实名状态
		_this.formData.isAnonymous = 0	
	} else {
		uni.showToast({
			title: '请选择事件类别',
			icon: 'none'
		})
	}
},
// 事件二级类别页的提交确认
async factConfirm() {
	let _this = this
	let data = {}						
	// 患者卡号（住院号 0/门诊号 1/就诊卡 2）
	if (_this.formData.patientInfo.cardType == 0) {
		data.inpatientNum = parseInt(_this.formData.patientInfo.cardId)
	} else if (_this.formData.patientInfo.cardType == 1) {
		data.outpatientNum = parseInt(_this.formData.patientInfo.cardId)
	} else {
		data.medicalCardNum = parseInt(_this.formData.patientInfo.cardId)
	}				
	// 基本情况: 发生经过
	data.description = _this.formData.baseCaseInfo.description
	// 基本情况: 具体地点
	data.occurExactLocation = _this.formData.baseCaseInfo.exactLocation
	// 基本情况: 发生场所
	data.incidentOccurLocation = _this.formData.baseCaseInfo.occurLocation
	// 基本情况: 发生时间
	data.occurTime = _this.formData.baseCaseInfo.occurTime
	// 基本情况: 患者状态
	data.patientStateBeforeIncident = _this.formData.baseCaseInfo.patientStates			
	// 事件级别ID
	data.level = _this.formData.eventRank.id
	// 事件类别ID
	data.category = parseInt(_this.formData.eventCategory.id)
	// 实名/匿名状态
	data.reportUserId = -1
	console.log(data)			
	let res = await _this.$api.adverseEventReport(data)
	let code = res.data.code						
	if (code === 200) {
		uni.showToast({
			icon: 'success',
			title: '上报成功',
			mask: true
		})
		setTimeout(function() {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}, 1500)			
	}
},
// 第五个下一步：事件二级类别页的匿名提交
fifthStep() {
	let _this = this
	if (_this.formData.eventCategory.id > 0) {
		_this.$refs.alertFactDialog.open()
		// 设置实名状态
		_this.formData.isAnonymous = -1	
	} else {
		uni.showToast({
			title: '请选择事件类别',
			icon: 'none'
		})
	}
},

暂存功能

暂存功能和上报事件功能一样，但是它需要包含所有字段，即使字段为空。类似于向服务器发起小型的上报事件请求，服务器对它的约束比较放开，不一定要字段不能为空。