address-book-shell 0.0.40 → 0.0.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "address-book-shell",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "private": false,
   "author": "houdajian@163.com",
   "main": "lib/address-book-shell.umd.js",

package/packages/address-book/src/components/address-aside.vue

@@ -125,6 +125,8 @@ export default {
       this.treeData = Object.freeze(res.nodes.children)
       // console.log(this.treeData, 'treeData')
       if (cb) {
+        console.log('this.currentNode', this.currentNode)
+
         this.$nextTick(() => {
           cb({ depId: this.currentNode })
         })
@@ -161,79 +163,91 @@ export default {
     },
     // 部门选择
     handleSelectDep(item) {
+      // 统一 depId 字段
       item.depId = item.depId || item.depid
-      //在这次选中节点之前被选中的节点
-      let lastNode = null
-      let currentNode = null
-      if (this.$refs.videoTree && this.$refs.videoTree.getCurrentNode()) {
-        lastNode = this.$refs.videoTree.getNode(this.$refs.videoTree.getCurrentNode())
-        //这次选中的节点
-        currentNode = this.$refs.videoTree.getNode(item.depId)
-      }
-      // console.log(lastNode, 'lastNode')
 
+      // 获取树组件实例
+      const tree = this.$refs.videoTree
+      if (!tree) return
+
+      // 获取当前节点
+      const currentNode = tree.getNode(item.depId)
       if (!currentNode) return
-      //收起之前因选中而展开的节点
-      if (lastNode) {
-        if (lastNode.level) {
-          let parentLevel
-          do {
-            lastNode.expanded = false
-            lastNode = lastNode.parent
-            parentLevel = lastNode.level
-          } while (parentLevel)
-        }
+
+      // 收起之前展开的节点
+      const lastNode = tree.getCurrentNode() && tree.getNode(tree.getCurrentNode())
+      if (lastNode && lastNode.level) {
+        let node = lastNode
+        do {
+          node.expanded = false
+          node = node.parent
+        } while (node && node.level)
       }
 
-      let currentNodeId = currentNode.data.itemTypeId
-      let parentLevel
-      let nodeIndex = 0 //当前选中节点在当前树的位置
-      //计算nodeCount和nodeIndex
-      do {
-        // 获取当前部门的父级部门数据
-        currentNode = currentNode.parent
-        // 保存父级部门level值
-        parentLevel = currentNode.level
-        let childNodes = currentNode.childNodes
+      // 计算节点位置
+      let nodeIndex = 0
+      let node = currentNode
+      let currentNodeId = node.data.itemTypeId
+
+      while (node.parent && node.parent.level) {
+        const parentNode = node.parent
+        const childNodes = parentNode.childNodes
+
         for (let i = 0; i < childNodes.length; i++) {
-          if (childNodes[i].data.itemTypeId == currentNodeId) {
-            // 计算当前选中的部门在其父部分的第几个
+          if (childNodes[i].data.itemTypeId === currentNodeId) {
             nodeIndex += i + 1
+            break
           }
         }
-        // 保存当前部门的部门id,用于查找其在父级部门第几个
-        currentNodeId = currentNode.data.itemTypeId
-      } while (parentLevel)
-      // 展开选中的节点
+
+        node = parentNode
+        currentNodeId = node.data.itemTypeId
+      }
+
+      // 展开并选中当前节点
       this.expandedKeys = [item.depId]
-      // 选中节点
-      this.$refs.videoTree.setCurrentKey(item.depId)
-      // 获取 侧边导航盒子高度
-      let scrollHeight = this.$refs['address-aside-scroll'].$el.offsetHeight
-      //一个节点的高度是35px
-      let nodeHight = 35
-      // 需要滚动的距离
-      console.log(nodeIndex, nodeHight)
-      this.setTop = nodeIndex * nodeHight - scrollHeight / 2
-      console.log(this.setTop, 'this.setTop')
-      if (8 < nodeIndex) {
-        this.setScrollheight(this.setTop, 500)
-      } else {
-        this.setScrollheight(0, 500)
+      tree.setCurrentKey(item.depId)
+
+      // 计算滚动位置并执行滚动
+      const addressAsideScroll = this.$refs['address-aside-scroll']
+      if (!addressAsideScroll || !addressAsideScroll.$el) return
+      const scrollContainer = addressAsideScroll.$el
+      if (scrollContainer) {
+        const scrollHeight = scrollContainer.offsetHeight
+        const nodeHeight = 35 // 节点高度
+        const scrollTop = nodeIndex * nodeHeight - scrollHeight / 2
+
+        if (nodeIndex > 8) {
+          this.setScrollheight(scrollTop, 500)
+        } else {
+          this.setScrollheight(0, 500)
+        }
       }
+
+      // 触发数据更新
       this.$emit('asideChange', item)
     },
 
     // 部门搜索清除
     clearSearchHandler() {
+      // 重置搜索状态
       this.depname = ''
       this.currentNode = ''
-      this.$refs.videoTree.setCurrentKey(this.currentNode)
-      const tree = this.$refs.videoTree.store.nodesMap
-      for (let key in tree) {
-        tree[key].expanded = false
+
+      // 重置树状态
+      const tree = this.$refs.videoTree
+      if (tree) {
+        tree.setCurrentKey(this.currentNode)
+
+        // 收起所有节点
+        if (tree.store && tree.store.nodesMap) {
+          Object.values(tree.store.nodesMap).forEach((node) => {
+            node.expanded = false
+          })
+        }
       }
-      // this.$emit('asideChange', null)
+
+      // 清空自动完成列表并通知父组件
       this.autocompleteCB([])
       this.$emit('asideChange', null)
     },

package/packages/address-book/src/components/address-content.vue

@@ -192,6 +192,7 @@ export default {
 
       myFriengInput: '',
       loadingTimer: null,
+      isAllSelected: false, // 是否全选
     }
   },
 
@@ -329,6 +330,9 @@ export default {
           item.hrId = item.hrId || ''
           item.avatar = item.userImage || ''
         })
+        if (this.isAllSelected) {
+          this.$emit('addSelectionList', data.detail)
+        }
       }
       table.loading = false
       if (initScrollTop) {
@@ -349,31 +353,31 @@ export default {
     },
     setDisableSelect() {
       const hasDisableData = this.selectDisabledlist.length
-      
+
       // 如果没有需要设置的条件，直接返回
       if (!this.disableLeaderSelection && !hasDisableData) {
         return
       }
-      
+
       // 创建禁用列表的 Map 以提高查找效率
-      const disabledMap = hasDisableData 
-        ? new Map(this.selectDisabledlist.map(item => [item.hrId, true]))
+      const disabledMap = hasDisableData
+        ? new Map(this.selectDisabledlist.map((item) => [item.hrId, true]))
         : new Map()
-      
+
       // 遍历数据并设置禁用状态
-      this.table.tableDataList.forEach(item => {
+      this.table.tableDataList.forEach((item) => {
         let shouldDisable = false
-        
+
         // 检查是否禁用领导
         if (this.disableLeaderSelection && (item.depid === 'D1' || item.depId === 'D1')) {
           shouldDisable = true
         }
-        
+
         // 检查是否在禁用列表中
         if (!shouldDisable && hasDisableData && disabledMap.has(item.hrId)) {
           shouldDisable = true
         }
-        
+
         // 只有状态发生变化时才更新，避免不必要的变更
         if (shouldDisable !== item.disable) {
           item.disable = shouldDisable
@@ -384,56 +388,40 @@ export default {
     recoverySelect(falg = false, item = null) {
       let data = this.table.tableDataList
       if (!item) {
-        // 如果不传item,比较费性能,不推荐
         this.emptySelect()
         this.$nextTick(() => {
-          // item为数组则表示恢复多个table勾选状态
-          let arr = this.selected
-          if (arr.length) {
-            arr.forEach((item) => {
-              // item.badge = item.badge || item.fdBadge
-              let hasArr = data.filter((it) => {
-                return item.hrId === it.hrId
-              })
-              if (hasArr.length) {
-                hasArr.forEach((i) => {
-                  this.toggleRowSelection(i, true)
-                })
-              }
-            })
-          }
+          if (!this.selected.length) return
+          const dataMap = new Map(data.map((row) => [row.hrId, row]))
+          this.selected.forEach((selectedItem) => {
+            const matchedRow = dataMap.get(selectedItem.hrId)
+            if (matchedRow) {
+              this.toggleRowSelection(matchedRow, true)
+            }
+          })
         })
       } else {
         // 有item 不用对比数据,直接恢复勾选,推荐
         // 传item必须传flag,true 勾选; false 取消勾选
-        return
-        // if (item?.constructor === Object) {
-        //     // item为对象,则表示恢复单个状态
-        //     item.badge = item.badge || item.fdBadge
-        //     for (let i = 0; i < data.length; i++) {
-        //         if (
-        //             item.badge === data[i].tagProfileCustomBadge ||
-        //             item.badge === data[i].badge
-        //         ) {
-        //             console.log(data[i], 'data[i]')
-        //             this.toggleRowSelection(data[i], falg, true)
-        //             break
-        //         }
-        //     }
-        // } else {
-        //     let hasArr = []
-        //     item.forEach((it) => {
-        //         let i = this.objectInArrayIndex(data, it, 'badge')
-        //         if (i > -1) {
-        //             hasArr.push(data[i])
-        //         }
-        //     })
-        //     if (hasArr.length) {
-        //         hasArr.forEach((i) => {
-        //             this.toggleRowSelection(i, falg, true)
-        //         })
-        //     }
-        // }
+        if (Array.isArray(item)) {
+          // item为数组,表示恢复多个状态
+          const dataMap = new Map(data.map((row) => [row.badge, row]))
+          item.forEach((it) => {
+            const badge = it.badge || it.fdBadge
+            const matchedRow = dataMap.get(badge)
+            if (matchedRow) {
+              this.toggleRowSelection(matchedRow, falg)
+            }
+          })
+        } else if (item && typeof item === 'object') {
+          // item为对象,表示恢复单个状态
+          const badge = item.badge || item.fdBadge
+          const matchedRow = data.find(
+            (row) => row.tagProfileCustomBadge === badge || row.badge === badge
+          )
+          if (matchedRow) {
+            this.toggleRowSelection(matchedRow, falg)
+          }
+        }
       }
     },
     // 清空勾选状态
@@ -441,35 +429,66 @@ export default {
       this.$refs.addressTable.clearSelection()
     },
     tableScroll() {
-      let table = this.table
-      let scrollTop = table.tableDom.scrollTop // 滚动距离
-      let scrollHeight = table.tableDom.scrollHeight //滚动条高度
-      let clientHeight = table.tableDom.clientHeight // table 高度
-      let isBottom = scrollHeight - scrollTop - clientHeight < 100 //( 滚动条高度 - 滚动距离 -  table 高度) = 0 则代表已经滚动到最底端
+      const table = this.table
+
+      // 边界检查
+      if (!table.tableDom || table.loading || table.flag) {
+        return
+      }
+
+      const scrollTop = table.tableDom.scrollTop // 滚动距离
+      const scrollHeight = table.tableDom.scrollHeight // 滚动条高度
+      const clientHeight = table.tableDom.clientHeight // table 高度
+      const isBottom = scrollHeight - scrollTop - clientHeight < 100 // 距离底部50px时触发
+
       if (isBottom) {
-        let height = table.currentPage * 48 * table.pageSize
-        console.log('scrollHeight888', scrollHeight, height)
-        // 这里就是如果是满载的情况下继续加载，直到当前页都不是满载情况下那就是最后一页即不请求数据
-        if (scrollHeight >= height) {
-          // 表示有数据传入了table
+        const tableDataLength = table.tableDataList.length
+        const targetLength = table.pageSize * table.currentPage
+
+        // 检查是否需要加载更多数据
+        if (tableDataLength >= targetLength) {
+          // 表示当前页数据已满，需要加载下一页
           table.flag = true
           table.currentPage++
-          this.recoverySelect()
           this.queryData()
         }
       }
     },
+    // 节流函数
+    throttle(func, delay) {
+      let timer = null
+      return function () {
+        if (!timer) {
+          timer = setTimeout(() => {
+            func.apply(this, arguments)
+            timer = null
+          }, delay)
+        }
+      }
+    },
+
     listenTableScroll() {
-      if (this.$refs.addressTable && this.$refs.addressTable.bodyWrapper) {
+      const tableDom = this.$refs.addressTable
+      if (tableDom) {
         let table = this.table
-        table.tableDom = this.$refs.addressTable.bodyWrapper
-        table.tableDom.addEventListener('scroll', this.tableScroll)
+        // 兼容不同版本的 Element UI DOM 结构
+        const bodyWrapper = tableDom.bodyWrapperScrollbar || tableDom.bodyWrapper
+
+        if (bodyWrapper) {
+          table.tableDom = bodyWrapper
+          // 使用节流处理滚动事件
+          this.tableScroll = this.throttle(this.tableScroll, 200)
+          table.tableDom.addEventListener('scroll', this.tableScroll)
+        } else {
+          console.warn('Could not find table scroll container')
+        }
       }
     },
     initScrollTop() {
       this.$nextTick(() => {
-        if (!this.table.tableDom) {
-          this.table.tableDom = this.$refs.addressTable.bodyWrapper
+        const tableDom = this.$refs.addressTable
+        if (!this.table.tableDom && tableDom) {
+          this.table.tableDom = tableDom.bodyWrapperScrollbar || tableDom.bodyWrapper
         }
         this.table.tableDom.scrollTop = 0
       })
@@ -485,35 +504,32 @@ export default {
     },
     //  动勾选数据行的 Checkbox 时触发
     select(selection, item) {
-      if(item.disable) return 
-      // console.log(selection, item, '动勾选数据行的 Checkbox 时触发')
+      if (item.disable) return
+      
       if (this.radio) {
-        // 单选
-        if (selection.length == 2) {
+        // 单选模式
+        if (selection.length >= 2) {
           this.$refs.addressTable.clearSelection()
-          this.$refs.addressTable.toggleRowSelection(selection[selection.length - 1]) //只显示选中最后一个 这时val还是多选的列表(就是你选中的几个数据)
+          if (selection.length === 2) {
+            this.$refs.addressTable.toggleRowSelection(selection[1])
+          }
         } else if (selection.length === 1) {
-          this.selection = [selection[selection.length - 1]]
-        } else if (selection.length > 2) {
-          this.$refs.addressTable.clearSelection()
+          this.selection = [selection[0]]
         }
       }
-      let isAdd = selection.findIndex((it) => it.hrId === item.hrId) > -1 ? true : false //是否为添加操作
-      if (isAdd) {
-        // 添加
-        this.$emit('addSelectionItem', item)
-        console.log('勾选数据', item)
-      } else {
-        // 删除操作
-        this.$emit('deleteSelectionItem', item)
-      }
+      
+      // 判断是添加还是删除操作
+      const isAdd = selection.some(it => it.hrId === item.hrId)
+      this.$emit(isAdd ? 'addSelectionItem' : 'deleteSelectionItem', item)
     },
     selectAll(selection) {
       if (selection.length) {
         // 全选
+        this.isAllSelected = true
         this.$emit('addSelectionList', selection)
       } else {
         // 全取消
+        this.resetAllSelected()
         let dataList = this.table.tableDataList
         this.$emit('deleteSelectionList', dataList)
       }
@@ -521,12 +537,9 @@ export default {
     // 手动修改选中状态
     toggleRowSelection(data, flag = true) {
       this.$nextTick(() => {
-        let i = this.table.tableDataList.findIndex((item) => {
-          return item.hrId === data.hrId
-        })
-        if (i > -1) {
-          // 如果删除的是当前显示的列表数据，直接在列表中取消勾选
-          this.$refs.addressTable.toggleRowSelection(this.table.tableDataList[i], flag)
+        const matchedRow = this.table.tableDataList.find(item => item.hrId === data.hrId)
+        if (matchedRow) {
+          this.$refs.addressTable.toggleRowSelection(matchedRow, flag)
         }
       })
     },
@@ -668,6 +681,9 @@ export default {
       this.searchInput.searchToTable = false
       this.queryData()
     },
+    resetAllSelected() {
+      this.isAllSelected = false
+    },
   },
   computed: {
     currentTypeList() {
@@ -704,6 +720,22 @@ export default {
         this.loadingTimer = null
       }
     },
+    'table.currentPage': {
+      handler(newVal) {
+        if (newVal === 1) {
+          console.log('当前页码', newVal)
+          this.resetAllSelected()
+        }
+      },
+    },
+    'table.depId': {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          console.log('部门id', newVal)
+          this.resetAllSelected()
+        }
+      },
+    },
   },
   destroyed() {
     this.table.tableDom.removeEventListener('scroll', this.tableScroll)
@@ -721,6 +753,9 @@ export default {
     &::before {
       height: 0;
     }
+    ::v-deep .el-scrollbar__wrap {
+      height: 100% !important;
+    }
   }
   height: 100%;
   width: 100%;

package/packages/address-book/src/index.vue

@@ -299,7 +299,7 @@
       </div>
 
       <div class="selected">
-        <templete v-if="!showOnlyNewPersonnels">
+        <template v-if="!showOnlyNewPersonnels">
           <AddreddGroup
             class="selected-list"
             :class="nameImport ? 'has-name-import' : ''"
@@ -315,7 +315,7 @@
           >
           </AddreddGroup>
           <span v-show="!selectedList.length" class="no-selected-data">还未进行选择</span>
-        </templete>
+        </template>
         <template v-else>
           <AddreddGroup
             class="selected-list"