asder

package.json

@@ -58,6 +58,7 @@
     "braft-editor": "^2.3.9",
     "classnames": "^2.3.0",
     "crypto-js": "^4.1.1",
+    "jsbarcode": "^3.11.5",
     "lodash": "^4.17.0",
     "moment": "^2.29.1",
     "omit.js": "^2.0.2",

src/components/DrawInitForm/index.jsx

@@ -27,8 +27,8 @@ function DrawInitForm(props) {
     bottomNode: props.bottomNode,
     topNode: props.topNode,
     printRef: props.printRef,
-    onloadeddata:props.onloadeddata,
-    expandkeys:props.expandkeys
+    onloadeddata: props.onloadeddata,
+    expandkeys: props.expandkeys
   }
   return (
     <Drawer
@@ -41,8 +41,8 @@ function DrawInitForm(props) {
       destroyOnClose={true}
       {...props}
     >
-      {props.children}
-      {props.val == "detail" ? <Details {...detailprops}></Details> : <InitForm {...newProps}></InitForm>}
+      {props.val == "only" && props.children}
+      {props.val == "only" ? null : props.val == "detail" ? <Details {...detailprops}></Details> : <InitForm {...newProps}></InitForm>}
     </Drawer>
   );
 }

src/pages/outsetstore/Outstore/index.jsx

@@ -212,7 +212,6 @@ function Instore(props) {
                     "render": (text, record, _, action) => {
                         return [
                             getPrem("equipmentCustomer_save", action, '下架采集', async () => {
-
                                 let extra = defaultFields.dooutside(record.id,record.storeId);
                                 setdrawprops(s => ({
                                     ...s,

src/pages/system/Store/store.js

-import React, { useEffect, useRef, useReducer } from "react";
+import React, { useState, useRef, useReducer } from "react";
 import { Button, Tooltip, Row, Divider } from "antd";
 import AutoTable from "@/components/AutoTable";
 import getPrem from "@/utils/getPrem"; //权限判断fn
@@ -7,6 +7,38 @@ import defaultFields from "./fieldstore";
 import { doFetch } from "@/utils/doFetch";
 import DrawInitForm from "@/components/DrawInitForm";
 import { ProDescriptions } from '@ant-design/pro-components';
+import JsBarcode from 'jsbarcode'
+import { useReactToPrint } from 'react-to-print';
+import PrintProvider, { Print, NoPrint } from 'react-easy-print';
+const pageStyle = `
+@media all {
+    .page-break {
+        display: none;
+    }
+}
+
+@media print {
+    html, body {
+        height: initial !important;
+        overflow: initial !important;
+        -webkit-print-color-adjust: exact;
+    }
+}
+
+@media print {
+    .page-break {
+        margin-top: 2rem;
+        display: block;
+        page-break-before: auto;
+    }
+}
+
+@page {
+    size: auto;
+    margin: 20mm;
+}
+`;
+
 const initState = {
     vs: false,
     fields: {},
@@ -33,6 +65,16 @@ function reducer(state, action) {
                 fields: { ...action.fields },
             };
             break;
+        case "only":
+            newState = {
+                ...state,
+                vs: true,
+                iftype: {
+                    title: "打印预览",
+                    val: type,
+                },
+            };
+            break;
         case "edit":
             newState = {
                 ...state,
@@ -65,9 +107,12 @@ function reducer(state, action) {
 }
 
 const StoreApp = (props) => {
-    console.log(props);
     let actionRef = useRef(),
-        ChildRef = null;
+        ChildRef = null,
+        printRef = useRef();
+
+    const [selectedRowKeys, setselectedRowKeys] = useState([]);
+
     function reload() {
         actionRef?.current?.reload();
         ChildRef?.onRefresh();
@@ -146,6 +191,33 @@ const StoreApp = (props) => {
         });
     };
 
+    let print = selectedRowKeys.length > 0 ? [
+        <Button
+            disabled={!getPrem("sysDepartment_save", "ifs")}
+            type="danger"
+            style={{ marginLeft: 12 }}
+            onClick={async () => {
+                console.log('====================================');
+                console.log(selectedRowKeys);
+                console.log('====================================');
+                await dispatch({ type: "only" });
+                setTimeout(async () => {
+                    await Promise.all(selectedRowKeys.map(async (it) => {
+                        await JsBarcode("#s" + it.id, it.id);
+                    }))
+                }, 600)
+
+            }}
+        >
+            打印
+        </Button>
+    ] : []
+
+    const handlePrint = useReactToPrint({
+        content: () => printRef.current,
+    });
+
+
     let extrarender = [
         <Button
             disabled={!getPrem("sysDepartment_save", "ifs")}
@@ -160,6 +232,7 @@ const StoreApp = (props) => {
         >
             新增
         </Button>,
+        ...print
     ];
 
     return (
@@ -197,10 +270,18 @@ const StoreApp = (props) => {
                 actionRef={actionRef}
                 onRef={(node) => (ChildRef = node)}
                 extraparams={{ storeId: props?.curitem?.id ?? "0" }}
-            ></AutoTable>
+                rowSelection={{
+                    onChange: (selectedRowKeys, selectedRows) => {
+                        console.log('====================================');
+                        console.log(selectedRows);
+                        console.log('====================================');
+                        setselectedRowKeys(selectedRows)
+                    },
 
+                }}
+            ></AutoTable>
             <DrawInitForm
-                title={iftype.title}
+                title={iftype?.title}
                 visible={vs}
                 onClose={() => dispatch({ type: "close" })}
                 footer={false}
@@ -214,7 +295,33 @@ const StoreApp = (props) => {
                 }}
                 submitting={loading || !vs}
                 width={"60%"}
+                val={iftype.val}
+                width={iftype.val == "only" ? 380 : 600}
+                extra={iftype.val == "only" ? <Button
+                    onClick={handlePrint}
+                >打印</Button> : null}
             >
+                <PrintProvider>
+                    <div ref={printRef}>
+                        {
+                            selectedRowKeys.map(it => {
+                                return <div>
+                                    <style type="text/css" media="print">
+                                        {pageStyle}
+                                    </style>
+                                    <NoPrint>
+                                        <span>{it.storePositionName}</span>
+                                    </NoPrint>
+                                    <svg id={"s" + it.id} />
+                                    <span className="page-break"></span>
+                                </div>
+                            })
+                        }
+                    </div>
+                </PrintProvider>
+
+
+
             </DrawInitForm>