# Caresy-web

**Repository Path**: java-and-net/caresy-web

## Basic Information

- **Project Name**: Caresy-web
- **Description**: MIT | Caresy HIS 医院信息管理系统 - 前端（Vue3 + Ant Design Vue + Axios），代号【Caresy】
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-02
- **Last Updated**: 2026-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Caresy Frontend

Caresy HIS 医院信息管理系统 — 前端项目

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue 3 | ^3.5 | 渐进式前端框架 |
| Vite | ^6.3 | 构建工具 + 开发服务器 |
| Ant Design Vue | ^4.2 | UI 组件库 |
| Vue Router | ^4.5 | 路由管理 |
| Pinia | ^3.0 | 状态管理 |
| Axios | ^1.9 | HTTP 请求 |
| ECharts | ^5.6 | 数据可视化图表 |
| Day.js | ^1.11 | 日期处理 |
| vue-i18n | ^11.1 | 国际化 (中/英) |

## 快速开始

### 环境要求

- Node.js >= 18
- npm >= 9 或 pnpm >= 8

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

启动后访问 `http://localhost:3000`，API 请求自动代理到 `http://localhost:5000`。

### 构建生产包

```bash
npm run build
```

产出在 `dist/` 目录，可直接部署到 Nginx。

### 预览构建结果

```bash
npm run preview
```

## 预置账号

| 用户名 | 密码 | 角色 |
|--------|------|------|
| admin | Admin@123 | 系统管理员 |
| doctor1 | Doctor@123 | 医生 |
| staff1 | Admin@123 | 行政人员 |

## 项目结构

```
CaresyFrontend/
├── index.html                  # 入口 HTML
├── package.json                # 依赖与脚本
├── vite.config.js              # Vite 配置（代理/别名/样式）
├── .gitignore
├── README.md
└── src/
    ├── main.js                 # 应用入口
    ├── App.vue                 # 根组件（Ant Design 中文 locale）
    ├── router/
    │   └── index.js            # 路由配置（71 个页面路由）
    ├── stores/
    │   └── user.js             # Pinia 用户状态（token/登录/登出）
    ├── utils/
    │   └── request.js          # Axios 封装（拦截器/token 注入/错误处理）
    ├── components/
    │   └── CrudPage.vue        # 通用 CRUD 组件
    ├── layouts/
    │   └── MainLayout.vue      # 主布局（侧边栏/顶栏/面包屑）
    ├── api/                    # API 模块（按功能分组）
    │   ├── auth.js             # 认证
    │   ├── system.js           # 系统管理
    │   ├── schedule.js         # 挂号排班
    │   ├── pharmacy.js         # 药品管理
    │   ├── doctor.js           # 医生站
    │   ├── finance.js          # 收费管理
    │   ├── staff.js            # 人事管理
    │   ├── ris.js              # 影像管理
    │   ├── insurance.js        # 医保管理
    │   └── others.js           # 其余模块
    └── views/                  # 页面视图（20 个模块，71 个页面）
        ├── Login.vue           # 登录页
        ├── Dashboard.vue       # 工作台（统计卡片 + 图表）
        ├── system/             # 系统管理（11 页）
        ├── staff/              # 人事管理（3 页）
        ├── schedule/           # 挂号排班（8 页）
        ├── pharmacy/           # 药品管理（8 页）
        ├── doctor/             # 医生站（3 页）
        ├── finance/            # 收费管理（3 页）
        ├── ris/                # 影像管理（4 页）
        ├── insurance/          # 医保管理（3 页）
        ├── materials/          # 物资管理（4 页）
        ├── equipment/          # 设备管理（2 页）
        ├── nurse/              # 护士站（2 页）
        ├── emr/                # 电子病历（1 页）
        ├── lis/                # 检验管理（3 页）
        ├── sterilization/      # 消毒供应（1 页）
        ├── exam/               # 体检管理（3 页）
        ├── case/               # 病案管理（1 页）
        ├── blood/              # 血库管理（1 页）
        ├── drugreview/         # 处方点评（1 页）
        ├── pathway/            # 临床路径（1 页）
        └── surgery/            # 手术麻醉（2 页）
```

