mirror of https://gitee.com/xiaonuobase/snowy
【新增】前端新增文件预览，支持图片、word、excel、pdf，妥妥的安排！
小诺
俞宝山
parent
e643c2c2d2
commit
fba601fa23
|
|
@ -23,6 +23,9 @@
|
|||
"@chenfengyuan/vue-qrcode": "2.0.0",
|
||||
"@highlightjs/vue-plugin": "2.1.0",
|
||||
"@tinymce/tinymce-vue": "5.0.0",
|
||||
"@vue-office/docx": "1.2.0",
|
||||
"@vue-office/excel": "1.2.0",
|
||||
"@vue-office/pdf": "1.2.0",
|
||||
"ant-design-vue": "3.2.14",
|
||||
"axios": "1.1.3",
|
||||
"cropperjs": "1.5.12",
|
||||
|
|
@ -45,6 +48,7 @@
|
|||
"tinymce": "6.2.0",
|
||||
"vue": "3.2.44",
|
||||
"vue-cropper": "1.0.5",
|
||||
"vue-demi": "^0.13.11",
|
||||
"vue-i18n": "9.2.2",
|
||||
"vue-router": "4.1.6",
|
||||
"vue3-colorpicker": "2.0.4",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
# 小诺文件预览的组件
|
||||
|
||||
## 说明
|
||||
|
||||
该组件支持图片、PDF、OFFICE、WORD在线预览，其他类型的不支持
|
||||
|
||||
## 使用
|
||||
|
||||
使用的时候直接在界面引入即可，配置相关参数就能行
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<a-button type="primary" @click="emit('goBack')" class="go-back-button">
|
||||
<template #icon><rollback-outlined /></template>
|
||||
返回
|
||||
</a-button>
|
||||
<a-card :bordered="false" :body-style="{ padding: '0px' }">
|
||||
<vue-office-docx
|
||||
v-if="props.fileType === 'doc' || props.fileType === 'docx'"
|
||||
:src="props.src"
|
||||
style="height: 83vh"
|
||||
@rendered="renderedHandler"
|
||||
/>
|
||||
<vue-office-excel
|
||||
v-else-if="props.fileType === 'xls' || props.fileType === 'xlsx'"
|
||||
:src="props.src"
|
||||
style="height: 83vh"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
<vue-office-pdf
|
||||
v-else-if="props.fileType === 'pdf'"
|
||||
:src="props.src"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
<img
|
||||
v-else-if="
|
||||
props.fileType.toLowerCase() === 'png' ||
|
||||
props.fileType.toLowerCase() === 'jpg' ||
|
||||
props.fileType.toLowerCase() === 'gif' ||
|
||||
props.fileType.toLowerCase() === 'bmp' ||
|
||||
props.fileType.toLowerCase() === 'jpeg' ||
|
||||
props.fileType.toLowerCase() === 'ico' ||
|
||||
props.fileType.toLowerCase() === 'svg'
|
||||
"
|
||||
:src="props.src"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<a-result v-else status="warning" title="不支持预览的文件类型" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { message } from 'ant-design-vue'
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
//引入相关样式
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
//引入VueOfficeExcel组件
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
//引入相关样式
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
|
||||
const emit = defineEmits({ goBack: null })
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true
|
||||
},
|
||||
// 上传方式 defaults || drag
|
||||
fileType: {
|
||||
type: String,
|
||||
default: 'defaults',
|
||||
required: false
|
||||
}
|
||||
})
|
||||
// 渲染完成
|
||||
const renderedHandler = () => {}
|
||||
// 渲染失败
|
||||
const errorHandler = () => {
|
||||
message.warning('渲染失败，请尝试重新打开！')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.go-back-button {
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<xn-form-container
|
||||
title="详情"
|
||||
:width="700"
|
||||
:visible="visible"
|
||||
:destroy-on-close="true"
|
||||
@close="onClose"
|
||||
>
|
||||
<xn-form-container title="详情" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
|
||||
<a-descriptions :column="1" size="middle" bordered class="mb-2">
|
||||
<a-descriptions-item label="名称">{{ formData.name }}</a-descriptions-item>
|
||||
<a-descriptions-item label="文件引擎">{{
|
||||
|
|
|
|||
|
|
@ -1,159 +1,170 @@
|
|||
<template>
|
||||
<a-card :bordered="false" style="margin-bottom: 10px">
|
||||
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item name="searchKey" label="名称关键词">
|
||||
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入文件名称关键词" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item name="engine" label="存储位置">
|
||||
<a-select v-model:value="searchFormState.engine" placeholder="请选择存储位置" :options="engineOptions" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-button type="primary" @click="table.refresh(true)">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button class="snowy-buttom-left" @click="reset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<s-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:expand-row-by-click="true"
|
||||
:alert="options.alert.show"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:row-selection="options.rowSelection"
|
||||
>
|
||||
<template #operator class="table-operator">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="() => uploadFormRef.openUpload()">
|
||||
<UploadOutlined />
|
||||
文件上传
|
||||
</a-button>
|
||||
<xn-batch-delete :selectedRowKeys="selectedRowKeys" @batchDelete="deleteBatchFile" />
|
||||
</a-space>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'thumbnail'">
|
||||
<img
|
||||
:src="record.thumbnail"
|
||||
class="record-img"
|
||||
v-if="
|
||||
record.suffix === 'png' ||
|
||||
record.suffix === 'jpg' ||
|
||||
record.suffix === 'jpng' ||
|
||||
record.suffix === 'ico' ||
|
||||
record.suffix === 'gif'
|
||||
"
|
||||
/>
|
||||
<img
|
||||
src="/src/assets/images/fileImg/docx.png"
|
||||
class="record-img"
|
||||
v-else-if="record.suffix === 'doc' || record.suffix === 'docx'"
|
||||
/>
|
||||
<img
|
||||
src="/src/assets/images/fileImg/xlsx.png"
|
||||
class="record-img"
|
||||
v-else-if="record.suffix === 'xls' || record.suffix === 'xlsx'"
|
||||
/>
|
||||
<img src="/src/assets/images/fileImg/zip.png" class="record-img" v-else-if="record.suffix === 'zip'" />
|
||||
<img src="/src/assets/images/fileImg/rar.png" class="record-img" v-else-if="record.suffix === 'rar'" />
|
||||
<img
|
||||
src="/src/assets/images/fileImg/ppt.png"
|
||||
class="record-img"
|
||||
v-else-if="record.suffix === 'ppt' || record.suffix === 'pptx'"
|
||||
/>
|
||||
<img src="/src/assets/images/fileImg/txt.png" class="record-img" v-else-if="record.suffix === 'txt'" />
|
||||
<img src="/src/assets/images/fileImg/html.png" class="record-img" v-else-if="record.suffix === 'html'" />
|
||||
<img src="/src/assets/images/fileImg/file.png" class="record-img" v-else />
|
||||
<div v-if="indexShow">
|
||||
<a-card :bordered="false" style="margin-bottom: 10px">
|
||||
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-form-item name="searchKey" label="名称关键词">
|
||||
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入文件名称关键词" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item name="engine" label="存储位置">
|
||||
<a-select v-model:value="searchFormState.engine" placeholder="请选择存储位置" :options="engineOptions" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-button type="primary" @click="table.refresh(true)">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button class="snowy-buttom-left" @click="reset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
<s-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:expand-row-by-click="true"
|
||||
:alert="options.alert.show"
|
||||
bordered
|
||||
:row-key="(record) => record.id"
|
||||
:row-selection="options.rowSelection"
|
||||
>
|
||||
<template #operator class="table-operator">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="() => uploadFormRef.openUpload()">
|
||||
<UploadOutlined />
|
||||
文件上传
|
||||
</a-button>
|
||||
<xn-batch-delete :selectedRowKeys="selectedRowKeys" @batchDelete="deleteBatchFile" />
|
||||
</a-space>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'engine'">
|
||||
{{ $TOOL.dictTypeData('FILE_ENGINE', record.engine) }}
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'thumbnail'">
|
||||
<img
|
||||
:src="record.thumbnail"
|
||||
class="record-img"
|
||||
v-if="
|
||||
record.suffix === 'png' ||
|
||||
record.suffix === 'jpg' ||
|
||||
record.suffix === 'jpeg' ||
|
||||
record.suffix === 'ico' ||
|
||||
record.suffix === 'bmp' ||
|
||||
record.suffix === 'gif'
|
||||
"
|
||||
/>
|
||||
<img
|
||||
src="/src/assets/images/fileImg/docx.png"
|
||||
class="record-img"
|
||||
v-else-if="record.suffix === 'doc' || record.suffix === 'docx'"
|
||||
/>
|
||||
<img
|
||||
src="/src/assets/images/fileImg/xlsx.png"
|
||||
class="record-img"
|
||||
v-else-if="record.suffix === 'xls' || record.suffix === 'xlsx'"
|
||||
/>
|
||||
<img src="/src/assets/images/fileImg/zip.png" class="record-img" v-else-if="record.suffix === 'zip'" />
|
||||
<img src="/src/assets/images/fileImg/rar.png" class="record-img" v-else-if="record.suffix === 'rar'" />
|
||||
<img
|
||||
src="/src/assets/images/fileImg/ppt.png"
|
||||
class="record-img"
|
||||
v-else-if="record.suffix === 'ppt' || record.suffix === 'pptx'"
|
||||
/>
|
||||
<img src="/src/assets/images/fileImg/txt.png" class="record-img" v-else-if="record.suffix === 'txt'" />
|
||||
<img src="/src/assets/images/fileImg/html.png" class="record-img" v-else-if="record.suffix === 'html'" />
|
||||
<img src="/src/assets/images/fileImg/file.png" class="record-img" v-else />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'engine'">
|
||||
{{ $TOOL.dictTypeData('FILE_ENGINE', record.engine) }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a v-if="previewDisplay(record)" @click="onPreview(record)">预览</a>
|
||||
<a-divider v-if="previewDisplay(record)" type="vertical" />
|
||||
<a @click="detailRef.onOpen(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a :href="record.downloadPath" target="_blank">下载</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="删除此文件？" @confirm="deleteFile(record)">
|
||||
<a-button type="link" danger size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a @click="detailRef.onOpen(record)">详情</a>
|
||||
<a-divider type="vertical" />
|
||||
<a :href="record.downloadPath" target="_blank">下载</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="删除此文件？" @confirm="deleteFile(record)">
|
||||
<a-button type="link" danger size="small">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</s-table>
|
||||
</a-card>
|
||||
<uploadForm ref="uploadFormRef" @successful="table.refresh(true)" />
|
||||
<detail ref="detailRef" />
|
||||
</s-table>
|
||||
</a-card>
|
||||
<uploadForm ref="uploadFormRef" @successful="table.refresh(true)" />
|
||||
<detail ref="detailRef" />
|
||||
</div>
|
||||
<preview v-if="!indexShow" ref="previewRef" @goBack="previewBack" />
|
||||
</template>
|
||||
|
||||
<script setup name="devFile">
|
||||
import fileApi from '@/api/dev/fileApi'
|
||||
import uploadForm from './uploadForm.vue'
|
||||
import detail from './detail.vue'
|
||||
import UploadForm from './uploadForm.vue'
|
||||
import Detail from './detail.vue'
|
||||
import Preview from './preview.vue'
|
||||
import tool from '@/utils/tool'
|
||||
|
||||
// 定义tableDOM
|
||||
const table = ref()
|
||||
const form = ref()
|
||||
const searchFormRef = ref()
|
||||
let searchFormState = reactive({})
|
||||
const searchFormState = ref({})
|
||||
const uploadFormRef = ref()
|
||||
const detailRef = ref()
|
||||
const previewRef = ref()
|
||||
const indexShow = ref(true)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '文件名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true,
|
||||
width: '280px'
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '缩略图',
|
||||
dataIndex: 'thumbnail',
|
||||
ellipsis: true,
|
||||
width: '80px'
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
dataIndex: 'sizeInfo',
|
||||
ellipsis: true
|
||||
ellipsis: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '文件后缀',
|
||||
dataIndex: 'suffix',
|
||||
ellipsis: true
|
||||
ellipsis: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '储存引擎',
|
||||
dataIndex: 'engine',
|
||||
ellipsis: true
|
||||
ellipsis: true,
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: '180px'
|
||||
width: 220
|
||||
}
|
||||
]
|
||||
let selectedRowKeys = ref([])
|
||||
const selectedRowKeys = ref([])
|
||||
// 列表选择配置
|
||||
const options = {
|
||||
alert: {
|
||||
show: false,
|
||||
clear: () => {
|
||||
selectedRowKeys = ref([])
|
||||
selectedRowKeys.value = ref([])
|
||||
}
|
||||
},
|
||||
rowSelection: {
|
||||
|
|
@ -164,7 +175,7 @@
|
|||
}
|
||||
// 表格查询 返回 Promise 对象
|
||||
const loadData = (parameter) => {
|
||||
return fileApi.filePage(Object.assign(parameter, searchFormState)).then((data) => {
|
||||
return fileApi.filePage(Object.assign(parameter, searchFormState.value)).then((data) => {
|
||||
return data
|
||||
})
|
||||
}
|
||||
|
|
@ -173,6 +184,40 @@
|
|||
searchFormRef.value.resetFields()
|
||||
table.value.refresh(true)
|
||||
}
|
||||
// 判断是否显示预览按钮
|
||||
const previewDisplay = (record) => {
|
||||
if (!record.suffix) {
|
||||
return false
|
||||
}
|
||||
const suffix = record.suffix.toLowerCase()
|
||||
if (
|
||||
suffix === 'doc' ||
|
||||
suffix === 'docx' ||
|
||||
suffix === 'xls' ||
|
||||
suffix === 'xlsx' ||
|
||||
suffix === 'pdf' ||
|
||||
suffix === 'jpg' ||
|
||||
suffix === 'png' ||
|
||||
suffix === 'gif' ||
|
||||
suffix === 'svg' ||
|
||||
suffix === 'ico' ||
|
||||
suffix === 'tmp' ||
|
||||
suffix === 'jpeg'
|
||||
) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
// 预览
|
||||
const onPreview = (record) => {
|
||||
indexShow.value = false
|
||||
nextTick(() => {
|
||||
previewRef.value.onOpen(record)
|
||||
})
|
||||
}
|
||||
// 预览返回
|
||||
const previewBack = () => {
|
||||
indexShow.value = true
|
||||
}
|
||||
// 删除
|
||||
const deleteFile = (record) => {
|
||||
let params = [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<xn-file-preview :src="src" :file-type="fileType" @goBack="emit('goBack')" />
|
||||
</template>
|
||||
|
||||
<script setup name="filePreview">
|
||||
const src = ref()
|
||||
const fileType = ref()
|
||||
const emit = defineEmits({ goBack: null })
|
||||
const onOpen = (record) => {
|
||||
src.value = record.downloadPath
|
||||
fileType.value = record.suffix
|
||||
}
|
||||
defineExpose({
|
||||
onOpen
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue