Skip to content

Commit

Permalink
feat: 新增预览功能
Browse files Browse the repository at this point in the history
Yiiu committed Sep 29, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 03432f0 commit ea61287
Showing 6 changed files with 85 additions and 13 deletions.
3 changes: 2 additions & 1 deletion global.d.ts
Original file line number Diff line number Diff line change
@@ -73,7 +73,8 @@ declare module 'gm-x-printer' {
): (obj: { data: any; config: any }) => Promise<any>
function doBatchPrint(
list: any[],
isTest?: boolean
isTest?: boolean,
extraConfig?: { isPreview: boolean; isTipZoom: boolean },
): (list: []) => Promise<any>
export {
Editor,
12 changes: 11 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
@@ -18,7 +18,15 @@ import EditorAfterSales from './editor_after_sales'
import EditEshop from './editor_eshop'
import EditorManage from './editor_manage'

import { BatchPrinter, doBatchPrint, doPrint, Printer, getCSS } from './printer'
import {
BatchPrinter,
doBatchPrint,
renderBatchPrintToDom,
doPrint,
Printer,
getCSS,
getHtml
} from './printer'
import { MULTI_SUFFIX, DiyTimeType } from './config'

export * from './util'
@@ -46,6 +54,8 @@ export {
BatchPrinter,
doPrint,
doBatchPrint,
renderBatchPrintToDom,
getHtml,
getCSS,
MULTI_SUFFIX,
DiyTimeType
35 changes: 28 additions & 7 deletions src/printer/do_print.js
Original file line number Diff line number Diff line change
@@ -5,11 +5,12 @@ import getCSS from './get_css'
import BatchPrinter from './batch_printer'
import { isZoom2 } from 'gm-util'
import { afterImgAndSvgLoaded } from '../util'
import ReactDOMServer from 'react-dom/server'

const printerId = '_gm-printer_' + Math.random()
let $printer = window.document.getElementById(printerId)

function init({ isTest, isTipZoom = true }) {
function init({ isTest, isPreview, isTipZoom = true }) {
isTipZoom &&
isZoom2() &&
window.alert(
@@ -20,6 +21,8 @@ function init({ isTest, isTipZoom = true }) {
$printer.id = printerId
$printer.style.position = 'fixed'
$printer.style.top = '0'
$printer.frameborder = '0'
$printer.style.border = 'none'
$printer.style.width = '100%' // 使移动端可滚动
if (isTest) {
// 模板编辑[测试打印],隐藏起来
@@ -44,6 +47,9 @@ function init({ isTest, isTipZoom = true }) {

const div = doc.createElement('div')
div.id = 'appContainer'
if (isPreview) {
div.className = 'gm-preview'
}

doc.body.appendChild(div)
}
@@ -69,7 +75,7 @@ function toDoPrint({ data, config }) {
})
}

function toDoPrintBatch(list) {
function toDoPrintBatch(list, isPrint = true) {
return new window.Promise(resolve => {
const $app = $printer.contentWindow.document.getElementById('appContainer')

@@ -79,7 +85,9 @@ function toDoPrintBatch(list) {
list={list}
onReady={() => {
afterImgAndSvgLoaded(() => {
$printer.contentWindow.print()
if (isPrint) {
$printer.contentWindow.print()
}
resolve()
}, $app)
}}
@@ -98,11 +106,24 @@ function doPrint({ data, config }, isTest) {
function doBatchPrint(
list,
isTest,
extraCofnig = { isPrint: true, isTipZoom: true }
extraConfig = { isPreview: false, isTipZoom: true }
) {
init({ isTest, isTipZoom: extraCofnig.isTipZoom })
init({
isTest,
isPreview: extraConfig.isPreview,
isTipZoom: extraConfig.isTipZoom
})

return toDoPrintBatch(list, !extraConfig.isPreview)
}

function renderBatchPrintToDom(list, container) {
// ReactDOM.unmountComponentAtNode(container)
ReactDOM.render(<BatchPrinter list={list} />, container)
}

return toDoPrintBatch(list)
function getHtml(list) {
return ReactDOMServer.renderToString(<BatchPrinter list={list} />)
}

export { doPrint, doBatchPrint }
export { doPrint, doBatchPrint, getHtml, renderBatchPrintToDom }
17 changes: 15 additions & 2 deletions src/printer/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import Printer from './printer'
import BatchPrinter from './batch_printer'
import { doPrint, doBatchPrint } from './do_print'
import {
doPrint,
doBatchPrint,
getHtml,
renderBatchPrintToDom
} from './do_print'
import getCSS from './get_css'

export { doPrint, doBatchPrint, Printer, BatchPrinter, getCSS }
export {
doPrint,
doBatchPrint,
Printer,
BatchPrinter,
getCSS,
getHtml,
renderBatchPrintToDom
}
1 change: 0 additions & 1 deletion src/printer/page_summary.js
Original file line number Diff line number Diff line change
@@ -65,7 +65,6 @@ const PageSummary = props => {
// 是否是打印全部商品
// 打印全部商品不需要计算组合商品
const isAllProduct = get(config, 'dataKey') === 'allprod'
console.log(2424242424, isAllProduct)

if (
pageSummaryShow &&
30 changes: 29 additions & 1 deletion src/printer/style.less
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
// 全局样式
background: whitesmoke;
font-size: 12px;
font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;
font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
@@ -41,9 +41,11 @@
.gm-printer-block {
position: relative;
cursor: move;

.gm-printer-block-text-edit {
display: none;
}

img {
display: inline-block;
width: 100%;
@@ -72,6 +74,7 @@
flex-direction: row;
flex-wrap: wrap;
overflow: hidden;

.gm-printer-counter-item {
border: 1px solid black;
margin: 2px 0;
@@ -152,3 +155,28 @@
@page {
margin: 0;
}

// 预览模式
@media screen {
.gm-preview {
display: flex;
flex-direction: column;
align-items: center;
background-color: #F5F5F5;

.gm-printer {
background-color: transparent;

&:last-child {
margin-bottom: 24px;
}
}

.gm-printer-page {
background-color: white;
page-break-after: auto;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 24px;
}
}
}

0 comments on commit ea61287

Please sign in to comment.