@sy-common/organize-select-help 1.0.0-beta.26 → 1.0.0-beta.29

package/src/organize-tree.vue

@@ -1,129 +1,160 @@
 <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>
+    <Tree
+        :data="data"
+        ref="tree"
+        :load-data="loadData"
+        :render="renderContent"
+        multiple
+        :check-strictly="true"
+        :cascade-check="false"
+    @on-select-change="handleChange"
+    ></Tree>
   </div>
 </template>
+
 <script>
 import { deepCopy } from '@lambo-design/core/src/utils/assist';
-import ajax from '@lambo-design/shared/utils/ajax'
+import ajax from '@lambo-design/shared/utils/ajax';
+
 export default {
-  props:{
-    disabled:{
+  props: {
+    disabled: {
       type: Boolean,
       default: false
     },
-    treeList:{
+    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) {
-      // 过滤出当前所有选中的节点（排除未选中的）
-      const checkedData = Array.isArray(data)
+      let checkedData = Array.isArray(data)
           ? data.filter(item => item.checked)
           : (data.checked ? [data] : []);
-      console.log(data,'checkedData')
-      // 同步更新子组件内部所有节点的checked状态（防止状态不一致）
-      this.syncAllNodeCheckedState(checkedData);
 
-      // 关键：无论选中/取消，都将最新选中列表传给父组件
+      // 单选逻辑：仅保留最后一个选中的节点
+      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);
     },
+    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);
+    },
 
-    // 2. 新增：同步子组件所有节点的checked状态（核心方法）
     syncAllNodeCheckedState(checkedData) {
-      if (!Array.isArray(this.data)) return;
+      if (!Array.isArray(this.data) || !Array.isArray(checkedData)) 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);
+            this.$set(node, 'checked', shouldBeChecked);
           }
+          // 彻底删除子节点递归逻辑
         });
       };
-
       updateNodeState(this.data);
     },
 
-    async loadData(item, callback){
-      // 模拟异步获取数据
-      let children = await this.getOrgChildren(item.orgUnitId)
-      callback(children); // 调用callback传入子节点数据
-    },
-    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)
-        })
-      })
+        }).catch(err => {
+          console.log(err);
+          resolve([]);
+        });
+      });
     },
-    /**
-     * 手动设置树节点选中状态（供父组件调用）
-     * @param {Array} nodes - 需要选中的节点数组（单个节点时传数组包裹）
-     */
+
     setCheckedNodes(targets) {
       if (!this.$refs.tree || !Array.isArray(targets)) {
         this.clearAllChecked(this.data);
-        this.$emit('handleChange', []); // 取消时通知父组件清空
+        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 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) {
-          if (node.orgUnitId === targetId) {
-            this.$set(node, 'selected', true);
+          const nodeId = (node.orgUnitId || node.id || '').trim();
+          if (nodeId === targetId) {
+            this.$set(node, 'checked', true);
             this.expandToNode(node);
             return true;
           }
@@ -137,38 +168,32 @@ export default {
 
       targetIds.forEach(id => findAndCheckNode(this.data, id));
 
-      // 关键：选中后主动收集选中节点，通知父组件
-      const checkedNodes = this.collectAllCheckedNodes(this.data);
+      // 传递过滤后的有效节点
+      const checkedNodes = this.collectCurrentCheckedNodes(this.data);
       this.$nextTick(() => {
         this.$refs.tree.$forceUpdate();
-        this.$emit('handleChange', checkedNodes); // 同步父组件暂存数据
+        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)];
@@ -176,55 +201,40 @@ export default {
       });
       return checkedNodes;
     },
-    /**
-     * 递归清空所有节点的选中状态（辅助方法）
-     * @param {Array} treeData - 树形数据
-     */
+
     clearAllChecked(treeData) {
       if (!Array.isArray(treeData)) return;
       treeData.forEach(node => {
         if (node.checked) {
-          this.$set(node, 'checked', false); // 响应式更新选中状态
+          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.initTree(tree);
+      this.data = tree;
       this.$nextTick(() => {
-        this.$refs.tree.$forceUpdate(); // 触发UI刷新
+        this.$refs.tree.$forceUpdate();
       });
     },
-    /**
-     * 递归查找树中的节点（辅助方法，与父组件逻辑一致，可复用）
-     * @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; // 标记父节点，方便后续展开
+          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);
@@ -233,132 +243,183 @@ export default {
       }
       return null;
     },
-    initTree(treeList){
-      const defineTree = function(list){
-        if(!list)return
+
+    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;
           }
-          if(item.orgChildrenList && item.orgChildrenList.length){
+          if (item.orgChildrenList && item.orgChildrenList.length) {
             item.children = defineTree(item.orgChildrenList);
             item.expand = true;
           }
-        })
-        return list
-      }
-      treeList.forEach(item=>{
-        item.title=item.orgNodeName;
+        });
+        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;
         }
-      })
+      });
     },
-    // 子组件 methods 中的 renderContent 方法（修复点击节点选中逻辑）
-    renderContent(h, { root, node, data }) {
+
+    //renderContent添加Checkbox组件
+    renderContent(h, {root, node, data}) {
       return h('div', {
         style: {
           width: '100%',
           overflow: 'hidden',
           display: 'flex',
           alignItems: 'center',
+          cursor: 'pointer'
         }
       }, [
-        h('img', {
-          attrs: {
-            src: require('./assets/icon.png'),
+        h('Checkbox', {
+          props: {
+            value: data.checked,
+            disabled: data.disabled || this.disabled,
+            indeterminate: false
           },
           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'
+            marginRight: '8px'
           },
           on: {
-            click: () => {
-              // 修复：点击节点时同步更新checked状态
-              this.$set(data, 'checked', !data.checked);
-              this.checkNode(data);
-              // 触发Tree组件内置选中事件
-              this.handleChange([data]);
+            '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('Icon', {
-          attrs: {
-            type: 'md-checkmark',
-          },
-          style: {
-            color: 'var(--primary-color)',
-            display: data.checked ? 'inline-block' : 'none',
-          }
-        })
+        }),
+        h('img', {
+          attrs: { src: require('./assets/icon.png') },
+          style: { marginRight: '8px', width: '14px', height: '14px' }
+        }),
+        h('span', {
+          style: { overflow: 'hidden', textOverflow: 'ellipsis', flex: 1 }
+        }, 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:function(val,oldVal){
-        let tree = deepCopy(val)
-        this.initTree(tree)
-        this.data = tree
+  watch: {
+    'treeList': {
+      handler(val) {
+        let tree = deepCopy(val);
+        this.initTree(tree);
+        this.data = tree;
       },
-      deep:true
+      deep: true
     }
   }
-}
+};
 </script>
+
 <style lang="less" scoped>
-.content{
+.content {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
-/deep/.ivu-tree ul li{
-  overflow: hidden;
+
+/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-title{
-  width: calc(100% - 20px);
+
+/deep/ .ivu-tree-node-content {
+  padding-left: 0 !important;
 }
 
-</style>
+/deep/ .ivu-tree-indent {
+  margin-right: 4px;
+}
+
+/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>