Browse Source

添加库存移动端页面

lwx_dev
erdanergou 3 years ago
parent
commit
055ad66e3e
  1. 6
      src/main/java/com/dreamchaser/depository_manage/controller/PageController.java
  2. 3
      src/main/java/com/dreamchaser/depository_manage/service/impl/MaterialServiceImpl.java
  3. 63
      src/main/resources/static/css/public.css
  4. 8
      src/main/resources/static/js/Customize/public.js
  5. 1987
      src/main/resources/static/js/WaterfallFlow/dynamics.js
  6. 66
      src/main/resources/static/js/WaterfallFlow/minigrid.js
  7. 2
      src/main/resources/templates/pages/application/my-apply.html
  8. 233
      src/main/resources/templates/pages/depository/table-stock_mobile.html
  9. 63
      target/classes/static/css/public.css
  10. 2
      target/classes/templates/pages/application/my-apply.html

6
src/main/java/com/dreamchaser/depository_manage/controller/PageController.java

@ -963,6 +963,12 @@ public class PageController {
ModelAndView mv = new ModelAndView(); ModelAndView mv = new ModelAndView();
mv.setViewName("pages/depository/table-stock"); mv.setViewName("pages/depository/table-stock");
mv.addObject("number", userToken.getNumber()); mv.addObject("number", userToken.getNumber());
String userAgent = request.getHeader("user-agent");
// 判断当前使用的设备为移动端还是pc端
boolean b = DeviceUtil.checkAgentIsMobile(userAgent);
if(b){
mv.setViewName("pages/depository/table-stock_mobile");
}
return mv; return mv;
} }

3
src/main/java/com/dreamchaser/depository_manage/service/impl/MaterialServiceImpl.java

@ -859,6 +859,9 @@ public class MaterialServiceImpl implements MaterialService {
m.setShowQuantity(splitInventoryForUnit); m.setShowQuantity(splitInventoryForUnit);
m.setUnit(unit); m.setUnit(unit);
m.setDefaultUnit(unit); m.setDefaultUnit(unit);
if(m.getBrand() == null){
m.setBrand("");
}
result.add(m); result.add(m);
} }
return result; return result;

63
src/main/resources/static/css/public.css

@ -96,7 +96,70 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
} }
.my-info{
margin-top: 10px;
margin-bottom: 20px;
}
body { body {
font-family: 华文楷体; font-family: 华文楷体;
font-weight: bold; font-weight: bold;
} }
.waterfall-demo {
position: relative;
opacity: 0;
transition: .2s ease;
margin-bottom: 60px;
}
.waterfall-grid {
position: relative;
/* fluffy */
margin: 0 auto;
width: 98%;
/* end fluffy */
}
.waterfall-grid-item {
position: absolute;
top: 0;
left: 0;
/* fluffy */
width: 45%;
/*height: 120px;*/
border-radius: 3px;
background-color: #EDEDED;
/* end fluffy */
-webkit-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border: 1px solid #ADADAD;
}
/* mq */
@media (max-width: 600px) {
.grid-item {
width: 120px;
height: 80px;
}
}
.layui-return-top{
position: fixed;
z-index: 100000;
bottom: 15px;
right: 15px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 2px;
text-align: center;
background-color: rgba(0, 0, 0, .7);
color: #fff;
cursor: pointer;
}

8
src/main/resources/static/js/Customize/public.js

@ -0,0 +1,8 @@
$(window).scroll(function () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if(scrollTop > 200){
$("#returnTop").show();
}else{
$("#returnTop").hide();
}
});

1987
src/main/resources/static/js/WaterfallFlow/dynamics.js

File diff suppressed because it is too large

66
src/main/resources/static/js/WaterfallFlow/minigrid.js

