# 合同管理

> 模块编码：contract
> 端侧：Web专属（仅医院账号）
> 关联文档：01-模块划分 §4.1 / 02-功能清单-医院 §1 / 03-业务流转逻辑-医院 §1 / 05-接口规范 §9.2
> 强制规范遵循 `07-前端界面开发规范.md`

## 功能概览

| 项目 | 说明 |
|------|------|
| 菜单名称 | 合同管理 |
| 子菜单 | 合同台账、合同录入、合同详情、合同审批、付款管理、变更管理、到期预警、续签管理、合同导出 |
| 功能编号 | HO-CT-01 ~ HO-CT-11 |
| 权限编码前缀 | contract:list:* / contract:approve:* / contract:payment:* / contract:change:* |

> **重要**：合同管理仅医院账号可用，物业公司不可操作此模块。

---

## 页面1：合同台账页

**页面编号**：HO-CT-01-P01
**端侧归属**：Web专属
**页面路径**：/contract/list

### 界面布局

```
┌──────────────────────────────────────────────────────────────────┐
│ [面包屑] 合同管理 > 合同台账                                       │
├──────────────────────────────────────────────────────────────────┤
│ [查询条件区]                                                      │
│ 合同名称[____] 合同类型[▼] 状态[▼] 物业公司[▼]                    │
│ 签约日期[起始]~[结束]                               [查询] [重置]  │
├──────────────────────────────────────────────────────────────────┤
│ [操作栏]  [新增合同] [导出Excel]                                   │
├──────────────────────────────────────────────────────────────────┤
│ [列表区]                                                          │
│ 序号| 合同名称   | 类型   | 物业公司 | 金额   | 状态   | 到期日   │
│ 1  | 2026年保洁 | 保洁   | XX物业   | 120万  | 履约中 | 2027-04  │
│ 2  | 2026年维修 | 维修   | XX物业   | 80万   | 审批中 | —        │
│ 3  | 2025年安保 | 安保   | YY物业   | 60万   | 即将到期| 2026-05 │
├──────────────────────────────────────────────────────────────────┤
│ [分页]  共25条  每页[20▼]  < 1 2 >                                │
└──────────────────────────────────────────────────────────────────┘
```

### 查询条件

| 字段名 | 控件类型 | 必填 | 默认值 | 说明 |
|--------|----------|------|--------|------|
| 合同名称 | 文本输入 | 否 | — | 模糊匹配 |
| 合同类型 | 下拉单选 | 否 | 全部 | 保洁/维修/安保/综合/其他 |
| 状态 | 下拉单选 | 否 | 全部 | 审批中/履约中/变更审批中/即将到期/已终止 |
| 物业公司 | 下拉单选 | 否 | 全部 | 关联物业公司 |
| 签约日期 | 日期范围 | 否 | — | — |

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 序号 | 60px | — | 自增 |
| 2 | 合同名称 | 180px | 是 | 点击跳转详情 |
| 3 | 合同类型 | 80px | 否 | 标签样式 |
| 4 | 物业公司 | 120px | 是 | — |
| 5 | 合同金额 | 100px | 是 | — |
| 6 | 状态 | 90px | 是 | 彩色标签 |
| 7 | 服务期限 | 120px | 否 | 起始~结束 |
| 8 | 到期日 | 100px | 是 | 即将到期=橙色 |
| 9 | 操作 | 140px | — | 查看/审批 |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 新增合同 | contract:list:create | 操作栏 | 始终 | — |
| 导出Excel | contract:list:export | 操作栏 | 始终 | — |
| 查看 | contract:list:view | 行操作 | 始终 | — |
| 审批 | contract:approve:* | 行操作 | 状态=审批中 | — |

### API端点

| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 列表查询 | /api/v1/contracts | GET | 分页查询 |
| 导出 | /api/v1/contracts/export | GET | — |

### 交互流程要求

1. **页面加载流程**：进入页面 → 调用合同列表API（默认分页20条/页）→ 渲染列表，到期日≤30天的行标记橙色
2. **查询/筛选交互流程**：填写筛选条件 → 点击"查询"按钮 → 调用API携带筛选参数 → 刷新列表；点击"重置"清空所有条件并重新加载
3. **表单填写与提交流程**：点击"新增合同" → 跳转合同录入页；点击"导出Excel" → 调用导出API → 下载文件
4. **弹窗/抽屉交互流程**：无弹窗交互，操作均跳转页面
5. **行内操作流程**：点击"查看"跳转合同详情页；点击"审批"（状态=审批中时显示）跳转合同详情页审批区域
6. **异常与错误处理**：API请求失败显示el-message错误提示；列表为空显示el-empty；导出失败提示"导出失败，请重试"
7. **联动/级联交互**：状态筛选与列表数据联动，筛选后分页重置为第1页
8. **权限控制交互表现**：无新增权限时隐藏"新增合同"按钮；无导出权限时隐藏"导出Excel"按钮；无审批权限时行操作不显示"审批"

