109 lines
2.7 KiB
JavaScript
109 lines
2.7 KiB
JavaScript
|
import { useRouter, useCallback } from "next/router";
|
|||
|
|
import "antd/dist/antd.css";
|
|||
|
|
|
|||
|
|
import { Image } from "antd";
|
|||
|
|
|
|||
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
getShotImgByProductBatchNo,
|
|||
|
|
getShotImg,
|
|||
|
|
} from "../../../reportUtils/getQueryData";
|
|||
|
|
const { config: { mesUrl } = {} } = global;
|
|||
|
|
import _ from "lodash";
|
|||
|
|
|
|||
|
|
const ListItem = React.memo((props) => {
|
|||
|
|
const { itemData } = props;
|
|||
|
|
return (
|
|||
|
|
<div className="border-t-[1px] border-[#D2D2D2] px-4 pb-2">
|
|||
|
|
<div className=" flex flex-row space-x-7 py-2">
|
|||
|
|
<div>
|
|||
|
|
<label>工序：</label>
|
|||
|
|
<label>{itemData.operationName}</label>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label>质检单模板名称：</label>
|
|||
|
|
<label>{itemData.templateName}</label>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label>拍照时间：</label>
|
|||
|
|
<label>{itemData.imgShotTime}</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-row space-x-7 ">
|
|||
|
|
<Imag imgurls={itemData.imgPath}></Imag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
function Imag(props) {
|
|||
|
|
const { imgurls } = props;
|
|||
|
|
const [imglist, setImgList] = useState([]);
|
|||
|
|
useEffect(() => {
|
|||
|
|
setImgList([]);
|
|||
|
|
imgurls.map((imgsrc) => {
|
|||
|
|
getShotImg(mesUrl + imgsrc).then((rep) => {
|
|||
|
|
setImgList((prev) => {
|
|||
|
|
return [...prev, URL.createObjectURL(rep)];
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}, []);
|
|||
|
|
return imglist.map((imgsrc) => {
|
|||
|
|
return (
|
|||
|
|
<Image
|
|||
|
|
width={200}
|
|||
|
|
height={240}
|
|||
|
|
// className=" w-24 h-32 border"
|
|||
|
|
src={imgsrc ?? "../img/noImg.png"}
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const List = React.memo((props) => {
|
|||
|
|
const { dataSource } = props;
|
|||
|
|
return (
|
|||
|
|
<div className=" ">
|
|||
|
|
{dataSource?.map((item) => {
|
|||
|
|
return <ListItem itemData={item}></ListItem>;
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
const Header = React.memo((props) => {
|
|||
|
|
const { productBatchNo } = props;
|
|||
|
|
return (
|
|||
|
|
<div className=" py-6 px-4">
|
|||
|
|
<label className=" ">批次生产单：</label>
|
|||
|
|
<label>{productBatchNo}</label>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
const getQueryVariable = (name) => {
|
|||
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|||
|
|
var r = window.location.search.substr(1).match(reg);
|
|||
|
|
if (r != null) return decodeURI(r[2]);
|
|||
|
|
return null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default function PicView() {
|
|||
|
|
const [data, setData] = useState([]);
|
|||
|
|
const [productBatchNo, setProductBatchNo] = useState([]);
|
|||
|
|
useEffect(() => {
|
|||
|
|
setProductBatchNo(getQueryVariable("productBatchNo"));
|
|||
|
|
}, []);
|
|||
|
|
useEffect(() => {
|
|||
|
|
getShotImgByProductBatchNo(productBatchNo).then((json) => {
|
|||
|
|
setData(json);
|
|||
|
|
});
|
|||
|
|
}, [productBatchNo]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="font-bold">
|
|||
|
|
|
|||
|
|
<Header productBatchNo={data.productBatchNo}></Header>
|
|||
|
|
<List dataSource={data.imgItemList}></List>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|