<!DOCTYPE html> 
 | 
<html lang="en"> 
 | 
<head> 
 | 
    <meta charset="UTF-8"> 
 | 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 
 | 
    <title>商品提取</title> 
 | 
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> 
 | 
    <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> 
 | 
    <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> 
 | 
    <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> 
 | 
    <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> 
 | 
    <script type="text/javascript" src="../../static/js/handlebars/handlebars-v4.5.3.js"></script> 
 | 
    <style> 
 | 
        .form-box { 
 | 
            padding: 15px 5px 5px 0px; 
 | 
            font-size: 16px; 
 | 
            text-align: center; 
 | 
        } 
 | 
  
 | 
        .form-item { 
 | 
            margin-bottom: 10px; 
 | 
        } 
 | 
  
 | 
        .form-box span { 
 | 
            font-size: 16px; 
 | 
            display: inline-block; 
 | 
            text-align: right; 
 | 
            width: 70px; 
 | 
            vertical-align: middle; 
 | 
        } 
 | 
        .form-box input { 
 | 
            width: 120px; 
 | 
            margin-left: 10px; 
 | 
            padding-left: 5px; 
 | 
            height: 30px; 
 | 
            border: 1px solid #777777; 
 | 
            overflow:hidden; 
 | 
            white-space:nowrap; 
 | 
            text-overflow:ellipsis; 
 | 
            vertical-align: middle; 
 | 
        } 
 | 
        .form-box textarea { 
 | 
            height: 60px; 
 | 
            width: 120px; 
 | 
            margin-left: 10px; 
 | 
            padding-left: 5px; 
 | 
            border: 1px solid #777777; 
 | 
            display: inline-block; 
 | 
            vertical-align: middle; 
 | 
        } 
 | 
        #selectBtn { 
 | 
            vertical-align: middle; 
 | 
            padding: 3px 5px; 
 | 
            height: 32px; 
 | 
        } 
 | 
  
 | 
        #confirm { 
 | 
            margin-top: 10px; 
 | 
            padding: 5px 20px; 
 | 
        } 
 | 
  
 | 
        .number-tool { 
 | 
            margin-left: 10px; 
 | 
            padding: 1px 0 1px 5px; 
 | 
            display: inline-block; 
 | 
            width: 120px; 
 | 
        } 
 | 
        .number-tool:after { 
 | 
            clear: both; 
 | 
            content: ""; 
 | 
            display: table; 
 | 
        } 
 | 
        .number-tool button { 
 | 
            background-color: #fff; 
 | 
            margin-top: 3px; 
 | 
            font-size: 16px; 
 | 
            height: 25px; 
 | 
            float: left; 
 | 
            width: 25px; 
 | 
            border: 1px solid #777777; 
 | 
        } 
 | 
        .number-tool input { 
 | 
            text-align: center; 
 | 
            height: 30px; 
 | 
            float: left; 
 | 
            margin: 0 5px; 
 | 
            width: 40px; 
 | 
            padding: 0; 
 | 
        } 
 | 
    </style> 
 | 
</head> 
 | 
<body> 
 | 
  
 | 
<div class="form-box"> 
 | 
    <div class="form-item" style="padding-left: 33px;"> 
 | 
        <span>商品编码</span> 
 | 
        <input id="matnr" type="text" placeholder="扫码 / 输入" onkeyup="find(this)" autocomplete="off"> 
 | 
        <button id="selectBtn">选</button> 
 | 
    </div> 
 | 
    <div class="form-item"> 
 | 
        <span>商品名称</span> 
 | 
        <textarea id="maktx" type="text" disabled="disabled"></textarea> 
 | 
        <div style="clear: both"></div> 
 | 
    </div> 
 | 
    <div class="form-item"> 
 | 
        <span>单位</span> 
 | 
        <input id="unit" type="text" disabled="disabled"> 
 | 
    </div> 
 | 
    <div class="form-item"> 
 | 
        <span style="vertical-align: middle">数量</span> 
 | 
        <div class="number-tool" style="vertical-align: middle"> 
 | 
            <button onclick="reduce()">-</button><input id="count" type="number"><button onclick="add()">+</button> 
 | 
        </div> 
 | 
    </div> 
 | 
    <button id="confirm" onclick="confirm()">提取</button> 
 | 
