@jzt-packages/components 1.0.0

package/src/JztFilePreview/interface/index.ts

@@ -0,0 +1,18 @@
+import { VNode, ComponentPublicInstance, Ref } from 'vue'
+import { FilePreview } from '../index.vue'
+
+export type FilePreviewRefInstance = keyof ComponentPublicInstance | keyof FilePreview
+export type FilePreviewRef = {
+  // [key in FilePreviewRefInstance]: (param: string[]) => any
+  openDialog: (param: string[]) => any
+  openDialogById: (id: string) => any
+}
+
+export interface FileItemProps {
+  arrayIndex: number
+  id: string
+  url: string
+  name: string
+  fileType: string
+  isPdf: boolean // 是否是pdf
+}

package/src/JztFilePreview/previewFile.vue

@@ -0,0 +1,371 @@
+<template>
+  <div v-if="fileList.length" v-loading="loading" class="dialog-content flx-left-center">
+    <div v-if="showList" class="left-list">
+      <div v-if="slots.leftContent" class="thumbnail flex-top-center">
+        <el-scrollbar style="height: calc(100% - 160px)">
+          <slot name="leftContent"></slot>
+        </el-scrollbar>
+        <div v-if="fileList && fileList.length">
+          <div class="scroll-thumbnail flx-left-center" ref="scrollBox">
+            <div
+              v-for="(itemSrc, index) in fileList"
+              class="thumbnail-item"
+              :id="`thumbnail_${index}`"
+              :key="`thumbnail_${index}`"
+              :class="{ active: index === currentItem.arrayIndex }"
+              @click="changeActiveItem(itemSrc)"
+            >
+              <el-image v-if="itemSrc.isPdf" style="width: 100%; height: 100%" :src="pdfCover" fit="scale-down" />
+              <el-image v-else style="width: 100%; height: 100%" :src="itemSrc.url" fit="scale-down" />
+            </div>
+          </div>
+          <div class="footer">
+            <span>{{ currentItem.arrayIndex + 1 }}</span>
+            <span>/</span>
+            <span>{{ fileList.length }}</span>
+          </div>
+        </div>
+      </div>
+      <el-scrollbar v-else ref="scrollbarRef">
+        <div class="thumbnail flx-left-center" :class="[fileList.length <= 3 ? 'single' : '']">
+          <div v-for="file in fileList" class="thumbnail-item column-center" @click="onPreview(file)">
+            <span
+              class="thumbnail-box flx-center"
+              :class="[file.fileType === 'pdf' ? 'pdf-box' : '', currentItem.id === file.id ? 'active-item' : '']"
+            >
+              <el-image :src="file.fileType === 'pdf' ? pdfCover : file.url" fit="scale-down" class="thumbnail-image" />
+            </span>
+            <JztEllipsisTooltip :isEllipsis="true" :content="file.name" />
+
+            <!-- <span class="fileName sle" :title="file.name">
+              {{ file.name }}
+            </span> -->
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="preview ml5">
+      <div v-if="showHeader" class="header flx-between-center">
+        <div class="fileName mb10">
+          <slot name="fileInfo">{{ currentItem.name }}</slot>
+        </div>
+      </div>
+      <div v-if="currentItem.url" class="preview-item flx-center">
+        <div
+          v-if="fileList.length > 1"
+          class="circle flx-center previous"
+          @click="onPrevious(currentItem.arrayIndex)"
+          title="上一张"
+        >
+          <el-icon :size="18"><ArrowLeftBold /></el-icon>
+        </div>
+        <div
+          v-if="fileList.length > 1"
+          class="circle flx-center next"
+          @click="onNext(currentItem.arrayIndex)"
+          title="上一张"
+        >
+          <el-icon :size="18"><ArrowRightBold /></el-icon>
+        </div>
+        <div style="width: 100%; height: 100%" v-if="currentItem.fileType === 'pdf'">
+          <pdf-viewer ref="pdfViewerRef" :pdfUrl="currentItem.url" :pdfName="currentItem.name" />
+        </div>
+        <el-image v-else id="printImage" ref="targetEleRef" :src="currentItem.url" fit="scale-down" class="preview-image" />
+        <div v-if="currentItem.fileType !== 'pdf'" class="page-tool flx-evenly-center cursor-pointer">
+          <span @click="useDownloadImgByUrl(currentItem.url, currentItem.name)">
+            <el-tooltip effect="dark" content="下载" placement="top">
+              <i class="iconfont icon-xiazai"></i>
+            </el-tooltip>
+          </span>
+          <span @click="printA4File({ printable: currentItem.url, type: 'image' })">
+            <el-tooltip effect="dark" content="打印" placement="top">
+              <i class="iconfont icon-dayin"></i>
+            </el-tooltip>
+          </span>
+          <span @click="useRotateImg">
+            <el-tooltip effect="dark" content="旋转" placement="top">
+              <i class="iconfont icon-xuanzhuan"></i>
+            </el-tooltip>
+          </span>
+          <span @click="resetImageInfo">
+            <el-tooltip effect="dark" content="适应" placement="top">
+              <i class="iconfont icon-shiyingchuangkou"></i>
+            </el-tooltip>
+          </span>
+          <div class="flx-center">
+            <span @click="pageZoomOut">
+              <el-tooltip effect="dark" content="放大" placement="top">
+                <i class="iconfont icon-fangda"></i>
+              </el-tooltip>
+            </span>
+            <span class="ml10 mr10">{{ Math.round(scaleValue * 100) }}%</span>
+            <span @click="pageZoomIn">
+              <el-tooltip effect="dark" content="缩小" placement="top">
+                <i class="iconfont icon-suoxiao"></i>
+              </el-tooltip>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="dialog-content column-center">
+    <JztEmpty emptyText="暂无数据" />
+  </div>
+</template>
+
+<script setup lang="ts" name="JztFilePreview">
+import { watchEffect, ref, useSlots, nextTick } from 'vue'
+import { FileItemProps } from './interface/index'
+import pdfViewer from './components/pdfViewer.vue'
+import { useDownloadImgByUrl, isPdfSuffix } from '@jzt-spd/utils'
+import { useImageDragZoom } from './hooks/useImageMethod'
+import JztEmpty from '../JztEmpty/index.vue'
+import { printA4File } from '@jzt-spd/utils'
+import { useUploadFileHook } from '../hooks/useUploadFileHook'
+import { pdfCover } from '@jzt-spd/styles/assets'
+import JztEllipsisTooltip from '../JztEllipsisTooltip/index.vue'
+
+const {
+  targetEleRef,
+  scaleValue,
+  setupDragEvents,
+  setupWheelEvent,
+  resetImageInfo,
+  useRotateImg,
+  pageZoomOut,
+  pageZoomIn
+} = useImageDragZoom()
+const slots = useSlots()
+const { getFullUrl } = useUploadFileHook()
+
+export interface FilePreview {
+  showList?: boolean
+  showHeader?: boolean
+}
+const props = withDefaults(defineProps<FilePreview>(), {
+  showList: true, // 是否展示左边的缩略图列表
+  showHeader: true // 是否展示头部
+})
+const dialogVisible = ref(false)
+const pdfViewerRef = ref()
+const scrollbarRef = ref()
+const fileList = ref<FileItemProps[]>([])
+const loading = ref(false)
+const currentItem = ref<FileItemProps>({
+  id: '',
+  url: '',
+  name: '',
+  fileType: '',
+  arrayIndex: 0,
+  isPdf: false
+})
+
+/**
+ * @description 打开预览弹框
+ * @param file 文件
+ * @param number  点击打开的是第几个文件
+ * */
+const setFileInfo = (list: string[], curIndex: number = 0) => {
+  resetImageInfo()
+  dialogVisible.value = true
+  fileList.value = []
+  if (!list || !list.length) return
+  list.forEach((url, index) => {
+    const fileName = getFileNameByUrl(url)
+    const nameList = fileName.split('.')
+    const fileType = nameList[nameList.length - 1] || ''
+    fileList.value.push({
+      arrayIndex: index,
+      id: fileName + '_' + index,
+      fileType: fileType,
+      isPdf: isPdfSuffix(fileName), //当前项是否为 PDF
+      url: getFullUrl(url),
+      name: fileName
+    })
+  })
+  onPreview(fileList.value[curIndex])
+  scrollToActiveThumbnail()
+}
+/**
+ * @description 截取处理文件名称
+ * @param url url
+ */
+function getFileNameByUrl(url: string): string {
+  const fileName = url.substring(url.lastIndexOf('/') + 1) // 获取文件名部分
+  const firstUnderscoreIndex = fileName.indexOf('_')
+  const name = firstUnderscoreIndex !== -1 ? fileName.slice(firstUnderscoreIndex + 1) : ''
+  return name.toLowerCase()
+}
+
+/**
+ * @description 文件预览
+ * @param file 文件
+ * */
+const onPreview = (file: FileItemProps) => {
+  currentItem.value = file
+  resetImageInfo()
+}
+
+/**
+ * @description 文件预览
+ * @param file 文件
+ * */
+const closePreview = (file: FileItemProps) => {
+  fileList.value = []
+  Object.keys(currentItem.value).forEach(key => {
+    currentItem.value[key] = null
+  })
+  resetImageInfo()
+}
+
+const scrollBox = ref<HTMLElement>()
+
+const scrollToActiveThumbnail = () => {
+  nextTick(() => {
+    const activeIndex = currentItem.value.arrayIndex
+    // 水平缩略图条（scrollBox）
+    if (scrollBox.value) {
+      const thumbnail = document.getElementById(`thumbnail_${activeIndex}`)
+      if (thumbnail) {
+        thumbnail.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+      }
+    }
+    // 垂直缩略图列表（el-scrollbar）
+    const wrap = scrollbarRef.value?.wrapRef
+    if (wrap) {
+      const activeItem = wrap.querySelector('.active-item')
+      if (activeItem) {
+        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+      }
+    }
+  })
+}
+
+// 切换上一张图片
+const onPrevious = (index: number) => {
+  if (fileList.value.length <= 1) return
+  if (index === 0) {
+    onPreview(fileList.value[fileList.value.length - 1])
+  } else {
+    onPreview(fileList.value[index - 1])
+  }
+  scrollToActiveThumbnail()
+}
+// 切换下一张图片
+const onNext = (index: number) => {
+  if (fileList.value.length <= 1) return
+  if (index === fileList.value.length - 1) {
+    onPreview(fileList.value[0])
+  } else {
+    onPreview(fileList.value[index + 1])
+  }
+  scrollToActiveThumbnail()
+}
+
+// 切换图片
+const changeActiveItem = itemSrc => {
+  currentItem.value = { ...itemSrc }
+}
+
+watchEffect(
+  () => {
+    if (dialogVisible.value) {
+      setupDragEvents()
+      setupWheelEvent()
+    }
+  },
+  { flush: 'post' }
+)
+defineExpose({
+  closePreview,
+  setFileInfo
+})
+</script>
+<style lang="scss" scoped>
+@use './index';
+
+.iconfont {
+  font-size: 22px;
+}
+
+.thumbnail {
+  .preview {
+    flex: 1;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+    background: #f6f7f9;
+    padding: 8px;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: scale-down;
+    }
+    .circle {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      opacity: 0.8;
+      border: 1px solid #bbbfc2;
+      background: #ffffffcc;
+    }
+    .previous {
+      position: absolute;
+      left: 24px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      cursor: pointer;
+    }
+    .next {
+      position: absolute;
+      right: 24px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      cursor: pointer;
+    }
+    &:hover .pdf-overlay {
+      opacity: 1;
+    }
+    .pdf-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.45);
+      opacity: 0;
+      transition: opacity 0.2s;
+      flex-direction: column;
+      gap: 8px;
+      .pdf-hint {
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .scroll-thumbnail {
+    width: 100%;
+    height: 120px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth; /* 平滑滚动 */
+    white-space: nowrap; /* 禁止换行 */
+    flex-wrap: nowrap;
+    .thumbnail-item {
+      flex-shrink: 0;
+      width: 150px;
+      height: 92px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 2px solid #dee2e6;
+      user-select: none;
+      &.active {
+        border: 2px solid var(--el-color-primary);
+      }
+    }
+  }
+}
+</style>