printdom.jsx

import { doFetch } from "@/utils/doFetch";
import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useRef,
} from "react";
import { useEffect } from "react";
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) {
  console.log(totalCard);
  let printRef = useRef();
  const [data, setdata] = useState({});
  useImperativeHandle(ref, () => ({
    dom: printRef,
  }));

  useEffect(() => {
    if (val == "detail") {
      doFetch({ url: totalPath, params: totalParams }).then((res) => {
        if (res.code == "0000") {
          setdata(res?.data?.data);
        }
      });
    } else {
    }
  }, [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 (
    <>
      <style type="text/css" media="print">
        {pageStyle}
      </style>
      {val == "detail" && (
        <div
          ref={printRef}
          style={{
            width: "100%",
            minHeight: "100%",
            overflow: "inherit",
            position: "relative",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              padding: "0 2%",
              paddingBottom: 12,
            }}
          >
            <h1
              style={{
                width: "100%",
                fontSize: 40,
                marginTop: "-6px",
              }}
            >
              出库工单
            </h1>
            <img
              style={{
                width: 300,
                height: "auto",
              }}
              src={data?.qrCodeUrl}
              alt=""
            />
          </div>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              paddingLeft: "2%",
              marginTop: 24,
            }}
          >
            {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 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>
      )}
    </>
  );
}

export default forwardRef(PrintDom);