@sy-common/organize-select-help 1.0.0-beta.65 → 1.0.0-beta.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/organize-select-help",
-  "version": "1.0.0-beta.65",
+  "version": "1.0.0-beta.67",
   "description": "",
   "main": "index.js",
   "author": "lambo",

package/src/index.vue

@@ -178,6 +178,71 @@
                 </div>
               </div>
             </TabPane>
+            <TabPane label="组织选择" name="orgNew" v-if="name.includes('orgNew')">
+              <div class="tab org-new-tab">
+                <div class="org-new-header">
+                  <Input v-model="orgNewSearch" @on-enter="searchOrgNew" @on-search="searchOrgNew" search placeholder="搜索组织节点名称（如：办公室）" style="width: 100%;"/>
+                  <div class="org-new-actions">
+                    <Button type="default" @click="expandAllOrgNew">展开全部</Button>
+                    <Button type="default" @click="collapseAllOrgNew">折叠全部</Button>
+                    <!--                    <Button type="default" @click="clearOrgNew">清空</Button>-->
+                  </div>
+                </div>
+                <div class="org-new-content">
+                  <div class="org-card" v-for="(province, index) in filteredOrgNewTree" :key="province.orgUnitId">
+                    <div class="org-card-header" @click="toggleProvinceExpand(province)">
+                      <div class="org-card-title" @click.stop="addOrgNewItem(province)">
+                        <img src="./assets/icon.png" alt="" style="margin-right: 8px; width: 14px; height: 14px;"/>
+                        {{ province.title }}
+                      </div>
+                      <div class="org-card-actions" v-if="province.children && province.children.length > 0">
+                        <Button type="text" @click.stop="selectAllProvinceOrgNew(province)">全选（包含下级）</Button>
+                        <Icon :type="province.expand ? 'md-arrow-dropdown' : 'md-arrow-dropright'" style="margin-left: 8px;"/>
+                      </div>
+                    </div>
+                    <div class="org-card-body" v-if="province.expand && province.children && province.children.length > 0">
+                      <div class="city-card" v-for="city in province.children" :key="city.orgUnitId">
+                        <div class="city-card-header" @click="toggleCityExpand(city)">
+                          <div class="city-card-title" @click.stop="addOrgNewItem(city)">
+                            <img src="./assets/icon.png" alt="" style="margin-right: 8px; width: 14px; height: 14px;"/>
+                            {{ city.title }}
+                          </div>
+                          <div class="city-card-actions" v-if="city.children && city.children.length > 0">
+                            <Button type="text" @click.stop="selectAllCityOrgNew(city)">全选（包含下级）</Button>
+                            <!--                            <Button type="text" @click.stop="selectAllCityLevelOrgNew(city)">全选市本级</Button>-->
+                            <Icon :type="city.expand ? 'md-arrow-dropdown' : 'md-arrow-dropright'" style="margin-left: 8px;"/>
+                          </div>
+                        </div>
+                        <div class="city-card-body" v-if="city.expand && city.children && city.children.length > 0">
+                          <div class="district-grid">
+                            <div class="district-item" v-for="district in city.children" :key="district.orgUnitId">
+                              <div class="district-header" @click="toggleDistrictExpand(district)">
+                                <div class="district-title" @click.stop="addOrgNewItem(district)">
+                                  <img src="./assets/icon.png" alt="" style="margin-right: 8px; width: 14px; height: 14px;"/>
+                                  {{ district.title }}
+                                </div>
+                                <div class="district-actions" v-if="district.children && district.children.length > 0">
+                                  <Button type="text" @click.stop="selectAllDistrictOrgNew(district)">全选</Button>
+                                  <Icon :type="district.expand ? 'md-arrow-dropdown' : 'md-arrow-dropright'" style="margin-left: 8px;"/>
+                                </div>
+                              </div>
+                              <div class="district-body" v-if="district.expand && district.children && district.children.length > 0">
+                                <div class="org-unit-item" v-for="unit in district.children" :key="unit.orgUnitId">
+                                  <div class="unit-title" @click="addOrgNewItem(unit)">
+                                    <img src="./assets/icon.png" alt="" style="margin-right: 8px; width: 14px; height: 14px;"/>
+                                    {{ unit.title }}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TabPane>
           </Tabs>
         </div>
         <div class="form-content">
@@ -214,7 +279,7 @@
             <!--              直接选择人员：-->
             <div v-if="name.includes('staff')">
               <div class="group-box flex-r-bt">
-                <div>直接选择人员：</div>
+                <div>选择人员：</div>
                 <div class="clear-btn" @click="clearStaff">清除全部</div>
               </div>
               <div class="group-list-content">
@@ -222,7 +287,21 @@
                   <span>{{item.name}}</span>
                   <img class="clear-icon" src="./assets/delete.png" alt="" @click="clearStaffByIndex(index)">
                 </p>
-                <p style="color:#CCCCCC" class="list-item" v-if="!staffList.length">未选择直接选择人员</p>
+                <p style="color:#CCCCCC" class="list-item" v-if="!staffList.length">未选择人员</p>
+              </div>
+            </div>
+            <!--              组织选择（新）：-->
+            <div v-if="name.includes('orgNew')">
+              <div class="group-box flex-r-bt">
+                <div>组织选择：</div>
+                <div class="clear-btn" @click="clearOrgNewList">清除全部</div>
+              </div>
+              <div class="group-list-content">
+                <p class="list-item flex-r-bt" v-for="(item,index) in orgNewList" :key="item.id">
+                  <span>{{item.title}}</span>
+                  <img class="clear-icon" src="./assets/delete.png" alt="" @click="clearOrgNewByIndex(index)">
+                </p>
+                <p style="color:#CCCCCC" class="list-item" v-if="!orgNewList.length">未选择组织节点</p>
               </div>
             </div>
           </div>
