tmzn
/
jinzaifoodadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
							<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产任务上传记录</title>
    <meta name="keywords" content="生产任务,上传记录">
    <meta name="description" content="生产任务上传记录管理页面">
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="${ctx}/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .required::before {
            content: '*';
            color: red;
            margin-right: 5px;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-container {
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <div class="row">
                        <div class="col-sm-10">
                            <h3>生产任务上传记录</h3>
                        </div>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="row row-lg mb-4">
                        <div class="col-lg-12">
                            <form id="searchForm" class="form-horizontal">
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <label for="createTime" class="form-label">创建时间</label>
                                        <input type="date" class="form-control" id="createTime" name="createTime">
                                    </div>
                                    <div class="col-sm-3">
                                        <label for="factoryName" class="form-label">工厂名称</label>
                                        <input type="text" class="form-control" id="factoryName" name="factoryName" placeholder="请输入工厂名称">
                                    </div>
                                    <div class="col-sm-3">
                                        <label for="productName" class="form-label">产品名称</label>
                                        <input type="text" class="form-control" id="productName" name="productName" placeholder="请输入产品名称">
                                    </div>
                                    <div class="col-sm-3">
                                        <label for="wmsStatus" class="form-label">WMS状态</label>
                                        <select class="form-select" id="wmsStatus" name="wmsStatus">
                                            <option value="">全部</option>
                                            <option value="1">成功</option>
                                            <option value="2">失败</option>
                                            <option value="3">重试中</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 text-right">
                                        <button type="button" id="searchBtn" class="btn btn-success ms-2" onclick="search();return false;">
                                            <i class="fas fa-search"></i> 查询
                                        </button>
                                        <button type="button" id="resetBtn" class="btn btn-secondary ms-2" onclick="reset();return false;">
                                            <i class="fas fa-sync-alt"></i> 重置
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="row row-lg mt-3">
                        <div class="col-sm-12">
                            <table id="table" data-toggle="table" data-mobile-responsive="true"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="${ctx}/js/bootstrap-select.min.js"></script>
<!-- jQuery Validation plugin javascript-->
<script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx}/js/common.js"></script>
<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
<script src="${ctx}/js/Math.uuid.js"></script>
<!-- 自定义js -->
<script src="${ctx}/js/content.js?v=1.0.0"></script>
</body>
<script>
    var table = null;

    $(document).ready(function () {
        table = $('#table').bootstrapTable("destroy");
        initTable();
    });

    function queryParams(param) {
        // 获取查询参数
        let createTime = $.trim($("#createTime").val());
        let factoryName = $.trim($("#factoryName").val());
        let productName = $.trim($("#productName").val());
        let wmsStatus = $.trim($("#wmsStatus").val());

        if (createTime) {
            param['createTime'] = createTime;
        }
        if (factoryName) {
            param['factoryName'] = factoryName;
        }
        if (productName) {
            param['productName'] = productName;
        }
        if (wmsStatus) {
            param['wmsStatus'] = wmsStatus;
        }

        return param;
    }

    function search() {
        table = $('#table').bootstrapTable("destroy");
        initTable();
    }

    function reset() {
        $("#searchForm")[0].reset();
        table = $('#table').bootstrapTable("destroy");
        initTable();
    }

    function reupload(id) {
        layer.confirm('确定要重传该记录吗？', {
            btn: ['确定', '取消']
        }, function () {
            // 模拟重传操作
            setTimeout(function() {
                layer.msg('重传成功', {icon: 6});
                // 刷新表格
                search();
            }, 1000);
        });
    }

    function initTable() {
        // 模拟数据
        var mockData = generateMockData();

        table = $('#table').bootstrapTable({
            data: mockData,
            method: 'get',
            sortable: true,
            toolbar: '#toolbar',    //工具按钮用哪个容器
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,     //是否显示分页（*）
            pageNumber: 1,      //初始化加载第一页，默认第一页
            pageSize: 10,      //每页的记录行数（*）
            pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
            queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
            // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
            sidePagination: "client",   //客户端分页
            strictSearch: false,
            minimumCountColumns: 2,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            idField: "id",
            paginationDetailHAlign: 'right', // 将分页详细信息放在右边
            columns: [{
                field: 'checkbox',
                title: '<input type="checkbox" id="checkAll">',
                checkbox: true,
                align: 'center',
                formatter: function (value, row, index) {
                    return {
                        checked: false
                    };
                },
                width: "5%"
            }, {
                title: '序号',
                align: 'center',
                formatter: function (value, row, index) {
                    // 使用this关键字访问表格实例
                    var pageNumber = this.pageNumber || 1;
                    var pageSize = this.pageSize || 10;
                    return (pageNumber - 1) * pageSize + index + 1;
                },
                width: "5%"
            }, {
                field: 'factoryName',
                title: '工厂名称',
                align: 'center',
                width: "15%"
            }, {
                field: 'lineName',
                title: '产线名称',
                align: 'center',
                width: "15%"
            }, {
                field: 'batchNumber',
                title: '批次号',
                align: 'center',
                width: "15%"
            }, {
                field: 'transferredToDataCenter',
                title: '已传到数据中台',
                align: 'center',
                formatter: function (value) {
                    if (value === 1) {
                        return '<span class="label label-success">是</span>';
                    } else {
                        return '<span class="label label-danger">否</span>';
                    }
                },
                width: "10%"
            }, {
                field: 'createTime',
                title: '创建时间',
                align: 'center',
                width: "15%"
            }, {
                field: 'wmsStatus',
                title: 'WMS状态',
                align: 'center',
                formatter: function (value) {
                    if (value === 1) {
                        return '<span class="badge bg-success">成功</span>';
                    } else if (value === 2) {
                        return '<span class="badge bg-danger">失败</span>';
                    } else if (value === 3) {
                        return '<span class="badge bg-warning">重试中</span>';
                    } else {
                        return '-';
                    }
                },
                width: "10%"
            }, {
                field: 'transferredToPlatform',
                title: '已传到平台',
                align: 'center',
                formatter: function (value) {
                    if (value === 1) {
                        return '<span class="label label-success">是</span>';
                    } else {
                        return '<span class="label label-danger">否</span>';
                    }
                },
                width: "10%"
            }, {
                title: '操作',
                align: 'center',
                width: "10%",
                formatter: function (value, row) {
                    // 只有失败和重试中可以重传
                    if (row.wmsStatus === 2 || row.wmsStatus === 3) {
                        return '<button class="btn btn-primary btn-sm" onclick="reupload(' + row.id + ')">重传</button>';
                    } else {
                        return '-';
                    }
                }
            }],
            onLoadSuccess: function (data) {
                console.log("数据加载成功", data);
                // 全选框事件
                $('#checkAll').on('change', function() {
                    var checked = $(this).prop('checked');
                    $('#table').bootstrapTable('checkAll');
                    if (!checked) {
                        $('#table').bootstrapTable('uncheckAll');
                    }
                });
            },
            onLoadError: function () {
                layer.msg('数据加载失败', {icon: 2});
            }
        });
    }

    // 生成模拟数据
    function generateMockData() {
        var factories = ['金华工厂', '杭州工厂', '上海工厂', '苏州工厂', '广州工厂'];
        var lines = ['A线', 'B线', 'C线', 'D线', 'E线'];
        var products = ['食品A', '食品B', '食品C', '食品D', '食品E'];
        var mockData = [];

        for (var i = 1; i <= 50; i++) {
            var wmsStatus = Math.floor(Math.random() * 3) + 1; // 1-3
            var date = new Date();
            date.setDate(date.getDate() - Math.floor(Math.random() * 30));
            var formattedDate = date.toISOString().split('T')[0];

            mockData.push({
                id: i,
                factoryName: factories[Math.floor(Math.random() * factories.length)],
                lineName: '产线' + lines[Math.floor(Math.random() * lines.length)],
                batchNumber: 'BAT' + Date.now().toString().slice(-6) + i,
                transferredToDataCenter: Math.floor(Math.random() * 2), // 0或1
                createTime: formattedDate,
                wmsStatus: wmsStatus,
                transferredToPlatform: Math.floor(Math.random() * 2) // 0或1
            });
        }

        return mockData;
    }
</script>
</html>