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>
|
||
);
|
||
}
|