|
|
# 预算采集系统
|
|
|
|
|
|
## 系统概述
|
|
|
|
|
|
本系统是一个基于Vue.js + Element UI的预算采集管理系统，主要用于处理各种类型的预算申请，如部门预算、项目预算、设备采购预算等。
|
|
|
|
|
|
## 功能特性
|
|
|
|
|
|
### 1. 预算管理
|
|
|
- **预算申请列表**：查看所有预算申请
|
|
|
- **预算申请创建**：创建新的预算申请
|
|
|
- **预算申请编辑**：修改现有预算申请
|
|
|
- **预算申请删除**：删除不需要的预算申请
|
|
|
|
|
|
### 2. 预算填报
|
|
|
- **基本信息填写**：申请部门、申请人、联系方式等
|
|
|
- **项目信息**：项目名称、类型、描述等
|
|
|
- **资金信息**：申请金额、用途、明细等
|
|
|
- **附件上传**：支持多种文件格式上传
|
|
|
- **表单验证**：完整的表单验证机制
|
|
|
|
|
|
### 3. 预算详情
|
|
|
- **信息查看**：查看已提交预算申请的详细信息
|
|
|
- **审批流程**：显示当前审批进度
|
|
|
- **审批记录**：查看历史审批记录
|
|
|
- **附件下载**：下载相关附件文件
|
|
|
|
|
|
## 页面结构
|
|
|
|
|
|
### 路由配置
|
|
|
|
|
|
```javascript
|
|
|
/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
|
|
|
|
|
|
## 开发说明
|
|
|
|
|
|
### 安装依赖
|
|
|
```bash
|
|
|
npm install
|
|
|
```
|
|
|
|
|
|
### 启动开发服务器
|
|
|
```bash
|
|
|
npm run dev
|
|
|
```
|
|
|
|
|
|
### 构建生产版本
|
|
|
```bash
|
|
|
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)
|
|
|
- 初始版本发布
|
|
|
- 实现基本的预算采集管理功能
|
|
|
- 支持预算申请填报和详情查看
|
|
|
- 完整的表单验证机制
|
|
|
- 文件上传功能 |
