From fba601fa23966ac31f0396460584443a82af4754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=AF=BA?= <1253070437@qq.com>
Date: Wed, 12 Jul 2023 01:56:34 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E6=96=B0=E5=A2=9E=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E5=9B=BE=E7=89=87=E3=80=81word?=
 =?UTF-8?q?=E3=80=81excel=E3=80=81pdf=EF=BC=8C=E5=A6=A5=E5=A6=A5=E7=9A=84?=
 =?UTF-8?q?=E5=AE=89=E6=8E=92=EF=BC=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 snowy-admin-web/package.json                  |   4 +
 .../src/components/XnFilePreview/README.md    |   9 +
 .../src/components/XnFilePreview/index.vue    |  85 ++++++
 snowy-admin-web/src/views/dev/file/detail.vue |   8 +-
 snowy-admin-web/src/views/dev/file/index.vue  | 261 ++++++++++--------
 .../src/views/dev/file/preview.vue            |  16 ++
 6 files changed, 268 insertions(+), 115 deletions(-)
 create mode 100644 snowy-admin-web/src/components/XnFilePreview/README.md
 create mode 100644 snowy-admin-web/src/components/XnFilePreview/index.vue
 create mode 100644 snowy-admin-web/src/views/dev/file/preview.vue

diff --git a/snowy-admin-web/package.json b/snowy-admin-web/package.json
index 73685c51..5b6d142a 100644
--- a/snowy-admin-web/package.json
+++ b/snowy-admin-web/package.json
@@ -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",
diff --git a/snowy-admin-web/src/components/XnFilePreview/README.md b/snowy-admin-web/src/components/XnFilePreview/README.md
new file mode 100644
index 00000000..0e82169e
--- /dev/null
+++ b/snowy-admin-web/src/components/XnFilePreview/README.md
@@ -0,0 +1,9 @@
+# 小诺文件预览的组件
+
+## 说明
+
+该组件支持图片、PDF、OFFICE、WORD在线预览，其他类型的不支持
+
+## 使用
+
+使用的时候直接在界面引入即可，配置相关参数就能行
diff --git a/snowy-admin-web/src/components/XnFilePreview/index.vue b/snowy-admin-web/src/components/XnFilePreview/index.vue
new file mode 100644
index 00000000..9588ca3c
--- /dev/null
+++ b/snowy-admin-web/src/components/XnFilePreview/index.vue
@@ -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>
diff --git a/snowy-admin-web/src/views/dev/file/detail.vue b/snowy-admin-web/src/views/dev/file/detail.vue
index 8a7e0b11..6ac0bfb2 100644
--- a/snowy-admin-web/src/views/dev/file/detail.vue
+++ b/snowy-admin-web/src/views/dev/file/detail.vue
@@ -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="文件引擎">{{
diff --git a/snowy-admin-web/src/views/dev/file/index.vue b/snowy-admin-web/src/views/dev/file/index.vue
index cd8957bc..a485dc87 100644
--- a/snowy-admin-web/src/views/dev/file/index.vue
+++ b/snowy-admin-web/src/views/dev/file/index.vue
@@ -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 = [
diff --git a/snowy-admin-web/src/views/dev/file/preview.vue b/snowy-admin-web/src/views/dev/file/preview.vue
new file mode 100644
index 00000000..7db4a1d1
--- /dev/null
+++ b/snowy-admin-web/src/views/dev/file/preview.vue
@@ -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>