You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.2 KiB
149 lines
4.2 KiB
<template>
|
|
<aside :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]">
|
|
<div class="aui-sidebar__inner">
|
|
<el-menu
|
|
:collapse="$store.state.sidebarFold"
|
|
:unique-opened="true"
|
|
:collapse-transition="false"
|
|
class="aui-sidebar__menu"
|
|
active-text-color="#fff"
|
|
:default-active="defauleActiveIndex"
|
|
>
|
|
<sub-menu v-for="menu in $store.state.sidebarMenuList" :key="menu.id" :menu="menu" />
|
|
</el-menu>
|
|
</div>
|
|
<!-- <el-tooltip class="item" effect="dark" content="可点击下载操作手册" placement="top">-->
|
|
<!-- <div v-if="!$store.state.sidebarFold" class="sidebar-operation-manual" style="width:30px" @click="exportclick(wordData)">-->
|
|
<!-- <i class="el-icon-question" />-->
|
|
<!-- </div>-->
|
|
<!-- <div v-else class="sidebar-operation-manual" style="width:40px" @click="exportclick(wordData)">-->
|
|
<!-- <i class="el-icon-question" style="font-size:18px;" />-->
|
|
<!-- </div>-->
|
|
<!-- </el-tooltip>-->
|
|
</aside>
|
|
</template>
|
|
|
|
<script>
|
|
import SubMenu from './main-sidebar-sub-menu'
|
|
import docxtemplater from 'docxtemplater'
|
|
import PizZip from 'pizzip'
|
|
import JSZipUtils from 'jszip-utils'
|
|
import { saveAs } from 'file-saver'
|
|
export default {
|
|
components: {
|
|
SubMenu
|
|
},
|
|
data() {
|
|
return {
|
|
fileHref: '',
|
|
wordData: {
|
|
user_name: 'XXX',
|
|
remark: ''
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
defauleActiveIndex: {
|
|
get() {
|
|
return this.$store.getters.defauleActiveIndex
|
|
},
|
|
set(val) {
|
|
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
const defauleActiveIndex = window.sessionStorage.getItem('defauleActiveIndex')
|
|
? window.sessionStorage.getItem('defauleActiveIndex') : window.SITE_CONFIG.menuList[0].children[0].id
|
|
setTimeout(() => {
|
|
this.$store.state.sidebarMenuList = window.SITE_CONFIG.menuList
|
|
}, 200)
|
|
this.$store.commit('activeIndexFun', defauleActiveIndex)
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
exportclick(e) {
|
|
this.$message('暂时没有操作手册可下载')
|
|
return
|
|
const docxsrc = '../../../static/word/operation-manual-YSG.docx' // 模板文件的位置
|
|
const docxname = '眼科电子病历操作手册'// 导出文件的名字
|
|
// 读取并获得模板文件的二进制内容
|
|
JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
|
|
// docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
|
|
if (error) {
|
|
throw error
|
|
}
|
|
|
|
// 创建一个PizZip实例，内容为模板的内容
|
|
const zip = new PizZip(content)
|
|
// 创建并加载docx templater实例对象
|
|
const doc = new docxtemplater().loadZip(zip)
|
|
// 设置模板变量的值
|
|
doc.setData({
|
|
...e// e中的数据可以再模板中直接使用
|
|
})
|
|
|
|
try {
|
|
// 用模板变量的值替换所有模板变量
|
|
doc.render()
|
|
} catch (error) {
|
|
// 抛出异常
|
|
const e = {
|
|
message: error.message,
|
|
name: error.name,
|
|
stack: error.stack,
|
|
properties: error.properties
|
|
}
|
|
console.log(JSON.stringify({
|
|
error: e
|
|
}))
|
|
throw error
|
|
}
|
|
|
|
// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
|
|
const out = doc.getZip().generate({
|
|
type: 'blob',
|
|
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
|
})
|
|
// 将目标文件对象保存为目标类型的文件，并命名
|
|
saveAs(out, docxname)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sidebar-operation-manual {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
background-color: #3c4658;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 6px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
.title {
|
|
display: inline-block;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.aui-sidebar{
|
|
width: 160px !important;
|
|
}
|
|
.aui-sidebar__menu{
|
|
width: 160px;
|
|
}
|
|
.aui-sidebar__inner {
|
|
.el-menu-item:hover {
|
|
background: #545c64 !important;
|
|
}
|
|
}
|
|
</style>
|