npm - vue2-client - Versions diffs - 1.16.32 → 1.16.33 - Mend

vue2-client 1.16.32 → 1.16.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/package.json +112 -112
package/src/base-client/components/common/XFormTable/demo.vue +7 -45
package/src/base-client/components/common/XReport/print.js +186 -186
package/src/base-client/components/common/XTable/README.md +243 -0
package/src/base-client/components/common/XTable/XTable.vue +1 -0
package/src/base-client/components/common/XTable/XTableWrapper.vue +35 -2
package/src/base-client/components/common/XWebSocketProgress/README.md +14 -0
package/src/base-client/components/common/XWebSocketProgress/index.vue +252 -0
package/src/base-client/components/his/XHisEditor/XHisEditor.vue +705 -700
package/src/base-client/components/his/threeTestOrders/editor.vue +113 -113
package/src/router/async/router.map.js +129 -129
package/src/utils/map-utils.js +47 -47
package/src/utils/websocket/README.md +224 -0
package/src/utils/websocket/websocket.js +241 -0
package/vue.config.js +6 -0

package/src/base-client/components/common/XReport/print.js CHANGED Viewed

@@ -1,186 +1,186 @@
-// print.js
-export function printElement (elementToPrint) {
-  // 创建一个新的浏览器窗口
-  const printWindow = window.open('', '_blank', 'height=1024,width=768')
-  // 设置新窗口的文档内容
-  printWindow.document.write(`
-    <html>
-      <head>
-        <title>Print</title>
-        <style>
-          @page {
-            size: auto;
-            margin: 0mm;
-          }
-          html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-          }
-          #print-container {
-            display: none
-          }
-          .img{
-            width: 95%;
-            height: 180px;
-            object-fit: cover;
-          }
-          .reportMain {
-            text-align: center;
-            margin: 0 auto;
-            font-size: 16px;
-            color: #000;
-            background-color: #fff;
-            padding: 15px;
-            border-radius: 8px;
-            .reportTitle {
-              font-weight: bold;
-            }
-            .subTitle {
-              display: flex;
-              justify-content: space-between;
-              margin-bottom: 1%;
-              .subTitleItems {
-                max-width: 30%;
-              }
-            }
-            .inputsDiv {
-              display: flex;
-              justify-content: space-between;
-              .inputsDivItem {
-                display: flex;
-                align-items: center;
-                padding: 0 4px;
-                white-space: nowrap;
-                .inputsDivItemLabel {
-                  padding: 0 4px;
-                }
-              }
-            }
-            .reportTable {
-              width: 100%;
-              border-collapse: collapse;
-              table-layout:fixed;
-              word-break:break-all;
-              text-align: center;
-            }
-          }
-          .reportMainForDisplay {
-            text-align: center;
-            margin: 10% auto;
-            font-size: 16px;
-            color: #000;
-            background-color: #fff;
-            padding: 15px;
-            border-radius: 8px;
-            .reportTitle {
-              font-weight: bold;
-            }
-            .subTitle {
-              display: flex;
-              justify-content: space-between;
-              .subTitleItems {
-                max-width: 30%;
-              }
-            }
-            .inputsDiv {
-              display: flex;
-              justify-content: space-around;
-              .inputsDivItem {
-                display: flex;
-                align-items: center;
-                padding: 0 4px;
-                white-space: nowrap;
-                .inputsDivItemLabel {
-                  padding: 0 4px;
-                }
-              }
-            }
-            .reportTable {
-              width: 100%;
-              border-collapse: collapse;
-              table-layout:fixed;
-              word-break:break-all;
-            }
-          }
-          .reportMainNoPadding {
-            text-align: center;
-            margin: 0 auto;
-            font-size: 16px;
-            color: #000;
-            background-color: #fff;
-            border-radius: 8px;
-            .reportTitle {
-              font-weight: bold;
-            }
-            .subTitle {
-              display: flex;
-              justify-content: space-between;
-              .subTitleItems {
-                max-width: 30%;
-              }
-            }
-            .inputsDiv {
-              display: flex;
-              justify-content: space-between;
-              .inputsDivItem {
-                display: flex;
-                align-items: center;
-                padding: 0 4px;
-                white-space: nowrap;
-                .inputsDivItemLabel {
-                  padding: 0 4px;
-                }
-              }
-            }
-            .reportTable {
-              width: 100%;
-              border-collapse: collapse;
-              table-layout:fixed;
-              word-break:break-all;
-            }
-          }
-          .tools{
-            position: fixed;
-            right: 2%;
-            text-align: right;
-            width: 60%;
-            cursor: pointer;
-            .toolsItem{
-              width: 15%;
-              margin-right: 3%;
-              display: inline-block;
-            }
-          }
-        </style>
-      </head>
-      <body>
-        <!-- 将需要打印的元素内容复制到新窗口中 -->
-        ${elementToPrint.innerHTML}
-      </body>
-    </html>
-  `)
-  // 延迟执行打印，以确保新窗口的内容已加载完成
-  printWindow.document.close() // 关闭文档流，确保内容完全加载
-  setTimeout(() => {
-    printWindow.print() // 调用打印方法
-    printWindow.close()
-  }, 500) // 延迟500毫秒后执行打印
-}
+// print.js
+export function printElement (elementToPrint) {
+  // 创建一个新的浏览器窗口
+  const printWindow = window.open('', '_blank', 'height=1024,width=768')
+  // 设置新窗口的文档内容
+  printWindow.document.write(`
+    <html>
+      <head>
+        <title>Print</title>
+        <style>
+          @page {
+            size: auto;
+            margin: 0mm;
+          }
+          html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+          }
+          #print-container {
+            display: none
+          }
+          .img{
+            width: 95%;
+            height: 180px;
+            object-fit: cover;
+          }
+          .reportMain {
+            text-align: center;
+            margin: 0 auto;
+            font-size: 16px;
+            color: #000;
+            background-color: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            .reportTitle {
+              font-weight: bold;
+            }
+            .subTitle {
+              display: flex;
+              justify-content: space-between;
+              margin-bottom: 1%;
+              .subTitleItems {
+                max-width: 30%;
+              }
+            }
+            .inputsDiv {
+              display: flex;
+              justify-content: space-between;
+              .inputsDivItem {
+                display: flex;
+                align-items: center;
+                padding: 0 4px;
+                white-space: nowrap;
+                .inputsDivItemLabel {
+                  padding: 0 4px;
+                }
+              }
+            }
+            .reportTable {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout:fixed;
+              word-break:break-all;
+              text-align: center;
+            }
+          }
+          .reportMainForDisplay {
+            text-align: center;
+            margin: 10% auto;
+            font-size: 16px;
+            color: #000;
+            background-color: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            .reportTitle {
+              font-weight: bold;
+            }
+            .subTitle {
+              display: flex;
+              justify-content: space-between;
+              .subTitleItems {
+                max-width: 30%;
+              }
+            }
+            .inputsDiv {
+              display: flex;
+              justify-content: space-around;
+              .inputsDivItem {
+                display: flex;
+                align-items: center;
+                padding: 0 4px;
+                white-space: nowrap;
+                .inputsDivItemLabel {
+                  padding: 0 4px;
+                }
+              }
+            }
+            .reportTable {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout:fixed;
+              word-break:break-all;
+            }
+          }
+          .reportMainNoPadding {
+            text-align: center;
+            margin: 0 auto;
+            font-size: 16px;
+            color: #000;
+            background-color: #fff;
+            border-radius: 8px;
+            .reportTitle {
+              font-weight: bold;
+            }
+            .subTitle {
+              display: flex;
+              justify-content: space-between;
+              .subTitleItems {
+                max-width: 30%;
+              }
+            }
+            .inputsDiv {
+              display: flex;
+              justify-content: space-between;
+              .inputsDivItem {
+                display: flex;
+                align-items: center;
+                padding: 0 4px;
+                white-space: nowrap;
+                .inputsDivItemLabel {
+                  padding: 0 4px;
+                }
+              }
+            }
+            .reportTable {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout:fixed;
+              word-break:break-all;
+            }
+          }
+          .tools{
+            position: fixed;
+            right: 2%;
+            text-align: right;
+            width: 60%;
+            cursor: pointer;
+            .toolsItem{
+              width: 15%;
+              margin-right: 3%;
+              display: inline-block;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <!-- 将需要打印的元素内容复制到新窗口中 -->
+        ${elementToPrint.innerHTML}
+      </body>
+    </html>
+  `)
+  // 延迟执行打印，以确保新窗口的内容已加载完成
+  printWindow.document.close() // 关闭文档流，确保内容完全加载
+  setTimeout(() => {
+    printWindow.print() // 调用打印方法
+    printWindow.close()
+  }, 500) // 延迟500毫秒后执行打印
+}

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

