|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.max_box {
|
|
|
|
|
width: 1000px;
|
|
|
|
|
/* height: 1086px; */
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.max_box>div:nth-of-type(1) {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
.max_box>div:nth-of-type(2) {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.danweixx{
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
.danweixx>div{
|
|
|
|
|
width: 25%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.danweixx>div>div:nth-of-type(2){
|
|
|
|
|
height: 20px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-bottom: 2px solid #000000;
|
|
|
|
|
}
|
|
|
|
|
.telbox {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
border: 2px solid #000000;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.neirtb{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div{
|
|
|
|
|
text-align: center;
|
|
|
|
|
height: 110px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
border-bottom: 2px solid #000000;
|
|
|
|
|
border-right: 2px solid #000000;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(1){
|
|
|
|
|
width: 13%;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(2){
|
|
|
|
|
width: 22%;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(3){
|
|
|
|
|
width: 12%;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(4){
|
|
|
|
|
width: 12%;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(5){
|
|
|
|
|
width: 12%;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(6){
|
|
|
|
|
width: 12%;
|
|
|
|
|
}
|
|
|
|
|
.neirtb>div:nth-of-type(7){
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-right: none;
|
|
|
|
|
}
|
|
|
|
|
.maxbiox{
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
.titl{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.titl>div{
|
|
|
|
|
width: 50%;
|
|
|
|
|
border-right: 2px solid #000000;
|
|
|
|
|
border-bottom: 2px solid #000000;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.titl>div:nth-of-type(2){
|
|
|
|
|
border-right: none;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div{
|
|
|
|
|
width: 50%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div>div{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div>div>div:nth-of-type(1){
|
|
|
|
|
width: 60px;
|
|
|
|
|
border-right: 2px solid #000000;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div>div>div:nth-of-type(2){
|
|
|
|
|
height: 40px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
border-right: 2px solid #000000;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div:nth-of-type(2)>div:nth-last-child(1)>div:nth-of-type(2){
|
|
|
|
|
border-right: none;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div:nth-of-type(1)>div{
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
.tianxienr>div:nth-of-type(2)>div{
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
.dayinann{
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
background-color: #0ea5fd;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!--startprint-->
|
|
|
|
|
<div class="max_box">
|
|
|
|
|
<div>新疆分公司内部领物单</div>
|
|
|
|
|
<div id="">年 月 日</div>
|
|
|
|
|
<div class="danweixx">
|
|
|
|
|
<div>
|
|
|
|
|
<div>用料单位：</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>用途：</div>
|
|
|
|
|
<div id="yt"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>库存数量：</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>WBS：</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="telbox">
|
|
|
|
|
<div class="neirtb">
|
|
|
|
|
<div>器材编号</div>
|
|
|
|
|
<div>名称规格</div>
|
|
|
|
|
<div>单位</div>
|
|
|
|
|
<div>请发数</div>
|
|
|
|
|
<div>实发数</div>
|
|
|
|
|
<div>单价</div>
|
|
|
|
|
<div>金额</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="maxbiox">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="titl">
|
|
|
|
|
<div>发料单位</div>
|
|
|
|
|
<div>领料单位</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tianxienr">
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>批准人</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>发物人</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>负责人</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>班组长</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>领物人</div>
|
|
|
|
|
<div></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>注：一式二份 计划经营部、物质装备西部中心各一份</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--endprint-->
|
|
|
|
|
<button class="dayinann" onclick="preview()">打印</button>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
let dom1 = document.getElementsByClassName('maxbiox')[0]
|
|
|
|
|
// let htmls = ''
|
|
|
|
|
// for (let i = 1; i <= 3; i++) {
|
|
|
|
|
// htmls += `<div class="neirtb">
|
|
|
|
|
// <div></div>
|
|
|
|
|
// <div></div>
|
|
|
|
|
// <div></div>
|
|
|
|
|
// <div></div>
|
|
|
|
|
// <div></div>
|
|
|
|
|
// <div></div>
|
|
|
|
|
// <div></div>
|
|
|
|
|
// </div>`
|
|
|
|
|
// }
|
|
|
|
|
// dom1.innerHTML = htmls
|
|
|
|
|
// console.log(dom1);
|
|
|
|
|
window.addEventListener('message', messageEvent=> {
|
|
|
|
|
if(messageEvent.source!=window.parent.window.parent) {
|
|
|
|
|
return ;
|
|
|
|
|
};
|
|
|
|
|
console.log('儿子收到vue的数据：>>>>>>>>>>>>>>>>>>>>',messageEvent.data);
|
|
|
|
|
let data = messageEvent.data;
|
|
|
|
|
console.log("data>>>>>>>>>>>>>>>>>>>>",data);
|
|
|
|
|
let yt=document.getElementById('yt')
|
|
|
|
|
let yt1 = data[0].equipment
|
|
|
|
|
if(data[0].equipment !=null){
|
|
|
|
|
yt.innerHTML=yt1
|
|
|
|
|
}
|
|
|
|
|
let htmls = ``
|
|
|
|
|
data.map((item,index)=>{
|
|
|
|
|
htmls += `<div class="neirtb">
|
|
|
|
|
<div></div>
|
|
|
|
|
<div>${item.materialName}</div>
|
|
|
|
|
<div>${item.materialUnit}</div>
|
|
|
|
|
<div>${item.pleaseSendNumber}</div>
|
|
|
|
|
<div>${item.actualSendNumber}</div>
|
|
|
|
|
<div>${item.materialPrice}</div>
|
|
|
|
|
<div>${item.materialAmount}</div>
|
|
|
|
|
</div>`
|
|
|
|
|
})
|
|
|
|
|
dom1.innerHTML = htmls
|
|
|
|
|
});
|
|
|
|
|
function preview() {
|
|
|
|
|
bdhtml = window.document.body.innerHTML;
|
|
|
|
|
sprnstr = "<!--startprint-->"; //开始打印标识字符串有17个字符
|
|
|
|
|
eprnstr = "<!--endprint-->"; //结束打印标识字符串
|
|
|
|
|
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容
|
|
|
|
|
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
|
|
|
|
|
window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给body.innerHTML
|
|
|
|
|
window.print(); //调用浏览器的打印功能打印指定区域
|
|
|
|
|
window.document.body.innerHTML = bdhtml; //重新给页面内容赋值；
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
