Browse Source

PDF,图片预览

master_hella_20240701
yufei0306 6 months ago
parent
commit
07ba572b92
  1. 25
      src/components/Annex/src/Annex.vue
  2. 10
      src/components/Detail/src/Detail.vue
  3. 60
      src/components/PreviewPDF/index.vue
  4. 38
      src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRecordMain/index.vue
  5. 1
      src/views/wms/purchasereceiptManage/supplierdeliver/supplierdeliverRequestMain/index.vue

25
src/components/Annex/src/Annex.vue

@ -16,17 +16,20 @@
<div>{{ item.size }}KB</div> <div>{{ item.size }}KB</div>
<div>来自 {{ item.nickname }}</div> <div>来自 {{ item.nickname }}</div>
</div> </div>
<Icon icon="ep:download" v-if="showDownload" class="cursor-pointer mr-2" size="18" @click="downFile(item)" /> <Icon icon="ep:picture" v-if="showPreview" class="cursor-pointer mr-2" :size="18" @click="preview(item)"/>
<Icon icon="ep:delete" class="cursor-pointer" v-if="!hiddenDelete" size="18" @click="deleteAnnex(item.id)" /> <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>
<div class="time mt-6px ">{{ formatDate(item.createTime) }}</div> <div class="time mt-6px ">{{ formatDate(item.createTime) }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<PreviewPDF ref="previewRef" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import PreviewPDF from '@/components/PreviewPDF/index.vue'
import UploadFile from '@/components/UploadFile/src/UploadFile.vue' import UploadFile from '@/components/UploadFile/src/UploadFile.vue'
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
import * as FileApi from '@/api/wms/file' import * as FileApi from '@/api/wms/file'
@ -45,6 +48,10 @@ const props = defineProps({
type: Object, type: Object,
required: true required: true
}, },
showPreview: {
type: Boolean,
required: false
},
showDownload: { showDownload: {
type: Boolean, type: Boolean,
required: false required: false
@ -55,7 +62,7 @@ const props = defineProps({
}, },
}) })
// emit // emit
const emit = defineEmits(['handleAnnexSuccess', 'deleteAnnexSuccess']) const emit = defineEmits(['handleAnnexSuccess', 'deleteAnnexSuccess','previewAnnexHandle'])
// //
const handleAnnexSuccess = () => { const handleAnnexSuccess = () => {
emit('handleAnnexSuccess') emit('handleAnnexSuccess')
@ -75,6 +82,18 @@ const deleteAnnex = async (id) => {
const downFile = (item)=>{ const downFile = (item)=>{
window.open(import.meta.env.VITE_BASE_URL + '/admin-api/infra/file/0/get/' + item.path) 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> </script>

10
src/components/Detail/src/Detail.vue

@ -223,6 +223,7 @@ const props = defineProps({
default: ()=>({ default: ()=>({
label: '附件', label: '附件',
showDownload:false, showDownload:false,
showPreview:false,
hiddenDelete:false hiddenDelete:false
}) })
}, },
@ -460,10 +461,14 @@ const getFileList = async () => {
} }
} }
// //
const getAnnexFileList = async (row:id) => { const getAnnexFileList = async (row) => {
console.log('getAnnexFileList')
props.annexTable?.forEach(async (item) => { props.annexTable?.forEach(async (item) => {
let requstData = {...remarksData.data,tableName: item?.tableName} 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 annexList = await FileApi.getFileList(requstData)
const annexData = annexTableData.value.find(annex=>annex.label === item.label) const annexData = annexTableData.value.find(annex=>annex.label === item.label)
if(annexData){ if(annexData){
@ -476,6 +481,7 @@ const getAnnexFileList = async (row:id) => {
annexList, annexList,
hasSubDetail:item.hasSubDetail||false, hasSubDetail:item.hasSubDetail||false,
subDetailTableData:item.subDetailTableData, subDetailTableData:item.subDetailTableData,
showPreview:item.showPreview||false, //
showDownload:item.showDownload||false, // showDownload:item.showDownload||false, //
hiddenDelete:item.hiddenDelete || false, // hiddenDelete:item.hiddenDelete || false, //
}) })

60
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>

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

@ -53,6 +53,31 @@
<!-- 详情 --> <!-- 详情 -->
<Detail <Detail
ref="detailRef" 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" :isBasic="false"
:allSchemas="SupplierdeliverRecordMain.allSchemas" :allSchemas="SupplierdeliverRecordMain.allSchemas"
:detailAllSchemas="SupplierdeliverRecordDetail.allSchemas" :detailAllSchemas="SupplierdeliverRecordDetail.allSchemas"
@ -79,10 +104,13 @@
<script setup lang="ts"> <script setup lang="ts">
import download from '@/utils/download' import download from '@/utils/download'
import * as SupplierdeliverInspectionDetailApi from '@/api/wms/supplierdeliverInspectionDetail'
import {   SupplierdeliverInspectionDetail,SupplierdeliverInspectionDetailRules} from '../supplierdeliverInspectionDetail/supplierdeliverInspectionDetail.data'
import { SupplierdeliverRecordMain,SupplierdeliverRecordMainRules, import { SupplierdeliverRecordMain,SupplierdeliverRecordMainRules,
SupplierdeliverRecordDetail,SupplierdeliverRecordDetailRules,SupplierdeliverRecordDetailPickingNumer } from './supplierdeliverRecordMain.data' SupplierdeliverRecordDetail,SupplierdeliverRecordDetailRules,SupplierdeliverRecordDetailPickingNumer } from './supplierdeliverRecordMain.data'
import * as SupplierdeliverRecordMainApi from '@/api/wms/supplierdeliverRecordMain' import * as SupplierdeliverRecordMainApi from '@/api/wms/supplierdeliverRecordMain'
import * as SupplierdeliverRecordDetailApi from '@/api/wms/supplierdeliverRecordDetail' import * as SupplierdeliverRecordDetailApi from '@/api/wms/supplierdeliverRecordDetail'
import * as SupplierdeliverRequestDetailApi from '@/api/wms/supplierdeliverRequestDetail'
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { getAccessToken } from '@/utils/auth' import { getAccessToken } from '@/utils/auth'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache' import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
@ -197,9 +225,17 @@ const { getList:getDetailList } = detatableMethods
const { wsCache } = useCache() const { wsCache } = useCache()
/** 详情操作 */ /** 详情操作 */
const detailRef = ref() 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 const departmentCode = wsCache.get(CACHE_KEY.DEPT).find((account) => account.id == row.departmentCode)?.name
if (departmentCode) row.departmentCode = JSON.parse(JSON.stringify(departmentCode)) 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') detailRef.value.openDetail(row, titleName, titleValue,'recordSupplierdeliverMain')
} }

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

@ -82,6 +82,7 @@
prop: 'uploadFile', prop: 'uploadFile',
tableName:'SupplierdeliverInspectionDetail', tableName:'SupplierdeliverInspectionDetail',
hasSubDetail:true, // hasSubDetail:true, //
showPreview:true, //
align:'left', align:'left',
// //
subDetailTableData:{ subDetailTableData:{

Loading…
Cancel
Save