添加组合查询移动端页面

3 years ago · b267787a5b
5 changed files with 393 additions and 0 deletions
--- a/src/main/java/com/dreamchaser/depository_manage/controller/PageController.java
+++ b/src/main/java/com/dreamchaser/depository_manage/controller/PageController.java
@ -1094,6 +1094,12 @@ public class PageController {
        } else {
            mv.addObject("display", "none");
        }
+        String userAgent = request.getHeader("user-agent");
+        // 判断当前使用的设备为移动端还是pc端
+        boolean b = DeviceUtil.checkAgentIsMobile(userAgent);
+        if(b){
+            mv.setViewName("pages/group/group-out_mobile");
+        }
        return mv;
    }

@ -1142,6 +1148,13 @@ public class PageController {
        }
        mv.addObject("id", id);
        mv.addObject("record", group);
+        String userAgent = request.getHeader("user-agent");
+        // 判断当前使用的设备为移动端还是pc端
+        boolean b = DeviceUtil.checkAgentIsMobile(userAgent);
+        if(b){
+            mv.setViewName("pages/group/group_edit_mobile");
+        }
+
        return mv;
    }

--- a/src/main/java/com/dreamchaser/depository_manage/entity/GroupInfo.java
+++ b/src/main/java/com/dreamchaser/depository_manage/entity/GroupInfo.java
@ -84,6 +84,11 @@ public class GroupInfo {
     */
    private Long createTime;

+    /**
+     * 组合创建时间
+     */
+    private String showCreateTime;
+
    /**
     * 组合状态（1启用2禁用3删除）
     */
--- a/src/main/java/com/dreamchaser/depository_manage/service/impl/GroupServiceImpl.java
+++ b/src/main/java/com/dreamchaser/depository_manage/service/impl/GroupServiceImpl.java
@ -129,6 +129,15 @@ public class GroupServiceImpl implements GroupService {
            } else {
                groupInfo.setShowUnit(groupInfo.getUnit());
            }
+            if(groupInfo.getVersion() == null){
+                groupInfo.setVersion("");
+            }
+            if(groupInfo.getBrand() == null){
+                groupInfo.setBrand("");
+            }
+            if(groupInfo.getCreateTime() != null){
+                groupInfo.setShowCreateTime(DateUtil.TimeStampToDateTime(groupInfo.getCreateTime()));
+            }
        }
        return groupByCondition;
    }