### 前端硬性约束

- **H1 防重复提交(强制)**: "查询"/"导出Excel"按钮请求期间置 loading+disabled 状态；行操作（查看/审批）点击后禁用该行所有操作按钮直至请求完成；翻页/切换每页条数时 abort 未完成的列表请求
- **H2 超时控制(强制)**: 列表查询(GET)超时 15s；导出(GET，大文件场景)超时 60s；超过阈值提示"请求超时，请稍后重试"
- **H3 操作确认(强制)**: 本页面无危险操作需二次确认
- **H5 权限隔离(建议)**: 当后端返回空列表且 code=200 时展示"暂无数据"；当返回 code=403 时展示"无权限访问该模块"，引导联系管理员
- **H6 批量限制(建议)**: 导出Excel限制单次≤500条，超出时提示"数据量过大，请缩小筛选范围后导出"
- **H8 反馈机制(建议)**: 查询成功静默刷新（无 success 提示）；查询/导出失败显示 error 提示（duration=0）；网络异常时显示重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 合同名称输入 | el-input | placeholder="请输入合同名称"，clearable，maxlength=100 |
| 合同类型选择 | el-select | placeholder="请选择合同类型"，clearable，options: 保洁/维修/安保/综合/其他 |
| 状态选择 | el-select | placeholder="请选择状态"，clearable，multiple=false |
| 物业公司选择 | el-select | placeholder="请选择物业公司"，clearable，remote-method动态加载 |
| 签约日期范围 | el-date-picker | type="daterange"，start-placeholder="开始日期"，end-placeholder="结束日期" |
| 查询按钮 | el-button | type="primary"，icon="Search" |
| 重置按钮 | el-button | type="default"，icon="Refresh" |
| 新增合同按钮 | el-button | type="primary"，icon="Plus" |
| 导出Excel按钮 | el-button | type="success"，icon="Download" |
| 数据列表 | el-table | stripe，border，row-key="id"，@row-click查看详情 |
| 合同类型列 | el-tag | :type根据合同类型配色 |
| 状态列 | el-tag | :type根据状态配色（审批中=warning，履约中=success，即将到期=danger） |
| 分页 | el-pagination | layout="total, sizes, prev, pager, next"，:page-sizes="[10,20,50]" |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 合同名称 | maxlength=100 | 合同名称不能超过100个字符 |
| 签约日期范围 | 结束日期≥开始日期 | 结束日期不能早于开始日期 |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 查询条件区单行排列，列表全字段展示，操作栏水平排列 |
| 1024-1279px（Pad横屏） | 查询条件区双行排列，隐藏"序号""操作"列，操作收入"更多"下拉 |
| 768-1023px（Pad竖屏） | 查询条件区纵向堆叠，仅显示合同名称/类型/状态筛选，列表显示核心字段（合同名称/物业公司/状态/到期日），操作列固定右侧 |

---

## 页面2：合同录入页

**页面编号**：HO-CT-02-P01
**端侧归属**：Web专属
**页面路径**：/contract/create

### 表单字段

| 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 |
|--------|----------|------|--------|----------|----------|
| 合同名称 | 文本输入 | 是 | — | 自填 | 最大100字 |
| 合同类型 | 下拉单选 | 是 | — | 字典管理-合同类型 | — |
| 关联物业公司 | 下拉单选 | 是 | — | 本医院关联的物业公司 | — |
| 关联院区 | 下拉多选 | 是 | — | 本医院院区列表 | — |
| 合同金额 | 数字输入 | 是 | — | 自填 | >0 |
| 服务期限(起) | 日期选择 | 是 | — | 自填 | — |
| 服务期限(止) | 日期选择 | 是 | — | 自填 | 晚于起始日期 |
| 付款方式 | 下拉单选 | 是 | — | 固定选项 | 一次性/分期/按节点 |
| 合同描述 | 多行文本 | 否 | — | 自填 | 最大500字 |
| 合同附件 | 文件上传 | 是 | — | 上传 | ≤10个文件，支持PDF/Word/图片 |

### 付款节点（分期付款时）

