230 lines
8.3 KiB
HTML
230 lines
8.3 KiB
HTML
<!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;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.debug-section {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 5px;
|
|
background: #f9f9f9;
|
|
}
|
|
.debug-title {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.debug-item {
|
|
margin: 8px 0;
|
|
padding: 8px;
|
|
background: white;
|
|
border-radius: 3px;
|
|
}
|
|
.success { color: #67C23A; }
|
|
.error { color: #F56C6C; }
|
|
.warning { color: #E6A23C; }
|
|
.info { color: #409EFF; }
|
|
|
|
button {
|
|
padding: 8px 16px;
|
|
margin: 5px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
background: #409EFF;
|
|
color: white;
|
|
}
|
|
button:hover {
|
|
background: #66b1ff;
|
|
}
|
|
|
|
.test-button {
|
|
background: #67C23A;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.result {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔍 学生信息新增按钮权限调试</h1>
|
|
|
|
<div class="debug-section">
|
|
<div class="debug-title">📋 调试步骤</div>
|
|
<div class="debug-item">1. 检查浏览器控制台是否有错误</div>
|
|
<div class="debug-item">2. 验证用户权限</div>
|
|
<div class="debug-item">3. 测试按钮点击事件</div>
|
|
<div class="debug-item">4. 检查弹窗组件</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<div class="debug-title">🎯 测试说明</div>
|
|
<div class="debug-item">
|
|
<strong>问题现象：</strong> 点击"新增"按钮没有弹出编辑弹窗
|
|
</div>
|
|
<div class="debug-item">
|
|
<strong>预期行为：</strong> 点击按钮后应该弹出学生信息编辑弹窗
|
|
</div>
|
|
<div class="debug-item">
|
|
<strong>可能原因：</strong>
|
|
<ul>
|
|
<li>权限验证失败 (v-hasPermi="['xg:studentInfo:add']")</li>
|
|
<li>组件导入路径错误</li>
|
|
<li>JavaScript错误阻止了事件执行</li>
|
|
<li>CSS样式问题导致弹窗不可见</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<div class="debug-title">🔧 调试步骤</div>
|
|
|
|
<h3>步骤1：检查浏览器控制台</h3>
|
|
<button onclick="checkConsole()">检查控制台错误</button>
|
|
<div id="console-result" class="result"></div>
|
|
|
|
<h3>步骤2：检查权限</h3>
|
|
<button onclick="checkPermissions()">检查用户权限</button>
|
|
<div id="permission-result" class="result"></div>
|
|
|
|
<h3>步骤3：测试按钮功能</h3>
|
|
<button class="test-button" onclick="testButtonClick()">模拟新增按钮点击</button>
|
|
<div id="button-result" class="result"></div>
|
|
|
|
<h3>步骤4：检查组件状态</h3>
|
|
<button onclick="checkComponent()">检查组件状态</button>
|
|
<div id="component-result" class="result"></div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<div class="debug-title">📝 调试代码</div>
|
|
<div class="debug-item">
|
|
<strong>在浏览器控制台中执行以下代码：</strong>
|
|
<pre style="background: #f0f0f0; padding: 10px; margin: 10px 0; border-radius: 4px;">
|
|
// 1. 检查Vue实例
|
|
console.log('Vue实例:', window.Vue);
|
|
|
|
// 2. 检查当前页面的Vue组件实例
|
|
const app = document.querySelector('#app').__vue__;
|
|
console.log('App实例:', app);
|
|
|
|
// 3. 检查权限
|
|
if (app && app.$store) {
|
|
const permissions = app.$store.getters.permissions;
|
|
console.log('用户权限:', permissions);
|
|
console.log('是否有新增权限:', permissions.includes('xg:studentInfo:add'));
|
|
}
|
|
|
|
// 4. 检查按钮元素
|
|
const addButton = document.querySelector('[v-hasPermi*="xg:studentInfo:add"]');
|
|
console.log('新增按钮元素:', addButton);
|
|
|
|
// 5. 模拟点击事件
|
|
if (addButton) {
|
|
addButton.click();
|
|
console.log('已触发按钮点击事件');
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="debug-section">
|
|
<div class="debug-title">🎯 解决方案</div>
|
|
<div class="debug-item">
|
|
<strong>如果是权限问题：</strong>
|
|
<ul>
|
|
<li>检查数据库中sys_menu表是否有对应的权限配置</li>
|
|
<li>检查用户角色是否分配了相应权限</li>
|
|
<li>重新登录以刷新权限缓存</li>
|
|
</ul>
|
|
</div>
|
|
<div class="debug-item">
|
|
<strong>如果是组件问题：</strong>
|
|
<ul>
|
|
<li>检查StudentEditDialog组件是否正确导入</li>
|
|
<li>检查组件的props定义是否正确</li>
|
|
<li>检查editVisible变量是否正确设置</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function checkConsole() {
|
|
const result = document.getElementById('console-result');
|
|
result.innerHTML = `
|
|
<div class="info">请打开浏览器开发者工具(F12)，查看Console标签页是否有错误信息</div>
|
|
<div>常见错误类型：</div>
|
|
<ul>
|
|
<li>权限验证错误</li>
|
|
<li>组件导入错误</li>
|
|
<li>JavaScript语法错误</li>
|
|
<li>API调用错误</li>
|
|
</ul>
|
|
`;
|
|
}
|
|
|
|
function checkPermissions() {
|
|
const result = document.getElementById('permission-result');
|
|
result.innerHTML = `
|
|
<div class="warning">需要在实际页面中检查权限</div>
|
|
<div>检查方法：</div>
|
|
<ol>
|
|
<li>在学生信息管理页面按F12打开控制台</li>
|
|
<li>执行: console.log(this.$store.getters.permissions)</li>
|
|
<li>查看是否包含 'xg:studentInfo:add' 权限</li>
|
|
</ol>
|
|
`;
|
|
}
|
|
|
|
function testButtonClick() {
|
|
const result = document.getElementById('button-result');
|
|
result.innerHTML = `
|
|
<div class="info">模拟测试 - 正常的handleAdd方法应该执行以下操作：</div>
|
|
<div>1. 设置 selectedStudentId = null</div>
|
|
<div>2. 设置 isEdit = false</div>
|
|
<div>3. 设置 editVisible = true</div>
|
|
<div class="success">如果弹窗没有显示，可能是权限问题或组件问题</div>
|
|
`;
|
|
}
|
|
|
|
function checkComponent() {
|
|
const result = document.getElementById('component-result');
|
|
result.innerHTML = `
|
|
<div class="info">组件检查项目：</div>
|
|
<ul>
|
|
<li>StudentEditDialog组件是否正确导入</li>
|
|
<li>组件在components中是否正确注册</li>
|
|
<li>模板中是否正确使用组件</li>
|
|
<li>editVisible变量是否正确绑定</li>
|
|
</ul>
|
|
<div class="warning">建议在实际页面中检查Vue DevTools</div>
|
|
`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |