@sy-common/organize-select-help 1.0.0-beta.6 → 1.0.0-beta.63

package/src/organize-tree.vue

@@ -1,158 +1,627 @@
 <template>
   <div class="content">
     <Spin fix v-if="loading"></Spin>
-    <Tree :data="data" ref="tree" :load-data="loadData" :render="renderContent" check-directly
-          @on-select-change	="handleChange" multiple></Tree>
+    <div class="tree-inner">
+      <Tree
+          :data="data"
+          ref="tree"
+          :load-data="loadData"
+          :render="renderContent"
+          multiple
+          :check-strictly="true"
+          :cascade-check="false"
+          @on-select-change="handleChange"
+      ></Tree>
+    </div>
   </div>
 </template>
+
 <script>
-import ajax from '@lambo-design/shared/utils/ajax'
+import { deepCopy } from '@lambo-design/core/src/utils/assist';
+import ajax from '@lambo-design/shared/utils/ajax';
+
 export default {
-  props:{
-    disabled:{
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    treeList: {
+      type: Array,
+      default: () => []
+    },
+    isSingleSelect: {
+      type: Boolean,
+      default: false
+    },
+    // 新增1：接收父组件的 defaultOrgUnitId（自定义根节点ID）
+    defaultOrgUnitId: {
+      type: String,
+      default: ''
+    },
+    // 新增2：标记是否使用父组件构建的自定义树（禁用子组件自身的接口调用）
+    isCustomTree: {
+      type: Boolean,
+      default: false
+    },
+    // 新增3：禁用懒加载（避免触发子组件的旧接口）
+    disableLazyLoad: {
       type: Boolean,
       default: false
     }
   },
-  data(){
+  data() {
     return {
-      data:[],
-      manageUnitId:'',
-      loading:true
-    }
+      data: [],
+      manageUnitId: '',
+      loading: true
+    };
   },
   mounted() {
-    this.initData()
+    this.initData();
   },
-  methods:{
-    async initData(){
-      let data = await this.getOrgChildren()
-      this.loading = false
+  methods: {
+    safeDeepCopy(obj, hash = new WeakMap()) {
+      if (obj === null || typeof obj !== 'object') {
+        return obj;
+      }
+
+      // 检测循环引用，返回核心业务字段
+      if (hash.has(obj)) {
+        const safeObj = {
+          orgUnitId: obj.orgUnitId,
+          orgNodeName: obj.orgNodeName || obj.name || `未命名组织(${obj.orgUnitId || 'unknown'})`,
+          orgUnitName: obj.orgUnitName || obj.orgNodeName || obj.name || `未命名组织(${obj.orgUnitId || 'unknown'})`,
+          parentOrgUnitId: obj.parentOrgUnitId || obj.parentId || null
+        };
+        hash.set(obj, safeObj);
+        return safeObj;
+      }
+
+      let copy;
+      if (obj instanceof Array) {
+        copy = [];
+        hash.set(obj, copy);
+        for (let i = 0; i < obj.length; i++) {
+          copy[i] = this.safeDeepCopy(obj[i], hash);
+        }
+      } else if (obj instanceof Object) {
+        copy = {};
+        hash.set(obj, copy);
+        for (let key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            // 过滤Vue内部无效字段，保留业务字段
+            if (['__vue__', '__ob__', '$parent', '$children'].includes(key)) {
+              continue;
+            }
+            // 子节点数组特殊处理
+            if (['orgChildrenList', 'children'].includes(key) && Array.isArray(obj[key])) {
+              copy[key] = obj[key].map(child => this.safeDeepCopy(child, hash));
+            } else {
+              copy[key] = this.safeDeepCopy(obj[key], hash);
+            }
+          }
+        }
+      } else {
+        copy = obj;
+      }
+      return copy;
+    },
+    async initData() {
+      if (this.isCustomTree) {
+        this.loading = false;
+        let tree = deepCopy(this.treeList);
+        this.initTree(tree);
+        this.data = tree;
+        return;
+      }
+      // 仅在非自定义树场景下生效
+      let data = await this.getOrgChildren();
+      this.loading = false;
       this.data = data;
     },
-    handleChange(data){
-      this.$emit('handleChange',data)
+
+    handleChange(data) {
+      // 仅处理复选框触发的选中数据，过滤空数据
+      if (!data || (Array.isArray(data) && data.length === 0)) {
+        this.$emit('handleChange', []);
+        return;
+      }
+
+      let checkedData = Array.isArray(data)
+          ? data.filter(item => item.checked)
+          : (data.checked ? [data] : []);
+
+      // 单选逻辑：仅保留最后一个选中的节点
+      if (this.isSingleSelect) {
+        checkedData = checkedData.length > 0 ? [checkedData[checkedData.length - 1]] : [];
+        // 清空其他节点的选中状态
+        this.clearOtherCheckedNodes(checkedData.map(item => item.orgUnitId));
+      }
+
+      this.syncAllNodeCheckedState(checkedData);
+      // 仅当有有效选中节点时才触发父组件事件
+      this.$emit('handleChange', checkedData);
     },
-    async loadData(item, callback){
-      // 模拟异步获取数据
-      let children = await this.getOrgChildren(item.orgUnitId)
-      callback(children); // 调用callback传入子节点数据
+    clearOtherCheckedNodes(keepIds) {
+      if (!Array.isArray(this.data) || !Array.isArray(keepIds)) return;
+
+      const clearNodeState = (nodeList) => {
+        nodeList.forEach(node => {
+          if (!keepIds.includes(node.orgUnitId) && node.checked) {
+            this.$set(node, 'checked', false);
+          }
+          // 递归处理子节点（单选时也需要清空子节点的选中状态）
+          const childNodes = node.children || node.orgChildrenList || [];
+          if (childNodes.length) {
+            clearNodeState(childNodes);
+          }
+        });
+      };
+
+      clearNodeState(this.data);
     },
-    checkNode(data){
-      // console.log(data,'data')
+
+    syncAllNodeCheckedState(checkedData) {
+      if (!Array.isArray(this.data) || !Array.isArray(checkedData)) return;
+
+      const checkedIds = checkedData.map(item => item.orgUnitId);
+      const updateNodeState = (nodeList) => {
+        nodeList.forEach(node => {
+          // 仅更新当前节点，跳过子节点
+          const shouldBeChecked = checkedIds.includes(node.orgUnitId);
+          if (node.checked !== shouldBeChecked) {
+            this.$set(node, 'checked', shouldBeChecked);
+          }
+        });
+      };
+      updateNodeState(this.data);
     },
-    getOrgChildren(orgUnitId){
-      return new Promise((resolve,reject)=>{
-        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', { params:{
-            containsCurLevel:true,
-            orgUnitId:orgUnitId,
+
+    async loadData(item, callback) {
+      // 自定义树场景（defaultOrgUnitId 不为空）：原有逻辑不变
+      if (this.isCustomTree) {
+        let children = item.orgChildrenList || item.children || [];
+        const formattedChildren = this.safeDeepCopy(children).map(child => ({
+          ...child,
+          title: child.orgUnitName || child.orgNodeName || child.name || `未命名组织(${child.orgUnitId || child.id || ''})`,
+          checked: false,
+          expand: false,
+          leafNode: child.leafNode || false,
+          orgChildrenList: child.orgChildrenList || [],
+          children: child.children || []
+        }));
+        if (formattedChildren.length === 0 && item.orgUnitId) {
+          try {
+            const res = await ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', {
+              params: {
+                containsCurLevel: true,
+                orgUnitId: item.orgUnitId
+              }
+            });
+            if (res.data.code === 1) {
+              const apiChildren = res.data.data || [];
+              // 关键：对接口返回的二级节点进行 initTree 初始化
+              const initializedApiChildren = this.initTree(apiChildren);
+              const apiFormattedChildren = initializedApiChildren.map(child => ({
+                ...child,
+                title: child.orgUnitName || child.orgNodeName || child.name || `未命名组织(${child.orgUnitId || ''})`,
+                checked: false,
+                expand: false,
+                leafNode: child.leafNode || false,
+                orgChildrenList: [],
+                children: []
+              }));
+              item.orgChildrenList = apiFormattedChildren;
+              item.children = apiFormattedChildren;
+              callback(apiFormattedChildren);
+              return;
+            }
+          } catch (e) {
+            console.error("加载自定义树子节点失败：", e);
           }
-        }).then((res)=>{
-          if(res.data.code === 1){
-            let treeList = res.data.data
-            this.initTree(treeList)
-            resolve(treeList)
-          }else{
-            resolve([])
+        }
+        callback(formattedChildren);
+        return;
+      }
+
+      // 非自定义树场景（defaultOrgUnitId 为空）：补充子节点初始化
+      if (this.disableLazyLoad) {
+        callback([]);
+        return;
+      }
+      // 加载子节点后，先经过 initTree 处理再返回
+      let children = await this.getOrgChildren(item.orgUnitId);
+      const initializedChildren = this.initTree(children);
+      callback(initializedChildren);
+    },
+
+    getOrgChildren(orgUnitId = '') {
+      if (this.isCustomTree) {
+        return Promise.resolve([]);
+      }
+      return new Promise((resolve, reject) => {
+        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', {
+          params: {
+            containsCurLevel: true,
+            orgUnitId: orgUnitId
           }
-        }).catch(err=>{
-          console.log(err)
-        })
-      })
-    },
-    initTree(treeList){
-      const defineTree = function(list){
-        if(!list)return
-        list.forEach((item) => {
-          item.title=item.orgNodeName;
-          item.loading = false;
-          item.children = [];
-          item.expand = false;
-          item.checked = false;
-          if(item.leafNode){
-            delete item.loading;
-            delete item.children;
+        }).then((res) => {
+          if (res.data.code === 1) {
+            let treeList = res.data.data || [];
+            // 关键修改：调用重构后的 initTree，递归初始化所有层级节点
+            const initializedTree = this.initTree(treeList);
+            resolve(initializedTree);
+          } else {
+            resolve([]);
           }
-        })
-        return list
+        }).catch(err => {
+          console.log(err);
+          resolve([]);
+        });
+      });
+    },
+
+    setCheckedNodes(targets) {
+      if (!this.$refs.tree || !Array.isArray(targets)) {
+        this.clearAllChecked(this.data);
+        this.$emit('handleChange', []);
+        this.$nextTick(() => this.$refs.tree.$forceUpdate());
+        return;
       }
-      treeList.forEach(item=>{
-        item.title=item.orgNodeName;
-        item.loading = false;
-        item.children = [];
-        item.expand = false;
-        item.checked = false;
-        if(item.orgChildrenList && item.orgChildrenList.length){
-          item.children = defineTree(item.orgChildrenList);
-          item.expand = true;
-        }
-        if(this.disabled){
-          item.disabled = true;
-        }
-        if(item.leafNode){
-          delete item.loading;
-          delete item.children;
-        }
-      })
-    },
-    renderContent(h, { root, node, data }){
+
+      // 单选逻辑强化：清空所有选中状态
+      this.clearAllChecked(this.data);
+
+      const targetList = this.isSingleSelect
+          ? (targets.length > 0 ? [targets[targets.length - 1]] : [])
+          : targets;
+
+      // 转换为有效orgUnitId数组
+      const targetIds = targetList.map(item => {
+        if (typeof item === 'string') return item.trim();
+        return (item.orgUnitId || item.id || '').trim();
+      }).filter(id => id); // 过滤空ID
+
+      // 查找并选中目标节点
+      const findAndCheckNode = (treeData, targetId) => {
+        for (const node of treeData) {
+          const nodeId = (node.orgUnitId || node.id || '').trim();
+          if (nodeId === targetId) {
+            this.$set(node, 'checked', 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.collectCurrentCheckedNodes(this.data);
+      this.$nextTick(() => {
+        this.$refs.tree.$forceUpdate();
+        this.$emit('handleChange', checkedNodes);
+      });
+    },
+
+    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;
+      }
+    },
+
+    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;
+    },
+
+    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);
+        }
+      });
+    },
+
+    updateTreeData(newTreeData) {
+      if (!Array.isArray(newTreeData)) return;
+      const tree = deepCopy(newTreeData);
+      this.initTree(tree);
+      this.data = tree;
+      this.$nextTick(() => {
+        this.$refs.tree.$forceUpdate();
+      });
+    },
+
+    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;
+
+        const childNodes = node.children || node.orgChildrenList || [];
+        if (childNodes.length) {
+          const childNode = this.findNodeInTree(childNodes, targetOrgUnitId);
+          if (childNode) return childNode;
+        }
+      }
+      return null;
+    },
+    // organize-tree.vue - 重构 initTree 方法，确保递归处理所有层级
+    initTree(treeList) {
+      // 递归处理节点的内部方法
+      const recursiveInitNode = (node) => {
+        // 1. 统一节点标题（优先级：orgUnitName > orgNodeName > name > 兜底）
+        node.title = node.orgUnitName || node.orgNodeName || node.name || `未命名组织(${node.orgUnitId || node.id || ''})`;
+        // 2. 初始化基础字段
+        node.loading = false;
+        node.expand = false;
+        node.checked = false;
+        // 3. 关键：无论是否有子节点，先初始化 children 空数组（让 Tree 组件识别可懒加载）
+        node.children = node.children || [];
+        // 4. 同步 orgChildrenList 和 children（双向绑定，避免字段不一致）
+        node.orgChildrenList = node.orgChildrenList || node.children || [];
+        // 5. 禁用状态处理
+        if (this.disabled) {
+          node.disabled = true;
+        }
+        // 6. 叶子节点判断：如果明确标记为 leafNode，删除 loading 和 children（禁止展开）
+        if (node.leafNode) {
+          delete node.loading;
+          delete node.children;
+          delete node.orgChildrenList;
+        } else {
+          // 7. 非叶子节点：递归处理已有子节点（确保下级节点也完成初始化）
+          if (Array.isArray(node.orgChildrenList) && node.orgChildrenList.length > 0) {
+            node.children = node.orgChildrenList.map(child => recursiveInitNode(child));
+            node.expand = true; // 默认展开已有子节点的节点
+          }
+        }
+        return node;
+      };
+
+      // 处理根节点列表
+      if (Array.isArray(treeList)) {
+        return treeList.map(node => recursiveInitNode(node));
+      }
+      return treeList;
+    },
+
+    renderContent(h, {root, node, data}) {
+      const nodeText = data.orgUnitName || data.title || data.orgNodeName || data.name || `未命名组织(${data.orgUnitId || data.id || ''})`;
       return h('div', {
         style: {
           width: '100%',
-          overflow:'hidden',
-          display:'flex',
+          overflow: 'hidden',
+          display: 'flex',
           alignItems: 'center',
+          cursor: 'default'
+        },
+        on: {
+          click: (e) => {
+            const isCheckbox = e.target.closest('.ivu-checkbox') || e.target.closest('.ivu-checkbox-icon');
+            if (!isCheckbox) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }
         }
       }, [
-          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('Checkbox', {
+          props: {
+            value: data.checked,
+            disabled: data.disabled || this.disabled,
+            indeterminate: false
+          },
+          style: {
+            marginRight: '8px',
+            cursor: 'pointer'
+          },
+          on: {
+            'on-change': (checked) => {
+              this.$set(data, 'checked', checked);
+              if (this.isSingleSelect && checked) {
+                this.clearOtherCheckedNodes([data.orgUnitId]);
               }
+              const checkedNodes = this.isSingleSelect
+                  ? (checked ? [data] : [])
+                  : this.collectCurrentCheckedNodes(this.data);
+              this.handleChange(checkedNodes);
             }
-          }, data.title)
+          }
+        }),
+        h('img', {
+          attrs: { src: require('./assets/icon.png') },
+          style: {
+            marginRight: '8px',
+            width: '14px',
+            height: '14px',
+            pointerEvents: 'none'
+          }
+        }),
+        h('span', {
+          style: {
+            flex: 1,
+            pointerEvents: 'none',
+            userSelect: 'none',
+            // 新增：防止文字溢出导致的截断（可选，解决orgUnitId显示不全问题）
+            whiteSpace: 'normal',
+            wordWrap: 'break-word'
+          }
+        }, nodeText) // 使用调整优先级后的节点文字
       ]);
     },