@ -0,0 +1,66 @@
(function(exports){
function minigrid(containerSelector, itemSelector, gutter, animate, done) {
var forEach = Array.prototype.forEach;
var containerEle = document.querySelector(containerSelector);
var itemsNodeList = document.querySelectorAll(itemSelector);
gutter = gutter || 8;
containerEle.style.width = '';
var containerWidth = containerEle.getBoundingClientRect().width;
var firstChildWidth = itemsNodeList[0].getBoundingClientRect().width + gutter;
var cols = Math.max(Math.floor((containerWidth - gutter) / firstChildWidth), 1);
var count = 0;
containerWidth = (firstChildWidth * cols + gutter) + 'px';
containerEle.style.width = containerWidth;
for (var itemsGutter = [], itemsPosX = [], g = 0; g < cols; g++) {
itemsPosX.push(g * firstChildWidth + gutter);
itemsGutter.push(gutter);
}
forEach.call(itemsNodeList, function(item){
var itemIndex = itemsGutter.slice(0).sort(function (a, b) {
return a - b;
}).shift();
itemIndex = itemsGutter.indexOf(itemIndex);
var posX = itemsPosX[itemIndex];
var posY = itemsGutter[itemIndex];
var transformProps = [
'webkitTransform',
'MozTransform',
'msTransform',
'OTransform',
'transform'
];
if (!animate) {
forEach.call(transformProps, function(transform){
item.style[transform] = 'translate(' + posX + 'px,' + posY + 'px)';
});
}
itemsGutter[itemIndex] += item.getBoundingClientRect().height + gutter;
count = count + 1;
if (animate) {
return animate(item, posX, posY, count);
}
});
var containerHeight = itemsGutter.slice(0).sort(function (a, b) {
return a - b;
}).pop();
containerEle.style.height = containerHeight + 'px';
if (typeof done === 'function'){
done();
}
}
if (typeof define === 'function' && define.amd) {
define(function() { return minigrid; });
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = minigrid;
} else {
exports.minigrid = minigrid;
}
})(this);

2
src/main/resources/templates/pages/application/my-apply.html

