2023-10-23 08:42:46 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<el-drawer :visible.sync="drawer" :append-to-body="true" size="80%">
|
|
|
|
|
|
<small-title slot="title" :no-padding="true">
|
|
|
|
|
|
<!-- <template v-for="demo in demoList"> -->
|
|
|
|
|
|
<!-- <el-button :key="demo.name" :type="demo.name === curDemo ? 'primary' : ' '" @click="curDemo = demo.name"> -->
|
|
|
|
|
|
<!-- {{ $t('module.packingManage.printModelDesign') }} -->
|
|
|
|
|
|
模板设计
|
|
|
|
|
|
<!-- </el-button> -->
|
|
|
|
|
|
<!-- </template> -->
|
|
|
|
|
|
</small-title>
|
|
|
|
|
|
<el-card>
|
|
|
|
|
|
<el-row style="margin-bottom: 10px">
|
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
|
<!-- 模板选择 -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <el-select
|
|
|
|
|
|
v-model="mode"
|
|
|
|
|
|
filterable
|
|
|
|
|
|
:default-value="0"
|
|
|
|
|
|
option-label-prop="label"
|
|
|
|
|
|
style="width: 100%;"
|
|
|
|
|
|
@change="changeMode"
|
|
|
|
|
|
>
|
|
|
|
|
|
<el-option v-for="(opt,idx) in modeList" :key="idx" :label="opt.name" :value="idx">
|
|
|
|
|
|
{{ opt.name }}
|
|
|
|
|
|
</el-option>
|
|
|
|
|
|
</el-select> -->
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
|
<!-- 纸张设置 -->
|
|
|
|
|
|
<el-button-group style="margin:0 10px">
|
|
|
|
|
|
<el-button
|
|
|
|
|
|
v-for="(value,type) in paperTypes"
|
|
|
|
|
|
:key="type"
|
|
|
|
|
|
:type="curPaperType === type ? 'primary' : ' '"
|
|
|
|
|
|
@click="setPaper(type,value)"
|
|
|
|
|
|
>
|
|
|
|
|
|
{{ type }}
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</el-button-group>
|
|
|
|
|
|
<el-input-number
|
|
|
|
|
|
style="margin:0 10px"
|
|
|
|
|
|
:value="scaleValue "
|
|
|
|
|
|
:precision="2"
|
|
|
|
|
|
:step="0.1"
|
|
|
|
|
|
:min="scaleMin"
|
|
|
|
|
|
:max="scaleMax"
|
|
|
|
|
|
@change="changeScale"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<el-popover v-model="paperPopVisible" placement="bottom" width="300" title="设置纸张宽高(mm)">
|
|
|
|
|
|
<div style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 10px">
|
|
|
|
|
|
<el-input v-model="paperWidth" type="number" style=" width: 100px; text-align: center" place="宽（mm）" />~
|
|
|
|
|
|
<el-input v-model="paperHeight" type="number" style=" width: 100px; text-align: center" place="高（mm）" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-button type="primary" style="width: 100%" size="mini" @click="otherPaper">确定</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-button slot="reference" type="primary" style="margin:0 10px">自定义宽高</el-button>
|
|
|
|
|
|
</el-popover>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <a-button-group>-->
|
|
|
|
|
|
<!-- <template v-for="(value,type) in paperTypes">-->
|
|
|
|
|
|
<!-- <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)" :key="type">-->
|
|
|
|
|
|
<!-- {{ type }}-->
|
|
|
|
|
|
<!-- </a-button>-->
|
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
|
<!-- <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">-->
|
|
|
|
|
|
<!-- <div slot="content">-->
|
|
|
|
|
|
<!-- <a-input-group compact style="margin: 10px 10px">-->
|
|
|
|
|
|
<!-- <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"-->
|
|
|
|
|
|
<!-- placeholder="宽(mm)"/>-->
|
|
|
|
|
|
<!-- <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"-->
|
|
|
|
|
|
<!-- placeholder="~" disabled-->
|
|
|
|
|
|
<!-- />-->
|
|
|
|
|
|
<!-- <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"-->
|
|
|
|
|
|
<!-- placeholder="高(mm)"/>-->
|
|
|
|
|
|
<!-- </a-input-group>-->
|
|
|
|
|
|
<!-- <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
<!-- <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>-->
|
|
|
|
|
|
<!-- </a-popover>-->
|
|
|
|
|
|
<!-- </a-button-group>-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 预览/打印 -->
|
|
|
|
|
|
<el-button-group>
|
|
|
|
|
|
<el-button type="primary" icon="redo" @click="rotatePaper()">旋转</el-button>
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-view" @click="preView">
|
|
|
|
|
|
预览
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<!-- <el-button type="primary" icon="el-icon-printer" @click="print">
|
|
|
|
|
|
直接打印
|
|
|
|
|
|
</el-button> -->
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-s-management" @click="save">
|
|
|
|
|
|
保存
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button type="danger" icon="el-icon-delete" @click="clearPaper">
|
|
|
|
|
|
清空
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</el-button-group>
|
|
|
|
|
|
<!-- 保存/清空 -->
|
|
|
|
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="24">
|
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
|
<el-card style="height: 100vh">
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="24" class="rect-printElement-types hiprintEpContainer" />
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="16">
|
|
|
|
|
|
<el-card class="card-design">
|
|
|
|
|
|
<div id="hiprint-printTemplate" class="hiprint-printTemplate" />
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="4" class="params_setting_container">
|
|
|
|
|
|
<el-card>
|
|
|
|
|
|
<el-row class="hinnn-layout-sider">
|
|
|
|
|
|
<div id="PrintElementOptionSetting" />
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 预览 -->
|
|
|
|
|
|
<print-preview ref="preView" />
|
|
|
|
|
|
</el-card>
|
|
|
|
|
|
</el-drawer>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
import printPreview from './preview'
|
|
|
|
|
|
import { MessageBox } from 'element-ui'
|
|
|
|
|
|
import { hiprint } from 'vue-plugin-hiprint'
|
|
|
|
|
|
import providers from './providers'
|
2023-11-07 19:10:45 +08:00
|
|
|
|
// import printData from './print-data'
|
2023-10-23 08:42:46 +08:00
|
|
|
|
import $ from 'jquery'
|
|
|
|
|
|
import SmallTitle from './SmallTitle.vue'
|
|
|
|
|
|
let hiprintTemplate = null
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: 'PrintCustom',
|
|
|
|
|
|
components: { printPreview, SmallTitle },
|
|
|
|
|
|
// props: {
|
|
|
|
|
|
// modelData: {
|
|
|
|
|
|
// type: String,
|
|
|
|
|
|
// default: ''
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
// paperPopVisible: false,
|
|
|
|
|
|
// 模板选择
|
|
|
|
|
|
mode: 0,
|
|
|
|
|
|
template: null,
|
|
|
|
|
|
modeList: [],
|
|
|
|
|
|
// 当前纸张
|
|
|
|
|
|
curPaper: {
|
|
|
|
|
|
// type: 'other',
|
|
|
|
|
|
// width: 220,
|
|
|
|
|
|
// height: 80
|
|
|
|
|
|
},
|
2023-11-07 19:10:45 +08:00
|
|
|
|
printData:{},
|
2023-10-23 08:42:46 +08:00
|
|
|
|
drawer: false,
|
|
|
|
|
|
// 纸张类型
|
|
|
|
|
|
paperTypes: {
|
|
|
|
|
|
'A3': {
|
|
|
|
|
|
width: 420,
|
|
|
|
|
|
height: 296.6
|
|
|
|
|
|
},
|
|
|
|
|
|
'A4': {
|
|
|
|
|
|
width: 210,
|
|
|
|
|
|
height: 297
|
|
|
|
|
|
},
|
|
|
|
|
|
'A5': {
|
|
|
|
|
|
width: 210,
|
|
|
|
|
|
height: 147.6
|
|
|
|
|
|
},
|
|
|
|
|
|
'B3': {
|
|
|
|
|
|
width: 500,
|
|
|
|
|
|
height: 352.6
|
|
|
|
|
|
},
|
|
|
|
|
|
'B4': {
|
|
|
|
|
|
width: 250,
|
|
|
|
|
|
height: 352.6
|
|
|
|
|
|
},
|
|
|
|
|
|
'B5': {
|
|
|
|
|
|
width: 250,
|
|
|
|
|
|
height: 175.6
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
scaleValue: 1,
|
|
|
|
|
|
scaleMax: 5,
|
|
|
|
|
|
scaleMin: 0.5,
|
|
|
|
|
|
// 自定义纸张
|
|
|
|
|
|
paperPopVisible: false,
|
|
|
|
|
|
paperWidth: '210',
|
|
|
|
|
|
paperHeight: '297'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
curPaperType() {
|
|
|
|
|
|
let type = 'other'
|
|
|
|
|
|
const types = this.paperTypes
|
|
|
|
|
|
for (const key in types) {
|
|
|
|
|
|
const item = types[key]
|
|
|
|
|
|
const { width, height } = this.curPaper
|
|
|
|
|
|
if (item.width === width && item.height === height) {
|
|
|
|
|
|
type = key
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return type
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.init()
|
|
|
|
|
|
// console.log('aaaaaa')
|
|
|
|
|
|
// this.otherPaper()
|
|
|
|
|
|
},
|
|
|
|
|
|
destroyed () {
|
|
|
|
|
|
$('.hiprintEpContainer').empty()
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// handleClose() {
|
|
|
|
|
|
// $('.hiprintEpContainer').empty()
|
|
|
|
|
|
// },
|
|
|
|
|
|
init(data) {
|
|
|
|
|
|
this.drawer = true
|
|
|
|
|
|
this.modelData = data
|
|
|
|
|
|
this.modeList = providers.map((e) => {
|
|
|
|
|
|
return { type: e.type, name: e.name, value: e.value }
|
|
|
|
|
|
})
|
|
|
|
|
|
this.changeMode()
|
|
|
|
|
|
},
|
|
|
|
|
|
changeMode() {
|
|
|
|
|
|
// hiprintTemplate.clear()
|
|
|
|
|
|
// console.log(this.modelData)
|
|
|
|
|
|
const { mode } = this
|
|
|
|
|
|
const provider = providers[mode]
|
|
|
|
|
|
hiprint.init({
|
|
|
|
|
|
providers: [provider.f]
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// $('#hiprint-printTemplate').empty()
|
|
|
|
|
|
// console.log(JSON.parse(this.modelData))
|
|
|
|
|
|
hiprint.setConfig()
|
|
|
|
|
|
// 替换配置
|
|
|
|
|
|
hiprint.setConfig({
|
|
|
|
|
|
movingDistance: 2.5,
|
|
|
|
|
|
text: {
|
|
|
|
|
|
supportOptions: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'styler',
|
|
|
|
|
|
hidden: true
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'formatter',
|
|
|
|
|
|
hidden: true
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(this.modelData)
|
|
|
|
|
|
// console.log($('#hiprint-printTemplate').empty())
|
|
|
|
|
|
if (this.modelData) {
|
|
|
|
|
|
$('.hiprintEpContainer').empty()
|
|
|
|
|
|
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
|
|
|
|
|
|
$('.hiprint-printTemplate').empty()
|
|
|
|
|
|
hiprintTemplate = new hiprint.PrintTemplate({
|
|
|
|
|
|
template: JSON.parse(this.modelData),
|
|
|
|
|
|
settingContainer: '#PrintElementOptionSetting',
|
|
|
|
|
|
paginationContainer: '.hiprint-printPagination'
|
|
|
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
|
|
|
$('.hiprintEpContainer').empty()
|
|
|
|
|
|
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
|
|
|
|
|
|
$('.hiprint-printTemplate').empty()
|
|
|
|
|
|
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
|
|
|
|
|
const template = provider.value
|
|
|
|
|
|
console.log(template)
|
|
|
|
|
|
hiprintTemplate = new hiprint.PrintTemplate({
|
|
|
|
|
|
template: template,
|
|
|
|
|
|
settingContainer: '#PrintElementOptionSetting',
|
|
|
|
|
|
paginationContainer: '.hiprint-printPagination'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// hiprintTemplate.design('#hiprint-printTemplate')
|
|
|
|
|
|
// console.log(hiprintTemplate)
|
|
|
|
|
|
hiprintTemplate.design('#hiprint-printTemplate', { grid: true })
|
|
|
|
|
|
// 获取当前放大比例, 当zoom时传true 才会有
|
|
|
|
|
|
this.scaleValue = hiprintTemplate.editingPanel.scale || 1
|
|
|
|
|
|
// this.scaleValue = hiprintTemplate.editingPanel.scale || 1
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 设置纸张大小
|
|
|
|
|
|
* @param type [A3, A4, A5, B3, B4, B5, other]
|
|
|
|
|
|
* @param value {width,height} mm
|
|
|
|
|
|
*/
|
|
|
|
|
|
setPaper(type, value) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
if (Object.keys(this.paperTypes).includes(type)) {
|
|
|
|
|
|
this.curPaper = { type: type, width: value.width, height: value.height }
|
|
|
|
|
|
hiprintTemplate.setPaper(value.width, value.height)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.curPaper = { type: 'other', width: value.width, height: value.height }
|
|
|
|
|
|
hiprintTemplate.setPaper(value.width, value.height)
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
this.$message.error(`操作失败: ${error}`)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
changeScale(currentValue, oldValue) {
|
|
|
|
|
|
let big = false
|
|
|
|
|
|
currentValue <= oldValue ? big = false : big = true
|
|
|
|
|
|
let scaleValue = this.scaleValue
|
|
|
|
|
|
if (big) {
|
|
|
|
|
|
scaleValue += 0.1
|
|
|
|
|
|
if (scaleValue > this.scaleMax) scaleValue = 5
|
|
|
|
|
|
} else {
|
|
|
|
|
|
scaleValue -= 0.1
|
|
|
|
|
|
if (scaleValue < this.scaleMin) scaleValue = 0.5
|
|
|
|
|
|
}
|
|
|
|
|
|
if (hiprintTemplate) {
|
|
|
|
|
|
// scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
|
|
|
|
|
|
hiprintTemplate.zoom(scaleValue)
|
|
|
|
|
|
this.scaleValue = scaleValue
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
clearPaper() {
|
|
|
|
|
|
MessageBox.confirm('是否确认清空模板信息?', '警告', {
|
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
|
type: 'warning'
|
|
|
|
|
|
}).then(() => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
hiprintTemplate.clear()
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
this.$message.error(`操作失败: ${error}`)
|
|
|
|
|
|
}
|
|
|
|
|
|
}).catch((err) => {
|
|
|
|
|
|
console.log(err)
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
otherPaper() {
|
|
|
|
|
|
const value = {}
|
|
|
|
|
|
value.width = this.paperWidth
|
|
|
|
|
|
value.height = this.paperHeight
|
|
|
|
|
|
this.paperPopVisible = false
|
|
|
|
|
|
this.setPaper('other', value)
|
|
|
|
|
|
},
|
|
|
|
|
|
rotatePaper() {
|
|
|
|
|
|
if (hiprintTemplate) {
|
|
|
|
|
|
hiprintTemplate.rotatePaper()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
preView() {
|
|
|
|
|
|
const { width } = this.curPaper
|
2023-11-07 19:10:45 +08:00
|
|
|
|
this.$refs.preView.show(hiprintTemplate, this.printData, width)
|
2023-10-23 08:42:46 +08:00
|
|
|
|
},
|
|
|
|
|
|
print() {
|
|
|
|
|
|
// if (window.hiwebSocket.opened) {
|
|
|
|
|
|
const printerList = hiprintTemplate.getPrinterList()
|
|
|
|
|
|
console.log(printerList)
|
2023-11-07 19:10:45 +08:00
|
|
|
|
hiprintTemplate.print2(this.printData, { printer: '', title: '预览打印' })
|
2023-10-23 08:42:46 +08:00
|
|
|
|
// return
|
|
|
|
|
|
// }
|
|
|
|
|
|
// this.$message.error('客户端未连接,无法直接打印')
|
|
|
|
|
|
},
|
|
|
|
|
|
save() {
|
|
|
|
|
|
// console.log(hiprintTemplate.getJson())
|
|
|
|
|
|
const { mode } = this
|
|
|
|
|
|
const provider = providers[mode]
|
|
|
|
|
|
// console.log(hiprintTemplate.getJson())
|
|
|
|
|
|
this.setTemplate({
|
|
|
|
|
|
name: provider.value,
|
|
|
|
|
|
json: hiprintTemplate.getJson()
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
setTemplate(payload) {
|
|
|
|
|
|
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
|
|
|
|
|
// console.log(payload.json)
|
|
|
|
|
|
// templates[payload.name] = payload.json
|
|
|
|
|
|
// this.$ls.set('KEY_TEMPLATES', templates)
|
|
|
|
|
|
this.$message.info('保存成功')
|
|
|
|
|
|
// console.log(JSON.stringify(payload.json))
|
|
|
|
|
|
this.drawer = false
|
|
|
|
|
|
this.$emit('saveData', payload.json)
|
|
|
|
|
|
$('.hiprintEpContainer').empty()
|
|
|
|
|
|
// this.$parent.$parent.getModelData(payload.json)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
// build 拖拽
|
|
|
|
|
|
::v-deep .hiprint-printElement-type >li>ul>li>a {
|
|
|
|
|
|
padding: 4px 4px;
|
|
|
|
|
|
color: #1296db;
|
|
|
|
|
|
line-height: 1;
|
|
|
|
|
|
height: auto;
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 设计容器
|
|
|
|
|
|
.card-design {
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
