<style>
|
|
.main{
|
width: 750px;
|
margin: 0 auto;
|
padding: 0 20px 20px;
|
box-sizing: border-box;
|
}
|
.main .header{
|
display: flex;
|
flex-wrap: wrap;
|
font-size: 14px;
|
}
|
.main .header .item{
|
border: 1px solid #333;
|
border-radius: 2px;
|
margin: 0 2px;
|
padding: 0 8px;
|
}
|
.main .header .item .name{
|
display: inline-block;
|
border-right: 1px solid #333;
|
margin-right: 8px;
|
padding: 3px 8px 3px 0;
|
}
|
.main .content{
|
width: 100%;
|
}
|
.main .content .box{
|
width: 100%;
|
position: relative;
|
text-align: center;
|
}
|
.main .front-box .print-images img,
|
.main .back-box .print-images img{
|
width: 440px;
|
}
|
.main .front-box .logo,
|
.main .back-box .logo{
|
width: 100px;
|
margin-top: 2px;
|
}
|
.main .front-box span,
|
.main .back-box span{
|
margin: 0 5px;
|
font-size: 12px;
|
color: red;
|
}
|
.main .front-front-one{
|
position: absolute;
|
left: 14%;
|
top: 30%;
|
text-align: right;
|
}
|
.main .front-front-two{
|
position: absolute;
|
left: 9%;
|
top: 69%;
|
text-align: right;
|
}
|
.main .front-front-three{
|
position: absolute;
|
left: 79%;
|
top: 65%;
|
text-align: left;
|
}
|
.main .back-front-one{
|
position: absolute;
|
left: 67%;
|
top: 19%;
|
text-align: left;
|
}
|
.main .memberInfo-table {
|
border-collapse: collapse;
|
font-size: 14px;
|
margin: 10px auto 30px;
|
}
|
.main .memberInfo-table, .main .memberInfo-table th, .main .memberInfo-table td {
|
border: 1px solid #333;
|
}
|
.main .memberInfo-table th, .main .memberInfo-table td {
|
padding: 5px 15px;
|
text-align: center;
|
}
|
.footer{
|
width: 100%;
|
font-size: 16px;
|
}
|
.footer>span{
|
display: inline-block;
|
width: 25%;
|
}
|
@media print {
|
.no-print {
|
display: none !important;
|
}
|
}
|
</style>
|
|
<div id="page"></div>
|
<div style="text-align: center;margin: 10px 0 20px;" class="no-print">
|
<button class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain" onclick="window.print()">打印</button>
|
</div>
|
|
<script data-th-inline="javascript">
|
layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree'], function () {
|
var $ = layui.$,
|
febs = layui.febs,
|
layer = layui.layer,
|
formSelects = layui.formSelects,
|
treeSelect = layui.treeSelect,
|
form = layui.form,
|
eleTree = layui.eleTree,
|
orderPrint = [[${orderPrint}]],
|
$view = $('#page'),
|
validate = layui.validate,
|
_deptTree;
|
|
var data = orderPrint;
|
console.log(data);
|
|
var patternHtml = '';
|
if(data.patterns){
|
for(var i = 0; i < data.patterns.length; i++) {
|
patternHtml += "<div class="+"front-"+data.patterns[i].patternCode+">";
|
if(data.patterns[i].patternText){
|
patternHtml +=
|
"<div>" +
|
// "<span>" + data.patterns[i].patternName +"</span>" +
|
// "<span>" + data.patterns[i].patternCode +"</span>" +
|
"<span>文字：" + data.patterns[i].patternText +"</span>" +
|
"</div>"
|
}
|
if(data.patterns[i].patternImage){
|
patternHtml +=
|
"<div class='image-load'>" +
|
"<img src='"+ data.patterns[i].patternImage+"' class='logo' />" +
|
"</div>" +
|
"</div>"
|
}
|
}
|
}
|
var locationHtml = '';
|
if (data.locations){
|
for(var i = 0; i < data.locations.length; i++) {
|
locationHtml += "<div class="+"back-"+data.patterns[i].patternCode+">"
|
if (data.locations[i].locationText){
|
locationHtml +=
|
"<div>" +
|
// "<span>" + data.locations[i].locationName +"</span>" +
|
// "<span>" + data.locations[i].locationCode +"</span>" +
|
"<span>文字：" + data.locations[i].locationText +"</span>" +
|
"</div>"
|
}
|
if (data.locations[i].locationImage){
|
locationHtml +=
|
"<div class='image-load'>" +
|
"<img src='"+ data.locations[i].locationImage+"' class='logo' />" +
|
"</div>" +
|
"</div>"
|
}
|
}
|
}
|
|
var memberStatureHtml = '';
|
if (data.memberStature){
|
memberStatureHtml +=
|
"<table class='memberInfo-table'>" +
|
"<tr>" +
|
"<th colspan='9'>"+data.memberStature.name+"</th>" +
|
"</tr>" +
|
"<tr>" +
|
"<td>身高</td>" +
|
"<td>胸围</td>" +
|
"<td>腰围</td>" +
|
"<td>肩宽</td>" +
|
"<td>臀围</td>" +
|
"</tr>" +
|
"<tr>" +
|
"<td>"+data.memberStature.heightLine+"</td>" +
|
"<td>"+data.memberStature.bustLine+"</td>" +
|
"<td>"+data.memberStature.waistLine+"</td>" +
|
"<td>"+data.memberStature.wideLine+"</td>" +
|
"<td>"+data.memberStature.hipLine+"</td>" +
|
"</tr>" +
|
"</table>"
|
}
|
|
var mainHtml = "<div class='main'>" +
|
"<div class='header'>" +
|
"<div class='item'><span class='name'>类型:</span>" + data.typeName + "</div>" +
|
"<div class='item'><span class='name'>布料:</span>" + data.clothName+ "("+data.clothCode+")"+ "</div><br>" +
|
"<div class='item'><span class='name'>尺码:</span>" + data.sizeName + "("+data.sizeCode+")"+ "</div>" +
|
"<div class='item'><span class='name'>工艺:</span>" + data.artName + "("+data.artCode+")"+ "</div>" +
|
"</div>" +
|
"<div class='content'>" +
|
"<div class='front-box box'>" +
|
"<div class='print-images'>" +
|
"<div class='image-load'>" +
|
"<img src="+ data.typeFront+">" +
|
"</div>" +
|
"</div>" +
|
patternHtml +
|
"</div>" +
|
"<div class='back-box box'>" +
|
"<div class='print-images'>" +
|
"<div class='image-load'>" +
|
"<img src="+ data.typeBack+">" +
|
"</div>" +
|
"</div>" +
|
locationHtml +
|
memberStatureHtml +
|
"</div>" +
|
"</div>" +
|
"<div class='footer'>" +
|
"<span>审核：</span>" +
|
"<span>审批：</span>" +
|
"<span>版师：</span>" +
|
"<span>工艺师：</span>" +
|
"</div>"
|
"</div>";
|
|
document.querySelector('#page').innerHTML = mainHtml;
|
|
// //在新窗口的 document 中查找图片
|
// ensureImagesLoaded(document, '.image-load img')
|
// .catch(() => layer.msg('图片加载中'));
|
//
|
// function ensureImagesLoaded(doc, selector) {
|
// var imgs = $(selector, doc); // 👈 在指定文档中查找
|
// var promises = [];
|
//
|
// imgs.each(function() {
|
// var img = this;
|
// var promise = new Promise(function(resolve, reject) {
|
// if (img.complete && img.naturalWidth !== 0) {
|
// resolve();
|
// } else {
|
// $(img).on('load', resolve).on('error', reject);
|
// }
|
// });
|
// promises.push(promise);
|
// });
|
//
|
// return Promise.all(promises);
|
// }
|
|
});
|
</script>
|
