# PC端原型说明

## 技术框架
- Vue.js 2.x
- Element UI 2.x（使用在线CDN）
- RuoYi框架布局风格

## 页面列表（共40个页面）

### 1. login.html - 登录页面
- 用户名密码登录
- 记住密码功能
- 忘记密码链接
- 登录验证

### 2. 商机管理模块（6个页面）
- **project-initiation.html** - 立项申请
  - 项目基本信息表单
  - 项目编号自动生成（年份+序号）
  - 服务内容选择
  - 附件上传功能（支持多文件，最大50MB）
  - 保存草稿、提交审核

- **project-list.html** - 项目查询
  - 多条件查询（项目编号、名称、服务内容、状态）
  - 项目列表展示（表格形式）
  - 状态标识（已立项、投标中、已签合同、已启动）
  - 查看详情、编辑项目
  - 导出Excel功能

- **project-detail.html** - 项目详情
  - 项目基本信息展示
  - 项目描述
  - 项目状态查看
  - 返回列表

- **project-approval.html** - 审核管理
  - 审核列表（全部/待审核/已通过/已驳回）
  - 审核类型筛选（立项申请/启动申请/成果提交）
  - 审核操作（查看/审核）

- **approval-detail.html** - 审核详情
  - 申请信息展示
  - 审核流程时间线展示（当前节点、已完成节点、待审核节点）
  - 审核历史记录列表
  - 相关附件列表
  - 审核意见填写
  - 审核操作（通过/驳回）

- **project-bidding.html** - 投标管理
  - 投标项目列表
  - 更新投标状态
  - 上传投标附件

- **bidding-detail.html** - 投标详情
  - 项目信息展示
  - 投标流程时间线
  - 投标信息详情
  - 投标附件列表
  - 状态更新操作

- **project-contract.html** - 合同管理
  - 合同项目列表
  - 更新合同状态
  - 上传合同附件

- **contract-detail.html** - 合同详情
  - 项目信息展示
  - 合同详细信息（编号、金额、期限、付款方式等）
  - 合同流程时间线
  - 合同附件列表
  - 附件预览和下载

### 3. 项目过程管理模块（5个页面）
- **project-start.html** - 启动申请
  - 关联立项项目（下拉选择）
  - 启动编号自动生成
  - 人员分配（可添加多个执业工程师）
  - 工作内容多选（根据服务内容动态显示）
  - 提交审核

- **start-detail.html** - 启动详情
  - 启动信息展示（编号、关联项目、状态等）
  - 人员分配详情列表
  - 启动说明

- **output-submit.html** - 成果提交
  - 项目选择
  - 成果类型选择（初稿/对账/最终成果）
  - 成果金额录入
  - 附件上传
  - 完成情况说明
  - 提交审核

- **output-detail.html** - 成果详情
  - 成果信息展示（项目、类型、金额、状态等）
  - 成果附件列表
  - 下载功能

- **progress-query.html** - 进度查询
  - 多条件查询（项目名称、客户名称、执业者）
  - 项目进度列表展示
  - 项目状态查看
  - 查看启动详情、成果详情
  - 导出Excel功能

### 4. 财务管理模块（5个页面）
- **finance-invoice.html** - 开票管理
  - 开票申请
  - 开票列表查询
  - 开票状态管理
  - 查看开票详情和下载

- **invoice-detail.html** - 开票详情
  - 项目信息展示
  - 开票信息详情（编号、金额、日期、状态等）
  - 回款信息展示
  - 开票附件下载

- **finance-payment.html** - 回款管理
  - 回款列表查询
  - 录入回款金额
  - 回款状态管理
  - 回款详情查看

- **finance-request.html** - 请款管理
  - 请款申请
  - 请款列表（全部/待审核/已审核/已付款）
  - 查看请款详情、请款审核
  - 请款状态管理

- **request-detail.html** - 请款详情
  - 请款信息详情（单号、事由、金额、状态等）
  - 审核信息展示
  - 付款信息展示

### 5. 报表管理模块（9个页面）
- **report-project-detail.html** - 项目明细表
  - 显示项目从立项到回款的所有明细信息
  - 多条件查询
  - 导出Excel

- **report-project-summary.html** - 项目汇总表
  - 按项目状态、负责人汇总项目数量
  - 时间段查询
  - 导出Excel

- **report-output-detail.html** - 产值明细表
  - 根据项目过程信息计算每个项目对应到执业者的完成产值明细
  - 产值计算公式应用
  - 多条件查询
  - 导出Excel

- **report-output-summary.html** - 产值汇总表
  - 按执业者统计指定时间段的产值完成情况
  - 时间段查询
  - 导出Excel

- **report-receivable-detail.html** - 应收账款明细表
  - 按客户单位显示多个项目的应收账款明细
  - 客户查询
  - 导出Excel

- **report-receivable-summary.html** - 应收账款汇总表
  - 按客户单位汇总应收账款
  - 汇总统计
  - 导出Excel

- **report-payable-detail.html** - 应付账款明细表
  - 对应请款申请的明细信息
  - 请款单查询
  - 导出Excel

- **report-payable-summary.html** - 应付账款汇总表
  - 请款金额汇总
  - 时间段汇总
  - 导出Excel

- **report-project.html** - 报表管理汇总入口

### 6. 系统设置模块（7个页面）
- **settings-org.html** - 组织架构管理
  - 组织架构树形展示
  - 部门管理
  - 添加部门功能

- **settings-user.html** - 账号管理
  - 账号列表
  - 账号查询（用户名、部门）
  - 新增账号
  - 编辑账号信息
  - 重置密码
  - 删除账号

- **settings-role.html** - 权限配置
  - 角色权限管理
  - 功能权限配置
  - 权限保存

- **settings-workflow.html** - 流程配置
  - 立项审核流程配置
  - 启动审核流程配置
  - 成果审核流程配置
  - 开票审核流程配置
  - 请款审核流程配置
  - 审核节点配置（增加/删除/编辑）
  - 审核条件配置（金额阈值等）
  - 超时时间配置

- **settings-dict.html** - 字典管理
  - 字典类型管理
  - 字典数据管理（标签、值、排序等）
  - 字典数据启用/禁用

- **settings-param.html** - 参数配置
  - 系统参数列表
  - 参数添加、修改、删除
  - 参数查询

- **settings-log.html** - 操作日志
  - 操作日志列表查询
  - 多条件筛选（操作人员、操作类型、时间范围）
  - 日志详情查看
  - 日志导出

### 7. 个人中心（4个页面）
- **profile.html** - 个人中心
  - 用户信息展示（头像、姓名、部门、职位等）
  - 个人信息编辑入口
  - 修改密码入口

- **profile-edit.html** - 个人信息编辑
  - 姓名、手机号、邮箱编辑
  - 信息保存

- **change-password.html** - 修改密码
  - 原密码验证
  - 新密码设置（含复杂度验证）
  - 确认密码
  - 密码修改

## 设计特点

- **RuoYi框架布局风格**：顶部导航栏 + 左侧菜单 + 标签页 + 内容区
- **Element UI组件库**：使用Element UI组件和样式
- **统一的顶部导航栏**：白色背景，Logo + 面包屑导航 + 用户信息
- **左侧菜单**：白色背景，可折叠的Element UI菜单
- **内容区域**：白色背景，带圆角和边距
- **标签页支持**：支持多标签页切换（可在开发时实现）
- **响应式表格和表单**：使用Element UI组件
- **完整的页面跳转链接**
- **统一的按钮和表单样式**：Element UI风格

## 页面结构

所有页面采用统一的布局结构：
- 顶部：Logo + 导航菜单 + 用户信息
- 左侧：功能菜单（侧边栏）
- 右侧：内容区域（白色背景）

## 页面导航结构

所有功能页面采用统一的布局：
- **顶部导航栏**：Logo + 5大功能模块导航（商机管理、过程管理、财务管理、报表管理、系统设置）+ 用户信息
- **左侧菜单**：当前模块的子功能菜单
- **内容区域**：白色背景，包含页面标题、搜索表单、数据表格/表单等

## 页面跳转关系

- 登录页 → 立项申请页（默认进入商机管理）
- 商机管理 ↔ 过程管理 ↔ 财务管理 ↔ 报表管理 ↔ 系统设置（顶部导航切换）
- 项目查询 → 项目详情
- 审核管理 → 审核详情
- 立项申请 → 项目查询（提交后）
- 启动申请 → 进度查询（提交后）
- 成果提交 → 进度查询（提交后）
- 开票管理 → 回款管理（开票后可录入回款）
- 请款管理 → 请款审核 → 付款状态更新
- 报表管理各子页面互相跳转（左侧菜单）
- 系统设置各子页面互相跳转（左侧菜单）
- 个人中心 → 个人信息编辑、修改密码

## 注意事项

- 本原型使用在线CDN引入Element UI样式和组件
- 使用Vue 2.x版本（与RuoYi框架兼容）
- 部分交互功能为演示效果，实际开发需对接后端API
- 实际开发时需使用Vue 2 + Element UI组件库
- 所有页面已添加Vue实例支持（id="app"），可在开发时扩展为完整的Vue应用
- 所有页面内容区域都有独立的白色背景，与body的灰色背景区分
- 表格、表单、按钮等样式参考Element UI设计规范
- 布局风格参考RuoYi框架的典型结构