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

添加物料查询移动端页面

lwx_dev
erdanergou 3 years ago
parent
055ad66e3e
commit
6dba8b9557
6 changed files with 236 additions and 1019 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 1
      src/main/resources/templates/pages/depository/table-stock_mobile.html
  4. 509
      src/main/resources/templates/pages/material/material-out_back.html
  5. 227
      src/main/resources/templates/pages/material/material-out_mobile.html
  6. 509
      target/classes/templates/pages/material/material-out_back.html

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

@ -527,6 +527,12 @@ public class PageController {
mv.addObject("display", "none"); mv.addObject("display", "none");
} }
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/material/material-out_mobile");
}
return mv; return mv;
} }

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

@ -257,6 +257,9 @@ public class MaterialServiceImpl implements MaterialService {
if (material.getPrice() != null) { if (material.getPrice() != null) {
material.setPrice(material.getPrice() / 100); material.setPrice(material.getPrice() / 100);
} }
if(material.getBrand() == null){
material.setBrand("");
}
} }
return materialByCondition; return materialByCondition;
} }

1
src/main/resources/templates/pages/depository/table-stock_mobile.html
View File

@ -115,7 +115,6 @@
let takingPre = 0; let takingPre = 0;
let size = 8; let size = 8;
let page = 1;
$('#openSonByDepository').on('click', function () { $('#openSonByDepository').on('click', function () {

509
src/main/resources/templates/pages/material/material-out_back.html
View File

@ -1,509 +0,0 @@
<!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">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<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-inline">
<!--<select name="depositoryId" >
<option value="" selected>请选择仓库</option>
<option th:each="depository,iterStar:${depositories}" th:value="${depository?.getId()}" th:text="${depository?.getDname()}" >外芯仓库</option>
</select>-->
<input type="text" placeholder="请选择仓库" class="layui-input" id="openSonByDepository"
readonly/>
<input type="text" name="depositoryId" class="layui-input" id="depositoryId"
style="display: none"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">种类</label>
<div class="layui-input-inline">
<!--<select name="materialTypeId" >
<option value="" selected>请选择物料类型</option>
<option th:each="materialType,iterStar:${materialTypes}" th:value="${materialType?.getId()}" th:text="${materialType?.getTname()}" >芯片类</option>
</select>-->
<input type="text" placeholder="请选择物料类型" class="layui-input" id="openSonByMateralType"
readonly/>
<input type="text" id="materialTypeId" placeholder="请选择物料类型" name="materialTypeId"
class="layui-input" style="display: none"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">物料名称</label>
<div class="layui-input-inline">
<input type="text" name="mname" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<select name="state">
<option value="">请选择状态</option>
<option value="1">启用</option>
<option value="2">禁用</option>
</select>
</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>
<div class="layui-form-item">
<label class="layui-form-label">二维码</label>
<div class="layui-input-inline">
<!-- <input type="text" th:value="${record.depository.getDname()}" name="dname" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly">-->
<img src="" id="qrCode">
</div>
</div>
<!-- 状态展示-->
<script type="text/html" id="switchTpl">
<input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="changeState" {{ d.state== 1 ? 'checked' : '' }} >
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除</button>
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="u_fileUpload"
lay-event="import">导入数据
</button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">详情</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" th:style="'display:'+${display}"
lay-event="realDelete">彻底删除</a>
</script>
<script id="selectManager" type="text/html">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="manager">仓管员</a>
</script>
</div>
</div>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'table', 'upload'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
upload = layui.upload;
$('#openSonByMateralType').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: '/selectType',
success: function(layero, index){
var children = layero.children();
var content = $(children[1]);
var iframeChildren = $(content.children());
content.css('height','100%');
iframeChildren.css('height','100%');
}
});
});
$('#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=2',
success: function(layero, index){
var children = layero.children();
var content = $(children[1]);
var iframeChildren = $(content.children());
content.css('height','100%');
iframeChildren.css('height','100%');
}
});
});
table.render({
elem: "#currentTableId",
url: '/material/material',
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: {
type: "0"
},
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
},
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print'],
cols: [
[
{type: "checkbox", width: 50},
{field: 'code', width: 150, title: '存货编码', sort: true},
{field: 'mname', width: 120, title: '物料名称', sort: false},
{field: 'typeName', width: 150, title: '物料种类'},
{field: 'version', width: 200, title: '规格型号', sort: false},
{field: 'texture', width: 100, title: '材质'},
{field: 'unit', width: 150, title: '计量单位'},
{field: 'depositoryCode', width: 250, title: '仓库编码', sort: true},
{field: "depositoryName", width: 120, title: "仓库名称"},
{field: 'quantity', width: 120, title: '数量', sort: true},
{field: 'price', width: 150, title: '单价', sort: true},
{field: 'amounts', width: 180, title: '总金额', sort: true},
{field: 'state', title: '状态', minWidth: 80, templet: '#switchTpl'},
{title: '仓管员', minWidth: 80, templet: '#selectManager', align: "center"},
{title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
]
],
limits: [10, 15, 20, 25, 50,100],
limit: 10,
page: true,
skin: 'line',
done: function () {
}
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var req = {};
data = data.field;
req.type = 1;
if (data.mname !== '') {
req.mname = data.mname;
}
if (data.depositoryId !== '') {
req.depositoryId = data.depositoryId;
}
if (data.materialTypeId != '') {
req.materialTypeId = data.materialTypeId;
}
if (data.state != '') {
req.state = data.state;
}
//执行搜索重载
table.reload('currentTableId', {
url: '/material/material',
page: {
curr: 1
},
where: req
}, 'data');
return false;
});
/**
* toolbar监听事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var index = layer.open({
title: '申请提交',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: '/material_add',
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
var req = {};
req.ids = [];
for (i = 0, len = data.length; i < len; i++) {
req.ids[i] = data[i].id;
}
if (req.ids.length > 0) {
layer.confirm('真的删除么', {icon: 2, title: '提示'}, function (index) {
$.ajax({
url: '/material/material_del',
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
layer.msg("删除成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
});
//执行搜索重载
table.reload('currentTableId', {
url: '/material/material',
page: {
curr: 1
}
}, 'data');
return false;
}
}
})
})
} else {
layer.msg("未选中记录，请确认！");
return false;
}
} else if (obj.event === 'createQrCode') {
$.ajax({
url: "/material/createQrCode?mid=3",
dataType: 'json',
type: 'get',
contentType: "application/json;charset=utf-8",
success: function (data) {
if (data.status != 200) {
layer.msg(data.statusInfo.messgae)
} else {
$("#qrCode").attr("src", data.data.qrCode);
}
}
})
}
});
var upLoader = upload.render({
elem: "#u_fileUpload", // 绑定元素
url: '/excel/importExcel', // 上传接口
accept: 'file', // 允许上传的格式,
exts: 'xls|xlsx|csv',
done: function (res) {
//如果上传成功
if (res.code == 200) {
var re = "";
for (let i = 0; i < res.data.dataList.length; i++) {
var mname = res.data.dataList[i]["mname"];
var code = res.data.dataList[i]["code"];
var version = res.data.dataList[i]["version"];
var texture = res.data.dataList[i]["texture"];
var price = res.data.dataList[i]["price"];
var quantity = res.data.dataList[i]["quantity"];
var unit = res.data.dataList[i]["unit"];
var show = "<p style='color: #00FF00'>" + mname + " " + version + " " + code + " " + texture + " " + price + " " + quantity + " " + unit + "：成功" + "</p>";
re += show
}
for (let i = 0; i < res.data.errMsg.length; i++) {
var show = "<p style='color: #ff211e'>" + res.data.errMsg[i] + "：错误" + "</p>";
re += show
}
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['500px', '500px'], //宽高
content: re
})
} else {
layer.msg(res.msg)
}
},
error: function () {
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
upLoader.upload()
})
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
let data = obj.data;
if (obj.event === 'detail') {
var index = layer.open({
title: '仓库信息详情',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: '/material_view?id=' + data.id,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
var req = {};
req.id = data.id;
layer.confirm('真的删除么', {icon: 2, title: '提示'}, function (index) {
$.ajax({
url: '/material/material_del',
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
obj.del();
layer.msg("删除成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
});
}
}
})
});
} else if (obj.event == 'realDelete') { //彻底删除
var req = {};
req.id = data.id;
layer.confirm('该操作会造成不可逆后果，是否继续？', {
btn: ['继续', '取消'] //按钮
}, function () {
$.ajax({
url: '/material/realDeleteMaterial',
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
obj.del();
layer.msg("删除成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
});
}
}
})
}, function () {
// 执行重加载
table.reload('currentTableId', {
url: '/repository/warehouseRecord',
page: {
curr: 1
},
where: {"parentId": parentId}
});
});
} else if (obj.event == 'manager') {
layer.open({
type: 2,
title: '仓管员信息',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '/ManagerViewByMid?id=' + data.id
});
}
});
//监听状态操作
form.on('switch(changeState)', function (obj) {
var req = new Map;
if (obj.elem.checked) {
req["state"] = 1
}
req["id"] = this.value;
$.ajax({
url: "/material/material_edit",
type: 'post',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
layer.msg("修改成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
}, function () {
window.location = '/material_out'
})
}
}
})
});
});
</script>
</body>
</html>

227
src/main/resources/templates/pages/material/material-out_mobile.html
View File

@ -0,0 +1,227 @@
<!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>
<div class="layuimini-container">
<div class="layuimini-main">
<input style="display:none;" id="nowDay" th:value="${nowDay}">
<input style="display:none;" id="display" th:value="${display}">
<input style="display: none" th:value="${number}" id="number">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<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="openSonByMateralType"
readonly/>
<input type="text" id="materialTypeId" placeholder="请选择物料类型" name="materialTypeId"
class="layui-input" 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" class="layui-input" id="version" name="version" autocomplete="off"
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">
<select name="state">
<option value="">请选择状态</option>
<option value="1">启用</option>
<option value="2">禁用</option>
</select>
</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_material"></ul>
<div id="showImportData"
style="height: 500px;width: 500px;position: absolute;overflow: auto;top: 10%;left: 25%;background: #ffffff;z-index: 1231234;display: none">
<div onclick="closeShowDataMessage()" style="position: absolute; right: 0; top: 2%; cursor: pointer;">
<i class="fa fa-window-close-o"></i>
</div>
<div id="showDataContent"></div>
</div>
</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>
function bindTableToolbarFunction() {
}
function showDetail() {
}
function closeShowDataMessage() {
}
let socket = null;
let newIndexShade;
layui.use(['form', 'table', 'upload','flow'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
flow = layui.flow,
upload = layui.upload;
let takingPre = 0;
let size = 8;
$('#openSonByMateralType').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: '/selectType',
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_material' //流加载容器
, done: function (page, next) { //执行下一页的回调
let result;
let lis = [];
$.get('/material/material?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('submit(data-search-btn)', function (data) {
var req = {};
data = data.field;
req.type = 1;
if (data.mname !== '') {
req.mname = data.mname;
}
if (data.version !== '') {
req.version = data.version;
}
if (data.materialTypeId !== '') {
req.materialTypeId = data.materialTypeId;
}
if (data.state !== '') {
req.state = data.state;
}
if (data.code !== '') {
req.code = data.code
}
return false;
});
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,
end: function () {
//执行搜索重载
table.reload('currentTableId', {
url: '/material/material',
page: {
curr: 1
}
}, 'data');
}
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
}
});
</script>
</body>
</html>

509
target/classes/templates/pages/material/material-out_back.html
View File

@ -1,509 +0,0 @@
<!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">
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<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-inline">
<!--<select name="depositoryId" >
<option value="" selected>请选择仓库</option>
<option th:each="depository,iterStar:${depositories}" th:value="${depository?.getId()}" th:text="${depository?.getDname()}" >外芯仓库</option>
</select>-->
<input type="text" placeholder="请选择仓库" class="layui-input" id="openSonByDepository"
readonly/>
<input type="text" name="depositoryId" class="layui-input" id="depositoryId"
style="display: none"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">种类</label>
<div class="layui-input-inline">
<!--<select name="materialTypeId" >
<option value="" selected>请选择物料类型</option>
<option th:each="materialType,iterStar:${materialTypes}" th:value="${materialType?.getId()}" th:text="${materialType?.getTname()}" >芯片类</option>
</select>-->
<input type="text" placeholder="请选择物料类型" class="layui-input" id="openSonByMateralType"
readonly/>
<input type="text" id="materialTypeId" placeholder="请选择物料类型" name="materialTypeId"
class="layui-input" style="display: none"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">物料名称</label>
<div class="layui-input-inline">
<input type="text" name="mname" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">状态</label>
<div class="layui-input-inline">
<select name="state">
<option value="">请选择状态</option>
<option value="1">启用</option>
<option value="2">禁用</option>
</select>
</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>
<div class="layui-form-item">
<label class="layui-form-label">二维码</label>
<div class="layui-input-inline">
<!-- <input type="text" th:value="${record.depository.getDname()}" name="dname" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly">-->
<img src="" id="qrCode">
</div>
</div>
<!-- 状态展示-->
<script type="text/html" id="switchTpl">
<input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="changeState" {{ d.state== 1 ? 'checked' : '' }} >
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除</button>
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" id="u_fileUpload"
lay-event="import">导入数据
</button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">详情</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" th:style="'display:'+${display}"
lay-event="realDelete">彻底删除</a>
</script>
<script id="selectManager" type="text/html">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="manager">仓管员</a>
</script>
</div>
</div>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'table', 'upload'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table,
upload = layui.upload;
$('#openSonByMateralType').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: '/selectType',
success: function(layero, index){
var children = layero.children();
var content = $(children[1]);
var iframeChildren = $(content.children());
content.css('height','100%');
iframeChildren.css('height','100%');
}
});
});
$('#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=2',
success: function(layero, index){
var children = layero.children();
var content = $(children[1]);
var iframeChildren = $(content.children());
content.css('height','100%');
iframeChildren.css('height','100%');
}
});
});
table.render({
elem: "#currentTableId",
url: '/material/material',
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: {
type: "0"
},
response: {
statusName: 'status' //规定数据状态的字段名称，默认：code
, statusCode: 200 //规定成功的状态码，默认：0
, msgName: 'message' //规定状态信息的字段名称，默认：msg
, countName: 'count' //规定数据总数的字段名称，默认：count
, dataName: 'data' //规定数据列表的字段名称，默认：data
},
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print'],
cols: [
[
{type: "checkbox", width: 50},
{field: 'code', width: 150, title: '存货编码', sort: true},
{field: 'mname', width: 120, title: '物料名称', sort: false},
{field: 'typeName', width: 150, title: '物料种类'},
{field: 'version', width: 200, title: '规格型号', sort: false},
{field: 'texture', width: 100, title: '材质'},
{field: 'unit', width: 150, title: '计量单位'},
{field: 'depositoryCode', width: 250, title: '仓库编码', sort: true},
{field: "depositoryName", width: 120, title: "仓库名称"},
{field: 'quantity', width: 120, title: '数量', sort: true},
{field: 'price', width: 150, title: '单价', sort: true},
{field: 'amounts', width: 180, title: '总金额', sort: true},
{field: 'state', title: '状态', minWidth: 80, templet: '#switchTpl'},
{title: '仓管员', minWidth: 80, templet: '#selectManager', align: "center"},
{title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
]
],
limits: [10, 15, 20, 25, 50,100],
limit: 10,
page: true,
skin: 'line',
done: function () {
}
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var req = {};
data = data.field;
req.type = 1;
if (data.mname !== '') {
req.mname = data.mname;
}
if (data.depositoryId !== '') {
req.depositoryId = data.depositoryId;
}
if (data.materialTypeId != '') {
req.materialTypeId = data.materialTypeId;
}
if (data.state != '') {
req.state = data.state;
}
//执行搜索重载
table.reload('currentTableId', {
url: '/material/material',
page: {
curr: 1
},
where: req
}, 'data');
return false;
});
/**
* toolbar监听事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 监听添加操作
var index = layer.open({
title: '申请提交',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: '/material_add',
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 监听删除操作
var checkStatus = table.checkStatus('currentTableId')
, data = checkStatus.data;
var req = {};
req.ids = [];
for (i = 0, len = data.length; i < len; i++) {
req.ids[i] = data[i].id;
}
if (req.ids.length > 0) {
layer.confirm('真的删除么', {icon: 2, title: '提示'}, function (index) {
$.ajax({
url: '/material/material_del',
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
layer.msg("删除成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
});
//执行搜索重载
table.reload('currentTableId', {
url: '/material/material',
page: {
curr: 1
}
}, 'data');
return false;
}
}
})
})
} else {
layer.msg("未选中记录，请确认！");
return false;
}
} else if (obj.event === 'createQrCode') {
$.ajax({
url: "/material/createQrCode?mid=3",
dataType: 'json',
type: 'get',
contentType: "application/json;charset=utf-8",
success: function (data) {
if (data.status != 200) {
layer.msg(data.statusInfo.messgae)
} else {
$("#qrCode").attr("src", data.data.qrCode);
}
}
})
}
});
var upLoader = upload.render({
elem: "#u_fileUpload", // 绑定元素
url: '/excel/importExcel', // 上传接口
accept: 'file', // 允许上传的格式,
exts: 'xls|xlsx|csv',
done: function (res) {
//如果上传成功
if (res.code == 200) {
var re = "";
for (let i = 0; i < res.data.dataList.length; i++) {
var mname = res.data.dataList[i]["mname"];
var code = res.data.dataList[i]["code"];
var version = res.data.dataList[i]["version"];
var texture = res.data.dataList[i]["texture"];
var price = res.data.dataList[i]["price"];
var quantity = res.data.dataList[i]["quantity"];
var unit = res.data.dataList[i]["unit"];
var show = "<p style='color: #00FF00'>" + mname + " " + version + " " + code + " " + texture + " " + price + " " + quantity + " " + unit + "：成功" + "</p>";
re += show
}
for (let i = 0; i < res.data.errMsg.length; i++) {
var show = "<p style='color: #ff211e'>" + res.data.errMsg[i] + "：错误" + "</p>";
re += show
}
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['500px', '500px'], //宽高
content: re
})
} else {
layer.msg(res.msg)
}
},
error: function () {
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
upLoader.upload()
})
}
});
//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
console.log(obj)
});
table.on('tool(currentTableFilter)', function (obj) {
let data = obj.data;
if (obj.event === 'detail') {
var index = layer.open({
title: '仓库信息详情',
type: 2,
shade: 0.2,
maxmin: true,
shadeClose: true,
area: ['100%', '100%'],
content: '/material_view?id=' + data.id,
});
$(window).on("resize", function () {
layer.full(index);
});
return false;
} else if (obj.event === 'delete') {
var req = {};
req.id = data.id;
layer.confirm('真的删除么', {icon: 2, title: '提示'}, function (index) {
$.ajax({
url: '/material/material_del',
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
obj.del();
layer.msg("删除成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
});
}
}
})
});
} else if (obj.event == 'realDelete') { //彻底删除
var req = {};
req.id = data.id;
layer.confirm('该操作会造成不可逆后果，是否继续？', {
btn: ['继续', '取消'] //按钮
}, function () {
$.ajax({
url: '/material/realDeleteMaterial',
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
obj.del();
layer.msg("删除成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
});
}
}
})
}, function () {
// 执行重加载
table.reload('currentTableId', {
url: '/repository/warehouseRecord',
page: {
curr: 1
},
where: {"parentId": parentId}
});
});
} else if (obj.event == 'manager') {
layer.open({
type: 2,
title: '仓管员信息',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '/ManagerViewByMid?id=' + data.id
});
}
});
//监听状态操作
form.on('switch(changeState)', function (obj) {
var req = new Map;
if (obj.elem.checked) {
req["state"] = 1
}
req["id"] = this.value;
$.ajax({
url: "/material/material_edit",
type: 'post',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(req),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success: function (data) {
layer.close(this.layerIndex);
if (data.status >= 300) {
layer.msg(data.statusInfo.message);//失败的表情
} else {
layer.msg("修改成功", {
icon: 6,//成功的表情
time: 500 //1秒关闭（如果不配置，默认是3秒）
}, function () {
window.location = '/material_out'
})
}
}
})
});
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save