cykj/hzdyjs
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
68d470391fb4fd799fcba865d6743f1e33283a3e
hzdyjs/web/src/views/xg-xx/collectionBatch/README.md
T

7.3 KiB
Raw Blame History

信息采集批次管理前端应用

📋 概述

信息采集批次管理模块是学工管理系统的重要组成部分，用于管理学生信息采集的批次流程，包括批次创建、状态管理、权限配置、统计分析等功能。

🏗️ 项目结构

web/src/views/xg-xx/collectionBatch/
├── components/                 # 组件目录
│   ├── BatchActions.vue       # 批次操作组件
│   ├── BatchStatusTag.vue     # 批次状态标签组件
│   ├── BatchTypeTag.vue       # 批次类型标签组件
│   ├── ProgressBar.vue        # 进度条组件
│   └── SearchForm.vue         # 搜索表单组件
├── index.vue                  # 批次列表页面
├── form.vue                   # 批次编辑表单页面
├── detail.vue                 # 批次详情页面
├── statistics.vue             # 批次统计页面
├── permission.vue             # 权限配置页面
├── route.ts                   # 路由配置
└── README.md                  # 使用文档

🎯 功能特性

1. 批次列表管理

  • ✅ 批次列表展示（支持分页）
  • ✅ 多条件搜索过滤
  • ✅ 批次状态和类型标签展示
  • ✅ 完成进度可视化
  • ✅ 批次操作（新增、编辑、删除）

2. 批次表单管理

  • ✅ 批次新增和编辑
  • ✅ 分组表单设计（基本信息、时间设置、目标设置等）
  • ✅ 表单验证
  • ✅ 保存和发布功能

3. 批次详情查看

  • ✅ 批次详细信息展示
  • ✅ 卡片式布局
  • ✅ 实时状态更新
  • ✅ 批次操作按钮

4. 统计分析

  • ✅ 批次统计数据展示
  • ✅ 图表可视化（ECharts）
  • ✅ 学院完成情况统计
  • ✅ 多维度数据分析

5. 权限配置

  • ✅ 角色权限管理
  • ✅ 批量权限配置
  • ✅ 权限有效期设置
  • ✅ 权限状态管理

🛠️ 技术栈

  • Vue 3.5.13 - 前端框架
  • TypeScript 5.8.3 - 类型支持
  • Element Plus - UI组件库
  • ECharts - 图表库
  • Vue Router - 路由管理
  • Axios - HTTP请求

📦 组件说明

BatchStatusTag.vue

批次状态标签组件，用于显示批次的当前状态。

<BatchStatusTag :status="batchStatus" :show-icon="true" />

Props:

  • status: 批次状态（draft, published, active, paused, ended, archived）
  • showIcon: 是否显示图标
  • effect: 标签效果（dark, light, plain）

BatchTypeTag.vue

批次类型标签组件，用于显示批次的类型。

<BatchTypeTag :type="batchType" :show-icon="true" />

Props:

  • type: 批次类型（student_info, scholarship, evaluation, other）
  • showIcon: 是否显示图标
  • effect: 标签效果

ProgressBar.vue

进度条组件，用于显示批次的完成进度。

<ProgressBar :current="submittedCount" :total="totalStudents" />

Props:

  • current: 当前完成数量
  • total: 总数量
  • strokeWidth: 进度条宽度
  • showText: 是否显示文本
  • showDetail: 是否显示详细信息

BatchActions.vue

批次操作组件，提供批次相关的操作按钮。

<BatchActions :batch="batchData" @start="handleStart" @pause="handlePause" />

Props:

  • batch: 批次数据对象

Events:

  • start: 开始批次
  • pause: 暂停批次
  • resume: 恢复批次
  • end: 结束批次
  • copy: 复制批次
  • statistics: 统计分析
  • permission: 权限配置
  • export: 导出数据
  • delete: 删除批次

SearchForm.vue

搜索表单组件，用于批次列表的搜索过滤。

<SearchForm @search="handleSearch" @reset="handleReset" />

