DESKTOP-6C3NK6N\WXS
158 lines
5.1 KiB
Vue
158 lines
5.1 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: 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 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>
|
|
|