学习进度条

今日编码时间：4小时
今日代码量：约300行
博客产出：1篇
Vue.js 实现保养计划管理系统的技术实践与知识点总结

项目概述

允许管理员创建、编辑、删除设备保养计划，并能够生成具体的保养工单。本文将详细介绍我在开发过程中使用到的关键技术、学到的知识点以及一些值得分享的实现细节。

主要技术栈

Vue 3 Composition API
Element Plus UI 组件库
Axios 网络请求
Pinia 状态管理
Vue Router 路由管理
日期时间处理

核心技术与知识点详解

1. Vue 3 Composition API

在项目中，我全面使用了 Vue 3 的 Composition API 来组织代码，相比 Options API 有以下优势：

import { ref, onMounted, computed } from 'vue'

// 搜索条件
const deviceType = ref('')
const planStatus = ref('')
const searchKey = ref('')

// 生命周期钩子
onMounted(() => {
    fetchPlans()
})

// 计算属性
const canGenerateOrder = computed(() => {
    return isFaceVerified.value && isTimeReached.value && 
           orderForm.value.deviceId && orderForm.value.resultDesc
})

知识点扩展：

ref 和 reactive 的区别：ref 适用于基本类型和对象，通过 .value 访问；reactive 只适用于对象
组合式函数的封装：可以将相关逻辑提取到独立的函数中，提高代码复用性
生命周期钩子的使用：onMounted、onUpdated、onUnmounted 等

2. Element Plus 组件库

项目中大量使用了 Element Plus 提供的组件：

<el-table :data="plans" border>
    <el-table-column prop="planCode" label="计划编号" />
    <el-table-column prop="planName" label="计划名称" />
</el-table>

<el-pagination 
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :total="total"
    @size-change="onSizeChange"
    @current-change="onCurrentChange"
/>

深入应用：

表格组件：支持分页、排序、固定列、自定义模板等高级功能
表单验证：内置的表单验证规则和自定义验证方法
弹窗和抽屉组件：el-dialog 和 el-drawer 的灵活运用
步骤条组件：用于引导用户完成多步骤操作

3. 网络请求与状态管理

使用 Axios 封装了网络请求，并与 Pinia 状态管理结合：

// 获取保养计划列表
const fetchPlans = async () => {
    try {
        let result = await getMaintenancePlanListService(params)
        plans.value = result.data.items
    } catch (error) {
        ElMessage.error('获取保养计划列表失败')
    }
}

// 删除保养计划
const handleDelete = async (id) => {
    await ElMessageBox.confirm('确定要删除吗？', '提示')
    await deleteMaintenancePlanService(id)
    ElMessage.success('删除成功')
    await fetchPlans()
}

最佳实践：

请求拦截器和响应拦截器的配置
错误处理的统一封装
加载状态的管理
Token 的自动刷新机制

4. 复杂表单处理

保养计划表单和工单生成表单都涉及复杂的数据处理和验证：

// 表单提交处理
const handleSubmit = async () => {
    // 验证必填字段
    if (!planForm.value.planName) {
        ElMessage.warning('请输入计划名称')
        return
    }
    
    // 准备提交数据
    const submitData = {
        ...planForm.value,
        startTime: new Date(planForm.value.startTime).getTime()
    }
    
    // 调用API
    let result = planForm.value.id 
        ? await updateMaintenancePlanService(submitData)
        : await addMaintenancePlanService(submitData)
    
    if (result.code === 1) {
        ElMessage.success('操作成功')
    }
}

高级技巧：

表单数据的深拷贝与响应式处理
动态表单字段的验证
表单重置的注意事项
日期时间处理的最佳实践

5. 自定义组件开发

项目中开发了几个自定义组件来实现特定功能：

<!-- 停留时间检测组件 -->
<StayTimeDetector
    ref="stayTimeDetectorRef"
    :min-stay-time="2"
    @time-reached="handleTimeReached"
/>

<!-- 人脸识别组件 -->
<FaceRecognition
    ref="faceRecognitionRef"
    @recognition-success="handleFaceRecognitionSuccess"
    @recognition-failed="handleFaceRecognitionFailed"
/>

组件设计原则：

单一职责原则
明确的 props 和 emits 定义
良好的封装性和可复用性
清晰的组件通信机制

6. 业务逻辑实现

在保养计划管理中，有几个关键的业务逻辑实现：

计划编号自动生成：

const generatePlanCode = () => {
    const today = `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`
    
    // 查找今天已有的最大编号
    const todayPlans = plans.value.filter(plan => 
        plan.planCode.startsWith(`${PLAN_CODE_PREFIX}${today}`)
    
    // 生成新的序列号
    const newSerialNumber = (maxSerialNumber + 1).toString().padStart(3, '0')
    
    return `${PLAN_CODE_PREFIX}${today}${newSerialNumber}`
}

工单生成的多步骤验证：

const openGenerateOrderDialog = async (plan) => {
    // 重置所有状态
    isTimeReached.value = false
    isFaceVerified.value = false
    verifiedEngineer.value = null
    
    // 获取设备列表
    await getDevices()
    generateOrderDialogVisible.value = true
}

样式与用户体验优化

项目中使用了 SCSS 编写样式，并注重用户体验细节：

.operation-buttons {
    .el-button {
        padding: 6px;
        margin: 0;
        
        &:hover {
            transform: scale(1.1);
            transition: transform 0.2s;
        }
    }
}

:deep(.el-table) {
    .cell {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .el-table__row:hover {
        background-color: #F5F7FA;
    }
}

优化点：

深度选择器的使用 (:deep())
过渡动画的添加
响应式布局的考虑
可访问性改进

遇到的挑战与解决方案

复杂表单验证：
- 问题：工单生成涉及多步骤验证，状态管理复杂
- 解决：使用计算属性管理各步骤状态，提供清晰的用户引导
日期时间处理：
- 问题：前后端日期格式不一致
- 解决：统一使用时间戳传输，前端进行格式化显示
组件通信：
- 问题：人脸识别组件与父组件需要双向通信
- 解决：使用 ref 获取组件实例，通过 emit 传递事件

总结与收获

通过这个项目的开发，我深入掌握了以下技术：

Vue 3 Composition API 的实战应用
Element Plus 组件库的高级用法
复杂业务逻辑的前端实现
自定义组件的设计与开发
前端工程化实践

这个项目不仅巩固了我的 Vue.js 技术栈，也让我对前端工程化和用户体验设计有了更深的理解。特别是对于复杂业务场景下的状态管理和组件设计，积累了宝贵的实战经验。

未来还可以在以下方面进行优化：

引入 TypeScript 增强类型安全
增加单元测试覆盖率
优化性能，特别是大数据量表格的渲染
实现更完善的错误处理和日志记录

posted @ 2025-06-04 20:15 haoyinuo 阅读(11) 评论(0) 收藏举报

刷新页面返回顶部

haoyinuo