@sy-common/organize-select-help 1.0.0-beta.11 → 1.0.0-beta.14

package/src/organize-tree.vue

@@ -35,9 +35,46 @@ export default {
       this.loading = false
       this.data = data;
     },
-    handleChange(data){
-      this.$emit('handleChange',data)
+    handleChange(data) {
+      // 过滤出当前所有选中的节点（排除未选中的）
+      const checkedData = Array.isArray(data)
+          ? data.filter(item => item.checked)
+          : (data.checked ? [data] : []);
+      console.log(data,'checkedData')
+      // 同步更新子组件内部所有节点的checked状态（防止状态不一致）
+      this.syncAllNodeCheckedState(checkedData);
+
+      // 关键：无论选中/取消，都将最新选中列表传给父组件
+      this.$emit('handleChange', checkedData);
     },
+
+    // 2. 新增：同步子组件所有节点的checked状态（核心方法）
+    syncAllNodeCheckedState(checkedData) {
+      if (!Array.isArray(this.data)) return;
+
+      // 提取所有选中节点的ID，方便快速匹配
+      const checkedIds = checkedData.map(item => item.orgUnitId);
+
+      // 递归遍历所有节点，更新checked状态
+      const updateNodeState = (nodeList) => {
+        nodeList.forEach(node => {
+          // 对比选中ID列表，更新当前节点状态
+          const shouldBeChecked = checkedIds.includes(node.orgUnitId);
+          if (node.checked !== shouldBeChecked) {
+            this.$set(node, 'checked', shouldBeChecked); // 用$set确保响应式
+          }
+
+          // 递归处理子节点
+          const childNodes = node.children || node.orgChildrenList || [];
+          if (childNodes.length) {
+            updateNodeState(childNodes);
+          }
+        });
+      };
+
+      updateNodeState(this.data);
+    },
+
     async loadData(item, callback){
       // 模拟异步获取数据
       let children = await this.getOrgChildren(item.orgUnitId)
@@ -65,6 +102,137 @@ export default {
         })
       })
     },
+    /**
+     * 手动设置树节点选中状态（供父组件调用）
+     * @param {Array} nodes - 需要选中的节点数组（单个节点时传数组包裹）
+     */
+    setCheckedNodes(targets) {
+      if (!this.$refs.tree || !Array.isArray(targets)) {
+        this.clearAllChecked(this.data);
+        this.$emit('handleChange', []); // 取消时通知父组件清空
+        this.$nextTick(() => this.$refs.tree.$forceUpdate());
+        return;
+      }
+
+      this.clearAllChecked(this.data);
+      const targetIds = targets.map(item =>
+          typeof item === 'string' ? item : (item.orgUnitId || '')
+      ).filter(Boolean);
+
+      // 递归选中目标节点
+      const findAndCheckNode = (treeData, targetId) => {
+        for (const node of treeData) {
+          if (node.orgUnitId === targetId) {
+            this.$set(node, 'selected', true);
+            this.expandToNode(node);
+            return true;
+          }
+          const childNodes = node.children || node.orgChildrenList || [];
+          if (childNodes.length && findAndCheckNode(childNodes, targetId)) {
+            return true;
+          }
+        }
+        return false;
+      };
+
+      targetIds.forEach(id => findAndCheckNode(this.data, id));
+
+      // 关键：选中后主动收集选中节点，通知父组件
+      const checkedNodes = this.collectAllCheckedNodes(this.data);
+      this.$nextTick(() => {
+        this.$refs.tree.$forceUpdate();
+        this.$emit('handleChange', checkedNodes); // 同步父组件暂存数据
+      });
+    },
+    /**
+     * 【新增】递归展开到目标节点的所有父节点（确保选中节点可见）
+     * @param {Object} node - 目标节点
+     */
+    expandToNode(node) {
+      let current = node;
+      while (current && current.parent) {
+        // 修复：确保父节点是对象而非数组
+        if (typeof current.parent === 'object' && !Array.isArray(current.parent)) {
+          this.$set(current.parent, 'expand', true);
+        }
+        // 修复：正确获取上层父节点
+        current = current.parent.orgUnitId
+            ? this.findNodeInTree(this.data, current.parent.orgUnitId)
+            : null;
+      }
+    },
+    // 4. 新增：收集子组件内所有选中的节点（供同步给父组件）
+    collectAllCheckedNodes(nodeList) {
+      let checkedNodes = [];
+      nodeList.forEach(node => {
+        if (node.checked) {
+          checkedNodes.push(node);
+        }
+        // 递归收集子节点
+        const childNodes = node.children || node.orgChildrenList || [];
+        if (childNodes.length) {
+          checkedNodes = [...checkedNodes, ...this.collectAllCheckedNodes(childNodes)];
+        }
+      });
+      return checkedNodes;
+    },
+    /**
+     * 递归清空所有节点的选中状态（辅助方法）
+     * @param {Array} treeData - 树形数据
+     */
+    clearAllChecked(treeData) {
+      if (!Array.isArray(treeData)) return;
+      treeData.forEach(node => {
+        if (node.checked) {
+          this.$set(node, 'checked', false); // 响应式更新选中状态
+        }
+        // 同时处理两种子节点字段
+        const childNodes = node.children || node.orgChildrenList || [];
+        if (childNodes.length) {
+          this.clearAllChecked(childNodes);
+        }
+      });
+    },
+    /**
+     * 【新增】供父组件调用，手动更新子组件数据（解决数据同步问题）
+     * @param {Array} newTreeData - 父组件传递的新树形数据
+     */
+    updateTreeData(newTreeData) {
+      if (!Array.isArray(newTreeData)) return;
+      const tree = deepCopy(newTreeData);
+      this.initTree(tree); // 确保新数据经过格式转换（添加children、checked等字段）
+      this.data = tree; // 更新子组件内部数据
+      this.$nextTick(() => {
+        this.$refs.tree.$forceUpdate(); // 触发UI刷新
+      });
+    },
+    /**
+     * 递归查找树中的节点（辅助方法，与父组件逻辑一致，可复用）
+     * @param {Array} treeData - 树形数据
+     * @param {string} targetOrgUnitId - 目标节点ID
+     * @returns {Object|null} 找到的节点
+     */
+    findNodeInTree(treeData, targetOrgUnitId) {
+      if (!treeData || !targetOrgUnitId) return null;
+
+      for (const node of treeData) {
+        // 记录父节点引用（用于展开节点）
+        if (!node.parent && treeData !== this.data) {
+          node.parent = treeData; // 标记父节点，方便后续展开
+        }
+
+        // 找到目标节点，直接返回
+        if (node.orgUnitId === targetOrgUnitId) return node;
+
+        // 【关键】先遍历转换后的children，再遍历原始orgChildrenList（防止遗漏）
+        const childNodes = node.children || node.orgChildrenList || [];
+        if (childNodes.length) {
+          const childNode = this.findNodeInTree(childNodes, targetOrgUnitId);
+          if (childNode) return childNode;
+        }
+      }
+      return null;
+    },
     initTree(treeList){
       const defineTree = function(list){
         if(!list)return
@@ -104,40 +272,59 @@ export default {
         }
       })
     },