| 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 |
|--------|----------|------|--------|----------|----------|
| 节点名称 | 文本输入 | 是 | — | 自填 | — |
| 节点金额 | 数字输入 | 是 | — | 自填 | — |
| 预计付款日期 | 日期选择 | 是 | — | 自填 | — |
| 付款条件 | 多行文本 | 否 | — | 自填 | — |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 保存草稿 | contract:list:create | 底部 | 始终 | — |
| 提交审批 | contract:list:create | 底部 | 始终 | 状态→审批中 |

### 通知触发

| 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 |
|----------|----------|----------|----------|----------|
| 提交审批 | 审批人 | Web提醒 | 合同审批待办 | 03-医院 §1.2 |

### API端点

| 页面操作 | API路径 | 方法 | 说明 |
|----------|---------|------|------|
| 新增 | /api/v1/contracts | POST | — |
| 提交审批 | /api/v1/contracts/{id}/submit | POST | — |

### 交互流程要求

1. **页面加载流程**：进入页面 → 渲染空表单 → 加载下拉选项数据（物业公司、院区、合同类型）
2. **查询/筛选交互流程**：不适用
3. **表单填写与提交流程**：逐项填写表单 → 上传合同附件（支持拖拽上传，上传后显示文件列表含预览/删除）→ 付款方式选"分期"时展开付款节点子表单（动态增删行）→ 点击"保存草稿"保存为草稿状态 / 点击"提交审批"触发校验后提交
4. **弹窗/抽屉交互流程**：合同附件上传使用el-upload，点击已上传文件可弹窗预览（PDF使用iframe预览，图片使用el-image-viewer预览）
5. **行内操作流程**：付款节点子表单支持行内添加/删除节点
6. **异常与错误处理**：必填项未填时表单校验不通过，高亮未填字段并滚动到第一个错误字段；文件上传失败提示"上传失败"；提交审批失败显示el-message错误提示
7. **联动/级联交互**：付款方式选择"分期"→展开付款节点子表单；付款方式选择"一次性"→隐藏付款节点；服务期限(止)自动校验需晚于(起)
8. **权限控制交互表现**：无创建权限时跳转回列表页

### 前端硬性约束

- **H1 防重复提交(强制)**: "保存草稿"/"提交审批"按钮请求期间置 loading+disabled 状态；提交后禁用所有表单交互直至请求完成
- **H2 超时控制(强制)**: 表单提交(POST)超时 30s；文件上传超时 60s；超过阈值提示"请求超时，请稍后重试"
- **H3 操作确认(强制)**: "提交审批"操作前弹出 confirm("确定要提交该合同审批？提交后将进入审批流程，不可自行修改。", type='warning')
- **H4 脏数据检测(强制)**: 页面加载时 deep clone 初始表单数据为 _originData；监听表单变化维护 isDirty 标志；用户未保存尝试离开（路由切换/关闭标签）时通过 beforeRouteLeave 拦截并弹窗确认
- **H7 文件上传(建议)**: 合同附件上传限制单个文件≤10MB、总数≤9个；超出时提示"单文件不超过10MB，附件总数不超过9个"；支持 .pdf/.doc/.docx/.jpg/.png
- **H8 反馈机制(建议)**: 保存草稿成功显示 success 提示（duration=2s）+ 静默刷新页面状态；提交审批成功显示 success 提示（duration=2s）+ 延迟跳转；失败显示 error 提示（duration=0）；网络异常时显示重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 合同名称输入 | el-input | placeholder="请输入合同名称"，maxlength=100，show-word-limit |
| 合同类型选择 | el-select | placeholder="请选择合同类型"，options: 字典管理-合同类型 |
| 关联物业公司 | el-select | placeholder="请选择物业公司"，filterable，remote，:remote-method搜索 |
| 关联院区 | el-select | placeholder="请选择院区"，multiple，collapse-tags，collapse-tags-tooltip |
| 合同金额 | el-input-number | :min=0.01，:precision=2，controls-position="right" |
| 服务期限 | el-date-picker | type="daterange"，start-placeholder="起始日期"，end-placeholder="结束日期" |
| 付款方式 | el-select | placeholder="请选择付款方式"，@change联动付款节点显示/隐藏 |
| 合同描述 | el-input | type="textarea"，:rows=4，maxlength=500，show-word-limit |
| 合同附件 | el-upload | action="/api/v1/files/upload"，:limit=10，accept=".pdf,.doc,.docx,.jpg,.png"，:file-list.sync，:on-preview预览，:on-remove删除 |
| 付款节点表格 | el-table + el-button | 动态增删行，每行：节点名称/金额/日期/条件 |
| 保存草稿按钮 | el-button | type="default"，@click保存草稿 |
| 提交审批按钮 | el-button | type="primary"，@click提交审批，:loading提交中 |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 合同名称 | required，maxlength=100 | 请输入合同名称 / 合同名称不能超过100个字符 |
| 合同类型 | required | 请选择合同类型 |
| 关联物业公司 | required | 请选择关联物业公司 |
| 关联院区 | required | 请选择关联院区 |
| 合同金额 | required，>0 | 请输入合同金额 / 合同金额必须大于0 |
| 服务期限(起) | required | 请选择服务起始日期 |
| 服务期限(止) | required，晚于起始日期 | 请选择服务结束日期 / 结束日期必须晚于起始日期 |
| 付款方式 | required | 请选择付款方式 |
| 合同附件 | required，≤10个文件 | 请上传合同附件 / 附件数量不能超过10个 |
| 节点名称 | required（分期时） | 请输入节点名称 |
| 节点金额 | required（分期时），>0 | 请输入节点金额 / 节点金额必须大于0 |
| 预计付款日期 | required（分期时） | 请选择预计付款日期 |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 表单双列布局，付款节点子表单全宽展示 |
| 1024-1279px（Pad横屏） | 表单单列布局，付款节点子表单全宽展示 |
| 768-1023px（Pad竖屏） | 表单单列布局，合同附件上传区域宽度100%，按钮组纵向堆叠 |

