前端标签样式修改

Demo

2024-02-01 a2a5dea97236c3c3a362bd551d6b1281e6204929

前端标签样式修改

 HTML/img/LiNuo.jpg

 HTML/views/ASNSetting/ArrivalNotice.html

@@ -281,6 +281,10 @@
                                    html = `<a class="layui-btn layui-btn-danger layui-btn-xs delClass" lay-event="del"> 
                                        <i class="layui-icon layui-icon-delete"></i>删除</a>`; 
                                }
                                if(d.Status == "0" || d.Status == "1"){ 
                                    html += `<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="Addlabel"> 
                                        <i class="layui-icon layui-icon-edit"></i>生成标签</a>`; 
                                }
                                return html;
                            } 
                        }}
@@ -617,7 +621,7 @@
                        {field: 'CreateTime',title: '创建时间',align: 'center',width: 160,templet: '#templetCreateTime2'},
                        {field: 'UpdateUserName',title: '修改人',align: 'center',width: 150,},
                        {field: 'UpdateTime',title: '修改时间',align: 'center',width: 150,templet: '#templetUpdateTime3'},  
                        {field: 'caozuo',title: '操作',fixed: 'right',width: 100,align: 'left',toolbar: '#toolbarDemoList', "disabled": true}
                        {field: 'caozuo',title: '操作',fixed: 'right',width: 150,align: 'left',toolbar: '#toolbarDemoList', "disabled": true}
                    ]];
            var DetailColsSysArr=encodeURIComponent(encodeURIComponent(JSON.stringify(DetailColsArr)))//将表头数据进行url编码
            //#endregion
@@ -1134,6 +1138,50 @@
                        });    

                        break;
                    case "Addlabel" :
                        layer.open({
                            type: 2,
                            title: '生成标签',
                            content: 'LabelPrintSelect.html',
                            maxmin: true,
                            area: ['460px', '460px'],
                            btn: ['确定','取消'],
                            yes: function(index, layero){
                                var iframeWindow = window['layui-layer-iframe'+ index]
                                ,submitID = 'layuiadmin-app-form-edit'
                                ,submit = layero.find('iframe').contents().find('#'+ submitID);
                                //监听提交
                                iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                                    var field = data.field; //获取提交的字段
                                    console.log(field);
                                    //提交 Ajax 成功后，静态更新表格中的数据
                                    var param = {
                                        Id: data.Id,
                                        Reset: field.reset, //重置批号
                                        Level: field.level,  //标签级别  1/2级
                                        Type:field.type,  //关系层级  有/无层级
                                        ArriveQty:field.arriveQty, //到货数量
                                        BoxType:field.boxType ,// 箱支类型  箱/支
                                        Qty:field.qty //箱/支数量
                                    };
                                    console.log(param);
                                    layer.open({
                                        type: 2,
                                        title: '生成标签',
                                        content: 'LabelPrint.html',
                                        maxmin: true,
                                        area: ['660px', '660px'],
                                        btn: ['取消'],
										

                                    });
                                });  
                                submit.trigger('click');
                            }

                        });

                        break;
                    default:break;
                }
            });

 HTML/views/ASNSetting/LabelBox.html