@ -57,7 +57,7 @@
function openDetailTaking(data){ function openDetailTaking(data){
}; };
layui.use(['flow', 'layer', 'flow', 'util'], function () { layui.use(['flow', 'layer', 'util'], function () {
var $ = layui.jquery, var $ = layui.jquery,
layer = layui.layer, layer = layui.layer,
flow = layui.flow, flow = layui.flow,

233
src/main/resources/templates/pages/depository/table-stock_mobile.html

@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>layui</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.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/static/css/public.css" media="all">
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<style>
.clearfix:after, .clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend id="top">搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<input style="display: none" th:value="${number}" id="number">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">仓库</label>
<div class="layui-input-block">
<input type="text" placeholder="请选择仓库" class="layui-input" id="openSonByDepository"
readonly/>
<input type="text" name="depositoryId" class="layui-input" id="depositoryId"
style="display: none"/>
<input type="text" name="placeId" id="placeId" style="display: none">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">物料名称</label>
<div class="layui-input-block">
<input type="text" name="mname" autocomplete="off" class="layui-input"
placeholder="请填写物料名称">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">存货编码</label>
<div class="layui-input-block">
<input type="text" name="code" autocomplete="off" class="layui-input"
placeholder="请填写物料编码">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">型号</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="version" name="version" autocomplete="off"
placeholder="请填写物料型号"/>
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit
lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
</button>
</div>
</div>
</form>
</div>
</fieldset>
<ul class="flow-default" id="LAY_Inventory"></ul>
</div>
</div>
<a id="returnTop" style="display:none;" class="layui-return-top" href="#top"><i class="fa fa-level-up"></i></a>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/static/js/Customize/public.js"></script>
<script>
var data;
function changePlaceCode() {
}
function changeUnit() {
}
function closeShowDataMessage() {
}
function showDetail() {
}
let socket = null;
let newIndexShade;
layui.use(['form', 'table', 'upload', 'flow'], function () {
var $ = layui.jquery,
form = layui.form,
upload = layui.upload,
flow = layui.flow,
table = layui.table;
let takingPre = 0;
let size = 8;
let page = 1;
$('#openSonByDepository').on('click', function () {
layer.open({
type: 2,
title: '弹窗内容',
skin: 'layui-layer-rim',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area: ['70%', '70%'],
move: '.layui-layer-title',
fixed: false,
content: '/selectDepository?type=1',
success: function (layero, index) {
var children = layero.children();
var content = $(children[1]);
var iframeChildren = $(content.children());
content.css('height', '100%');
iframeChildren.css('height', '100%');
}
});
});
flow.load({
elem: '#LAY_Inventory' //流加载容器
, done: function (page, next) { //执行下一页的回调
let result;
let lis = [];
$.get('/material/findInventory?page=' + page + '&size=' + size, function (res) {
result = res.data;
lis.push("<div class='clearfix'>");
for (let i = 0; i < result.length; i++) {
lis.push('<li style="width:100%;margin-top: 10px;float:left;border: 1px solid #9999996e;"><div class="layui-card my-shadow my-card flow1" onclick="showDetail('
+ result[i].id + ')"><div class="layui-card-header"><h2>' + result[i].mname + '</h2></div>');
lis.push('<div class="layui-col-md4 my-info" style="margin-left: 15px; color: #999;font-size: 15px;">'
+'<p>' + result[i].code + '</p>'
+'<p>' + result[i].version + '</p>'
+ '<p>' + "品牌:"+result[i].brand + '</p>'
+ '</div></div></li>');
}
lis.push('</div>');
takingPre += result.length;
//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), takingPre < res.count);
});
}
});
// 用于进行渲染库位编码
form.on('switch(createPlaceCode)', function (obj) {
console.log(obj)
});
// 监听库位修改操作
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var req = {};
data = data.field;
if (data.mname !== '') {
req.mname = data.mname.trim();
}
if (data.depositoryId !== '') {
req.depositoryId = data.depositoryId;
}
if (data.placeId !== '') {
req.placeId = data.placeId;
}
if (data.code !== '') {
req.mcode = data.code.trim();
}
if (data.version !== '') {
req.version = data.version.trim();
}
//执行搜索重载
return false;
});
closeShowDataMessage = function () {
$("#layui-layer-shade-x" + newIndexShade).remove();
$("#showImportData").hide();
$("#showDataContent").empty();
if (socket !== null) {
socket.close();
}
};
showDetail = function (obj) {
var index = layer.open({
title: '库存信息详情',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: '/InventoryView?id=' + obj,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
}
});
</script>
</body>
</html>

63
target/classes/static/css/public.css

@ -96,7 +96,70 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
} }
.my-info{
margin-top: 10px;
margin-bottom: 20px;
}
body { body {
font-family: 华文楷体; font-family: 华文楷体;
font-weight: bold; font-weight: bold;
} }
.waterfall-demo {
position: relative;
opacity: 0;
transition: .2s ease;
margin-bottom: 60px;
}
.waterfall-grid {
position: relative;
/* fluffy */
margin: 0 auto;
width: 98%;
/* end fluffy */
}
.waterfall-grid-item {
position: absolute;
top: 0;
left: 0;
/* fluffy */
width: 45%;
/*height: 120px;*/
border-radius: 3px;
background-color: #EDEDED;
/* end fluffy */
-webkit-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border: 1px solid #ADADAD;
}
/* mq */
@media (max-width: 600px) {
.grid-item {
width: 120px;
height: 80px;
}
}
.layui-return-top{
position: fixed;
z-index: 100000;
bottom: 15px;
right: 15px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 2px;
text-align: center;
background-color: rgba(0, 0, 0, .7);
color: #fff;
cursor: pointer;
}

2
target/classes/templates/pages/application/my-apply.html

@ -57,7 +57,7 @@
function openDetailTaking(data){ function openDetailTaking(data){
}; };
layui.use(['flow', 'layer', 'flow', 'util'], function () { layui.use(['flow', 'layer', 'util'], function () {
var $ = layui.jquery, var $ = layui.jquery,
layer = layui.layer, layer = layui.layer,
flow = layui.flow, flow = layui.flow,

Loading…
Cancel
Save