vue2-client 1.19.41 → 1.19.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.19.41",
+  "version": "1.19.42",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XTable/XTable.vue

@@ -590,7 +590,17 @@ export default {
       }
     },
     ...mapState('account', { currUser: 'user', curRoles: 'roles', curPermissions: 'permissions' }),
-    ...mapState('setting', ['compatible'])
+    ...mapState('setting', ['compatible']),
+
+    /**
+     * 是否启用跨页选中模式
+     * 条件：selectRowMode 为 listView 且不在查询后清空选中 且有主键
+     */
+    isMultiPageSelectionEnabled () {
+      return this.selectRowMode === 'listView'
+        && !this.clearSelectRowAfterQuery
+        && (this.primaryKey || this.rowKey)
+    }
   },
   watch: {
     pageMaxSize: {
@@ -1041,42 +1051,9 @@ export default {
         result.then(res => {
           this.totalCount = res.totalCount || 0
 
-          // 查询后保留跨页选中行的相关逻辑
+          // 数据加载完成后，恢复选中状态
           if (this.selectRowMode !== 'disabled' && !this.clearSelectRowAfterQuery) {
-            const primaryKeyName = this.primaryKey || this.rowKey
-            // 获取当前页所有行的key
-            const currentPageKeys = res.data.map(row => row[primaryKeyName])
-            // 找出当前页中应该被选中的行
-            const currentPageSelectedRows = res.data.filter(row =>
-              this.selectedRowKeys.includes(row[primaryKeyName])
-            )
-
-            this.$nextTick(() => {
-              // 更新当前页选中状态
-              this.innerSelectedRowKeys = currentPageSelectedRows.map(row => row[primaryKeyName])
-              this.innerSelectedRows = currentPageSelectedRows
-
-              if (this.$refs.table) {
-                this.$refs.table.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
-
-                // 合并跨页选中数据：保留其他页 + 当前页最新数据
-                const rowsMap = new Map()
-                // 先保留其他页的选中行
-                this.selectedRows.forEach(row => {
-                  if (!currentPageKeys.includes(row[primaryKeyName])) {
-                    rowsMap.set(row[primaryKeyName], row)
-                  }
-                })
-                // 再添加当前页的选中行（覆盖重复项，确保数据最新）
-                currentPageSelectedRows.forEach(row => {
-                  rowsMap.set(row[primaryKeyName], row)
-                })
-                this.selectedRows = Array.from(rowsMap.values())
-
-                // 触发选择事件
-                this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
-              }
-            })
+            this.restoreSelectionAfterQuery(res.data)
           }
         }).catch(() => {
           this.$message.error('查询超时！')
@@ -1108,7 +1085,6 @@ export default {
      * @param nativeEvent 原生事件
      */
     onSelect (record, selected, selectedRows, nativeEvent) {
-      console.log('onSelect', record, selected, selectedRows)
       if (this.selectRowMode === 'listView') {
         const primaryKeyName = this.primaryKey || this.rowKey
         // 获取主键数据
@@ -1127,7 +1103,6 @@ export default {
      * @param changeRows 改变的行集合
      */
     onSelectAll (selected, selectedRows, changeRows) {
-      console.log('onSelectAll', selected, selectedRows, changeRows)
       if (this.selectRowMode === 'listView') {
         if (!selected) {
           const primaryKeyName = this.primaryKey || this.rowKey
@@ -1138,41 +1113,51 @@ export default {
         }
       }
     },
+
     /**
-     * 选择列数据改变事件
-     * @param currentPageSelectedKeys 被选择的列Key集合
-     * @param currentPageSelectedRows 被选择的列集合
+     * 【用户交互】选择列数据改变事件（用户手动勾选复选框时触发）
+     *
+     * 功能：处理用户勾选/取消勾选复选框的操作
+     *
+     * 逻辑：
+     * - 跨页模式(listView)：合并多页选中数据，保留其他页的选中状态
+     * - 单页模式：直接使用当前页选中数据，切换页面会清空选中
+     *
+     * @param {Array} currentPageSelectedKeys - 当前页被选中的行keys
+     * @param {Array} currentPageSelectedRows - 当前页被选中的行数据
      */
     onSelectChange (currentPageSelectedKeys, currentPageSelectedRows) {
       // 跨页选中模式：需要合并多页数据
-      if (this.selectRowMode === 'listView' && !this.clearSelectRowAfterQuery && (this.primaryKey || this.rowKey)) {
-        this.mergeMultiPageSelection(currentPageSelectedKeys, currentPageSelectedRows)
+      if (this.isMultiPageSelectionEnabled) {
+        this.mergeMultiPageSelection(currentPageSelectedRows)
       } else {
         // 单页选中模式：直接使用当前页数据
         this.selectedRowKeys = currentPageSelectedKeys
         this.selectedRows = currentPageSelectedRows
       }
 
-      // 更新当前页选中状态
-      this.innerSelectedRowKeys = currentPageSelectedKeys
-      this.innerSelectedRows = currentPageSelectedRows
-
-      // 更新表格显示
-      this.$nextTick(() => {
-        this.$refs.table?.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
-      })
-
-      // 更新按钮状态
-      this.updateButtonState()
-
-      // 触发选择事件
-      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
+      // 同步内部状态并更新UI
+      this.syncSelectionState(currentPageSelectedKeys, currentPageSelectedRows)
     },
 
     /**
-     * 合并多页选中数据
+     * 【跨页选中】合并多页选中数据（核心合并逻辑）
+     *
+     * 功能：在跨页选中模式下，合并当前页和其他页的选中数据
+     *
+     * 逻辑：
+     * 1. 获取当前页所有行的keys
+     * 2. 保留不在当前页的已选中行（其他页的选中数据）
+     * 3. 添加当前页的选中行（覆盖重复项，确保数据最新）
+     * 4. 使用 Map 去重，key为主键，value为行数据
+     *
+     * 结果：
+     * - selectedRowKeys: 所有页面选中的keys
+     * - selectedRows: 所有页面选中的行数据
+     *
+     * @param {Array} currentPageSelectedRows - 当前页被选中的行数据
      */
-    mergeMultiPageSelection (currentPageSelectedKeys, currentPageSelectedRows) {
+    mergeMultiPageSelection (currentPageSelectedRows) {
       const primaryKeyName = this.primaryKey || this.rowKey
       const currentPageAllKeys = this.$refs.table.localDataSource.map(row => row[primaryKeyName])
 
@@ -1197,15 +1182,112 @@ export default {
     },
 
     /**
-     * 更新按钮状态
+     * 【UI同步】同步选中状态到UI（内部公共方法）
+     *
+     * 功能：统一处理选中状态的UI更新逻辑
+     *
+     * 执行步骤：
+     * 1. 更新当前页选中状态（innerSelectedRowKeys/innerSelectedRows）
+     * 2. 更新表格复选框显示
+     * 3. 更新按钮状态（修改/删除/选择按钮的启用/禁用）
+     * 4. 触发选择事件，通知父组件
+     *
+     * 调用场景：
+     * - onSelectChange: 用户勾选复选框后
+     * - restoreSelectionAfterQuery: 数据加载后恢复选中状态
+     * - doUpdateTableSelection: 外部传入keys更新选中状态
+     *
+     * @param {Array} currentPageSelectedKeys - 当前页被选中的行keys
+     * @param {Array} currentPageSelectedRows - 当前页被选中的行数据
+     */
+    syncSelectionState (currentPageSelectedKeys, currentPageSelectedRows) {
+      // 更新当前页选中状态
+      this.innerSelectedRowKeys = currentPageSelectedKeys
+      this.innerSelectedRows = currentPageSelectedRows
+
+      // 更新表格显示
+      this.$nextTick(() => {
+        this.$refs.table?.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
+      })
+
+      // 更新按钮状态
+      this.updateButtonState()
+
+      // 触发选择事件
+      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
+    },
+
+    /**
+     * 【数据加载】数据加载后恢复选中状态
+     *
+     * 功能：在表格数据重新加载后，恢复之前的选中状态
+     *
+     * 使用场景：
+     * - 翻页后，恢复当前页应该被选中的行
+     * - 刷新数据后，保持选中状态不丢失
+     *
+     * 逻辑：
+     * 1. 从新加载的数据中，筛选出应该被选中的行（根据 selectedRowKeys）
+     * 2. 合并跨页选中数据（复用 mergeMultiPageSelection）
+     * 3. 同步UI状态
+     *
+     * @param {Array} currentPageData - 当前页加载的数据
+     */
+    restoreSelectionAfterQuery (currentPageData) {
+      const primaryKeyName = this.primaryKey || this.rowKey
+
+      // 找出当前页中应该被选中的行
+      const currentPageSelectedRows = currentPageData.filter(row =>
+        this.selectedRowKeys.includes(row[primaryKeyName])
+      )
+      const currentPageSelectedKeys = currentPageSelectedRows.map(row => row[primaryKeyName])
+
+      this.$nextTick(() => {
+        if (!this.$refs.table) return
+
+        // 合并跨页选中数据（复用合并逻辑）
+        this.mergeMultiPageSelection(currentPageSelectedRows)
+
+        // 同步UI状态
+        this.syncSelectionState(currentPageSelectedKeys, currentPageSelectedRows)
+      })
+    },
+
+    /**
+     * 【按钮状态】更新按钮状态
+     *
+     * 功能：根据选中数量，更新操作按钮的启用/禁用状态
+     *
+     * 按钮规则：
+     * - isModify: 修改按钮，仅选中1条时启用
+     * - isDelete: 删除按钮，选中至少1条时启用
+     * - isChoose: 选择按钮，根据 allowSelectRowNum 配置判断
+     *   - allowSelectRowNum = 0: 选中任意数量即可
+     *   - allowSelectRowNum > 0: 必须选中指定数量
      */
     updateButtonState () {
       this.isModify = this.selectedRowKeys.length === 1
       this.isDelete = this.selectedRowKeys.length > 0
-      this.isChoose = this.allowSelectRowNum === 0 
-        ? this.selectedRowKeys.length > 0 
+      this.isChoose = this.allowSelectRowNum === 0
+        ? this.selectedRowKeys.length > 0
         : this.selectedRowKeys.length === this.allowSelectRowNum
     },
+
+    /**
+     * 【清空选中】清空所有选中状态
+     *
+     * 功能：清空全局和当前页的选中状态
+     *
+     * 使用场景：
+     * - 删除操作成功后
+     * - 需要重置选中状态时
+     */
+    clearSelection () {
+      this.selectedRowKeys = []
+      this.selectedRows = []
+      this.innerSelectedRowKeys = []
+      this.innerSelectedRows = []
+    },
     /**
      * 清除表格选中项
      */
@@ -1439,10 +1521,7 @@ export default {
               resolve(200)
               this.$message.success('删除成功！')
               // 清空选中状态
-              this.selectedRowKeys = []
-              this.selectedRows = []
-              this.innerSelectedRowKeys = []
-              this.innerSelectedRows = []
+              this.clearSelection()
               this.refresh(true)
               // afterDelete
               this.$emit('afterDelete', requestParameters)
@@ -1453,10 +1532,7 @@ export default {
                 resolve(res)
                 this.$message.success('删除成功！')
                 // 清空选中状态
-                this.selectedRowKeys = []
-                this.selectedRows = []
-                this.innerSelectedRowKeys = []
-                this.innerSelectedRows = []
+                this.clearSelection()
                 this.refresh(true)
                 // afterDelete
                 this.$emit('afterDelete', requestParameters)
@@ -1621,13 +1697,11 @@ export default {
     onExpand (expanded, record) {
       this.$emit('expand', expanded, record)
     },
-    // 添加新方法处理表格选中状态
+    // 添加新方法处理表格选中状态（外部调用）
     updateTableSelection (selectedKeys) {
-      console.log('selectedKeys', selectedKeys)
       if (!this.$refs.table) {
         return
       }
-
       // 检查数据是否已加载
       if (!this.$refs.table.localDataSource || this.$refs.table.localDataSource.length === 0) {
         // 等待数据加载完成后再处理
@@ -1649,30 +1723,18 @@ export default {
     doUpdateTableSelection (selectedKeys) {
       const primaryKeyName = this.primaryKey || this.rowKey
 
-      // 更新内部选中状态
-      this.selectedRowKeys = [...selectedKeys]
-      this.innerSelectedRowKeys = this.$refs.table.localDataSource
-        .filter(row => selectedKeys.includes(row[primaryKeyName]))
-        .map(row => row[primaryKeyName])
-
-      // 更新选中行数据
-      this.selectedRows = this.$refs.table.localDataSource.filter(row =>
+      // 从当前页数据中筛选出应该被选中的行
+      const currentPageSelectedRows = this.$refs.table.localDataSource.filter(row =>
         selectedKeys.includes(row[primaryKeyName])
       )
-      this.innerSelectedRows = this.selectedRows
-
-      // 更新表格选中状态
-      if (this.selectRowMode !== 'disabled' && !this.clearSelectRowAfterQuery) {
-        this.$refs.table.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
-      }
+      const currentPageSelectedKeys = currentPageSelectedRows.map(row => row[primaryKeyName])
 
-      // 更新按钮状态
-      this.isModify = this.selectedRowKeys.length === 1
-      this.isDelete = this.selectedRowKeys.length > 0
-      this.isChoose = this.allowSelectRowNum === 0 ? this.selectedRowKeys.length > 0 : this.selectedRowKeys.length === this.allowSelectRowNum
+      // 更新总选中状态（外部传入的keys）
+      this.selectedRowKeys = [...selectedKeys]
+      this.selectedRows = currentPageSelectedRows
 
-      // 触发选择事件
-      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
+      // 同步内部状态并更新UI（复用方法）
+      this.syncSelectionState(currentPageSelectedKeys, currentPageSelectedRows)
     },
     /**
      * 处理进度更新事件