pfz_smile
/
depositroy
2
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

为物料详情页面添加出入库表格

lwx_dev
erdanergou 2 years ago
parent
bbf6d898ff
commit
13c296cd64
2 changed files with 247 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/main/resources/templates/pages/material/material-out.html
  2. 303
      src/main/resources/templates/pages/material/material-view_back.html

27
src/main/resources/templates/pages/material/material-out.html
View File

@ -767,34 +767,9 @@
});
/*showDetail = function (obj) {
var index = layer.open({
title: '物料信息详情',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: '/material_view?id=' + obj.id,
end: function () {
//执行搜索重载
table.reloadData('currentTableId', {
url: '/material/material',
page: {
curr: 1
}
}, 'data');
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
}*/
showDetail = function (obj) {
var index = layer.open({
title: '库存信息详情',
title: '物料信息详情',
type: 2,
shade: 0.2,
maxmin: true,

303
src/main/resources/templates/pages/material/material-view_back.html
View File

@ -32,6 +32,7 @@
<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>
@ -47,7 +48,7 @@
<table class="table">
<tbody>
<tr>
<td th:text="'物料编码：'+${record.getCode()}">物料编码：</td>
<td id="mcode" th:attr="mcode=${record.getCode()}" th:text="'物料编码：'+${record.getCode()}">物料编码：</td>
<td th:text="'物料名称：'+${record.getMname()}">物料名称：</td>
<td th:text="'规格型号：'+${record.getVersion()}">规格型号：</td>
<td th:text="'物料材质：'+${record.getTexture()}">物料材质：</td>
@ -61,7 +62,9 @@
<span th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
th:text="${splitInfo.getNewUnit()}"></span>
</td>
<td th:text="'物料单价：'+${record.getPrice()}" th:style="'display:'+${display}">物料单价：</td>
<td th:text="'物料单价：'+${record.getPrice()}" th:style="'display:'+${display}">
物料单价：
</td>
</tr>
<tr>
<td th:text="'物料备注：'+${record.getRemark()}">物料备注：</td>
@ -74,10 +77,27 @@
<div class="">
<div class="panel panel-success">
<div class="panel-heading">库存基本信息</div>
<div class="panel-body">
<table class="layui-hide" id="currentTableId"></table>
<ul id="myTabForNavigation" class="nav nav-tabs nav-pills">
<li>
<a href="#inventoryInfo" tab-parent="navigation" data-toggle="tab">库存明细</a>
</li>
<li><a href="#applicationInInfo" tab-parent="navigation" data-toggle="tab">入库明细</a></li>
<li><a href="#applicationOutInfo" tab-parent="navigation" data-toggle="tab">出库明细</a></li>
</ul>
<div id="myTabContentForNavigation" class="tab-content">
<div class="tab-pane fade in active" id="inventoryInfo">
<table class="layui-hide" id="TableForInventory"></table>
</div>
<div class="tab-pane fade" id="applicationInInfo">
<table class="layui-hide" id="TableForApplicationIn"></table>
</div>
<div class="tab-pane fade" id="applicationOutInfo">
<table class="layui-hide" id="TableForApplicationOut"></table>
</div>
</div>
</div>
</div>
@ -91,7 +111,7 @@
<ul id="myTab" class="nav nav-tabs nav-pills">
<li class="active">
<a href="#inventoryEchart" data-toggle="tab">
库存明细图标
库存明细图表
</a>
</li>
<li><a href="#applicationInEchart" data-toggle="tab">入库明细图表</a></li>
@ -139,6 +159,8 @@
</div>
</div>
</div>
</div>
<script type="text/html" id="currentTableBar">
@ -171,7 +193,8 @@
<script type="text/html" id="quantityItem">
<span class="layui-badge-rim" id="quantity{{d.id}}" style="margin-right: 10px;">库存数：{{d.materialAndPlaceList[0].inventory}}</span>
<span th:style="'display:'+${display == 'block' ? 'inline':'none'}" class="layui-badge-rim" id="amount{{d.id}}" style="margin-right: 10px;">总金额：{{d.materialAndPlaceList[0].amount}}</span>
<span th:style="'display:'+${display == 'block' ? 'inline':'none'}" class="layui-badge-rim" id="amount{{d.id}}"
style="margin-right: 10px;">总金额：{{d.materialAndPlaceList[0].amount}}</span>
</script>
<script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script>
@ -200,6 +223,18 @@
}
function initApplicationInTable() {
}
function initApplicationOutTable() {
}
function initInventoryTable() {
}
var barCode = [];
var flag = false;
@ -211,58 +246,212 @@
util = layui.util;
let iremark = $("#iremark").val();
let mid = $("#id").val();
table.render({
elem: "#currentTableId",
url: '/material/findInventoryByMid',
parseData: function (res) { //res 即为原始返回的数据
return {
"status": res.status, //解析接口状态
"message": res.statusInfo.message, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
},
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'size' //每页数据量的参数名，默认：limit
},
where: {
"mid": mid
},
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
},
cols: [
[
{type: "checkbox", width: 50},
{field: 'depositoryName', width: 200, title: '仓库名称'},
{
field: 'unit',
width: 100,
title: '计量单位',
templet: '#unitItemList',
},
{field: 'place', width: 150, title: '所处库位', templet: '#placeItemList'},
{title: '库存数', width: 230, templet: '#quantityItem', align: "center"},
{field: 'remark', width: 150, title: '备注'},
{title: '操作', width: 150, toolbar: '#currentTableBar', align: "center"},
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
done: function (res, curr, count) {
// 选中第一个导航
$('#myTabForNavigation li:eq(0) a').tab('show');
// 当进行切换时
$('a[tab-parent="navigation"]').on('shown.bs.tab', function (e) {
var activeTab = $(e.target).attr("href");
if (activeTab.indexOf("applicationIn") !== -1) {
// 如果是入库
initApplicationInTable();
} else if (activeTab.indexOf("applicationOut") !== -1) {
// 如果是出库
initApplicationOutTable();
}else{
initInventoryTable();
}
});
initApplicationInTable = function () {
table.render({
elem: "#TableForApplicationIn",
url: '/depositoryRecord/applicationInView',
parseData: function (res) { //res 即为原始返回的数据
return {
"status": res.status, //解析接口状态
"message": res.statusInfo.message, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
},
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'size' //每页数据量的参数名，默认：limit
},
where: {
"mid": mid
},
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
},
cols: [
[
{type: "checkbox", width: 50},
{field: 'aircode',title: '入库单号', width: 150, templet: '#applicationInCode'},
{field: 'quantity', width: 100, title: '数量', sort: true},
{field: 'depositoryName', width: 150, title: '仓库名称'},
{field: 'applicantName', width: 100, title: '提交人'},
{field: 'adminorgName', width: 150, title: '提交人部门'},
{field: 'applicantTime', width: 150, title: '提交时间', sort: true},
{field: 'applyRemark', width: 200, title: '备注'},
{field: 'airstate', width: 200, title: '状态'}
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
done: function (res, curr, count) {
}
});
};
initInventoryTable = function() {
table.render({
elem: "#TableForInventory",
url: '/material/findInventoryByMid',
parseData: function (res) { //res 即为原始返回的数据
return {
"status": res.status, //解析接口状态
"message": res.statusInfo.message, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
},
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'size' //每页数据量的参数名，默认：limit
},
where: {
"mid": mid
},
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
},
cols: [
[
{type: "checkbox", width: 50},
{field: 'depositoryName', width: 200, title: '仓库名称'},
{
field: 'unit',
width: 100,
title: '计量单位',
templet: '#unitItemList',
},
{field: 'place', width: 150, title: '所处库位', templet: '#placeItemList'},
{title: '库存数', width: 230, templet: '#quantityItem', align: "center"},
{field: 'remark', width: 150, title: '备注'},
{title: '操作', width: 150, toolbar: '#currentTableBar', align: "center"},
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
done: function (res, curr, count) {
}
});
};
initApplicationOutTable = function() {
let flagForReload = true;
let cols = [
{type: "checkbox", width: 50},
{field: "code", title: '申请编码', width: 150, templet: '#applicationOutCode'},
{field: 'quantity', width: 150, title: '数量', sort: true},
{field: 'depositoryName', width: 150, title: '仓库名称'},
{field: 'state', width: 150, title: '流程状态'},
{
field: 'pass', title: '是否完成出库', minWidth: 120, templet: function (d) {
if (d.pass === 1) {
return "是";
} else {
return "否";
}
}
},
{field: 'applicantName', width: 150, title: '申请人'},
{field: 'adminorgName', width: 150, title: '申请人部门'},
{field: 'useAdminorgName', width: 150, title: '使用部门'},
{field: 'constructionUnitName', width: 150, title: '使用单位'},
{field: 'applicantTime', width: 200, title: '申请时间', sort: true}
];
table.render({
elem: "#TableForApplicationOut",
url: '/depositoryRecord/applicationOutView',
parseData: function (res) { //res 即为原始返回的数据
return {
"status": res.status, //解析接口状态
"message": res.statusInfo.message, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data //解析数据列表
};
},
height: 'full-255',//固定高度-即固定表头固定第一行首行
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'size' //每页数据量的参数名，默认：limit
},
where: {"mcode":$("#mcode").attr("mcode")},
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
},
//这里layui和thymeleaf冲突了，要加个空格
cols: [
[
{type: "checkbox", width: 50},
{title: '申请编码', width: 150, templet: '#applicationOutCode'},
{field: 'quantity', width: 150, title: '数量', sort: true},
{field: 'depositoryName', width: 150, title: '仓库名称'},
{field: 'state', width: 150, title: '流程状态'},
{
field: 'pass', title: '是否完成出库', minWidth: 120, templet: function (d) {
if (d.pass === 1) {
return "是";
} else {
return "否";
}
}
},
{field: 'applicantName', width: 150, title: '申请人'},
{field: 'applicantTime', width: 200, title: '申请时间', sort: true}
]
],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
done: function (res, curr, count) {
let display = $("#delete").css("display");
if (display !== "none") {
if (flagForReload) {
flagForReload = false;
let col = {field: 'price', title: '金额', minWidth: 150, sort: true};
cols.splice(6, 0, col);
// table.reloadData('currentTableId', {cols: [cols]});
table.reload('TableForApplicationOut', {cols: [cols]});
}
}
}
});
};
// 柱状图
var echartLineChartIn = echarts.init(document.getElementById('echarts-line-in'));
var echartLineChartOut = echarts.init(document.getElementById('echarts-line-out'));
@ -314,7 +503,7 @@
};
// 数据行点击事件
table.on('rowDouble(currentTableId)', function (obj) {
table.on('rowDouble(TableForInventory)', function (obj) {
var data = obj.data; // 获取当前行数据
let id = data.id;
let req = {};

Write Preview
Loading…
Cancel
Save