vue2-client 1.17.38 → 1.17.39

package/src/base-client/components/his/threeTestOrders/editor.vue

@@ -1,113 +1,113 @@
-<template>
-  <!-- 根据实际部署环境修改 editor.html 的路径 -->
-  <iframe
-    src="/his/editor/editor.html"
-    width="100%"
-    height="800"
-    frameborder="0"
-    @load="onIframeLoad"
-    ref="editorIframe">
-  </iframe>
-</template>
-
-<script setup>
-
-import { ref, onBeforeUnmount } from 'vue'
-
-const editorIframe = ref(null)
-const checkEditorTimer = ref(null)
-const checkCount = ref(0)
-const editor = ref(null)
-const iframeWindow = ref(null)
-// 对外暴露的获取editor方法
-const getEditor = () => {
-  if (editor.value) {
-    return editor.value
-  }
-  if (iframeWindow.value && iframeWindow.value.editor) {
-    editor.value = iframeWindow.value.editor
-    return editor.value
-  }
-  if (editorIframe.value && editorIframe.value.contentWindow && editorIframe.value.contentWindow.editor) {
-    editor.value = editorIframe.value.contentWindow.editor
-    return editor.value
-  }
-  return null
-}
-// 创建体温单方法
-const createVitalSigns = (data) => {
-  const editorObj = getEditor()
-  if (!editorObj) {
-    throw new Error('editor对象未初始化，无法创建体温单')
-  }
-  if (typeof editorObj.createVitalSigns === 'function') {
-    return editorObj.createVitalSigns(data)
-  } else {
-    throw new Error('editor对象未包含createVitalSigns方法')
-  }
-}
-
-// 检查editor对象是否已初始化
-const startEditorCheck = (frameWindow, iframe) => {
-  if (checkEditorTimer.value) {
-    clearInterval(checkEditorTimer.value)
-  }
-  checkCount.value = 0
-  checkEditorTimer.value = setInterval(() => {
-    checkCount.value++
-    try {
-      const editorObj = frameWindow.editor
-      if (editorObj && typeof editorObj.createVitalSigns === 'function') {
-        clearInterval(checkEditorTimer.value)
-        editor.value = editorObj
-        // 将editor对象暴露到全局
-        window.iframeEditor = editorObj
-        window.iframeWindow = frameWindow
-        // 触发事件
-        emit('editor-ready', editorObj)
-        emit('load', { target: iframe, editor: editorObj })
-        // 发送消息通知
-        window.parent.postMessage({ type: 'editorReady' }, '*')
-      }
-    } catch (err) {
-      console.error('检查editor对象时出错:', err)
-    }
-    if (checkCount.value >= 20) {
-      clearInterval(checkEditorTimer.value)
-      console.error('Editor 对象加载失败')
-    }
-  }, 500)
-}
-// iframe加载完成的处理
-const onIframeLoad = (e) => {
-  const iframe = e.target
-  const frameWindow = iframe.contentWindow
-  iframeWindow.value = frameWindow
-  if (!frameWindow) {
-    console.error('无法访问 iframe 内容')
-    return
-  }
-  // 关闭文书工具栏
-  iframe.contentWindow.editor.option.toolbar = false
-  startEditorCheck(frameWindow, iframe)
-}
-// 组件销毁前清理
-onBeforeUnmount(() => {
-  if (checkEditorTimer.value) {
-    clearInterval(checkEditorTimer.value)
-  }
-})
-// 暴露方法给父组件
-defineExpose({ getEditor, createVitalSigns })
-
-// 定义事件
-const emit = defineEmits(['editor-ready', 'load'])
-</script>
-
-<style scoped>
-iframe {
-  border: none;
-  width: 100%;
-  min-height: 800px;
-}
-</style>
+<template>
+  <!-- 根据实际部署环境修改 editor.html 的路径 -->
+  <iframe
+    src="/his/editor/editor.html"
+    width="100%"
+    height="800"
+    frameborder="0"
+    @load="onIframeLoad"
+    ref="editorIframe">
+  </iframe>
+</template>
+
+<script setup>
+
+import { ref, onBeforeUnmount } from 'vue'
+
+const editorIframe = ref(null)
+const checkEditorTimer = ref(null)
+const checkCount = ref(0)
+const editor = ref(null)
+const iframeWindow = ref(null)
+// 对外暴露的获取editor方法
+const getEditor = () => {
+  if (editor.value) {
+    return editor.value
+  }
+  if (iframeWindow.value && iframeWindow.value.editor) {
+    editor.value = iframeWindow.value.editor
+    return editor.value
+  }
+  if (editorIframe.value && editorIframe.value.contentWindow && editorIframe.value.contentWindow.editor) {
+    editor.value = editorIframe.value.contentWindow.editor
+    return editor.value
+  }
+  return null
+}
+// 创建体温单方法
+const createVitalSigns = (data) => {
+  const editorObj = getEditor()
+  if (!editorObj) {
+    throw new Error('editor对象未初始化，无法创建体温单')
+  }
+  if (typeof editorObj.createVitalSigns === 'function') {
+    return editorObj.createVitalSigns(data)
+  } else {
+    throw new Error('editor对象未包含createVitalSigns方法')
+  }
+}
+
+// 检查editor对象是否已初始化
+const startEditorCheck = (frameWindow, iframe) => {
+  if (checkEditorTimer.value) {
+    clearInterval(checkEditorTimer.value)
+  }
+  checkCount.value = 0
+  checkEditorTimer.value = setInterval(() => {
+    checkCount.value++
+    try {
+      const editorObj = frameWindow.editor
+      if (editorObj && typeof editorObj.createVitalSigns === 'function') {
+        clearInterval(checkEditorTimer.value)
+        editor.value = editorObj
+        // 将editor对象暴露到全局
+        window.iframeEditor = editorObj
+        window.iframeWindow = frameWindow
+        // 触发事件
+        emit('editor-ready', editorObj)
+        emit('load', { target: iframe, editor: editorObj })
+        // 发送消息通知
+        window.parent.postMessage({ type: 'editorReady' }, '*')
+      }
+    } catch (err) {
+      console.error('检查editor对象时出错:', err)
+    }
+    if (checkCount.value >= 20) {
+      clearInterval(checkEditorTimer.value)
+      console.error('Editor 对象加载失败')
+    }
+  }, 500)
+}
+// iframe加载完成的处理
+const onIframeLoad = (e) => {
+  const iframe = e.target
+  const frameWindow = iframe.contentWindow
+  iframeWindow.value = frameWindow
+  if (!frameWindow) {
+    console.error('无法访问 iframe 内容')
+    return
+  }
+  // 关闭文书工具栏
+  iframe.contentWindow.editor.option.toolbar = false
+  startEditorCheck(frameWindow, iframe)
+}
+// 组件销毁前清理
+onBeforeUnmount(() => {
+  if (checkEditorTimer.value) {
+    clearInterval(checkEditorTimer.value)
+  }
+})
+// 暴露方法给父组件
+defineExpose({ getEditor, createVitalSigns })
+
+// 定义事件
+const emit = defineEmits(['editor-ready', 'load'])
+</script>
+
+<style scoped>
+iframe {
+  border: none;
+  width: 100%;
+  min-height: 800px;
+}
+</style>

