418 lines
14 KiB
Vue
418 lines
14 KiB
Vue
<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'
|
||
// import printData from './print-data'
|
||
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
|
||
},
|
||
printData:{},
|
||
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
|
||
}
|
||
},
|
||
created() {
|
||
// $('.hiprintEpContainer').empty()
|
||
},
|
||
destroyed () {
|
||
$('.hiprintEpContainer').empty()
|
||
console.log(11111)
|
||
},
|
||
methods: {
|
||
// handleClose() {
|
||
// $('.hiprintEpContainer').empty()
|
||
// },
|
||
closed() {
|
||
$('.hiprintEpContainer').empty()
|
||
$('.hiprint-printTemplate').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)
|
||
this.$nextTick(() => {
|
||
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 () {
|
||
// console.log(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()
|
||
console.log(this.modelData);
|
||
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', provider.value)
|
||
$('.hiprint-printTemplate').empty()
|
||
// const templates = this.$ls.get('KEY_TEMPLATES', {})
|
||
const template = provider.value
|
||
// console.log(template)
|
||
if (this.modelData) {
|
||
hiprintTemplate = new hiprint.PrintTemplate({
|
||
template: JSON.parse(this.modelData),
|
||
settingContainer: '#PrintElementOptionSetting',
|
||
paginationContainer: '.hiprint-printPagination'
|
||
})
|
||
} else {
|
||
hiprintTemplate = new hiprint.PrintTemplate({
|
||
template:{},
|
||
settingContainer: '#PrintElementOptionSetting',
|
||
paginationContainer: '.hiprint-printPagination'
|
||
})
|
||
}
|
||
// }
|
||
hiprintTemplate.design('#hiprint-printTemplate')
|
||
// console.log(hiprintTemplate)
|
||
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
|
||
this.$refs.preView.show(hiprintTemplate, this.printData, width)
|
||
},
|
||
print() {
|
||
// if (window.hiwebSocket.opened) {
|
||
const printerList = hiprintTemplate.getPrinterList()
|
||
console.log(printerList)
|
||
hiprintTemplate.print2(this.printData, { printer: '', title: '预览打印' })
|
||
// 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>
|