---

## 页面3：合同详情页

**页面编号**：HO-CT-03-P01
**端侧归属**：Web专属
**页面路径**：/contract/:id

### 标签页内容

| 标签页 | 内容 | 说明 |
|--------|------|------|
| 基本信息 | 合同名称、类型、金额、服务期限、物业公司、院区 | — |
| 付款节点 | 付款计划列表、各节点状态 | — |
| 变更记录 | 合同变更历史 | — |
| 关联项目 | 关联的招标项目 | — |
| 附件 | 合同文件、补充文件 | — |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 审批通过 | contract:approve:* | 底部 | 状态=审批中 | — |
| 审批驳回 | contract:approve:* | 底部 | 状态=审批中 | 填写驳回原因 |
| 申请变更 | contract:change:create | 底部 | 状态=履约中 | — |
| 终止合同 | contract:list:update | 底部 | 状态=履约中 | 二次确认 |

### 交互流程要求

1. **页面加载流程**：进入页面 → 根据合同ID调用详情API → 渲染基本信息及各标签页数据，默认展示"基本信息"标签页
2. **查询/筛选交互流程**：不适用（详情页无查询）
3. **表单填写与提交流程**：审批通过/驳回 → 点击按钮 → 弹出审批确认弹窗（通过直接确认，驳回需填写驳回原因）→ 确认后调用API；申请变更 → 跳转变更申请页；终止合同 → 弹出二次确认弹窗
4. **弹窗/抽屉交互流程**：审批驳回弹窗（el-dialog，含驳回原因多行文本输入）；终止合同确认弹窗（el-message-box确认）
5. **行内操作流程**：标签页切换展示不同内容区域；附件标签页点击文件可预览/下载
6. **异常与错误处理**：合同ID无效跳转404；审批/终止操作失败显示el-message错误提示
7. **联动/级联交互**：合同状态=审批中时显示审批按钮；状态=履约中时显示申请变更和终止按钮
8. **权限控制交互表现**：无审批权限隐藏审批按钮；无变更权限隐藏申请变更按钮；无终止权限隐藏终止合同按钮

### 前端硬性约束