-    upDataTree(){
-      const unCheck = (list)=>{
-        list.forEach((item)=>{
-          this.$set(item, 'selected', false);
-          if(item.children && item.children.length){
-            unCheck(item.children)
+    collectCurrentCheckedNodes(nodeList) {
+      let checkedNodes = [];
+      nodeList.forEach(node => {
+        if (node.checked) {
+          // 强制补全orgUnitId，过滤无效节点
+          const nodeId = node.orgUnitId || node.id || '';
+          if (nodeId && typeof nodeId === 'string' && nodeId.trim()) {
+            const validNode = {
+              ...node,
+              orgUnitId: nodeId.trim(),
+              orgNodeName: node.orgNodeName || node.title || node.name || `未命名组织(${nodeId.trim()})`
+            };
+            checkedNodes.push(validNode);
           }
-        })
-      }
-      unCheck(this.data)
+        }
+        // 递归处理子节点
+        const childNodes = node.children || node.orgChildrenList || [];
+        if (childNodes.length) {
+          checkedNodes = [...checkedNodes, ...this.collectCurrentCheckedNodes(childNodes)];
+        }
+      });
+      return checkedNodes;
+    },
+    upDataTree() {
+      const unCheck = (list) => {
+        list.forEach((item) => {
+          this.$set(item, 'checked', false);
+        });
+      };
+      unCheck(this.data);
     }
   },
-}
+  watch: {
+    'treeList': {
+      handler(val) {
+        // 自定义树场景：直接使用父组件传递的树数据，不初始化旧接口
+        if (this.isCustomTree) {
+          let tree = deepCopy(val);
+          this.initTree(tree);
+          this.data = tree;
+          return;
+        }
+        // 原有逻辑
+        let tree = deepCopy(val);
+        this.initTree(tree);
+        this.data = tree;
+      },
+      deep: true
+    }
+  }
+};
 </script>
