158 lines
5.0 KiB
Vue
158 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"
|
||
/>
|
||
</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: 80vh"
|
||
@rendered="renderedHandler"
|
||
@error="errorHandler"
|
||
/>
|
||
<vue-office-excel
|
||
v-else-if="excelTypes.includes(Preview.type)"
|
||
:src="Preview.path"
|
||
:options="options"
|
||
style="height: 80vh"
|
||
@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 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,
|
||
},
|
||
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>
|
||
|