山东大学项目实训（六）—— 核心功能（3）

以下介绍的流程： 设计思路 ——> 实现方案 ——> 实现难点(有的话) ——> 应用介绍 ——> 主要方法实现逻辑介绍

第二步：患者资料的查询

由于医院的HIS系统能提供三种查询患者资料的方式。

一、设计思路
笔者原本有两种设计想法：1、在开会讨论之前， 笔者认为HIS系统中患者的不同卡号能够区分卡的类型的，因此觉得只需要给一个查询框即可（因为实现起来简单！）；2、在开会讨论之后， 因为团队也不太懂HIS系统提供的视图到底是怎么样的，所以保险起见，最好还是给个下拉框让用户选择不同卡的类型，再输入卡号。
因此笔者最终采取了第二种设计方案

二、实现方案

1. 要完成能够给个下拉框让用户选择不同卡的类型，当时在做完第一步的功能后，这里又让给下拉框。笔者很自然而然地采取了第一步的 uni-data-picker 级联选择器！ 毕竟都是和下拉框的功能很像的，并且刚刚使用过，记忆犹新！因此直接调用了。
2. 输入卡号查询是一个再简单不过的搜索栏了。当时笔者没有想过查询功能还能用一个输入框和一个按钮实现的！ 主要是笔者当时在 UNI-APP 官方文档中看到有搜索栏的组件，因此想着直接拿来用即可。

三、应用介绍

1. 选择不同类型弹窗

<uni-data-picker v-model="formData.patientInfo.cardType" popup-title="选择证件类型" :localdata="searchItems"
	@change="searchChange" :clear-icon="false">
</uni-data-picker>

主要属性介绍

• :localdata=“searchItems” —— 绑定弹窗显示的数据，searchItems的数据为静态数据（住院号为0，门诊号为1，就诊卡为2）
• 其余属性和第一步的类似
  

2. 搜索栏

<uni-search-bar @confirm="searchPatient" placeholder="请输入患者证件号码" 
	cancelButton="none"
	v-model="formData.patientInfo.cardId"
	:focus="true" maxlength="50"/>	

主要属性介绍

• v-model=“formData.patientInfo.cardId” —— 双向绑定患者卡号
• @confirm=“searchPatient” —— 按回车后确认查询，向服务器发起发现患者信息请求（携带卡类型、卡号参数）

患者信息显示

既然都查询患者信息了，那必然是要显示患者信息的。

一、设计思路
笔者对这显示信息有三种想法：1、给个2×n的表格，左边显示字段，右边显示值；2、每个字段都给一个禁用输入框，显示对应的值；3、利用表单来显示字段和值。

二、实现方案
笔者其实三个想法都实现了，然后最终决定使用了第三种设计思路。由于笔者没有边开发边写博客，所以现在无法呈现第一种和第二种实现效果（没必要为了写博客再去敲一遍无用的代码）。

说说为什么选择第三种：
对于第一种和第二种， UNI-APP 官方文档中有表格组件和输入框的案例。但是样式实在太丑了。。。所以抛弃了
对于第三种， UNI-APP 官方文档有相应的表单组件。且样式相比之前两种都好看，所以采用了这一种。

三、应用介绍

<uni-forms :modelValue="formData.patientInfo">
	<uni-forms-item label="患者姓名">
		<uni-easyinput disabled v-model="formData.patientInfo.name" />
	</uni-forms-item>
	<uni-forms-item label="年龄">
		<uni-easyinput disabled v-model="formData.patientInfo.age" />
	</uni-forms-item>
	<uni-forms-item label="性别">
		<uni-data-checkbox disabled v-model="formData.patientInfo.sex" :localdata="sexs" />
	</uni-forms-item>
	<uni-forms-item label="临床诊断">
		<uni-easyinput disabled type="textarea" v-model="formData.patientInfo.diagnosis" />
	</uni-forms-item>
</uni-forms>

主要属性介绍

• disabled —— 禁用
• v-model=“formData.patientInfo.xxxx” —— 绑定患者信息，用 v-bind 也可以，主要是没什么影响，后续提交表格不需要这些字段所以习惯就用了 v-model 双向绑定
• :localdata=“sexs” —— 和第二步介绍的卡类型类似，（数据库中存的是0和1，显示的话就是男和女）

主要方法实现逻辑

获取患者信息方法

一、设计思路

在用户按回车查询之后，系统能够向服务器发起获取患者资料的请求。

二、解决方案
这显然也是一个同步网络请求，在笔者的设计中，得到响应数据后需要进行页面渲染。如果不使用同步网络请求，则出现error：‘result’ undefined。其实在理解同步和异步请求的概念之后，这一看便知会报什么错误。

三、应用介绍
查询的时候，根据 UNI-APP 文档的组件方法介绍，会传递查询的参数到对应的方法中，即 searchPatient(e) 中的e。所以通过将 e 中的value —— 即卡号传给表单数据以便后续提交。同理，将响应后得到的数据也传给表单数据。

// 获取患者信息
async searchPatient(e) {
	let _this = this
	let res = e.value
	this.formData.patientInfo.cardId = res
	let result = await this.$api.patientInfo(_this.formData.patientInfo.cardId,_this.formData.patientInfo.cardType)
	result = result.data
	if(result.code === 200) {			
		this.formData.patientInfo.name = result.data.name
		this.formData.patientInfo.age = result.data.age
		this.formData.patientInfo.sex = result.data.sex
		this.formData.patientInfo.diagnosis = result.data.clinicalDiagnosis			
	}
},

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