package/src/components/STable/index.js

@@ -7,6 +7,7 @@ export default {
   data () {
     return {
       clickedRowKey: null,
+      hoveredRowKey: null, // 跟踪鼠标悬浮的行
       needTotalList: [],
 
       selectedRows: [],
@@ -274,6 +275,8 @@ export default {
           }
           this.localDataSource = r.data // 返回结果中的数组数据
           this.localLoading = false
+          // 清除选中行状态（翻页或重新查询时）
+          this.clickedRowKey = null
           this.setScrollYHeight({ type: 'default' })
         }, () => {
           this.localLoading = false
@@ -369,12 +372,29 @@ export default {
       this.$emit('expand', expanded, record)
     },
     handleRowClick (record, index) {
+      const isRowKeySequence = this.rowKey === '序号'
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+
+      // 如果点击的是已选中的行，则取消选中；否则选中该行
+      if (this.clickedRowKey === currentRowKey) {
+        this.clickedRowKey = null
+        this.$emit('rowClick', null) // 传递 null 表示取消选中
+      } else {
+        this.clickedRowKey = currentRowKey
+        this.$emit('rowClick', record)
+      }
+    },
+    handleRowMouseEnter (record, index) {
       if (this.rowKey === '序号') {
-        this.clickedRowKey = index
+        this.hoveredRowKey = index
       } else {
-        this.clickedRowKey = record[this.rowKey]
+        this.hoveredRowKey = record[this.rowKey]
       }
-      this.$emit('rowClick', record)
+      this.$emit('rowMouseEnter', record, index)
+    },
+    handleRowMouseLeave (record, index) {
+      this.hoveredRowKey = null
+      this.$emit('rowMouseLeave', record, index)
     },
     hexToRgba (hex, alpha = 1) {
       try {
@@ -405,24 +425,56 @@ export default {
       }
       return 'info'
     },
-    // 获取行样式类名
+    // 根据行样式类型和是否激活获取背景色
+    // isActive: 是否处于 hover 或 selected 状态
+    getRowBgColor (styleType, isActive = false) {
+      const colorMap = {
+        success: {
+          normal: 'rgba(82, 196, 26, 0.2)',
+          active: 'rgba(82, 196, 26, 0.2)'
+        },
+        warning: {
+          normal: 'rgba(250, 173, 20, 0.1)',
+          active: 'rgba(250, 173, 20, 0.2)'
+        },
+        error: {
+          normal: 'rgba(245, 34, 47, 0.1)',
+          active: 'rgba(245, 34, 47, 0.2)'
+        },
+        danger: {
+          normal: 'rgba(245, 34, 47, 0.1)',
+          active: 'rgba(245, 34, 47, 0.2)'
+        },
+        magic: {
+          normal: 'rgba(114, 46, 209, 0.1)',
+          active: 'rgba(114, 46, 209, 0.2)'
+        },
+        warn: {
+          normal: 'rgba(250, 173, 20, 0.1)',
+          active: 'rgba(250, 173, 20, 0.2)'
+        },
+        info: {
+          normal: '',
+          active: 'rgba(24, 144, 255, 0.2)'
+        }
+      }
+
+      const colors = colorMap[styleType] || colorMap.info
+      return isActive ? colors.active : colors.normal
+    },
+    // 获取行样式颜色（根据当前行的 hover 和 selected 状态）
     getRowStyleClass (record, index) {
+      const isRowKeySequence = this.rowKey === '序号'
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+
+      // 判断是否是选中行或悬浮行
+      const isActive = this.clickedRowKey === currentRowKey || this.hoveredRowKey === currentRowKey
+
+      // 获取行样式类型
       const styleType = this.getRowStyleType(record, index)
-      switch (styleType) {
-        case 'success':
-          return 'ant-table-row-success'
-        case 'warn':
-        case 'warning':
-          return 'ant-table-row-warning'
-        case 'error':
-        case 'danger':
-          return 'ant-table-row-error'
-        case 'magic':
-          return 'ant-table-row-magic'
-        case 'info':
-        default:
-          return ''
-      }
+
+      // 返回对应颜色
+      return this.getRowBgColor(styleType, isActive)
     },
   },
 
@@ -461,47 +513,34 @@ export default {
     })
     // 取消原有的分页组件 产品设计分页组件和汇总在一行 重新分页逻辑
     props.pagination = false
-    // 在 props 中添加自定义行属性
-    props.customRow = (record, index) => {
+
+    // 使用 rowClassName 实现响应式行样式
+    props.rowClassName = (record, index) => {
       const isRowKeySequence = this.rowKey === '序号'
-      const isCurrentRow = isRowKeySequence
-        ? this.clickedRowKey === index
-        : this.clickedRowKey === record[this.rowKey]
-      const rowStyleClass = this.getRowStyleClass(record, index)
-
-      // 根据行样式类型确定选中时的背景色
-      let selectedBgColor = ''
-      if (isCurrentRow && rowStyleClass) {
-        // 如果有行样式类，使用对应的深色
-        switch (rowStyleClass) {
-          case 'ant-table-row-success':
-            selectedBgColor = '#b8e6a0'
-            break
-          case 'ant-table-row-warning':
-            selectedBgColor = '#ffe066'
-            break
-          case 'ant-table-row-error':
-            selectedBgColor = '#ffb3b3'
-            break
-          case 'ant-table-row-magic':
-            selectedBgColor = '#d9b3ff'
-            break
-          default:
-            selectedBgColor = this.clickedRowColor
-        }
-      } else if (isCurrentRow) {
-        // 没有行样式类时使用默认选中颜色
-        selectedBgColor = this.clickedRowColor
+      const currentRowKey = isRowKeySequence ? index : record[this.rowKey]
+
+      const classes = []
+
+      // 判断是否是选中行（点击状态）
+      if (this.clickedRowKey === currentRowKey) {
+        classes.push('row-clicked')
       }
 
+      // 添加行样式类型（用于不同的颜色主题）
+      const styleType = this.getRowStyleType(record, index)
+      classes.push(`row-style-${styleType}`)
+
+      return classes.join(' ')
+    }
+
+    // 在 props 中添加自定义行事件
+    props.customRow = (record, index) => {
       return {
         on: {
-          click: () => this.handleRowClick(record, index)
-        },
-        style: {
-          'background-color': selectedBgColor
-        },
-        class: rowStyleClass
+          click: () => this.handleRowClick(record, index),
+          mouseenter: () => this.handleRowMouseEnter(record, index),
+          mouseleave: () => this.handleRowMouseLeave(record, index)
+        }
       }
     }
     // 自定义底部汇总插槽组件