all-project/test/debug-approval-page.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出国审批页面API调试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .error { color: red; }
        .success { color: green; }
        .info { color: blue; }
        pre { background: #f5f5f5; padding: 10px; overflow-x: auto; }
        button { margin: 5px; padding: 8px 16px; }
    </style>
</head>
<body>
    <h1>出国审批页面API调试工具</h1>
    
    <div id="status">正在检查...</div>
    
    <h2>测试结果</h2>
    <div id="results"></div>
    
    <h2>控制台日志</h2>
    <pre id="console-log"></pre>

    <script>
        const baseURL = 'http://localhost:8080';
        const results = document.getElementById('results');
        const consoleLog = document.getElementById('console-log');
        const status = document.getElementById('status');
        
        // 劫持console.log来显示在页面上
        const originalLog = console.log;
        const originalError = console.error;
        
        console.log = function(...args) {
            originalLog.apply(console, args);
            consoleLog.innerHTML += '[LOG] ' + args.join(' ') + '\n';
        };
        
        console.error = function(...args) {
            originalError.apply(console, args);
            consoleLog.innerHTML += '[ERROR] ' + args.join(' ') + '\n';
        };

        async function testAPI() {
            status.innerHTML = '<span class="info">开始测试API...</span>';
            
            // 测试1: 检查基础连接
            try {
                console.log('测试1: 检查后端服务连接...');
                const response = await fetch(`${baseURL}/actuator/health`);
                const data = await response.text();
                addResult('✅ 后端服务连接', 'success', `状态码: ${response.status}, 响应: ${data.substring(0, 100)}`);
            } catch (error) {
                addResult('❌ 后端服务连接失败', 'error', error.message);
                return;
            }
            
            // 测试2: 检查待审批申请API（需要token）
            try {
                console.log('测试2: 检查待审批申请API...');
                const response = await fetch(`${baseURL}/rs/overseas/application/pending/list?pageNum=1&pageSize=10`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                if (response.status === 401) {
                    addResult('⚠️ 待审批申请API需要认证', 'info', `状态码: ${response.status}, 消息: ${data.msg}`);
                } else if (response.ok) {
                    addResult('✅ 待审批申请API正常', 'success', `返回数据: ${JSON.stringify(data, null, 2)}`);
                } else {
                    addResult('❌ 待审批申请API异常', 'error', `状态码: ${response.status}, 响应: ${JSON.stringify(data, null, 2)}`);
                }
            } catch (error) {
                addResult('❌ 待审批申请API请求失败', 'error', error.message);
            }
            
            // 测试3: 检查审批记录API（需要token）
            try {
                console.log('测试3: 检查审批记录API...');
                const response = await fetch(`${baseURL}/rs/overseas/approval/my/list?pageNum=1&pageSize=10`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                if (response.status === 401) {
                    addResult('⚠️ 审批记录API需要认证', 'info', `状态码: ${response.status}, 消息: ${data.msg}`);
                } else if (response.ok) {
                    addResult('✅ 审批记录API正常', 'success', `返回数据: ${JSON.stringify(data, null, 2)}`);
                } else {
                    addResult('❌ 审批记录API异常', 'error', `状态码: ${response.status}, 响应: ${JSON.stringify(data, null, 2)}`);
                }
            } catch (error) {
                addResult('❌ 审批记录API请求失败', 'error', error.message);
            }
            
            status.innerHTML = '<span class="success">测试完成！</span>';
        }
        
        function addResult(title, type, detail) {
            const div = document.createElement('div');
            div.innerHTML = `<h3 class="${type}">${title}</h3><pre>${detail}</pre>`;
            results.appendChild(div);
        }
        
        // 页面加载后自动执行测试
        window.onload = function() {
            testAPI();
        };
    </script>
</body>
</html>