Skip to content

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

asder

parent dbe2c244
Hide 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,33 +51,39 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => { ...@@ -14,33 +51,39 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
})); }));
return ( return (
<div className={styles.qrcode} ref={printRef}> <>
{selectedItems.map((item, i) => { <style type="text/css" media="print">
return ( {pageStyle}
<div key={item.id}> </style>
<ul> <div className={styles.qrcode} ref={printRef}>
<li> {selectedItems.map((item, i) => {
<p> return (
<b>物料编码: </b> <span>{item.materieCode}</span> <div key={item.id}>
</p> <ul>
<p> <li>
<b>物料名称: </b> <span>{item.materieName}</span> <p>
</p> <b>物料编码: </b> <span>{item.materieCode}</span>
<p> </p>
<b>批次号/SN号: </b> <span>{item.materieControlNo}</span> <p>
</p> <b>物料名称: </b> <span>{item.materieName}</span>
<p> </p>
<b>供应商: </b> <span>{item.supplierName}</span> <p>
</p> <b>批次号/SN号: </b> <span>{item.materieControlNo}</span>
</li> </p>
<li> <p>
<QRCodeSVG value={item.id} size={350}></QRCodeSVG> <b>供应商: </b> <span>{item.supplierName}</span>
</li> </p>
</ul> </li>
</div> <li>
); <QRCodeSVG value={item.id} size={350}></QRCodeSVG>
})} </li>
</div> </ul>
<span className="page-break"></span>
</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 {
\ No newline at end of file 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,123 +101,119 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -24,123 +101,119 @@ 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" && ( <>
<div <style type="text/css" media="print">
ref={printRef} {pageStyle}
style={{ </style>
position: "fixed", {val == "detail" && (
top: 0, <div
left: 0, ref={printRef}
zIndex: 999,
width: "100%",
height: "100%",
}}
>
<h1
style={{ style={{
textAlign: "center",
width: "100%", width: "100%",
paddingTop: 18, minHeight: "100%",
paddingBottom: 16, overflow: "inherit",
fontSize: 32, position: "relative",
}} }}
> >
入库工单 <div
</h1> style={{
<img display: "flex",
style={{ justifyContent: "space-between",
position: "absolute", alignItems: "center",
right: 36, padding: "0 2%",
top: 36, paddingBottom: 12,
width: 300, }}
height: "auto", >
}} <h1
src={data?.qrCodeUrl} style={{
alt="" width: "100%",
/> fontSize: 40,
}}
<div style={{ display: "flex", flexWrap: "wrap", paddingLeft: "2%" }}> >
{totalCard && 入库工单
totalCard[0].itemData </h1>
.filter((it) => !(it.noshow === true)) <img
.map((it) => { style={{
return ( width: 300,
<div height: "auto",
style={{ }}
width: it.noshow ?? "32%", src={data?.qrCodeUrl}
backgroundColor: "#f9f9f9", alt=""
marginRight: "1%", />
marginBottom: 10,
padding: "4px",
fontSize: 20,
overflow: "hidden",
}}
>
<b>{it.title}: </b>
<span>{data[it.key] || "-"}</span>
</div>
);
})}
</div>
<div style={{ padding: "4px 0", position: "relative" }} id="large">
<div style={{ position: "absolute", top: 0, left: 0 ,zIndex:999,left:"2%",top:16}}>
<b>{totalCard && totalCard[1].cardTitle}</b>
</div> </div>
<AutoTable
dataSource={data?.materialList} <div
x="96%" style={{
style={{ marginTop: 8 }} display: "flex",
withCard={false} flexWrap: "wrap",
pagination={"false"} paddingLeft: "2%",
columns={[ }}
{ >
title: "物料编码 - 名称", {totalCard &&
dataIndex: "materieName", totalCard[0].itemData
key: "materieName", .filter((it) => !(it.noshow === true))
search: false, .map((it) => {
render: (dom, row) => {
return (
(row.materieCode ?? " ") + " - " + (row.materieName ?? "")
);
},
},
{
title: "供应商编号 - 名称",
dataIndex: "supplierNo",
key: "supplierNo",
search: false,
render: (dom, row) => {
return ( return (
(row.supplierNo ?? "") + " - " + (row.supplierName ?? "") <div
style={{
width: it.noshow ?? "32%",
backgroundColor: "#f9f9f9",
marginRight: "1%",
marginBottom: 10,
padding: "4px",
fontSize: 20,
overflow: "inherit",
}}
>
<b>{it.title}: </b>
<span>{data[it.key] || "-"}</span>
</div>
); );
}, })}
}, </div>
{
title: "批次号/SN号", <div
dataIndex: "materieControlNo", style={{
key: "materieControlNo", padding: "4px 2%",
search: false, position: "relative",
}, width: "100%",
{ overflow: "hidden",
title: "入库数量", }}
dataIndex: "instroeNum", id="large"
key: "instroeNum", >
search: false, <div
}, style={{
{ marginBottom: 18,
title: "库存单位", }}
dataIndex: "productionUnitName", >
key: "productionUnitName", <b>{totalCard && totalCard[1].cardTitle}</b>
search: false, </div>
},
]} <ScrollBoard
bordered={true} config={{
></AutoTable> header: columns.map((it) => it.title),
data: datas,
rowNum: datas.length,
hoverPause: false,
}}
/>
</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,122 +87,119 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) { ...@@ -24,122 +87,119 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
} }
}, [val]); }, [val]);
return ( let datas = data?.materialList
val == "detail" && ( ? data?.materialList.map((it) => {
<div return columns.map((item) => {
ref={printRef} if (item.render) {
style={{ return item.render(it, it);
position: "fixed", } else {
top: 0, return it[item.dataIndex];
left: 0, }
zIndex: 999, });
width: "100%", })
height: "100%", : [];
}}
>
<h1
style={{
textAlign: "center",
width: "100%",
paddingTop: 18,
paddingBottom: 16,
fontSize: 32,
}}
>
出库工单
</h1>
<img
style={{
position: "absolute",
right: 36,
top: 28,
width: 300,
height: "auto",
}}
src={data?.qrCodeUrl}
alt=""
/>
return (
<>
<style type="text/css" media="print">
{pageStyle}
</style>
{val == "detail" && (
<div <div
ref={printRef}
style={{ style={{
display: "flex", width: "100%",
flexWrap: "wrap", minHeight: "100%",
paddingLeft: "2%", overflow: "inherit",
marginTop: 24, position: "relative",
}} }}
> >
{totalCard &&
totalCard[0].itemData
.filter((it) => !(it.noshow === true))
.map((it) => {
return (
<div
style={{
width: it.noshow ?? "32%",
backgroundColor: "#f9f9f9",
marginRight: "1%",
marginBottom: 10,
padding: "4px",
fontSize: 20,
overflow: "hidden",
}}
>
<b>{it.title}: </b>
<span>{data[it.key] || "-"}</span>
</div>
);
})}
</div>
<div style={{ padding: "4px 0", position: "relative" }} id="large">
<div <div
style={{ style={{
position: "absolute", display: "flex",
top: 0, justifyContent: "space-between",
left: 0, alignItems: "center",
zIndex: 999, padding: "0 2%",
left: "2%", paddingBottom: 12,
top: 16,
}} }}
> >
<b>{totalCard && totalCard[1].cardTitle}</b> <h1
style={{
width: "100%",
fontSize: 40,
marginTop: "-6px",
}}
>
出库工单
</h1>
<img
style={{
width: 300,
height: "auto",
}}
src={data?.qrCodeUrl}
alt=""
/>
</div> </div>
<AutoTable <div
dataSource={data?.materialList} style={{
x="96%" display: "flex",
style={{ marginTop: 8 }} flexWrap: "wrap",
withCard={false} paddingLeft: "2%",
pagination={"false"} marginTop: 24,
columns={[ }}
{ >
title: "物料编码 - 名称", {totalCard &&
dataIndex: "materieName", totalCard[0].itemData
key: "materieName", .filter((it) => !(it.noshow === true))
search: false, .map((it) => {
render: (dom, row) => {
return ( return (
(row.materieCode ?? "") + " - " + (row.materieName ?? "") <div
style={{
width: it.noshow ?? "32%",
backgroundColor: "#f9f9f9",
marginRight: "1%",
marginBottom: 10,
padding: "4px",
fontSize: 20,
overflow: "hidden",
}}
>
<b>{it.title}: </b>
<span>{data[it.key] || "-"}</span>
</div>
); );
}, })}
}, </div>
{ <div
title: "出库数量", style={{
dataIndex: "outstroeNum", padding: "4px 2%",
key: "outstroeNum", position: "relative",
search: false, width: "100%",
}, overflow: "hidden",
{ }}
title: "库存单位", id="large"
dataIndex: "productionUnitName", >
key: "productionUnitName", <div
search: false, style={{
width: 60, marginBottom: 18,
}, }}
]} >
bordered={true} <b>{totalCard && totalCard[1].cardTitle}</b>
></AutoTable> </div>
<ScrollBoard
config={{
header: columns.map((it) => it.title),
data: datas,
rowNum: datas.length,
hoverPause: false,
}}
/>
</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