diff --git a/dsRag/static/tree.html b/dsRag/static/tree.html index 6465ee2e..e6918e01 100644 --- a/dsRag/static/tree.html +++ b/dsRag/static/tree.html @@ -73,6 +73,10 @@ } } + function findParentTitle(node) { + const parent = allNodes.find(n => n.id === node.parent_id); + return parent ? parent.title : ''; + } function findNodeById(nodes, id) { for (var i = 0; i < nodes.length; i++) { @@ -123,7 +127,7 @@ // 初始化数据 // Move this declaration outside the AJAX call var allNodes = []; - + // Add flattenTree function definition before the AJAX call function flattenTree(nodes) { var result = []; @@ -135,11 +139,11 @@ }); return result; } - + $.ajax({ url: "/api/tree-data", type: "GET", - success: function(res) { + success: function (res) { if (res.code === 0) { treeData = res.data; allNodes = flattenTree(treeData); @@ -147,89 +151,108 @@ } } }); - + // 修改prerequisiteUpdate和relatedUpdate函数 function prerequisiteUpdate(nodeId) { - const node = findNodeById(treeData, nodeId); - if (!node) { - console.error('Node not found:', nodeId); - return; - } - - // 创建模态框容器 + const currentNodeId = nodeId; // Define the variable from function parameter const modal = document.createElement('div'); - modal.style.position = 'fixed'; - modal.style.top = '50%'; - modal.style.left = '50%'; - modal.style.transform = 'translate(-50%, -50%)'; - modal.style.width = '500px'; - modal.style.padding = '20px'; - modal.style.backgroundColor = 'white'; - modal.style.border = '1px solid #ccc'; - modal.style.borderRadius = '5px'; - modal.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)'; - modal.style.zIndex = '1000'; - + modal.style.cssText = ` + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(255, 255, 255, 0.95); // 修改背景为不透明 + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1000; + width: 500px; + max-width: 90%; + modal.style.width = '600px'; + modal.style.padding = '20px'; + modal.style.backgroundColor = 'white'; + modal.style.border = '1px solid #ccc'; + modal.style.borderRadius = '5px'; + modal.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)'; + modal.style.zIndex = '1000'; + `; + // 创建标题和关闭按钮 const header = document.createElement('div'); header.style.display = 'flex'; header.style.justifyContent = 'space-between'; header.style.alignItems = 'center'; header.style.marginBottom = '15px'; - + const title = document.createElement('h3'); title.textContent = '选择先修知识'; title.style.margin = '0'; - + const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.style.background = 'none'; closeBtn.style.border = 'none'; closeBtn.style.fontSize = '20px'; closeBtn.style.cursor = 'pointer'; - closeBtn.onclick = function() { + closeBtn.onclick = function () { document.body.removeChild(modal); }; - + header.appendChild(title); header.appendChild(closeBtn); - + // 创建多选下拉框 - const select = document.createElement('select'); - select.multiple = true; - select.style.width = '100%'; - select.style.height = '200px'; - select.style.margin = '10px 0'; - select.style.padding = '5px'; - - // 添加选项 - allNodes.forEach(n => { - if (n.id !== nodeId) { - const option = document.createElement('option'); - option.value = n.id; - option.text = n.title; - select.appendChild(option); + // 替换select元素为checkbox列表 + const container = document.createElement('div'); + container.style.cssText = ` + max-height: 300px; + overflow-y: auto; + margin-bottom: 10px; + `; + + // 为每个节点创建checkbox + allNodes.forEach(node => { + if (node.id !== currentNodeId) { + const div = document.createElement('div'); + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.value = node.id; + checkbox.id = `node_${node.id}`; + + const label = document.createElement('label'); + label.htmlFor = `node_${node.id}`; + label.textContent = node.isParent ? node.title : `【${findParentTitle(node)}】${node.title}`; + + div.appendChild(checkbox); + div.appendChild(label); + container.appendChild(div); } }); - - // 创建确定按钮 - const button = document.createElement('button'); - button.textContent = '确定'; - button.style.padding = '8px 16px'; - button.style.backgroundColor = '#4CAF50'; - button.style.color = 'white'; - button.style.border = 'none'; - button.style.borderRadius = '4px'; - button.style.cursor = 'pointer'; - button.onclick = function() { - document.body.removeChild(modal); + + // Create confirm button before using it + const confirmBtn = document.createElement('button'); + confirmBtn.textContent = '确定'; + confirmBtn.style.marginTop = '10px'; + confirmBtn.style.padding = '5px 15px'; + confirmBtn.style.backgroundColor = '#4CAF50'; + confirmBtn.style.color = 'white'; + confirmBtn.style.border = 'none'; + confirmBtn.style.borderRadius = '4px'; + confirmBtn.style.cursor = 'pointer'; + + // 在确定按钮中获取选中的节点 + confirmBtn.onclick = function () { + const selectedNodes = Array.from(container.querySelectorAll('input[type="checkbox"]:checked')) + .map(checkbox => checkbox.value); + // 这里添加保存选中节点的逻辑 + modal.remove(); }; - + // 添加到模态框 modal.appendChild(header); - modal.appendChild(select); - modal.appendChild(button); - + modal.appendChild(container); + modal.appendChild(confirmBtn); + // 添加到页面 document.body.appendChild(modal); }