## 功能模块

### 系统管理
- **用户管理** — 增删改查、按关键词搜索、角色分配
- **角色管理** — 角色 CRUD、菜单权限分配、用户分配
- **菜单管理** — 树形菜单、拖拽排序、图标配置
- **科室管理** — 科室编码、类型、楼层、电话
- **字典管理** — 字典类型 + 字典项两级管理
- **操作日志** — 只读列表，按操作人/模块筛选
- **部门分组** — 部门分组管理
- **机构管理** — 医院机构信息
- **病区管理** — 病区编码、床位数统计
- **床位管理** — 床位号、状态（空闲/占用/维修）、日费用
- **公告管理** — 通知/公告发布

### 人事管理
- **员工档案** — 工号、科室、职位、入职日期
- **考勤管理** — 签到签退、状态（正常/迟到/早退/缺勤）
- **培训记录** — 培训名称、时长、结果

### 挂号排班
- **科室排班** — 按科室查看排班
- **医生档案** — 职称、专长管理
- **排班管理** — 单条/批量排班（日期范围+时段+限号）
- **患者管理** — 完整患者档案（身份证/医保/紧急联系人）
- **挂号管理** — 新挂号、挂号列表
- **预约管理** — 完成/取消预约操作
- **病历管理** — 主诉、现病史、体格检查、诊断、治疗方案
- **处方管理** — 处方开立、处方明细查询

### 药品管理
- **药品目录** — 药品名称/通用名/规格/单价/处方药标识
- **药品分类** — 药品分类树
- **供应商管理** — 供应商信息、许可证号
- **仓库管理** — 药品仓库、管理员
- **出入库管理** — 入库/出库操作记录
- **盘点管理** — 库存盘点单
- **价格日志** — 药品价格变更历史（只读）
- **库存日志** — 库存变动历史（只读）

### 医生站
- **检验报告** — 报告查看、状态更新（待检验→已完成）
- **ICD 诊断** — ICD 编码管理
- **病案管理** — 入院/出院日期、主治医生、诊断、治疗小结

### 住院管理
- **入院管理** — 入院登记、出院操作
- **医嘱管理** — 长期/临时医嘱开立
- **住院费用** — 住院费用明细（只读）

### 收费管理
- **账单管理** — 账单列表（只读）
- **缴费管理** — 缴费记录（只读）
- **结算管理** — 费用结算（医保报销+自付）

### 影像管理
- **影像申请** — 申请列表（只读）
- **影像报告** — 报告列表（只读）
- **影像类型** — 类型 CRUD
- **影像设备** — 设备 CRUD（正常/维修中/停用）

### 医保管理
- **医保类型** — 类型名称、报销比例
- **医保目录** — 甲/乙/丙类、自付比例
- **医保报销** — 报销记录（只读）

### 物资设备
- **物资目录** — 物资名称、编码、规格、单价
- **物资供应商** — 供应商 CRUD
- **物资仓库** — 仓库 CRUD
- **物资库存** — 库存查询（只读）
- **设备台账** — 设备 CRUD（正常/维修中/报废）
- **设备维护** — 维护记录（只读）

### 护士站
- **护理任务** — 任务 CRUD
- **护理记录** — 护理记录（只读）

### 其他模块
- **电子病历模板** — 模板 CRUD
- **检验申请 / 检验报告 / 检验项目** — LIS 三合一
- **消毒记录** — 消毒灭菌记录（只读）
- **体检登记 / 体检套餐 / 体检报告** — 体检三合一
- **ICD 编码管理** — 病案编码 CRUD
- **血库管理** — 血型/成分/库存量 CRUD
- **药品审核** — 处方审核记录（只读）
- **临床路径** — 路径名称/标准天数 CRUD
- **手术管理 / 麻醉管理** — 手术麻醉记录（只读）

