96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<AiDetail class="add-label">
|
||
|
|
<template #title>
|
||
|
|
<ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
|
||
|
|
<template #rightBtn>
|
||
|
|
<el-button @click="preview" size="small" type="danger">预览</el-button>
|
||
|
|
<el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
|
||
|
|
<el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
|
||
|
|
<el-button @click="print" size="small">打印</el-button>
|
||
|
|
<el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
|
||
|
|
</template>
|
||
|
|
</ai-title>
|
||
|
|
</template>
|
||
|
|
<template #content>
|
||
|
|
<ai-card title="标签模板" class="card" :hideTitle="true">
|
||
|
|
<template #content>
|
||
|
|
<div class="add-label__wrapper">
|
||
|
|
<Print ref="printRef" :labels="labels"></Print>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</ai-card>
|
||
|
|
</template>
|
||
|
|
</AiDetail>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Print from '@/components/print/Print'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Print
|
||
|
|
},
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
labels: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
cancel() {
|
||
|
|
this.$router.go(-1)
|
||
|
|
},
|
||
|
|
|
||
|
|
preview () {
|
||
|
|
this.$refs.printRef.getHtml()
|
||
|
|
},
|
||
|
|
|
||
|
|
savePdf () {
|
||
|
|
this.$refs.printRef.savePdf()
|
||
|
|
},
|
||
|
|
|
||
|
|
rotatePaper () {
|
||
|
|
this.$refs.printRef.rotatePaper()
|
||
|
|
},
|
||
|
|
|
||
|
|
saveTemplate () {
|
||
|
|
const json = this.$refs.printRef.exportJson()
|
||
|
|
console.log(json)
|
||
|
|
},
|
||
|
|
|
||
|
|
print () {
|
||
|
|
this.$refs.printRef.print()
|
||
|
|
},
|
||
|
|
|
||
|
|
clearPaper () {
|
||
|
|
this.$refs.printRef.clearPaper()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.add-label {
|
||
|
|
::v-deep(.ai-detail__content--wrapper) {
|
||
|
|
max-width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
::v-deep(.ai-card__body) {
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.add-label__wrapper {
|
||
|
|
padding-bottom: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|