132 lines
5.0 KiB
Vue
132 lines
5.0 KiB
Vue
<template>
|
|
<div class="attachment-wrapper">
|
|
<el-tabs v-model="activeTab" @tab-click="clickTab">
|
|
<el-tab-pane v-for="item in $d.Common_File_Type" :key="item.value" :label="item.label" :name="String(item.value)">
|
|
<UploadTemplate v-if="activeTab === '1' && item.value == activeTab" @PreviewFile="PreviewFile" />
|
|
<ExportTemplate v-if="activeTab === '2' && item.value == activeTab" @PreviewFile="PreviewFile" />
|
|
<EmailTemplate v-if="activeTab === '3' && item.value == activeTab" />
|
|
<CommonTemplate v-if="activeTab === '4' && item.value == activeTab" />
|
|
<SignatureTemplate v-if="activeTab === '5' && item.value == activeTab" />
|
|
<ToolsTemplate v-if="activeTab === '0' && item.value == activeTab" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- 预览 -->
|
|
<el-dialog v-if="Preview.visible" :visible.sync="Preview.visible" :close-on-click-modal="false" :fullscreen="true"
|
|
:title="Preview.title" width="600px" custom-class="base-dialog-wrapper">
|
|
<vue-office-docx v-if="docxTypes.includes(Preview.type)" :src="Preview.path" style="height: calc(100vh - 70px)"
|
|
@rendered="renderedHandler" @error="errorHandler" />
|
|
<vue-office-excel v-else-if="excelTypes.includes(Preview.type)" :src="Preview.path" :options="options"
|
|
style="height: calc(100vh - 70px)" @rendered="renderedHandler" @error="errorHandler" />
|
|
<PreviewFile v-else :file-path="Preview.path" :file-type="Preview.type" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import UploadTemplate from './components/UploadTemplate'
|
|
import ExportTemplate from './components/ExportTemplate'
|
|
import EmailTemplate from './components/EmailTemplate'
|
|
import CommonTemplate from './components/CommonTemplate'
|
|
import SignatureTemplate from './components/SignatureTemplate'
|
|
import ToolsTemplate from './components/ToolsTemplate'
|
|
import VueOfficeDocx from '@vue-office/docx'
|
|
import '@vue-office/docx/lib/index.css'
|
|
import VueOfficeExcel from '@vue-office/excel'
|
|
import '@vue-office/excel/lib/index.css'
|
|
import PreviewFile from '@/components/PreviewFile/index'
|
|
export default {
|
|
name: 'Attachment',
|
|
components: {
|
|
UploadTemplate,
|
|
ExportTemplate,
|
|
EmailTemplate,
|
|
CommonTemplate,
|
|
SignatureTemplate,
|
|
VueOfficeDocx,
|
|
VueOfficeExcel,
|
|
PreviewFile,
|
|
ToolsTemplate
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: null,
|
|
Preview: {
|
|
visible: false,
|
|
title: '',
|
|
type: null,
|
|
path: null,
|
|
},
|
|
excelTypes: ['xlsx', 'xls'],
|
|
docxTypes: ['docx', 'doc'],
|
|
options: {
|
|
xls: false, //预览xlsx文件设为false；预览xls文件设为true
|
|
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
|
|
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
|
|
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
|
|
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
|
|
beforeTransformData: (workbookData) => {
|
|
return workbookData
|
|
}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
|
|
transformData: (workbookData) => {
|
|
return workbookData
|
|
}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.tabActive) {
|
|
this.activeTab = this.$route.query.tabActive
|
|
} else {
|
|
this.activeTab = String(this.$d.Common_File_Type[0].value)
|
|
}
|
|
},
|
|
methods: {
|
|
clickTab(tab, event) {
|
|
this.$router.push({
|
|
path: `/dictionary/attachment?tabActive=${tab.name}`,
|
|
})
|
|
},
|
|
PreviewFile(data) {
|
|
if (!data.path) return false
|
|
let type = data.path
|
|
.substring(data.path.lastIndexOf('.') + 1)
|
|
.toLocaleLowerCase()
|
|
this.Preview.path = data.path
|
|
this.Preview.type = type
|
|
this.Preview.title = data.name
|
|
if (this.excelTypes.includes(type)) {
|
|
this.options.xls = type === 'xls'
|
|
}
|
|
this.Preview.visible = true
|
|
},
|
|
renderedHandler() {
|
|
console.log('渲染完成')
|
|
},
|
|
errorHandler() {
|
|
console.log('渲染失败')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.attachment-wrapper {
|
|
.el-tabs {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.el-tabs__header {
|
|
height: 40px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.el-tabs__content {
|
|
flex: 1;
|
|
|
|
.el-tab-pane {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|