fix: 修复对话框在错误时不关闭的问题

- 在UserManagement.vue的handleModalOk中添加错误时关闭对话框
- 在RoleManagement.vue的handleModalOk中添加错误时关闭对话框
- 确保即使API调用失败,对话框也会正确关闭
This commit is contained in:
张翔
2026-04-04 11:35:15 +08:00
parent f321859f9b
commit f7e7cfc78d
3 changed files with 110 additions and 0 deletions
@@ -0,0 +1,108 @@
import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { UserManagementPage } from './pages/UserManagementPage';
test.describe('用户创建诊断测试', () => {
let loginPage: LoginPage;
let userManagementPage: UserManagementPage;
test.beforeEach(async ({ page }) => {
loginPage = new LoginPage(page);
userManagementPage = new UserManagementPage(page);
});
test('诊断用户创建流程', async ({ page }) => {
console.log('=== 开始诊断用户创建流程 ===');
// 登录
await loginPage.goto();
await loginPage.login('admin', 'Test@123');
console.log('1. 登录成功');
// 导航到用户管理页面
await userManagementPage.goto();
await userManagementPage.waitForTableReady();
console.log('2. 导航到用户管理页面成功');
// 点击新增用户按钮
await userManagementPage.clickCreateUser();
console.log('3. 点击新增用户按钮成功');
// 生成唯一用户名
const uuid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
const username = `diag_${uuid}`;
const userData = {
username: username,
password: 'Test@123',
email: `${username}@test.com`,
phone: '13800138000',
nickname: `诊断用户${Date.now()}`
};
console.log('4. 准备创建用户:', userData);
// 填写表单
await userManagementPage.fillUserForm(userData);
console.log('5. 填写表单成功');
// 监听API响应
const [response] = await Promise.all([
page.waitForResponse(resp =>
resp.url().includes('/api/users') &&
resp.request().method() === 'POST',
{ timeout: 15000 }
).catch(err => {
console.log(' ❌ 等待API响应超时:', err.message);
return null;
}),
userManagementPage.submitForm()
]);
console.log('6. 提交表单');
if (response) {
console.log(' ✅ 捕获到API响应');
console.log(' - 状态码:', response.status());
console.log(' - URL:', response.url());
try {
const responseBody = await response.json();
console.log(' - 响应体:', JSON.stringify(responseBody, null, 2));
} catch (err) {
console.log(' - 无法解析响应体:', err.message);
}
} else {
console.log(' ⚠️ 没有捕获到API响应');
}
// 等待成功消息
const success = await userManagementPage.waitForSuccessMessage(15000);
console.log('7. 等待成功消息:', success ? '✅ 成功' : '❌ 失败');
// 检查页面状态
await page.screenshot({ path: `test-results/diagnostic-after-submit-${Date.now()}.png` });
console.log('8. 截图已保存');
// 检查是否有错误消息
const errorMessages = await page.locator('.el-message--error').allTextContents();
if (errorMessages.length > 0) {
console.log(' ⚠️ 发现错误消息:', errorMessages);
}
// 检查对话框是否关闭
const dialogVisible = await page.locator('.el-dialog').isVisible();
console.log('9. 对话框状态:', dialogVisible ? '仍然打开' : '已关闭');
// 搜索新创建的用户
await userManagementPage.search(username);
await page.waitForTimeout(2000);
const found = await userManagementPage.containsText(username);
console.log('10. 搜索新用户:', found ? '✅ 找到' : '❌ 未找到');
console.log('=== 诊断完成 ===');
expect(success).toBeTruthy();
expect(found).toBeTruthy();
});
});
@@ -381,6 +381,7 @@ const handleModalOk = async () => {
modalVisible.value = false modalVisible.value = false
fetchData() fetchData()
} catch (error) { } catch (error) {
modalVisible.value = false
if (error !== 'cancel') { if (error !== 'cancel') {
handleApiError(error) handleApiError(error)
} }
@@ -398,6 +398,7 @@ const handleModalOk = async () => {
modalVisible.value = false modalVisible.value = false
fetchData() fetchData()
} catch (error) { } catch (error) {
modalVisible.value = false
if (error !== 'cancel') { if (error !== 'cancel') {
handleApiError(error) handleApiError(error)
} }