java_project
/
hy-vue
4
0
Fork 0
Code Issues Pull Requests Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 Commits
3 Branches
0 Tags
14 MiB
 
 
 
Tree: d0ced06aad
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd0ced06aad'
${ noResults }
hy-vue/public/static/物质入库验收报告.html

375 lines
12 KiB
Raw Blame History

<!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">
<title>回收台账</title>
<style>
body {
padding: 0;
margin: 0;
}
.max_box {
width: 756px;
/* height: 1086px; */
margin: auto;
}
.max_box>div:nth-of-type(1) {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.max_box>div:nth-of-type(2) {
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.telbox {
display: flex;
flex-direction: column;
border: 2px solid #000000;
margin-top: 10px;
box-sizing: border-box;
}
.ghdanwei{
display: flex;
align-items: center;
font-weight: 600;
}
.ghdanwei>div{
border-bottom: 2px solid #000000;
/* line-height: 35px; */
height: 35px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.ghdanwei>div:nth-of-type(1){
width: 100px;
border-right: 2px solid #000000;
/* padding-left: 10px; */
text-align: center;
}
.ghdanwei>div:nth-of-type(2){
flex: 1;
}
.wuzlb{
display: flex;
align-items: center;
font-weight: 600;
}
.wuzlb>div:nth-of-type(1){
width: 80%;
display: flex;
align-items: center;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
box-sizing: border-box;
line-height: 35px;
height: 35px;
}
.wuzlb>div:nth-of-type(1)>div:nth-of-type(1){
width: 100px;
border-right: 2px solid #000000;
box-sizing: border-box;
text-align: center;
}
.wuzlb>div:nth-of-type(1)>div:nth-of-type(2){
flex: 1;
}
.wuzlb>div:nth-of-type(2){
width: 20%;
display: flex;
align-items: center;
border-bottom: 2px solid #000000;
box-sizing: border-box;
line-height: 35px;
height: 35px;
}
.wuzlb>div:nth-of-type(2)>div:nth-of-type(1){
width: 50px;
border-right: 2px solid #000000;
box-sizing: border-box;
text-align: center;
}
.wuzlb>div:nth-of-type(2)>div:nth-of-type(2){
flex: 1;
}
.tianxienr{
display: flex;
align-items: center;
padding-left: 260px;
}
.tianxienr>div:nth-of-type(1){
width:60px;
border-right: 2px solid #000000;
border-left: 2px solid #000000;
text-align: center;
}
.huafenzj{
display: flex;
align-items: center;
font-weight: 600;
}
.huafenzj>div{
width: 50%;
line-height: 35px;
height: 35px;
padding-left: 10px;
box-sizing: border-box;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
.huafenzj>div:nth-of-type(2){
border-right: none;
}
.neironqu{
display: flex;
flex-direction: column;
padding: 2px 4px;
border-bottom: 2px solid #000000;
}
.neironqu:nth-last-child(1){
border-bottom: none;
}
.neironqu>div:nth-of-type(1){
font-weight: 600;
}
.neironqu>div:nth-of-type(2){
margin-top: 20px;
margin-bottom: 20px;
}
.neironqu>div:nth-of-type(3){
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.suom{
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.suom>div:nth-of-type(1){
position: absolute;
left: 0;
top: 0;
}
.imags {
position: relative;
}
.imags img {
width: 70px;
height: 50px;
}
.img1 {
position: absolute;
top: 310px;
left: 110px;
}
.img2 {
position: absolute;
top:410px ;
left: 110px;
}
.img3 {
position: absolute;
top: 510px;
left: 110px;
}
.img4 {
position: absolute;
top: 610px;
left: 110px;
}
</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>委托采购物质入库验收报告</div>
<div id="tbdw">
填报单位：
</div>
<div class="imags">
<img class="img1" src="./1.png" />
<img class="img2" src="./2.png" />
<img class="img3" src="./3.png" />
<img class="img4" src="./4.png" />
</div>
<div class="telbox">
<div class="ghdanwei">
<div>供货单位</div>
<div id ="ghdw"></div>
</div>
<div class="wuzlb">
<div>
<div >物资名称</div>
<div id="wzmc"></div>
</div>
<div>
<div >类别</div>
<div id="lb"></div>
</div>
</div>
<div class="wuzlb">
<div>
<div>合同号</div>
<div class="tianxienr">
<div >项数</div>
<div id="xs"></div>
</div>
</div>
<div>
<div >类别</div>
<div id="lb1"></div>
</div>
</div>
<div class="huafenzj">
<div id ="dhsj">
到货时间：
</div>
<div id ="yssj">
验收时间：
</div>
</div>
<div class="ghdanwei">
<div style="height: 50px;" >验收总金额（不含税）</div>
<div style="height: 50px;" id ="yszje"></div>
</div>
<div class="neironqu">
<div>签收情况:</div>
<div>
&nbsp;&nbsp;&nbsp;&nbsp;本协议约定为分批执行、分期结算。本批次采购订单号根据协议和材料送货清单验收，数量准确，符合要求，申请办理付款结算。
<br>&nbsp;&nbsp;&nbsp;&nbsp;该协议总金额
</div>
<div>
<div>验收人签字：</div>
<div id ="sj3">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</div>
<div class="neironqu">
<div>审核人意见:</div>
<div>
</div>
<div>
<div>签字（盖章）：</div>
<div id ="sj">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</div>
<div class="neironqu">
<div>执行情况确认:</div>
<div>
</div>
<div>
<div>签字（盖章）：</div>
<div id ="sj1">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</div>
<div class="neironqu">
<div>主管领导意见:</div>
<div>
</div>
<div>
<div>签字（盖章）：</div>
<div id ="sj2">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</div>
</div>
<div class="suom">
<div>说明：</div>
<div>
1.物质类别是指设备、xxx、材料、配件等<br>
2.物质类别是指设备、xxx、材料、配件等<br>
3.物质类别是指设备、xxx、材料、配件等
</div>
</div>
</div>
<!--endprint-->
<button class="dayinann" onclick="preview()">打印</button>
<!-- <button class="dayinann" onclick="">预览</button>-->
</body>
<script>
let data = null
window.addEventListener('message', messageEvent=> {
console.log('儿子收到vue的数据：>>>>>>>>>>>>>>>>>>>>',messageEvent.data);
data = messageEvent.data;
let tbdw=document.getElementById('tbdw')
let wzmc=document.getElementById('wzmc')
let lb=document.getElementById('lb')
let lb1=document.getElementById('lb1')
let xs=document.getElementById('xs')
let ghdw=document.getElementById('ghdw')
let dhsj=document.getElementById('dhsj')
let yszje=document.getElementById('yszje')
let sj=document.getElementById('sj')
let sj1=document.getElementById('sj1')
let sj2=document.getElementById('sj2')
let sj3=document.getElementById('sj3')
let yszje1 =0;
data.map((item,index)=>{
yszje1+=Number(item.materialAmount)
})
tbdw.innerHTML=`填报单位:${data[0].warehouseId_dictText}`
yszje.innerHTML=yszje1
wzmc.innerHTML=`${data[0].materialDescription},等`
lb.innerHTML=`${data[0].accountingAttributes_dictText}`
lb1.innerHTML=`${data[0].accountingAttributes_dictText}`
ghdw.innerHTML=`${data[0].supplierId}`
dhsj.innerHTML=`到货时间：${data[0].storageTime}`
let time = new Date();
// 获取年
let n = time.getFullYear()
// 获取月
let y= time.getMonth()+1
// 获取日
let r = time.getDate()
sj.innerHTML =n+'年'+ y+'月'+r+'日';
sj1.innerHTML =n+'年'+ y+'月'+r+'日';
sj2.innerHTML =n+'年'+ y+'月'+r+'日';
sj3.innerHTML =n+'年'+ y+'月'+r+'日';
xs.innerHTML=`${data.length}`
});
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>