1. 项目概述：医院物资管理系统的移动化转型
去年参与某三甲医院信息化改造时，我深刻体会到传统PC端物资管理系统在移动场景下的局限性。护士长需要频繁往返护士站电脑核对物资，医生查房时无法实时查看设备状态，这种低效的工作模式促使我们开发了这套基于uniapp+vue的微信小程序解决方案。
这套系统主要解决三个核心痛点：一是实现高值耗材（如心脏支架、人工关节）的全流程追踪，二是规范医护人员的物资申领权限管理，三是通过移动端快速完成物资盘点。与市面上通用型OA系统相比，我们的特色在于深度结合医疗场景，例如为手术室设计了语音快捷录入功能，为ICU开发了紧急物资"红色通道"审批机制。
2. 技术架构设计解析
2.1 跨端框架选型考量
选择uniapp而非原生小程序开发主要基于三点考虑：
- 多端发布需求：医院后期需要同步上线安卓/iOS版APP，uniapp的跨端能力可节省30%以上开发成本
- 开发效率因素：团队现有Vue技术栈可快速迁移，通过条件编译处理平台差异（如微信小程序需特殊处理登录流程）
- 性能平衡点：实测表明，经过优化的uniapp在物资列表页渲染性能仅比原生慢8-12ms，完全满足临床使用要求
javascript复制// 典型的多端适配代码示例
// #ifdef MP-WEIXIN
const loginHandler = () => {
wx.login({
success: res => {
// 微信专属登录逻辑
}
})
}
// #endif
2.2 前端关键技术方案
状态管理优化：采用vuex-module-decorators实现类型安全的物资状态管理，将500+种医疗物资分为：
- 普通耗材（棉签、纱布等）
- 高值耗材（单价>500元）
- 设备类（呼吸机、监护仪）
typescript复制@Module
class MedicalModule extends VuexModule {
highValueItems: ImplantItem[] = []
@Mutation
updateImplantStatus(payload: {id: string; status: number}) {
const item = this.highValueItems.find(i => i.id === payload.id)
if(item) item.status = payload.status
}
}
性能提升技巧：
- 长列表使用virtual-scroll技术，万级数据下滚动流畅
- 采用indexedDB缓存最近3个月的物资流转记录
- 关键接口实现双Token机制（accessToken+refreshToken）
3. 医护人员管理模块实现
3.1 权限分级模型设计
根据医院实际需求，我们设计了五级权限体系：
| 角色类型 | 物资查看范围 | 审批权限 | 特殊功能 |
|---|---|---|---|
| 护士 | 本科室物资 | 申领单提交 | 快速补货提醒 |
| 护士长 | 全病区物资 | 科室审批 | 月度消耗分析 |
| 医生 | 关联手术室 | 特殊耗材申请 | 手术套餐预设 |
| 设备科 | 全院资产 | 采购审批 | 供应商管理 |
| 院长 | 全数据维度 | 所有审批 | KPI仪表盘 |
3.2 核心功能实现细节
人脸识别绑定：采用微信原生人脸识别API+后端活体检测双重验证，关键代码：
javascript复制async verifyStaff() {
const res = await wx.startFacialRecognitionVerify({
name: this.formData.realName,
idCardNumber: this.formData.idCard
})
if(res.verifyResult) {
// 调用后端二次验证
const { data } = await post('/api/staff/verify', {
...res,
deptId: this.selectedDept
})
}
}
排班同步方案：
- 对接医院HIS系统获取原始排班数据
- 使用WebSocket实时推送变更通知
- 前端采用差异比对算法减少重复渲染
4. 典型问题与解决方案
4.1 微信环境特有问题
登录态维护：
- 问题：微信登录凭证code5分钟失效，但医院AD域认证较慢
- 解决方案：实现"预登录"机制，先缓存code再逐步完成后续认证
扫码入库优化：
- 痛点：医疗物资条码常被污损难以识别
- 改进方案：结合OCR识别+人工校验模式，支持模糊匹配
4.2 数据同步挑战
离线处理方案：
- 使用dexie.js实现本地IndexedDB操作
- 设计冲突解决策略（最后修改优先/人工干预）
- 关键数据增加版本号标记
javascript复制// 离线同步核心逻辑
async syncLocalData() {
const changes = await this.localDB.getUnsynced()
try {
const res = await api.batchUpdate(changes)
await this.localDB.markAsSynced(res.successIds)
if(res.failedIds.length > 0) {
this.showConflictDialog(res.failedIds)
}
} catch (err) {
this.queueRetry(changes)
}
}
5. 实战经验总结
性能调优发现：
- 医疗图片采用WebP格式后，护士站平板加载速度提升40%
- 使用wasm处理复杂的物资效期计算，耗时从120ms降至35ms
- 长列表项添加will-change属性后，iOS端滚动卡顿问题消失
医疗场景特别处理：
- 手术室模式：增加深色界面防止眩光
- 紧急申领流程：支持语音输入+指纹确认
- 高值耗材追踪：绑定RFID自动更新位置状态
这套系统上线后，医院物资盘点效率提升60%，耗材浪费减少22%。最让我意外的是护士群体的接受度——原本预计需要2周的培训周期，实际通过"以老带新"的模式3天就完成了全员切换。这也印证了好的技术方案必须紧贴实际工作场景的设计理念。