|  |  |  | 
|---|
|  |  |  | main { | 
|---|
|  |  |  | height: 200px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 状态 */ | 
|---|
|  |  |  | #status { | 
|---|
|  |  |  | padding-left: 2px; | 
|---|
|  |  |  | line-height: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .status-0 { | 
|---|
|  |  |  | color: orange; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .status-1 { | 
|---|
|  |  |  | color: red; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .status-2 { | 
|---|
|  |  |  | color: red; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .status-3 { | 
|---|
|  |  |  | color: green; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 客户 */ | 
|---|
|  |  |  | #custName { | 
|---|
|  |  |  | padding-left: 2px; | 
|---|
|  |  |  | line-height: 30px; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 主体 */ | 
|---|
|  |  |  | main { | 
|---|
|  |  |  | border: 1px solid gainsboro; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | padding-bottom: 15px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | main hr { | 
|---|
|  |  |  | width: 80%; | 
|---|
|  |  |  | margin: 5px 0; | 
|---|
|  |  |  | display: inline-block | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .pakout-item { | 
|---|
|  |  |  | padding: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .item-header { | 
|---|
|  |  |  | text-align: left; | 
|---|
|  |  |  | padding-left: 20px | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .item-content { | 
|---|
|  |  |  | padding: 15px | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <!-- 头部 --> | 
|---|
|  |  |  | <header class="layui-form"> | 
|---|
|  |  |  | <header> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <label class="layui-form-label" style="width: 84px">单据编号</label> | 
|---|
|  |  |  | <input class="layui-input" type="text" id="docNum" onkeyup="findNum(this)" placeholder="扫码 / 输入" autocomplete="off"> | 
|---|
|  |  |  | </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 class="layui-input-inline" style="width: 100%"> | 
|---|
|  |  |  | <label class="layui-form-label" style="width: 84px">状态</label> | 
|---|
|  |  |  | <label id="status" class="layui-form-label status-0">未知</label> | 
|---|
|  |  |  | </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 class="layui-input-inline" style="width: 100%"> | 
|---|
|  |  |  | <label class="layui-form-label" style="width: 84px; padding-top: 0">客户</label> | 
|---|
|  |  |  | <label id="custName" class="layui-form-label" style="padding-top: 0">-</label> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </header> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <!-- 主体 --> | 
|---|
|  |  |  | <main> | 
|---|
|  |  |  | <table class="layui-table" id="dataByLoc" lay-filter="dataByLoc"></table> | 
|---|
|  |  |  | <main id="pakout-box"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </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> | 
|---|
|  |  |  | <button id="confirm" type="button" class="layui-btn layui-btn-normal" onclick="pakoutConfirm()" style="margin-left: 20px">拣货确认</button> | 
|---|
|  |  |  | <button id="tips1" style="outline: none;color: white;border-color: white; position: absolute;right: 0;bottom: 0;"></button> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </footer> | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | var pakoutData = []; | 
|---|
|  |  |  | window.onload = function(){ | 
|---|
|  |  |  | document.getElementById("locNo").focus(); | 
|---|
|  |  |  | getOutBound(); | 
|---|
|  |  |  | document.getElementById("docNum").focus(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 根据库位号查找库存明细 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | function findByLocNo(el){ | 
|---|
|  |  |  | function findNum(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", | 
|---|
|  |  |  | url: baseUrl + "/work/pakout/get", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | locNo: locNo, | 
|---|
|  |  |  | matNo: matNo | 
|---|
|  |  |  | docNumber: el.value | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | async: false, | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | success: function (res) { | 
|---|
|  |  |  | if (res.code === 200) { | 
|---|
|  |  |  | if (res.data != null) { | 
|---|
|  |  |  | locDetlData = res.data; | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | $('#pakout-box').html(""); | 
|---|
|  |  |  | pakoutData = []; | 
|---|
|  |  |  | pakoutData = res.data.pakouts; | 
|---|
|  |  |  | if (pakoutData != null) { | 
|---|
|  |  |  | // 头 | 
|---|
|  |  |  | $('#status').html(res.data.wrkSts$); | 
|---|
|  |  |  | $('#status').attr("class", "layui-form-label status-" + res.data.wrkSts); | 
|---|
|  |  |  | $('#custName').html(res.data.custName); | 
|---|
|  |  |  | // 主 | 
|---|
|  |  |  | var tpl = $("#pakoutDetlTpl").html(); | 
|---|
|  |  |  | var template = Handlebars.compile(tpl); | 
|---|
|  |  |  | var html = template(res.data); | 
|---|
|  |  |  | $('#pakout-box').append(html); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $('#tips1').focus(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $('#pakOut').focus(); | 
|---|
|  |  |  | } else if (res.code === 201) { | 
|---|
|  |  |  | } else if (res.code === 403) { | 
|---|
|  |  |  | top.location.href = baseUrl + "/pda"; | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | locDetlData = []; | 
|---|
|  |  |  | tableIns.reload({data: locDetlData}); | 
|---|
|  |  |  | pakoutData = []; | 
|---|
|  |  |  | tips(res.msg, true); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 表格 | 
|---|
|  |  |  | var locDetlData = []; | 
|---|
|  |  |  | var tableIns; | 
|---|
|  |  |  | layui.use(['table','laydate', 'form'], function() { | 
|---|
|  |  |  | var table = layui.table; | 
|---|
|  |  |  | layui.use(['laydate', 'form'], function() { | 
|---|
|  |  |  | 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 pakoutConfirm() { | 
|---|
|  |  |  | layer.confirm('确认拣货完成?', {shadeClose: true}, function(){ | 
|---|
|  |  |  | if (pakoutData == null || pakoutData.length === 0) { | 
|---|
|  |  |  | tips("请确认单据编号!", true); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | var docNum = pakoutData[0].docNum; | 
|---|
|  |  |  | if (isEmpty(docNum)) { | 
|---|
|  |  |  | tips("请确认单据编号!", true); | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | $.ajax({ | 
|---|
|  |  |  | url: baseUrl+"/work/stock/out/confirm", | 
|---|
|  |  |  | headers: {'token': localStorage.getItem('token')}, | 
|---|
|  |  |  | data: JSON.stringify({ | 
|---|
|  |  |  | orderNo: docNum | 
|---|
|  |  |  | }), | 
|---|
|  |  |  | contentType:'application/json;charset=UTF-8', | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | 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 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(""); | 
|---|
|  |  |  | $("#docNum").val(""); | 
|---|
|  |  |  | $('#status').html("未知"); | 
|---|
|  |  |  | $('#status').attr("class", "layui-form-label status-0"); | 
|---|
|  |  |  | $('#custName').html("-"); | 
|---|
|  |  |  | $('#pakout-box').html(""); | 
|---|
|  |  |  | pakoutData = []; | 
|---|
|  |  |  | document.getElementById("docNum").focus(); | 
|---|
|  |  |  | layui.form.render('select'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | 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(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // document.onkeyup = function (e) { | 
|---|
|  |  |  | //     if (window.event)//如果window.event对象存在,就以此事件对象为准 | 
|---|
|  |  |  | //         e = window.event; | 
|---|
|  |  |  | //     var key = e.charCode || e.keyCode; | 
|---|
|  |  |  | //     if (key === 115) { | 
|---|
|  |  |  | //         $("#confirm").focus(); | 
|---|
|  |  |  | //         pakoutConfirm(); | 
|---|
|  |  |  | //     } else if (key === 113) { | 
|---|
|  |  |  | //         $("#docNum").val(""); | 
|---|
|  |  |  | //         $("#docNum").focus(); | 
|---|
|  |  |  | //     } | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | <script type="text/template" id="takeSiteSelectTemplate"> | 
|---|
|  |  |  | {{#each data}} | 
|---|
|  |  |  | <option value="{{siteId}}">{{desc}}</option> | 
|---|
|  |  |  | <script type="text/template" id="pakoutDetlTpl"> | 
|---|
|  |  |  | {{#each pakouts}} | 
|---|
|  |  |  | <hr> | 
|---|
|  |  |  | <div class="pakout-item"> | 
|---|
|  |  |  | <div class="item-header"> | 
|---|
|  |  |  | {{maktx}} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item-content"> | 
|---|
|  |  |  | <div style="float: left">{{anfme}}{{unit}}</div> | 
|---|
|  |  |  | <div style="float: right">货位:{{locNo}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | {{/each}} | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | </html> | 
|---|