layer 一个页面两张表单

最新推荐文章于 2022-11-09 17:03:26 发布

狼魂豹速

最新推荐文章于 2022-11-09 17:03:26 发布

阅读量3.9k

点赞数

本文链接：https://blog.csdn.net/liufeifeihuawei/article/details/105506773

版权

在这里插入图片描述

<%@page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<%@ include file="/jsp/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="<%=basePath %>js/layui-v2.5.5/layui/css/layui.css?v=20200101">
</head>
<body>
<div class="layui-fluid " style="width: 35%;margin-top:5px;float: left">
    <div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="job-tbl" lay-filter="job-tbl"></table>
            </div>
        </div>
    </div>
</div>
<div class="layui-fluid " style="width: 55%;margin-top:5px;float: right;">
    <div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="work-tbl" lay-filter="work-tbl"></table>
            </div>
        </div>
    </div>
</div>
<!-- 工具栏模板： -->
<script type="text/html" id="job-tbl-toolbar">
    <div class="layui-btn-container">
       <div class="layui-inline">
                    <label class="layui-form-label">订单号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="_dingdan" placeholder="请输入订单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline"  style="margin-top: 4%;margin-left: 2px">
                    <button  class="layui-btn layui-btn-sm" lay-submit lay-filter="job-tbl-search"><i class="layui-icon layui-icon-search"></i> </button >
                </div>
            </div>
    </div>
</script>

<script type="text/html" id="job-rowtbl-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="DetatilJob">详情</a>
</script>

<!-- layui的引用 js -->
<script type="text/javascript" src="<%=basePath %>js/layui-v2.5.5/layui/layui.js"></script>
<!-- 页面JS -->
<script>
    var basePath = "<%=basePath %>";
</script>

<script type="text/javascript" src="<%=basePath %>jsp/third/jobdata/index.js?v=20201"></script>
</body>
</html>

layui.use(['jquery', 'table', 'layer', 'form'], function () {
    // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
    var $ = layui.$;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;

    //详情列表
    table.render({
        elem: '#work-tbl',
        url: basePath + 'JobData/getDetail.do',
        toolbar: '#groub-tbl-toolbar',
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        method: 'get',
        cols: [[{
            field: '_workCenter',
            title: '工作中心',
            width: 120
        }, {
            field: '_name',
            title: '工序段'
        }, {
            field: '_name',
            title: '基数'
        }, {
            field: '_name',
            title: '标准工时'
        }, {
            field: '_name',
            title: '实际工时'
        }, {
            field: '_name',
            title: '效率'
        }
            /* , {
                 field: '_inputmen',
                 title: '操作人员'
             }, {
                 field: '_inputdate',
                 title: '操作时间'
             }*/, {
                toolbar: '#group-tbl-toolbar',
                title: '操作'
            }]],
        id: 'group-tbl',
    });

    table.render({
        id: 'job-tbl',
        elem: '#job-tbl',
        url: basePath + 'JobData/getList.do',
        toolbar: '#job-tbl-toolbar',
        method: 'get',
        page: true,// 开启分页
        cols: [[{
            field: '_dingdan',
            title: '订单号',
            width: 130,
            sort: true
        }, {
            field: '_number',
            title: '物料号',
            width: 100,
            sort: true
        }, {
            field: '_name',
            width: 150,
            title: '型号',
        },/* {
            field: '_lot',
            title: '批次',
            sort: true,
            templet: '#equipmentTmp'
        }, {
                field: '_inputmen',
                title: '操作人员'
            }, {
                field: '_inputdate',
                title: '操作时间'
            }, */
            {
                toolbar: '#job-rowtbl-toolbar',
                title: '操作',
                width: 80
            }]]
    });

    //查询监听
    form.on('submit(job-tbl-search)', function (data) {
        console.log(data);
        table.reload('job-tbl', {
            where: data.field
        })
    });

// 监听详情
    table.on('tool(job-tbl)', function (obj) {
        var data = obj.data;
        var event = obj.event;
        var _dingdan = data._dingdan;
        if (event === 'DetatilJob') {
            $.ajax({
                url: basePath + 'JobData/getDetail.do',
                type: "GET",
                dataType: 'json',
                data: {'_dingdan': _dingdan},
                success: function (data) {
                    if (data.success) {
                        table.reload('work-tbl');
                    } else {
                    }
                },
                error: function () {
                    console.log("ajax error");
                }
            });
            layer.close();
        }
    });
});

var groupLayer;
var addModuleLayer;
var editModuleLayer;

function selectModuleGroup() {
    groupLayer = layer.open({
        type: 1,
        offset: '100px',
        title: '选择模块分组',
        skin: 'layui-layer-molv',
        area: ['300px'],
        content: $('#group')
    });
}

function changeModuleGroup(_moduleGroupId) {
    var pre = "";
    if (_moduleGroupId == "1") {
        pre = "GXA";
    } else if (_moduleGroupId == "2") {
        pre = "GXB";
    } else if (_moduleGroupId == "3") {
        pre = "GXC";
    }
    $.ajax({
        type: 'POST',
        dataType: "json",
        url: basePath + "module/getMax.do",
        data: {
            '_moduleGroupId': _moduleGroupId
        },
        async: false,
        success: function (data) {
            if (data.success) {
                pre = pre + data.msg;
                $('#_classname').val(pre);
                $('#_orderId').val(data.msg);
                $('#_isenter').val("1");
                $('#_issync').val("0");
            } else {
                alert(data.msg);
            }
        }
    });
}

狼魂豹速

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
layer 一个页面两张表单

<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/jsp/common.jsp" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti...
复制链接

扫一扫