126 lines
3.8 KiB
Markdown
126 lines
3.8 KiB
Markdown
# 财务项目申报表单修复记录
|
|
|
|
**时间**: 2025-01-26 21:30:00
|
|
**操作人**: AI Assistant
|
|
**变更类型**: Bug修复
|
|
|
|
## 问题描述
|
|
|
|
### 🔴 主要问题
|
|
用户反馈点击"新增"按钮没有反应，并且在控制台报错：
|
|
```
|
|
Uncaught TypeError: proxy.resetForm is not a function
|
|
at reset (index.vue:773:9)
|
|
at handleAdd (index.vue:576:3)
|
|
```
|
|
|
|
### 🔍 错误分析
|
|
1. **Vue 3 语法错误**: 使用了错误的 `proxy.resetForm("formRef")` 方法
|
|
2. **组件定义错误**: `<script setup name="...">` 语法不正确
|
|
3. **组件导出问题**: `summary.vue` 组件导出方式错误
|
|
|
|
## 修复内容
|
|
|
|
### 📝 1. 修复表单重置方法
|
|
**文件**: `web/src/views/cw/application/index.vue`
|
|
```javascript
|
|
// 修复前 (错误)
|
|
proxy.resetForm("formRef");
|
|
|
|
// 修复后 (正确)
|
|
formRef.value?.resetFields();
|
|
```
|
|
|
|
### 📝 2. 修复组件定义语法
|
|
**文件**: `web/src/views/cw/application/index.vue`
|
|
```vue
|
|
<!-- 修复前 (错误) -->
|
|
<script setup name="CwProjectApplication" lang="ts">
|
|
|
|
<!-- 修复后 (正确) -->
|
|
<script setup lang="ts">
|
|
defineOptions({
|
|
name: 'CwProjectApplication'
|
|
});
|
|
```
|
|
|
|
### 📝 3. 修复摘要组件导出
|
|
**文件**: `web/src/views/cw/application/summary.vue`
|
|
```vue
|
|
<!-- 修复前 (错误) -->
|
|
<script setup name="ApplicationSummary">
|
|
|
|
<!-- 修复后 (正确) -->
|
|
<script setup>
|
|
defineOptions({
|
|
name: 'ApplicationSummary'
|
|
});
|
|
```
|
|
|
|
### 📝 4. 完善摘要组件内容
|
|
**文件**: `web/src/views/cw/application/summary.vue`
|
|
- 创建了完整的申报摘要组件（之前是空文件）
|
|
- 包含项目基本信息、项目特征、项目内容、资金预算汇总等模块
|
|
- 使用响应式设计和条件渲染
|
|
- 支持金额格式化和数据过滤
|
|
|
|
## 技术要点
|
|
|
|
### 🎯 Vue 3 组合式 API 规范
|
|
1. **表单重置**: 使用 `formRef.value?.resetFields()` 而不是 `proxy.resetForm()`
|
|
2. **组件命名**: 使用 `defineOptions({ name: '...' })` 而不是 `<script setup name="...">`
|
|
3. **可选链操作符**: 使用 `?.` 确保安全调用
|
|
|
|
### 🎯 组件设计原则
|
|
1. **条件渲染**: 只显示有内容的部分
|
|
2. **数据格式化**: 自动格式化金额和日期
|
|
3. **响应式布局**: 适配不同屏幕尺寸
|
|
4. **组件复用**: 摘要组件同时用于表单确认和详情展示
|
|
|
|
## 验证步骤
|
|
|
|
### ✅ 功能验证
|
|
1. **启动服务**: `cd web && npm run dev`
|
|
2. **清除缓存**: 浏览器硬刷新 (`Ctrl + F5`)
|
|
3. **测试新增**: 点击"新增"按钮，确认弹窗正常打开
|
|
4. **测试表单**: 填写表单信息，确认步骤切换正常
|
|
5. **测试摘要**: 在第4步查看申报摘要，确认信息显示正确
|
|
|
|
### ✅ 控制台验证
|
|
- 确认没有 `proxy.resetForm is not a function` 错误
|
|
- 确认没有组件导入相关错误
|
|
|
|
## 影响范围
|
|
|
|
### 📁 涉及文件
|
|
- `web/src/views/cw/application/index.vue` - 主列表页面（修复表单重置和组件定义）
|
|
- `web/src/views/cw/application/summary.vue` - 申报摘要组件（重新创建）
|
|
|
|
### 🔄 功能影响
|
|
- ✅ **修复**: 新增按钮正常工作
|
|
- ✅ **增强**: 摘要组件功能完善
|
|
- ✅ **改进**: 符合 Vue 3 最佳实践
|
|
|
|
## 注意事项
|
|
|
|
### ⚠️ 开发规范提醒
|
|
1. **Vue 3 语法**: 确保使用正确的组合式 API 语法
|
|
2. **表单操作**: 使用 `ref.value` 访问 DOM 元素
|
|
3. **组件命名**: 使用 `defineOptions` 设置组件名称
|
|
4. **错误处理**: 使用可选链操作符避免运行时错误
|
|
|
|
### ⚠️ 后续关注
|
|
- linter 错误可能需要重启 IDE 或清除 TypeScript 缓存
|
|
- 如果问题持续，可能需要检查 tsconfig.json 配置
|
|
|
|
## 结果确认
|
|
|
|
### 🎯 预期效果
|
|
- 点击"新增"按钮正常打开弹窗表单
|
|
- 表单重置功能正常工作
|
|
- 申报摘要信息完整显示
|
|
- 控制台没有相关错误
|
|
|
|
---
|
|
|
|
**备注**: 本次修复主要解决了 Vue 3 组合式 API 的语法问题，确保财务申报模块的表单功能正常运行。 |