# 合同创建页面实现说明

## 功能概述

合同创建页面支持两种模式：
1. **线上创建合同** - 填写合同信息，系统自动生成合同
2. **线下上传合同** - 上传已签署的合同文件，系统提取信息

## 主要特性

### 线上创建模式
- 完整的合同信息录入表单
- 实时金额大写转换
- 合同条款编辑器
- 合同预览功能
- 自动计算合同结束日期
- 表单验证和数据完整性检查

### 线下上传模式
- 合同文件上传（支持PDF、DOC、DOCX）
- 文件验证和信息提取
- 合同信息确认和补充
- 文件完整性检查
- 上传进度显示

### 共同特性
- 甲方单位和安保公司选择
- 服务日期格式：YYYY-MM-DD
- 合同编号自动生成
- 权限控制（仅安保公司和管理员可访问）
- 响应式设计，支持移动端

## API集成

### 线上创建
```javascript
POST /api/credit/contracts
{
  "title": "合同标题",
  "clientCompanyId": "甲方单位ID",
  "securityCompanyId": "安保公司ID",
  "amount": 100000.00,
  "startDate": "2024-01-01",
  "endDate": "2024-12-31",
  "contractType": "online"
}
```

### 线下上传
```javascript
POST /api/credit/contracts/upload
FormData {
  "title": "合同标题",
  "contractFile": File,
  "clientCompanyId": "甲方单位ID",
  "securityCompanyId": "安保公司ID",
  "amount": 100000.00,
  "startDate": "2024-01-01",
  "endDate": "2024-12-31",
  "contractType": "upload"
}
```

### 文件验证
```javascript
POST /api/credit/contracts/validate-file
FormData {
  "contractFile": File
}
```

## 数据验证

### 必填字段验证
- 合同标题（5-100字符）
- 甲方单位和安保公司
- 合同金额（大于0）
- 服务开始和结束日期
- 合同条款（线上创建模式，最少50字符）
- 合同文件（线下上传模式）

### 业务逻辑验证
- 结束日期必须大于开始日期
- 文件格式和大小限制
- 合同编号唯一性（后端处理）

## 用户体验

### 交互反馈
- 加载状态显示
- 操作成功/失败提示
- 表单验证错误提示
- 文件上传进度

### 响应式设计
- 移动端适配
- 表单布局自适应
- 按钮组合理排列

## 权限控制

根据RuoYi权限体系，该页面仅允许以下角色访问：
- 安保公司角色
- 系统管理员角色

其他角色将被重定向或显示权限不足提示。

## 技术实现

### 前端技术栈
- Vue 3 Composition API
- Element Plus UI组件
- 文件上传组件
- 表单验证

### 关键组件
- `ContractCreate.vue` - 主组件
- `FileUpload` - 文件上传组件
- API服务层 - 统一接口调用

### 状态管理
- 响应式数据绑定
- 表单状态管理
- 文件上传状态跟踪

## 后续扩展

1. 合同模板功能
2. 电子签名集成
3. 合同版本管理
4. 批量操作支持
5. 更多文件格式支持