备货单 添加预览 跟进列表分页 审批记录显示问题处理
This commit is contained in:
浅念
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visibleLocal"
|
||||
:title="currentFile?.name || '文件预览'"
|
||||
:close-on-click-modal="false"
|
||||
:destroy-on-close="false"
|
||||
width="90%"
|
||||
:fullscreen="isFullscreen"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div class="file-preview-toolbar">
|
||||
<div class="left">
|
||||
<!-- <el-button-group>
|
||||
<el-button size="small" @click="prevFile" :disabled="!hasPrev">上一页</el-button>
|
||||
<el-button size="small" @click="nextFile" :disabled="!hasNext">下一页</el-button>
|
||||
</el-button-group>
|
||||
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-button size="small" @click="zoomOut">-</el-button>
|
||||
<el-button size="small" @click="resetZoom">重置</el-button>
|
||||
<el-button size="small" @click="zoomIn">+</el-button>
|
||||
|
||||
<el-divider direction="vertical" /> -->
|
||||
|
||||
<!-- <el-button size="small" @click="rotateLeft">⟲</el-button> -->
|
||||
<!-- <el-button size="small" @click="rotateRight">⟳</el-button> -->
|
||||
|
||||
<!-- <el-divider direction="vertical" />
|
||||
|
||||
<el-button size="small" @click="toggleFullscreen">{{
|
||||
isFullscreen ? '退出全屏' : '全屏'
|
||||
}}</el-button> -->
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<!-- <el-button size="small" type="primary" :href="currentFile?.url" target="_blank"
|
||||
>在新标签打开</el-button
|
||||
> -->
|
||||
<el-button size="small" @click="downloadCurrent">下载</el-button>
|
||||
<el-button size="small" type="danger" @click="handleClose">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-preview-body">
|
||||
<template v-if="!currentFile">
|
||||
<div class="no-file">无要预览的文件</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<!-- IMAGE -->
|
||||
<div v-if="fileType === 'image'" class="viewer-wrap">
|
||||
<div class="viewer" :style="viewerStyle">
|
||||
<img :src="currentFile.url" @error="onError" @load="onLoadImage" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PDF -->
|
||||
<div v-else-if="fileType === 'pdf'" class="viewer-wrap">
|
||||
<div class="viewer" :style="viewerStyle">
|
||||
<!-- 使用 object / iframe 作为预览，支持大多数现代浏览器 -->
|
||||
<object
|
||||
:data="appendPdfParams(currentFile.url)"
|
||||
type="application/pdf"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<iframe :src="appendPdfParams(currentFile.url)" width="100%" height="100%"></iframe>
|
||||
<div class="fallback"
|
||||
>无法在浏览器内预览 PDF。<a :href="currentFile.url" target="_blank"
|
||||
>点击打开</a
|
||||
></div
|
||||
>
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OFFICE (Word, Excel, PPT) 使用微软 Office 在线查看器，仅当文件对外可访问时有效 -->
|
||||
<div v-else-if="fileType === 'office'" class="viewer-wrap">
|
||||
<div class="viewer" :style="viewerStyle">
|
||||
<template v-if="isHttpUrl(currentFile.url)">
|
||||
<iframe
|
||||
:src="officeViewerUrl(currentFile.url)"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="fallback"
|
||||
>Office 文件必须是可通过公网访问的 URL 才能使用在线预览。<a
|
||||
:href="currentFile.url"
|
||||
target="_blank"
|
||||
>点击打开或下载</a
|
||||
></div
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文本 / 代码 -->
|
||||
<div v-else-if="fileType === 'text'" class="viewer-wrap">
|
||||
<div class="viewer text-viewer" :style="viewerStyle">
|
||||
<pre v-if="textContent !== null">{{ textContent }}</pre>
|
||||
<div v-else class="loading">正在加载文本内容...</div>
|
||||
<div v-if="textError" class="error">加载文本失败：{{ textError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未知 -->
|
||||
<div v-else class="viewer-wrap unknown-viewer">
|
||||
<div class="viewer" :style="viewerStyle">
|
||||
<div class="unknown">
|
||||
<p>无法在线预览此类型文件。</p>
|
||||
<p><a :href="currentFile.url" target="_blank">点击打开或下载文件</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="footer-info">{{ currentFile?.name || '' }}</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="FilesPreviews">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// --- Props ---
|
||||
interface FileItem {
|
||||
name?: string
|
||||
url: string
|
||||
mime?: string // 可选，优先使用
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
file?: FileItem | null // 单文件
|
||||
files?: FileItem[] | null // 多文件
|
||||
startIndex?: number
|
||||
enableFullscreen?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: boolean): void
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
// --- Local state ---
|
||||
const visibleLocal = ref<boolean>(!!props.modelValue)
|
||||
const currentIndex = ref<number>(props.startIndex ?? 0)
|
||||
const isFullscreen = ref<boolean>(!!props.enableFullscreen)
|
||||
const zoom = ref<number>(1)
|
||||
const rotate = ref<number>(0) // deg
|
||||
const textContent = ref<string | null>(null)
|
||||
const textError = ref<string | null>(null)
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(v) => (visibleLocal.value = v)
|
||||
)
|
||||
watch(visibleLocal, (v) => emit('update:modelValue', v))
|
||||
|
||||
watch(
|
||||
() => props.file,
|
||||
() => {
|
||||
currentIndex.value = 0
|
||||
resetViewState()
|
||||
loadTextIfNeeded()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.files,
|
||||
() => {
|
||||
currentIndex.value = props.startIndex ?? 0
|
||||
resetViewState()
|
||||
loadTextIfNeeded()
|
||||
}
|
||||
)
|
||||
|
||||
watch(currentIndex, () => {
|
||||
resetViewState(false)
|
||||
loadTextIfNeeded()
|
||||
})
|
||||
|
||||
function resetViewState(clearText = true) {
|
||||
zoom.value = 1
|
||||
rotate.value = 0
|
||||
if (clearText) {
|
||||
textContent.value = null
|
||||
textError.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const currentFile = computed((): FileItem | null => {
|
||||
if (props.files && props.files.length > 0) {
|
||||
const idx = Math.min(Math.max(0, currentIndex.value), props.files.length - 1)
|
||||
return props.files[idx]
|
||||
}
|
||||
return props.file ?? null
|
||||
})
|
||||
|
||||
const hasNext = computed(
|
||||
() => !!(props.files && currentIndex.value < (props.files?.length ?? 0) - 1)
|
||||
)
|
||||
const hasPrev = computed(() => !!(props.files && currentIndex.value > 0))
|
||||
|
||||
function prevFile() {
|
||||
if (hasPrev.value) currentIndex.value -= 1
|
||||
}
|
||||
function nextFile() {
|
||||
if (hasNext.value) currentIndex.value += 1
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
visibleLocal.value = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// --- Viewer helpers ---
|
||||
function getExtension(name = '') {
|
||||
const m = name.split('.')
|
||||
return (m.length > 1 ? m[m.length - 1].toLowerCase() : '').trim()
|
||||
}
|
||||
|
||||
function mimeFromName(name = '') {
|
||||
const ext = getExtension(name)
|
||||
const map: Record<string, string> = {
|
||||
pdf: 'application/pdf',
|
||||
png: 'image/png',
|
||||
jpg: 'image/jpeg',
|
||||
jpeg: 'image/jpeg',
|
||||
gif: 'image/gif',
|
||||
bmp: 'image/bmp',
|
||||
webp: 'image/webp',
|
||||
txt: 'text/plain',
|
||||
md: 'text/markdown',
|
||||
csv: 'text/csv',
|
||||
doc: 'application/msword',
|
||||
docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
xls: 'application/vnd.ms-excel',
|
||||
xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
ppt: 'application/vnd.ms-powerpoint',
|
||||
pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
|
||||
}
|
||||
return map[ext] ?? ''
|
||||
}
|
||||
|
||||
const fileType = computed(() => {
|
||||
const f = currentFile.value
|
||||
if (!f) return 'unknown'
|
||||
const mime = (f.mime || mimeFromName(f.name) || '').toLowerCase()
|
||||
const ext = getExtension(f.name)
|
||||
|
||||
if (mime.startsWith('image/') || ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'].includes(ext))
|
||||
return 'image'
|
||||
if (mime === 'application/pdf' || ext === 'pdf') return 'pdf'
|
||||
if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) return 'office'
|
||||
if (mime.startsWith('text/') || ['txt', 'md', 'csv', 'log', 'json', 'xml'].includes(ext))
|
||||
return 'text'
|
||||
return 'unknown'
|
||||
})
|
||||
|
||||
function isHttpUrl(u?: string) {
|
||||
return !!u && /^https?:\/\//i.test(u)
|
||||
}
|
||||
|
||||
function officeViewerUrl(url: string) {
|
||||
// 使用微软 Office 在线查看器
|
||||
return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
|
||||
}
|
||||
|
||||
function appendPdfParams(url: string) {
|
||||
// 某些浏览器可以在 pdf 后加参数调整行为，例如 #toolbar=0
|
||||
return url
|
||||
}
|
||||
|
||||
// --- transform style for viewer ---
|
||||
const viewerStyle = computed(() => {
|
||||
return {
|
||||
transform: `scale(${zoom.value}) rotate(${rotate.value}deg)`,
|
||||
transformOrigin: 'center top'
|
||||
} as Record<string, string>
|
||||
})
|
||||
|
||||
function zoomIn() {
|
||||
zoom.value = Math.min(zoom.value + 0.25, 4)
|
||||
}
|
||||
function zoomOut() {
|
||||
zoom.value = Math.max(zoom.value - 0.25, 0.25)
|
||||
}
|
||||
function resetZoom() {
|
||||
zoom.value = 1
|
||||
rotate.value = 0
|
||||
}
|
||||
function rotateLeft() {
|
||||
rotate.value = (rotate.value - 90) % 360
|
||||
}
|
||||
function rotateRight() {
|
||||
rotate.value = (rotate.value + 90) % 360
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
isFullscreen.value = !isFullscreen.value
|
||||
}
|
||||
|
||||
// --- text loading ---
|
||||
async function loadTextIfNeeded() {
|
||||
if (!currentFile.value) return
|
||||
if (fileType.value !== 'text') return
|
||||
|
||||
textContent.value = null
|
||||
textError.value = null
|
||||
|
||||
try {
|
||||
const resp = await fetch(currentFile.value.url)
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
|
||||
const txt = await resp.text()
|
||||
textContent.value = txt
|
||||
} catch (err: any) {
|
||||
textError.value = String(err?.message ?? err)
|
||||
}
|
||||
}
|
||||
|
||||
// --- image handlers ---
|
||||
function onError() {
|
||||
ElMessage.warning('图片加载失败')
|
||||
}
|
||||
function onLoadImage() {
|
||||
// 可以在这里获取自然尺寸进行布局优化
|
||||
}
|
||||
|
||||
function downloadCurrent() {
|
||||
if (!currentFile.value) return
|
||||
// 打开下载链接（浏览器通常会下载）
|
||||
const a = document.createElement('a')
|
||||
a.href = currentFile.value.url
|
||||
a.download = currentFile.value.name || ''
|
||||
a.target = '_blank'
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
|
||||
// expose some controls externally if needed
|
||||
onMounted(() => {
|
||||
if (props.modelValue) visibleLocal.value = true
|
||||
if (fileType.value === 'text') loadTextIfNeeded()
|
||||
})
|
||||
// 导出组件
|
||||
defineExpose({})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.file-preview-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.file-preview-body {
|
||||
height: calc(80vh - 80px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.viewer-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
}
|
||||
.viewer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.viewer img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
}
|
||||
.text-viewer pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.unknown-viewer .unknown {
|
||||
text-align: center;
|
||||
}
|
||||
.no-file {
|
||||
color: #999;
|
||||
}
|
||||
.footer-info {
|
||||
color: #666;
|
||||
}
|
||||
.loading {
|
||||
color: #999;
|
||||
}
|
||||
.error {
|
||||
color: #f56c6c;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user