审批记录页面字典访问修复记录

日期: 2025-08-01
操作人员: Assistant
修复类型: 前端Vue组件字典数据访问修复

🚨 问题描述

审批记录页面(web/src/views/cw/approvalRecord/index.vue)出现大量Vue警告：

[Vue warn]: Property "cw_approval_status" was accessed during render but is not defined on instance.

错误原因：

使用了错误的 $dict.cw_approval_status 访问方式
项目中没有全局 $dict 属性
需要使用 useDict 手动加载字典数据

🔧 修复方案

1. 模板修复

修复前：

<el-option v-for="dict in $dict.cw_approval_status" :key="dict.value" :label="dict.label" :value="dict.value" />
<dict-tag :options="$dict.cw_approval_status" :value="scope.row.approvalStatus" />

修复后：

<template v-if="cw_approval_status && cw_approval_status.length > 0">
  <el-option v-for="dict in cw_approval_status" :key="dict.value" :label="dict.label" :value="dict.value" />
</template>
<dict-tag :options="cw_approval_status" :value="scope.row.approvalStatus" v-if="cw_approval_status && cw_approval_status.length > 0" />

2. 组件配置修复

修复前：

export default {
  name: 'CwApprovalRecord',
  components: {
    ApplicationSummary
  },
  dicts: ['cw_approval_status'], // ❌ 无效配置
  data() {
    return {
      // ...
    };
  }
}

修复后：

export default {
  name: 'CwApprovalRecord',
  components: {
    ApplicationSummary
  },
  data() {
    return {
      // 字典数据
      cw_approval_status: [],
      // ...
    };
  },
  created() {
    this.loadDictData();
    this.getList();
  },
  methods: {
    /** 加载字典数据 */
    async loadDictData() {
      try {
        const dictData = this.useDict('cw_approval_status');
        // 监听字典数据变化
        this.$watch(() => dictData.cw_approval_status, (newVal) => {
          this.cw_approval_status = newVal || [];
        }, { immediate: true });
      } catch (error) {
        console.error('加载审批状态字典数据失败:', error);
      }
    }
  }
}

📋 修复内容

文件修改

web/src/views/cw/approvalRecord/index.vue
- 移除无效的 dicts: ['cw_approval_status'] 配置
- 添加 cw_approval_status: [] 到data中
- 修改模板中的字典访问方式
- 添加 loadDictData() 方法使用 useDict 加载字典数据
- 添加字典数据变化监听

技术要点

字典数据访问机制：
- 项目使用 useDict composable 函数管理字典数据
- 不支持全局 $dict 属性访问
- 需要手动在组件中初始化字典数据
模板安全访问：
- 使用 v-if 条件渲染避免undefined访问
- 检查数组长度确保数据有效性
响应式数据绑定：
- 使用 $watch 监听字典数据变化
- immediate: true 确保立即执行

✅ 验证结果

修复后期望效果：

✅ 消除所有 cw_approval_status 未定义的Vue警告
✅ 审批状态下拉选择器正常显示选项
✅ 表格中审批状态标签正常显示
✅ 字典数据异步加载正常工作

🔄 相关影响

正面影响

解决了Vue渲染错误
提高了组件稳定性
规范了字典数据访问方式

注意事项

其他组件如果使用类似的 $dict 访问方式也需要类似修复
确保 useDict 工具函数正常工作
字典数据为异步加载，需要考虑加载时机

📝 技术总结

本次修复明确了项目中字典数据的正确使用方式：

不依赖全局 $dict 属性
使用 useDict composable函数
在组件created生命周期中初始化
使用响应式监听处理异步数据

这为后续类似问题的修复提供了标准模式。

3.8 KiB Raw Blame History Unescape Escape