1. 项目背景与核心价值
医院物资管理系统是医疗机构日常运营中不可或缺的支撑系统。传统PC端管理系统存在使用场景受限、操作流程繁琐等问题，而基于微信小程序的解决方案能够实现：
- 随时随地的移动办公：医护人员通过手机即可完成物资申领、审批、盘点等操作
- 无缝对接微信生态：利用微信账号体系、消息通知等原生能力
- 开发效率最大化：uniapp跨平台框架可同时覆盖iOS/Android/Web多端
我们团队采用uniapp+vue技术栈开发的这套系统，特别针对医护人员管理模块进行了深度优化，解决了以下痛点：
- 权限分级管理混乱：不同职级医护人员操作权限不明确
- 物资申领流程冗长：平均处理时间从2小时缩短至15分钟
- 数据统计滞后：实时可视化看板替代传统周报形式
2. 技术架构设计
2.1 前端技术选型
采用uniapp+vue的组合主要基于：
-
开发效率考量：
- 一套代码多端发布（微信小程序/H5/App）
- 基于vue的语法降低学习成本
- 丰富的插件市场（uView等UI库直接可用）
-
性能优化方案：
javascript复制// 示例：列表渲染优化 <template> <view v-for="(item,index) in staffList" :key="item.id + index" v-if="index < 20 || shouldLoadMore"> <staff-card :data="item"/> </view> </template> -
微信原生能力集成：
- 调用微信扫一扫进行物资二维码识别
- 使用微信通讯录选择器快速选择审批人
- 订阅消息通知审批结果
2.2 后端接口设计
采用RESTful API规范，关键接口包括：
| 接口类型 | 路径 | 参数示例 | 说明 |
|---|---|---|---|
| POST | /api/staff/login | 微信静默登录 | |
| GET | /api/staff/list | 按科室筛选 | |
| PUT | /api/staff/role | 角色变更 |
特别注意：所有敏感操作接口必须增加二级token验证，防止越权操作
3. 核心功能实现
3.1 权限管理系统
采用RBAC（基于角色的访问控制）模型：
-
角色定义：
- 0-超级管理员
- 1-科室主任
- 2-护士长
- 3-普通医护
-
权限拦截实现：
javascript复制// 路由守卫示例 uni.addInterceptor('navigateTo', { invoke(args) { const requiredRole = routeMeta[args.url]?.role if(requiredRole > store.state.user.role) { uni.showToast({ title: '权限不足', icon: 'none' }) return false } } }) -
动态菜单方案：
- 后端返回权限树
- 前端递归渲染侧边栏
- 本地缓存权限数据
3.2 物资申领流程
优化后的申领流程包含：
-
智能填充：
- 基于历史记录推荐常用物资
- 扫码自动填充物资信息
-
多级审批：
mermaid复制graph TD A[发起申请] --> B{金额<1000?} B -->|是| C[护士长审批] B -->|否| D[科室主任审批] C --> E[完成] D --> E -
状态实时同步：
- WebSocket推送审批状态
- 微信服务通知提醒
4. 性能优化实践
4.1 首屏加载优化
-
分包策略：
json复制{ "subPackages": [{ "root": "staffModule", "pages": ["manage/list", "manage/detail"] }] } -
数据缓存方案：
- 高频接口数据存入vuex
- 本地持久化使用uni.setStorageSync
- 设置合理的缓存过期时间
-
图片处理技巧：
- 使用腾讯云图片压缩
- 懒加载占位图
- SVG替代部分图标
4.2 大数据量渲染
采用虚拟列表技术：
javascript复制// 示例代码
<template>
<scroll-view
:scroll-top="scrollTop"
@scroll="handleScroll">
<view :style="{height: totalHeight + 'px'}">
<view
v-for="item in visibleData"
:style="{transform: `translateY(${item.offset}px)`}">
<!-- 列表项内容 -->
</view>
</view>
</scroll-view>
</template>
5. 典型问题解决方案
5.1 微信登录态维护
常见问题场景：
- token过期导致频繁重新登录
- 多设备登录冲突
解决方案：
javascript复制// 双token机制实现
const refreshToken = async () => {
try {
const res = await uni.request({
url: '/api/auth/refresh',
data: { refresh_token: store.state.refreshToken }
})
store.commit('updateToken', res.data)
} catch(e) {
// 跳转登录页
}
}
// 请求拦截器
uni.addInterceptor('request', {
fail(err) {
if(err.statusCode === 401) {
await refreshToken()
return originalRequest()
}
}
})
5.2 表单复杂校验
医护人员信息表单包含：
- 基础信息校验
- 执业资格验证
- 科室关联规则
实现方案：
javascript复制const rules = {
licenseNo: {
rules: [{
validate: val => /^[A-Z]\d{6}$/.test(val),
message: '执业证号格式错误'
}],
validateTrigger: 'blur'
},
deptId: {
rules: [{
validate: val => store.state.deptList.some(d => d.id === val),
message: '请选择有效科室'
}]
}
}
6. 数据统计与分析
6.1 物资使用看板
关键技术点：
-
ECharts微信小程序适配：
javascript复制// 引入小程序专用版本 import * as echarts from '../../components/ec-canvas/echarts' // 初始化示例 function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width, height }) chart.setOption({ series: [{ type: 'pie', data: [{value: 35,name: '口罩'}] }] }) return chart } -
实时数据更新策略：
- WebSocket推送数据变更
- 本地差异比对更新
- 节流渲染控制
6.2 导出功能实现
医护人员排班表导出方案：
- 前端生成Excel（使用sheetjs）
- 调用微信文件系统API
- 分享到企业微信
javascript复制const exportExcel = async () => {
const wb = XLSX.utils.book_new()
const ws = XLSX.utils.json_to_sheet(exportData)
XLSX.utils.book_append_sheet(wb, ws, "排班表")
const buffer = XLSX.write(wb, {type: 'array'})
const filePath = `${wx.env.USER_DATA_PATH}/schedule.xlsx`
await uni.writeFile({
filePath,
data: buffer,
encoding: 'binary'
})
uni.openDocument({
filePath,
fileType: 'xlsx'
})
}
7. 项目部署与运维
7.1 CI/CD流程
微信小程序特有流程：
- 代码上传需指定体验版
- 不同环境配置管理
- 自动生成版本号
yaml复制# GitHub Actions示例
name: Deploy
on: push
jobs:
deploy:
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm run build:mp-weixin
- uses: wxmlfile/miniprogram-ci-action@v1
with:
appid: ${{ secrets.APPID }}
privateKey: ${{ secrets.PRIVATE_KEY }}
projectPath: ./dist/build/mp-weixin
version: ${{ github.run_number }}
desc: ${{ github.commit_message }}
7.2 异常监控
实施方案：
- 微信原生错误监听
javascript复制// app.vue onError(err) { uni.request({ url: '/api/log/error', data: { msg: err.stack } }) } - 接口异常采集
- 性能数据上报
8. 扩展优化方向
8.1 智能预测功能
基于历史数据的优化建议：
- 物资短缺预警算法
- 排班冲突检测
- 值班疲劳度分析
8.2 硬件设备对接
可扩展的IoT设备：
- 智能柜扫码开门
- 温湿度传感器数据采集
- 人脸考勤机联动
javascript复制// 蓝牙设备通信示例
const connectDevice = async () => {
const devices = await uni.startBluetoothDevicesDiscovery()
const device = devices.find(d => d.name.includes('MED_'))
await uni.createBLEConnection({
deviceId: device.deviceId
})
const services = await uni.getBLEDeviceServices({
deviceId: device.deviceId
})
// 监听特征值变化
uni.onBLECharacteristicValueChange(res => {
console.log(res.value)
})
}
在实际开发中，我们发现医护人员对移动端操作的耐心阈值明显低于PC端，因此所有交互设计必须遵循"三次点击必完成"原则。例如物资申领流程，通过预填充、智能推荐、极简表单三个维度将平均操作时间控制在90秒内。