Skip to content

P
PrintVue
提交 e01e152b authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

更新最新代码

上级 2919c85f
隐藏空白字符变更
内嵌 并排
正在显示 包含 137 行增加 和 141 行删除
package.json
浏览文件 @ e01e152b
......@@ -10,9 +10,9 @@
"import": "./dist/PrintVue.js",
"require": "./dist/PrintVue.umd.cjs"
}
},
},
"publishConfig": {
"registry": "http://192.168.1.87:8081/repository/vue/",
"registry": "http://assembly.lingqingkeji.com/repository/vue/",
"access": "public"
},
"scripts": {
......
src/printTemplate/components/json-view.vue
浏览文件 @ e01e152b
......@@ -42,7 +42,7 @@ const show = (hiprintTemplate?: any) => {
state.spinning = true
if (hiprintTemplate)
state.template = hiprintTemplate
console.log(state.template);
// console.log(state.template);
setTimeout(() => {
let json = state.tidMode ? state.template.getJsonTid() : state.template.getJson();
let beautify = state.beautify ? 2 : 0;
......
src/printTemplate/components/printDrawer.vue
浏览文件 @ e01e152b
......@@ -126,14 +126,10 @@ const props = defineProps({
templateData: {
type: Object,
default: {}
},
templateTitle: {
type: String,
default: ''
}
})
const emits = defineEmits(['update:modelValue', 'savePrintData', 'update:templateTitle'])
const emits = defineEmits(['update:modelValue', 'savePrintData'])
// const TEMPLATE_KEY = getCurrentInstance().type.name; // 存储模板对象的 key
// console.log(TEMPLATE_KEY);
const TEMPLATE_KEY = undefined
......@@ -150,20 +146,21 @@ const jsonviewRef = ref()
// 自定义传入 provider 的参数
let options = {
config: {
tid: "providerModule1.config",
title: "参数provider示例",
type: "text",
options: {
testData: "单据表头",
height: 30,
fontSize: 16,
},
},
};
// 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), provider2(options)],
providers: [provider1(options)],
});
/**
......@@ -184,7 +181,7 @@ const buildLeftElement = () => {
* 注意: 必须要在 onMounted 中去构建
* 因为都是把元素挂载到对应容器中, 必须要先找到该容器
*/
let hiprintTemplate: any;
let hiprintTemplate = ref();
// ref 创建的模板json
const templateRef = ref();
......@@ -203,14 +200,14 @@ const buildDesigner = () => {
$("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
// 注意事项: 模板json(object)
// 如果使用 vue ref创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
hiprintTemplate = newHiprintPrintTemplate(TEMPLATE_KEY, {
hiprintTemplate.value = newHiprintPrintTemplate(TEMPLATE_KEY, {
template: templateRef.value, // 模板json(object)
settingContainer: "#PrintElementOptionSetting", // 元素参数容器
});
// hiprintTemplate.addPrintPanel({ paperNumberDisabled: false })
// hiprintTemplate.value.addPrintPanel({ paperNumberDisabled: false })
// 构建 并填充到 容器中
hiprintTemplate.design("#hiprint-printTemplate");
console.log(hiprintTemplate);
hiprintTemplate.value.design("#hiprint-printTemplate");
// console.log(hiprintTemplate.value);
};
/**
......@@ -222,23 +219,23 @@ const print = () => {
// 扩展
let ext = {
callback: () => {
console.log("浏览器打印窗口已打开");
// console.log("浏览器打印窗口已打开");
},
styleHandler: () => {
// 重写 文本 打印样式
return "<style>.hiprint-printElement-text{color:red !important;}</style>";
},
};
const list = hiprintTemplate.getJson().panels
console.log(list, 'list');
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)
console.log(printData, 'printData');
// (printData, 'printData');
// 调用浏览器打印
hiprintTemplate.print(printData, options, ext);
console.log(hiprintTemplate.getJson());
hiprintTemplate.value.print(printData, options, ext);
// console.log(hiprintTemplate.value.getJson());
};
/**
* 直接打印: 借助客户端,静默打印(无弹窗直接打印)
......@@ -246,7 +243,7 @@ const print = () => {
*/
const print2 = () => {
if (hiprint.hiwebSocket.opened) {
// hiprintTemplate.print2(printData);
// hiprintTemplate.value.print2(printData);
} else {
alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
}
......@@ -256,13 +253,13 @@ const print2 = () => {
* 旋转纸张
*/
const rotatePaper = () => {
hiprintTemplate.rotatePaper();
hiprintTemplate.value.rotatePaper();
};
/**
* 清空所有元素
*/
const clearPaper = () => hiprintTemplate.clear();
const clearPaper = () => hiprintTemplate.value.clear();
/**
* 清空所有元素
......@@ -271,18 +268,17 @@ const savePaper = () => unref(popoverSaveRef).popperRef?.delayHide?.()
/**
* 导出模板 json
* 必须确保 hiprintTemplate 已成功创建
* 必须确保 hiprintTemplate.value 已成功创建
*/
const exportJson = () => jsonviewRef.value.show(hiprintTemplate)
const exportJson = () => jsonviewRef.value.show(hiprintTemplate.value)
// 预览
const show = () => {
const list = hiprintTemplate.getJson().panels
console.log(list);
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, printData)
previewRef.value.show(hiprintTemplate.value, printData)
}
const handleClose = () => {
......@@ -290,7 +286,7 @@ const handleClose = () => {
}
const setPaperTitle = () => {
emits('savePrintData', hiprintTemplate.getJson())
emits('savePrintData', hiprintTemplate.value.getJson(), paperTitle.value)
popoverSaveRef.value.hide();
}
......@@ -310,6 +306,7 @@ const mounted = () => {
defineExpose({
templateRef,
paperTitle,
hiprintTemplate,
mounted
})
</script>
......
src/printTemplate/index.vue
浏览文件 @ e01e152b
......@@ -70,7 +70,7 @@ const tableData = [
]
const handleClick = () => {
console.log('click')
// console.log('click')
}
const show = () => {
showDrawer.value = true
......
src/printTemplate/ts/provider1.ts
浏览文件 @ e01e152b
import { hiprint } from "vue-plugin-hiprint";
export const provider1 = function (options: any) {
console.log(options);
// console.log(options);
var addElementTypes = function (context: any) {
context.removePrintElementTypes("providerModule1");
context.addPrintElementTypes("providerModule1", [
new hiprint.PrintElementTypeGroup("常规", [
options.config,
// options.config,
// {
// tid: "providerModule1.header",
// title: "单据表头",
// data: "单据表头",
// type: "text",
// options: {
// testData: "单据表头",
// height: 17,
// fontSize: 16.5,
// fontWeight: "700",
// textAlign: "center",
// hideTitle: true,
// },
// },
// {
// tid: "providerModule1.type",
// title: "单据类型",
// data: "单据类型",
// type: "text",
// options: {
// testData: "单据类型",
// height: 16,
// fontSize: 15,
// fontWeight: "700",
// textAlign: "center",
// hideTitle: true,
// },
// },
{
tid: "providerModule1.header",
title: "单据表头",
data: "单据表头",
type: "text",
options: {
testData: "单据表头",
height: 17,
fontSize: 16.5,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
{
tid: "providerModule1.type",
title: "单据类型",
data: "单据类型",
type: "text",
options: {
testData: "单据类型",
height: 16,
fontSize: 15,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
{
tid: "providerModule1.order",
title: "订单编号",
tid: "providerModule1.text",
title: "文本字段",
data: "XS888888888",
type: "text",
options: {
field: "order",
field: "text",
testData: "XS888888888",
height: 16,
fontSize: 6.75,
......@@ -50,25 +50,25 @@ export const provider1 = function (options: any) {
textContentVerticalAlign: "middle",
},
},
{
tid: "providerModule1.date",
title: "业务日期",
data: "2020-01-01",
type: "text",
options: {
field: "date",
testData: "2020-01-01",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
// {
// tid: "providerModule1.date",
// title: "日期字段",
// data: "2020-01-01",
// type: "text",
// options: {
// field: "date",
// testData: "2020-01-01",
// height: 16,
// fontSize: 6.75,
// fontWeight: "700",
// textAlign: "left",
// textContentVerticalAlign: "middle",
// },
// },
{
tid: "providerModule1.barcode",
title: "条形码",
data: "XS888888888",
data: "",
type: "text",
options: {
field: "barcode",
......@@ -83,7 +83,7 @@ export const provider1 = function (options: any) {
{
tid: "providerModule1.qrcode",
title: "二维码",
data: "XS888888888",
data: "",
type: "text",
options: {
field: "qrcode",
......@@ -94,55 +94,55 @@ export const provider1 = function (options: any) {
textType: "qrcode",
},
},
{
tid: "providerModule1.platform",
title: "平台名称",
data: "平台名称",
type: "text",
options: {
field: "platform",
testData: "平台名称",
height: 17,
fontSize: 16.5,
fontWeight: "700",
textAlign: "center",
hideTitle: true,
},
},
{ tid: "providerModule1.image", title: "Logo", data: "", type: "image" },
]),
new hiprint.PrintElementTypeGroup("客户", [
{
tid: "providerModule1.khname",
title: "客户名称",
data: "高级客户",
type: "text",
options: {
field: "name",
testData: "高级客户",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
{
tid: "providerModule1.tel",
title: "客户电话",
data: "18888888888",
type: "text",
options: {
field: "tel",
testData: "18888888888",
height: 16,
fontSize: 6.75,
fontWeight: "700",
textAlign: "left",
textContentVerticalAlign: "middle",
},
},
// {
// tid: "providerModule1.platform",
// title: "平台名称",
// data: "平台名称",
// type: "text",
// options: {
// field: "platform",
// testData: "平台名称",
// height: 17,
// fontSize: 16.5,
// fontWeight: "700",
// textAlign: "center",
// hideTitle: true,
// },
// },
// { tid: "providerModule1.image", title: "Logo", data: "", type: "image" },
]),
// new hiprint.PrintElementTypeGroup("客户", [
// {
// tid: "providerModule1.khname",
// title: "客户名称",
// data: "高级客户",
// type: "text",
// options: {
// field: "name",
// testData: "高级客户",
// height: 16,
// fontSize: 6.75,
// fontWeight: "700",
// textAlign: "left",
// textContentVerticalAlign: "middle",
// },
// },
// {
// tid: "providerModule1.tel",
// title: "客户电话",
// data: "18888888888",
// type: "text",
// options: {
// field: "tel",
// testData: "18888888888",
// height: 16,
// fontSize: 6.75,
// fontWeight: "700",
// textAlign: "left",
// textContentVerticalAlign: "middle",
// },
// },
// ]),
]);
};
return {
......
src/printTemplate/ts/provider2.ts
浏览文件 @ e01e152b
import { hiprint } from "vue-plugin-hiprint";
export const provider2 = function (options: any) {
console.log(options);
var addElementTypes = function (context: any) {
context.removePrintElementTypes("providerModule2");
context.addPrintElementTypes("providerModule2", [
......@@ -33,7 +32,7 @@ export const provider2 = function (options: any) {
],
],
footerFormatter: function (options: any, rows: any, data: any, currentPageGridRowsData: any) {
console.log(currentPageGridRowsData);
// console.log(currentPageGridRowsData);
if (data && data["totalCap"]) {
return `<td style="padding:0 10px" colspan="100">${"应收金额大写: " + data["totalCap"]}</td>`;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论