-    renderContent(h, { root, node, data }){
+    // 子组件 methods 中的 renderContent 方法（修复点击节点选中逻辑）
+    renderContent(h, { root, node, data }) {
       return h('div', {
         style: {
           width: '100%',
-          overflow:'hidden',
-          display:'flex',
+          overflow: 'hidden',
+          display: 'flex',
           alignItems: 'center',
         }
       }, [
-          h('img', {
-            attrs: {
-              src: require('./assets/icon.png'),
-            },
-            style: {
-              marginRight: '8px',
-              width:'14px',
-              height:'14px',
-            }
-          }),
-          h('span',{
-            style: {
-              overflow: 'hidden',
-              textOverflow:'ellipsis',
-              flex:1
-            },
-            on:{
-              click:()=>{
-                this.checkNode(data)
-              }
+        h('img', {
+          attrs: {
+            src: require('./assets/icon.png'),
+          },
+          style: {
+            marginRight: '8px',
+            width: '14px',
+            height: '14px',
+          }
+        }),
+        h('span', {
+          style: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            flex: 1,
+            // 新增：添加选中状态样式（与直接选择保持一致）
+            color: data.checked ? 'var(--primary-color)' : 'inherit',
+            fontWeight: data.checked ? 'bold' : 'normal'
+          },
+          on: {
+            click: () => {
+              // 修复：点击节点时同步更新checked状态
+              this.$set(data, 'checked', !data.checked);
+              this.checkNode(data);
+              // 触发Tree组件内置选中事件
+              this.handleChange([data]);
             }
-          }, data.title)
+          }
+        }, data.title),
+        // 新增：显示选中勾选图标（与直接选择保持视觉一致）
+        h('Icon', {
+          attrs: {
+            type: 'md-checkmark',
+          },
+          style: {
+            color: 'var(--primary-color)',
+            display: data.checked ? 'inline-block' : 'none',
+          }
+        })
       ]);
     },
     upDataTree(){
+
       const unCheck = (list)=>{
         list.forEach((item)=>{
           this.$set(item, 'selected', false);