工单管理模块技术文档

模块概述

工单管理模块是 Husky 运维服务系统的核心业务模块，基于 Vue 3 + Element Plus + Vite 技术栈，提供完整的工单生命周期管理功能。

技术架构

前端技术栈

• Vue 3：使用 Composition API 和 <script setup> 语法
• Element Plus：UI 组件库，提供表单、表格、弹窗等组件
• Vite：构建工具和开发服务器
• Pinia：状态管理（用于全局状态）
• Vue Router：路由管理

文件结构

workOrder/
├── index.vue                 # 工单列表主界面（1590行）
├── process.vue              # 工单处理界面（1073行）
├── components/
│   ├── workorder-form.vue    # 工单表单组件
│   ├── workorder-detail.vue  # 工单详情组件
│   ├── split-assign-dialog.vue # 工单拆分分配对话框
│   └── process-record-timeline.vue # 处理记录时间线
├── api/
│   └── workorder.js         # 工单相关API接口
├── 工单管理用户操作手册.md   # 用户操作手册
└── 工单管理技术文档.md       # 本技术文档

核心功能分析

1. 工单列表管理 (index.vue)

主要功能

• 工单列表展示和搜索
• 多条件筛选（工单编号、名称、类型、状态、客户、项目等）
• 批量操作（删除、派单、导出）
• 工单状态管理
• 角色权限控制

关键技术点

• 搜索功能：使用 filterForm 和 resetQuery 方法
• 表格展示：使用 el-table 组件，支持自定义列
• 权限控制：使用 checkPermi 函数检查权限
• 状态管理：使用 getStatusTag 方法处理状态标签

重要代码结构

// 搜索表单
const filterForm = ref({
  orderNumber: '',
  orderName: '',
  orderType: '',
  status: '',
  customerId: '',
  projectId: '',
  technicianId: '',
  dateRange: []
})

// 表格数据
const orderList = ref([])
const loading = ref(false)
const total = ref(0)

// 权限检查
const hasAddPermission = checkPermi(['business:workorder:add'])
const hasEditPermission = checkPermi(['business:workorder:edit'])

2. 工单处理流程 (process.vue)

主要功能

• 工单状态流转管理
• 工单处理和完成确认
• 子任务管理
• 检查记录管理
• 处理历史跟踪

工单状态流转

// 状态定义
const orderStatuses = [
  { value: 'pending', label: '待派单' },
  { value: 'assigned', label: '已派单' },
  { value: 'processing', label: '处理中' },
  { value: 'completed', label: '已完成' },
  { value: 'confirmed', label: '已确认' },
  { value: 'cancelled', label: '已取消' }
]

// 状态流转逻辑
const handleStatusChange = async (newStatus) => {
  try {
    await updateOrderStatus(orderId.value, newStatus)
    // 处理状态变更后的逻辑
  } catch (error) {
    // 错误处理
  }
}

关键技术点

• 状态管理：使用响应式数据管理工单状态
• 表单验证：使用 el-form 的验证规则
• 文件上传：使用 el-upload 组件
• 实时通信：使用 WebSocket 进行状态同步

3. 工单表单组件 (workorder-form.vue)

主要功能

• 工单创建和编辑
• 设备关联管理
• 时间信息设置
• 表单验证

表单结构

const orderForm = ref({
  orderName: '',
  orderType: '',
  customerId: '',
  projectId: '',
  description: '',
  priority: 'medium',
  plannedStartTime: '',
  plannedEndTime: '',
  equipmentIds: [],
  technicianIds: []
})

技术特点

• 分步表单：使用 el-tabs 实现分步填写
• 动态验证：根据工单类型动态调整验证规则
• 关联选择：使用远程搜索选择客户、项目和设备

4. 工单拆分分配 (split-assign-dialog.vue)

主要功能

• 工单拆分为多个子工单
• 技术人员分配
• 拆分规则管理

关键技术点

• 拖拽排序：支持工单项拖拽排序
• 批量分配：支持批量分配技术人员
• 动态计算：自动计算拆分后的工作量

API 接口分析

主要接口

// 工单相关API
export function getWorkOrderList(params) {
  return request.get('/business/workorder/list', { params })
}

export function getWorkOrderDetail(id) {
  return request.get(`/business/workorder/${id}`)
}

export function createWorkOrder(data) {
  return request.post('/business/workorder', data)
}

export function updateWorkOrder(id, data) {
  return request.put(`/business/workorder/${id}`, data)
}

export function deleteWorkOrder(id) {
  return request.delete(`/business/workorder/${id}`)
}

export function assignWorkOrder(id, technicianIds) {
  return request.post(`/business/workorder/${id}/assign`, { technicianIds })
}

export function updateWorkOrderStatus(id, status) {
  return request.put(`/business/workorder/${id}/status`, { status })
}

接口特点

• RESTful 设计：遵循 RESTful API 设计规范
• 统一响应：使用 AjaxResult 统一响应格式
• 错误处理：统一的错误处理机制
• 权限控制：后端 API 权限验证

数据模型

工单数据模型

