499 lines
13 KiB
Vue
499 lines
13 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="24">
|
||
<!-- 纸张设置 -->
|
||
<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; width: 140px"
|
||
: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,
|
||
},
|
||
A6: {
|
||
width: 95,
|
||
height: 125,
|
||
},
|
||
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>
|