<!DOCTYPE HTML> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <meta charset="utf-8"> <head th:include="include :: header"></head> <body class="gray-bg"> <div class="container-div"> <div class="row"> <div class="col-sm-12"> <div class="col-sm-12 select-info"> <form id="inventoryMaterialSummary-form"> <div class="select-list"> <ul> <li> <!-- U8仓库:<input id="warehouseCode" type="text" name="warehouseCode" th:value="${warehouseCode}" readonly="readonly" />--> U8仓库: <select name="uWarehouseCode" id="uWarehouseCode" th:with="warehouse=${@warehouseWu.selectList()}"> <option value="">所有</option> <option th:each="e : ${warehouse}" th:text="${e['uWarehouseName']}" th:value="${e['uWarehouseCode']}"></option> </select> <!--<select name="uWarehouseCode" th:with="warehouse=${@warehouse.selectList()}"> <option value="">所有</option> <option th:each="e : ${warehouse}" th:text="${e['uWarehouseName']}" th:value="${e['uWarehouseCode']}"></option></select>--> </li> <li> 越界查询:<select id="sort" type="text" name="sort" > <option value="">全部</option> <option value="lower">下限</option> <option value="upper">上限</option> </select> </li> <!-- <li>--> <!-- 货主:<select id="companyCode" name="companyCode" th:with="list=${@companyService.getCode()}">--> <!-- <option value="">所有</option>--> <!-- <option th:each="item : ${list}" th:text="${item['name']}" th:value="${item['code']}" th:attr = " code = ${item['code']}"></option>--> <!-- </select>--> <!-- </li>--> <li> 物料编码:<input id="materialCode" type="text" name="materialCode" /> </li> <li> 物料名称:<input id="materialName" type="text" name="materialName" /> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a> </li> </ul> </div> </form> </div> <div class="btn-group hidden-xs" id="toolbar" role="group"> <!--<a class="btn btn-outline btn-danger btn-rounded" onclick="batRemove()"> <i class="fa fa-trash-o"></i> 删除 </a>--> </div> <div class="col-sm-12 select-info"> <table id="bootstrap-table" data-mobile-responsive="true" class="table table-bordered table-hover"></table> </div> </div> </div> </div> <div th:include="include :: footer"></div> <script th:inline="javascript"> var prefix = ctx + "inventory/inventoryMaterialSummary"; var mType = [[${@dict.getType('materialType')}]]; var Ltype= [[${@dict.getType('zoneCode')}]]; var company= [[${@dict.getType('company')}]]; $(function () { let options = { url: prefix + "/list", contentType: "application/x-www-form-urlencoded", // 编码类型 method: 'post', // 请求方式(*) modalName: "库存汇总", sortStable: true, sortName: "materialCode", sortOrder: "asc", search: false, showSearch: false, showRefresh: true, refresh:true, showToggle: false, showColumns: false, showExport: true, //导出 exportDataType: "all", //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据 detailView: true, pagination: true, sidePagination: "client", //前端分页 queryParams : queryParams, onExpandRow : function(index, row, $detail) { detailChildTable(index, row, $detail); }, responseHandler: function (res) { return res; }, columns: [ { radio: true }, { field: 'uWarehouseName', title: 'U8仓库 ', visible: true }, { field: 'materialName', title: '物料名称' }, { field: 'materialCode', title: '物料编码' }, { field: 'materialOldCode', title: '存货代码', }, { field: 'materialSpec', title: '物料规格', }, { field: 'qty', title: '库存总数', formatter: function(value, row, index) { var actions = []; let colorClass = row.colorClass; actions.push('<span ><font color=" '+ colorClass +' ">' + value + '</font></span>'); return actions.join(''); }, cellStyle: function(value, row, index){ let upper = row.upper; let lower = row.lower; console.log(upper) console.log(lower) //上限预警 蓝色 if(value >= upper ){ return {css:{"background-color":"rgba(0,217,255,0.7)"}} } //下限预警 黄色 if(value <= lower ){ return {css:{"background-color":"rgba(255,255,0,0.7)"}} } return ''; }, }, { field: 'companyCode', title: '货主', visible: true, }, { field: 'colorClass', title: '字体颜色class', visible: false, }, { field: 'upper', title: '水位上限', visible: true, cellStyle: function(value, row, index){ let qty = row.qty; //上限预警 蓝色 if(qty >= value ){ return {css:{"background-color":"rgba(0,217,255,0.7)"}} } return ''; }, }, { field: 'lower', title: '水位下限', visible: true, cellStyle: function(value, row, index){ let qty = row.qty; //下限预警 黄色 if(qty <= value ){ return {css:{"background-color":"rgba(255,255,0,0.7)"}} } return ''; }, }, { field: 'created', title: '最初创建时间' }, /*{ field: 'weight', title: '总重量' },*/ { title: '操作', align: 'center', formatter: function (value, row, index) { var actions = []; // actions.push('<a class="btn btn-primary btn-xs ' + createTaskFalg + '" href="#" onclick="outcheck(\'' + row.id + '\')"><i class="fa fa-gbp"></i>生成盘点单</a> '); return actions.join(''); } } ] }; $("#bootstrap-table").bootstrapTable(options); }); //子表 detailChildTable = function(index, row, $detail) { let childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table'); $(childTable).bootstrapTable({ url: prefix + "/inventoryMaterialSummaryChild", method: 'post', sortName: "id", sortOrder: "desc", sidePagination: "server", contentType: "application/x-www-form-urlencoded", //页面渲染 responseHandler: responseHandler, queryParams : { //传值 uWarehouseCode : $('#uWarehouseCode').val(), materialCode: row.materialCode, companyCode: row.companyCode, }, columns: [ /*{ field: 'id', title: '库存明细ID', sortable: true, width: 80 },*/ { field: 'locationCode', title: '库位编码', visible: true, }, { field: 'containerCode', title: '容器编码', visible: true, }, /*{ field: 'companyCode', title: '货主编码', visible: true, width: 80 },*/ { field: 'materialCode', title: '物料编码', }, { field: 'materialName', title: '物料名称', }, { field : 'type', title : '物料类别' , align: 'center', formatter: function(value, row, index) { return $.table.selectDictLabel(mType, value); } }, { field: 'barCode', title: '物料条码', }, { field: 'specification', title: '物料规格', }, { field: 'masterUnit', title: '物料主计量单位', }, { field: 'qty', title: '库存数量', }, { field: 'zoneCode', title: '库区', visible: true, formatter: function (value,row,index) { return $.table.selectDictLabel(Ltype,value); } }, { field: 'lastUpdated', title: '最后更新时间', visible: true, } , { field: 'userDef1', title: '库龄', visible: true, width: 100 } /*{ field: 'receiptCode', title: '入库单编码', visible: true, width: 140 },*/ // { // field: 'created', // title: '入库日期', // visible: true, // sortable: true, // width: 90 // } /*{ title: '操作', align: 'center', width: 200, formatter: function (value, row, index) { var actions = []; actions.push('<a class="btn btn-success btn-xs ' + confirmFlag + '" href="#" onclick="confirmGapQty(\'' + row.id + '\')"><i class="fa fa-comment"></i>实盘登记</a> '); return actions.join(''); } }*/ ] }); }; /*__________*/ function open(title, url, width, height){ if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) { width = 'auto'; height = 'auto'; } if (title==null){ title = false; } if (url==null){ url="404.html"; } if ($.common.isEmpty(width)) { width = 800; // width = ($(window).width() - 100); } if ($.common.isEmpty(height)) { height = ($(window).height() - 50); } layer.open({ type: 2, area: [width + 'px', height + 'px'], fix: false, //不固定 maxmin: true, shade: 0.3, title: title, content: url // shadeClose: true, //点击遮罩关闭层 }) } function responseHandler(res) { if (res.code == 200) { return { rows: res.data, total: res.total, code: 0}; } else { $.modal.alertWarning(res.msg); return { rows: [], total: 0 }; } } function queryParams (params) { var curParams = { // 传递参数查询参数 uWarehouseCode: $('#uWarehouseCode').val(), sort: $('#sort').val(), }; return curParams; } </script> </body> </html>