mirror of https://gitee.com/xiaonuobase/snowy
【新增】前端新增文件预览，支持图片、word、excel、pdf，妥妥的安排！
小诺
俞宝山
parent
e643c2c2d2
commit
fba601fa23
|
|
@ -23,6 +23,9 @@
|
||||||
"@chenfengyuan/vue-qrcode": "2.0.0",
|
"@chenfengyuan/vue-qrcode": "2.0.0",
|
||||||
"@highlightjs/vue-plugin": "2.1.0",
|
"@highlightjs/vue-plugin": "2.1.0",
|
||||||
"@tinymce/tinymce-vue": "5.0.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",
|
"ant-design-vue": "3.2.14",
|
||||||
"axios": "1.1.3",
|
"axios": "1.1.3",
|
||||||
"cropperjs": "1.5.12",
|
"cropperjs": "1.5.12",
|
||||||
|
|
@ -45,6 +48,7 @@
|
||||||
"tinymce": "6.2.0",
|
"tinymce": "6.2.0",
|
||||||
"vue": "3.2.44",
|
"vue": "3.2.44",
|
||||||
"vue-cropper": "1.0.5",
|
"vue-cropper": "1.0.5",
|
||||||
|
"vue-demi": "^0.13.11",
|
||||||
"vue-i18n": "9.2.2",
|
"vue-i18n": "9.2.2",
|
||||||
"vue-router": "4.1.6",
|
"vue-router": "4.1.6",
|
||||||
"vue3-colorpicker": "2.0.4",
|
"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>
|
<template>
|
||||||
<xn-form-container
|
<xn-form-container title="详情" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
|
||||||
title="详情"
|
|
||||||
:width="700"
|
|
||||||
:visible="visible"
|
|
||||||
:destroy-on-close="true"
|
|
||||||
@close="onClose"
|
|
||||||
>
|
|
||||||
<a-descriptions :column="1" size="middle" bordered class="mb-2">
|
<a-descriptions :column="1" size="middle" bordered class="mb-2">
|
||||||
<a-descriptions-item label="名称">{{ formData.name }}</a-descriptions-item>
|
<a-descriptions-item label="名称">{{ formData.name }}</a-descriptions-item>
|
||||||
<a-descriptions-item label="文件引擎">{{
|
<a-descriptions-item label="文件引擎">{{
|
||||||
|
|
|
||||||
|
|
@ -1,159 +1,170 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card :bordered="false" style="margin-bottom: 10px">
|
<div v-if="indexShow">
|
||||||
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
|
<a-card :bordered="false" style="margin-bottom: 10px">
|
||||||
<a-row :gutter="24">
|
<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
|
||||||
<a-col :span="8">
|
<a-row :gutter="24">
|
||||||
<a-form-item name="searchKey" label="名称关键词">
|
<a-col :span="8">
|
||||||
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入文件名称关键词" />
|
<a-form-item name="searchKey" label="名称关键词">
|
||||||
</a-form-item>
|
<a-input v-model:value="searchFormState.searchKey" placeholder="请输入文件名称关键词" />
|
||||||
</a-col>
|
</a-form-item>
|
||||||
<a-col :span="8">
|
</a-col>
|
||||||
<a-form-item name="engine" label="存储位置">
|
<a-col :span="8">
|
||||||
<a-select v-model:value="searchFormState.engine" placeholder="请选择存储位置" :options="engineOptions" />
|
<a-form-item name="engine" label="存储位置">
|
||||||
</a-form-item>
|
<a-select v-model:value="searchFormState.engine" placeholder="请选择存储位置" :options="engineOptions" />
|
||||||
</a-col>
|
</a-form-item>
|
||||||
<a-col :span="8">
|
</a-col>
|
||||||
<a-button type="primary" @click="table.refresh(true)">
|
<a-col :span="8">
|
||||||
<template #icon><SearchOutlined /></template>
|
<a-button type="primary" @click="table.refresh(true)">
|
||||||
查询
|
<template #icon><SearchOutlined /></template>
|
||||||
</a-button>
|
查询
|
||||||
<a-button class="snowy-buttom-left" @click="reset">
|
</a-button>
|
||||||
<template #icon><redo-outlined /></template>
|
<a-button class="snowy-buttom-left" @click="reset">
|
||||||
重置
|
<template #icon><redo-outlined /></template>
|
||||||
</a-button>
|
重置
|
||||||
</a-col>
|
</a-button>
|
||||||
</a-row>
|
</a-col>
|
||||||
</a-form>
|
</a-row>
|
||||||
</a-card>
|
</a-form>
|
||||||
<a-card :bordered="false">
|
</a-card>
|
||||||
<s-table
|
<a-card :bordered="false">
|
||||||
ref="table"
|
<s-table
|
||||||
:columns="columns"
|
ref="table"
|
||||||
:data="loadData"
|
:columns="columns"
|
||||||
:expand-row-by-click="true"
|
:data="loadData"
|
||||||
:alert="options.alert.show"
|
:expand-row-by-click="true"
|
||||||
bordered
|
:alert="options.alert.show"
|
||||||
:row-key="(record) => record.id"
|
bordered
|
||||||
:row-selection="options.rowSelection"
|
:row-key="(record) => record.id"
|
||||||
>
|
:row-selection="options.rowSelection"
|
||||||
<template #operator class="table-operator">
|
>
|
||||||
<a-space>
|
<template #operator class="table-operator">
|
||||||
<a-button type="primary" @click="() => uploadFormRef.openUpload()">
|
<a-space>
|
||||||
<UploadOutlined />
|
<a-button type="primary" @click="() => uploadFormRef.openUpload()">
|
||||||
文件上传
|
<UploadOutlined />
|
||||||
</a-button>
|
文件上传
|
||||||
<xn-batch-delete :selectedRowKeys="selectedRowKeys" @batchDelete="deleteBatchFile" />
|
</a-button>
|
||||||
</a-space>
|
<xn-batch-delete :selectedRowKeys="selectedRowKeys" @batchDelete="deleteBatchFile" />
|
||||||
</template>
|
</a-space>
|
||||||
<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 />
|
|
||||||
</template>
|
</template>
|
||||||
<template v-if="column.dataIndex === 'engine'">
|
<template #bodyCell="{ column, record }">
|
||||||
{{ $TOOL.dictTypeData('FILE_ENGINE', record.engine) }}
|
<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>
|
||||||
<template v-if="column.dataIndex === 'action'">
|
</s-table>
|
||||||
<a @click="detailRef.onOpen(record)">详情</a>
|
</a-card>
|
||||||
<a-divider type="vertical" />
|
<uploadForm ref="uploadFormRef" @successful="table.refresh(true)" />
|
||||||
<a :href="record.downloadPath" target="_blank">下载</a>
|
<detail ref="detailRef" />
|
||||||
<a-divider type="vertical" />
|
</div>
|
||||||
<a-popconfirm title="删除此文件？" @confirm="deleteFile(record)">
|
<preview v-if="!indexShow" ref="previewRef" @goBack="previewBack" />
|
||||||
<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" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="devFile">
|
<script setup name="devFile">
|
||||||
import fileApi from '@/api/dev/fileApi'
|
import fileApi from '@/api/dev/fileApi'
|
||||||
import uploadForm from './uploadForm.vue'
|
import UploadForm from './uploadForm.vue'
|
||||||
import detail from './detail.vue'
|
import Detail from './detail.vue'
|
||||||
|
import Preview from './preview.vue'
|
||||||
import tool from '@/utils/tool'
|
import tool from '@/utils/tool'
|
||||||
|
|
||||||
// 定义tableDOM
|
// 定义tableDOM
|
||||||
const table = ref()
|
const table = ref()
|
||||||
const form = ref()
|
const form = ref()
|
||||||
const searchFormRef = ref()
|
const searchFormRef = ref()
|
||||||
let searchFormState = reactive({})
|
const searchFormState = ref({})
|
||||||
const uploadFormRef = ref()
|
const uploadFormRef = ref()
|
||||||
const detailRef = ref()
|
const detailRef = ref()
|
||||||
|
const previewRef = ref()
|
||||||
|
const indexShow = ref(true)
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: '文件名称',
|
title: '文件名称',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
ellipsis: true,
|
ellipsis: true
|
||||||
width: '280px'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '缩略图',
|
title: '缩略图',
|
||||||
dataIndex: 'thumbnail',
|
dataIndex: 'thumbnail',
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
width: '80px'
|
width: 80
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '文件大小',
|
title: '文件大小',
|
||||||
dataIndex: 'sizeInfo',
|
dataIndex: 'sizeInfo',
|
||||||
ellipsis: true
|
ellipsis: true,
|
||||||
|
width: 120
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '文件后缀',
|
title: '文件后缀',
|
||||||
dataIndex: 'suffix',
|
dataIndex: 'suffix',
|
||||||
ellipsis: true
|
ellipsis: true,
|
||||||
|
width: 120
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '储存引擎',
|
title: '储存引擎',
|
||||||
dataIndex: 'engine',
|
dataIndex: 'engine',
|
||||||
ellipsis: true
|
ellipsis: true,
|
||||||
|
width: 120
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
dataIndex: 'action',
|
dataIndex: 'action',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: '180px'
|
width: 220
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
let selectedRowKeys = ref([])
|
const selectedRowKeys = ref([])
|
||||||
// 列表选择配置
|
// 列表选择配置
|
||||||
const options = {
|
const options = {
|
||||||
alert: {
|
alert: {
|
||||||
show: false,
|
show: false,
|
||||||
clear: () => {
|
clear: () => {
|
||||||
selectedRowKeys = ref([])
|
selectedRowKeys.value = ref([])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
rowSelection: {
|
rowSelection: {
|
||||||
|
|
@ -164,7 +175,7 @@
|
||||||
}
|
}
|
||||||
// 表格查询 返回 Promise 对象
|
// 表格查询 返回 Promise 对象
|
||||||
const loadData = (parameter) => {
|
const loadData = (parameter) => {
|
||||||
return fileApi.filePage(Object.assign(parameter, searchFormState)).then((data) => {
|
return fileApi.filePage(Object.assign(parameter, searchFormState.value)).then((data) => {
|
||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -173,6 +184,40 @@
|
||||||
searchFormRef.value.resetFields()
|
searchFormRef.value.resetFields()
|
||||||
table.value.refresh(true)
|
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) => {
|
const deleteFile = (record) => {
|
||||||
let params = [
|
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