You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
473 lines
20 KiB
473 lines
20 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<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/lib/layui-v2.8.6/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="/static/css/public.css" media="all">
|
|
<link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all">
|
|
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
|
<link rel="stylesheet" href="/static/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
|
|
|
|
<style>
|
|
.editButton {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 15px;
|
|
|
|
}
|
|
|
|
.myEchart {
|
|
min-width: 500px;
|
|
min-height: 500px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="text" id="id" th:value="${record.getId()}" name="id" style="display: none">
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space1">
|
|
<div class="layui-row layui-col-xs12 layui-col-md8">
|
|
<div>
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">物料基本信息
|
|
<button type="button" th:attr="mid=${record.getMid()}" lay-on="editMaterialInfo"
|
|
th:style="'display:'+${display}"
|
|
class="editButton layui-btn layui-btn-sm layui-btn-primary">
|
|
<i class="layui-icon layui-icon-edit"></i>
|
|
</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<table class="table">
|
|
<tbody>
|
|
<tr>
|
|
<td th:text="'物料编码：'+${record.getCode()}">物料编码：</td>
|
|
<td th:text="'物料名称：'+${record.getMname()}">物料名称：</td>
|
|
<td th:text="'规格型号：'+${record.getVersion()}">规格型号：</td>
|
|
<td th:text="'物料材质：'+${record.getTexture()}">物料材质：</td>
|
|
</tr>
|
|
<tr>
|
|
<td th:text="'物料品牌：'+${record.getBrand()}">物料品牌：</td>
|
|
<td th:text="'物料类型：'+${record.getTypeName()}">物料类型：</td>
|
|
<td>
|
|
计量单位：
|
|
<span th:text="${record.getUnit()}"></span>
|
|
<span th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
|
|
th:text="${splitInfo.getNewUnit()}"></span>
|
|
</td>
|
|
<td th:text="'物料单价：'+${record.getPrice()}" th:style="'display:'+${display}">物料单价：</td>
|
|
</tr>
|
|
<tr>
|
|
<td th:text="'物料备注：'+${record.getIremark()}">物料备注：</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">数据图标
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="layui-col-xs4 myEchart">
|
|
<div class="panel panel-warning">
|
|
<div class="panel-heading">物料入库明细</div>
|
|
<div class="panel-body">
|
|
<div id="echarts-line-in" style="height:500px;width: 500px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs4 myEchart">
|
|
<div class="panel panel-warning">
|
|
<div class="panel-heading">物料出库明细</div>
|
|
<div class="panel-body">
|
|
<div id="echarts-line-out" style="height: 500px;width: 500px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs4 myEchart">
|
|
<div class="panel panel-warning">
|
|
<div class="panel-heading">物料库存明细</div>
|
|
<div class="panel-body">
|
|
<div id="echarts-line-inventory" style="height: 500px;width: 500px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md4">
|
|
<div class="">
|
|
<div class="panel panel-success">
|
|
<div class="panel-heading">库存基本信息</div>
|
|
<div class="panel-body">
|
|
|
|
<table class="table">
|
|
<caption th:text="${record.getDepositoryName()}">所属仓库：</caption>
|
|
<caption th:text="'备注：'+${record.getIremark()}">备注：</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<td>所处库位</td>
|
|
<td>计量单位</td>
|
|
<td>对应数量</td>
|
|
<td th:style="'display:'+${display}">金额</td>
|
|
<td>操作</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr type="button"
|
|
th:each="materialAndPlace,iterStar:${record.getMaterialAndPlaceList()}">
|
|
<td>
|
|
<button onclick="changePlaceCode(this)"
|
|
th:text="${materialAndPlace.getKingdeecode()}"
|
|
th:attr="id=${materialAndPlace.getId()}"
|
|
class="layui-btn layui-btn-primary layui-btn-sm"></button>
|
|
</td>
|
|
<td>
|
|
<select class="mySelect" onchange="changeUnitForQuantity(this)"
|
|
th:attr="id='materialUnit'+${materialAndPlace.getId()}">
|
|
<option th:text="${record.getUnit()}" value="-1"
|
|
class="myOption"></option>
|
|
<option class="myOption"
|
|
th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
|
|
th:value="${splitInfo.getNewUnit()}"
|
|
th:text="${splitInfo.getNewUnit()}"></option>
|
|
</select>
|
|
|
|
</td>
|
|
<td>
|
|
<span th:attr="id='quantity'+${materialAndPlace.getId()}"
|
|
th:text="${materialAndPlace.getInventory()}"></span>
|
|
</td>
|
|
<td th:style="'display:'+${display}">
|
|
<span th:attr="id='amounts'+${materialAndPlace.getId()}"
|
|
th:text="${materialAndPlace.getAmount()}"></span>
|
|
</td>
|
|
<td>
|
|
<a class="layui-btn layui-btn-xs"
|
|
th:attr="mid=${materialAndPlace.getIid()},depositoryId=${materialAndPlace.getDepository_id()},placeId=${materialAndPlace.getPid()}"
|
|
lay-on="applicationIn">入库</a>
|
|
<a class="layui-btn layui-btn-xs"
|
|
th:attr="code=${materialAndPlace.getMcode()},depositoryId=${materialAndPlace.getDepository_id()}"
|
|
lay-on="applicationOut">出库</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script>
|
|
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
|
|
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script>
|
|
<script>
|
|
|
|
function updateInventoryRemark() {
|
|
|
|
}
|
|
|
|
function changePlaceCode() {
|
|
}
|
|
|
|
function changeUnitForQuantity() {
|
|
|
|
}
|
|
|
|
|
|
var barCode = [];
|
|
var flag = false;
|
|
layui.use(['form', 'laydate', 'util'], function () {
|
|
var form = layui.form,
|
|
laydate = layui.laydate,
|
|
$ = layui.$,
|
|
util = layui.util;
|
|
let iremark = $("#iremark").val();
|
|
let id = $("#id").val();
|
|
|
|
form.on('select()', function (data) {
|
|
var id = data.elem.id; //得到select原始DOM对象id
|
|
var req = {};
|
|
req.id = $("#id").val();
|
|
req.unit = data.value;
|
|
$.ajax({
|
|
url: "/material/findSplitInventoryByUnit",
|
|
type: "post",
|
|
dataType: 'json',
|
|
data: JSON.stringify(req),
|
|
contentType: "application/json;charset=utf-8",
|
|
success: function (d) {
|
|
$("#quantity").val(d.data)
|
|
}
|
|
});
|
|
});
|
|
|
|
util.on('lay-on', {
|
|
'editMaterialInfo': function (obj) {
|
|
let mid = $(obj).attr("mid");
|
|
layer.open({
|
|
type: 2,
|
|
offset: 'r',
|
|
anim: 'slideLeft', // 从右往左
|
|
area: ['40%', '100%'],
|
|
shade: 0.1,
|
|
title: "物料详情",
|
|
shadeClose: true,
|
|
id: 'ID-demo-layer-direction-r',
|
|
content: '/materialEditForInventory?id=' + mid,
|
|
end: function () {
|
|
location.reload();
|
|
}
|
|
|
|
});
|
|
},
|
|
'applicationIn': function (obj) {
|
|
let mid = $(obj).attr('mid');
|
|
let depositoryId = $(obj).attr('depositoryId');
|
|
let placeId = $(obj).attr('placeId');
|
|
layer.open({
|
|
type: 2,
|
|
offset: 'r',
|
|
anim: 'slideLeft', // 从右往左
|
|
area: ['40%', '100%'],
|
|
shade: 0.1,
|
|
title: "入库申请",
|
|
shadeClose: true,
|
|
id: 'ID-demo-layer-direction-r',
|
|
content: '/application_in_back?mid=' + mid + "&depositoryId=" + depositoryId + "&placeId=" + placeId
|
|
});
|
|
},
|
|
'applicationOut': function (obj) {
|
|
let code = $(obj).attr('code');
|
|
let depositoryId = $(obj).attr('depositoryId');
|
|
layer.open({
|
|
type: 2,
|
|
offset: 'r',
|
|
anim: 'slideLeft', // 从右往左
|
|
area: ['40%', '100%'],
|
|
shade: 0.1,
|
|
title: "出库申请",
|
|
shadeClose: true,
|
|
id: 'ID-demo-layer-direction-r',
|
|
content: '/application_out_back?code=' + code + "&depositoryId=" + depositoryId
|
|
});
|
|
},
|
|
});
|
|
|
|
updateInventoryRemark = function () {
|
|
let newIremark = $("#iremark").val();
|
|
let index = layer.confirm('确认更改备注？', {
|
|
btn: ['确定', '取消'] //按钮
|
|
}, function () {
|
|
let req = {};
|
|
req.id = id;
|
|
req.remark = newIremark;
|
|
$.ajax({
|
|
url: "/material/updateInventoryRemark",
|
|
type: "post",
|
|
dataType: 'json',
|
|
data: JSON.stringify(req),
|
|
contentType: "application/json;charset=utf-8",
|
|
success: function (data) {
|
|
if (data.status >= 300) {
|
|
layer.msg(data.statusInfo.message, {
|
|
icon: 5,//失败的表情
|
|
time: 500 //1秒关闭（如果不配置，默认是3秒）
|
|
}, function () {
|
|
layer.close(index);
|
|
});
|
|
} else {
|
|
layer.msg("修改成功", {
|
|
icon: 6,//成功的表情
|
|
time: 500 //1秒关闭（如果不配置，默认是3秒）
|
|
}, function () {
|
|
layer.close(index);
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}, function () {
|
|
$("#iremark").val(iremark);
|
|
});
|
|
};
|
|
|
|
// 用于更改同一仓库下的库位
|
|
changePlaceCode = function (obj) {
|
|
var id = $(obj).attr("id");
|
|
// 当前点击行中的计量单位按钮
|
|
let materialUnitObj = $("#materialUnit" + id + " option:selected");
|
|
let unit = materialUnitObj.val();
|
|
if (unit === -1 || unit === "-1") {
|
|
unit = materialUnitObj.text();
|
|
}
|
|
unit = unit.trim();
|
|
layer.open({
|
|
title: '选择库位',
|
|
type: 2,
|
|
shade: 0.2,
|
|
maxmin: true,
|
|
shadeClose: true,
|
|
area: ['70%', '70%'],
|
|
content: '/selectPlaceByDepositoryForInventory?id=' + id + '&unit=' + unit,
|
|
success: function (layero, index) {
|
|
var children = layero.children();
|
|
var content = $(children[1]);
|
|
var iframeChildren = $(content.children());
|
|
content.css('height', '100%');
|
|
iframeChildren.css('height', '100%');
|
|
},
|
|
end: function () {
|
|
location.reload();
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
/**
|
|
* 用于修改展示的库存数量
|
|
* @param obj
|
|
*/
|
|
changeUnitForQuantity = function (obj) {
|
|
let materialUnitObj = $(obj);
|
|
let req = {};
|
|
req.unit = materialUnitObj.val();
|
|
let id = materialUnitObj.attr("id").split("materialUnit")[1].trim();
|
|
req.id = id;
|
|
$.ajax({
|
|
url: "/material/getQuantityForLocationAndUnit",
|
|
type: "post",
|
|
dataType: 'json',
|
|
data: JSON.stringify(req),
|
|
contentType: "application/json;charset=utf-8",
|
|
success: function (res) {
|
|
let data = res.data;
|
|
$("#quantity" + id).text(data.quantity);
|
|
$("#amounts" + id).text(data.amount);
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
|
|
// 柱状图
|
|
var echartLineChartIn = echarts.init(document.getElementById('echarts-line-in'));
|
|
var echartLineChartOut = echarts.init(document.getElementById('echarts-line-out'));
|
|
var echartLineChartInventory = echarts.init(document.getElementById('echarts-line-inventory'));
|
|
var optionLineChartIn = {
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
series: []
|
|
|
|
};
|
|
var optionLineChartOut = {
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
series: []
|
|
|
|
};
|
|
var optionLineChartInventory = {
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
series: []
|
|
|
|
};
|
|
|
|
$.ajax({
|
|
url: '/depositoryRecord/getApplicationForMaterial',
|
|
type: 'post',
|
|
async: true,
|
|
dataType: "json",
|
|
data: JSON.stringify({"id": id}),
|
|
contentType: "application/json;charset=utf-8",
|
|
complete: function (XHR, TS) {
|
|
layer.close(this.layerIndex);
|
|
if (XHR.status !== 200) {
|
|
layer.alert("系统繁忙，稍后重试");
|
|
}
|
|
},
|
|
beforeSend: function () {
|
|
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
|
|
},
|
|
success: function (result) {
|
|
let data = result.data;
|
|
let dayNames = data["dayNames"];
|
|
let amountItemForIn = data["amountItemForIn"];
|
|
let countItemForIn = data["countItemForIn"];
|
|
let amountItemForOut = data["amountItemForOut"];
|
|
let countItemForOut = data["countItemForOut"];
|
|
let countItemForInventory = data["countItemForInventory"];
|
|
let amountItemForInventory = data["amountItemForInventory"];
|
|
let legendItem = data["legend"];
|
|
let seriesInItem = [];
|
|
let seriesOutItem = [];
|
|
let seriesInventoryItem = [];
|
|
seriesInItem.push(amountItemForIn);
|
|
seriesInItem.push(countItemForIn);
|
|
seriesOutItem.push(amountItemForOut);
|
|
seriesOutItem.push(countItemForOut);
|
|
seriesInventoryItem.push(countItemForInventory);
|
|
seriesInventoryItem.push(amountItemForInventory);
|
|
optionLineChartIn.series = seriesInItem;
|
|
optionLineChartOut.series = seriesOutItem;
|
|
optionLineChartInventory.series = seriesInventoryItem;
|
|
|
|
optionLineChartIn.xAxis.data = dayNames;
|
|
optionLineChartIn.legend = legendItem;
|
|
optionLineChartOut.legend = legendItem;
|
|
optionLineChartOut.xAxis.data = dayNames;
|
|
optionLineChartInventory.legend = legendItem;
|
|
optionLineChartInventory.xAxis.data = dayNames;
|
|
echartLineChartIn.setOption(optionLineChartIn);
|
|
echartLineChartOut.setOption(optionLineChartOut);
|
|
echartLineChartInventory.setOption(optionLineChartInventory);
|
|
}
|
|
})
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|