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.
188 Commits
3 Branches
0 Tags
14 MiB
Tree: c485ef6452
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c485ef6452'
${ noResults }
hy-vue/public/static/采购通知单.html

458 lines
13 KiB
Raw Normal View History Unescape

修改添加表格操作11
2 years ago
<!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%;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.max_box>div:nth-of-type(2)>div:nth-of-type(2) {
padding-right: 50px;
box-sizing: border-box;
}
.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: 300;
}
.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: 300;
}
.wuzlb>div:nth-of-type(1) {
width: 65%;
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: 130px;
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: 35%;
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: 90px;
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: 300;
}
.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: 300;
}
.neironqu>div:nth-of-type(2) {
margin-top: 20px;
margin-bottom: 20px;
}
.neironqu>div:nth-of-type(3) {
font-weight: 300;
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;
}
.beizu {
padding-left: 10px;
box-sizing: border-box;
line-height: 24px;
border-bottom: 2px solid #000000;
}
.liebial_title {
display: flex;
align-items: center;
}
.liebial_title>div {
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
box-sizing: border-box;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.liebial_title>div:nth-of-type(1) {
width: 5%;
}
.liebial_title>div:nth-of-type(2) {
width: 30%;
}
.liebial_title>div:nth-of-type(3) {
width: 15%;
}
.liebial_title>div:nth-of-type(4) {
width: 11%;
}
.liebial_title>div:nth-of-type(5) {
width: 11%;
}
.liebial_title>div:nth-of-type(6) {
width: 11%;
}
.liebial_title>div:nth-of-type(7) {
width: 17%;
border-right: none;
}
.nier_box{
display: flex;
flex-direction: column;
}
.heji{
display: flex;
align-items: center;
justify-content: center;
}
.heji>div{
border-right: 2px solid #000000;
height: 24px;
box-sizing: border-box;
}
.heji>div:nth-of-type(1){
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.heji>div:nth-of-type(2){
width: 11%;
}
.heji>div:nth-of-type(3){
width: 17%;
border-right: none;
}
.tip{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 5px;
padding: 0 10px;
}
</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>
<div>顺序号：</div>
</div>
<div class="telbox">
<!-- <div class="ghdanwei">
<div>供货单位</div>
<div></div>
</div> -->
<div class="wuzlb">
<div>
<div>采购项目名称</div>
<div></div>
</div>
<div>
<div>类别</div>
<div></div>
</div>
</div>
<div class="wuzlb">
<div>
<div>计划资金总额</div>
<div></div>
</div>
<div>
<div>资金来源</div>
<div></div>
</div>
</div>
<!-- <div class="wuzlb">
<div>
<div>合同号</div>
<div class="tianxienr">
<div>项数</div>
<div></div>
</div>
</div>
<div>
<div>类别</div>
<div></div>
</div>
</div>
<div class="huafenzj">
<div>
到货时间：
</div>
<div>
验收时间：
</div>
</div>
<div class="ghdanwei">
<div style="height: 50px;">验收总金额（不含税）</div>
<div style="height: 50px;"></div>
</div> -->
<div class="neironqu">
<div>计划经营部门:</div>
<div>
</div>
<div>
<div>签字（盖章）：</div>
<div>年&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>年&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>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
</div>
</div>
<div class="beizu">
备注：专项计划物资应填写以下内容。
</div>
<div class="liebial_title">
<div></div>
<div>物料名称及规格型号</div>
<div>项目WBS</div>
<div>单位</div>
<div>单价</div>
<div>数量</div>
<div>总金额（元）</div>
</div>
<div class="nier_box"></div>
<div class="heji">
<div>合计</div>
<div></div>
<div></div>
</div>
</div>
<div class="tip">
<div>物资供应站签收：</div>
<div>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</div>
</div>
<div class="tip">
<div>保存部门：计划经营科、财务管理科、物资供应站</div>
<div>保存期限：5年</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 dom1 = document.getElementsByClassName('nier_box')[0]
let htmls = ''
for (let i = 1; i <= 9; i++) {
htmls += `<div class="liebial_title">
<div>${i}</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></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>