293 lines
8.9 KiB
Markdown
293 lines
8.9 KiB
Markdown
# 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框架的典型结构
|