+
 <style lang="less" scoped>
-.content{
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+.content {
+  width: 100% !important;
+  height: 100% !important;
+  overflow: visible !important; /* 完全放开溢出限制 */
+  box-sizing: border-box;
 }
-/deep/.ivu-tree ul li{
-  overflow: hidden;
+
+/* 子组件内层容器强制宽度自适应 */
+.tree-inner {
+  width: fit-content !important;
+  min-width: 100% !important;
+  height: 100% !important;
+  white-space: nowrap !important;
+  overflow: visible !important;
 }
-/deep/.ivu-tree-title{
-  width: calc(100% - 20px);
+
+/deep/ .ivu-tree-node {
+  white-space: nowrap !important;
+  width: auto !important;
+  min-width: 100% !important;
+  box-sizing: border-box;
 }
 
-</style>
+/deep/ .ivu-tree-node-content {
+  cursor: default !important;
+  pointer-events: none !important;
+  padding-left: 0 !important;
+  width: 100% !important; /* 关键：节点内容宽度100% */
+
+  .ivu-checkbox, .ivu-tree-switcher {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+  }
+}
+
+/deep/ .ivu-tree {
+  white-space: nowrap !important;
+  display: inline-block !important;
+  width: auto !important;
+  min-width: 100% !important;
+  box-sizing: border-box;
+  height: 100% !important; /* 关键：树组件高度100% */
+}
+
+
+/deep/ .ivu-tree-node,
+/deep/ .ivu-tree-node *,
+/deep/ .ivu-tree-node-content,
+/deep/ .ivu-tree-title {
+  box-shadow: none !important;
+  text-shadow: none !important;
+  outline: none !important;
+  border: none !important;
+  background: transparent !important;
+}
+
+/deep/ .ivu-tree-node-selected,
+/deep/ .ivu-tree-node-selected *,
+/deep/ .ivu-tree-node-focus,
+/deep/ .ivu-tree-node-focus *,
+/deep/ .ivu-tree-node-hover,
+/deep/ .ivu-tree-node-hover * {
+  box-shadow: none !important;
+  text-shadow: none !important;
+  background: transparent !important;
+  color: inherit !important;
+}
+
+/deep/ .ivu-tree-node-content {
+  padding-left: 0 !important;
+}
+
+/deep/ .ivu-tree::-webkit-scrollbar {
+  display: block !important;
+}
+
+/deep/ .ivu-tree-indent {
+  margin-right: 4px;
+  display: inline-block !important;
+}
+
+/deep/ .ivu-tree-node::before,
+/deep/ .ivu-tree-node::after,
+/deep/ .ivu-tree-title::before,
+/deep/ .ivu-tree-title::after {
+  box-shadow: none !important;
+  text-shadow: none !important;
+  background: none !important;
+}
+</style>