</div> 
 | 
  
 | 
</body> 
 | 
<script> 
 | 
    var layer; 
 | 
    layui.use(['layer'], function() { 
 | 
        layer = layui.layer; 
 | 
    }) 
 | 
    var countDom = $('#count'); 
 | 
    var initMatCount = 1; 
 | 
    var pageCurr; 
 | 
  
 | 
    /** 
 | 
     * 根据商品编码查询商品详情 
 | 
     */ 
 | 
    function find(el){ 
 | 
        if (isEmpty(el.value)) { 
 | 
            return; 
 | 
        } 
 | 
        $.ajax({ 
 | 
            url: baseUrl + "/matCode/auth", 
 | 
            headers: {'token': localStorage.getItem('token')}, 
 | 
            data: { 
 | 
                matnr: el.value 
 | 
            }, 
 | 
            method: 'POST', 
 | 
            success: function (res) { 
 | 
                if (res.code === 200) { 
 | 
                    if (res.data != null) { 
 | 
                        $('#maktx').val(res.data.maktx); 
 | 
                        $('#specs').val(res.data.specs); 
 | 
                        $('#unit').val(res.data.unit); 
 | 
                        countDom.val(initMatCount); 
 | 
                        // $('#count').focus().select(); 
 | 
                    } 
 | 
                } else if (res.code === 403) { 
 | 
                    top.location.href = baseUrl + "/pda"; 
 | 
                } else { 
 | 
                    alert(res.msg) 
 | 
                } 
 | 
            } 
 | 
        }) 
 | 
    } 
 | 
  
 | 
    function findBySelect(el) { 
 | 
        $("#matnr").val(el.value); 
 | 
        find(el); 
 | 
        layer.close(matSelectIdx); 
 | 
  
 | 
    } 
 | 
  
 | 
    /** 
 | 
     * 提取 
 | 
     */ 
 | 
    function confirm(){ 
 | 
        var data = { 
 | 
            matnr: $('#matnr').val(), 
 | 
            maktx: $('#maktx').val(), 
 | 
            count: countDom.val() 
 | 
        }; 
 | 
        parent.addTableData(data); 
 | 
        parent.layer.close(parent.matCodeLayerIdx); 
 | 
    } 
 | 
  
 | 
    window.onload = function(){document.getElementById("matnr").focus();} 
 | 
    var matSelectIdx; 
 | 
    $(document).on('click','#selectBtn', function () { 
 | 
        matSelectIdx = layer.open({ 
 | 
            type: 2, 
 | 
            title: false, 
 | 
            area: ['100%', '100%'], 
 | 
            content: 'selectMat.html', 
 | 
            success: function(layero, index){ 
 | 
                $('.layui-layer-setwin .layui-layer-close2').hide(); 
 | 
            } 
 | 
        }); 
 | 
    }) 
 | 
  
 | 
    // $('body').keydown(function () { 
 | 
    //     if (event.keyCode === 13) { 
 | 
    //         $("#confirm").click(); 
 | 
    //     } 
 | 
    // }); 
 | 
  
 | 
    function add() { 
 | 
        countDom.val(Number(countDom.val()) + 1); 
 | 
    } 
 | 
    function reduce() { 
 | 
        if (countDom.val() <= initMatCount) { 
 | 
            return; 
 | 
        } 
 | 
        countDom.val(countDom.val() - 1); 
 | 
    } 
 | 
  
 | 
  
 | 
    document.onkeyup = function (e) { 
 | 
        if (window.event)//如果window.event对象存在,就以此事件对象为准 
 | 
            e = window.event; 
 | 
        var key = e.charCode || e.keyCode; 
 | 
        if (key === 115) { 
 | 
            confirm(); 
 | 
        } 
 | 
    } 
 | 
  
 | 
</script> 
 | 
</html> 
 |