<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>员工角色下拉框测试</title>
|
<style>
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
.result { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
|
.error { background-color: #ffe6e6; }
|
.success { background-color: #e6ffe6; }
|
button { padding: 10px 20px; margin: 5px; }
|
select { padding: 5px; margin: 5px; min-width: 200px; }
|
</style>
|
</head>
|
<body>
|
<h1>员工角色下拉框测试</h1>
|
|
<div>
|
<button onclick="checkAuth()">1. 检查认证状态</button>
|
<button onclick="testRoleAPI()">2. 测试角色API</button>
|
<button onclick="loginAsAdmin()">3. 模拟管理员登录</button>
|
<button onclick="testRoleAPIAfterLogin()">4. 登录后测试角色API</button>
|
</div>
|
|
<div>
|
<h3>角色下拉框模拟：</h3>
|
<select id="roleSelect">
|
<option value="">请选择角色</option>
|
</select>
|
<button onclick="loadRolesIntoSelect()">加载角色到下拉框</button>
|
</div>
|
|
<div id="results"></div>
|
|
<script>
|
function addResult(content, isError = false) {
|
const div = document.createElement('div');
|
div.className = `result ${isError ? 'error' : 'success'}`;
|
div.innerHTML = content;
|
document.getElementById('results').appendChild(div);
|
}
|
|
function checkAuth() {
|
const token = localStorage.getItem('auth_token');
|
const userInfo = localStorage.getItem('user_info');
|
|
addResult(`
|
<strong>认证状态:</strong><br>
|
Token: ${token ? '存在' : '不存在'}<br>
|
User Info: ${userInfo ? '存在' : '不存在'}<br>
|
${token ? `Token内容: ${token.substring(0, 50)}...` : ''}
|
`);
|
}
|
|
async function testRoleAPI() {
|
try {
|
const token = localStorage.getItem('auth_token');
|
const headers = {
|
'Content-Type': 'application/json'
|
};
|
|
if (token) {
|
headers['Authorization'] = `Bearer ${token}`;
|
}
|
|
const response = await fetch('/api/graphql', {
|
method: 'POST',
|
headers,
|
body: JSON.stringify({
|
query: `query GetActiveRoles {
|
activeRoles {
|
id
|
code
|
name
|
description
|
state
|
createTime
|
updateTime
|
}
|
}`
|
})
|
});
|
|
const data = await response.json();
|
|
if (data.errors) {
|
addResult(`<strong>角色API错误:</strong><br>${JSON.stringify(data.errors, null, 2)}`, true);
|
} else {
|
addResult(`<strong>角色API成功:</strong><br>角色数量: ${data.data?.activeRoles?.length || 0}<br>数据: <pre>${JSON.stringify(data.data, null, 2)}</pre>`);
|
}
|
} catch (error) {
|
addResult(`<strong>角色API调用失败:</strong><br>${error.message}`, true);
|
}
|
}
|
|
async function loginAsAdmin() {
|
try {
|
const response = await fetch('/api/graphql', {
|
method: 'POST',
|
headers: {
|
'Content-Type': 'application/json'
|
},
|
body: JSON.stringify({
|
query: `mutation Login($phone: String!, $password: String!) {
|
login(phone: $phone, password: $password) {
|
token
|
user {
|
userId
|
name
|
phone
|
userType
|
}
|
}
|
}`,
|
variables: {
|
phone: "13800000001",
|
password: "123456"
|
}
|
})
|
});
|
|
const data = await response.json();
|
|
if (data.errors) {
|
addResult(`<strong>登录失败:</strong><br>${JSON.stringify(data.errors, null, 2)}`, true);
|
} else if (data.data?.login?.token) {
|
localStorage.setItem('auth_token', data.data.login.token);
|
localStorage.setItem('user_info', JSON.stringify(data.data.login.user));
|
addResult(`<strong>登录成功:</strong><br>Token已保存<br>用户信息: ${JSON.stringify(data.data.login.user, null, 2)}`);
|
} else {
|
addResult(`<strong>登录响应异常:</strong><br>${JSON.stringify(data, null, 2)}`, true);
|
}
|
} catch (error) {
|
addResult(`<strong>登录请求失败:</strong><br>${error.message}`, true);
|
}
|
}
|
|
async function testRoleAPIAfterLogin() {
|
await testRoleAPI();
|
}
|
|
async function loadRolesIntoSelect() {
|
try {
|
const token = localStorage.getItem('auth_token');
|
const headers = {
|
'Content-Type': 'application/json'
|
};
|
|
if (token) {
|
headers['Authorization'] = `Bearer ${token}`;
|
}
|
|
const response = await fetch('/api/graphql', {
|
method: 'POST',
|
headers,
|
body: JSON.stringify({
|
query: `query GetActiveRoles {
|
activeRoles {
|
id
|
code
|
name
|
description
|
state
|
createTime
|
updateTime
|
}
|
}`
|
})
|
});
|
|
const data = await response.json();
|
const select = document.getElementById('roleSelect');
|
|
// 清空现有选项（除了默认选项）
|
select.innerHTML = '<option value="">请选择角色</option>';
|
|
if (data.errors) {
|
addResult(`<strong>加载角色到下拉框失败:</strong><br>${JSON.stringify(data.errors, null, 2)}`, true);
|
} else if (data.data?.activeRoles) {
|
const roles = data.data.activeRoles;
|
roles.forEach(role => {
|
const option = document.createElement('option');
|
option.value = role.id;
|
option.textContent = role.name;
|
select.appendChild(option);
|
});
|
addResult(`<strong>成功加载 ${roles.length} 个角色到下拉框</strong>`);
|
} else {
|
addResult(`<strong>没有获取到角色数据</strong>`, true);
|
}
|
} catch (error) {
|
addResult(`<strong>加载角色到下拉框失败:</strong><br>${error.message}`, true);
|
}
|
}
|
</script>
|
</body>
|
</html>
|
