vue2-client 1.16.33 → 1.16.35

package/package.json

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

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

@@ -211,11 +211,11 @@
         <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
       </span>
       <span v-else-if="item.slotType === 'progress'" :key="'progress-' + c_index">
-        <!-- websocket-id (配置名称-字段名称-用户id-页码-数据行id) -->
+        <!-- websocket-id (配置名称-字段名称-用户id-数据行id) -->
         <x-web-socket-progress
           v-if="item.webSocket"
           :key="`${tableContext.requestParameters?.pageNo || 1}-${item.dataIndex}-${record[tableContext.rowKey] || index}`"
-          :websocket-id="`${queryParamsName}-${item.dataIndex}-${currUser.id}-${tableContext.requestParameters?.pageNo || 1}-${record[tableContext.rowKey] || index}`"
+          :websocket-id="`${queryParamsName}-${item.dataIndex}-${currUser.id}-${record[tableContext.rowKey] || index}`"
           :initial-value="text || 0"
           @progress-updated="(data) => handleProgressUpdated(data, record, item.dataIndex)"
         />

package/src/base-client/components/common/XWebSocketProgress/README.md

@@ -3,7 +3,7 @@
 {
   "event": "16", // 进度数据, 取值 0~100
   "userList": [
-    "ceshiCRUD-t_f_operator_id-419879409793761282-1-18",// 数据webSocket 唯一标识 (配置名称-字段名称-用户id-页码-数据行id)
+    "ceshiCRUD-t_f_operator_id-419879409793761282-1-18",// 数据webSocket 唯一标识 (配置名称-字段名称-用户id-数据行id)
     "ceshiCRUD-t_f_type-419879409793761282-1-18",
     "ceshiCRUD-t_f_type-419879409793761282-1-19",
     "ceshiCRUD-t_f_type-419879409793761282-1-20",

package/src/base-client/components/common/XWebSocketProgress/index.vue

@@ -95,6 +95,14 @@ export default {
     initialValue (val) {
       const num = parseFloat(val)
       this.progressValue = isNaN(num) ? 0 : Math.max(0, Math.min(100, num))
+
+      // 如果新值 >= 100，断开现有连接
+      if (this.progressValue >= 100) {
+        this.cleanup()
+        this.connectionState.isConnected = false
+        this.connectionState.reconnectAttempts = 0
+        this.$emit('websocket-skipped', { reason: 'initial-value-complete' })
+      }
     },
     // 标识变更时，断开旧连接并按新标识重连
     websocketId (newId, oldId) {
@@ -118,6 +126,14 @@ export default {
         return
       }
 
+      // 如果初始值 >= 100，不建立连接
+      if (this.progressValue >= 100) {
+        this.connectionState.isConnected = false
+        this.connectionState.reconnectAttempts = 0
+        this.$emit('websocket-skipped', { reason: 'initial-value-complete' })
+        return
+      }
+
       this.websocketUrl = `ws:${window.location.host}/socket/af-system/sendMessage?userId=${this.websocketId}`
 
       const wsOptions = {
@@ -224,6 +240,15 @@ export default {
           value: this.progressValue,
           originalValue: value
         })
+
+        // 当进度 >= 100 时，关闭连接
+        if (this.progressValue >= 100) {
+          this.$emit('progress-completed', {
+            value: this.progressValue,
+            originalValue: value
+          })
+          this.cleanup()
+        }
       }
     },
 

package/src/base-client/components/common/XTable/README.md

@@ -1,243 +0,0 @@
-# XTable 表格组件使用指南
-
-## 进度组件使用
-
-XTable 支持两种类型的进度显示：
-
-1. **静态进度**: 使用 Ant Design 的 `a-progress` 组件显示静态进度值
-2. **实时进度**: 使用 `XWebSocketProgress` 组件通过 WebSocket 实时更新进度值
-
-### 1. 静态进度
-
-用于显示静态的进度值，不需要实时更新。
-
-```javascript
-// 表格列配置
-const columns = [
-  {
-    title: '任务名称',
-    dataIndex: 'taskName',
-    key: 'taskName'
-  },
-  {
-    title: '进度',
-    dataIndex: 'progress',
-    key: 'progress',
-    slotType: 'progress' // 使用静态进度组件
-  }
-]
-
-// 表格数据
-const tableData = [
-  {
-    taskName: '任务1',
-    progress: 75 // 显示 75% 进度
-  },
-  {
-    taskName: '任务2',
-    progress: 100 // 显示 100% 进度
-  }
-]
-```
-
-### 2. 实时进度
-
-用于实时更新进度值，通过 WebSocket 连接获取最新的进度信息。
-
-```javascript
-// 表格列配置
-const columns = [
-  {
-    title: '任务名称',
-    dataIndex: 'taskName',
-    key: 'taskName'
-  },
-  {
-    title: '进度',
-    dataIndex: 'progress',
-    key: 'progress',
-    slotType: 'progress',
-    websocketUrl: 'ws://localhost:8080/progress/task1', // WebSocket 连接地址
-    showConnectionStatus: true // 是否显示连接状态
-  }
-]
-
-// 表格数据
-const tableData = [
-  {
-    taskName: '实时任务1',
-    progress: 0 // 初始进度值
-  }
-]
-```
-
-### 3. 混合使用
-
-可以在同一个表格中混合使用两种进度显示：
-
-```javascript
-const columns = [
-  {
-    title: '任务名称',
-    dataIndex: 'taskName',
-    key: 'taskName'
-  },
-  {
-    title: '静态进度',
-    dataIndex: 'staticProgress',
-    key: 'staticProgress',
-    slotType: 'progress' // 使用静态进度
-  },
-  {
-    title: '实时进度',
-    dataIndex: 'realtimeProgress',
-    key: 'realtimeProgress',
-    slotType: 'progress',
-    websocketUrl: 'ws://localhost:8080/progress/realtime', // 使用实时进度
-    showConnectionStatus: true
-  }
-]
-```
-
-## WebSocket 消息格式
-
-WebSocket 进度组件支持以下消息格式：
-
-### 1. 标准格式
-
-```json
-{
-  "progress": 75
-}
-```
-
-### 2. 自定义字段名
-
-```json
-{
-  "percentage": 60
-}
-```
-
-### 3. 包含其他信息
-
-```json
-{
-  "progress": 50,
-  "message": "正在处理数据...",
-  "status": "processing"
-}
-```
-
-### 4. 纯数字
-
-```json
-80
-```
-
-## 事件处理
-
-WebSocket 进度组件会触发以下事件：
-
-```javascript
-// 在表格组件中监听进度更新事件
-methods: {
-  handleProgressUpdated(data, record, dataIndex) {
-    console.log('进度更新:', {
-      value: data.value,
-      record: record,
-      field: dataIndex
-    })
-  }
-}
-```
-
-## 完整示例
-
-```vue
-<template>
-  <x-table
-    :columns="columns"
-    :data="tableData"
-    @progress-updated="handleProgressUpdated"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      columns: [
-        {
-          title: '任务ID',
-          dataIndex: 'id',
-          key: 'id',
-          width: 80
-        },
-        {
-          title: '任务名称',
-          dataIndex: 'name',
-          key: 'name'
-        },
-        {
-          title: '静态进度',
-          dataIndex: 'staticProgress',
-          key: 'staticProgress',
-          slotType: 'progress'
-        },
-        {
-          title: '实时进度',
-          dataIndex: 'realtimeProgress',
-          key: 'realtimeProgress',
-          slotType: 'progress',
-          websocketUrl: 'ws://localhost:8080/progress',
-          showConnectionStatus: true,
-          progressField: 'percentage'
-        },
-        {
-          title: '状态',
-          dataIndex: 'status',
-          key: 'status',
-          width: 100
-        }
-      ],
-      tableData: [
-        {
-          id: 1,
-          name: '数据处理任务',
-          staticProgress: 100,
-          realtimeProgress: 0,
-          status: '进行中'
-        },
-        {
-          id: 2,
-          name: '文件上传任务',
-          staticProgress: 75,
-          realtimeProgress: 0,
-          status: '等待中'
-        }
-      ]
-    }
-  },
-  methods: {
-    handleProgressUpdated(data, record, dataIndex) {
-      // 更新表格数据
-      this.$set(record, dataIndex, data.value)
-      
-      // 可以在这里添加其他业务逻辑
-      if (data.value === 100) {
-        record.status = '已完成'
-      }
-    }
-  }
-}
-</script>
-```
-
-## 注意事项
-
-1. **WebSocket URL**: 确保 WebSocket 服务器地址正确且可访问
-2. **消息格式**: 确保服务器发送的消息格式符合组件要求
-3. **性能考虑**: 如果表格数据量大，建议只在需要实时更新的列使用 WebSocket 进度组件
-4. **错误处理**: WebSocket 连接失败时会自动重连，但建议监听错误事件
-5. **内存管理**: 组件销毁时会自动断开 WebSocket 连接