- **H1 防重复提交(强制)**: "审批通过"/"审批驳回"/"申请变更"/"终止合同"按钮请求期间置 loading+disabled 状态；操作期间禁用同组其他按钮
- **H2 超时控制(强制)**: 详情加载(GET)超时 15s；操作提交(POST)超时 30s；超过阈值提示"请求超时，请稍后重试"
- **H3 操作确认(强制)**: "终止合同"前弹出 confirm(`确定要终止合同${contractNo}？终止后该合同将无法恢复，相关付款节点将作废。`, type='error')；"审批驳回"前弹出 confirm + 原因输入框（必填）
- **H8 反馈机制(建议)**: 操作成功显示 success 提示（duration=2s）+ 静默刷新详情数据；失败显示 error 提示（duration=0）；网络异常时显示重试按钮
- **弹窗表单（审批驳回）额外约束**:
  - **H1 防重复提交(强制)**: 弹窗内确认按钮 loading+disabled
  - **H2 超时控制(强制)**: 审批提交(POST)超时 30s
  - **H3 操作确认(强制)**: 已由外层 H3 覆盖（驳回需填写原因）
  - **H4 脏数据检测(强制)**: 弹窗打开时记录初始状态，有修改未提交尝试关闭弹窗时拦截确认
  - **H8 反馈机制(建议)**: 成功后关闭弹窗 + 刷新列表 + success(2s)；失败 error(0)

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 标签页 | el-tabs | type="border-card"，:tab-click切换标签页 |
| 基本信息 | el-descriptions | :column=2，border，label-class-name="desc-label" |
| 付款节点列表 | el-table | :data=付款节点数据，stripe，show-summary |
| 变更记录列表 | el-timeline | 展示变更历史时间线 |
| 关联项目 | el-link | :underline=false，type="primary"，点击跳转招标管理 |
| 附件列表 | el-upload | :file-list.sync，disabled，:on-preview预览下载 |
| 审批通过按钮 | el-button | type="success"，icon="Check" |
| 审批驳回按钮 | el-button | type="danger"，icon="Close" |
| 申请变更按钮 | el-button | type="warning"，icon="Edit" |
| 终止合同按钮 | el-button | type="danger"，icon="SwitchButton" |
| 审批驳回弹窗 | el-dialog | title="审批驳回"，width="500px"，含el-input textarea |
| 终止确认弹窗 | el-message-box | type="warning"，confirm-button-text="确认终止" |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 驳回原因 | required（审批驳回时） | 请输入驳回原因 |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 标签页内容区双列描述列表，底部按钮水平居右排列 |
| 1024-1279px（Pad横屏） | 标签页内容区单列描述列表，底部按钮水平居右排列 |
| 768-1023px（Pad竖屏） | 标签页内容区单列描述列表，底部按钮纵向堆叠，附件列表自适应宽度 |

---

## 页面4：付款管理页

**页面编号**：HO-CT-05-P01
**端侧归属**：Web专属
**页面路径**：/contract/payments

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 合同名称 | 150px | 否 | — |
| 2 | 节点名称 | 120px | 否 | — |
| 3 | 节点金额 | 100px | 是 | — |
| 4 | 预计付款日期 | 120px | 是 | — |
| 5 | 实际付款日期 | 120px | 否 | — |
| 6 | 状态 | 80px | 否 | 待付款/已付款/逾期 |
| 7 | 操作 | 100px | — | 确认付款 |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 确认付款 | contract:payment:update | 行操作 | 状态=待付款 | 填写实际付款信息 |

### 通知触发

| 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 |
|----------|----------|----------|----------|----------|
| 付款节点到期提醒 | 医院账号 | Web提醒 | 付款节点即将到期 | 03-医院 §1.2 |

### 交互流程要求

1. **页面加载流程**：进入页面 → 调用付款列表API → 渲染列表，逾期状态行标红
2. **查询/筛选交互流程**：不适用（由合同筛选进入，可按合同名称/状态筛选）
3. **表单填写与提交流程**：点击"确认付款" → 弹出付款确认弹窗（填写实际付款日期、付款金额、付款备注）→ 确认后调用API → 刷新列表
4. **弹窗/抽屉交互流程**：付款确认弹窗（el-dialog，含实际付款日期、付款金额、备注字段）
5. **行内操作流程**：点击"确认付款"弹出付款确认弹窗
6. **异常与错误处理**：付款确认失败显示el-message错误提示；逾期状态高亮显示
7. **联动/级联交互**：付款状态与行操作按钮联动（仅待付款状态显示确认付款按钮）
8. **权限控制交互表现**：无付款确认权限时隐藏"确认付款"按钮

### 前端硬性约束

