<!DOCTYPE html>
|
<html lang="en">
|
<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, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all">
|
<link rel="stylesheet" href="../../static/css/cool.css" media="all">
|
<link rel="stylesheet" href="../../static/css/common.css" media="all">
|
<style>
|
body {
|
}
|
|
.layui-table-box {
|
border-right: 1px solid #9F9F9F;
|
border-left: 1px solid #9F9F9F;
|
}
|
|
#search-box {
|
padding: 30px 0 20px 0;
|
}
|
|
#search-box .layui-inline:first-child {
|
margin-left: 30px;
|
}
|
|
#search-box .layui-inline {
|
margin-right: 5px;
|
}
|
|
#data-search-btn {
|
margin-left: 10px;
|
display: inline-block;
|
}
|
|
#data-search-btn.layui-btn-container .layui-btn {
|
margin-right: 20px;
|
}
|
.fixed-header {
|
position: sticky;
|
top: 0;
|
z-index: 999;
|
padding: 25px;
|
line-height: 22px;
|
background-color: #393D49;
|
color: #fff;
|
font-weight: 300;
|
}
|
.total-count {
|
display: inline-block;
|
margin-left: 20px;
|
padding: 5px 15px;
|
background: #1E9FFF;
|
border-radius: 4px;
|
font-weight: bold;
|
color: #fff;
|
}
|
|
/* 为订单数量单独设置样式 */
|
#orderTotal {
|
color: #5FB878; /* 绿色表示订单数量 */
|
font-weight: bold;
|
}
|
|
/* 已选数量正常样式 */
|
#selectedTotal {
|
color: #fff;
|
font-weight: bold;
|
}
|
|
/* 已选数量超过订单数量时的警告样式 */
|
.over-limit #selectedTotal {
|
color: #FF5722 !important; /* 红色警告 */
|
}
|
</style>
|
</head>
|
<body>
|
<div class="fixed-header">
|
<span style="font-size: large; font-weight: bold">提取库存商品</span>
|
<!-- 修改：订单数量使用相同样式 -->
|
<span class="total-count">订单数量: <span id="orderTotal">0</span></span>
|
<span class="total-count">已选数量: <span id="selectedTotal">0</span></span>
|
</div>
|
<!-- 搜索栏 -->
|
<fieldset class="layui-elem-field site-demo-button" style="margin: 20px;">
|
<legend>搜索栏</legend>
|
<!-- 搜索栏 -->
|
<div id="search-box" class="layui-form layui-card-header">
|
<div class="layui-inline">
|
<div class="layui-input-inline">
|
<input class="layui-input" id="matnr" type="text" name="matnr" placeholder="商品编号"
|
autocomplete="off">
|
</div>
|
</div>
|
<div class="layui-inline">
|
<div class="layui-input-inline cool-auto-complete">
|
<input id="crnNo" class="layui-input" name="crnNo" type="text" placeholder="请输入" autocomplete="off"
|
style="display: none">
|
<input id="crnNo$" class="layui-input cool-auto-complete-div" onclick="autoShow(this.id)" type="text"
|
placeholder="堆垛机号" onfocus=this.blur()>
|
<div class="cool-auto-complete-window">
|
<input class="cool-auto-complete-window-input" data-key="basCrnpQueryBycrnNo"
|
onkeyup="autoLoad(this.getAttribute('data-key'))">
|
<select class="cool-auto-complete-window-select" data-key="basCrnpQueryBycrnNoSelect"
|
onchange="confirmed(this.getAttribute('data-key'))" multiple="multiple">
|
</select>
|
</div>
|
</div>
|
</div>
|
<div class="layui-inline">
|
<div class="layui-input-inline">
|
<input class="layui-input" type="text" name="loc_no" placeholder="库位号" autocomplete="off">
|
</div>
|
</div>
|
|
<div class="layui-inline">
|
<div class="layui-input-inline">
|
<input class="layui-input" type="text" name="orderNo" placeholder="订单编号" autocomplete="off">
|
</div>
|
</div>
|
<div class="layui-inline">
|
<div class="layui-input-inline">
|
<input class="layui-input" type="text" name="batch" placeholder="批号" autocomplete="off">
|
</div>
|
</div>
|
<div class="layui-input-inline" style="margin-right: 100px;">
|
<div id="condition" name="condition">
|
|
</div>
|
</div>
|
<!-- 日期范围 -->
|
<div class="layui-inline" style="width: 300px">
|
<div class="layui-input-inline">
|
<input class="layui-input layui-laydate-range" name="appe_time" type="text"
|
placeholder="起始时间 - 终止时间" autocomplete="off" style="width: 300px">
|
</div>
|
</div>
|
<!-- 待添加 -->
|
<div id="data-search-btn" class="layui-btn-container layui-form-item" style="display: inline-block">
|
<button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">
|
搜索
|
</button>
|
</div>
|
</div>
|
</fieldset>
|
|
<script type="text/html" id="toolbar">
|
<div class="layui-btn-container">
|
<button class="layui-btn" id="btn-confirm" lay-event="confirm" style="">提取</button>
|
</div>
|
</script>
|
|
<div class="layui-form">
|
<table class="layui-hide" id="stockOut" lay-filter="stockOut"></table>
|
</div>
|
|
<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>
|
|
</body>
|
|
<script type="text/html" id="pakoutPreviewBox" style="display: none">
|
<div style="padding: 25px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">
|
<span style="font-size: large; font-weight: bold">出库预览</span>
|
</div>
|
<div class="layui-card">
|
<div class="layui-card-body" style="padding: 10px">
|
<table id="stoPreTab1" lay-filter="stoPreTab1"></table>
|
</div>
|
<button class="layui-btn layui-btn-primary layui-border-black layui-btn-sm" lay-filter="batchModifySta"
|
lay-submit style="display: block;float: right;margin-right: 1rem">
|
批量修改
|
</button>
|
</div>
|
</script>
|
|
<script type="text/html" id="tbBasicTbStaNos">
|
<div class="ew-select-fixed">
|
<select class="order-sta-select" lay-filter="tbBasicTbStaNos">
|
{{#if (d.staNos!=null) {}}
|
{{# for(let i=0; i < d.staNos.length; i++) { }}
|
<option value="{{d.staNos[i]}}" {{d.staNos[i] == d.staNo ? 'selected' : ''}}>{{d.staNos[i]}}</option>
|
{{# } }}
|
{{# } }}
|
</select>
|
</div>
|
</script>
|
|
<script>
|
var conditionXmSelect;
|
function getCol() {
|
var cols = [
|
{type: 'checkbox'}
|
, {field: 'locNo', align: 'center', title: '库位号', merge: true, style: 'font-weight: bold'}
|
// ,{field: 'locNo$', align: 'center',title: '库位号'}
|
];
|
cols.push.apply(cols, detlCols);
|
cols.push({field: 'appeUser$', align: 'center', title: '创建人员', hide: true}
|
, {field: 'appeTime$', align: 'center', title: '创建时间'})
|
return cols;
|
}
|
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).extend({
|
notice: 'notice/notice',
|
})
|
.use(['table', 'notice', 'laydate', 'form', 'admin', 'tableMerge','xmSelect'], function () {
|
var table = layui.table;
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var layDate = layui.laydate;
|
var form = layui.form;
|
var admin = layui.admin;
|
var tableMerge = layui.tableMerge;
|
var notice = layui.notice;
|
var dataSource = [];
|
var xmSelect = layui.xmSelect;
|
|
$('#matnr').val(parent.matnR);
|
$('#anfme').val(parent.anfme);
|
var id = parent.ID[0];
|
|
// 存储当前选中的数量和订单总数
|
var selectedTotal = 0;
|
var orderTotal = parseFloat(parent.anfme) || 0;
|
|
// 更新显示选中的数量
|
function updateSelectedTotal() {
|
$('#selectedTotal').text(selectedTotal);
|
$('#orderTotal').text(orderTotal); // 更新订单数量显示
|
|
// 如果选中的数量超过订单数量，显示警告样式
|
if (selectedTotal > orderTotal) {
|
$('#selectedTotal').parent().addClass('over-limit');
|
} else {
|
$('#selectedTotal').parent().removeClass('over-limit');
|
}
|
|
// 如果订单数量为0，显示完成状态
|
if (orderTotal <= 0) {
|
$('#orderTotal').parent().addClass('order-completed');
|
layer.msg('订单已完成！', {icon: 1, time: 3000});
|
|
} else {
|
$('#orderTotal').parent().removeClass('order-completed');
|
}
|
}
|
|
// 数据渲染
|
locDetlTableIns = table.render({
|
elem: '#stockOut',
|
headers: {token: localStorage.getItem('token')},
|
url: baseUrl + '/stock/out/list/auth',
|
where: {matnr: parent.matnR[0]},
|
page: true,
|
limits: [16, 30, 50, 100, 200, 500],
|
limit: 16,
|
even: true,
|
toolbar: '#toolbar',
|
cellMinWidth: 50,
|
cols: [getCol()],
|
request: {
|
pageName: 'curr',
|
pageSize: 'limit'
|
},
|
parseData: function (res) {
|
return {
|
'code': res.code,
|
'msg': res.msg,
|
'count': res.data.total,
|
'data': res.data.records
|
}
|
},
|
response: {
|
statusCode: 200
|
},
|
done: function (res, curr, count) {
|
tableMerge.render(this);
|
if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
}
|
// 初始化选中数量
|
selectedTotal = 0;
|
updateSelectedTotal();
|
}
|
});
|
|
conditionXmSelect = xmSelect.render({
|
el: '#condition',
|
style: {
|
width: '200px',
|
},
|
autoRow: true,
|
toolbar: {show: true},
|
filterable: true,
|
data: [
|
{
|
name: '成品智能立库',
|
value: '成品智能立库'
|
},
|
{
|
name: '特采智能立库',
|
value: '特采智能立库'
|
},
|
{
|
name: '南通延锋特采立库',
|
value: '南通延锋特采立库'
|
},
|
{
|
name: '昆山嘉驭特采立库',
|
value: '昆山嘉驭特采立库'
|
},
|
{
|
name: '安徽鸿瑞达特采立库',
|
value: '安徽鸿瑞达特采立库'
|
},
|
{
|
name: '上海金智达特采立库',
|
value: '上海金智达特采立库'
|
},
|
{
|
name: '沈阳继峰特采立库',
|
value: '沈阳继峰特采立库'
|
},
|
{
|
name: '沈阳延峰特采立库',
|
value: '沈阳延峰特采立库'
|
}
|
]
|
})
|
// 监听复选框选择事件
|
table.on('checkbox(stockOut)', function(obj){
|
var data = obj.data;
|
var checked = obj.checked;
|
var type = obj.type;
|
|
if (type === 'one') {
|
// 单个选择
|
if (checked) {
|
selectedTotal += parseFloat(data.anfme || 0);
|
} else {
|
selectedTotal -= parseFloat(data.anfme || 0);
|
}
|
} else if (type === 'all') {
|
// 全选
|
var checkStatus = table.checkStatus('stockOut');
|
if (checked) {
|
// 计算当前页所有数据的数量总和
|
checkStatus.data.forEach(function(item){
|
selectedTotal += parseFloat(item.anfme || 0);
|
});
|
} else {
|
// 取消全选，减去当前页所有数据的数量总和
|
checkStatus.data.forEach(function(item){
|
selectedTotal -= parseFloat(item.anfme || 0);
|
});
|
}
|
}
|
|
updateSelectedTotal();
|
|
// 如果选中的数量超过订单数量，给出提示
|
if (selectedTotal > orderTotal) {
|
layer.msg('警告：选中的数量已超过订单数量！', {icon: 2, time: 3000});
|
}
|
});
|
|
// 监听头工具栏事件
|
table.on('toolbar(stockOut)', function (obj) {
|
var checkStatus = table.checkStatus(obj.config.id);
|
var data = checkStatus.data;
|
var dataList = []
|
for (var j = 0; j < data.length; j++) {
|
var locno = data[j].locNo
|
for(var i = 0;i < dataSource.length; i++) {
|
if (dataSource[i].locNo === locno) {
|
dataList.push(dataSource[i])
|
}
|
}
|
}
|
console.log("dataList"+dataList)
|
switch(obj.event) {
|
case 'confirm':
|
if (data.length === 0){
|
layer.msg("请选择数据");
|
return;
|
}
|
parent.addTableData(data);
|
break;
|
}
|
// var checkStatus = table.checkStatus(obj.config.id);
|
// var data = checkStatus.data;
|
// switch (obj.event) {
|
// case 'confirm':
|
// if (data.length === 0) {
|
// layer.msg("请选择数据");
|
// return;
|
// }
|
// // 检查选中的数量是否超过订单数量
|
// if (selectedTotal > orderTotal) {
|
// layer.confirm('选中的数量已超过订单数量，是否继续？', {
|
// icon: 3,
|
// title: '警告'
|
// }, function(index){
|
// layer.close(index);
|
// pakoutPreview(id, data);
|
// });
|
// } else {
|
// pakoutPreview(id, data);
|
// }
|
// break;
|
// }
|
});
|
|
// 搜索栏搜索事件
|
form.on('submit(search)', function (data) {
|
tableReload();
|
});
|
|
layDate.render({
|
elem: '.layui-laydate-range'
|
, type: 'datetime'
|
, range: true
|
});
|
|
function tableReload() {
|
var searchData = {};
|
$.each($('#search-box [name]').serializeArray(), function () {
|
searchData[this.name] = this.value;
|
});
|
locDetlTableIns.reload({
|
where: searchData,
|
});
|
// 重置选中数量
|
selectedTotal = 0;
|
updateSelectedTotal();
|
}
|
|
function pakoutPreview(id, data) {
|
console.log("id=" + id)
|
let loadIndex = layer.load(2);
|
var da = {
|
"id": JSON.stringify(id),
|
"list": data
|
}
|
$.ajax({
|
url: baseUrl + "/out/pakout/preview/auth1",
|
headers: {'token': localStorage.getItem('token')},
|
contentType: 'application/json;charset=UTF-8',
|
data: JSON.stringify(da),
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
var tableCache;
|
if (res.code === 200) {
|
layer.open({
|
type: 1
|
, title: false
|
, closeBtn: false
|
, offset: '50px'
|
, area: ['1200px', '700px']
|
, shade: 0.5
|
, shadeClose: false
|
, btn: ['立即出库', '稍后处理']
|
, btnAlign: 'c'
|
, moveType: 1 //拖拽模式，0或者1
|
, content: $('#pakoutPreviewBox').html()
|
, success: function (layero, index) {
|
res.data.forEach((item, index) => {
|
console.log(`项 ${index + 1}:`, item);
|
});
|
stoPreTabIdx = table.render({
|
elem: '#stoPreTab1',
|
data: res.data,
|
height: 520,
|
page: false,
|
limit: Number.MAX_VALUE,
|
cellMinWidth: 100,
|
cols: [[
|
// {type: 'checkbox', merge: ['orderNo']},
|
{field: 'orderNo', title: '单据编号', merge: true, align: 'center'},
|
{field: 'title', title: '商品', merge: true, align: 'center', width: 350},
|
{field: 'batch', title: '批号', align: 'center'},
|
{
|
field: 'anfme',
|
title: '数量',
|
align: 'center',
|
width: 90,
|
style: 'font-weight: bold'
|
},
|
{
|
field: 'locNo',
|
title: '货位',
|
align: 'center',
|
width: 100,
|
templet: '#locNoTpl'
|
},
|
{
|
field: 'staNos',
|
align: 'center',
|
title: '出库站',
|
merge: ['locNo'],
|
templet: '#tbBasicTbStaNos'
|
},
|
{type: 'checkbox', merge: ['locNo']},
|
]],
|
done: function (res) {
|
tableMerge.render(this);
|
$('.layui-table-body.layui-table-main').css("overflow", "auto");
|
tableCache = tableData = table.cache.stoPreTab1;
|
}
|
});
|
// 修改出库站
|
form.on('select(tbBasicTbStaNos)', function (obj) {
|
let index = obj.othis.parents('tr').attr("data-index");
|
let data = tableCache[index];
|
for (let i = 0; i < tableCache.length; i++) {
|
if (tableCache[i].locNo === data.locNo) {
|
tableCache[i]['staNo'] = obj.elem.value;
|
}
|
}
|
obj.othis.children().find("input").css("color", "blue");
|
return false;
|
});
|
// 批量修改出库站
|
form.on('submit(batchModifySta)', function () {
|
let stoPreTabData = layui.table.checkStatus('stoPreTab1').data;
|
if (stoPreTabData.length < 1) {
|
layer.msg("请至少选择一条以上合并数据", {icon: 7});
|
return false;
|
}
|
modifySta(stoPreTabData);
|
});
|
|
// 批量修改出库站 - 站点选择
|
function modifySta(stoPreTabData) {
|
// 出库站取交集
|
let staBatchSelectVal = [];
|
for (let i = 0; i < stoPreTabData.length; i++) {
|
let staNos = stoPreTabData[i].staNos;
|
if (staNos !== null) {
|
if (staBatchSelectVal.length === 0) {
|
staBatchSelectVal = staNos;
|
} else {
|
staBatchSelectVal = staBatchSelectVal.filter(val => {
|
return new Set(staNos).has(val)
|
}
|
)
|
}
|
}
|
}
|
if (staBatchSelectVal.length === 0) {
|
layer.msg("出库站没有交集，无法批量修改", {icon: 2});
|
return;
|
}
|
admin.open({
|
type: 1,
|
area: '300px',
|
offset: 'auto',
|
title: '请选择站点',
|
content: $('#staBatchSelectDialog').html(),
|
success: function (layero, ddIndex) {
|
// 渲染下拉框
|
let template = Handlebars.compile($('#batchStaSelectTpl').html());
|
$('#batchSelectStaBox').html(template({list: staBatchSelectVal}));
|
// 确认
|
form.on('submit(staBatchSelectConfirm)', function (obj) {
|
let loadIdx = layer.load(2);
|
let batchSta = obj.field.batchSta;
|
let arr = [];
|
for (let j = 0; j < stoPreTabData.length; j++) {
|
for (let i = 0; i < tableCache.length; i++) {
|
if (tableCache[i].orderNo === stoPreTabData[j].orderNo
|
&& tableCache[i].matnr === stoPreTabData[j].matnr
|
&& tableCache[i].locNo === stoPreTabData[j].locNo) {
|
tableCache[i]['staNo'] = batchSta;
|
arr.push(i);
|
}
|
}
|
}
|
stoPreTabIdx.reload({data: tableCache});
|
arr.forEach(item => {
|
$('div[lay-id=stoPreTab1] tr[data-index="' + item + '"] .order-sta-select').val(batchSta);
|
});
|
layui.form.render('select');
|
arr.forEach(item => {
|
$('div[lay-id=stoPreTab1] tr[data-index="' + item + '"] .layui-select-title').find("input").css("color", "blue");
|
});
|
layer.close(loadIdx);
|
layer.close(ddIndex);
|
return false;
|
});
|
// 弹窗不出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
layui.form.render('select');
|
},
|
})
|
}
|
|
}
|
, yes: function (index, layero) {
|
//按钮【立即出库】的回调
|
pakout(tableCache, index);
|
}
|
, btn2: function (index, layero) {
|
//按钮【稍后处理】的回调
|
layer.close(index)
|
//return false 开启该代码可禁止点击该按钮关闭
|
}
|
});
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
})
|
}
|
|
function pakout(tableCache, layerIndex) {
|
// let loadIndex = layer.load(2);
|
notice.msg('正在生成出库任务......', {icon: 4});
|
$.ajax({
|
url: baseUrl + "/out/pakout/auth",
|
headers: {'token': localStorage.getItem('token')},
|
contentType: 'application/json;charset=UTF-8',
|
data: JSON.stringify(tableCache),
|
method: 'POST',
|
success: function (res) {
|
notice.destroy();
|
if (res.code === 200) {
|
layer.close(layerIndex);
|
|
console.log("orderTotal="+orderTotal);
|
// 扣减订单数量
|
orderTotal = Math.max(0, orderTotal - selectedTotal);
|
console.log("selectedTotal="+selectedTotal);
|
console.log("orderTotal-selectedTotal="+orderTotal);
|
|
layer.msg('出库成功！扣减 ' + selectedTotal + ' 数量', {icon: 1, time: 1000}, function(){
|
// 刷新当前页面表格
|
locDetlTableIns.reload({
|
where: {matnr: parent.matnR[0]},
|
page: {curr: 1}
|
});
|
|
// 更新显示
|
updateSelectedTotal();
|
|
// 如果有父页面表格也需要刷新
|
try {
|
if (parent.insTb) {
|
parent.insTb.close();
|
}
|
if (parent.insTb2) {
|
parent.insTb2.reload({page: {curr: 1}});
|
}
|
// 更新父页面的订单数量（如果需要）
|
if (parent.updateOrderTotal) {
|
parent.updateOrderTotal(orderTotal);
|
}
|
} catch (e) {
|
console.log('父页面表格刷新失败:', e);
|
}
|
});
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
});
|
}
|
|
window.pakoutPreview = pakoutPreview;
|
})
|
</script>
|
</html>
|
