vue2-client 1.19.40 → 1.19.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.19.40",
+  "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,45 +1051,9 @@ export default {
         result.then(res => {
           this.totalCount = res.totalCount || 0
 
-          // 在数据加载完成后，立即检查并更新选中状态
+          // 数据加载完成后，恢复选中状态
           if (this.selectRowMode !== 'disabled' && !this.clearSelectRowAfterQuery) {
-            const primaryKeyName = this.primaryKey || this.rowKey
-            // 找出当前页中应该被选中的行
-            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)
-                // 更新总选中状态
-                if (currentPageSelectedRows.length > 0) {
-                  // 保留不在当前页面的已选中行
-                  const otherPageSelectedRows = this.selectedRows.filter(row =>
-                    !currentPageSelectedRows.some(currentRow =>
-                      currentRow[primaryKeyName] === row[primaryKeyName]
-                    )
-                  )
-                  // 合并当前页面和其他页面的选中行
-                  const rowsMap = new Map()
-                  // 先添加其他页面的行
-                  otherPageSelectedRows.forEach(row => {
-                    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('查询超时！')
@@ -1111,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
         // 获取主键数据
@@ -1130,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
@@ -1141,67 +1113,180 @@ export default {
         }
       }
     },
+
     /**
-     * 选择列数据改变事件
-     * @param currentPageSelectedKeys 被选择的列Key集合
-     * @param currentPageSelectedRows 被选择的列集合
+     * 【用户交互】选择列数据改变事件（用户手动勾选复选框时触发）
+     *
+     * 功能：处理用户勾选/取消勾选复选框的操作
+     *
+     * 逻辑：
+     * - 跨页模式(listView)：合并多页选中数据，保留其他页的选中状态
+     * - 单页模式：直接使用当前页选中数据，切换页面会清空选中
+     *
+     * @param {Array} currentPageSelectedKeys - 当前页被选中的行keys
+     * @param {Array} currentPageSelectedRows - 当前页被选中的行数据
      */
     onSelectChange (currentPageSelectedKeys, currentPageSelectedRows) {
-      if (this.selectRowMode === 'listView' && !this.clearSelectRowAfterQuery) {
-        const primaryKeyName = this.primaryKey || this.rowKey
-        if (primaryKeyName) {
-          // 获取当前页面所有行的key
-          const currentPageAllKeys = this.$refs.table.localDataSource.map(row => row[primaryKeyName])
-          // 1. 保留不在当前页的已选中keys，并去重
-          const otherPageSelectedKeys = [...new Set(this.selectedRowKeys.filter(key => !currentPageAllKeys.includes(key)))]
-          console.log('其他页的keys', otherPageSelectedKeys)
-          // 2. 添加当前页新选中的keys，并去重
-          this.selectedRowKeys = [...new Set([...otherPageSelectedKeys, ...currentPageSelectedKeys])]
-          console.log('onSelectChange - updated selectedRowKeys:', this.selectedRowKeys)
-          // 更新总的 selectedRows
-          // 1. 保留不在当前页的已选中行，并去重
-          const otherPageSelectedRows = this.selectedRows.filter(row =>
-            !currentPageAllKeys.includes(row[primaryKeyName])
-          )
-          // 2. 合并结果，使用 Map 去重
-          const rowsMap = new Map()
-          // 先添加其他页面的行
-          otherPageSelectedRows.forEach(row => {
-            rowsMap.set(row[primaryKeyName], row)
-          })
-          // 再添加当前页面的行（会覆盖重复的）
-          currentPageSelectedRows.forEach(row => {
-            rowsMap.set(row[primaryKeyName], row)
-          })
-          this.selectedRows = Array.from(rowsMap.values())
-          console.log('onSelectChange - updated selectedRows:', this.selectedRows)
-        } else {
-          // 如果没有主键，则直接使用当前选中的行（此情况可能无法跨页选中，但为了兼容保留）
-          this.selectedRowKeys = currentPageSelectedKeys
-          this.selectedRows = currentPageSelectedRows
-        }
+      // 跨页选中模式：需要合并多页数据
+      if (this.isMultiPageSelectionEnabled) {
+        this.mergeMultiPageSelection(currentPageSelectedRows)
       } else {
-        // 非 listView 模式或 clearSelectRowAfterQuery 为 true，直接使用当前页的选中状态作为总状态
+        // 单页选中模式：直接使用当前页数据
         this.selectedRowKeys = currentPageSelectedKeys
         this.selectedRows = currentPageSelectedRows
       }
 
-      // 更新内部状态和表格显示
+      // 同步内部状态并更新UI
+      this.syncSelectionState(currentPageSelectedKeys, currentPageSelectedRows)
+    },
+
+    /**
+     * 【跨页选中】合并多页选中数据（核心合并逻辑）
+     *
+     * 功能：在跨页选中模式下，合并当前页和其他页的选中数据
+     *
+     * 逻辑：
+     * 1. 获取当前页所有行的keys
+     * 2. 保留不在当前页的已选中行（其他页的选中数据）
+     * 3. 添加当前页的选中行（覆盖重复项，确保数据最新）
+     * 4. 使用 Map 去重，key为主键，value为行数据
+     *
+     * 结果：
+     * - selectedRowKeys: 所有页面选中的keys
+     * - selectedRows: 所有页面选中的行数据
+     *
+     * @param {Array} currentPageSelectedRows - 当前页被选中的行数据
+     */
+    mergeMultiPageSelection (currentPageSelectedRows) {
+      const primaryKeyName = this.primaryKey || this.rowKey
+      const currentPageAllKeys = this.$refs.table.localDataSource.map(row => row[primaryKeyName])
+
+      // 使用 Map 统一处理 keys 和 rows 的合并
+      const rowsMap = new Map()
+
+      // 1. 保留其他页的选中行
+      this.selectedRows.forEach(row => {
+        if (!currentPageAllKeys.includes(row[primaryKeyName])) {
+          rowsMap.set(row[primaryKeyName], row)
+        }
+      })
+
+      // 2. 添加当前页的选中行（覆盖重复项）
+      currentPageSelectedRows.forEach(row => {
+        rowsMap.set(row[primaryKeyName], row)
+      })
+
+      // 3. 更新结果
+      this.selectedRows = Array.from(rowsMap.values())
+      this.selectedRowKeys = Array.from(rowsMap.keys())
+    },
+
+    /**
+     * 【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
 
-      // 确保在DOM更新后调用 updateSelect，以正确反映当前页的选中状态
+      // 更新表格显示
       this.$nextTick(() => {
-        this.$refs.table.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
+        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.selectedRowKeys.length === this.allowSelectRowNum
+      this.isChoose = this.allowSelectRowNum === 0
+        ? this.selectedRowKeys.length > 0
+        : this.selectedRowKeys.length === this.allowSelectRowNum
+    },
 
-      // 触发选择事件，传递总的选中数据
-      this.$emit('selectRow', this.selectedRowKeys, this.selectedRows)
+    /**
+     * 【清空选中】清空所有选中状态
+     *
+     * 功能：清空全局和当前页的选中状态
+     *
+     * 使用场景：
+     * - 删除操作成功后
+     * - 需要重置选中状态时
+     */
+    clearSelection () {
+      this.selectedRowKeys = []
+      this.selectedRows = []
+      this.innerSelectedRowKeys = []
+      this.innerSelectedRows = []
     },
     /**
      * 清除表格选中项
@@ -1435,6 +1520,8 @@ export default {
               this.localEditModeDataSource = this.getLocalData().filter(item => !this.selectedRowKeys.includes(item[this.rowKey]))
               resolve(200)
               this.$message.success('删除成功！')
+              // 清空选中状态
+              this.clearSelection()
               this.refresh(true)
               // afterDelete
               this.$emit('afterDelete', requestParameters)
@@ -1444,6 +1531,8 @@ export default {
               remove(requestParameters, this.serviceName, this.env === 'dev').then(res => {
                 resolve(res)
                 this.$message.success('删除成功！')
+                // 清空选中状态
+                this.clearSelection()
                 this.refresh(true)
                 // afterDelete
                 this.$emit('afterDelete', requestParameters)
@@ -1608,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) {
         // 等待数据加载完成后再处理
@@ -1636,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
+      const currentPageSelectedKeys = currentPageSelectedRows.map(row => row[primaryKeyName])
 
-      // 更新表格选中状态
-      if (this.selectRowMode !== 'disabled' && !this.clearSelectRowAfterQuery) {
-        this.$refs.table.updateSelect(this.innerSelectedRowKeys, this.innerSelectedRows)
-      }
-
-      // 更新按钮状态
-      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)
     },
     /**
      * 处理进度更新事件