文件
mashangyoujiu/Application/Retail/View/Goods/downloadLabel.html

693 行
26 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html>
<!--[1.3.42]-->
<head>
<meta charset="UTF-8">
<title>商品</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/goodsList.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
<style>
.gA_inner01 > span {
min-width: 66px;
}
.gA_inner01 > input {
margin-left: 10px;
}
.gA_inner02 {
margin-right: 0px;
}
.supplier {
width: 200px;
margin-left: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
.layui-form .gA_inner01 > select {
display: none;
}
.layui-form-item {
margin-bottom: 0px;
}
.labelNum input {
height: 30px;
border-radius: 3px;
border: 1px solid #ddd;
padding-left: 10px;
}
::placeholder {
color: #999;
font-size: 12px;
}
.wrap-inline {
line-height: 12px;
margin-top: 5px;
text-align: left;
}
i {
font-size: 12px;
color: #666;
font-family: "AvantGarde Bk BT", "arial", "微软雅黑";
font-style: normal;
}
.layui-form-label {
color: #333;
width: 120px;
}
.gA_inner {
align-items: flex-start;
}
.layui-form-item .layui-input-inline {
width: 210px;
}
.goods_edit_input {
width: 180px;
height: 38px;
position: relative;
box-sizing: border-box;
background: white;
margin-right: 10px;
border-width: 1px;
border-style: solid;
}
.labelNum {
width: 460px;
text-align: center;
position: fixed;
bottom: 0;
right: 0;
background-color: white;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 0;
-webkit-background-clip: content;
border-radius: 2px;
box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
}
.tipsI {
line-height: 16px;
display: inline-block;
vertical-align: top;
padding: 12px 0;
text-align: left;
max-width: 200px;
}
.status {
width: 52px;
height: 22px;
border-radius: 13px;
font-size: 12px;
border: 1px solid #ccc;
cursor: pointer;
position: relative;
transition: 0.3s;
}
.isOpen {
background-color: #009688;
border-color: #009688;
}
.isOpen:before {
content: '开启';
color: white;
position: absolute;
top: 1px;
left: 5px;
transform: scale(0.9);
}
.isOpen:after {
content: '';
background-color: white;
width: 15px;
height: 15px;
position: absolute;
top: 3px;
left: 30px;
border-radius: 50%;
transform: scale(0.9);
}
.isClose:before {
content: '关闭';
color: #aaa;
position: absolute;
top: 1px;
left: 20px;
transform: scale(0.9);
}
.isClose:after {
content: '';
background-color: #bbb;
width: 15px;
height: 15px;
position: absolute;
top: 3px;
left: 5px;
border-radius: 50%;
transform: scale(0.9);
}
[v-cloak] {
display: none;
}
.layui-layer-content {
height: auto !important;
}
.label-check-box {
display: flex;
align-items: center;
justify-content: flex-start;
}
.label-set-title {
padding: 0 80px 0 20px;
height: 42px;
line-height: 42px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #eee;
font-size: 14px;
color: #333;
overflow: hidden;
background-color: #EBEEF5;
border-radius: 2px 2px 0 0;
}
.label-set-close {
position: absolute;
right: 15px;
top: 15px;
line-height: initial;
cursor: pointer;
width: 16px;
height: 16px;
margin-left: 10px;
font-size: 12px;
display: inline-block;
color: #333;
text-decoration: none;
vertical-align: top;
background: url(/Public/layui/css/modules/layer/default/icon.png) no-repeat;
background-position: 1px -40px;
}
.label-set-close:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="goodsBox">
<div class="goods_edit">
<form id="select_serach" class="layui-form">
<div class="sale_screen_hr" style="display: flex;">
<div class="goods_edit_input">
<input type="text" name="text" id="search_name" value="{$text}" placeholder="货号/品名/编码"/>
</div>
<div class="layui-input-inline">
<select name="person1" id="person1" lay-filter="person1">
<option value="">选择一级分类</option>
<volist name="class_name" id="class_name">
<option value="{$class_name['id']}"
<if condition="$class_id eq $class_name['id']">selected</if>
>{$class_name['class_name']}</option>
</volist>
</select>
</div>
<div class="layui-input-inline class2" style="display: none;margin-left: 10px;">
<select name="person2" id="person2" lay-filter="person2">
<option value="">选择二级分类</option>
</select>
</div>
<div class="layui-input-inline class3" style="display: none;margin-left: 10px;">
<select name="person3" id="person3" lay-filter="person3">
<option value="">选择三级分类</option>
</select>
</div>
</div>
</form>
<div class="goods_edit_add" id="serach_icon" style="margin-left: 20px;">搜索</div>
<button class="goods_edit_add" id="downloadLabel" data-type="getCheckData">批量下载标签</button>
<button class="goods_edit_add" id="printSet">打印设置</button>
</div>
<div class="goods_table">
<table class="layui-hide" id="test" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
<if condition="$authArr['downloadSkuLabel'] eq true">
{{# if(d.attribute_state==2){}}
<div class="layui-btn layui-btn-xs" lay-event="attribute">规格标签</div>
{{# } }}
</if>
<div class="layui-btn layui-btn-xs" lay-event="print">打印标签</div>
</script>
</div>
<div id="goodsBoxApp">
<div v-if="showLabelSet" class="labelNum">
<div class="label-set-title">
<div class="label-set-close" @click="showLabelSet=!showLabelSet"></div>
</div>
<div style="padding: 25px 0 0">
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印数量:</span>
<div class="layui-input-inline">
<input type="text" v-model="printNum" value="1" class="layui-input"
oninput="value=this.value.replace(/^[0]|\D/,'')"/>
<div class="wrap-inline">
<i style="line-height: 14px;">每个商品标签打印张数,留空默认1张</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印纸尺寸:</span>
<div class="layui-input-inline">
<div style="display: flex;align-items: center;color: #666;">
<span>宽:</span>
<input type="text" style="text-align: center;padding-left: 0" v-model="labelWidth"
placeholder="宽" class="layui-input"
oninput="value=this.value.replace(/^[0]|\D/,'')"/>
<span style="padding-left: 20px">高:</span>
<input type="text" style="text-align: center;padding-left: 0" v-model="labelHeight"
placeholder="高" class="layui-input"
oninput="value=this.value.replace(/^[0]|\D/,'')"/>
</div>
<div class="wrap-inline">
<i style="line-height: 14px;">尺寸按mm(毫米)填入</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印商品名称:</span>
<div class="label-check-box">
<div class="status" :class="showGoodsName?'isOpen':'isClose'"
@click="showGoodsName=!showGoodsName"></div>
<i style="line-height: 14px;">关闭则不打印名称</i>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印货号:</span>
<div class="label-check-box">
<div class="status" :class="showGoodsNum?'isOpen':'isClose'"
@click="showGoodsNum=!showGoodsNum"></div>
<i class="tipsI">关闭则不打印货号</i>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印条形码:</span>
<div class="label-check-box">
<div class="status" :class="showGoodsCode?'isOpen':'isClose'"
@click="showGoodsCode=!showGoodsCode"></div>
<i class="tipsI">关闭则不打印条形码,当没有条形码时则打印货号</i>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印条码数字:</span>
<div class="label-check-box">
<div class="status" :class="showCodeNumber?'isOpen':'isClose'"
@click="showCodeNumber=!showCodeNumber"></div>
<i class="tipsI">条形码底部明文数字</i>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印单价:</span>
<div class="label-check-box">
<div class="status" :class="showGoodsPrice?'isOpen':'isClose'"
@click="showGoodsPrice=!showGoodsPrice"></div>
<i class="tipsI">关闭则不打印单价</i>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">打印保质期:</span>
<div class="label-check-box">
<div class="status" :class="showGoodsDate?'isOpen':'isClose'"
@click="showGoodsDate=!showGoodsDate"></div>
<i class="tipsI">未设置保质期的商品不打印</i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--标签-->
<div id="prints" style="text-align: center;padding: 20px;display: none"></div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/retails/js/LodopFuncs.js"></script>
<!--<script type="text/javascript" src="__PUBLIC__/retails/js/JsBarcode.all.js"></script>-->
<script type="text/javascript" src="__PUBLIC__/receipt/Qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/receipt/JsBarcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/retails/js/vue2.js"></script>
<script type="text/javascript">
var arrDPI = new Array;
if (window.screen.deviceXDPI) {
arrDPI[0] = window.screen.deviceXDPI;
arrDPI[1] = window.screen.deviceYDPI;
} else {
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.offsetWidth);
arrDPI[1] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
}
var ppiRate = arrDPI[0] * 100 / 2540;
console.log(arrDPI, ppiRate);
layui.use(['table', 'form', 'layer'], function () {
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
var $ = layui.$;
//展示已知数据
table.render({
elem: '#test',
url: "{:U('Goods/getDownLabelGoodsList')}",
method: "post",
loading: true,
cols: [
[{
type: "checkbox",
}, {
field: 'index',
title: '序号',
width: 60,
align: 'center'
}, {
field: 'goods_number',
title: '货号',
width: 80,
}, {
field: 'goods_name',
title: '商品名称',
}, {
field: 'goods_code',
title: '商品条码',
width: 140,
}, {
field: 'retail_price',
title: '零售价(元)',
width: 90,
}, {
field: 'online_price',
title: '商城价(元)',
width: 90,
}, {
field: 'production_date',
title: '生产日期',
edit: 'number'
}, {
field: 'shelf_life',
title: '保质期',
width: 90,
edit: 'number'
}, {
fixed: 'right',
title: '操作',
align: 'center',
toolbar: '#barDemo',
width: 160
}]
],
page: true,
id: 'testReload'
});
var class1_val = '';
var class2_val = '';
form.on('select(person1)', function (data) {
if (class1_val == data.value) {
return;
}
class1_val = data.value;
class2_val = '';
if (data.value == '') {
$('.class2').hide();
$('.class3').hide();
$('#person2').html("<option value=''>选择二级分类</option>");
$('#person3').html("<option value=''>选择三级分类</option>");
form.render();
//renderForm();
} else {
$('.class3').hide();
$('#person2').html("<option value=''>选择二级分类</option>");
$('#person3').html("<option value=''>选择三级分类</option>");
$.post("{:U('Sale/getChildClass')}", {
id: data.value,
type: 2
}, function (res) {
if (res.status == 1) {
for (var i = 0; i < res.data.length; i++) {
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
$('#person2').append(child);
}
$('.class2').fadeIn();
$('#person3').html("<option value=''>选择三级分类</option>");
form.render();
// renderForm();
} else {
$('.class2').hide();
form.render();
// renderForm();
}
})
}
});
form.on('select(person2)', function (data) {
if (class2_val == data.value) {
return;
}
class2_val = data.value;
if (data.value == '') {
$('.class3').hide();
$('#person3>option').remove();
$('#person3').append("<option value=''>选择三级分类</option>");
form.render();
// renderForm();
} else {
$('#person3').html("<option value=''>选择三级分类</option>");
$.post("{:U('Sale/getChildClass')}", {
id: data.value,
type: 3
}, function (res) {
if (res.status == 1) {
for (var i = 0; i < res.data.length; i++) {
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
$('#person3').append(child);
}
$('.class3').fadeIn();
form.render();
// renderForm();
} else {
$('.class3').hide();
form.render();
// renderForm();
}
})
}
});
var goodsBoxApp = new Vue({
el: '#goodsBoxApp',
data: function () {
return {
printList: [],
checkAllSku: false,
checkedNum: 0,
printNum: 1,//打印数量
labelWidth: 58,//宽
labelHeight: 50,//高
showGoodsName: true,//名称
showGoodsCode: true,//条码
showCodeNumber: true,//条码编号显示
showGoodsPrice: true,//价格
showGoodsDate: true,//日期
showGoodsNum: true,//货号
showLabelSet: true,
}
}
});
$('#printSet').click(function () {
goodsBoxApp.showLabelSet = true;
});
function down(data) {
var num = goodsBoxApp.printNum || 1;
var _width = goodsBoxApp.labelWidth || 58;
var _height = goodsBoxApp.labelHeight || 58;
var showGoodsName = goodsBoxApp.showGoodsName;
var showGoodsCode = goodsBoxApp.showGoodsCode;
var showGoodsNum = goodsBoxApp.showGoodsNum;
var showCodeNumber = goodsBoxApp.showCodeNumber;
var showGoodsPrice = goodsBoxApp.showGoodsPrice;
var showGoodsDate = goodsBoxApp.showGoodsDate;
_width = parseInt(_width * ppiRate);
_height = parseInt(_height * ppiRate);
// console.log(_width, _width * ppiRate);
for (var i = 0; i < data.length; i++) {
var goods_name = '';
if (showGoodsName) {
goods_name = `<div style="width:100%;white-space: pre-wrap;">${data[i].goods_name}</div>`;
}
var code = '';
var print_code = '';
if (showGoodsCode && (data[i].goods_code || data[i].goods_number)) {
print_code = data[i].goods_code?data[i].goods_code: data[i].goods_number;
code = `<img id="imgCode"/>`;
}
var date = '';
if (showGoodsDate) {
if (data[i].production_date) {
date += `<div style="font-size: 12px;color: #666;">生产日期:${data[i].production_date}</div>`;
}
if (data[i].shelf_life) {
date += `<div style="font-size: 12px;color: #666;">保质期:${data[i].shelf_life}</div>`;
}
}
var codeNumber = '';
if (showCodeNumber && data[i].goods_code) {
codeNumber = `<div style="padding-top: -5px;padding-bottom: 5px;font-size: 14px;">${data[i].goods_code}</div>`;
}
var goodsNum = '';
if (showGoodsNum) {
goodsNum = `<div style="padding-top: -5px;padding-bottom: 5px;font-size: 14px;">货号:${data[i].goods_number}</div>`;
}
var price = '';
if (showGoodsPrice) {
price = `<div style="font-size: 12px;"><b>单价:¥ ${data[i].retail_price} 元</b></div>`;
}
for (var k = 0; k < num; k++) {
$("#prints").html(`<div style="width:${_width}px;height:${_height}px;padding:0 10px;text-align: center;display: flex;align-items:center;justify-content:center;flex-direction:column;box-sizing: border-box">
${goods_name}
${code}
${codeNumber}
${goodsNum}
${price}
${date}
</div>`);
if (code) {
var h = parseInt(_height * 0.25);
$('#imgCode').JsBarcode(print_code, {
format: "CODE128",
displayValue: false,
height: h,
width: 1,
fontSize: 12,
margin: 0
});//jQuery
}
Preview1();
}
}
}
//监听工具条
table.on('tool(demo)', function (obj) {
var data = obj.data;
if (obj.event === 'print') {
down([data]);
} else if (obj.event === 'attribute') {
console.log(data)
layer.open({
title: data.goods_name,
type: 2,
content: "{:U('downloadSkuLabel')}?id=" + data.id,
area: ['100%', '100%'],
btn: ['关闭'],
btnAlign: 'c',
yes: function () {
layer.closeAll();
}
})
}
});
//商品类别搜索
$("#serach_icon").click(function () {
var keyword = $("#good_class_id option:selected").val();
var good_number = $("#search_name").val();
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
goods_class_id: keyword,
goods_number: good_number,
person1: $('#person1').val(),
person2: $('#person2').val(),
person3: $('#person3').val()
}
});
})
/**
* 2018-12-21 批量打印标签
*/
var active = {
getCheckData: function () { //获取选中数据
var checkStatus = table.checkStatus('testReload')
, data = checkStatus.data;
if (data.length <= 0) {
layer.msg("请先选择要打印的商品");
return
}
down(data);
}
};
$('#downloadLabel').click(function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
})
var LODOP; //声明为全局变量
var LODOPbol = true;
function Preview1() {
if (!LODOPbol) {
return;
}
LODOP = getLodop();
// console.log(LODOP);
if (LODOP) {
LODOP.SET_PREVIEW_WINDOW(0, 1, 0, arrDPI[0], arrDPI[1], "");
LODOP.SET_SHOW_MODE("PREVIEW_NO_MINIMIZE", true);//预览窗口禁止最小化,并始终最前
LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);
AddPrintContent();
LODOP.PRINT();
} else {
top.layer.msg('打印机未准备好,无法打印', {time: 1000}, function () {
LODOPbol = false;
})
}
};
function AddPrintContent(strCode, strName) {
LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", document.getElementById("prints").innerHTML);
LODOP.SET_PRINT_PAGESIZE(3, 5700, 50, "");
};
</script>
</html>