## 通用 CRUD 组件

`CrudPage.vue` 封装了标准的增删改查逻辑，使用时只需传入配置：

```vue
<template>
  <CrudPage
    :columns="columns"
    :form-fields="formFields"
    :search-fields="searchFields"
    :fetch-api="getData"
    :create-api="createData"
    :update-api="updateData"
    :delete-api="deleteData"
    row-key="id"
  />
</template>
```

### Props

| 属性 | 类型 | 说明 |
|------|------|------|
| `columns` | `Array` | 表格列定义（Ant Design Table 格式） |
| `formFields` | `Array` | 表单字段（支持 input/textarea/number/select/date/switch） |
| `searchFields` | `Array` | 搜索字段（支持 input 和 select） |
| `fetchApi` | `Function` | 列表查询 API（接收 `{ pageNumber, pageSize, ...searchParams }`） |
| `createApi` | `Function` | 新增 API |
| `updateApi` | `Function` | 更新 API（接收 `(id, data)`） |
| `deleteApi` | `Function` | 删除 API（接收 `(id)`） |
| `rowKey` | `String` | 行标识字段，默认 `'id'` |
| `defaultForm` | `Object` | 表单默认值 |

### formFields 字段定义

```js
{
  key: 'name',          // 字段名
  label: '药品名称',    // 标签
  type: 'input',        // 类型：input | textarea | number | select | date | switch
  rules: [{ required: true }],  // 校验规则
  options: [{ value: 'A', label: 'A型' }],  // select 选项
  precision: 2,         // number 小数位
  min: 0,               // number 最小值
  max: 100,             // number 最大值
  placeholder: '请输入', // 占位符
}
```

## 国际化 (i18n)

项目内置中英文双语支持，使用 `vue-i18n` 实现。

### 切换语言

- 页面右上角语言切换器下拉选择
- 语言偏好自动保存到 `localStorage`

### 翻译文件

```
src/i18n/
├── index.js              # vue-i18n 配置（自动检测 localStorage）
└── locales/
    ├── zh-CN.js          # 中文翻译（221 个 key）
    └── en-US.js          # 英文翻译（221 个 key）
```

### 翻译 key 分类

| 分类 | 数量 | 示例 |
|------|------|------|
| `field.*` | 131 | `field.username` → 用户名 / Username |
| `menu.*` | 48 | `menu.dashboard` → 工作台 / Dashboard |
| `dashboard.*` | 21 | `dashboard.todayRevenue` → 今日收入 |
| `message.*` | 9 | `message.createSuccess` → 创建成功 |
| `common.*` | 10 | `common.search` → 搜索 / Search |
| `login.*` | 6 | `login.loginBtn` → 登录 / Sign In |

### 添加新翻译

1. 在 `zh-CN.js` 和 `en-US.js` 中添加 key
2. 在组件中使用 `t('分类.key')` 调用
3. 70 个页面视图已全部接入 `useI18n()`

## API 代理配置

开发环境通过 Vite 代理后端 API：

```js
// vite.config.js
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
}
```

生产环境建议通过 Nginx 反向代理：

```nginx
server {
    listen 80;
    server_name caresy.example.com;

    # 前端静态文件
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理
    location /api/ {
        proxy_pass http://caresy-api:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 认证机制

- 登录成功后，后端返回 JWT Token
- Token 存储在 `localStorage`
- Axios 请求拦截器自动在 `Authorization` 头注入 `Bearer {token}`
- 401 响应自动跳转登录页
- 路由守卫未登录时重定向到 `/login`

## 与后端对接

- 后端 API 文档：启动后端后访问 `http://localhost:8080/swagger`
- 后端仓库：https://gitee.com/java-and-net/caresy-api
- Base URL：`/api`（开发环境通过 Vite proxy 转发到 `localhost:8080`）

## License

MIT