vue2-client 1.15.70 → 1.15.71-demo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.15.70",
+  "version": "1.15.71-demo",
   "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

@@ -234,7 +234,7 @@
       </span>
       <span v-else-if="item.slotType === 'action'" :key="'action-' + c_index">
         <template v-if="item.actionArr && item.actionArr.length > 0">
-          <a-dropdown :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
+          <a-dropdown placement="bottomCenter" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
             <a class="ant-dropdown-link" @click="e => e.preventDefault()">
               {{ item.scopedSlots?.customRender || item.slotValue }} <a-icon type="down"/>
             </a>

package/src/pages/userInfoDetailManage/uploadFilesHistory/ImagePreview.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="visible" class="preview-mask">
+    <div class="preview-container">
+      <img
+        :src="src"
+        :style="imgStyle"
+        class="preview-img"
+        @mousedown="startDrag"
+        draggable="false"
+      />
+      <div class="preview-actions">
+        <a-button @click="zoomIn">放大</a-button>
+        <a-button @click="zoomOut">缩小</a-button>
+        <a-button @click="rotateLeft">左旋转</a-button>
+        <a-button @click="rotateRight">右旋转</a-button>
+        <a-button @click="close">关闭</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  src: String,
+  visible: Boolean
+})
+const emits = defineEmits(['close'])
+
+const scale = ref(1)
+const rotate = ref(0)
+const offset = ref({ x: 0, y: 0 })
+const dragging = ref(false)
+const dragStart = ref({ x: 0, y: 0 })
+
+const imgStyle = computed(() => ({
+  transform: `scale(${scale.value}) rotate(${rotate.value}deg) translate(${offset.value.x}px, ${offset.value.y}px)`,
+  cursor: dragging.value ? 'grabbing' : 'grab'
+}))
+
+const zoomIn = () => scale.value += 0.2
+const zoomOut = () => scale.value = Math.max(0.2, scale.value - 0.2)
+const rotateLeft = () => rotate.value -= 90
+const rotateRight = () => rotate.value += 90
+const close = () => emits('close')
+
+const startDrag = (e) => {
+  dragging.value = true
+  dragStart.value = { x: e.clientX - offset.value.x, y: e.clientY - offset.value.y }
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+}
+const onDrag = (e) => {
+  if (!dragging.value) return
+  offset.value = {
+    x: e.clientX - dragStart.value.x,
+    y: e.clientY - dragStart.value.y
+  }
+}
+const stopDrag = () => {
+  dragging.value = false
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+}
+</script>
+
+<style scoped>
+.preview-mask {
+  position: fixed;
+  z-index: 9999;
+  left: 0; top: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.preview-container {
+  position: relative;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+}
+.preview-img {
+  max-width: 80vw;
+  max-height: 70vh;
+  user-select: none;
+  transition: transform 0.2s;
+  display: block;
+  margin: 0 auto;
+}
+.preview-actions {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+</style> 

package/src/pages/userInfoDetailManage/uploadFilesHistory/index.vue

@@ -17,7 +17,7 @@
           <h4>{{ item.days }}</h4>
           <div class="file-items">
             <div v-for="file in item.arrays" :key="file.id" class="file-card">
-              <img :src="file.f_downloadpath" class="file-image" v-if="file.f_filetype.includes('jpg') || file.f_filetype.includes('png')" />
+              <img :src="file.f_downloadpath" class="file-image" v-if="file.f_filetype.includes('jpg') || file.f_filetype.includes('png')" @click="openPreview(file.f_downloadpath)" style="cursor:pointer" />
               <p>上传时间: {{ file.f_uploaddate }}</p>
               <p>操作员: {{ file.f_username }}</p>
               <p>分类: {{ file.fusetype }}</p>
@@ -29,12 +29,14 @@
         </div>
       </a-list-item>
     </a-list>
+    <ImagePreview :src="previewImg" :visible="previewVisible" @close="previewVisible = false" />
   </div>
 </template>
 
 <script>
 import { post } from '@vue2-client/services/api'
 import { del } from '@vue2-client/services/api/restTools'
+import ImagePreview from './ImagePreview.vue'
 export default {
   props: {
     currUserInfo: {
@@ -42,13 +44,16 @@ export default {
       default: () => undefined
     }
   },
+  components: { ImagePreview },
   data () {
     return {
       upload_date: null,
       fusetype: null,
       files: [],
       fusetypes: [],
-      isDelete: '0'
+      isDelete: '0',
+      previewVisible: false,
+      previewImg: ''
     }
   },
   methods: {
@@ -79,6 +84,10 @@ export default {
     },
     selfSearch () {
       this.getFiles()
+    },
+    openPreview (src) {
+      this.previewImg = src
+      this.previewVisible = true
     }
   },
   mounted () {