<!DOCTYPE html> 
 | 
<html lang="en"> 
 | 
<head> 
 | 
    <meta charset="UTF-8"> 
 | 
    <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, 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 5px; 
 | 
            font-size: 16px; 
 | 
            text-align: center; 
 | 
        } 
 | 
  
 | 
        .form-item { 
 | 
            margin-bottom: 10px; 
 | 
        } 
 | 
  
 | 
        .form-box span { 
 | 
            display: inline-block; 
 | 
            text-align: right; 
 | 
            width: 70px; 
 | 
        } 
 | 
        .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; 
 | 
        } 
 | 
  
 | 
        .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; 
 | 
        } 
 | 
  
 | 
        .form-button { 
 | 
            margin: 5px 10px 0 10px; 
 | 
            padding: 5px 15px; 
 | 
        } 
 | 
    </style> 
 | 
</head> 
 | 
<body> 
 | 
<div class="form-box"> 
 | 
    <div class="form-item"> 
 | 
        <span>库位号</span> 
 | 
        <input id="locNo" type="text" disabled="disabled"> 
 | 
    </div> 
 | 
    <div class="form-item"> 
 | 
        <span>商品编号</span> 
 | 
        <input id="matnr" type="text" disabled="disabled"> 
 | 
    </div> 
 | 
    <div class="form-item"> 
 | 
        <span>商品名称</span> 
 | 
        <input id="maktx" 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 class="form-button" id="save" onclick="save()">保存</button> 
 | 
    <button class="form-button" id="remove" onclick="remove()">移除</button> 
 | 
</div> 
 | 
</body> 
 | 
<script> 
 | 
    var countDom = $('#count'); 
 | 
  
 | 
    function save() { 
 | 
        console.log(countDom.val()) 
 | 
        if (countDom.val() < 1) { 
 | 
            return; 
 | 
        } 
 | 
        parent.updateTableData({ 
 | 
            locNo: $('#locNo').val(), 
 | 
            matnr: $('#matnr').val(), 
 | 
            maktx: $('#maktx').val(), 
 | 
            count: countDom.val() 
 | 
        }) 
 | 
        parent.layer.closeAll(); 
 | 
    } 
 | 
  
 | 
    function remove() { 
 | 
        parent.removeTableData({ 
 | 
            locNo: $('#locNo').val(), 
 | 
            matnr: $('#matnr').val(), 
 | 
        }) 
 | 
        parent.layer.closeAll(); 
 | 
    } 
 | 
  
 | 
    function add() { 
 | 
        countDom.val(Number(countDom.val()) + 1); 
 | 
    } 
 | 
    function reduce() { 
 | 
        if (countDom.val() <= 1) { 
 | 
            return; 
 | 
        } 
 | 
        countDom.val(countDom.val() - 1); 
 | 
    } 
 | 
</script> 
 | 
</html> 
 |