# clinic-integrated-management-system-frontend

**Repository Path**: devopsit-regen/clinic-integrated-management-system-frontend

## Basic Information

- **Project Name**: clinic-integrated-management-system-frontend
- **Description**: 本项目是诊所综合管理系统的前端部分，专为社区小型诊所及私人门诊打造。系统采用前后端分离架构，旨在覆盖诊所日常运营全流程，实现患者、医生、药品、诊疗、收费、库存等一体化管理。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-04-01
- **Last Updated**: 2026-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 诊所综合管理系统 - 前端项目

[![Vue.js](https://img.shields.io/badge/Vue-3.x-green.svg)](https://vuejs.org/)
[![Vite](https://img.shields.io/badge/Vite-4.x-orange.svg)](https://vitejs.dev/)
[![Element Plus](https://img.shields.io/badge/Element--Plus-latest-blue.svg)](https://element-plus.org/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

## 📖 项目简介

本项目是**诊所综合管理系统**的前端部分，专为社区小型诊所及私人门诊打造。系统采用前后端分离架构，旨在覆盖诊所日常运营全流程，实现患者、医生、药品、诊疗、收费、库存等一体化管理。

通过规范诊疗流程（挂号 -> 接诊 -> 处方 -> 收费 -> 发药），本系统有效提升了运营效率，支持多角色权限区分操作，并确保数据可追溯、可统计。

## 🚀 技术栈

- **核心框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **UI 组件库**: Element Plus
- **状态管理**: Pinia (推荐) 或 Vuex 4
- **路由管理**: Vue Router 4
- **HTTP 请求**: Axios
- **图表可视化**: ECharts
- **权限控制**: 基于 JWT 的 RBAC 模型（按钮级权限控制）
- **代码规范**: ESLint + Prettier

## 🏗️ 核心功能模块

前端项目主要包含以下六大核心业务模块：

### 1. 系统基础与权限管理
- **用户与角色管理**: 支持管理员、医生、收费员、护士/挂号员四类角色的增删改查。
- **权限控制**: 基于 RBAC 模型，动态渲染菜单可见性及按钮操作权（`v-if` + 权限码）。
- **日志与配置**: 登录日志、操作日志查看，以及诊所基本信息和系统参数配置。

### 2. 患者与医生资源管理
- **患者档案**: 全生命周期管理，包括建档查重、过敏史/既往病史记录及历史就诊联动。
- **医生排班**: 维护医生信息，支持周/日排班设置，实时展示号源池及扣减状态。

### 3. 药品供应链与库存
- **药品字典**: 多级分类管理，维护规格、厂家、价格及有效期。
- **出入库管理**: 支持 Excel 批量导入入库，自动出库（处方联动）与手动出库。
- **智能预警**: 库存下限预警及药品效期预警（禁止过期开方）。

### 4. 门诊诊疗全流程
- **挂号与叫号**: 患者选医挂号，生成排队队列；医生端叫号/过号操作。
- **电子病历 (EMR)**: 接诊界面自动加载患者信息，支持病历模板一键调用。
- **处方开具**: 关联病历开方，自动校验库存与过敏史冲突，计算处方总额。

### 5. 财务结算与发药
- **收银台**: 聚合待收费项目，支持多种支付方式标记。
- **退费管理**: 仅限“已收费未发药”状态可申请退费。
- **发药核对**: 扫描或勾选处方核对明细，确认后触发库存扣减。

### 6. 数据可视化驾驶舱
- **首页概览**: 展示今日挂号数、就诊人数、营收总额、库存预警数量。
- **统计报表**: 医生工作量、药品销售排行、患者就诊趋势图（ECharts 渲染）。
- **数据导出**: 支持各类业务数据导出为 Excel。

## 📂 项目结构

```bash
src/
├── api/                 # 接口定义
├── assets/              # 静态资源
├── components/          # 公共组件
├── layout/              # 布局组件 (Sidebar, Navbar, TagsView)
├── router/              # 路由配置
├── stores/              # 状态管理 (Pinia)
├── styles/              # 全局样式
├── utils/               # 工具函数 (Request, Auth, Validate)
├── views/               # 页面视图
│   ├── system/          # 系统管理
│   ├── patient/         # 患者管理
│   ├── doctor/          # 医生管理
│   ├── drug/            # 药品管理
│   ├── outpatient/      # 门诊诊疗
│   ├── finance/         # 财务结算
│   └── dashboard/       # 数据大屏
├── App.vue
└── main.js
```

## 🛠️ 开发指南

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 代码检查与格式化
```bash
npm run lint
npm run format
```

## 🔐 权限与安全

- **认证机制**: 采用 JWT (JSON Web Token) 进行无状态认证，Token 存储于本地，请求时自动携带。
- **路由守卫**: 全局前置守卫拦截未登录访问，根据用户角色动态生成可访问路由表。
- **按钮级权限**: 自定义指令 `v-permission` 控制细粒度操作权限。

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改进本项目。请遵循以下步骤：
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。

---

> **注意**: 本系统为前后端分离架构，后端基于 SpringBoot 3.5+ 提供 RESTful API。部署前请确保后端服务已正常运行并配置好跨域策略。