@@ -0,0 +1,243 @@
+# 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 连接

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

@@ -153,6 +153,7 @@
     <template v-if="isTableMode">
       <x-table-wrapper
         ref="table"
+        :queryParamsName="queryParamsName"
         :disableAction="disableAction"
         @rowClick="handleRowClick"
         @beforeDataChange="beforeDataChange"

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

@@ -211,7 +211,16 @@
         <ellipsis :length="item.slotValue" tooltip>{{ text === '' ? '--' : text }}</ellipsis>
       </span>
       <span v-else-if="item.slotType === 'progress'" :key="'progress-' + c_index">
-        <a-progress :percent="text" status="active" style="padding-right: 20px;" />
+        <!-- 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}`"
+          :initial-value="text || 0"
+          @progress-updated="(data) => handleProgressUpdated(data, record, item.dataIndex)"
+        />
+        <!-- 表格进度组件 -->
+        <a-progress v-else :percent="text" status="active" style="padding-right: 20px;" />
       </span>
       <span v-else-if="item.slotType === 'badge'" :key="'badge-' + c_index">
         <x-badge
@@ -277,7 +286,9 @@ import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormIte
 import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
 import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
 import XRate from '@vue2-client/base-client/components/common/XRate/index.vue'
+import XWebSocketProgress from '@vue2-client/base-client/components/common/XWebSocketProgress'
 import VueDraggableResizable from 'vue-draggable-resizable'
+import { mapState } from 'vuex'
 export default {
   name: 'XTableWrapper',
@@ -288,6 +299,7 @@ export default {
     XFormItem,
     XRate,
     CustomFuncCel,
+    XWebSocketProgress,
     VueDraggableResizable
   },
   data () {
@@ -298,6 +310,7 @@ export default {
     }
   },
   computed: {
+    ...mapState('account', { currUser: 'user' }),
     localDataSource () {
       return this.activeTable?.localDataSource
     },
@@ -426,6 +439,13 @@ export default {
     }
   },
   props: {
+    // 查询配置文件名
+    queryParamsName: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    },
     loadSelectedData: {
       type: Boolean,
       required: false,
@@ -547,7 +567,20 @@ export default {
     },
     handleResizeColumn (w, col) {
       col.width = w
-    }
+    },
+    /**
+     * 处理进度更新事件
+     * @param {Object} data 进度数据
+     * @param {Object} record 行数据
+     * @param {String} dataIndex 列字段名
+     */
+    handleProgressUpdated (data, record, dataIndex) {
+      // 更新行数据中的进度值
+      if (record && dataIndex) {
+        this.$set(record, dataIndex, data.value)
+      }
+    },
   }
 }
 </script>