diff --git a/res/template4.png b/res/template4.png new file mode 100644 index 00000000..8fb2fdb5 Binary files /dev/null and b/res/template4.png differ diff --git a/src/demo/templates/preview.vue b/src/demo/templates/preview.vue index 662d8379..1fc0e53c 100644 --- a/src/demo/templates/preview.vue +++ b/src/demo/templates/preview.vue @@ -56,12 +56,15 @@ export default { // 数据 name: '名称', json: {}, - printData: {} + printData: {}, + // 扩展 css + extendCss: '' } }, methods: { hideModal() { this.visible = false + $("link[media=print]").empty(); }, show(template) { let that = this; @@ -71,6 +74,10 @@ export default { this.name = template.name this.json = template.json this.printData = template.printData + this.extendCss = template.extendCss || ""; + if (this.extendCss.length > 1) { + $(this.extendCss).appendTo($("link[media=print]")); + } let isMounted = $('#template-preview').length <= 0 || $('#template-preview-setting').length <= 0; do { setTimeout(() => { @@ -89,20 +96,33 @@ export default { } while (isMounted) }, print() { + let that = this; this.waitShowPrinter = true this.hiprintTemplate.print(this.printData, {}, { callback: () => { this.waitShowPrinter = false + }, + styleHandler: () => { + return that.extendCss } }) }, toPdf() { - this.hiprintTemplate.toPdf(this.printData, this.name); + let that = this; + this.hiprintTemplate.toPdf(this.printData, this.name, { + styleHandler: () => { + return that.extendCss + } + }); }, print2() { if (hiprint.hiwebSocket.opened) { + let that = this; this.hiprintTemplate.print2(this.printData, { printer: '', title: this.name, + styleHandler: () => { + return that.extendCss + } }) } else this.$message.error('请先连接直接打印客户端') diff --git a/src/demo/templates/template-files/template4.js b/src/demo/templates/template-files/template4.js new file mode 100644 index 00000000..df1cc658 --- /dev/null +++ b/src/demo/templates/template-files/template4.js @@ -0,0 +1,630 @@ +export const name = '自定义渲染表格'; +export const desc = '不一样的表格显示效果'; +export const author = '群友提供' +export const link = 'https://github.com/CcSimple' +// url 或者 base64 或者 require('../../../assets/logo.png') +export const preview = 'https://gitee.com/CcSimple/vue-plugin-hiprint/raw/main/res/template4.png'; +export const extendCss = "" +export const printData = { + title: 'XXXX有限公司', // 标题 + orderId: 'XY202304001', // 订单号 + workId: 'GLSW2023001', // 工程单号 + work_info: [ + { + workId: 'GLSW2023001', // 工程单号 + order_date: '2023-06-03', // 订单日期 + customer: '广州戈蓝生物科技有限公司', // 客户名称 + quality: '做工精细注意细节', // 质量要求 + delivery_date: '2023-06-31', // 交货日期 + } + ], + printDate: '2023/06/03 12:00:00', // 打印日期 + creater: '张三', // 制单人 + checker: '李四', // 审核人 + product_info: [ // 产品信息 + { + product_type: '精装盒', + product_name: 'Benggre臻护凝时皮肤管理套', + product_size: '380*280*45', + product_quantity: 1000, + product_packing: '纸包', + workmanship: '手工、粘、啤', + yinshuase: '四色', + wenjian: '新', + yangpin: '有', + remark: '不明白请及时问清楚', // 备注 + material: [ + { + type_name: '面纸', + name: '350克冰白珠光纸', + quantity: 1400, + size: '787*880（各拼一个）', + warkmanship: '哑胶、浮雕烫金、烫金、击凸、单面印' + }, + {type_name: '内盒卡纸', name: '350克单铜', quantity: 2300, size: '787*880（各拼一个）', warkmanship: ''}, + ] + }, + { + product_type: '精装盒', + product_name: 'Benggre肌肤水润嫩滑肌套', + product_size: '380*280*45', + product_quantity: 1000, + product_packing: '纸包', + workmanship: '哑胶、浮雕烫金、烫金、击凸、手工、粘、啤、单面印', + yinshuase: '四色', + wenjian: '新', + yangpin: '有', + remark: '不明白请及时问清楚', // 备注 + material: [ + { + type_name: '面纸', + name: '350克冰白珠光纸', + quantity: 1400, + size: '787*880（各拼一个）', + warkmanship: '哑胶、浮雕烫金、烫金、击凸、单面印' + }, + {type_name: '内盒卡纸', name: '350克单铜', quantity: 2300, size: '787*880（各拼一个）', warkmanship: ''}, + ] + } + ], + order_remark: 'Benggre臻护凝时皮肤管理套 （尺寸：380*280*45数量1000个）2、Benggre肌肤水润嫩滑肌套 （尺寸：380*280*45数量1000个）3、Benggre光感焕肤套 （尺寸：340*260*45数量1000个）4、Benggre三纹鱼舒缓倍护能量套 （尺寸：380*280*45数量1000个）：350克冰白珠光纸四色印刷，工艺烫金、佛雕烫金、激凸，内盒350克单铜过哑膜啤折盒，内有吸塑要放吸塑进去注意质量不要开胶烫金不清晰磨花等情况。跟进一下客户的纸箱', +} +export const json = { + "panels": [ + { + "index": "0", + "name": "1", + "height": 296, + "width": 210, + "paperHeader": "66", + "paperFooter": 813, + "printElements": [ + { + "options": { + "left": 145, + "top": 12.5, + "height": 19.5, + "width": 316.5, + "field": "title", + "testData": "xxxxx有限公司", + "fontSize": 20.25, + "letterSpacing": 6, + "fontWeight": "700", + "textContentVerticalAlign": "middle", + "hideTitle": true, + "title": "企业名称", + "right": 461.25, + "bottom": 33, + "vCenter": 303, + "hCenter": 23.25, + "coordinateSync": false, + "widthHeightSync": false, + "qrCodeLevel": 0, + "textAlign": "center" + }, + "printElementType": { + "title": "企业名称", + "type": "text" + } + }, + { + "options": { + "left": 507, + "top": 15, + "height": 42, + "width": 42, + "field": "workId", + "testData": "MGPT2023002", + "fontSize": 12, + "lineHeight": 18, + "textType": "qrcode", + "title": "二维码", + "right": 549, + "bottom": 51, + "vCenter": 528, + "hCenter": 30, + "coordinateSync": false, + "widthHeightSync": false, + "qrCodeLevel": 0 + }, + "printElementType": { + "title": "二维码", + "type": "text" + } + }, + { + "options": { + "left": 247.5, + "top": 37.5, + "height": 19.5, + "width": 100.5, + "title": "工程单", + "right": 347.25, + "bottom": 42.75, + "vCenter": 297, + "hCenter": 37.875, + "coordinateSync": false, + "widthHeightSync": false, + "fontSize": 18, + "fontWeight": "400", + "letterSpacing": 9, + "textAlign": "center", + "textContentVerticalAlign": "middle", + "lineHeight": 18, + "qrCodeLevel": 0 + }, + "printElementType": { + "title": "文本", + "type": "text" + } + }, + { + "options": { + "left": 13.5, + "top": 45, + "height": 16, + "width": 120, + "field": "orderId", + "testData": "XY20230602001", + "fontSize": 6.75, + "textAlign": "center", + "textContentVerticalAlign": "middle", + "title": "订单编号", + "right": 124.5, + "bottom": 60.25, + "vCenter": 64.5, + "hCenter": 52.25, + "coordinateSync": false, + "widthHeightSync": false, + "qrCodeLevel": 0 + }, + "printElementType": { + "title": "订单编号", + "type": "text" + } + }, + { + "options": { + "left": 7.5, + "top": 61.5, + "height": 9, + "width": 577.5, + "right": 96.75, + "bottom": 64.5, + "vCenter": 51.75, + "hCenter": 60 + }, + "printElementType": { + "title": "横线", + "type": "hline" + } + }, + { + "options": { + "left": 28.5, + "top": 70.5, + "height": 36, + "width": 538.5, + "field": "work_info", + "fields": [ + { + "text": "订单日期", + "field": "order_date" + }, + { + "text": "工程单号", + "field": "workId" + }, + { + "text": "客户名称", + "field": "customer" + }, + { + "text": "交货日期", + "field": "delivery_date" + }, + { + "text": "质量要求", + "field": "quality" + } + ], + "right": 578.5, + "bottom": 109.5, + "vCenter": 303.5, + "hCenter": 91.5, + "coordinateSync": false, + "widthHeightSync": false, + "columns": [ + [ + { + "width": 78.01380865921793, + "title": "订单日期", + "field": "order_date", + "checked": true, + "columnId": "order_date", + "fixed": false, + "rowspan": 1, + "colspan": 1, + "align": "center" + }, + { + "width": 82.37420460893856, + "title": "工程单号", + "field": "workId", + "checked": true, + "columnId": "workId", + "fixed": false, + "rowspan": 1, + "colspan": 1, + "align": "center" + }, + { + "width": 164.95573673184356, + "title": "客户名称", + "field": "customer", + "checked": true, + "columnId": "customer", + "fixed": false, + "rowspan": 1, + "colspan": 1, + "align": "left", + "tableQRCodeLevel": 0, + "tableSummaryTitle": true, + "tableSummary": "" + }, + { + "width": 90.0673840782123, + "title": "交货日期", + "field": "delivery_date", + "checked": true, + "columnId": "delivery_date", + "fixed": false, + "rowspan": 1, + "colspan": 1, + "align": "center" + }, + { + "width": 123.08886592178769, + "title": "质量要求", + "field": "quality", + "checked": true, + "columnId": "quality", + "fixed": false, + "rowspan": 1, + "colspan": 1, + "align": "left", + "tableQRCodeLevel": 0, + "tableSummaryTitle": true, + "tableSummary": "" + } + ] + ] + }, + "printElementType": { + "title": "订单信息（表格）", + "type": "table", + "editable": true, + "columnDisplayEditable": true, + "columnDisplayIndexEditable": true, + "columnTitleEditable": true, + "columnResizable": true, + "columnAlignEditable": true, + "isEnableEditField": true, + "isEnableContextMenu": true, + "isEnableInsertRow": true, + "isEnableDeleteRow": true, + "isEnableInsertColumn": true, + "isEnableDeleteColumn": true, + "isEnableMergeCell": true + } + }, + { + "options": { + "left": 25.5, + "top": 123, + "height": 126, + "width": 546, + "tableFooterRepeat": "no", + "field": "product_info", + "fields": [ + { + "text": "类型", + "field": "product_type" + } + ], + "right": 573, + "bottom": 248.25, + "vCenter": 300, + "hCenter": 185.25, + "coordinateSync": false, + "widthHeightSync": false, + "tableHeaderRepeat": "none", + "tableBorder": "noBorder", + "tableHeaderBorder": "noBorder", + "tableHeaderCellBorder": "noBorder", + "tableBodyRowBorder": "noBorder", + "tableBodyCellBorder": "noBorder", + "tableFooterBorder": "noBorder", + "tableFooterCellBorder": "noBorder", + "columns": [ + [ + { + "width": 546, + "title": "类型", + "field": "product_type", + "checked": true, + "columnId": "product_type", + "fixed": false, + "rowspan": 1, + "colspan": 1, + "align": "left", + "renderFormatter": "function(value,row,index,options){\n let rowTemplate = '';\n rowTemplate += `\n
\n
\n 产品类型：\n ${row.product_type}\n
\n
\n 产品名称：\n ${row.product_name}\n
\n
\n 产品尺寸：\n ${row.product_size}\n
\n
\n 订单数量：\n ${row.product_quantity}\n
\n
\n 包装方式：\n ${row.product_packing}\n
\n
\n 印刷色：\n ${row.yinshuase}\n
\n
\n 文件：\n ${row.wenjian}\n
\n
\n 样品：\n ${row.yangpin}\n
\n
\n 印后工艺：\n ${row.workmanship}\n
\n
\n 注意事项：\n ${row.remark}\n
\n
\n
\n
类型
\n
材料名称
\n
尺寸
\n
数量
\n
材料工艺
\n
`;\n for (var i = 0; i < row.material?.length; i++) {\n rowTemplate += `\n
\n
${row.material[i].type_name}
\n
${row.material[i].name}
\n
${row.material[i].size}
\n
${row.material[i].quantity}
\n
${row.material[i].warkmanship}
\n
\n `;\n }\n rowTemplate += `
`;\n return rowTemplate;\n}", + "tableQRCodeLevel": 0, + "tableSummaryTitle": true, + "tableSummary": "" + } + ] + ] + }, + "printElementType": { + "title": "产品资料", + "type": "table", + "editable": true, + "columnDisplayEditable": true, + "columnDisplayIndexEditable": true, + "columnTitleEditable": true, + "columnResizable": true, + "columnAlignEditable": true, + "isEnableEditField": true, + "isEnableContextMenu": true, + "isEnableInsertRow": true, + "isEnableDeleteRow": true, + "isEnableInsertColumn": true, + "isEnableDeleteColumn": true, + "isEnableMergeCell": true + } + }, + { + "options": { + "left": 22.5, + "top": 265.5, + "height": 177, + "width": 538.5, + "right": 567, + "bottom": 522.75, + "vCenter": 297.75, + "hCenter": 434.25 + }, + "printElementType": { + "title": "矩形", + "type": "rect" + } + }, + { + "options": { + "left": 30, + "top": 268.5, + "height": 27, + "width": 82.5, + "title": "订单备注", + "right": 117.75, + "bottom": 501, + "vCenter": 76.5, + "hCenter": 487.5, + "coordinateSync": false, + "widthHeightSync": false, + "hideTitle": true, + "fontSize": 12, + "textContentVerticalAlign": "middle", + "qrCodeLevel": 0 + }, + "printElementType": { + "title": "文本", + "type": "text" + } + }, + { + "options": { + "left": 36, + "top": 304.5, + "height": 124.5, + "width": 511.5, + "right": 553.5, + "bottom": 509.25, + "vCenter": 297.75, + "hCenter": 432.75, + "field": "order_remark", + "coordinateSync": false, + "widthHeightSync": false, + "hideTitle": true, + "fontFamily": "SimSun", + "letterSpacing": 2.25, + "qrCodeLevel": 0 + }, + "printElementType": { + "title": "文本", + "type": "text" + } + }, + { + "options": { + "left": 307.5, + "top": 450, + "height": 16, + "width": 120, + "field": "creater", + "testData": "李四", + "fontSize": 6.75, + "textAlign": "left", + "textContentVerticalAlign": "middle", + "title": "制单人", + "right": 419.25, + "bottom": 598, + "vCenter": 359.25, + "hCenter": 590 + }, + "printElementType": { + "title": "制单人", + "type": "text" + } + }, + { + "options": { + "left": 429, + "top": 450, + "height": 16, + "width": 120, + "field": "checker", + "testData": "赵五", + "fontSize": 6.75, + "textContentVerticalAlign": "middle", + "title": "审核", + "right": 526.5, + "bottom": 269.5, + "vCenter": 466.5, + "hCenter": 261.5, + "coordinateSync": false, + "widthHeightSync": false, + "qrCodeLevel": 0 + }, + "printElementType": { + "title": "审核员", + "type": "text" + } + }, + { + "options": { + "left": 7.5, + "top": 814.5, + "height": 16, + "width": 168, + "field": "printDate", + "testData": "2022-01-01 09:00", + "fontSize": 6.75, + "textAlign": "left", + "textContentVerticalAlign": "middle", + "title": "打印时间", + "right": 147, + "bottom": 833.5, + "vCenter": 77.25, + "hCenter": 825.5 + }, + "printElementType": { + "title": "打印时间", + "type": "text" + } + } + ], + "paperNumberLeft": 300, + "paperNumberTop": 816, + "paperNumberContinue": true, + "watermarkOptions": { + "content": "", + "fillStyle": "rgba(184, 184, 184, 0.3)", + "fontSize": "14px", + "rotate": 25, + "width": 200, + "height": 200, + "timestamp": true, + "format": "YYYY-MM-DD HH:mm" + } + } + ] +} + +export default { + preview: preview, + name: name, + desc: desc, + author: author, + link: link, + extendCss: extendCss, + printData: printData, + json: json +}