Skip to content

W
wms
Commit 8510e274 authored by wuhao's avatar wuhao 🎯
Browse files
Options

asder

parent dbe2c244
Show whitespace changes
Inline Side-by-side
Showing with 482 additions and 253 deletions
src/components/PrintCode/index.jsx
View file @ 8510e274
...@@ -6,6 +6,43 @@ import React, { ...@@ -6,6 +6,43 @@ import React, {
} from "react"; } from "react";
import styles from "./index.less"; import styles from "./index.less";
import { QRCodeSVG } from "qrcode.react"; import { QRCodeSVG } from "qrcode.react";
const pageStyle = `
@media all {
.page-break {
display: none;
}
}
@media print {
html, body {
height: initial !important;
overflow: initial !important;
position:relative;
-webkit-print-color-adjust: exact;
word-break: break-all;
}
}
@media print {
.page-break {
margin-top:0;
display: block;
page-break-before: auto;
}
}
@media print {
.page-noprint {
display: none !important;
}
}
@page {
size: auto;
margin: 0px;
}
`;
let PrintQrCode = forwardRef(({ selectedItems }, ref) => { let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
let printRef = useRef(); let printRef = useRef();
...@@ -14,6 +51,10 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => { ...@@ -14,6 +51,10 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
})); }));
return ( return (
<>
<style type="text/css" media="print">
{pageStyle}
</style>
<div className={styles.qrcode} ref={printRef}> <div className={styles.qrcode} ref={printRef}>
{selectedItems.map((item, i) => { {selectedItems.map((item, i) => {
return ( return (
...@@ -37,10 +78,12 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => { ...@@ -37,10 +78,12 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
<QRCodeSVG value={item.id} size={350}></QRCodeSVG> <QRCodeSVG value={item.id} size={350}></QRCodeSVG>
</li> </li>
</ul> </ul>
<span className="page-break"></span>
</div> </div>
); );
})} })}
</div> </div>
</>
); );
}); });
......
src/components/PrintCode/index.less
View file @ 8510e274
.qrcode{ .qrcode{
position: fixed;
width: 1000px; width: 1000px;
z-index: 999999;
left: 0;
top: 0;
display: block; display: block;
overflow: inherit !important;
ul{ ul{
display: flex; display: flex;
height: 500px; height: 500px;
......
src/global.less
View file @ 8510e274
...@@ -376,7 +376,43 @@ table { ...@@ -376,7 +376,43 @@ table {
min-width: 210px !important; min-width: 210px !important;
} }
#large { #large {
*{ .header {
font-size: 22px !important; background-color: transparent !important;
}
.header-item,
.ceil {
height: auto !important;
padding: 8px !important;
overflow: visible !important;
color: #000 !important;
line-height: 1 !important;
white-space: pre-wrap !important;
word-break: break-all !important;
border: #000 1px solid !important;
}
.header-item{
font-weight: bolder !important;
}
.header-item + .header-item {
margin-left: -1px !important;
}
.ceil {
margin-top: -1px;
}
.ceil + .ceil {
margin-left: -1px !important;
}
.row-item {
box-sizing: border-box !important;
height: auto !important;
line-height: 1 !important;
background-color: transparent !important;
}
* {
overflow: visible !important;
font-size: 20px !important;
white-space: pre-wrap !important;
word-break: break-all !important;
} }
} }
src/pages/document.ejs
View file @ 8510e274
...@@ -208,7 +208,7 @@ ...@@ -208,7 +208,7 @@
height: 100%; height: 100%;
min-height: 420px; min-height: 420px;
"> ">
<img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" /> <img src="<%= context.config.publicPath +'logo.png'%>" alt="logo" width="256" />
<div class="page-loading-warp"> <div class="page-loading-warp">
<div class="ant-spin ant-spin-lg ant-spin-spinning"> <div class="ant-spin ant-spin-lg ant-spin-spinning">
<span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i <span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i
...@@ -216,9 +216,7 @@ ...@@ -216,9 +216,7 @@
</div> </div>
</div> </div>
<div style="display: flex; align-items: center; justify-content: center"> <div style="display: flex; align-items: center; justify-content: center">
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" width="32" 江苏南高
style="margin-right: 8px" />
Ant Design
</div> </div>
</div> </div>
</div> </div>
......
src/pages/insertstore/Instore/index.jsx
View file @ 8510e274
...@@ -465,7 +465,7 @@ function Instore(props) { ...@@ -465,7 +465,7 @@ function Instore(props) {
return ( return (
<div> <div>
<div style={{ display: "none" }}> <div style={{ position:"fixed",bottom:-100000 }}>
<PrintDom ref={printRef} {...drawprops} /> <PrintDom ref={printRef} {...drawprops} />
</div> </div>
......
src/pages/insertstore/Instore/printdom.jsx
View file @ 8510e274
...@@ -6,7 +6,84 @@ import React, { ...@@ -6,7 +6,84 @@ import React, {
useRef, useRef,
} from "react"; } from "react";
import { useEffect } from "react"; import { useEffect } from "react";
import AutoTable from "@/components/AutoTable"; import { ScrollBoard } from "@jiaminghi/data-view-react";
import { useWindowSize } from "@/utils/windowsize";
const pageStyle = `
@media all {
.page-break {
display: none;
}
}
@media print {
html, body {
height: initial !important;
overflow: initial !important;
position:relative;
-webkit-print-color-adjust: exact;
word-break: break-all;
}
}
@media print {
.page-break {
margin-top:0;
display: block;
page-break-before: auto;
}
}
@media print {
.page-noprint {
display: none !important;
}
}
@page {
size: auto;
margin: 0px;
}
`;
let columns = [
{
title: "物料编码 - 名称",
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
return (row.materieCode ?? " ") + " - " + (row.materieName ?? "");
},
},
{
title: "供应商编号 - 名称",
dataIndex: "supplierNo",
key: "supplierNo",
search: false,
render: (dom, row) => {
return (row.supplierNo ?? "") + " - " + (row.supplierName ?? "");
},
},
{
title: "批次号/SN号",
dataIndex: "materieControlNo",
key: "materieControlNo",
search: false,
},
{
title: "入库数量",
dataIndex: "instroeNum",
key: "instroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
},
];
function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
let printRef = useRef(); let printRef = useRef();
...@@ -24,43 +101,67 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -24,43 +101,67 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
} }
}, [val]); }, [val]);
let datas = data?.materialList
? data?.materialList.map((it) => {
return columns.map((item) => {
if (item.render) {
return item.render(it, it);
} else {
return it[item.dataIndex];
}
});
})
: [];
return ( return (
val == "detail" && ( <>
<style type="text/css" media="print">
{pageStyle}
</style>
{val == "detail" && (
<div <div
ref={printRef} ref={printRef}
style={{ style={{
position: "fixed",
top: 0,
left: 0,
zIndex: 999,
width: "100%", width: "100%",
height: "100%", minHeight: "100%",
overflow: "inherit",
position: "relative",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 2%",
paddingBottom: 12,
}} }}
> >
<h1 <h1
style={{ style={{
textAlign: "center",
width: "100%", width: "100%",
paddingTop: 18, fontSize: 40,
paddingBottom: 16,
fontSize: 32,
}} }}
> >
入库工单 入库工单
</h1> </h1>
<img <img
style={{ style={{
position: "absolute",
right: 36,
top: 36,
width: 300, width: 300,
height: "auto", height: "auto",
}} }}
src={data?.qrCodeUrl} src={data?.qrCodeUrl}
alt="" alt=""
/> />
</div>
<div style={{ display: "flex", flexWrap: "wrap", paddingLeft: "2%" }}> <div
style={{
display: "flex",
flexWrap: "wrap",
paddingLeft: "2%",
}}
>
{totalCard && {totalCard &&
totalCard[0].itemData totalCard[0].itemData
.filter((it) => !(it.noshow === true)) .filter((it) => !(it.noshow === true))
...@@ -74,7 +175,7 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -74,7 +175,7 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
marginBottom: 10, marginBottom: 10,
padding: "4px", padding: "4px",
fontSize: 20, fontSize: 20,
overflow: "hidden", overflow: "inherit",
}} }}
> >
<b>{it.title}: </b> <b>{it.title}: </b>
...@@ -84,63 +185,35 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -84,63 +185,35 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
})} })}
</div> </div>
<div style={{ padding: "4px 0", position: "relative" }} id="large"> <div
<div style={{ position: "absolute", top: 0, left: 0 ,zIndex:999,left:"2%",top:16}}> style={{
padding: "4px 2%",
position: "relative",
width: "100%",
overflow: "hidden",
}}
id="large"
>
<div
style={{
marginBottom: 18,
}}
>
<b>{totalCard && totalCard[1].cardTitle}</b> <b>{totalCard && totalCard[1].cardTitle}</b>
</div> </div>
<AutoTable
dataSource={data?.materialList} <ScrollBoard
x="96%" config={{
style={{ marginTop: 8 }} header: columns.map((it) => it.title),
withCard={false} data: datas,
pagination={"false"} rowNum: datas.length,
columns={[ hoverPause: false,
{ }}
title: "物料编码 - 名称", />
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
return (
(row.materieCode ?? " ") + " - " + (row.materieName ?? "")
);
},
},
{
title: "供应商编号 - 名称",
dataIndex: "supplierNo",
key: "supplierNo",
search: false,
render: (dom, row) => {
return (
(row.supplierNo ?? "") + " - " + (row.supplierName ?? "")
);
},
},
{
title: "批次号/SN号",
dataIndex: "materieControlNo",
key: "materieControlNo",
search: false,
},
{
title: "入库数量",
dataIndex: "instroeNum",
key: "instroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
},
]}
bordered={true}
></AutoTable>
</div> </div>
</div> </div>
) )}
</>
); );
} }
......
src/pages/outsetstore/Outstore/index.jsx
View file @ 8510e274
...@@ -466,7 +466,7 @@ function Outstore(props) { ...@@ -466,7 +466,7 @@ function Outstore(props) {
return ( return (
<div> <div>
<div style={{ display: "none" }}> <div style={{ position: "fixed", bottom: -100000 }}>
<PrintDom ref={printRef} {...drawprops} /> <PrintDom ref={printRef} {...drawprops} />
</div> </div>
<div style={{ display: "none" }}> <div style={{ display: "none" }}>
......
src/pages/outsetstore/Outstore/printdom.jsx
View file @ 8510e274
...@@ -6,7 +6,70 @@ import React, { ...@@ -6,7 +6,70 @@ import React, {
useRef, useRef,
} from "react"; } from "react";
import { useEffect } from "react"; import { useEffect } from "react";
import AutoTable from "@/components/AutoTable"; import { ScrollBoard } from "@jiaminghi/data-view-react";
import { useWindowSize } from "@/utils/windowsize";
const pageStyle = `
@media all {
.page-break {
display: none;
}
}
@media print {
html, body {
height: initial !important;
overflow: initial !important;
position:relative;
-webkit-print-color-adjust: exact;
word-break: break-all;
}
}
@media print {
.page-break {
margin-top:0;
display: block;
page-break-before: auto;
}
}
@media print {
.page-noprint {
display: none !important;
}
}
@page {
size: auto;
margin: 0px;
}
`;
let columns = [
{
title: "物料编码 - 名称",
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
return (row.materieCode ?? "") + " - " + (row.materieName ?? "");
},
},
{
title: "出库数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
width: 60,
},
];
function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
let printRef = useRef(); let printRef = useRef();
...@@ -24,42 +87,60 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -24,42 +87,60 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
} }
}, [val]); }, [val]);
let datas = data?.materialList
? data?.materialList.map((it) => {
return columns.map((item) => {
if (item.render) {
return item.render(it, it);
} else {
return it[item.dataIndex];
}
});
})
: [];
return ( return (
val == "detail" && ( <>
<style type="text/css" media="print">
{pageStyle}
</style>
{val == "detail" && (
<div <div
ref={printRef} ref={printRef}
style={{ style={{
position: "fixed",
top: 0,
left: 0,
zIndex: 999,
width: "100%", width: "100%",
height: "100%", minHeight: "100%",
overflow: "inherit",
position: "relative",
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 2%",
paddingBottom: 12,
}} }}
> >
<h1 <h1
style={{ style={{
textAlign: "center",
width: "100%", width: "100%",
paddingTop: 18, fontSize: 40,
paddingBottom: 16, marginTop: "-6px",
fontSize: 32,
}} }}
> >
出库工单 出库工单
</h1> </h1>
<img <img
style={{ style={{
position: "absolute",
right: 36,
top: 28,
width: 300, width: 300,
height: "auto", height: "auto",
}} }}
src={data?.qrCodeUrl} src={data?.qrCodeUrl}
alt="" alt=""
/> />
</div>
<div <div
style={{ style={{
display: "flex", display: "flex",
...@@ -90,56 +171,35 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -90,56 +171,35 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
); );
})} })}
</div> </div>
<div style={{ padding: "4px 0", position: "relative" }} id="large">
<div <div
style={{ style={{
position: "absolute", padding: "4px 2%",
top: 0, position: "relative",
left: 0, width: "100%",
zIndex: 999, overflow: "hidden",
left: "2%", }}
top: 16, id="large"
>
<div
style={{
marginBottom: 18,
}} }}
> >
<b>{totalCard && totalCard[1].cardTitle}</b> <b>{totalCard && totalCard[1].cardTitle}</b>
</div> </div>
<AutoTable
dataSource={data?.materialList} <ScrollBoard
x="96%" config={{
style={{ marginTop: 8 }} header: columns.map((it) => it.title),
withCard={false} data: datas,
pagination={"false"} rowNum: datas.length,
columns={[ hoverPause: false,
{ }}
title: "物料编码 - 名称", />
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
return (
(row.materieCode ?? "") + " - " + (row.materieName ?? "")
);
},
},
{
title: "出库数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
width: 60,
},
]}
bordered={true}
></AutoTable>
</div> </div>
</div> </div>
) )}
</>
); );
} }
......
src/utils/windowsize.js 0 → 100644
View file @ 8510e274
import { useState, useEffect } from 'react';
export const useWindowSize = () => {
// 第一步：声明能够体现视口大小变化的状态
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
// 第二步：通过生命周期 Hook 声明回调的绑定和解绑逻辑
useEffect(() => {
const updateSize = () => setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
window?.addEventListener('resize', updateSize);
return () => window.removeEventListener('resize', updateSize);
}, []);
return windowSize;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment