gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【新增】前端新增文件预览，支持图片、word、excel、pdf，妥妥的安排！

Browse Source
pull/134/MERGE
小诺 1 year ago committed by 俞宝山
parent e643c2c2d2
commit fba601fa23
6 changed files with 268 additions and 115 deletions
Show Stats Download Patch File Download Diff File

4
snowy-admin-web/package.json
Unescape View File

@ -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",

9
snowy-admin-web/src/components/XnFilePreview/README.md
Unescape View File

@ -0,0 +1,9 @@
# 小诺文件预览的组件
## 说明
该组件支持图片、PDF、OFFICE、WORD在线预览，其他类型的不支持
## 使用
使用的时候直接在界面引入即可，配置相关参数就能行

85
snowy-admin-web/src/components/XnFilePreview/index.vue
Unescape View File

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

8
snowy-admin-web/src/views/dev/file/detail.vue
Unescape View File

@ -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="文件引擎">{{

261
snowy-admin-web/src/views/dev/file/index.vue
Unescape View File

@ -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 = [

16
snowy-admin-web/src/views/dev/file/preview.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save