@sy-common/organize-select-help 1.0.0-beta.66 → 1.0.0-beta.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sy-common/organize-select-help",
-  "version": "1.0.0-beta.66",
+  "version": "1.0.0-beta.68",
   "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="primary" ghost @click="expandAllOrgNew">展开全部</Button>
+                    <Button type="primary" ghost @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 size="20" :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 size="20" :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 size="20" :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>
@@ -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))
     },
@@ -1859,6 +1953,280 @@ 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;
+        // 同步更新原始数据中的节点状态
+        this.updateOriginalNodeExpand(province);
+      }
+    },
+    toggleCityExpand(city) {
+      // 只有有子节点时才允许展开/折叠
+      if (city.children && city.children.length > 0) {
+        city.expand = !city.expand;
+        // 同步更新原始数据中的节点状态
+        this.updateOriginalNodeExpand(city);
+      }
+    },
+    toggleDistrictExpand(district) {
+      // 只有有子节点时才允许展开/折叠
+      if (district.children && district.children.length > 0) {
+        district.expand = !district.expand;
+        // 同步更新原始数据中的节点状态
+        this.updateOriginalNodeExpand(district);
+      }
+    },
+    updateOriginalNodeExpand(node) {
+      // 查找并更新原始数据中的节点状态
+      const findAndUpdate = (nodes) => {
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].orgUnitId === node.orgUnitId) {
+            nodes[i].expand = node.expand;
+            return true;
+          }
+          if (nodes[i].children && nodes[i].children.length > 0) {
+            if (findAndUpdate(nodes[i].children)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+      findAndUpdate(this.orgNewTree);
+    },
+    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 = [];
     }
 
   },
@@ -1870,7 +2238,44 @@ 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) {
+            // 创建一个新对象，保留原始节点的所有属性，包括expand状态
+            return {
+              ...node,
+              children: filteredChildren
+            };
+          }
+
+          // 不匹配且没有匹配的子节点，则过滤掉
+          return null;
+        }).filter(Boolean); // 过滤掉null值
+      };
+
+      // 直接使用原始树数据，不需要深拷贝
+      return filterTree(this.orgNewTree);
     }
   },
   watch:{
@@ -1894,6 +2299,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,
@@ -2287,6 +2698,244 @@ 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;
+      border-bottom: 1px solid #EAECF0;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      .org-card-title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        cursor: pointer;
+      }
+
+      .org-card-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .ivu-btn-text {
+          color: #1890ff;
+          font-weight: 500;
+          transition: all 0.2s;
+          cursor: pointer;
+
+          &: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;
+      border-bottom: 1px solid #EAECF0;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      .city-card-title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        cursor: pointer;
+      }
+
+      .city-card-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .ivu-btn-text {
+          color: #1890ff;
+          font-weight: 500;
+          transition: all 0.2s;
+          cursor: pointer;
+
+          &: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;
+      border-bottom: 1px solid #EAECF0;
+
+      &:hover {
+        background-color: #f3f4f6;
+      }
+
+      .district-title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        cursor: pointer;
+      }
+
+      .district-actions {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .ivu-btn-text {
+          color: #1890ff;
+          font-weight: 500;
+          transition: all 0.2s;
+          cursor: pointer;
+
+          &: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;