- **H1 防重复提交(强制)**: "确认付款"行操作按钮点击后置 loading+disabled 状态；弹窗内确认按钮同样 loading+disabled；操作期间禁用该行其他操作
- **H2 超时控制(强制)**: 列表查询(GET)超时 15s；付款确认(POST)超时 30s；超过阈值提示"请求超时，请稍后重试"
- **H3 操作确认(强制)**: "确认付款"前弹出 confirm("确定要确认该付款节点已付款？确认后状态将变更为\"已付款\"。", type='warning')
- **H5 权限隔离(建议)**: 当返回空列表展示"暂无付款记录"；code=403 时展示"无权限访问"
- **H8 反馈机制(建议)**: 付款成功显示 success（duration=2s）+ 静默刷新列表；失败显示 error（duration=0）；网络异常显示重试按钮
- **弹窗表单（付款确认）额外约束**:
  - **H1 防重复提交(强制)**: 弹窗确认按钮 loading+disabled
  - **H2 超时控制(强制)**: 提交(POST)超时 30s
  - **H4 脏数据检测(强制)**: 弹窗内表单修改后尝试关闭时拦截确认
  - **H8 反馈机制(建议)**: 成功关闭弹窗 + 刷新 + success(2s)；失败 error(0)

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 付款列表 | el-table | stripe，border，:default-sort="{prop: 'expectedDate', order: 'ascending'}" |
| 状态列 | el-tag | :type根据状态配色（待付款=warning，已付款=success，逾期=danger） |
| 确认付款按钮 | el-button | type="primary"，size="small"，link样式 |
| 付款确认弹窗 | el-dialog | title="确认付款"，width="500px" |
| 实际付款日期 | el-date-picker | type="date"，placeholder="请选择实际付款日期" |
| 付款金额 | el-input-number | :min=0.01，:precision=2 |
| 付款备注 | el-input | type="textarea"，:rows=3 |
| 确认按钮 | el-button | type="primary"，:loading提交中 |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 实际付款日期 | required | 请选择实际付款日期 |
| 付款金额 | required，>0 | 请输入付款金额 / 付款金额必须大于0 |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 列表全字段展示，操作列右对齐 |
| 1024-1279px（Pad横屏） | 隐藏"节点名称"列，操作列固定右侧 |
| 768-1023px（Pad竖屏） | 仅显示合同名称/节点金额/状态/操作核心字段，付款确认弹窗全屏宽度 |

---

## 页面5：变更管理页

**页面编号**：HO-CT-07-P01
**端侧归属**：Web专属
**页面路径**：/contract/changes

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 合同名称 | 150px | 否 | — |
| 2 | 变更类型 | 80px | 否 | 金额变更/期限变更/条款变更 |
| 3 | 变更原因 | 200px | 否 | — |
| 4 | 申请人 | 80px | 否 | — |
| 5 | 申请时间 | 140px | 是 | 默认倒序 |
| 6 | 审批状态 | 90px | 否 | 待审批/已通过/已驳回 |
| 7 | 操作 | 100px | — | 审批/查看 |

### 操作按钮

| 按钮 | 权限编码 | 位置 | 显示条件 | 说明 |
|------|----------|------|----------|------|
| 审批 | contract:change:approve | 行操作 | 审批状态=待审批 | 通过/驳回 |

### 交互流程要求

1. **页面加载流程**：进入页面 → 调用变更列表API → 渲染列表，默认按申请时间倒序
2. **查询/筛选交互流程**：不适用（由合同详情进入，可按合同名称/审批状态筛选）
3. **表单填写与提交流程**：不适用（变更申请由合同详情页发起）
4. **弹窗/抽屉交互流程**：点击"审批" → 弹出审批弹窗（选择通过/驳回，驳回需填写原因）→ 确认后调用API → 刷新列表；点击"查看" → 跳转变更详情页
5. **行内操作流程**：审批状态=待审批时显示"审批"按钮；始终显示"查看"按钮
6. **异常与错误处理**：审批操作失败显示el-message错误提示；列表为空显示el-empty
7. **联动/级联交互**：审批状态与操作按钮联动（待审批显示审批，其余仅查看）
8. **权限控制交互表现**：无审批权限时行操作仅显示"查看"

### 前端硬性约束

