# entry-exit-demo

**Repository Path**: albert1996/entry-exit-demo

## Basic Information

- **Project Name**: entry-exit-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-24
- **Last Updated**: 2026-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

入离场审批 H5 前端项目，设计文档如下
技术栈：Vant UI + Vue 3 + Vite

后端对接：暂不实现真实接口，全部使用前端模拟路径
#### 写好注释

## 一、项目整体概述

项目为保长系统统一入离场管理入口，支持员工扫码申请入离场、多角色切换、安全承诺书签署、审批流程管理。主要业务模块：我的申请、入离场审批管理，适配移动端页面交互。

### 角色体系

系统支持六种角色，用户可拥有多个角色，通过页面右上角下拉切换：

|角色类型|权限范围|页面入口|
|---|---|---|
|**普通员工**|入离场申请（仅查看本人申请）|我的申请|
|**保员**|入离场申请（仅查看本人申请）|我的申请|
|**保长**|申请查看（全部）、审批管理|入离场审批管理|
|**Leader**|申请查看（全部）、审批管理|入离场审批管理|
|**审批人**|审批管理（按指派人过滤）|入离场审批管理|
|**部长**|暂不支持|—|

**角色互斥规则**：普通员工与保员互斥，下拉框中只呈现其中一个。普通员工为未在保长系统中的员工，保员为在保长系统中的员工。

**角色优先级**（根路径默认跳转）：
- 审批人且非保员 → 优先展示审批管理页面
- Leader 且保长 → 优先展示保长管理页面
- 保长 → 审批管理页面
- 其他 → 我的申请页面

## 二、页面路由（Hash 模式）

|路由|页面|说明|
|---|---|---|
|`/`|根路径|按角色优先级自动跳转|
|`/my-applications`|我的申请|申请列表 + 新建申请入口|
|`/apply-create`|入离场申请创建|内置 QR 扫描器（相机 + 图片上传），支持 `?office=xxx` 参数|
|`/safety-commit/network`|网络安全承诺书|签署后自动跳转隐私承诺书|
|`/safety-commit/privacy`|网络隐私保护承诺书|签署后返回申请页|
|`/safety-commit`|兼容重定向|自动跳转至网络安全承诺书|
|`/pending-audit`|入离场审批管理|含待审批 + 审批历史两个子页签|
|`/audit-detail/:id`|申请/审批详情|查看模式 + 审批处理模式|
|`/audit-history`|审批历史|独立历史记录页面|

## 三、入场申请流程

### 3.1 二维码扫码入场

系统内置 QR 扫描器，支持两种方式识别代表处二维码：

| 扫码方式 | 说明 |
|---|---|
| **相机扫码**（推荐） | 点击申请页扫码入口，调起后置摄像头，将二维码对准扫描框即可自动识别 |
| **上传图片** | 点击"上传二维码图片"按钮，从相册或文件系统选择包含二维码的图片进行识别 |

#### 扫码入口

- 进入入离场申请页面后，页面顶部显示扫码入口卡片
- 若 URL 已携带 `office` 参数（如 `?office=陕西代表处`），卡片显示"已识别代表处，点击可重新扫描"
- 点击卡片调起全屏扫描器

#### 二维码格式

二维码内容为 URL，格式如下：
```
https://example.com/?office=陕西代表处
```
系统自动解析 URL 中的 `office` 查询参数作为代表处名称。

也支持直接编码代表处名称（不含 URL 前缀），系统会将其作为代表处名称使用。

#### 技术实现