@@ -296,7 +375,7 @@ export default {
       parentOrgList: [],
       orgTagList:[],
       postTagList:[],
-      selectedPositionId: null, // 新增：岗位单选的选中状态存储
+      selectedPositionId: null, // 岗位单选的选中状态存储
       selectedOrgTagKey: '', // 存储选中标签的唯一标识
       selectedPostTagKey: '', // 存储选中标签的唯一标识
       //人员选择
@@ -304,8 +383,8 @@ export default {
       staffTagList:[],
       staffOrgList:[],
       staffSearchList:[],
-      selectedStaffOrgId: '', // 新增：选中的组织节点ID
-      proStaffOrgList: [], // 新增：暂存选中的组织节点
+      selectedStaffOrgId: '', // 选中的组织节点ID
+      proStaffOrgList: [], // 暂存选中的组织节点
       initialDefaultOrgUnitId: '', // 缓存初始defaultOrgUnitId
       // staffTreeInited: false, // 组织树初始化完成标记
       // 树加载完成标记
@@ -315,6 +394,13 @@ export default {
       // 缓存原始组织树/岗位树数据
       originalOrgTree: [], // 组织Tab原始树缓存
       originalPostTree: [], // 岗位Tab原始树缓存
+      staffTreeInited: false, // 组织树初始化完成标记（用于需求3）
+      //组织选择（新）
+      orgNewSearch: '',
+      orgNewTree: [],
+      proOrgNewList: [],
+      includeLevelOrgNew: [],
+      orgNewList: []
     }
   },
   mounted() {
@@ -325,6 +411,7 @@ export default {
     this.initOrgOrgTree()
     this.initPostOrgTree()
     this.initStaffOrgTree()
+    this.initOrgNewTree()
   },
 
   methods:{
@@ -1266,11 +1353,18 @@ export default {
     clearStaffByIndex(index){
       this.staffList.splice(index,1)
     },
+    clearOrgNewList(){
+      this.orgNewList = []
+    },
+    clearOrgNewByIndex(index){
+      this.orgNewList.splice(index,1)
+    },
     confirm(){
       const v = {
         orgList:this.orgList,
         postList:this.postList,
-        staffList:this.staffList
+        staffList:this.staffList,
+        orgNewList:this.orgNewList
       }
       this.$emit('confirm',deepCopy(v))
     },
@@ -1517,7 +1611,7 @@ export default {
                     continue;
                   }
 
-                  // 父节点追溯与节点链挂载（修复：使用当前Tab的树数据originalTreeData，而非固定orgTree）
+                  // 父节点追溯与节点链挂载（使用当前Tab的树数据originalTreeData，而非固定orgTree）
                   let targetParent = null;
                   let nodeChain = [currentNode];
                   const MAX_DEPTH = 8;
@@ -1542,7 +1636,7 @@ export default {
                     }
 
                     parentNode.orgNodeName = parentNode.orgNodeName || parentNode.orgUnitName || `未命名组织(${parentId})`;
-                    // 修复：查询父节点是否在当前Tab的树数据中（originalTreeData），而非固定orgTree
+                    // 查询父节点是否在当前Tab的树数据中（originalTreeData），而非固定orgTree
                     const parentInTree = this.findNodeInTree(originalTreeData, parentNode.orgUnitId);
 
                     if (parentInTree) {
@@ -1629,7 +1723,7 @@ export default {
                     treeRef.handleChange(matchedNodes);
                   }
 
-                  // 提示信息（通用逻辑）
+                  // 提示信息
                   this.$Message.success(`成功选中${matchedNodes.length}个组织节点`);
                 });
               } else {
@@ -1647,11 +1741,10 @@ export default {
       });
     },
 
-    // 新增：移除树数据中的 parent 引用，避免子组件处理时形成循环
+    // 移除树数据中的 parent 引用，避免子组件处理时形成循环
     removeParentReferences(treeData) {
       if (!Array.isArray(treeData)) return;
       treeData.forEach(node => {
-        // 删除可能存在的 parent 引用（如果节点有此属性）
         if (node.parent) delete node.parent;
         // 递归处理子节点
         if (Array.isArray(node.orgChildrenList)) {
@@ -1686,7 +1779,6 @@ export default {
       return null;
     },
 
-    // 增强安全深拷贝，主动移除循环引用字段
     safeDeepCopy(obj, hash = new WeakMap()) {
       if (obj === null || typeof obj !== 'object') {
         return obj;
@@ -1715,15 +1807,12 @@ export default {
         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);
             }
           }
@@ -1735,9 +1824,9 @@ export default {
     },
 
     /**
-     * 查询单个节点的原生详情（适配后端接口，返回原生字段）
-     * @param {string} orgUnitId - 节点ID（如11510101）
-     * @returns {Promise<Object|null>} 原生节点详情（无数据返回null）
+     * 查询单个节点的原生详情
+     * @param {string} orgUnitId
+     * @returns {Promise<Object|null>}
      */
     getOrgNodeDetail(orgUnitId) {
       return new Promise((resolve) => {
@@ -1745,13 +1834,12 @@ export default {
           params: { orgUnitId: orgUnitId }
         }).then((res) => {
           if (res.data.code === 1 && res.data.data) {
-            // 仅保留原生树结构必需字段（过滤业务冗余字段）
             const { orgUnitId, parentOrgUnitId, orgNodeName, orgChildrenList } = res.data.data;
             resolve({
               orgUnitId,
               parentOrgUnitId,
               orgNodeName,
-              orgChildrenList: orgChildrenList || [] // 兼容接口返回空的情况
+              orgChildrenList: orgChildrenList || []
             });
           } else {
             resolve(null);
@@ -1764,7 +1852,7 @@ export default {
     },
 
     /**
-     * 迭代查找节点（替代递归，避免栈溢出）
+     * 迭代查找节点
      * @param {Array} treeData - 树形数据
      * @param {string} targetOrgUnitId - 目标节点ID
      * @returns {Object|null} 找到的节点
@@ -1777,7 +1865,6 @@ export default {
       const queue = [...treeData];
       while (queue.length > 0) {
         const currentNode = queue.shift();
-        // 兼容子组件可能的字段映射（orgUnitId可能存储在id字段）
         const nodeId = currentNode.orgUnitId || currentNode.id || '';
         if (nodeId === targetOrgUnitId) {
           return currentNode;
@@ -1866,6 +1953,256 @@ export default {
           this.updateTreeNodesStatus(children, expandIds, checkedIds);
         }
       });
+    },
+    // 组织选择（新）相关方法
+    async initOrgNewTree() {
+      try {
+        const res = await ajax.get('/pub-manage-server/pub/personHelpBox/q/getFullOrgUnitTree');
+        if (res.data.code === 1) {
+          // 直接使用返回的完整树形结构
+          const treeData = res.data.data || [];
+          // 处理树形数据，添加必要的字段
+          const processedTree = this.processOrgNewTree(treeData);
+          this.orgNewTree = this.safeDeepCopy(processedTree);
+        }
+      } catch (e) {
+        this.$Message.error("组织选择（新）树初始化失败！");
+        console.error(e);
+      }
+    },
+    buildOrgNewTree(items) {
+      const map = {};
+      const roots = [];
+      const copiedItems = this.safeDeepCopy(items);
+
+      copiedItems.forEach(item => {
+        if (!item.orgUnitId) return;
+        map[item.orgUnitId] = this.safeDeepCopy({
+          ...item,
+          orgChildrenList: [],
+          children: [],
+          title: item.orgUnitName || item.orgNodeName || item.name || `未命名组织(${item.orgUnitId || ''})`,
+          expand: false,
+          checked: false
+        });
+      });
+
+      copiedItems.forEach(item => {
+        if (!item.orgUnitId || !map[item.orgUnitId]) return;
+
+        const node = map[item.orgUnitId];
+        if (!item.parentOrgUnitId || !map[item.parentOrgUnitId]) {
+          node.expand = true;
+          roots.push(node);
+        } else {
+          const parent = map[item.parentOrgUnitId];
+          parent.orgChildrenList.push(node);
+          parent.children.push(node);
+          parent.leafNode = false;
+        }
+      });
+      return roots;
+    },
+    // 处理新接口返回的组织树数据
+    processOrgNewTree(treeData) {
+      if (!Array.isArray(treeData)) return [];
+
+      return treeData.map(node => {
+        // 添加必要的字段
+        const processedNode = {
+          ...node,
+          title: node.orgNodeName || node.orgUnitName || `未命名组织(${node.orgUnitId || ''})`,
+          expand: false,
+          checked: false,
+          orgChildrenList: node.children || []
+        };
+
+        // 递归处理子节点
+        if (processedNode.children && processedNode.children.length > 0) {
+          processedNode.children = this.processOrgNewTree(processedNode.children);
+          processedNode.expand = true; // 默认展开有子节点的节点
+        }
+
+        return processedNode;
+      });
+    },
+    searchOrgNew() {
+      // 搜索功能已通过计算属性实现，这里可以添加额外的逻辑
+    },
+    toggleProvinceExpand(province) {
+      // 只有有子节点时才允许展开/折叠
+      if (province.children && province.children.length > 0) {
+        province.expand = !province.expand;
+      }
+    },
+    toggleCityExpand(city) {
+      // 只有有子节点时才允许展开/折叠
+      if (city.children && city.children.length > 0) {
+        city.expand = !city.expand;
+      }
+    },
+    toggleDistrictExpand(district) {
+      // 只有有子节点时才允许展开/折叠
+      if (district.children && district.children.length > 0) {
+        district.expand = !district.expand;
+      }
+    },
+    selectAllProvinceOrgNew(province) {
+      // 全选并添加到已选择条件框，包含下级节点
+      this.addOrgNewItemWithChildren(province, true);
+    },
+    selectAllCityOrgNew(city) {
+      // 全选并添加到已选择条件框，包含下级节点
+      this.addOrgNewItemWithChildren(city, true);
+    },
+    selectAllCityLevelOrgNew(city) {
+      // 全选市本级并添加到已选择条件框，包含下级节点
+      if (city.children && city.children.length > 0) {
+        const cityLevel = city.children[0];
+        this.addOrgNewItemWithChildren(cityLevel, true);
+      }
+    },
+    selectAllDistrictOrgNew(district) {
+      // 全选并添加到已选择条件框，包含下级节点
+      this.addOrgNewItemWithChildren(district, true);
+    },
+    addOrgNewItemWithChildren(node, includeLevel) {
+      if (!node.orgUnitId) return this.$Message.error("组织节点无效！");
+
+      // 检查是否已存在
+      const id = includeLevel ? `01-${node.orgUnitId}` : `00-${node.orgUnitId}`;
+      const existingIndex = this.orgNewList.findIndex(item => item.id === id);
+      if (existingIndex > -1) {
+        this.$Message.warning(`【${node.title}】已在选择列表中`);
+        return;
+      }
+
+      // 创建组织条件项
+      const orgItem = {
+        ...node,
+        title: includeLevel ? `${node.title}（包含下级组织节点）` : node.title,
+        id: id,
+        includeLevel: includeLevel,
+        orgNodeName: node.orgNodeName || node.title
+      };
+
+      // 添加到已选择列表
+      this.orgNewList.push(orgItem);
+      this.$Message.success(`已添加【${orgItem.title}】`);
+    },
+    isProvinceAllSelected(province) {
+      if (!province.children || province.children.length === 0) return false;
+      return province.children.every(city => this.isCityAllSelected(city));
+    },
+    isCityAllSelected(city) {
+      if (!city.children || city.children.length === 0) return false;
+      return city.children.every(district => this.isDistrictAllSelected(district));
+    },
+    isCityLevelAllSelected(city) {
+      // 检查市本级是否全选
+      if (!city.children || city.children.length === 0) return false;
+      // 假设第一个子节点是市本级
+      const cityLevel = city.children[0];
+      return this.isDistrictAllSelected(cityLevel);
+    },
+    isDistrictAllSelected(district) {
+      if (!district.children || district.children.length === 0) return false;
+      return district.children.every(unit => unit.checked);
+    },
+    setProvinceChecked(province, checked) {
+      if (province.children) {
+        province.children.forEach(city => {
+          this.setCityChecked(city, checked);
+        });
+      }
+    },
+    setCityChecked(city, checked) {
+      if (city.children) {
+        city.children.forEach(district => {
+          this.setDistrictChecked(district, checked);
+        });
+      }
+    },
+    setCityLevelChecked(city, checked) {
+      if (city.children && city.children.length > 0) {
+        // 只设置市本级（第一个子节点）
+        const cityLevel = city.children[0];
+        this.setDistrictChecked(cityLevel, checked);
+      }
+    },
+    setDistrictChecked(district, checked) {
+      if (district.children) {
+        district.children.forEach(unit => {
+          unit.checked = checked;
+        });
+      }
+    },
+    handleOrgNewUnitChange(unit) {
+      // 处理组织单位选择变化
+      this.collectOrgNewCheckedUnits();
+    },
+    collectOrgNewCheckedUnits() {
+      this.proOrgNewList = [];
+      this.collectCheckedUnits(this.orgNewTree);
+    },
+    collectCheckedUnits(nodeList) {
+      if (!Array.isArray(nodeList)) return;
+      nodeList.forEach(node => {
+        if (node.checked) {
+          this.proOrgNewList.push({
+            ...node,
+            orgNodeName: node.orgNodeName || node.title || `未命名组织(${node.orgUnitId})`
+          });
+        }
+        if (node.children && node.children.length > 0) {
+          this.collectCheckedUnits(node.children);
+        }
+      });
+    },
+    expandAllOrgNew() {
+      this.setAllExpand(this.orgNewTree, true);
+    },
+    collapseAllOrgNew() {
+      this.setAllExpand(this.orgNewTree, false);
+    },
+    setAllExpand(nodeList, expand) {
+      if (!Array.isArray(nodeList)) return;
+      nodeList.forEach(node => {
+        node.expand = expand;
+        if (node.children && node.children.length > 0) {
+          this.setAllExpand(node.children, expand);
+        }
+      });
+    },
+    clearOrgNew() {
+      this.clearAllCheckedOrgNew(this.orgNewTree);
+      this.proOrgNewList = [];
+      this.orgNewSearch = '';
+    },
+    clearAllCheckedOrgNew(nodeList) {
+      if (!Array.isArray(nodeList)) return;
+      nodeList.forEach(node => {
+        node.checked = false;
+        if (node.children && node.children.length > 0) {
+          this.clearAllCheckedOrgNew(node.children);
+        }
+      });
+    },
+    addOrgNewItem(node) {
+      // 调用通用方法，不包含下级节点
+      this.addOrgNewItemWithChildren(node, false);
+    },
+    addOrgNewList() {
+      const validOrgList = this.proOrgNewList.filter(node => node.orgUnitId);
+      if (!validOrgList.length) return this.$Message.error("请先选择组织节点！");
+
+      validOrgList.forEach(node => {
+        this.addOrgNewItemWithChildren(node, false);
+      });
+
+      // 清空选中状态
+      this.clearAllCheckedOrgNew(this.orgNewTree);
+      this.proOrgNewList = [];
     }
 
   },
@@ -1877,7 +2214,43 @@ export default {
       let l1 = this.orgList.length?1:0;
       let l2 = this.postList.length?1:0;
       let l3 = this.staffList.length?1:0;
-      return l1+l2+l3
+      let l4 = this.orgNewList.length?1:0;
+      return l1+l2+l3+l4
+    },
+    filteredOrgNewTree() {
+      // 前端过滤，模糊匹配
+      const searchTerm = this.orgNewSearch.toLowerCase().trim();
+      if (!searchTerm) {
+        return this.orgNewTree;
+      }
+
+      // 递归过滤函数
+      const filterTree = (nodes) => {
+        return nodes.map(node => {
+          // 检查当前节点是否匹配
+          const isMatch = node.title.toLowerCase().includes(searchTerm);
+
+          // 递归过滤子节点
+          let filteredChildren = [];
+          if (node.children && node.children.length > 0) {
+            filteredChildren = filterTree(node.children);
+          }
+
+          // 如果当前节点匹配或有匹配的子节点，则保留该节点
+          if (isMatch || filteredChildren.length > 0) {
+            return {
+              ...node,
+              expand: true, // 自动展开匹配的节点
+              children: filteredChildren
+            };
+          }
+
+          // 不匹配且没有匹配的子节点，则过滤掉
+          return null;
+        }).filter(Boolean); // 过滤掉null值
+      };
+
+      return filterTree(this.orgNewTree);
     }
   },
   watch:{
@@ -1901,6 +2274,12 @@ export default {
         })
         this.postList = postList
         this.staffList = map.staffList || []
+        let orgNewList = map.orgNewList || []
+        orgNewList.forEach(item=>{
+          item.title = item.includeLevel?`${item.orgNodeName}（包含下级组织节点）`:item.orgNodeName
+          item.id = item.includeLevel?('01'+'-' + item.orgUnitId):('00'+'-'+item.orgUnitId)
+        })
+        this.orgNewList = orgNewList
       },
       deep: true,
       immediate: true,
@@ -2294,6 +2673,241 @@ export default {
   background-color: #f5f5f5;
 }
 
+/* 组织选择（新）样式 */
+.org-new-tab {
+  .org-new-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .org-new-actions {
+    display: flex;
+    gap: 10px;
+  }
+
+  .org-new-content {
+    max-height: 500px;
+    overflow-y: auto;
+    border: 1px solid #EAECF0;
+    border-radius: 4px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+
+  .org-card {
+    border: 1px solid #EAECF0;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    overflow: hidden;
+
+    .org-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      background-color: #f9fafb;
+      cursor: pointer;
+      border-bottom: 1px solid #EAECF0;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      .org-card-title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+      }
+
+      .org-card-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .ivu-btn-text {
+          color: #1890ff;
+          font-weight: 500;
+          transition: all 0.2s;
+
+          &:hover {
+            color: #40a9ff;
+            text-decoration: underline;
+            transform: translateY(-1px);
+          }
+
+          &:active {
+            color: #096dd9;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+
+    .org-card-body {
+      padding: 16px;
+    }
+  }
+
+  .city-card {
+    border: 1px solid #EAECF0;
+    border-radius: 4px;
+    margin-bottom: 12px;
+    overflow: hidden;
+
+    .city-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 14px;
+      background-color: #f9fafb;
+      cursor: pointer;
+      border-bottom: 1px solid #EAECF0;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      .city-card-title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+      }
+
+      .city-card-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .ivu-btn-text {
+          color: #1890ff;
+          font-weight: 500;
+          transition: all 0.2s;
+
+          &:hover {
+            color: #40a9ff;
+            text-decoration: underline;
+            transform: translateY(-1px);
+          }
+
+          &:active {
+            color: #096dd9;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+
+    .city-card-body {
+      padding: 14px;
+    }
+  }
+
+  .district-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 12px;
+  }
+
+  .district-item {
+    border: 1px solid #EAECF0;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .district-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 12px;
+      background-color: #f9fafb;
+      cursor: pointer;
+      border-bottom: 1px solid #EAECF0;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      .district-title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+      }
+
+      .district-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .ivu-btn-text {
+          color: #1890ff;
+          font-weight: 500;
+          transition: all 0.2s;
+
+          &:hover {
+            color: #40a9ff;
+            text-decoration: underline;
+            transform: translateY(-1px);
+          }
+
+          &:active {
+            color: #096dd9;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+
+    .district-body {
+      padding: 12px;
+    }
+  }
+
+  .org-unit-item {
+    margin-bottom: 8px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .unit-title {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+    cursor: pointer;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  .org-card-title,
+  .city-card-title,
+  .district-title {
+    cursor: pointer;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  .org-new-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  .include-level {
+    display: flex;
+    align-items: center;
+  }
+}
+
 .custom-select-wrapper {
   position: relative;
 

package/src/organize-tree.vue

@@ -201,7 +201,7 @@ export default {
     },
 
     async loadData(item, callback) {
-      // 核心修改：即使禁用懒加载，也允许加载已有子节点
+      // 即使禁用懒加载，也允许加载已有子节点
       if (this.disableLazyLoad) {
         let children = item.orgChildrenList || item.children || [];
         const formattedChildren = this.safeDeepCopy(children).map(child => ({
@@ -305,7 +305,7 @@ export default {
         return;
       }
 
-      // 单选逻辑强化：清空所有选中状态
+      // 单选，清空所有选中状态
       this.clearAllChecked(this.data);
 
       const targetList = this.isSingleSelect
@@ -412,34 +412,27 @@ export default {
       }
       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; // 默认展开已有子节点的节点
+            node.expand = true;
           }
         }
         return node;
@@ -509,18 +502,16 @@ export default {
             flex: 1,
             pointerEvents: 'none',
             userSelect: 'none',
-            // 新增：防止文字溢出导致的截断（可选，解决orgUnitId显示不全问题）
             whiteSpace: 'normal',
             wordWrap: 'break-word'
           }
-        }, nodeText) // 使用调整优先级后的节点文字
+        }, nodeText)
       ]);
     },
     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 = {
@@ -551,7 +542,6 @@ export default {
   watch: {
     'treeList': {
       handler(val) {
-        // 自定义树场景：直接使用父组件传递的树数据，不初始化旧接口
         if (this.isCustomTree || this.isDisableLazyLoad) {
           let tree = this.safeDeepCopy(val);
           this.initTree(tree);