<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title></title>
<style>
table,
table tr th,
table tr td {
border: 2px solid #333333;
padding: 5px 0;
}
#app {
/* height: 98vh;
position: relative; */
}
.content {
width: 1000px;
padding: 30px 20px 20px 20px;
font-size: 18px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
table {
width: 100%;
text-align: center;
border-collapse: collapse;
border: 3px solid #333333;
}
.col-bgc {
background: #f6f7fb;
}
.bottom-row1 {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.bottom-row2 {
display: flex;
margin: 10px 0;
}
img,
.left {
width: 110px;
height: 110px;
/* margin-right: 118px; */
position: absolute;
right: 20px;
top: 12px;
}
.config {
margin-right: 240px;
}
.bottom-row3 {
margin: 10px 0;
}
.title {
text-align: center;
font-size: 36px;
font-weight: 500;
}
.number {
text-align: right;
/* margin-bottom: 10px; */
margin: 10px 0;
}
.small-row {
display: flex;
}
.small-content {
width: 300px;
/* margin: 0 auto;
border: 1px solid #ccc;
padding: 20px 20px 160px 20px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 650px; */
}
.small-title {
text-align: center;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.numberNo {
font-size: 36px;
}
.small-row {
display: flex;
justify-content: space-between;
margin: 10px;
}
.small-img {
margin-right: 0;
}
.sign {
margin-right: 100px;
}
.small-code {
position: relative;
left: calc(50% - 55px)
}
</style>
</head>
<body>
<div id="app">
<div class="content" v-if="bigContent">
<div>
<div class="title">{{tableData.compName}}</div>
<div class="title">粮食质检单</div>
<div class="left">
<img :src="tableData.codeUrl " alt="">
</div>
</div>
<div class="number">{{tableData.qualityNo}}</div>
<table class="table">
<tr class="row">
<td class="col col-bgc">客户姓名</td>
<td class="col" colspan="2">{{tableData.customerName}}</td>
<td class="col col-bgc">客户电话</td>
<td class="col" colspan="2">{{tableData.customerPhone}}</td>
<td class="col col-bgc">车牌号</td>
<td class="col">{{tableData.carNumber}}</td>
</tr>
<tr class="row">
<td class="col col-bgc">收货单位</td>
<td class="col" colspan="2">{{tableData.compName}}</td>
<td class="col col-bgc">联系人</td>
<td class="col" colspan="2">{{tableData.person}}</td>
<td class="col col-bgc">联系电话</td>
<td class="col">{{tableData.personPhone}}</td>
</tr>
<tr class="row">
<td class="col col-bgc">货名</td>
<td class="col">{{tableData.goodsName}}</td>
<td class="col col-bgc">类型</td>
<td class="col">{{tableData.type}}</td>
<td class="col col-bgc">容量（克/升）</td>
<td class="col">{{tableData.bulkDensity}}</td>
<td class="col col-bgc">不完善粒（%）</td>
<td class="col">{{tableData.imperfectGrain}}</td>
</tr>
<tr class="row">
<td class="col col-bgc">等级</td>
<td class="col">{{tableData.grade}}</td>
<td class="col col-bgc">水分（%）</td>
<td class="col">{{tableData.waterContent}}</td>
<td class="col col-bgc">热损伤（%）</td>
<td class="col">{{tableData.jiaorenli}}</td>
<td v-if="tableData.confirm == '1'" class="col col-bgc">单价（元/公斤）</td>
<td v-else class="col col-bgc">待定单价（元/公斤）</td>
<td class="col " v-if="tableData.type == '潮粮'">
{{tableData.tidalGrainPrice}}
</td>
<td class="col " v-if="tableData.type == '干粮'">
{{tableData.dryGrainPrice}}
</td>
</tr>
<tr class="row">
<td class="col col-bgc">杂质（%）</td>
<td class="col">{{tableData.impurity}}</td>
<td class="col col-bgc">霉变粒（%）</td>
<td class="col">{{tableData.mildewGrain}}</td>
<td v-if="tableData.paramType == '1'" class="col col-bgc">扣杂</td>
<td v-if="tableData.paramType == '1'" class="col">{{tableData.buckleMiscellaneous}}</td>
<td v-if="tableData.paramType == '1'" class="col col-bgc" colspan="1">购粮性质</td>
<td v-else class="col col-bgc" colspan="2">购粮性质</td>
<td v-if="tableData.paramType == '1'" class="col" colspan="1">{{ tableData.natureOfGrainPurchase }}</td>
<td v-else class="col" colspan="2">{{ tableData.natureOfGrainPurchase }}</td>
</tr>
<tr class="row">
<td class="col col-bgc">仓位号</td>
<td class="col">{{ tableData.binNumber }}</td>
<td class="col col-bgc">囤位号</td>
<td class="col">{{ tableData.storageTagNo }}</td>
<td class="col col-bgc" colspan="2">质检员</td>
<td class="col" colspan="2">{{ tableData.qualityInspector }}</td>
</tr>
</table>
<div class="bottom">
<div class="bottom-row1">
<div></div>
<div>{{tableData.qualityDate}}</div>
</div>
<div class="bottom-row2">
<!-- <div class="left">
<img :src="tableData.codeUrl " alt="">
</div> -->
<div class="config">收货单位签名或盖章</div>
<div class="">客户签名</div>
</div>
<!-- <div class="bottom-row3">扫一扫</div> -->
</div>
</div>
<div class="small-content" v-if="smallContent">
<div class="small-title">
<div class="numberNo">{{tableData.qualityNo.substring(tableData.qualityNo.length - 3)}}</div>
<div>粮食质检单</div>
</div>
<img :src="tableData.codeUrl " alt="" class="small-code">
<div class="small-row">
<div>编号：</div>
<div>{{tableData.qualityNo}}</div>
</div>
<div class="small-row">
<div>客户姓名：</div>
<div>{{tableData.customerName}}</div>
</div>
<div class="small-row">
<div>客户电话：</div>
<div>{{tableData.customerPhone}}</div>
</div>
<div class="small-row">
<div>车牌号：</div>
<div>{{tableData.carNumber}}</div>
</div>
<div class="small-row">
<div>收货单位：</div>
<div>{{tableData.compName}}</div>
</div>
<div class="small-row">
<div>联系人：</div>
<div>{{tableData.person}}</div>
</div>
<div class="small-row">
<div>联系电话：</div>
<div>{{tableData.personPhone}}</div>
</div>
<div class="small-row">
<div>货名：</div>
<div>{{tableData.goodsName}}</div>
</div>
<div class="small-row">
<div>类型：</div>
<div>{{tableData.type}}</div>
</div>
<div class="small-row">
<div>容量（克/升）：</div>
<div>{{tableData.bulkDensity}}</div>
</div>
<div class="small-row">
<div>不完善粒（%）：</div>
<div>{{tableData.imperfectGrain}}</div>
</div>
<div class="small-row">
<div>等级：</div>
<div>{{tableData.grade}}</div>
</div>
<div class="small-row">
<div>水分（%）：</div>
<div>{{tableData.waterContent}}</div>
</div>
<div class="small-row">
<div>热损伤（%）：</div>
<div>{{tableData.jiaorenli}}</div>
</div>
<div class="small-row">
<div v-if="tableData.confirm == '1'">单价（元/公斤）：</div>
<div v-else>待定单价（元/公斤）：</div>
<div v-if="tableData.type == '潮粮'">
{{tableData.tidalGrainPrice}}
</div>
<div v-if="tableData.type == '干粮'">
{{tableData.dryGrainPrice}}
</div>
<!-- <div>{{tableData.tidalGrainPrice}}</div> -->
</div>
<div class="small-row">
<div>杂质（%）：</div>
<div>{{tableData.impurity}}</div>
</div>
<div class="small-row">
<div>霉变粒（%）：</div>
<div>{{tableData.mildewGrain}}</div>
</div>
<div v-if="tableData.paramType == '1'" class="small-row">
<div>扣杂：</div>
<div>{{tableData.buckleMiscellaneous}}</div>
</div>
<div class="small-row">
<div>购粮性质：</div>
<div>{{tableData.natureOfGrainPurchase}}</div>
</div>
<div class="small-row">
<div>质检：</div>
<div>{{tableData.qualityInspector}}</div>
</div>
<div class="small-row">
<div>时间：</div>
<div>{{tableData.qualityDate}}</div>
</div>
<div class="small-row">
<div>收货单位签名或盖章:</div>
</div>
<div class="small-row">
<div class="sign">客户签名:</div>
</div>
</div>
</div>
</body>
<script src="../cdn/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
tableData: "",
name: "",
bigContent: false,
smallContent: false,
printData: {},
},
computed: {},
methods: {
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
},
printSmall() {},
printBig() {},
},
mounted() {
let _data = decodeURIComponent(this.getQueryVariable("dataList"))
let _type = decodeURIComponent(this.getQueryVariable("type"))
if (_type == 2) {
this.bigContent = true
this.smallContent = false
} else {
this.smallContent = true
this.bigContent = false
}
console.log(_data)
this.tableData = JSON.parse(_data)
console.log(this.tableData)
document.title = "粮食质检单"
window.print()
window.onafterprint = function(event) {
window.history.back(-1)
};
},
watch: {}
})
</script>
</html>