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, {
} from "react";
import styles from "./index.less";
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 printRef = useRef();
......@@ -14,33 +51,39 @@ let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
}));
return (
<div className={styles.qrcode} ref={printRef}>
{selectedItems.map((item, i) => {
return (
<div key={item.id}>
<ul>
<li>
<p>
<b>物料编码: </b> <span>{item.materieCode}</span>
</p>
<p>
<b>物料名称: </b> <span>{item.materieName}</span>
</p>
<p>
<b>批次号/SN号: </b> <span>{item.materieControlNo}</span>
</p>
<p>
<b>供应商: </b> <span>{item.supplierName}</span>
</p>
</li>
<li>
<QRCodeSVG value={item.id} size={350}></QRCodeSVG>
</li>
</ul>
</div>
);
})}
</div>
<>
<style type="text/css" media="print">
{pageStyle}
</style>
<div className={styles.qrcode} ref={printRef}>
{selectedItems.map((item, i) => {
return (
<div key={item.id}>
<ul>
<li>
<p>
<b>物料编码: </b> <span>{item.materieCode}</span>
</p>
<p>
<b>物料名称: </b> <span>{item.materieName}</span>
</p>
<p>
<b>批次号/SN号: </b> <span>{item.materieControlNo}</span>
</p>
<p>
<b>供应商: </b> <span>{item.supplierName}</span>
</p>
</li>
<li>
<QRCodeSVG value={item.id} size={350}></QRCodeSVG>
</li>
</ul>
<span className="page-break"></span>
</div>
);
})}
</div>
</>
);
});
......
src/components/PrintCode/index.less
View file @ 8510e274
.qrcode{
position: fixed;
width: 1000px;
z-index: 999999;
left: 0;
top: 0;
display: block;
overflow: inherit !important;
ul{
display: flex;
height: 500px;
......
src/global.less
View file @ 8510e274
......@@ -376,7 +376,43 @@ table {
min-width: 210px !important;
}
#large {
*{
font-size: 22px !important;
.header {
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;
}
}
\ No newline at end of file
.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 @@
height: 100%;
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="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
......@@ -216,9 +216,7 @@
</div>
</div>
<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>
......
src/pages/insertstore/Instore/index.jsx
View file @ 8510e274
......@@ -465,7 +465,7 @@ function Instore(props) {
return (
<div>
<div style={{ display: "none" }}>
<div style={{ position:"fixed",bottom:-100000 }}>
<PrintDom ref={printRef} {...drawprops} />
</div>
......
src/pages/insertstore/Instore/printdom.jsx
View file @ 8510e274
......@@ -6,7 +6,84 @@ import React, {
useRef,
} 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) {
let printRef = useRef();
......@@ -24,123 +101,119 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
}
}, [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 (
val == "detail" && (
<div
ref={printRef}
style={{
position: "fixed",
top: 0,
left: 0,
zIndex: 999,
width: "100%",
height: "100%",
}}
>
<h1
<>
<style type="text/css" media="print">
{pageStyle}
</style>
{val == "detail" && (
<div
ref={printRef}
style={{
textAlign: "center",
width: "100%",
paddingTop: 18,
paddingBottom: 16,
fontSize: 32,
minHeight: "100%",
overflow: "inherit",
position: "relative",
}}
>
入库工单
</h1>
<img
style={{
position: "absolute",
right: 36,
top: 36,
width: 300,
height: "auto",
}}
src={data?.qrCodeUrl}
alt=""
/>
<div style={{ display: "flex", flexWrap: "wrap", paddingLeft: "2%" }}>
{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 style={{ position: "absolute", top: 0, left: 0 ,zIndex:999,left:"2%",top:16}}>
<b>{totalCard && totalCard[1].cardTitle}</b>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 2%",
paddingBottom: 12,
}}
>
<h1
style={{
width: "100%",
fontSize: 40,
}}
>
入库工单
</h1>
<img
style={{
width: 300,
height: "auto",
}}
src={data?.qrCodeUrl}
alt=""
/>
</div>
<AutoTable
dataSource={data?.materialList}
x="96%"
style={{ marginTop: 8 }}
withCard={false}
pagination={"false"}
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) => {
<div
style={{
display: "flex",
flexWrap: "wrap",
paddingLeft: "2%",
}}
>
{totalCard &&
totalCard[0].itemData
.filter((it) => !(it.noshow === true))
.map((it) => {
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>
);
},
},
{
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
style={{
padding: "4px 2%",
position: "relative",
width: "100%",
overflow: "hidden",
}}
id="large"
>
<div
style={{
marginBottom: 18,
}}
>
<b>{totalCard && totalCard[1].cardTitle}</b>
</div>
<ScrollBoard
config={{
header: columns.map((it) => it.title),
data: datas,
rowNum: datas.length,
hoverPause: false,
}}
/>
</div>
</div>
</div>
)
)}
</>
);
}
......
src/pages/outsetstore/Outstore/index.jsx
View file @ 8510e274
......@@ -466,7 +466,7 @@ function Outstore(props) {
return (
<div>
<div style={{ display: "none" }}>
<div style={{ position: "fixed", bottom: -100000 }}>
<PrintDom ref={printRef} {...drawprops} />
</div>
<div style={{ display: "none" }}>
......
src/pages/outsetstore/Outstore/printdom.jsx
View file @ 8510e274
......@@ -6,7 +6,70 @@ import React, {
useRef,
} 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) {
let printRef = useRef();
......@@ -24,122 +87,119 @@ function PrintDom({ totalPath, val, totalParams, totalCard }, ref) {
}
}, [val]);
return (
val == "detail" && (
<div
ref={printRef}
style={{
position: "fixed",
top: 0,
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=""
/>
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 (
<>
<style type="text/css" media="print">
{pageStyle}
</style>
{val == "detail" && (
<div
ref={printRef}
style={{
display: "flex",
flexWrap: "wrap",
paddingLeft: "2%",
marginTop: 24,
width: "100%",
minHeight: "100%",
overflow: "inherit",
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
style={{
position: "absolute",
top: 0,
left: 0,
zIndex: 999,
left: "2%",
top: 16,
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "0 2%",
paddingBottom: 12,
}}
>
<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>
<AutoTable
dataSource={data?.materialList}
x="96%"
style={{ marginTop: 8 }}
withCard={false}
pagination={"false"}
columns={[
{
title: "物料编码 - 名称",
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
<div
style={{
display: "flex",
flexWrap: "wrap",
paddingLeft: "2%",
marginTop: 24,
}}
>
{totalCard &&
totalCard[0].itemData
.filter((it) => !(it.noshow === true))
.map((it) => {
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>
);
},
},
{
title: "出库数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
width: 60,
},
]}
bordered={true}
></AutoTable>
})}
</div>
<div
style={{
padding: "4px 2%",
position: "relative",
width: "100%",
overflow: "hidden",
}}
id="large"
>
<div
style={{
marginBottom: 18,
}}
>
<b>{totalCard && totalCard[1].cardTitle}</b>
</div>
<ScrollBoard
config={{
header: columns.map((it) => it.title),
data: datas,
rowNum: datas.length,
hoverPause: false,
}}
/>
</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