someone-oa/pc

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框架的典型结构