Events:

  • search: 搜索事件，返回查询参数
  • reset: 重置事件

🚀 使用指南

1. 批次管理流程

  1. 创建批次

    • 点击"新增批次"按钮
    • 填写批次基本信息、时间设置、目标设置等
    • 保存草稿或直接发布

  2. 管理批次

    • 在列表中查看批次状态和进度
    • 使用搜索功能快速定位批次
    • 通过操作按钮管理批次状态

  3. 查看统计

    • 进入统计页面查看批次数据
    • 查看图表分析和学院完成情况
    • 导出统计报告

  4. 配置权限

    • 设置不同角色的权限范围
    • 配置权限有效期
    • 批量设置权限

2. 页面导航

  • /xg-xx/collectionBatch - 批次列表页面
  • /xg-xx/collectionBatch/add - 新增批次页面
  • /xg-xx/collectionBatch/edit?id={id} - 编辑批次页面
  • /xg-xx/collectionBatch/detail?id={id} - 批次详情页面
  • /xg-xx/collectionBatch/statistics - 统计分析页面
  • /xg-xx/collectionBatch/permission - 权限配置页面

3. 权限控制

系统基于角色和权限进行访问控制：

  • xg:collectionBatch:list - 查看批次列表
  • xg:collectionBatch:add - 新增批次
  • xg:collectionBatch:edit - 编辑批次
  • xg:collectionBatch:remove - 删除批次
  • xg:collectionBatch:query - 查看批次详情
  • xg:collectionBatch:export - 导出批次数据
  • xg:collectionBatch:statistics - 查看统计分析
  • xg:collectionBatch:permission - 配置权限

🔧 开发指南

1. 本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

2. 代码规范

  • 使用 TypeScript 进行类型检查
  • 遵循 Vue 3 Composition API 规范
  • 使用 ESLint 进行代码检查
  • 组件命名使用 PascalCase

3. 样式规范

  • 使用 Element Plus 设计系统
  • 遵循后勤管理模块的颜色和样式规范
  • 使用 Tailwind CSS 类名进行样式定制
  • 响应式设计适配不同屏幕尺寸

📝 API 接口

批次管理接口

// 查询批次列表
listCollectionBatch(query: CollectionBatchQuery): Promise<CollectionBatchVO[]>

// 获取批次详情
getCollectionBatch(id: string | number): Promise<CollectionBatchVO>

// 新增批次
addCollectionBatch(data: CollectionBatchForm): Promise<void>

// 更新批次
updateCollectionBatch(data: CollectionBatchForm): Promise<void>

// 删除批次
delCollectionBatch(ids: string | number | Array<string | number>): Promise<void>

// 批次状态操作
startBatch(batchId: string | number): Promise<void>
pauseBatch(batchId: string | number): Promise<void>
resumeBatch(batchId: string | number): Promise<void>
endBatch(batchId: string | number): Promise<void>

// 统计分析
getBatchStatistics(batchId: string | number): Promise<any>
getOverallStatistics(): Promise<any>

🐛 问题排查

常见问题

  1. 页面无法访问

    • 检查路由配置是否正确
    • 确认用户权限是否充足

  2. 数据加载失败

    • 检查 API 接口是否正常
    • 确认后端服务是否启动

  3. 图表显示异常

    • 检查 ECharts 是否正确引入
    • 确认数据格式是否正确

  4. 权限配置无效

    • 检查权限标识是否正确
    • 确认用户角色是否匹配

调试技巧

  1. 使用浏览器开发者工具查看网络请求
  2. 检查 Console 中的错误信息
  3. 使用 Vue DevTools 调试组件状态
  4. 查看后端日志确认接口调用情况

📞 技术支持

如有问题，请联系开发团队或查看相关文档：

  • 项目文档：docs/开发文档/API/
  • 后端接口：backend/ruoyi-modules/ruoyi-xg-xx/
  • 前端代码：web/src/views/xg-xx/collectionBatch/

版本信息：V1.0.0
更新时间：2025-01-17
维护团队：前端开发组

Reference in new issue View Git Blame Copy Permalink