interface WorkOrder {
  id: number                    // 工单ID
  orderNumber: string           // 工单编号
  orderName: string             // 工单名称
  orderType: string             // 工单类型
  status: string                // 工单状态
  customerId: number            // 客户ID
  customerName: string          // 客户名称
  projectId: number             // 项目ID
  projectName: string           // 项目名称
  description: string           // 工单描述
  priority: string              // 优先级
  plannedStartTime: string      // 计划开始时间
  plannedEndTime: string        // 计划结束时间
  actualStartTime: string       // 实际开始时间
  actualEndTime: string         // 实际结束时间
  technicianIds: number[]       // 技术人员ID数组
  equipmentIds: number[]        // 设备ID数组
  creator: string               // 创建人
  createTime: string            // 创建时间
  updater: string               // 更新人
  updateTime: string            // 更新时间
}

权限控制

功能权限

• business:workorder:list - 查看工单列表
• business:workorder:query - 查看工单详情
• business:workorder:add - 新增工单
• business:workorder:edit - 修改工单
• business:workorder:remove - 删除工单
• business:workorder:export - 导出工单数据
• business:workorder:assign - 分配工单
• business:workorder:process - 处理工单

数据权限

• 客户数据权限：基于客户ID的数据过滤
• 部门数据权限：基于部门ID的数据过滤
• 个人数据权限：基于用户ID的数据过滤

关键技术实现

1. 搜索功能实现

// 搜索方法
const handleSearch = async () => {
  loading.value = true
  try {
    const params = {
      ...filterForm.value,
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize
    }
    const res = await getWorkOrderList(params)
    orderList.value = res.rows
    total.value = res.total
  } catch (error) {
    ElMessage.error('搜索失败')
  } finally {
    loading.value = false
  }
}

2. 状态流转实现

// 状态变更方法
const handleStatusChange = async (status) => {
  try {
    await ElMessageBox.confirm('确定要更改工单状态吗？', '提示', {
      type: 'warning'
    })
    await updateWorkOrderStatus(orderId.value, status)
    ElMessage.success('状态更新成功')
    // 刷新数据
    await loadOrderDetail()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('状态更新失败')
    }
  }
}

3. 文件上传实现

// 文件上传配置
const uploadConfig = {
  action: '/common/upload',
  headers: {
    Authorization: 'Bearer ' + getToken()
  },
  data: {
    type: 'workorder'
  },
  onSuccess: (response, file) => {
    // 处理上传成功
  },
  onError: (error) => {
    // 处理上传失败
  }
}

4. WebSocket 实现

// WebSocket 连接
const setupWebSocket = () => {
  const ws = new WebSocket(`ws://localhost:8088/ws/workorder/${orderId.value}`)

  ws.onmessage = (event) => {
    const data = JSON.parse(event.data)
    // 处理实时消息
    handleRealtimeMessage(data)
  }

  ws.onclose = () => {
    // 重连逻辑
    setTimeout(setupWebSocket, 5000)
  }
}

性能优化

1. 搜索优化

• 防抖处理：搜索输入使用防抖函数
• 分页加载：大数据量使用分页加载
• 缓存机制：搜索结果缓存

2. 表格优化

• 虚拟滚动：大数据量表格使用虚拟滚动
• 懒加载：图片和详情懒加载
• 列配置：支持用户自定义列显示

3. 状态管理优化

• 响应式数据：合理使用 ref 和 reactive
• 计算属性：使用 computed 优化计算
• 组件缓存：使用 keep-alive 缓存组件

扩展点

1. 功能扩展

• 工单模板：支持工单模板功能
• 自动化处理：支持工单自动化处理
• 智能分配：AI 智能分配工单
• 报表统计：工单统计报表

2. 技术扩展

• 微前端：支持微前端架构
• 移动端：支持移动端 PWA
• 国际化：支持多语言
• 主题定制：支持主题定制

常见问题解决

1. 权限问题

• 检查权限配置：确认用户是否具备相应权限
• 后端权限验证：确认后端权限验证是否正确
• 前端权限控制：确认前端权限检查是否正确

2. 数据同步问题

• WebSocket 连接：检查 WebSocket 连接状态
• 数据刷新：确认数据刷新逻辑是否正确
• 缓存问题：检查缓存策略是否合适

3. 性能问题

• 大数据量：优化大数据量处理逻辑
• 网络请求：减少不必要的网络请求
• 渲染性能：优化 DOM 渲染性能

开发建议

1. 代码规范

• 命名规范：使用统一的命名规范
• 组件设计：遵循组件设计原则
• 错误处理：统一错误处理机制

2. 测试建议

• 单元测试：编写完整的单元测试
• 集成测试：进行集成测试
• 性能测试：进行性能测试

3. 部署建议

• 环境配置：正确配置开发和生产环境
• 构建优化：优化构建配置
• 监控告警：建立完善的监控体系

相关依赖

生产依赖

• vue >= 3.3.0
• element-plus >= 2.3.0
• axios >= 1.4.0
• vue-router >= 4.2.0
• pinia >= 2.1.0

开发依赖

• @vitejs/plugin-vue >= 4.2.0
• typescript >= 5.0.0
• eslint >= 8.0.0
• prettier >= 2.8.0

版本历史

v1.0.0 (2024-XX-XX)

• 基础工单管理功能
• 工单列表和搜索
• 工单处理流程
• 权限控制系统

v1.1.0 (计划中)

• 工单拆分功能
• 批量操作优化
• 移动端适配
• 性能优化

本文档最后更新时间：2024年XX月XX日