|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>知识点树形展示</title>
|
|
|
|
|
<!-- 添加LayUI CSS和JS -->
|
|
|
|
|
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
|
|
|
|
<script src="/static/layui/layui.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#treeTable {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#treeTable th, #treeTable td {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#treeTable th {
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.level-0 td:first-child {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.level-1 td:first-child {
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.level-2 td:first-child {
|
|
|
|
|
padding-left: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.level-3 td:first-child {
|
|
|
|
|
padding-left: 70px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toggle-icon {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#treeTable th:nth-child(2), #treeTable td:nth-child(2),
|
|
|
|
|
#treeTable th:nth-child(3), #treeTable td:nth-child(3),
|
|
|
|
|
#treeTable th:nth-child(4), #treeTable td:nth-child(4) {
|
|
|
|
|
width: 220px;
|
|
|
|
|
min-width: 220px;
|
|
|
|
|
max-width: 220px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-right: 1px solid #ddd; /* 确保右侧边框闭合 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#treeTable td:nth-child(4) {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
gap: 5px;
|
|
|
|
|
min-height: 36px; /* 确保空单元格也有高度 */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<table id="treeTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>知识点</th>
|
|
|
|
|
<th>先修知识</th>
|
|
|
|
|
<th>相关知识</th>
|
|
|
|
|
<th>维护</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="treeBody"></tbody>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<script src="/static/js/jquery-1.4.4.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var treeData = [];
|
|
|
|
|
|
|
|
|
|
function toggleNode(nodeId) {
|
|
|
|
|
console.log('toggleNode', nodeId);
|
|
|
|
|
var node = findNodeById(treeData, nodeId);
|
|
|
|
|
if (node) {
|
|
|
|
|
node.open = !node.open;
|
|
|
|
|
// 强制重新渲染整个表格
|
|
|
|
|
updateTable();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function findParentTitle(node) {
|
|
|
|
|
if (!node || !node.parent_id) return '';
|
|
|
|
|
const parent = allNodes.find(n => n.id === node.parent_id);
|
|
|
|
|
return parent ? parent.title : '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function findNodeById(nodes, id) {
|
|
|
|
|
for (const node of nodes) {
|
|
|
|
|
if (node.id === id) return node;
|
|
|
|
|
if (node.children) {
|
|
|
|
|
const found = findNodeById(node.children, id);
|
|
|
|
|
if (found) return found;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateTable() {
|
|
|
|
|
var html = '';
|
|
|
|
|
|
|
|
|
|
function buildRows(nodes, level) {
|
|
|
|
|
level = level || 0;
|
|
|
|
|
for (var i = 0; i < nodes.length; i++) {
|
|
|
|
|
var node = nodes[i];
|
|
|
|
|
html += '<tr class="level-' + level + '">';
|
|
|
|
|
html += '<td style="padding-left:' + (level * 20) + 'px">';
|
|
|
|
|
if (node.children && node.children.length > 0) {
|
|
|
|
|
html += '<span class="toggle-icon" onclick="toggleNode(\'' + node.id + '\')">' +
|
|
|
|
|
(node.open ? '▼' : '▶') + '</span>';
|
|
|
|
|
} else {
|
|
|
|
|
html += '<span style="display:inline-block; width:16px;"></span>';
|
|
|
|
|
}
|
|
|
|
|
html += node.title + '</td>';
|
|
|
|
|
|
|
|
|
|
// 修改后的维护按钮显示逻辑
|
|
|
|
|
const isThirdLevel = node.parent_id && allNodes.find(n => n.id === node.parent_id)?.parent_id;
|
|
|
|
|
html += '<td>' + (node.prerequisite && node.prerequisite.length > 0 ?
|
|
|
|
|
node.prerequisite.map(p => p.title).join(', ') : '') + '</td>';
|
|
|
|
|
html += '<td>' + (node.related && node.related.length > 0 ?
|
|
|
|
|
node.related.map(r => r.title).join(', ') : '') + '</td>';
|
|
|
|
|
html += '<td>' + (isThirdLevel ?
|
|
|
|
|
'<button class="layui-btn layui-btn-sm" onclick="prerequisiteUpdate(\'' + node.id + '\')">先修知识</button> ' +
|
|
|
|
|
'<button class="layui-btn layui-btn-sm layui-btn-normal" onclick="relatedUpdate(\'' + node.id + '\')">相关知识</button>' : '') + '</td>';
|
|
|
|
|
html += '</tr>';
|
|
|
|
|
if (node.open && node.children && node.children.length > 0) {
|
|
|
|
|
buildRows(node.children, level + 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
buildRows(treeData);
|
|
|
|
|
$("#treeBody").html(html);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初始化数据
|
|
|
|
|
// Move this declaration outside the AJAX call
|
|
|
|
|
var allNodes = [];
|
|
|
|
|
|
|
|
|
|
// Add flattenTree function definition before the AJAX call
|
|
|
|
|
function flattenTree(nodes) {
|
|
|
|
|
var result = [];
|
|
|
|
|
nodes.forEach(node => {
|
|
|
|
|
result.push(node);
|
|
|
|
|
if (node.children) {
|
|
|
|
|
result = result.concat(flattenTree(node.children));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: "/api/tree-data",
|
|
|
|
|
type: "GET",
|
|
|
|
|
success: function (res) {
|
|
|
|
|
if (res.code === 0) {
|
|
|
|
|
treeData = res.data;
|
|
|
|
|
allNodes = flattenTree(treeData);
|
|
|
|
|
updateTable();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 修改prerequisiteUpdate和relatedUpdate函数
|
|
|
|
|
// 修改prerequisiteUpdate函数使用LayUI
|
|
|
|
|
function prerequisiteUpdate(nodeId) {
|
|
|
|
|
layui.use(['layer', 'form'], function () {
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
var form = layui.form;
|
|
|
|
|
|
|
|
|
|
// 获取当前节点
|
|
|
|
|
const currentNode = findNodeById(treeData, nodeId);
|
|
|
|
|
|
|
|
|
|
// 构建HTML内容
|
|
|
|
|
let html = '<div style="padding: 20px;">';
|
|
|
|
|
html += '<form class="layui-form">';
|
|
|
|
|
|
|
|
|
|
allNodes.forEach(node => {
|
|
|
|
|
if (node.id !== nodeId && !node.isParent) {
|
|
|
|
|
const isSelected = currentNode && currentNode.prerequisite &&
|
|
|
|
|
currentNode.prerequisite.some(p => p.id === node.id);
|
|
|
|
|
|
|
|
|
|
// 获取父节点标题
|
|
|
|
|
const parentTitle = findParentTitle(node);
|
|
|
|
|
const displayTitle = parentTitle ? `【${parentTitle}】${node.title}` : node.title;
|
|
|
|
|
|
|
|
|
|
html += '<div class="layui-form-item">';
|
|
|
|
|
html += '<input type="checkbox" name="node" value="' + node.id + '" title="' + displayTitle + '"' + (isSelected ? ' checked' : '') + '>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
html += '</form>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
// 弹出层
|
|
|
|
|
layer.open({
|
|
|
|
|
type: 1,
|
|
|
|
|
title: '选择先修知识',
|
|
|
|
|
content: html,
|
|
|
|
|
area: ['500px', '400px'],
|
|
|
|
|
btn: ['确定', '取消'],
|
|
|
|
|
yes: function (index, layero) {
|
|
|
|
|
const selectedNodes = [];
|
|
|
|
|
$('input[name="node"]:checked').each(function () {
|
|
|
|
|
const node = findNodeById(treeData, $(this).val());
|
|
|
|
|
if (node) {
|
|
|
|
|
selectedNodes.push({
|
|
|
|
|
id: node.id,
|
|
|
|
|
title: node.title
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 调用后端接口
|
|
|
|
|
fetch('/api/update-knowledge', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
node_id: nodeId,
|
|
|
|
|
knowledge: selectedNodes, // 修改参数名
|
|
|
|
|
update_type: 'prerequisite'
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
if (data.code === 0) {
|
|
|
|
|
layer.msg('保存成功', {icon: 1});
|
|
|
|
|
setTimeout(() => location.reload(), 1000);
|
|
|
|
|
} else {
|
|
|
|
|
layer.msg('保存失败: ' + data.message, {icon: 2});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
layer.msg('保存出错', {icon: 2});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
layer.close(index);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
form.render();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function relatedUpdate(nodeId) {
|
|
|
|
|
layui.use(['layer', 'form'], function () {
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
var form = layui.form;
|
|
|
|
|
|
|
|
|
|
// 获取当前节点
|
|
|
|
|
const currentNode = findNodeById(treeData, nodeId);
|
|
|
|
|
|
|
|
|
|
// 构建HTML内容
|
|
|
|
|
let html = '<div style="padding: 20px;">';
|
|
|
|
|
html += '<form class="layui-form">';
|
|
|
|
|
|
|
|
|
|
allNodes.forEach(node => {
|
|
|
|
|
if (node.id !== nodeId && !node.isParent) {
|
|
|
|
|
const isSelected = currentNode && currentNode.related &&
|
|
|
|
|
currentNode.related.some(p => p.id === node.id);
|
|
|
|
|
|
|
|
|
|
// 获取父节点标题
|
|
|
|
|
const parentTitle = findParentTitle(node);
|
|
|
|
|
const displayTitle = parentTitle ? `【${parentTitle}】${node.title}` : node.title;
|
|
|
|
|
|
|
|
|
|
html += '<div class="layui-form-item">';
|
|
|
|
|
html += '<input type="checkbox" name="node" value="' + node.id + '" title="' + displayTitle + '"' + (isSelected ? ' checked' : '') + '>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
html += '</form>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
// 弹出层
|
|
|
|
|
layer.open({
|
|
|
|
|
type: 1,
|
|
|
|
|
title: '选择相关知识',
|
|
|
|
|
content: html,
|
|
|
|
|
area: ['500px', '400px'],
|
|
|
|
|
btn: ['确定', '取消'],
|
|
|
|
|
yes: function (index, layero) {
|
|
|
|
|
const selectedNodes = [];
|
|
|
|
|
$('input[name="node"]:checked').each(function () {
|
|
|
|
|
const node = findNodeById(treeData, $(this).val());
|
|
|
|
|
if (node) {
|
|
|
|
|
selectedNodes.push({
|
|
|
|
|
id: node.id,
|
|
|
|
|
title: node.title
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 调用后端接口
|
|
|
|
|
fetch('/api/update-knowledge', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
},
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
node_id: nodeId,
|
|
|
|
|
knowledge: selectedNodes, // 修改参数名
|
|
|
|
|
update_type: 'related'
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
if (data.code === 0) {
|
|
|
|
|
layer.msg('保存成功', {icon: 1});
|
|
|
|
|
setTimeout(() => location.reload(), 1000);
|
|
|
|
|
} else {
|
|
|
|
|
layer.msg('保存失败: ' + data.message, {icon: 2});
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
layer.msg('保存出错', {icon: 2});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
layer.close(index);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
form.render();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
