wangyifang
/
hjjc-workbench-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5484562aec'
${ noResults }
hjjc-workbench-web/BUDGET_COLLECTION_README.md

4.9 KiB
Raw Blame History Escape

预算采集系统

系统概述

本系统是一个基于Vue.js + Element UI的预算采集管理系统，主要用于处理各种类型的预算申请，如部门预算、项目预算、设备采购预算等。

功能特性

1. 预算管理

  • 预算申请列表：查看所有预算申请
  • 预算申请创建：创建新的预算申请
  • 预算申请编辑：修改现有预算申请
  • 预算申请删除：删除不需要的预算申请

2. 预算填报

  • 基本信息填写：申请部门、申请人、联系方式等
  • 项目信息：项目名称、类型、描述等
  • 资金信息：申请金额、用途、明细等
  • 附件上传：支持多种文件格式上传
  • 表单验证：完整的表单验证机制

3. 预算详情

  • 信息查看：查看已提交预算申请的详细信息
  • 审批流程：显示当前审批进度
  • 审批记录：查看历史审批记录
  • 附件下载：下载相关附件文件

页面结构

路由配置

/budget                  // 预算管理主页面
├── /budget/collection          // 预算采集页面
├── /budget/collection/fill     // 预算填报页面
└── /budget/collection/detail   // 预算详情页面

文件结构

src/views/budget/collection/
├── index.js            // 预算采集模块组件索引
├── index.vue           // 预算采集列表页面
├── fill.vue            // 预算填报页面
└── detail.vue          // 预算详情页面

src/api/budget/
├── index.js            // 预算模块API统一入口
└── collection.js       // 预算采集相关API接口

使用方法

1. 访问预算采集列表

  • 在系统导航菜单中点击"预算管理" -> "预算采集"
  • 查看所有预算申请

2. 填报预算申请

  • 在预算采集列表中点击"填报"按钮
  • 填写预算申请信息：
    • 基本信息：部门、申请人、联系方式、申请日期
    • 项目信息：项目名称、类型、详细描述
    • 资金信息：申请金额、用途、资金明细
    • 附件上传：上传相关文档
    • 备注信息：其他需要说明的内容

3. 保存和提交

  • 保存草稿：临时保存预算申请信息，可后续继续编辑
  • 提交申请：正式提交预算申请，进入审批流程
  • 重置表单：清空所有已填写的信息

4. 查看详情

  • 在预算采集列表中点击"查看"按钮
  • 查看预算申请的详细信息和审批状态
  • 下载相关附件文件

预算申请字段说明

基本信息

  • 申请部门：选择申请人所属部门
  • 申请人：填写申请人姓名
  • 联系电话：填写联系电话（支持手机号验证）
  • 申请日期：选择申请日期

项目信息

  • 项目名称：填写项目名称
  • 项目类型：选择项目类型（研发项目、市场推广、设备采购等）
  • 项目描述：详细描述项目内容、目标、实施计划等

资金信息

  • 申请金额：填写申请的总金额
  • 资金用途：选择资金用途（设备采购、人员费用、材料费用等）
  • 资金明细：详细列出各项支出项目和金额

附件上传

  • 支持上传PDF、Word、Excel等格式文件
  • 单个文件大小限制为10MB
  • 最多可上传3个文件

审批流程

  1. 部门审核：部门负责人审核
  2. 财务审核：财务部门审核
  3. 领导审批：分管领导审批
  4. 完成：审批完成

状态说明

  • 草稿：预算申请已保存但未提交
  • 审批中：预算申请已提交，正在审批流程中
  • 已通过：审批通过
  • 已拒绝：审批被拒绝

技术栈

  • 前端框架：Vue.js 2.x
  • UI组件库：Element UI
  • 路由管理：Vue Router
  • 状态管理：Vuex
  • HTTP客户端：Axios
  • 样式预处理：SCSS

开发说明

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

API接口

所有预算相关的API接口都定义在 src/api/budget/collection.js 文件中，包括：

  • getBudgetList() - 获取预算申请列表
  • createBudget() - 创建预算申请
  • updateBudget() - 更新预算申请
  • deleteBudget() - 删除预算申请
  • submitBudget() - 提交预算申请
  • saveBudgetDraft() - 保存草稿
  • uploadFile() - 上传文件

注意事项

  1. 预算申请提交前请确保所有必填字段都已填写
  2. 文件上传请确保文件格式和大小符合要求
  3. 提交后的预算申请将进入审批流程，无法直接修改
  4. 草稿状态的预算申请可以随时编辑和修改
  5. 建议定期保存草稿，避免数据丢失

更新日志

v1.0.0 (2024-12-01)

  • 初始版本发布
  • 实现基本的预算采集管理功能
  • 支持预算申请填报和详情查看
  • 完整的表单验证机制
  • 文件上传功能