vue2-client 1.17.21 → 1.17.23

package/src/base-client/components/common/HIS/demo.vue

@@ -1,61 +1,61 @@
-<template>
-  <div class="h-tab-demo">
-    <!--    &lt;!&ndash; XTab &ndash;&gt;-->
-    <!--    <a-card title="XTab">-->
-    <!--      <h-tab-->
-    <!--        configName="openPrescriptionTab"-->
-    <!--        serverName="af-his"-->
-    <!--      />-->
-    <!--    </a-card>-->
-
-    <!-- HFormTable -->
-    <a-card title="HFormTable" style="margin-top: 20px;">
-      <h-form-table
-        queryParamsName="outpatientAdviceAllCRUD"
-        serviceName="af-his"
-      />
-    </a-card>
-
-    <!-- HForm -->
-    <a-card title="HAddNativeForm" style="margin-top: 20px;">
-      <h-add-native-form
-        queryParamsName="TCMAdviceFormConfig"
-        serviceName="af-his"
-      />
-    </a-card>
-    <!--    <a-card title="HFormGroup" style="margin-top: 20px;">-->
-    <!--      <h-form-group-->
-    <!--        queryParamsName="surgeryApplicationFormGroup"-->
-    <!--        serviceName="af-his"-->
-    <!--        :left-hide="true"-->
-    <!--      />-->
-    <!--    </a-card>-->
-    <!--    &lt;!&ndash; HButtons &ndash;&gt;-->
-    <!--    <a-card title="HButtons" style="margin-top: 20px;">-->
-    <!--      <h-buttons-->
-    <!--        queryParamsName="outpatientAdviceGroup"-->
-    <!--        serviceName="af-his"-->
-    <!--      />-->
-    <!--    </a-card>-->
-  </div>
-</template>
-
-<script setup>
-// import HTab from './HTab/HTab.vue'
-import HFormTable from './HFormTable/HFormTable.vue'
-// import HButtons from './HButtons/HButtons.vue'
-import HAddNativeForm from '@vue2-client/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue'
- // import HFormGroup from './HFormGroup/HFormGroup.vue'
-</script>
-
-<style scoped lang="less">
-.h-tab-demo {
-  padding: 20px;
-
-  h4 {
-    color: #333;
-    margin-bottom: 10px;
-    font-size: 14px;
-  }
-}
-</style>
+<template>
+  <div class="h-tab-demo">
+    <!--    &lt;!&ndash; XTab &ndash;&gt;-->
+    <!--    <a-card title="XTab">-->
+    <!--      <h-tab-->
+    <!--        configName="openPrescriptionTab"-->
+    <!--        serverName="af-his"-->
+    <!--      />-->
+    <!--    </a-card>-->
+
+    <!-- HFormTable -->
+    <a-card title="HFormTable" style="margin-top: 20px;">
+      <h-form-table
+        queryParamsName="outpatientAdviceAllCRUD"
+        serviceName="af-his"
+      />
+    </a-card>
+
+    <!-- HForm -->
+    <a-card title="HAddNativeForm" style="margin-top: 20px;">
+      <h-add-native-form
+        queryParamsName="TCMAdviceFormConfig"
+        serviceName="af-his"
+      />
+    </a-card>
+    <!--    <a-card title="HFormGroup" style="margin-top: 20px;">-->
+    <!--      <h-form-group-->
+    <!--        queryParamsName="surgeryApplicationFormGroup"-->
+    <!--        serviceName="af-his"-->
+    <!--        :left-hide="true"-->
+    <!--      />-->
+    <!--    </a-card>-->
+    <!--    &lt;!&ndash; HButtons &ndash;&gt;-->
+    <!--    <a-card title="HButtons" style="margin-top: 20px;">-->
+    <!--      <h-buttons-->
+    <!--        queryParamsName="outpatientAdviceGroup"-->
+    <!--        serviceName="af-his"-->
+    <!--      />-->
+    <!--    </a-card>-->
+  </div>
+</template>
+
+<script setup>
+// import HTab from './HTab/HTab.vue'
+import HFormTable from './HFormTable/HFormTable.vue'
+// import HButtons from './HButtons/HButtons.vue'
+import HAddNativeForm from '@vue2-client/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue'
+ // import HFormGroup from './HFormGroup/HFormGroup.vue'
+</script>
+
+<style scoped lang="less">
+.h-tab-demo {
+  padding: 20px;
+
+  h4 {
+    color: #333;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+}
+</style>

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

@@ -0,0 +1,427 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :footer="null"
+    width="50vw"
+    wrapClassName="image-preview-modal"
+    :zIndex="1010"
+    @cancel="handleClose"
+    :closable="false"
+  >
+    <!-- 自定义关闭按钮 -->
+    <div class="custom-close-btn" @click="handleClose">
+      <a-icon type="close" />
+    </div>
+
+    <!-- 顶部工具栏 -->
+    <div class="preview-toolbar top-toolbar">
+      <div class="toolbar-content">
+        <a-tooltip title="放大">
+          <a-button
+            type="primary"
+            icon="zoom-in"
+            @click="zoomIn"
+            size="small"
+            class="toolbar-btn"
+          />
+        </a-tooltip>
+        <a-tooltip title="缩小">
+          <a-button
+            type="primary"
+            icon="zoom-out"
+            @click="zoomOut"
+            size="small"
+            class="toolbar-btn"
+          />
+        </a-tooltip>
+        <a-tooltip title="重置">
+          <a-button
+            type="primary"
+            icon="reload"
+            @click="resetImageTransform"
+            size="small"
+            class="toolbar-btn"
+          />
+        </a-tooltip>
+        <div class="zoom-display">
+          <span class="zoom-percentage">{{ Math.round(scale * 100) }}%</span>
+        </div>
+        <a-tooltip title="向左旋转">
+          <a-button
+            type="primary"
+            icon="undo"
+            @click="rotateLeft"
+            size="small"
+            class="toolbar-btn"
+          />
+        </a-tooltip>
+        <a-tooltip title="向右旋转">
+          <a-button
+            type="primary"
+            icon="redo"
+            @click="rotateRight"
+            size="small"
+            class="toolbar-btn"
+          />
+        </a-tooltip>
+        <a-tooltip title="下载图片">
+          <a-button
+            type="primary"
+            icon="download"
+            @click="downloadImage"
+            size="small"
+            class="toolbar-btn"
+          />
+        </a-tooltip>
+      </div>
+    </div>
+
+    <!-- 图片预览区域 -->
+    <div
+      class="image-preview-container"
+      @wheel="handleWheel"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @mouseup="endDrag"
+      @mouseleave="endDrag"
+      ref="previewContainer"
+      :class="{ 'dragging': isDragging }"
+      tabindex="0"
+    @keydown="handleKeydown"
+    >
+    <div
+      class="image-wrapper"
+      :style="wrapperStyle"
+    >
+      <img
+        :src="imageUrl"
+        alt="预览图片"
+        class="preview-image"
+        :style="imageStyle"
+        ref="previewImage"
+      />
+    </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'ImagePreviewModal',
+  props: {
+    // 是否显示预览模态框
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 图片URL
+    imageUrl: {
+      type: String,
+      default: ''
+    },
+    // 图片名称（用于下载）
+    imageName: {
+      type: String,
+      default: 'preview_image'
+    }
+  },
+  data () {
+    return {
+      scale: 1, // 缩放比例
+      rotate: 0, // 旋转角度
+      isDragging: false, // 是否正在拖动
+      dragStartX: 0, // 拖动起始X坐标
+      dragStartY: 0, // 拖动起始Y坐标
+      translateX: 0, // X轴平移距离
+      translateY: 0, // Y轴平移距离
+      lastTranslateX: 0, // 上一次X轴平移距离
+      lastTranslateY: 0 // 上一次Y轴平移距离
+    }
+  },
+  computed: {
+    // 图片样式
+    imageStyle () {
+      return {
+        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
+        maxWidth: '100%',
+        maxHeight: '100%',
+        objectFit: 'contain'
+      }
+    },
+    // 图片容器样式
+    wrapperStyle () {
+      return {
+        transform: `translate(${this.translateX}px, ${this.translateY}px)`,
+        cursor: this.isDragging ? 'grabbing' : 'grab'
+      }
+    }
+  },
+  watch: {
+    // 监听visible变化，重置状态和焦点管理
+    visible (newVal) {
+      if (newVal) {
+        this.resetImageTransform()
+        // 下一个tick确保DOM已更新
+        this.$nextTick(() => {
+          this.focusContainer()
+        })
+      } else {
+        this.removeKeydownListener()
+      }
+    }
+  },
+  mounted () {
+    // 组件挂载时添加全局键盘事件监听
+    this.addKeydownListener()
+  },
+  beforeDestroy () {
+    // 组件销毁前移除事件监听
+    this.removeKeydownListener()
+  },
+  methods: {
+    // 添加键盘事件监听
+    addKeydownListener () {
+      document.addEventListener('keydown', this.handleGlobalKeydown)
+    },
+
+    // 移除键盘事件监听
+    removeKeydownListener () {
+      document.removeEventListener('keydown', this.handleGlobalKeydown)
+    },
+
+    // 处理全局键盘事件（ESC键）
+    handleGlobalKeydown (event) {
+      if (event.keyCode === 27 && this.visible) { // ESC键
+        event.preventDefault()
+        event.stopPropagation()
+        this.handleClose()
+      }
+    },
+
+    // 处理容器内键盘事件（备用）
+    handleKeydown (event) {
+      if (event.keyCode === 27) { // ESC键
+        event.preventDefault()
+        event.stopPropagation()
+        this.handleClose()
+      }
+    },
+
+    // 聚焦到预览容器
+    focusContainer () {
+      if (this.$refs.previewContainer) {
+        this.$refs.previewContainer.focus()
+      }
+    },
+
+    // 放大
+    zoomIn () {
+      this.scale = Math.min(this.scale + 0.25, 3) // 最大放大到300%
+    },
+
+    // 缩小
+    zoomOut () {
+      this.scale = Math.max(this.scale - 0.25, 0.1) // 最小缩小到10%
+    },
+
+    // 向左旋转
+    rotateLeft () {
+      this.rotate -= 90
+    },
+
+    // 向右旋转
+    rotateRight () {
+      this.rotate += 90
+    },
+
+    // 重置图片变换
+    resetImageTransform () {
+      this.scale = 1
+      this.rotate = 0
+      this.translateX = 0
+      this.translateY = 0
+      this.lastTranslateX = 0
+      this.lastTranslateY = 0
+    },
+
+    // 鼠标滚轮缩放
+    handleWheel (event) {
+      event.preventDefault()
+      const delta = event.deltaY > 0 ? -0.1 : 0.1
+      const newScale = Math.min(Math.max(0.1, this.scale + delta), 3)
+
+      // 计算缩放中心点
+      const rect = this.$refs.previewContainer.getBoundingClientRect()
+      const mouseX = event.clientX - rect.left
+      const mouseY = event.clientY - rect.top
+
+      // 计算缩放前后的位置偏移，实现以鼠标位置为中心的缩放
+      const scaleRatio = newScale / this.scale
+      this.translateX = mouseX - (mouseX - this.translateX) * scaleRatio
+      this.translateY = mouseY - (mouseY - this.translateY) * scaleRatio
+
+      this.scale = newScale
+    },
+
+    // 开始拖动
+    startDrag (event) {
+      if (event.button !== 0) return // 只响应左键拖动
+      this.isDragging = true
+      this.dragStartX = event.clientX - this.translateX
+      this.dragStartY = event.clientY - this.translateY
+    },
+
+    // 拖动中
+    onDrag (event) {
+      if (!this.isDragging) return
+      this.translateX = event.clientX - this.dragStartX
+      this.translateY = event.clientY - this.dragStartY
+    },
+
+    // 结束拖动
+    endDrag () {
+      this.isDragging = false
+      this.lastTranslateX = this.translateX
+      this.lastTranslateY = this.translateY
+    },
+
+    // 下载图片
+    downloadImage () {
+      if (!this.imageUrl) return
+
+      // 创建下载链接
+      const link = document.createElement('a')
+      link.href = this.imageUrl
+      link.download = `${this.imageName}_${new Date().getTime()}.${this.getImageExtension(this.imageUrl)}`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+
+    // 获取图片扩展名
+    getImageExtension (url) {
+      const match = url.match(/\.(jpeg|jpg|gif|png|bmp|webp)/)
+      return match ? match[1] : 'png'
+    },
+
+    // 关闭模态框
+    handleClose () {
+      this.resetImageTransform()
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.image-preview-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 500px;
+  height: 60vh;
+  padding: 20px;
+  overflow: hidden;
+  background: #f5f5f5;
+  position: relative;
+  cursor: grab;
+  outline: none; /* 移除焦点时的轮廓线 */
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.image-wrapper {
+  display: inline-block;
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+
+.preview-image {
+  display: block;
+  transition: transform 0.3s ease;
+}
+
+// 顶部工具栏样式
+.top-toolbar {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  pointer-events: none; // 允许点击穿透到图片
+
+  .toolbar-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(5px);
+    border-radius: 20px;
+    padding: 8px 16px;
+    pointer-events: auto; // 恢复按钮的点击事件
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+    .zoom-display {
+      margin: 0 8px;
+      .zoom-percentage {
+        color: #fff;
+        font-weight: 500;
+        min-width: 40px;
+        text-align: center;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .toolbar-btn {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: #fff;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+      border-color: rgba(255, 255, 255, 0.3);
+      color: #40a9ff;
+    }
+  }
+}
+
+// 自定义关闭按钮样式
+.custom-close-btn {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 1011;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-size: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.7);
+  }
+}
+
+// 修改弹窗样式
+:deep(.image-preview-modal) {
+  .ant-modal {
+    max-width: 90vw;
+
+    .ant-modal-body {
+      padding: 0;
+      background: #f5f5f5;
+      position: relative;
+    }
+  }
+}
+</style>

package/src/base-client/components/common/ImagePreviewModal/index.js

@@ -0,0 +1,3 @@
+import ImagePreviewModal from './ImagePreviewModal'
+
+export default ImagePreviewModal