Переглянути джерело

修改树形节点,点击事件效果

吴朋磊 1 місяць тому
батько
коміт
c9e5f4b098
1 змінених файлів з 42 додано та 20 видалено
  1. 42 20
      src/views/targetImprove/components/CommonTree.vue

+ 42 - 20
src/views/targetImprove/components/CommonTree.vue

@@ -26,6 +26,7 @@
       :expand-on-click-node="expandOnClickNode"
       :check-strictly="true"
       @check="handleNodeCheck"
+      @node-click="handleNodeClick"
     >
       <!--
         自定义树节点内容插槽(slot-scope)
@@ -178,7 +179,7 @@ export default {
       default: false,
     },
   },
-  inject: ['openAiRobot'],//注入Ai机器人组件调用方法
+  inject: ["openAiRobot"], //注入Ai机器人组件调用方法
   // ==================== 数据状态 ====================
   data() {
     return {
@@ -188,12 +189,10 @@ export default {
       _isUpdating: false,
     };
   },
-  computed:{
-    targetCommon()
-    {
+  computed: {
+    targetCommon() {
       return this.$store.state.target.targetCommon;
-    }
-
+    },
   },
   // ==================== 生命周期 ====================
   mounted() {
@@ -205,8 +204,6 @@ export default {
     }
   },
 
-
-
   beforeDestroy() {
     clearTimeout(this._defaultSelectTimer);
   },
@@ -237,6 +234,30 @@ export default {
 
   // ==================== 方法 ====================
   methods: {
+    /**
+     * 点击节点名称时切换勾选状态
+     * 如果节点已被置灰(disabled),则不执行任何操作
+     * @param {Object} data - 当前点击的节点数据
+     */
+    handleNodeClick(data) {
+      if (!this.showCheckbox) return;
+      const treeRef = this.$refs.commonTree;
+      if (!treeRef) return;
+
+      const node = treeRef.getNode(data[this.nodeKey]);
+      if (!node || node.disabled) return;
+
+      // 切换勾选状态:已勾选 → 取消,未勾选 → 勾选
+      const newChecked = !node.checked;
+      treeRef.setChecked(data[this.nodeKey], newChecked);
+      // 手动触发 handleNodeCheck(check-strictly 模式下 setChecked 不触发 @check)
+      const checkedInfo = {
+        checkedKeys: newChecked
+          ? [...this.manuallyCheckedKeys, data[this.nodeKey]]
+          : this.manuallyCheckedKeys.filter((k) => k !== data[this.nodeKey]),
+      };
+      this.handleNodeCheck(data, checkedInfo);
+    },
     /**
      * 树节点勾选事件(自定义级联逻辑)
      *
@@ -296,19 +317,19 @@ export default {
       this.clearAllCheckAndDisabled();
 
       // 2. 遍历每个手动勾选的节点,设置其祖先和后代的勾选+置灰
-      this.manuallyCheckedKeys.forEach(key => {
+      this.manuallyCheckedKeys.forEach((key) => {
         const node = treeRef.getNode(key);
         if (!node) return;
 
         // 当前节点:勾选,不置灰(用户可取消勾选)
         node.checked = true;
-        this.$set(node.data, 'disabled', false);
+        this.$set(node.data, "disabled", false);
 
         // 祖先节点:勾选 + 置灰,并展开(确保勾选节点可见)
         let parent = node.parent;
         while (parent && parent.level > 0) {
           parent.checked = true;
-          this.$set(parent.data, 'disabled', true);
+          this.$set(parent.data, "disabled", true);
           parent.expanded = true;
           parent = parent.parent;
         }
@@ -316,9 +337,9 @@ export default {
         // 后代节点:勾选 + 置灰
         const checkDescendants = (n) => {
           if (n.childNodes && n.childNodes.length > 0) {
-            n.childNodes.forEach(child => {
+            n.childNodes.forEach((child) => {
               child.checked = true;
-              this.$set(child.data, 'disabled', true);
+              this.$set(child.data, "disabled", true);
               checkDescendants(child);
             });
           }
@@ -338,10 +359,10 @@ export default {
       const clearNode = (node) => {
         node.checked = false;
         if (node.data) {
-          this.$set(node.data, 'disabled', false);
+          this.$set(node.data, "disabled", false);
         }
         if (node.childNodes && node.childNodes.length > 0) {
-          node.childNodes.forEach(child => clearNode(child));
+          node.childNodes.forEach((child) => clearNode(child));
         }
       };
       clearNode(treeRef.store.root);
@@ -355,12 +376,13 @@ export default {
      * @param {Object} node  - el-tree 节点对象
      * @param {Object} data  - 当前节点绑定的用户数据
      */
-    HandleAiExplain(node, data) 
-    {
-
-      let content = "科目:"+this.targetCommon.subjectName+",知识点:"+data.knowledgeName;
+    HandleAiExplain(node, data) {
+      let content =
+        "科目:" +
+        this.targetCommon.subjectName +
+        ",知识点:" +
+        data.knowledgeName;
       this.openAiRobot(content);
-
     },
 
     /**