- **H1 防重复提交(强制)**: "审批"行操作按钮点击后置 loading+disabled 状态；弹窗内确认按钮同样 loading+disabled
- **H2 超时控制(强制)**: 列表查询(GET)超时 15s；变更审批(POST)超时 30s；超过阈值提示"请求超时，请稍后重试"
- **H3 操作确认(强制)**: 审批驳回前弹出 confirm + 驳回原因输入框（必填）；审批通过弹出 confirm("确定要通过该变更申请？通过后变更将立即生效。", type='warning')
- **H5 权限隔离(建议)**: 返回空列表展示"暂无变更记录"；code=403 时展示"无权限访问"
- **H8 反馈机制(建议)**: 操作成功 success（duration=2s）+ 静默刷新列表；失败 error（duration=0）；网络异常显示重试按钮
- **弹窗表单（变更审批）额外约束**:
  - **H1 防重复提交(强制)**: 弹窗确认按钮 loading+disabled
  - **H2 超时控制(强制)**: 提交(POST)超时 30s
  - **H3 操作确认(强制)**: 已由外层 H3 覆盖
  - **H4 脏数据检测(强制)**: 弹窗内审批结果/原因修改后尝试关闭时拦截确认
  - **H8 反馈机制(建议)**: 成功关闭弹窗 + 刷新 + success(2s)；失败 error(0)

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 变更列表 | el-table | stripe，border，:default-sort="{prop: 'applyTime', order: 'descending'}" |
| 变更类型列 | el-tag | :type根据类型配色（金额变更=warning，期限变更=info，条款变更=primary） |
| 审批状态列 | el-tag | :type根据状态配色（待审批=warning，已通过=success，已驳回=danger） |
| 审批按钮 | el-button | type="primary"，size="small"，link样式 |
| 查看按钮 | el-button | type="default"，size="small"，link样式 |
| 审批弹窗 | el-dialog | title="变更审批"，width="500px" |
| 审批结果 | el-radio-group | 通过/驳回单选 |
| 驳回原因 | el-input | type="textarea"，:rows=3，v-if="审批结果=驳回" |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| 审批结果 | required | 请选择审批结果 |
| 驳回原因 | required（审批结果=驳回时） | 请输入驳回原因 |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 列表全字段展示，操作列右对齐 |
| 1024-1279px（Pad横屏） | 隐藏"变更原因"列（点击查看详情），操作列固定右侧 |
| 768-1023px（Pad竖屏） | 仅显示合同名称/变更类型/审批状态/操作核心字段，审批弹窗全屏宽度 |

---

## 页面6：到期预警页

**页面编号**：HO-CT-09-P01
**端侧归属**：Web专属
**页面路径**：/contract/expiring

### 列表字段

| 序号 | 字段名 | 列宽 | 支持排序 | 说明 |
|------|--------|------|----------|------|
| 1 | 合同名称 | 150px | 否 | — |
| 2 | 物业公司 | 120px | 否 | — |
| 3 | 到期日期 | 120px | 是 | — |
| 4 | 剩余天数 | 80px | 是 | 红色标记 |
| 5 | 操作 | 120px | — | 续签/终止 |

### 通知触发

| 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 |
|----------|----------|----------|----------|----------|
| 合同到期前30天 | 医院账号 | Web提醒 | 合同即将到期 | 03-医院 §1.2 / 05 §5.2 (CONTRACT_EXPIRING) |
| 合同到期前15天 | 医院账号 | Web提醒 | 合同即将到期 | — |
| 合同到期前7天 | 医院账号 | Web提醒 | 合同即将到期 | — |

### 交互流程要求

1. **页面加载流程**：进入页面 → 调用到期预警列表API → 渲染列表，剩余天数≤7天行标红，≤30天行标橙色
2. **查询/筛选交互流程**：不适用（仅展示即将到期合同，可按物业公司/剩余天数筛选）
3. **表单填写与提交流程**：不适用
4. **弹窗/抽屉交互流程**：点击"续签" → 弹出续签确认弹窗（确认续签后跳转合同录入页，自动填充原合同信息）；点击"终止" → 弹出终止确认弹窗（el-message-box二次确认）
5. **行内操作流程**：点击"续签"或"终止"执行对应操作
6. **异常与错误处理**：续签/终止操作失败显示el-message错误提示；列表为空显示el-empty（提示"暂无即将到期的合同"）
7. **联动/级联交互**：合同状态与操作按钮联动（仅履约中状态显示续签/终止按钮）
8. **权限控制交互表现**：无续签权限隐藏"续签"按钮；无终止权限隐藏"终止"按钮

### 前端硬性约束

- **H1 防重复提交(强制)**: "续签"/"终止"行操作按钮点击后置 loading+disabled 状态；操作期间禁用该行其他操作
- **H2 超时控制(强制)**: 列表查询(GET)超时 15s；操作提交(POST)超时 30s；超过阈值提示"请求超时，请稍后重试"
- **H3 操作确认(强制)**: "终止合同"前弹出 confirm(`确定要终止合同${contractNo}？终止后该合同将作废且无法恢复。`, type='error')；"续签"前弹出 confirm("确定要续签该合同？将跳转至合同录入页并自动填充原合同信息。", type='warning')
- **H5 权限隔离(建议)**: 返回空列表展示"暂无即将到期的合同"；code=403 时展示"无权限访问"
- **H8 反馈机制(建议)**: 操作成功 success（duration=2s）+ 静默刷新列表；失败 error（duration=0）；网络异常显示重试按钮

### 组件规范