--- a/src/main/resources/templates/pages/group/group-out_mobile.html
+++ b/src/main/resources/templates/pages/group/group-out_mobile.html
@ -0,0 +1,170 @@
+<!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-block">
+                                <input type="text" name="createTime" id="date" placeholder="请选择创建日期"
+                                       autocomplete="off" class="layui-input">
+                            </div>
+                        </div>
+
+                        <div class="layui-inline">
+                            <label class="layui-form-label">组合名称</label>
+                            <div class="layui-input-block">
+                                <input type="text" name="name" 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">
+                                <select id="state" name="state">
+                                    <option value="" selected>请选择状态</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_group"></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>
+    // 用于查看并修改组合中的物料信息
+    function showDetail(){
+
+    }
+    layui.use(['form', 'flow', 'laydate'], function () {
+        var $ = layui.jquery,
+            form = layui.form,
+            flow = layui.flow,
+            laydate = layui.laydate;
+
+        let takingPre = 0;
+        let size = 8;
+        //日期
+        laydate.render({
+            elem: '#date'
+        });
+
+        flow.load({
+            elem: '#LAY_group' //流加载容器
+            , done: function (page, next) { //执行下一页的回调
+                let result;
+                let lis = [];
+
+                $.get('/group/findAllGroup?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].gname + '</h2></div>');
+                        lis.push('<div class="layui-col-md4 my-info" style="margin-left: 15px; color: #999;font-size: 15px;">'
+                            +'<p style="font-size: large">' + result[i].code + '</p>'
+                            +'<p>' + Object.keys(result[i].materialSimple).toString() + '</p>'
+                            + '<p>' +result[i].remark + '</p>'
+                            + '<p style="text-align: right">' +result[i].createTime + '</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;
+            if (data.code !== '') {
+                req.code = data.code;
+            }
+            if(data.createTime !== ''){
+                req.createTime = data.createTime;
+            }
+            if(data.state !== ''){
+                req.state = data.state;
+            }
+            if(data.name !== ''){
+                req.gname = data.name;
+            }
+
+            //执行搜索重载
+            table.reload('currentTableId', {
+                url: '/group/findAllGroup',
+                page: {
+                    curr: 1
+                },
+                where: req
+            }, 'data');
+            return false;
+        });
+
+
+        //用于查看并修改组合中的物料信息
+        showDetail = function (obj) {
+            var index = layer.open({
+                title: '组合详情',
+                type: 2,
+                shade: 0.2,
+                maxmin: true,
+                shadeClose: true,
+                area: ['100%', '100%'],
+                content: '/group_edit?id='+obj,
+                end:function () {
+                }
+            });
+            $(window).on("resize", function () {
+                layer.full(index);
+            });
+
+        };
+
+    })
+
+</script>
+</body>
+</html>
--- a/src/main/resources/templates/pages/group/group_edit_mobile.html
+++ b/src/main/resources/templates/pages/group/group_edit_mobile.html
@ -0,0 +1,196 @@
+<!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">
+        <input id="id" th:value="${id}" style="display:none;">
+
+        <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" name="gname" id="gname" placeholder="请输入组合名称"
+                                       th:value="${record.getGname()}" onblur="editGroupName(this)"
+                                       autocomplete="off" class="layui-input">
+                                <input type="text" name="gid" id="gid" placeholder="请输入组合名称"
+                                       th:value="${record.getId()}" style="display:none;"
+                                       autocomplete="off" class="layui-input">
+                            </div>
+                        </div>
+
+                        <div class="layui-inline">
+                            <label class="layui-form-label">备注说明</label>
+                            <div class="layui-input-block">
+                                <input type="text" name="applyRemark" id="applyRemark" placeholder="请输入备注说明"
+                                       th:value="${record.getRemark()}" onblur="editGroupRemark(this)"
+                                       autocomplete="off" class="layui-input">
+                            </div>
+                        </div>
+                        <div class="layui-inline">
+                            <label class="layui-form-label">组合编码</label>
+                            <div class="layui-input-block">
+                                <input type="text" name="gcode" id="gcode" placeholder="请输入组合编码"
+                                       th:value="${record.getCode()}" readonly
+                                       autocomplete="off" class="layui-input">
+                            </div>
+                        </div>
+
+                    </div>
+
+                </form>
+            </div>
+        </fieldset>
+
+        <ul class="flow-default" id="LAY_group"></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>
+    // 用于通过编码查询物料
+    function selectMaterialByCode(obj) {
+    }
+
+    // 用于点击搜索按钮
+    function selectMaterial(obj) {
+    }
+
+    // 用于修改组合名称
+    function editGroupName(obj) {
+    }
+
+    // 用于修改组合备注
+    function editGroupRemark(obj) {
+    }
+
+    // 用于创建二维码
+    function createQrCode(obj) {
+    }
+
+    layui.use(['form', 'flow'], function () {
+        var $ = layui.jquery,
+            form = layui.form,
+            flow = layui.flow;
+        // 加载表格
+
+        let takingPre = 0;
+        let size = 8;
+        let id = $("#id").val();
+        flow.load({
+            elem: '#LAY_group' //流加载容器
+            , done: function (page, next) { //执行下一页的回调
+                let result;
+                let lis = [];
+
+                $.get('/group/findGroupInfo?page=' + page + '&size=' + size + '&gid=' + id, 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].mid + ')"><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 style="font-size: large">' + result[i].mcode + '</p>'
+                            + '<p>' + result[i].version + '</p>'
+                            + '<p>' + result[i].brand + '</p>'
+                            + '<p>' + result[i].quantity + ":" + result[i].showUnit + '</p>'
+                            + '<p style="text-align: right">' + result[i].showCreateTime + '</p>'
+                            + '</div></div></li>');
+                    }
+                    lis.push('</div>');
+                    takingPre += result.length;
+                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
+                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
+                    next(lis.join(''), takingPre < res.count);
+                });
+            }
+        });
+
+
+        // 用于修改组合名称
+        editGroupName = function (obj) {
+            let gid = $("#gid").val();
+            let gname = obj.value;
+            let req = {};
+            req.id = gid;
+            req.gname = gname;
+            $.ajax({
+                url: '/group/editGroupInfo',
+                dataType: "json",
+                type: "post",
+                data: JSON.stringify(req),
+                contentType: "application/json;charset=utf-8",
+                success: function (data) {
+                    if (data.status >= 300) {
+                        layer.msg(data.statusInfo.message);//失败的表情
+
+                    } else {
+
+                    }
+                }
+
+            });
+        };
+
+        // 用于修改组合备注
+        editGroupRemark = function (obj) {
+            let gid = $("#gid").val();
+            let applyRemark = obj.value;
+            let req = {};
+            req.id = gid;
+            req.applyRemark = applyRemark;
+            $.ajax({
+                url: '/group/editGroupInfo',
+                dataType: "json",
+                type: "post",
+                data: JSON.stringify(req),
+                contentType: "application/json;charset=utf-8",
+                success: function (data) {
+                    if (data.status >= 300) {
+                        layer.msg(data.statusInfo.message);//失败的表情
+
+                    } else {
+
+                    }
+                }
+
+            });
+        };
+
+        showDetail = function(obj) {
+            layer.open({
+                type: 2,
+                title: "物料明细",
+                skin: 'layui-layer-rim',
+                maxmin: true,
+                shadeClose: true, //点击遮罩关闭层
+                area: ['100%', '100%'],
+                move: '.layui-layer-title',
+                fixed: false,
+                content: '/materialForGroup?mid='+obj+'&gid='+id,
+                end:function () {
+                }
+            });
+}
+
+
+    })
+</script>
+</body>
+</html>