- 使用 [html5-qrcode](https://github.com/mebjas/html5-qrcode) 开源库处理相机流和图像解码
- 扫描组件 `QrScanner.vue` 以全屏 modal 形式展示，不离开申请表单页面
- 依赖浏览器 `getUserMedia` API，iOS Safari 和 Android Chrome 均已支持
- 首次使用需授予相机权限
- 识别成功后自动更新页面标题和代表处信息

#### 用户流程

1. 进入入离场申请页面（若未登录则跳转登录，当前为模拟数据）
2. 若未登录，自动跳转 NetCare 登录页（当前为模拟数据）
3. 登录后根据账号获取 NetCare 角色列表，确定当前有效角色
4. 界面展示：
   - 表单标题：`xxx 代表处入离场申请`
   - 代表处信息从 URL 读取，不作为可编辑字段展示
   - 右上角显示当前角色，支持下拉切换（切换后刷新页面）
   - 可供切换的角色从 NetCare 系统中获取

### 3.2 我的申请列表

- 普通员工/保员：仅展示本人的申请记录
- 保长/Leader/审批人：可查看全部申请记录
- 支持关键字搜索（工号、姓名、单号）、状态筛选、类型筛选
- 卡片标题格式：`{代表处}人员{类型}申请`（如：陕西代表处人员入场申请）
- 下拉刷新、空数据展示、加载动画
- 底部固定"新建申请"按钮

### 3.3 创建申请

- 表单内容：申请类型、申请人、工号、部门、申请原因、是否动网、客户群、产品线、涉及产品线、保长、审批人
- 申请时间系统自动生成
- 保长、审批人、客户群、产品线通过弹窗选择器从模拟数据加载

### 3.4 安全承诺书签署

提交申请前需依次签署两份承诺书（缺一不可）：

1. **网络安全承诺书** — 承诺遵守网络安全法规及公司制度
2. **网络隐私保护承诺书** — 承诺保护个人信息及隐私数据

签署流程：
- 点击未签署的承诺书跳转对应页面
- 签署一份后自动跳转到下一份未签署的
- 两份全部签署后返回申请页面，提交按钮启用
- 提交成功后清除签署状态

### 3.5 提交后逻辑

- 数据写入待审批表，生成 w3 待办
- 流程审批人可通过待办跳转到保长系统（复用 PC 端能力）

## 四、审批流程

### 4.1 入离场审批管理页面

- 标题：入离场审批管理
- 右上角角色切换下拉
- 两个子页签：待审批、审批历史

#### 待审批页签

- 展示申请人、申请时间、卡片标题
- 卡片标题根据代表处和人员状态拼接（如：陕西代表处人员入场申请）
- 默认最新数据排最上面
- 审批人视角：按 approverId 过滤待审批单据
- 保长视角：全部待审批单据
- 点击"去处理"进入审批详情

#### 审批历史页签

- 展示申请人、申请时间、审批时间、审批结果、卡片标题
- 点击"查看"进入只读详情页

### 4.2 审批详情页

**查看模式**（已审批 / 非审批角色）：
- 展示完整申请信息（只读）
- 已审批单据展示审批结果、审批描述、审批人、审批时间、风险信息

**审批处理模式**（待审批 + 审批角色）：

|功能|保长流程|审批人流程|
|---|---|---|
|**风险标记**|是否风险人员（是/否）|是否风险人员（是/否）|
|**风险类别**|信息安全、物理安全、人员安全、网络安全、数据安全、设备安全|新员工、新转岗、新入场、技能弱、规范意识差、异常行为多|
|**审批结果**|同意 / 驳回 / 退回修改|通过 / 拒绝|
|**备注**|驳回时必填|审批描述（始终显示，选填）|

- 风险类别联动：选"是"后展示风险类别多选框
- 所有操作二次确认
- 操作成功后跳转回审批管理页面

## 五、业务状态规范

统一申请单据状态类型：待审批、审批通过、审批驳回

审批结果类型：
- 保长流程：同意、驳回、退回修改
- 审批人流程：通过、拒绝

## 六、模拟接口

|接口|说明|
|---|---|
|`getCurrentUserSync()`|获取当前用户（含多角色信息）|
|`getCurrentRoles()`|获取 NetCare 角色列表|
|`getCurrentEntryExitInfo(staffNo)`|获取员工当前入离场信息|
|`getApplyList(params)`|获取我的申请列表（角色感知过滤）|
|`createApplication(data)`|创建入离场申请|
|`getApplicationById(id)`|获取申请详情|
|`getPendingAuditList()`|获取待审批列表（保长视角）|
|`getAuditHistoryList()`|获取审批历史（保长视角）|
|`submitAudit(id, data)`|提交审批（保长流程）|
|`getApprovalPendingList()`|获取待审批列表（审批人视角）|
|`submitApproval(id, data)`|提交审批（审批人流程）|
|`getApprovalHistoryForApprover()`|获取审批历史（审批人视角）|
|`getGuarantorList()`|获取保长列表|
|`getApproverList()`|获取审批人列表|

## 七、页面交互与体验要求

1. 空数据展示、加载动画、操作提示弹窗
2. 表单重复提交防护，基础操作二次确认
3. 列表支持下拉刷新
4. 风险人员类别多选模式
5. 角色切换后自动刷新页面

## 八、打包与部署

### 8.1 打包

```bash
npm run build     # 等同于 vite build
```

产物在 `dist/` 目录，为纯静态资源：

```
dist/
├── index.html            # 入口 HTML
├── assets/
│   ├── ApplyCreate-xxx.js  # 申请页（含 QR 扫码库）
│   ├── index-xxx.js        # Vant 公共包
│   └── *.css               # 各页面样式
```

预览验证：

```bash
npm run preview    # 本地预览构建产物
```

### 8.2 部署方式

项目使用 **Hash 路由**（`createWebHashHistory`），部署无服务端 fallback 要求，任何静态文件服务器均可部署。

#### Nginx 部署

```nginx
server {
    listen       80;
    server_name  your-domain.com;

    location / {
        alias   /usr/share/nginx/html/entry-exit/;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }

    # 开启 gzip 可显著减小 H5 首屏加载体积
    gzip on;
    gzip_types text/css application/javascript;
    gzip_min_length 256;
}
```

#### OSS + CDN

H5 常见部署方式 — 将 `dist/` 内容上传至阿里云 OSS / 腾讯云 COS，挂载 CDN 加速。

```bash
# 示例：ossutil 同步
ossutil cp -r dist/ oss://your-bucket/entry-exit/ --recursive
```

#### Docker

```dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80
```

### 8.3 注意事项

| 注意点 | 说明 |
|--------|------|
| **Hash 路由** | URL 以 `#/` 分隔，无需服务端路由 fallback，部署最简单 |
| **QR 扫码需 HTTPS** | `getUserMedia` API 要求安全上下文，生产环境必须 HTTPS 或 localhost，否则相机无法启动 |
| **无后端依赖** | 当前所有接口为前端 mock（localStorage），部署无需后端；对接真实 API 时通过 `VITE_API_BASE_URL` 环境变量区分 |
| **环境变量** | 创建 `.env.production` 设置 `VITE_API_BASE_URL=https://api.example.com/api` 等 VITE_ 前缀变量即可 |

### 8.4 CI/CD 参考

```yaml
# GitHub Actions 示例
- name: Build
  run: npm ci && npm run build
- name: Deploy to OSS
  run: ossutil cp -r dist/ oss://your-bucket/ --recursive
```

核心流程：`npm run build` → 把 `dist/` 放到任意静态服务器 → 完成。