@sy-common/organize-select-help 1.0.0-beta.5 → 1.0.0-beta.52

package/src/organize-tree.vue

@@ -1,158 +1,498 @@
 <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
     }
   },
-  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: {
+    async initData() {
+      let data = await this.getOrgChildren();
+      this.loading = false;
       this.data = data;
     },
-    handleChange(data){
-      this.$emit('handleChange',data)
+
+    // 树组件内的 handleChange 方法修改（仅保留核心逻辑，移除冗余触发）
+    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);
+    },
+
+    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);
     },
-    checkNode(data){
-      // console.log(data,'data')
+
+    async loadData(item, callback) {
+      let children = await this.getOrgChildren(item.orgUnitId);
+      callback(children);
     },
-    getOrgChildren(orgUnitId){
-      return new Promise((resolve,reject)=>{
-        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', { params:{
-            containsCurLevel:true,
-            orgUnitId:orgUnitId,
+
+    getOrgChildren(orgUnitId = '') {
+      return new Promise((resolve, reject) => {
+        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', {
+          params: {
+            containsCurLevel: true,
+            orgUnitId: orgUnitId
           }
-        }).then((res)=>{
-          if(res.data.code === 1){
-            let treeList = res.data.data
-            this.initTree(treeList)
-            resolve(treeList)
-          }else{
-            resolve([])
+        }).then((res) => {
+          if (res.data.code === 1) {
+            let treeList = res.data.data;
+            this.initTree(treeList);
+            resolve(treeList);
+          } else {
+            resolve([]);
           }
-        }).catch(err=>{
-          console.log(err)
-        })
-      })
-    },
-    initTree(treeList){
-      const defineTree = function(list){
-        if(!list)return
+        }).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;
+      }
+
+      // 单选逻辑强化：清空所有选中状态
+      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;
+    },
+
+    initTree(treeList) {
+      const defineTree = function (list) {
+        if (!list) return;
         list.forEach((item) => {
-          item.title=item.orgNodeName;
+          item.title = item.orgNodeName;
           item.loading = false;
           item.children = [];
           item.expand = false;
-          item.checked = false;
-          if(item.leafNode){
+          item.checked = false; // 确保checked属性初始化
+          if (item.leafNode) {
             delete item.loading;
             delete item.children;
           }
-        })
-        return list
-      }
-      treeList.forEach(item=>{
-        item.title=item.orgNodeName;
+          if (item.orgChildrenList && item.orgChildrenList.length) {
+            item.children = defineTree(item.orgChildrenList);
+            item.expand = true;
+          }
+        });
+        return list;
+      };
+      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.checked = false; // 初始化Checkbox绑定的checked属性
+        if (item.orgChildrenList && item.orgChildrenList.length) {
           item.children = defineTree(item.orgChildrenList);
           item.expand = true;
         }
-        if(this.disabled){
+        if (this.disabled) {
           item.disabled = true;
         }
-        if(item.leafNode){
+        if (item.leafNode) {
           delete item.loading;
           delete item.children;
         }
-      })
+      });
     },
-    renderContent(h, { root, node, data }){
+
+    //renderContent添加Checkbox组件
+    renderContent(h, {root, node, data}) {
       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: {
+            // overflow: 'hidden',
+            // textOverflow: 'ellipsis',
+            flex: 1,
+            pointerEvents: 'none', // 文本完全禁用点击
+            userSelect: 'none' // 禁止文本选中
+          }
+        }, data.title)
       ]);
     },
-    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) {
+        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;
+}
+
+/* 子组件内层容器强制宽度自适应 */
+.tree-inner {
+  width: fit-content !important;
+  min-width: 100% !important;
+  height: 100% !important;
+  white-space: nowrap !important;
+}
+
+/deep/ .ivu-tree-node {
+  white-space: nowrap !important;
+  width: auto !important;
+  min-width: 100% !important;
+  box-sizing: border-box;
+}
+
+/deep/ .ivu-tree-node-content {
+  cursor: default !important;
+  pointer-events: none !important;
+  padding-left: 0 !important;
+
+  .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;
+}
+
+/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 ul li{
-  overflow: hidden;
+
+/deep/ .ivu-tree::-webkit-scrollbar {
+  display: block !important;
 }
-/deep/.ivu-tree-title{
-  width: calc(100% - 20px);
+
+/deep/ .ivu-tree-indent {
+  margin-right: 4px;
+  display: inline-block !important;
 }
 
-</style>
+/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>