PDF，图片预览

src/components/Annex/src/Annex.vue

@@ -16,17 +16,20 @@
               <div>{{ item.size }}KB</div>
               <div>来自 {{ item.nickname }}</div>
             </div>
-            <Icon icon="ep:download" v-if="showDownload" class="cursor-pointer mr-2" size="18" @click="downFile(item)" />
-            <Icon icon="ep:delete" class="cursor-pointer" v-if="!hiddenDelete" size="18" @click="deleteAnnex(item.id)" />
+            <Icon icon="ep:picture" v-if="showPreview" class="cursor-pointer mr-2" :size="18" @click="preview(item)"/>
+            <Icon icon="ep:download" v-if="showDownload" class="cursor-pointer mr-2" :size="18" @click="downFile(item)" />
+            <Icon icon="ep:delete" class="cursor-pointer" v-if="!hiddenDelete" :size="18" @click="deleteAnnex(item.id)" />
           </div>
           <div class="time mt-6px ">{{ formatDate(item.createTime) }}</div>
         </div>
       </div>
     </div>
   </div>
+  <PreviewPDF ref="previewRef" />
 </template>
 
 <script lang="ts" setup>
+import PreviewPDF from '@/components/PreviewPDF/index.vue'
 import UploadFile from '@/components/UploadFile/src/UploadFile.vue'
 import { formatDate } from '@/utils/formatTime'
 import * as FileApi from '@/api/wms/file'
@@ -45,6 +48,10 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  showPreview: {
+    type: Boolean,
+    required: false
+  },
   showDownload: {
     type: Boolean,
     required: false
@@ -55,7 +62,7 @@ const props = defineProps({
   },
 })
 // 子传父的时候需要先定义好emit这个方法
