hzdyjs/test/前端附件功能调试脚本.md

前端附件功能调试脚本

📅 创建时间: 2025-06-30 19:20:00
👤 创建人员: wuzilong/Cursor AI 辅助
🎯 功能目的: 帮助调试新增报修单时附件未记录到数据库的问题

🔍 问题诊断流程

步骤 1：打开浏览器开发者工具

1. 在浏览器中打开报修工单页面
2. 按 F12 打开开发者工具
3. 切换到 Console 标签页
4. 清空控制台日志

步骤 2：测试新增报修单流程

2.1 点击"新增报修"按钮

预期日志：

自动填充报修人信息： {姓名: "xxx", 电话: "xxx", 部门: "xxx"}
已清空附件列表和临时文件列表

2.2 选择附件文件

操作：拖拽或点击选择文件 预期日志：

文件变更: {name: "test.txt", status: "ready", raw: File} [...]
已创建测试文件: test.txt
已添加文件到临时列表: test.txt 总文件数: 1

2.3 移除附件文件

操作：点击文件列表中的删除按钮 预期日志：

文件变更: {name: "test.txt", status: "removed", raw: File} [...]
已从临时列表中移除文件: test.txt 剩余文件数: 0

2.4 重新添加附件

操作：再次选择文件 预期日志：

已添加文件到临时列表: test.txt 总文件数: 1

2.5 保存工单

操作：填写必填字段后点击"确定" 预期日志：

新增工单响应: {code: 200, data: {id: "123456"}, msg: "操作成功"}
开始上传附件，文件数量: 1
成功上传文件: test.txt

🐛 常见问题和解决方案

问题 1：tempFileList 为空

现象：保存时显示 开始上传附件，文件数量: 0

原因分析：

• 文件未正确添加到临时列表
• handleFileChange 函数未正确触发

调试方法：

// 在浏览器控制台执行
const component = document.querySelector('[data-v-*]').__vueParentComponent;
console.log('临时文件列表:', component.setupState.tempFileList.value);
console.log('附件列表:', component.setupState.attachmentList.value);

问题 2：文件重复添加

现象：同一个文件在临时列表中出现多次

原因分析：

• 文件去重逻辑未生效
• 文件对象比较条件不正确

解决方案：已优化为使用 name + size + lastModified 三重匹配

问题 3：上传接口 404

现象：上传时报错 404 Not Found

原因分析：

• 上传地址缺少 /dev-api 前缀
• 后端接口路径不正确

检查方法：

// 检查上传配置
console.log('上传地址:', uploadAction.value);
console.log('上传头:', uploadHeaders.value);

期望值：

uploadAction.value === '/dev-api/pm/attachment/upload';
uploadHeaders.value.Authorization.startsWith('Bearer ');

问题 4：Token 认证失败

现象：上传时报错 401 Unauthorized

检查方法：

// 检查Token有效性
import { getToken } from '@/utils/auth';
console.log('当前Token:', getToken());

📋 完整的调试命令

将以下代码粘贴到浏览器控制台，获取当前状态信息：

// 获取Vue组件实例
const app = document.querySelector('#app').__vue__;
const router = app.$router;
const route = app.$route;

console.group('🔍 附件功能调试信息');

// 1. 页面基本信息
console.log('📄 当前页面:', route.path);
console.log('🔗 路由名称:', route.name);

// 2. 组件状态检查
try {
    const component = app.$children[0];
    const state = component.$data || component.setupState;

    console.log('📝 表单数据:', {
        id: state.form?.value?.id || state.form?.id,
        title: state.form?.value?.title || state.form?.title,
    });

    console.log('📎 附件状态:', {
        attachmentList: state.attachmentList?.value?.length || state.attachmentList?.length || 0,
        tempFileList: state.tempFileList?.value?.length || state.tempFileList?.length || 0,
        uploadAction: state.uploadAction?.value || state.uploadAction,
        uploadHeaders: state.uploadHeaders?.value || state.uploadHeaders,
    });

    console.log('🔐 认证信息:', {
        hasToken: !!(
            state.uploadHeaders?.value?.Authorization || state.uploadHeaders?.Authorization
        ),
        clientId: state.uploadHeaders?.value?.clientid || state.uploadHeaders?.clientid,
    });
} catch (error) {
    console.error('❌ 无法获取组件状态:', error.message);
}

// 3. 全局状态检查
console.log(
    '🌐 全局Token:',
    localStorage.getItem('Admin-Token') || sessionStorage.getItem('Admin-Token'),
);

console.groupEnd();

// 4. 测试函数
window.debugAttachment = {
    // 测试文件上传
    testFileUpload: (file) => {
        console.log('🧪 测试文件上传:', file);
        // 模拟文件变更事件
        const component = app.$children[0];
        if (component.handleFileChange) {
            component.handleFileChange(
                {
                    name: file.name,
                    status: 'ready',
                    raw: file,
                },
                [],
            );
        }
    },

    // 检查临时文件列表
    checkTempFiles: () => {
        const component = app.$children[0];
        const tempFiles = component.tempFileList?.value || component.tempFileList || [];
        console.log('📋 临时文件列表:', tempFiles);
        return tempFiles;
    },

    // 清空临时文件
    clearTempFiles: () => {
        const component = app.$children[0];
        if (component.tempFileList?.value) {
            component.tempFileList.value = [];
        } else if (component.tempFileList) {
            component.tempFileList = [];
        }
        console.log('🗑️ 已清空临时文件列表');
    },
};

console.log('✅ 调试工具已准备就绪，可使用以下命令:');
console.log('   - debugAttachment.checkTempFiles() // 检查临时文件');
console.log('   - debugAttachment.clearTempFiles() // 清空临时文件');

🚀 后续测试步骤

1. 运行后端测试脚本

cd test
npm install
node 附件上传功能测试.js

2. 检查数据库记录

-- 查询最近的附件记录
SELECT * FROM pm_repair_attachment
ORDER BY create_time DESC
LIMIT 10;

-- 查询特定工单的附件
SELECT * FROM pm_repair_attachment
WHERE order_id = '工单ID';

3. 查看后端日志

# 查看Spring Boot应用日志
tail -f backend/ruoyi-admin/logs/sys-info.log

# 查看错误日志
tail -f backend/ruoyi-admin/logs/sys-error.log

📞 技术支持

如果按照以上步骤仍然无法解决问题，请提供以下信息：

1. 浏览器控制台完整日志
2. 后端日志相关错误信息
3. 数据库查询结果
4. 具体的操作步骤和错误现象

这将帮助进一步定位和解决问题。