@@ -238,26 +238,22 @@
            table.on('toolbar(Box-list)', function (obj) {
                switch (obj.event) {
                    case 'add':    // 添加箱支关系
                        // 代码区域
                        var param = getBoxInforVlues();
                        if (param != "") {
                            console.log(param);
                            sendData(IP + "/BllAsn/AddBllBoxInfo", param, 'post', function (res) {
                                if (res.code == 0) { //成功
                                    layer.msg(res.msg, {
                                        icon: 1,
                                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function () {
                                        bindTable();
                        // layer.open({
                        //     type: 2,
                        //     title: '自定义列',
                        //     content: '../SystemSettings/HeaderSetting.html',
                        //     maxmin: false,
                        //     resize: false,
                        //     area: ['970px', '650px']
                        // });
                        layer.open({
                            type: 2,
                            title: '打印',
                            content: 'LabelPrint.html?',
                            maxmin: true,
                            area: ['600px', '670px'],
                            btn: ['取消']
                                    });
                                } else { //不成功
                                    layer.msg(res.msg, {
                                        icon: 2,
                                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function () { doing = true });
                                } 
                            });
                        }
                        break;
                    
                    default: break;

 HTML/views/ASNSetting/LabelPrint.html

New file
@@ -0,0 +1,349 @@
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标签打印</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <style media="print">
        @page {
            size: auto;
            margin: 0 0 0 20px;
        }

        .layui-input {
            padding-left: 0px;
        }

        .layui-form-item {
            margin-bottom: 2px;
        }
    </style>
</head>

<body>
    <div style="width:100%;text-align: center;">
        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="print"
            style="width: 100%;height:100%; text-align: right;padding-top: 5px;margin-left: 0%;">
            <div>
                 
                <table border="1" id="table" style="width: 90%; height:480px; margin: 0 auto; text-align: center;border-collapse: collapse;table-layout: fixed;">
                     
                    <tr> 
                        <td colspan="2" id="Logo">
                            <img src="../../img/LiNuo.jpg" style="width: 90%; height: 30px;" />
                        </td>
                        <td colspan="2" style="padding: 1px 0px;">SMP-ST002-R08-01</td> 
                    </tr>
                    <tr> 
                        <td colspan="4" id="department">物料标签</td>
                    </tr>
                    <tr>
                        <td>品名</td>
                        <td colspan="3" id="goodName"></td>
                    </tr>
                    <tr>
                        <td>规格/型号</td>
                        <td  id="Standard"></td>
                        <td>包装规格</td>
                        <td id="PackageStandard"></td>
                    </tr>
                    <tr>
                        <td>进厂编号</td>
                        <td style="padding: 1px 0px;"></td>
                        <td>物料代码</td>
                        <td style="padding: 1px 0px;"> </td>
                    </tr>
                    <tr>
                        <td>原厂批号</td>
                        <td id="SupplierLot"></td> 
                        <td>数   量</td>
                        <td id="qty"></td> 
                    </tr>
                    <tr>
                        <td>有效期至</td>
                        <td id="ExpirationTime"></td>
                        <td>储存期至</td>
                        <td id="StoreTime"></td> 
                    </tr>
                    <tr> 
                        <td id="qty3" colspan="4">
                            <img id="imgBar" style="width: auto; height: auto;" />
                        </td> 
                    </tr>
                    
                </table> 
                 
            </div>
            <div style="page-break-after: always;"></div>
        </div>
        <hr>
        <div style="padding-top: 10px;text-align: left;" id="button">
            <div class="layui-inline" style="margin-right: 10px;">
                <span style="padding-right: 5px;">是否重置批次:</span>
                <span style="padding-right: 5px;">是</span><input type="radio" checked="true" name="isprint" value="1">
                <span style="padding-right: 5px;">否</span><input type="radio" name="isprint" value="0">
            </div>
            <div class="layui-inline">
                到货数量：<div class="layui-input-inline">
                    <input type="text"
                        oninput="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3')"
                        onafterpaste="this.value=this.value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3')"
                        name="skuNum" id="skuNum" lay-verify="skuNum" placeholder="" style="width: 100px;"
                        autocomplete="off" class="layui-input InputCss">
                </div>&nbsp;&nbsp;
            </div>
            <div class="layui-inline">
                箱标签数量：<div class="layui-input-inline">
                    <input type="text" onkeyup="this.value=this.value.replace(/^0{1,}/g,'')"
                        onafterpaste="this.value=this.value.replace(/^0{1,}/g,'')" name="bQNum" id="bQNum"
                        lay-verify="bQNum" placeholder="" style="width: 100px;" autocomplete="off"
                        class="layui-input InputCss">
                </div>&nbsp;&nbsp;
            </div>

            <div>
                <div class="layui-inline" style="padding-top: 5px">
                    一级标签必录参数：箱内数量：<div class="layui-input-inline">
                        <input type="text"
                            oninput="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3')"
                            onafterpaste="this.value=this.value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d\d).*$/,'$1$2.$3')"
                            name="number" id="number" lay-verify="number" placeholder="" style="width: 70px;"
                            autocomplete="off" class="layui-input InputCss">
                    </div>&nbsp;&nbsp;
                </div>
                <div class="layui-inline">
                    <button id="btnPrint" class="layui-btn layui-btn-sm" lay-event="Add"><i
                            class="layui-icon">&#xe654;</i>打印</button>
                </div>
            </div>
        </div>

    </div>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../js/public.js"></script>
    <script src="../../js/jquery-3.5.1.min.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../js/jquery.print.js"></script>
    <script>
        var boxcode = "";
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'layer', 'laydate'], function () {

            var $ = layui.$,
                form = layui.form,
                layer = layui.layer;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#ProductionDate'
                , format: 'yyyy-MM-dd' //可任意组合
            });
            laydate.render({
                elem: '#InspectTime'
                , format: 'yyyy-MM-dd' //可任意组合
            });
            laydate.render({
                elem: '#ExpirationTime'
                , format: 'yyyy-MM-dd' //可任意组合
            });
            var id = getQueryString('id');
            var xun = 0;

            $('#btnPrint').on('click', function () {
                var param = {
                    ImportId: id,
                };
                if ($("#ProductionDate").val() == "" || $("#ProductionDate").val() == undefined || $("#ProductionDate").val() == null) {
                    layer.msg("生产日期不能为空", {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () { return; });
                }
                if ($("#SupplierName").val() == "" || $("#SupplierName").val() == undefined || $("#SupplierName").val() == null) {
                    layer.msg("生产厂家不能为空", {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () { return; });
                }
                if ($("#SupplierLot").val() == "" || $("#SupplierLot").val() == undefined || $("#SupplierLot").val() == null) {
                    console.log($("#SupplierLot").val())
                    layer.msg("厂家批号不能为空", {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () { return; });
                } 

                if ($('#number').val() > 0) {

                    if ($('#bQNum').val() > 0) {
                        div($('#number').val(), $('input[name="isprint"]:checked').val(), $('#bQNum').val());
                    } else {
                        div($('#number').val(), $('input[name="isprint"]:checked').val(), 0);
                    }

                }
                else {

                    if ($('#bQNum').val() >= 0) {
                        div(0, $('input[name="isprint"]:checked').val(), $('#bQNum').val());
                    } else {
                        div(0, $('input[name="isprint"]:checked').val(), 0);
                    }

                }
            });

            if (!id) {
                id = 0;
            }
            else {
                div(-1, 1, 0);
            }


            // 循环加载标签
            function div(number, isprint, bqNum) {
                GetImportId(number, isprint, bqNum);
            }

            // 标签变量赋值
            function GetImportId(i, isprint, bqNum) {

                var param1 = {
                    isprint: isprint,
                    ImportId: id,
                    CreateUser: $.cookie('userId'),
                    number2: i,
                    boxcode: "",
                    ProductionDate: $("input[name='ProductionDate']").val(),
                    SupplierName: $("input[name='SupplierName']").val(),
                    SupplierLot: $("input[name='SupplierLot']").val(),
                    InspectTime: $("input[name='InspectTime']").val(),
                    ExpirationTime: $("input[name='ExpirationTime']").val(),
                    bQNum: bqNum,
                    skuNum: $('#skuNum').val().toString()
                };

                synData(IP + "/LabelPrint/GetImport5Id", param1, 'post', function (res) {
                    if (res.code == 1) { //成功 

                        if (i == -1) {
                            $("input[name='SkuNo']").val(res.data[0].SkuNo);
                            $("input[name='SkuName']").val(res.data[0].SkuName);
                            $("input[name='SupplierName']").val(res.data[0].SupplierName);
                            $("input[name='ProductionDate']").val(res.data[0].ProductionDate);
                            $("input[name='SapSkuNo']").val(res.data[0].SapSkuNo);
                            $("input[name='Qty']").val(res.data[0].Qty);
                            $("input[name='Standard']").val(res.data[0].Standard);
                            $("input[name='SupplierLot']").val(res.data[0].SupplierLot);
                            $("input[name='LotNo']").val(res.data[0].LotNo);
                            $("input[name='InspectTime']").val(res.data[0].InspectTime);
                            $("input[name='ExpirationTime']").val(res.data[0].ExpirationTime);
                            $("input[name='QtyCount']").val(res.data[0].QtyCount);
                            $("input[name='QtyOrd']").val(res.data[0].QtyOrd);
                            $("input[name='ExpirationType']").val(res.data[0].ExpirationType);
                            $("input[name='BoxCode']").val(res.data[0].BoxCode);
                            $("#imgBar").attr("src", res.data[0].imageStr);
                        } else {
                            var labels = "";
                            for (var z = 0; z < res.data.length; z++) {
                                var idd = "";
                                if (z - 1 >= 0) {
                                    idd = (z - 1).toString();
                                }

                                $("#SkuNo" + idd).attr("id", "SkuNo" + z.toString());
                                $("#SkuNo" + z.toString()).attr("value", res.data[z].SkuNo);

                                $("#SkuName" + idd).attr("id", "SkuName" + z.toString());
                                $("#SkuName" + z.toString()).attr("value", res.data[z].SkuName);

                                var supplier = $("#SupplierName" + idd).val();
                                $("#SupplierName" + idd).attr("id", "SupplierName" + z.toString());
                                $("#SupplierName" + z.toString()).attr("value", supplier);

                                var time = $("#ProductionDate" + idd).val();
                                $("#ProductionDate" + idd).attr("id", "ProductionDate" + z.toString());
                                $("#ProductionDate" + z.toString()).attr("value", time);

                                $("#SapSkuNo" + idd).attr("id", "SapSkuNo" + z.toString());
                                $("#SapSkuNo" + z.toString()).attr("value", res.data[z].SapSkuNo);

                                $("#Qty" + idd).attr("id", "Qty" + z.toString());
                                $("#Qty" + z.toString()).attr("value", res.data[z].Qty);

                                $("#Standard" + idd).attr("id", "Standard" + z.toString());
                                $("#Standard" + z.toString()).attr("value", res.data[z].Standard);

                                $("#LotNo" + idd).attr("id", "LotNo" + z.toString());
                                $("#LotNo" + z.toString()).attr("value", res.data[z].LotNo);

                                var supplierLot = $("#SupplierLot" + idd).val();
                                $("#SupplierLot" + idd).attr("id", "SupplierLot" + z.toString());
                                $("#SupplierLot" + z.toString()).attr("value", supplierLot);

                                var insTime = $("#InspectTime" + idd).val();
                                $("#InspectTime" + idd).attr("id", "InspectTime" + z.toString());
                                $("#InspectTime" + z.toString()).attr("value", insTime);

                                var expTime = $("#ExpirationTime" + idd).val();
                                $("#ExpirationTime" + idd).attr("id", "ExpirationTime" + z.toString());
                                $("#ExpirationTime" + z.toString()).attr("value", expTime);

                                $("#QtyCount" + idd).attr("id", "QtyCount" + z.toString());
                                $("#QtyCount" + z.toString()).attr("value", res.data[z].QtyCount);

                                $("#QtyOrd" + idd).attr("id", "QtyOrd" + z.toString());
                                $("#QtyOrd" + z.toString()).attr("value", res.data[z].QtyOrd);

                                $("#ExpirationType" + idd).attr("id", "ExpirationType" + z.toString());
                                $("#ExpirationType" + z.toString()).attr("value", res.data[z].ExpirationType);

                                $("#BoxCode" + idd).attr("id", "BoxCode" + z.toString());
                                $("#BoxCode" + z.toString()).attr("value", res.data[z].BoxCode);

                                $("#imgBar" + idd).attr("id", "imgBar" + z.toString());
                                $("#imgBar" + z.toString()).attr("src", res.data[z].imageStr);

                                labels += $("#print").html();

                            }

                            // console.log(labels);
                            document.getElementById('print').innerHTML = "";
                            document.getElementById('print').innerHTML = labels;
                            // console.log($("#print").html());
                            $("#button").hide();
                            $("#print").print();
                            $("#button").show();
                        }
                    } else { //不成功
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () { });
                    }
                });
            };

            // 获取传递参数
            function getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        })

    </script>

</body>

</html>

 HTML/views/ASNSetting/LabelPrintSelect.html

New file
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标签打印选择</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    </head>
    <body>
        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">重置批号</label>
                <div class="layui-input-block">
                    <select name="reset" id="reset" lay-verify="required">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div> 
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标签级别</label>
                <div class="layui-input-block">
                    <select name="level" id="level" lay-filter="levelFil" lay-verify="required">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div> 
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关系层级</label>
                <div class="layui-input-block">
                    <select name="type" id="type" lay-verify="required"  lay-filter="typeFil" lay-search> 
                        <option value="1">有层级</option>
                        <option value="0">无层级</option> 
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到货数量</label>
                <div class="layui-input-block">
                    <input type="text" name=arriveQty" id="arriveQty" lay-verify="required"  placeholder="请输入巷道名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" id="boxTypeDiv" style="display: none;">
                <label class="layui-form-label">箱支类型</label>
                <div class="layui-input-block">
                    <select name="boxType" id="boxType" lay-filter="boxTypeFil" lay-search>
                        <option value=""></option>
                        <option value="1">箱</option>
                        <option value="2">支</option> 
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="qtyDiv" style="display: none;">
                <label class="layui-form-label">数量</label>
                <div class="layui-input-block">
                    <input type="text" name="qty" id="qty"   placeholder="请输入巷道名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
                <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
            </div>
				
        </div>
		
            <script src="../../layuiadmin/layui/layui.js"></script>
            <script src="../../js/public.js"></script>
            <script src="../../js/jquery-3.5.1.min.js"></script>
            <script src="../../js/jquery.cookie.js"></script>
            <script>
                layui.config({
                    base: '../../layuiadmin/' //静态资源所在路径
                }).extend({
                    index: 'lib/index' //主入口模块
                }).use(['index', 'form', 'layer'], function() {
                    var $ = layui.$;
                    var    form = layui.form;
                    var    layer = layui.layer;
                    form.on('select(levelFil)', function(data){  
                        console.log($("#type").val());  
                        var type = $("#type").val();
                        if (data.value == "1" ) {
                            $("#boxTypeDiv").css("display","none");  
                            form.val("layuiadmin-app-form-list", {
                                "boxType": ""  
                            });
                            $("#boxType").removeAttr("lay-verify");

                            $("#qtyDiv").css("display","none");
                            $("#qty").removeAttr("lay-verify");
                            $("#qty").val("");

                            form.render('select'); 
                        }
                        if (data.value == "2" && type == "0") {
                            $("#boxTypeDiv").css("display","block"); 
                            $("#boxType").attr("lay-verify","required"); 
                            
                        }
                    });   
                    form.on('select(typeFil)', function(data){  
                        var level = $("#level").val();
                        if (data.value == "1") {
                            $("#boxTypeDiv").css("display","none"); 
 
                            form.val("layuiadmin-app-form-list", {
                                "boxType": ""  
                            });
                            $("#boxType").removeAttr("lay-verify");
                            
                            $("#qtyDiv").css("display","none");
                            $("#qty").removeAttr("lay-verify");
                            $("#qty").val("");
                            form.render('select'); 
                        }
                        if (data.value == "0" && level == "2") {
                            $("#boxTypeDiv").css("display","block"); 
                            $("#boxType").attr("lay-verify","required");

                        }
                    });
                    form.on('select(boxTypeFil)', function(data){   
                        if (data.value == "1") { //箱
                            $("#qtyDiv").css("display","none");
                            $("#qty").removeAttr("lay-verify");
                            $("#qty").val("");
                        }
                        if (data.value == "2" ) { 
                            $("#qtyDiv").css("display","block");
                            $("#qty").attr("lay-verify","required");
                        }
                    });


                })
            </script>
		
    </body>
</html>