180 lines
4.4 KiB
Vue
180 lines
4.4 KiB
Vue
<template>
|
||
<AiDetail class="add-label">
|
||
<template #title>
|
||
<ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
|
||
<template #center>
|
||
<label>模板名称：</label>
|
||
<el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px;"></el-input>
|
||
</template>
|
||
<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="print" size="small">打印</el-button>
|
||
<el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
|
||
<el-button @click="saveTemplate" size="small" type="primary" :loading="isLoading">保存</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"
|
||
:template="template"
|
||
:printData="printData"
|
||
:isPrint="false"
|
||
:params="params">
|
||
</Print>
|
||
</div>
|
||
</template>
|
||
</ai-card>
|
||
</template>
|
||
</AiDetail>
|
||
</template>
|
||
|
||
<script>
|
||
import Print from '@/components/print/Print'
|
||
import template from '@/components/print/template'
|
||
|
||
export default {
|
||
components: {
|
||
Print
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
name: '',
|
||
template: {
|
||
"panels": [{
|
||
"index": 0,
|
||
"name": 1,
|
||
"height": 200,
|
||
"width": 200,
|
||
"paperHeader": 0,
|
||
"paperFooter": 547,
|
||
"printElements": [],
|
||
"paperNumberLeft": 500,
|
||
"paperNumberTop": 530,
|
||
"paperNumberDisabled": true,
|
||
"paperNumberContinue": true,
|
||
"fontFamily": "Microsoft YaHei",
|
||
"scale": 1,
|
||
"watermarkOptions": {}
|
||
}]
|
||
},
|
||
printData: {},
|
||
id: '',
|
||
info: {},
|
||
params: [],
|
||
isLoading: false
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.printData = {
|
||
labelCode: 96778555251,
|
||
productSkuId: 6606980005,
|
||
skuExtCode: 'AAA1100mWh-orange',
|
||
skuSpecName: '8pcs'
|
||
}
|
||
|
||
if (this.$route.query.id) {
|
||
this.id = this.$route.query.id
|
||
|
||
this.getInfo()
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
cancel() {
|
||
this.$router.go(-1)
|
||
},
|
||
|
||
getInfo () {
|
||
this.$http.post(`/api/template/detail?id=${this.$route.query.id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
this.name = res.data.name
|
||
this.params = JSON.parse(res.data.params)
|
||
|
||
this.$nextTick(() => {
|
||
this.template = JSON.parse(res.data.content)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
preview () {
|
||
this.$refs.printRef.preview()
|
||
},
|
||
|
||
savePdf () {
|
||
this.$refs.printRef.savePdf()
|
||
},
|
||
|
||
rotatePaper () {
|
||
this.$refs.printRef.rotatePaper()
|
||
},
|
||
|
||
saveTemplate () {
|
||
if (!this.name) {
|
||
return this.$message.error('模板名称不能为空')
|
||
}
|
||
|
||
const data = this.$refs.printRef.save()
|
||
this.isLoading = true
|
||
|
||
const url = this.id ? `/api/template/modify` : `/api/template/addTemplate`
|
||
this.$http.post(url, {
|
||
name: this.name,
|
||
codes: data.html,
|
||
content: JSON.stringify(data.json),
|
||
params: data.params,
|
||
id: this.id || ''
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.isLoading = false
|
||
this.$message.success('模板创建成功')
|
||
this.cancel()
|
||
} else {
|
||
this.isLoading = false
|
||
}
|
||
})
|
||
},
|
||
|
||
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>
|