|  |  |  | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | <link rel="stylesheet" href="../../static/css/pda.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> | 
|---|
|  |  |  | .layui-input-block { | 
|---|
|  |  |  | margin-left: 60px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | main { | 
|---|
|  |  |  | height: 200px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <!-- 头部 --> | 
|---|
|  |  |  | <header class="layui-form"> | 
|---|
|  |  |  | <div class="layui-input-inline"> | 
|---|
|  |  |  | <label class="layui-form-label">库位</label> | 
|---|
|  |  |  | <div class="layui-input-block"> | 
|---|
|  |  |  | <input class="layui-input" type="number" id="locNo" onkeyup="findByLocNo(this)" autocomplete="off"> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="layui-input-inline"> | 
|---|
|  |  |  | <label class="layui-form-label">物料</label> | 
|---|
|  |  |  | <div class="layui-input-block"> | 
|---|
|  |  |  | <input class="layui-input" type="text" id="matNo" onkeyup="findByMatNo(this)" autocomplete="off"> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="layui-input-inline"> | 
|---|
|  |  |  | <label class="layui-form-label">出库口</label> | 
|---|
|  |  |  | <div class="layui-input-inline" style="margin-left: 5px;width: 120px"> | 
|---|
|  |  |  | <select id="staNoSelect"> | 
|---|
|  |  |  | <option value="">请选择</option> | 
|---|
|  |  |  | </select> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </header> | 
|---|
|  |  |  | <!-- 主体 --> | 
|---|
|  |  |  | <main> | 
|---|
|  |  |  | <table class="layui-table" id="dataByLoc" lay-filter="dataByLoc"></table> | 
|---|
|  |  |  | </main> | 
|---|
|  |  |  | <!-- 尾部 --> | 
|---|
|  |  |  | <footer> | 
|---|
|  |  |  | <div class="layui-btn-container"> | 
|---|
|  |  |  | <button id="reset" type="button" class="layui-btn layui-btn-primary" onclick="reset()">重置</button> | 
|---|
|  |  |  | <button id="pakOut" type="button" class="layui-btn layui-btn-normal" onclick="pakOut()" style="margin-left: 20px">出库</button> | 
|---|
|  |  |  | <span id="tips"></span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </footer> | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | window.onload = function(){ | 
|---|
|  |  |  | document.getElementById("locNo").focus(); | 
|---|
|  |  |  | getOutBound(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 根据库位号查找库存明细 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | function findByLocNo(el){ | 
|---|
|  |  |  | if (isEmpty(el.value)) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $("#matNo").val(""); | 
|---|
|  |  |  | find(el.value, null); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 根据物料号查找库存明细 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | function findByMatNo(el){ | 
|---|
|  |  |  | if (isEmpty(el.value)) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $("#locNo").val(""); | 
|---|
|  |  |  | find(null, el.value); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | function find(locNo, matNo) { | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl + "/mobile/locDetl", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | locNo: locNo, | 
|---|
|  |  |  | matNo: matNo | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | success: function (res) { | 
|---|
|  |  |  | if (res.code === 200) { | 
|---|
|  |  |  | if (res.data != null) { | 
|---|
|  |  |  | locDetlData = res.data; | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $('#pakOut').focus(); | 
|---|
|  |  |  | } else if (res.code === 403) { | 
|---|
|  |  |  | top.location.href = baseUrl + "/pda"; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | locDetlData = []; | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 表格 | 
|---|
|  |  |  | var locDetlData = []; | 
|---|
|  |  |  | var tableIns; | 
|---|
|  |  |  | layui.use(['table','laydate', 'form'], function() { | 
|---|
|  |  |  | var table = layui.table; | 
|---|
|  |  |  | var $ = layui.jquery; | 
|---|
|  |  |  | var layer = layui.layer; | 
|---|
|  |  |  | var form = layui.form; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | tableIns = table.render({ | 
|---|
|  |  |  | id: 'tableIdx', | 
|---|
|  |  |  | elem: '#dataByLoc', | 
|---|
|  |  |  | data: [], | 
|---|
|  |  |  | limit: 500, | 
|---|
|  |  |  | cellMinWidth: 50, | 
|---|
|  |  |  | cols: [[ | 
|---|
|  |  |  | {type: 'checkbox', fixed: 'left', width:30}, | 
|---|
|  |  |  | {field: 'count', align: 'center', title: '数量', event: 'detail', style:'color: blue', width:50}, | 
|---|
|  |  |  | {field: 'matnr', align: 'center', title: '编码', event: 'detail'}, | 
|---|
|  |  |  | {field: 'maktx', align: 'center', title: '名称', event: 'detail'}, | 
|---|
|  |  |  | {field: 'locNo', align: 'center', title: '库位', event: 'detail'} | 
|---|
|  |  |  | ]], | 
|---|
|  |  |  | done: function (res, curr, count) { | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 监听行工具事件 | 
|---|
|  |  |  | table.on('tool(dataByLoc)', function(obj) { | 
|---|
|  |  |  | var data = obj.data; | 
|---|
|  |  |  | switch (obj.event) { | 
|---|
|  |  |  | // 详情 | 
|---|
|  |  |  | case 'detail': | 
|---|
|  |  |  | layer.open({ | 
|---|
|  |  |  | type: 2, | 
|---|
|  |  |  | title: '库存明细', | 
|---|
|  |  |  | shade: [0.3,'#000'], | 
|---|
|  |  |  | area: ['90%', '70%'], | 
|---|
|  |  |  | content: 'locDetlIframe.html', | 
|---|
|  |  |  | success: function(layero, index){ | 
|---|
|  |  |  | // 设置弹窗样式 | 
|---|
|  |  |  | $('.layui-layer-title').css('font-size', '16px'); | 
|---|
|  |  |  | // 注入值 | 
|---|
|  |  |  | let el = layer.getChildFrame('.form-box', index); | 
|---|
|  |  |  | for (var val in data) { | 
|---|
|  |  |  | var find = el.find(":input[id='" + val + "']"); | 
|---|
|  |  |  | find.val(data[val]); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | end: function () { | 
|---|
|  |  |  | $('#pakOut').focus(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | break; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 获取出库口 | 
|---|
|  |  |  | function getOutBound(){ | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl+"/available/take/site", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | async: false, | 
|---|
|  |  |  | success: function (res) { | 
|---|
|  |  |  | if (res.code === 200){ | 
|---|
|  |  |  | var tpl = $("#takeSiteSelectTemplate").html(); | 
|---|
|  |  |  | var template = Handlebars.compile(tpl); | 
|---|
|  |  |  | var html = template(res); | 
|---|
|  |  |  | $('#staNoSelect').append(html); | 
|---|
|  |  |  | layui.form.render('select'); | 
|---|
|  |  |  | } else if (res.code === 403){ | 
|---|
|  |  |  | top.location.href = baseUrl+"/pda"; | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | tips("获取出库口失败", true) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 出库 | 
|---|
|  |  |  | function pakOut() { | 
|---|
|  |  |  | var tableData = layui.table.checkStatus('tableIdx').data; | 
|---|
|  |  |  | if (tableData.length === 0) { | 
|---|
|  |  |  | tips("请选择物料", true); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var site = $('#staNoSelect').val(); | 
|---|
|  |  |  | if (null === site || undefined === site || site === "") { | 
|---|
|  |  |  | tips("请选择出库口", true); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl+"/plate/out/start", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | data: JSON.stringify({ | 
|---|
|  |  |  | outSite: site, | 
|---|
|  |  |  | locDetls: tableData | 
|---|
|  |  |  | }), | 
|---|
|  |  |  | contentType:'application/json;charset=UTF-8', | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | async: false, | 
|---|
|  |  |  | success: function (res) { | 
|---|
|  |  |  | if (res.code === 200) { | 
|---|
|  |  |  | reset(); | 
|---|
|  |  |  | tips("启动出库成功") | 
|---|
|  |  |  | } else if (res.code === 403) { | 
|---|
|  |  |  | top.location.href = baseUrl + "/pda"; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | tips(res.msg, true) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 修改表格数据 | 
|---|
|  |  |  | function updateTableData(data) { | 
|---|
|  |  |  | for (var i=0;i<locDetlData.length;i++) { | 
|---|
|  |  |  | if (data.matnr === locDetlData[i].matnr && data.locNo === locDetlData[i].locNo) { | 
|---|
|  |  |  | locDetlData[i].count = data.count; | 
|---|
|  |  |  | break | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 删除表格行 | 
|---|
|  |  |  | function removeTableData(data) { | 
|---|
|  |  |  | for (var i = locDetlData.length - 1; i >= 0; i--) { | 
|---|
|  |  |  | if (locDetlData[i].locNo === data.locNo && locDetlData[i].matnr === data.matnr) { | 
|---|
|  |  |  | locDetlData.splice(i, 1); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 重置 | 
|---|
|  |  |  | function reset() { | 
|---|
|  |  |  | $("#matNo").val(""); | 
|---|
|  |  |  | $("#locNo").val(""); | 
|---|
|  |  |  | locDetlData = []; | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | $('#staNoSelect').val(""); | 
|---|
|  |  |  | layui.form.render('select'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 提示信息 | 
|---|
|  |  |  | * @param msg 提示内容 | 
|---|
|  |  |  | * @param warn true:红色var字体 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | function tips(msg, warn) { | 
|---|
|  |  |  | layer.msg(msg, {icon: warn?2:1}) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | document.onkeyup = function (e) { | 
|---|
|  |  |  | if (window.event)//如果window.event对象存在,就以此事件对象为准 | 
|---|
|  |  |  | e = window.event; | 
|---|
|  |  |  | var key = e.charCode || e.keyCode; | 
|---|
|  |  |  | if (key === 115) { | 
|---|
|  |  |  | $("#pakOut").focus(); | 
|---|
|  |  |  | pakOut(); | 
|---|
|  |  |  | } else if (key === 113) { | 
|---|
|  |  |  | $("#locNo").val(""); | 
|---|
|  |  |  | $("#locNo").focus(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | <script type="text/template" id="takeSiteSelectTemplate"> | 
|---|
|  |  |  | {{#each data}} | 
|---|
|  |  |  | <option value="{{siteId}}">{{desc}}</option> | 
|---|
|  |  |  | {{/each}} | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | </html> | 
|---|