| 元素 | 组件 | 配置参数 |
|------|------|----------|
| 预警列表 | el-table | stripe，border，:row-class-name根据剩余天数设置行样式 |
| 剩余天数列 | el-tag | :type根据天数配色（≤7天=danger，≤15天=warning，≤30天=info） |
| 续签按钮 | el-button | type="primary"，size="small"，link样式，icon="RefreshRight" |
| 终止按钮 | el-button | type="danger"，size="small"，link样式，icon="SwitchButton" |
| 续签确认弹窗 | el-message-box | title="确认续签"，type="info"，confirm-button-text="确认续签" |
| 终止确认弹窗 | el-message-box | title="确认终止"，type="warning"，confirm-button-text="确认终止" |

### 校验规则

| 字段 | 规则 | 错误提示 |
|------|------|----------|
| （无表单校验） | — | — |

### 响应式布局

| 断点 | 布局调整 |
|------|----------|
| ≥1280px（桌面端） | 列表全字段展示，操作列右对齐 |
| 1024-1279px（Pad横屏） | 隐藏"物业公司"列，操作列固定右侧 |
| 768-1023px（Pad竖屏） | 仅显示合同名称/到期日期/剩余天数/操作核心字段，操作按钮改为图标按钮 |

---

## 需求追溯

| 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 |
|------------|----------|----------|----------|----------|
| HO-CT-01 | 合同台账 | 02-医院 §1 / 03-医院 §1.2 | — | — |
| HO-CT-02 | 合同录入 | 02-医院 §1 / 03-医院 §1.2 | 录入→提交审批 | — |
| HO-CT-03 | 合同详情 | 02-医院 §1 / 03-医院 §1.2 | — | 招标管理(关联项目) |
| HO-CT-04 | 合同审批 | 02-医院 §1 / 03-医院 §1.2 | 审批→履约中 | 操作日志 |
| HO-CT-05 | 付款管理 | 02-医院 §1 / 03-医院 §1.2 | 节点到期→提醒 | — |
| HO-CT-06 | 付款确认 | 02-医院 §1 / 03-医院 §1.2 | 确认→更新付款状态 | — |
| HO-CT-07 | 变更管理 | 02-医院 §1 / 03-医院 §1.2 | 变更→审批 | — |
| HO-CT-08 | 变更审批 | 02-医院 §1 / 03-医院 §1.2 | 通过→变更生效 | 操作日志 |
| HO-CT-09 | 到期预警 | 02-医院 §1 / 03-医院 §1.2 | 到期→提醒→续签/终止 | 通知机制 |
| HO-CT-10 | 续签管理 | 02-医院 §1 / 03-医院 §1.2 | 续签→审批流程 | 合同审批 |
| HO-CT-11 | 合同导出 | 02-医院 §1 | — | 操作日志 |

## 业务规则

1. **仅医院账号可用**：物业公司不可操作此模块（来源：01 §4.1 / 02-医院 §1）
2. **合同审批流程**：录入→审批中→审批通过(履约中)/审批驳回(需修改重新提交)（来源：03-医院 §1.2）
3. **到期预警**：合同到期前30/15/7天自动提醒（来源：02-医院 HO-CT-09 / 03-医院 §1.2）
4. **付款节点提醒**：付款节点到期前自动提醒医院账号（来源：03-医院 §1.2）
5. **变更需审批**：合同变更申请需审批通过后才生效（来源：03-医院 §1.2）
6. **所有操作记录日志**：合同录入、审批、付款、变更等操作自动记录（来源：06 §4.5）

## 状态流转

```
合同录入 ──▶ 审批中 ──▶ 履约中 ──▶ 到期预警 ──▶ 续签/终止
                 │          │
            审批驳回    变更管理(可选) ──▶ 变更审批中
            (需修改)                       │
                                   变更审批通过/驳回
```

| 当前状态 | 操作 | 目标状态 | 执行角色 | 端侧 |
|----------|------|----------|----------|------|
| — | 合同录入 | 审批中 | 医院账号 | Web |
| 审批中 | 审批通过 | 履约中 | 医院账号 | Web |
| 审批中 | 审批驳回 | — | 医院账号 | Web |
| 履约中 | 付款确认 | 履约中 | 医院账号 | Web |
| 履约中 | 变更申请 | 变更审批中 | 医院账号 | Web |
| 变更审批中 | 变更审批通过 | 履约中 | 医院账号 | Web |
| 变更审批中 | 变更审批驳回 | 履约中 | 医院账号 | Web |
| 履约中 | 续签 | 履约中 | 医院账号 | Web |
| 履约中 | 终止 | 已终止 | 医院账号 | Web |