-const emit = defineEmits(['handleAnnexSuccess', 'deleteAnnexSuccess'])
+const emit = defineEmits(['handleAnnexSuccess', 'deleteAnnexSuccess','previewAnnexHandle'])
 // 添加附件
 const handleAnnexSuccess = () => {
   emit('handleAnnexSuccess')
@@ -75,6 +82,18 @@ const deleteAnnex = async (id) => {
 const downFile = (item)=>{
    window.open(import.meta.env.VITE_BASE_URL + '/admin-api/infra/file/0/get/' + item.path)
 }
+const previewRef = ref<InstanceType<typeof PreviewPDF>>()
+
+const preview = (item)=>{
+  console.log('preview==',item)
+  if(item.url.endsWith('.pdf')){
+    previewRef.value?.openPreview(item.url)
+  }else{
+    let imageArray = props.annexData.annexList.map(item=>item.url)
+    imageArray = imageArray.filter(item=>!item.endsWith('.pdf'))
+    previewRef.value?.openPreview(imageArray)
+  }
+}
 </script>
 
 

src/components/Detail/src/Detail.vue

@@ -223,6 +223,7 @@ const props = defineProps({
     default: ()=>({
       label: '附件',
       showDownload:false,
+      showPreview:false,
       hiddenDelete:false
     })
   },
@@ -460,10 +461,14 @@ const getFileList = async () => {
   }
 }
 // 获取其他附件列表篇
-const getAnnexFileList =  async (row:id) => {
-  console.log('getAnnexFileList')
+const getAnnexFileList =  async (row) => {
   props.annexTable?.forEach(async (item) => {
     let requstData = {...remarksData.data,tableName: item?.tableName} 
+    if(item?.queryParams){
+      item?.queryParams?.forEach(queryItem => {
+        requstData[queryItem.queryField] = row[queryItem.rowField]
+      });
+    }
     const annexList = await FileApi.getFileList(requstData)
     const annexData = annexTableData.value.find(annex=>annex.label === item.label)
     if(annexData){
@@ -476,6 +481,7 @@ const getAnnexFileList =  async (row:id) => {
         annexList,
         hasSubDetail:item.hasSubDetail||false,
         subDetailTableData:item.subDetailTableData,
+        showPreview:item.showPreview||false, // 是否展示预览按钮
         showDownload:item.showDownload||false, // 是否展示下载按钮
         hiddenDelete:item.hiddenDelete || false, // 是否展示删除按钮
       })

src/components/PreviewPDF/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-dialog class="preview" v-model="showDialog" style=""  @close="closeView">
+        <iframe v-if="isPDF" ref="pdfRef" width="100%" :height="frameHeight" :src="pdfUrl" frameborder="0"></iframe>
+        <el-carousel justify="center" v-else indicator-position="outside">
+            <el-carousel-item class="carousel-item" v-for="url in imageArray" :key="url">
+                    <el-image style="border:1px solid red;height:100%" fit="contain" :src="url" loading="lazy" />
+            </el-carousel-item>
+        </el-carousel>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const showDialog = ref(false) // 弹窗控制
+const message = useMessage() // 消息弹窗
+const isPDF = ref(false) // 是否是pdf
+const pdfUrl = ref<string>('') // pdf地址
+const pdfRef = ref() // pdf组件
+const frameHeight = ref(0)
+const imageArray = ref<string[]>([]) // 图片数组
+const closeView = () => {
+  showDialog.value = false
+}
+// 打开预览
+const openPreview = async (data:string[]|string)=>{
+    showDialog.value = true
+    if(Array.isArray(data)){
+        //图片数组
+        isPDF.value = false
+        pdfUrl.value = ''
+        imageArray.value = data.filter(item=>(item.replace('/get/','/show/')))
+    }else{
+        isPDF.value = true
+        pdfUrl.value = data.replace('/get/','/show/')
+        nextTick(()=>{
+            frameHeight.value = window.innerHeight - 2*pdfRef.value.getBoundingClientRect().top
+        })
+    }
+}
+
+defineExpose({openPreview})
+
+</script>
+
+<style>
+/* .preview .el-dialog__headerbtn .el-dialog__close{
+    color: white !important;
+    font-size: 20px !important;
+}
+.preview.el-dialog {
+    --el-dialog-box-shadow:null;
+} */
+</style>
+<style lang="scss" scoped>
+.carousel-item{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+</style>

src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRecordMain/index.vue

@@ -53,6 +53,31 @@
   <!-- 详情 -->
   <Detail
     ref="detailRef"
+    :annexTable="[{
+      label: '质检明细',
+      prop: 'uploadFile',
+      tableName:'SupplierdeliverInspectionDetail',
+      hasSubDetail:true, // 附件中是否展示明细表
+      showPreview:true, // 附件中是否展示预览按钮
+      align:'left',
+      queryParams:[{
+        queryField:'tableId',
+        rowField:'annexMasterId',
+      }],
+      //明细表数据
+      subDetailTableData:{
+        queryParams:[{
+          queryField:'masterId',
+          rowField:'annexMasterId',
+        }], // 查询参数
+        getSubList:SupplierdeliverInspectionDetailApi.getSupplierdeliverInspectionDetailPage,//请求接口
+        tableColumns:SupplierdeliverInspectionDetail.allSchemas.tableColumns,
+        tableList:[],//表格数据
+        total:1,
+        pageSize:10,
+        currentPage:1,
+      }
+    }]"
     :isBasic="false"
     :allSchemas="SupplierdeliverRecordMain.allSchemas"
     :detailAllSchemas="SupplierdeliverRecordDetail.allSchemas"
@@ -79,10 +104,13 @@
 
 <script setup lang="ts">
 import download from '@/utils/download'
+import * as SupplierdeliverInspectionDetailApi from '@/api/wms/supplierdeliverInspectionDetail'
+import {    SupplierdeliverInspectionDetail,SupplierdeliverInspectionDetailRules} from '../supplierdeliverInspectionDetail/supplierdeliverInspectionDetail.data'
 import { SupplierdeliverRecordMain,SupplierdeliverRecordMainRules,
   SupplierdeliverRecordDetail,SupplierdeliverRecordDetailRules,SupplierdeliverRecordDetailPickingNumer } from './supplierdeliverRecordMain.data'
 import * as SupplierdeliverRecordMainApi from '@/api/wms/supplierdeliverRecordMain'
 import * as SupplierdeliverRecordDetailApi from '@/api/wms/supplierdeliverRecordDetail'
+import * as SupplierdeliverRequestDetailApi from '@/api/wms/supplierdeliverRequestDetail'
 import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import { getAccessToken } from '@/utils/auth'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
@@ -197,9 +225,17 @@ const { getList:getDetailList } = detatableMethods
 const { wsCache } = useCache()
 /** 详情操作 */
 const detailRef = ref()
-const openDetail = (row: any, titleName: any, titleValue: any) => {
+const openDetail = async (row: any, titleName: any, titleValue: any) => {
   const departmentCode = wsCache.get(CACHE_KEY.DEPT).find((account) => account.id == row.departmentCode)?.name
   if (departmentCode) row.departmentCode = JSON.parse(JSON.stringify(departmentCode))
+  //获取申请中的masterId
+  const { tableObject: requestTableObject, tableMethods:requestTableMethods } = useTable({
+    getListApi: SupplierdeliverRequestDetailApi.getSupplierdeliverRequestDetailPage // 分页接口
+  })
+  const { getList:requestGetList } = requestTableMethods
+  requestTableObject.params.number = 'REQ0120240506-0002'
+  await requestGetList()
+  row.annexMasterId = requestTableObject.tableList[0].masterId
   detailRef.value.openDetail(row, titleName, titleValue,'recordSupplierdeliverMain')
 }
 

src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/index.vue

@@ -82,6 +82,7 @@
       prop: 'uploadFile',
       tableName:'SupplierdeliverInspectionDetail',
       hasSubDetail:true, // 附件中是否展示明细表
+      showPreview:true, // 附件中是否展示预览按钮
       align:'left',
       //明细表数据
       subDetailTableData:{