144 lines
3.8 KiB
Markdown
144 lines
3.8 KiB
Markdown
# 审批记录页面字典访问修复记录
|
||
|
||
**日期**: 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.
|
||
```
|
||
|
||
错误原因：
|
||
1. 使用了错误的 `$dict.cw_approval_status` 访问方式
|
||
2. 项目中没有全局 `$dict` 属性
|
||
3. 需要使用 `useDict` 手动加载字典数据
|
||
|
||
## 🔧 修复方案
|
||
|
||
### 1. 模板修复
|
||
|
||
**修复前**：
|
||
```vue
|
||
<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" />
|
||
```
|
||
|
||
**修复后**：
|
||
```vue
|
||
<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. 组件配置修复
|
||
|
||
**修复前**：
|
||
```javascript
|
||
export default {
|
||
name: 'CwApprovalRecord',
|
||
components: {
|
||
ApplicationSummary
|
||
},
|
||
dicts: ['cw_approval_status'], // ❌ 无效配置
|
||
data() {
|
||
return {
|
||
// ...
|
||
};
|
||
}
|
||
}
|
||
```
|
||
|
||
**修复后**：
|
||
```javascript
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📋 修复内容
|
||
|
||
### 文件修改
|
||
|
||
1. **`web/src/views/cw/approvalRecord/index.vue`**
|
||
- 移除无效的 `dicts: ['cw_approval_status']` 配置
|
||
- 添加 `cw_approval_status: []` 到data中
|
||
- 修改模板中的字典访问方式
|
||
- 添加 `loadDictData()` 方法使用 `useDict` 加载字典数据
|
||
- 添加字典数据变化监听
|
||
|
||
### 技术要点
|
||
|
||
1. **字典数据访问机制**：
|
||
- 项目使用 `useDict` composable 函数管理字典数据
|
||
- 不支持全局 `$dict` 属性访问
|
||
- 需要手动在组件中初始化字典数据
|
||
|
||
2. **模板安全访问**：
|
||
- 使用 `v-if` 条件渲染避免undefined访问
|
||
- 检查数组长度确保数据有效性
|
||
|
||
3. **响应式数据绑定**：
|
||
- 使用 `$watch` 监听字典数据变化
|
||
- `immediate: true` 确保立即执行
|
||
|
||
## ✅ 验证结果
|
||
|
||
修复后期望效果：
|
||
- ✅ 消除所有 `cw_approval_status` 未定义的Vue警告
|
||
- ✅ 审批状态下拉选择器正常显示选项
|
||
- ✅ 表格中审批状态标签正常显示
|
||
- ✅ 字典数据异步加载正常工作
|
||
|
||
## 🔄 相关影响
|
||
|
||
### 正面影响
|
||
- 解决了Vue渲染错误
|
||
- 提高了组件稳定性
|
||
- 规范了字典数据访问方式
|
||
|
||
### 注意事项
|
||
- 其他组件如果使用类似的 `$dict` 访问方式也需要类似修复
|
||
- 确保 `useDict` 工具函数正常工作
|
||
- 字典数据为异步加载，需要考虑加载时机
|
||
|
||
## 📝 技术总结
|
||
|
||
本次修复明确了项目中字典数据的正确使用方式：
|
||
1. 不依赖全局 `$dict` 属性
|
||
2. 使用 `useDict` composable函数
|
||
3. 在组件created生命周期中初始化
|
||
4. 使用响应式监听处理异步数据
|
||
|
||
这为后续类似问题的修复提供了标准模式。 |