Skip to content

P
PrintVue
提交 1ffb51ee authored 作者: Administrator's avatar Administrator
浏览文件
操作

更新

上级 e01e152b
隐藏空白字符变更
内嵌 并排
正在显示 包含 352 行增加 和 286 行删除
src/printTemplate/components/printDrawer.vue
浏览文件 @ 1ffb51ee
<template>
<el-drawer v-model="props.modelValue" :title="paperTitle" size="80%" @close="handleClose">
<div class="app-containter flex-col">
<div class="header flex-row justify-center" style="margin-bottom: 10px">
<!-- 纸张大小 A3、A4 等 -->
<div class="paper">
<el-button-group>
<template v-for="(value, type) in paperTypes" :key="type">
<el-button :type="curPaperType === type ? 'primary' : ''" @click="setPaper(type, value)">
{{ type }}
</el-button>
</template>
<!-- 自定义纸张 -->
<!-- <el-button :type="'other' == curPaperType ? 'primary' : ''" class="auto" @click="showPaperPop">
<el-drawer
v-model="props.modelValue"
:title="paperTitle"
size="80%"
@close="handleClose"
>
<div class="app-containter flex-col">
<div class="header flex-row justify-center" style="margin-bottom: 10px">
<!-- 纸张大小 A3、A4 等 -->
<div class="paper">
<el-button-group>
<template v-for="(value, type) in paperTypes" :key="type">
<el-button
:type="curPaperType === type ? 'primary' : ''"
@click="setPaper(type, value)"
>
{{ type }}
</el-button>
</template>
<!-- 自定义纸张 -->
<!-- <el-button :type="'other' == curPaperType ? 'primary' : ''" class="auto" @click="showPaperPop">
自定义纸张
</el-button> -->
<el-button :type="'other' == curPaperType ? 'primary' : ''" ref="buttonRef"
v-click-outside="onClickOutside">自定义纸张
</el-button>
<el-button
:type="'other' == curPaperType ? 'primary' : ''"
ref="buttonRef"
v-click-outside="onClickOutside"
>自定义纸张
</el-button>
<el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="设置纸张宽高(mm)"
:width="300" virtual-triggering>
<div class="input-group">
<el-input-group compact style="margin: 10px">
<el-input type="number" v-model="paperWidth"
style=" width: 100px; text-align: center" placeholder="宽(mm)" />
<el-input
style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff"
placeholder="~" disabled />
<el-input type="number" v-model="paperHeight"
style="width: 100px; text-align: center; border-left: 0" placeholder="高(mm)" />
</el-input-group>
<el-button type="primary" style="width: 100%" @click="setPaperRule">确定</el-button>
</div>
</el-popover>
</el-button-group>
</div>
<!-- 缩放 -->
<div class="flex-row align-center ml-10">
<el-button icon="ZoomOut" @click="changeScale(false)" style="margin-right: 8px;" />
<div style="margin: 0 4px; width: 40px">{{ (scaleValue * 100).toFixed(0) }}%</div>
<el-button icon="ZoomIn" @click="changeScale(true)" />
</div>
<el-button-group class="ml-10">
<el-button type="primary" icon="RefreshRight" @click.stop="rotatePaper">
旋转纸张(宽高互换)
</el-button>
<el-button type="primary" @click.stop="show">
预览
</el-button>
<el-button type="primary" @click.stop="exportJson">
查看模板json
</el-button>
<el-button type="primary" @click.stop="print">
浏览器打印<el-icon class="el-icon--right">
<Printer />
</el-icon>
</el-button>
<!-- <el-button type="warning" class="warning circle-10 ml-10" @click.stop="print2">
<el-popover
ref="popoverRef"
:virtual-ref="buttonRef"
trigger="click"
title="设置纸张宽高(mm)"
:width="300"
virtual-triggering
>
<div class="input-group">
<el-input-group compact style="margin: 10px">
<el-input
type="number"
v-model="paperWidth"
style="width: 100px; text-align: center"
placeholder="宽(mm)"
/>
<el-input
style="
width: 30px;
border-left: 0;
pointer-events: none;
background-color: #fff;
"
placeholder="~"
disabled
/>
<el-input
type="number"
v-model="paperHeight"
style="width: 100px; text-align: center; border-left: 0"
placeholder="高(mm)"
/>
</el-input-group>
<el-button type="primary" style="width: 100%" @click="setPaperRule"
>确定</el-button
>
</div>
</el-popover>
</el-button-group>
</div>
<!-- 缩放 -->
<div class="flex-row align-center ml-10">
<el-button
icon="ZoomOut"
@click="changeScale(false)"
style="margin-right: 8px"
/>
<div style="margin: 0 4px; width: 40px">
{{ (scaleValue * 100).toFixed(0) }}%
</div>
<el-button icon="ZoomIn" @click="changeScale(true)" />
</div>
<el-button-group class="ml-10">
<el-button type="primary" icon="RefreshRight" @click.stop="rotatePaper">
旋转纸张(宽高互换)
</el-button>
<el-button type="primary" @click.stop="show"> 预览 </el-button>
<el-button type="primary" @click.stop="exportJson">
查看模板json
</el-button>
<el-button type="primary" @click.stop="print">
浏览器打印<el-icon class="el-icon--right">
<Printer />
</el-icon>
</el-button>
<!-- <el-button type="warning" class="warning circle-10 ml-10" @click.stop="print2">
直接打印(需要连接客户端)
<i class="iconfont sv-printer" />
</el-button> -->
</el-button-group>
<el-button-group class="ml-10">
<el-button type="success" ref="buttonSaveRef" icon="Finished" @click.stop="savePaper">
保存
<el-popover ref="popoverSaveRef" :virtual-ref="buttonSaveRef" trigger="click" title="设置模板名称"
:width="300" virtual-triggering>
<div class="input-group">
<el-input v-model="paperTitle" style=" text-align: center" />
<el-button type="primary" style="width: 100%" @click="setPaperTitle">确定</el-button>
</div>
</el-popover>
</el-button>
<el-button type="danger" @click.stop="clearPaper">
清空<el-icon class="el-icon--right">
<CloseBold />
</el-icon>
</el-button>
</el-button-group>
</div>
<div class="main flex-row" style="height: 100%">
<el-card class="flex-2 left flex-col main-left">
<!-- provider1 的容器; 加上 class "rect-printElement-types" 使用默认样式 -->
<!-- 当然可以 重写 或者 自定义样式 -->
<div id="provider-container1" class="container"></div>
<!-- provider2 的容器; -->
<!-- 这里自定义显示样式 custom-style-types -->
<div id="provider-container2" class="container custom-style-types"></div>
<div class=""></div>
</el-card>
<el-card class="flex-5 center">
<!-- 设计器的 容器 -->
<div id="hiprint-printTemplate"></div>
</el-card>
<el-card class="flex-2 right">
<!-- 元素参数的 容器 -->
<div id="PrintElementOptionSetting"></div>
</el-card>
</div>
</div>
</el-drawer>
<preview ref="previewRef" />
<json-view ref="jsonviewRef" :template="hiprintTemplate" />
</el-button-group>
<el-button-group class="ml-10">
<el-button
type="success"
ref="buttonSaveRef"
icon="Finished"
@click.stop="savePaper"
>
保存
<el-popover
ref="popoverSaveRef"
:virtual-ref="buttonSaveRef"
trigger="click"
title="设置模板名称"
:width="300"
virtual-triggering
>
<div class="input-group">
<el-input v-model="paperTitle" style="text-align: center" />
<el-button type="primary" style="width: 100%" @click="setPaperTitle"
>确定</el-button
>
</div>
</el-popover>
</el-button>
<el-button type="danger" @click.stop="clearPaper">
清空<el-icon class="el-icon--right">
<CloseBold />
</el-icon>
</el-button>
</el-button-group>
</div>
<div class="main flex-row" style="height: 100%">
<el-card class="flex-2 left flex-col main-left">
<!-- provider1 的容器; 加上 class "rect-printElement-types" 使用默认样式 -->
<!-- 当然可以 重写 或者 自定义样式 -->
<div id="provider-container1" class="container"></div>
<!-- provider2 的容器; -->
<!-- 这里自定义显示样式 custom-style-types -->
<div id="provider-container2" class="container custom-style-types"></div>
<div class=""></div>
</el-card>
<el-card class="flex-5 center">
<!-- 设计器的 容器 -->
<div id="hiprint-printTemplate"></div>
</el-card>
<el-card class="flex-2 right">
<!-- 元素参数的 容器 -->
<div id="PrintElementOptionSetting"></div>
</el-card>
</div>
</div>
</el-drawer>
<preview ref="previewRef" />
<json-view ref="jsonviewRef" :template="hiprintTemplate" />
</template>
<script setup lang="ts">
import { ref, unref } from "vue";
import { hiprint } from "vue-plugin-hiprint";
import { provider1 } from "../ts/provider1";
import { provider2 } from "../ts/provider2";
// 组合式函数 hooks
import { usePaper } from "../../hooks/use-paper";
import { useZoom } from "../../hooks/use-zoom";
// 工具
import { newHiprintPrintTemplate } from "../../utils/template-helper";
import preview from "./preview.vue";
import jsonView from "./json-view.vue";
import $ from 'jquery'
import { ref, unref } from 'vue'
import { hiprint } from 'vue-plugin-hiprint'
import { provider1 } from '../ts/provider1'
import { provider2 } from '../ts/provider2'
// 组合式函数 hooks
import { usePaper } from '../../hooks/use-paper'
import { useZoom } from '../../hooks/use-zoom'
// 工具
import { newHiprintPrintTemplate } from '../../utils/template-helper'
import preview from './preview.vue'
import jsonView from './json-view.vue'
import $ from 'jquery'
const props = defineProps({
modelValue: {
type: Boolean,
defalut: false
},
templateData: {
type: Object,
default: {}
}
})
const props = defineProps({
modelValue: {
type: Boolean,
defalut: false,
},
templateData: {
type: Object,
default: {},
},
})
const emits = defineEmits(['update:modelValue', 'savePrintData'])
// const TEMPLATE_KEY = getCurrentInstance().type.name; // 存储模板对象的 key
// console.log(TEMPLATE_KEY);
const TEMPLATE_KEY = undefined
const emits = defineEmits(['update:modelValue', 'savePrintData'])
// const TEMPLATE_KEY = getCurrentInstance().type.name; // 存储模板对象的 key
// console.log(TEMPLATE_KEY);
const TEMPLATE_KEY = undefined
const { paperTypes, curPaperType, paperWidth, paperHeight, setPaper, setPaperOther } = usePaper(TEMPLATE_KEY);
const { scaleValue, changeScale } = useZoom(TEMPLATE_KEY);
const paperTitle = ref('默认模板')
const popoverRef = ref()
const popoverSaveRef = ref()
const buttonRef = ref()
const buttonSaveRef = ref()
const previewRef = ref()
const jsonviewRef = ref()
const {
paperTypes,
curPaperType,
paperWidth,
paperHeight,
setPaper,
setPaperOther,
} = usePaper(TEMPLATE_KEY)
const { scaleValue, changeScale } = useZoom(TEMPLATE_KEY)
const paperTitle = ref('默认模板')
const popoverRef = ref()
const popoverSaveRef = ref()
const buttonRef = ref()
const buttonSaveRef = ref()
const previewRef = ref()
const jsonviewRef = ref()
// 自定义传入 provider 的参数
let options = {
// config: {
// tid: "providerModule1.config",
// title: "参数provider示例",
// type: "text",
// options: {
// testData: "单据表头",
// height: 30,
// fontSize: 16,
// },
// },
} as any;
// 初始化 provider
hiprint.init({
// providers: [provider1(options), provider2(options)],
providers: [provider1(options)],
});
// 自定义传入 provider 的参数
let options = {
// config: {
// tid: "providerModule1.config",
// title: "参数provider示例",
// type: "text",
// options: {
// testData: "单据表头",
// height: 30,
// fontSize: 16,
// },
// },
} as any
// 初始化 provider
hiprint.init({
// providers: [provider1(options), provider2(options)],
providers: [provider1(options)],
})
/**
* 构建左侧可拖拽元素
* 注意: 可拖拽元素必须在 hiprint.init() 之后调用
* 调用之前 可以先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
*/
const buildLeftElement = () => {
// ----- providerModule1 -----
$("#provider-container1").empty(); // 先清空, 避免重复构建
hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1");
// ----- providerModule2 -----
$("#provider-container2").empty(); // 先清空, 避免重复构建
hiprint.PrintElementTypeManager.build($("#provider-container2"), "providerModule2");
};
/**
* 构建设计器
* 注意: 必须要在 onMounted 中去构建
* 因为都是把元素挂载到对应容器中, 必须要先找到该容器
*/
let hiprintTemplate = ref();
// ref 创建的模板json
const templateRef = ref();
/**
* 构建左侧可拖拽元素
* 注意: 可拖拽元素必须在 hiprint.init() 之后调用
* 调用之前 可以先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
*/
const buildLeftElement = () => {
// ----- providerModule1 -----
$('#provider-container1').empty() // 先清空, 避免重复构建
hiprint.PrintElementTypeManager.build(
$('#provider-container1'),
'providerModule1'
)
// ----- providerModule2 -----
$('#provider-container2').empty() // 先清空, 避免重复构建
hiprint.PrintElementTypeManager.build(
$('#provider-container2'),
'providerModule2'
)
}
/**
* 构建设计器
* 注意: 必须要在 onMounted 中去构建
* 因为都是把元素挂载到对应容器中, 必须要先找到该容器
*/
let hiprintTemplate = ref()
// ref 创建的模板json
const templateRef = ref()
const onClickOutside = () => {
unref(popoverRef).popperRef?.delayHide?.()
}
const onClickOutside = () => {
unref(popoverRef).popperRef?.delayHide?.()
}
const setPaperRule = () => {
setPaperOther()
popoverRef.value.hide();
}
const setPaperRule = () => {
setPaperOther()
popoverRef.value.hide()
}
const buildDesigner = () => {
// eslint-disable-next-line no-undef
$('#hiprint-printTemplate').empty() // 先清空, 避免重复构建
// 注意事项: 模板json(object)
// 如果使用 vue ref创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
hiprintTemplate.value = newHiprintPrintTemplate(TEMPLATE_KEY, {
template: templateRef.value, // 模板json(object)
settingContainer: '#PrintElementOptionSetting', // 元素参数容器
})
// hiprintTemplate.value.addPrintPanel({ paperNumberDisabled: false })
// 构建 并填充到 容器中
hiprintTemplate.value.design('#hiprint-printTemplate')
// console.log(hiprintTemplate.value);
}
const buildDesigner = () => {
// eslint-disable-next-line no-undef
$("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
// 注意事项: 模板json(object)
// 如果使用 vue ref创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
hiprintTemplate.value = newHiprintPrintTemplate(TEMPLATE_KEY, {
template: templateRef.value, // 模板json(object)
settingContainer: "#PrintElementOptionSetting", // 元素参数容器
});
// hiprintTemplate.value.addPrintPanel({ paperNumberDisabled: false })
// 构建 并填充到 容器中
hiprintTemplate.value.design("#hiprint-printTemplate");
// console.log(hiprintTemplate.value);
};
/**
* 浏览器打印
*/
const print = () => {
// 参数: 打印时设置 左偏移量，上偏移量
let options = { leftOffset: -1, topOffset: -1 }
// 扩展
let ext = {
callback: () => {
// console.log("浏览器打印窗口已打开");
},
styleHandler: () => {
// 重写 文本 打印样式
return '<style>.hiprint-printElement-text{color:red !important;}</style>'
},
}
const list = hiprintTemplate.value.getJson().panels
// console.log(list, 'list');
let printData = {} as any
if (list)
list[0].printElements.map(
(item: any) => (printData[item.options.field] = item.options.testData)
)
// (printData, 'printData');
/**
* 浏览器打印
*/
const print = () => {
// 参数: 打印时设置 左偏移量，上偏移量
let options = { leftOffset: -1, topOffset: -1 };
// 扩展
let ext = {
callback: () => {
// console.log("浏览器打印窗口已打开");
},
styleHandler: () => {
// 重写 文本 打印样式
return "<style>.hiprint-printElement-text{color:red !important;}</style>";
},
};
const list = hiprintTemplate.value.getJson().panels
// console.log(list, 'list');
let printData = {} as any
if (list)
list[0].printElements.map((item: any) => printData[item.options.field] = item.options.testData)
// (printData, 'printData');
// 调用浏览器打印
hiprintTemplate.value.print(printData, options, ext)
// console.log(hiprintTemplate.value.getJson());
}
/**
* 直接打印: 借助客户端,静默打印(无弹窗直接打印)
* 注意: 需要先连接客户端
*/
const print2 = () => {
if (hiprint.hiwebSocket.opened) {
// hiprintTemplate.value.print2(printData);
} else {
alert('请先连接客户端(刷新网页), 然后再点击「直接打印」')
}
}
// ----------------- 模板对象 api 部分 -----------------
/**
* 旋转纸张
*/
const rotatePaper = () => {
hiprintTemplate.value.rotatePaper()
}
// 调用浏览器打印
hiprintTemplate.value.print(printData, options, ext);
// console.log(hiprintTemplate.value.getJson());
};
/**
* 直接打印: 借助客户端,静默打印(无弹窗直接打印)
* 注意: 需要先连接客户端
*/
const print2 = () => {
if (hiprint.hiwebSocket.opened) {
// hiprintTemplate.value.print2(printData);
} else {
alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
}
};
// ----------------- 模板对象 api 部分 -----------------
/**
* 旋转纸张
*/
const rotatePaper = () => {
hiprintTemplate.value.rotatePaper();
};
/**
* 清空所有元素
*/
const clearPaper = () => hiprintTemplate.value.clear()
/**
* 清空所有元素
*/
const clearPaper = () => hiprintTemplate.value.clear();
/**
* 清空所有元素
*/
const savePaper = () => unref(popoverSaveRef).popperRef?.delayHide?.()
/**
* 清空所有元素
*/
const savePaper = () => unref(popoverSaveRef).popperRef?.delayHide?.()
/**
* 导出模板 json
* 必须确保 hiprintTemplate.value 已成功创建
*/
const exportJson = () => jsonviewRef.value.show(hiprintTemplate.value)
/**
* 导出模板 json
* 必须确保 hiprintTemplate.value 已成功创建
*/
const exportJson = () => jsonviewRef.value.show(hiprintTemplate.value)
// 预览
const show = () => {
const list = hiprintTemplate.value.getJson().panels
let printData = {} as any
if (list)
list[0].printElements.map(
(item: any) => (printData[item.options.field] = item.options.testData)
)
previewRef.value.show(hiprintTemplate.value, printData)
}
// 预览
const show = () => {
const list = hiprintTemplate.value.getJson().panels
let printData = {} as any
if (list)
list[0].printElements.map((item: any) => printData[item.options.field] = item.options.testData)
previewRef.value.show(hiprintTemplate.value, printData)
}
const handleClose = () => {
emits('update:modelValue', false)
}
const handleClose = () => {
emits('update:modelValue', false)
}
const setPaperTitle = () => {
emits('savePrintData', hiprintTemplate.value.getJson(), paperTitle.value)
popoverSaveRef.value.hide()
}
const setPaperTitle = () => {
emits('savePrintData', hiprintTemplate.value.getJson(), paperTitle.value)
popoverSaveRef.value.hide();
}
/**
* 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
* 因为都是把元素挂载到对应容器中, 必须要先找到该容器
*/
const mounted = () => {
templateRef.value = props.templateData
setTimeout(() => {
buildLeftElement()
buildDesigner()
setPaper('custom', paperTypes.value.custom)
}, 300)
}
/**
* 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
* 因为都是把元素挂载到对应容器中, 必须要先找到该容器
*/
const mounted = () => {
templateRef.value = props.templateData
setTimeout(() => {
buildLeftElement();
buildDesigner();
setPaper('custom', paperTypes.value.custom)
}, 300);
}
defineExpose({
templateRef,
paperTitle,
hiprintTemplate,
mounted
})
defineExpose({
templateRef,
paperTitle,
hiprintTemplate,
mounted,
})
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>
\ No newline at end of file
@import '../index.scss';
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论