'commit'

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 = '&times;';
         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);
     }