receiptContainerDetail.html 17.4 KB
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="row">
    <div class="col-sm-12 select-info">
        <form id="receiptContainerDetail-form">
            <div class="select-list">
                <ul>
                    <li>
                        物料类型:
                        <select name="type" >
                            <option value="">所有</option>
                            <option value="1">电池包</option>
                        </select>
                    </li>
                    <li>物料编码:<input type="text" name="materialCode"/></li>
                    <li>物料名称:<input type="text" name="materialName"/></li>
                    <li>电池包二维码 :<input type="text" name="batteryPackTwoCode"/></li>
                    <li>国家编码:<input type="text" name="countryCode"/></li>
                    <li>WMS入库单号:<input type="text" name="receiptCode"/></li>
                    <li>原料批号:<input type="text" name="materialBatch"/></li>


                    <li>组盘头ID:<input id="receiptContainerId" type="text" name="receiptContainerId" readonly/></li>
                    <li>库位编号:<input id="locationCode" type="text" name="locationCode"/></li>
                    <li>容器编号:<input id="containerCode" type="text" name="containerCode"/></li>
                    <li>物料规格:<input type="text" name="materialSpec"/></li>
                    <li>入库单子ID:<input type="text" name="receiptDetailId"/></li>
                    <li class="time2" style="height:30px">
                        <label>创建时间: </label>
                        <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="createdBegin"/>
                        <span>-</span>
                        <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="createdEnd"/>
                    </li>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('receiptContainerDetail-form')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>

    <div class="btn-group hidden-xs" id="toolbar" role="group">
<!--        <a class="btn btn-outline btn-danger btn-rounded" onclick="report()">-->
<!--            <i class="fa fa-eye"></i> 打印-->
<!--        </a>-->
        <div class="zkc pull-left" style="margin-left: 200px">
            <label class="pull-left">库存数:</label>
            <div class="pull-left">
                <input id="currentPageQtyTotal" name="currentPageQtyTotal" class="form-control" type="text" readonly style="width: 50%">
            </div>
            <label>电量:</label>
            <div class="pull-right">
                <input id="currentPageElectricTotal" name="currentPageElectricTotal" class="form-control" type="text" readonly style="width: 50%">
            </div>
        </div>
    </div>

    <div class="col-sm-12 select-info">
        <table id="bootstrap-table" data-mobile-responsive="true" class="table table-bordered table-hover text-nowrap"></table>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var ctx = [[${#request.getContextPath()}]] || '/wms';
    if (ctx.slice(-1) !== '/') {
        ctx += '/';
    }
    var prefix = ctx + "receipt/receiptContainerDetail";
    var inventoryStatus = [[${@dict.getType('inventorySts')}]];
    var inventoryLock = [[${@dict.getType('inventoryLock')}]];
    var company =[[${@companyService.getCode()}]];
    var dayShift = [[${@dict.getType('dayShift')}]];
    var batteryPackType = [[${@dict.getType('batteryPackType')}]];
    var batteryTypes = [[${@dict.getType('batteryTypes')}]];
    var supplier =[[${@SupplierService.getCode()}]];
    var completeness = [[${@dict.getType('completeness')}]];
    var taskType=[[${@dict.getType('taskType')}]];
    var receiptContainerHeaderStatus = [[${@dict.getType('receiptContainerHeaderStatus')}]];

    // 全局变量存储组盘头ID
    var globalReceiptContainerId = "";

    $(function () {
        // 1. 解析URL中的组盘头ID
        parseReceiptContainerId();
        // 2. 初始化表格
        update();
    });

    // 增强版URL解析函数(兼容路径/参数两种方式)
    function parseReceiptContainerId() {
        // 方案1:从URL参数提取(优先级最高)
        let urlParams = new URLSearchParams(window.location.search);
        let paramId = urlParams.get('receiptContainerId');
        if (paramId) {
            globalReceiptContainerId = parseInt(paramId) || "";
        } else {
            // 方案2:从URL路径中提取(最后一个数字段)
            let idMatch = window.location.pathname.match(/(\d+)$/);
            if (idMatch && idMatch[1]) {
                globalReceiptContainerId = parseInt(idMatch[1]) || "";
            }
        }
        console.log("明细页面解析到的组盘头ID:", globalReceiptContainerId);
        // 回显到输入框并设置表单值
        if (globalReceiptContainerId) {
            $("#receiptContainerId").val(globalReceiptContainerId);
            $("input[name='receiptContainerId']").val(globalReceiptContainerId);
        }
    }

    function update() {
        let options = {
            url : prefix + "/receiptContainerDetailLook",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "入库组盘明细",
            sortable: true,
            sortStable: true,
            showExport: true,
            sortName: "id",
            sortOrder: "desc",
            pageList: [10, 25, 50, 100,1000,5000],
            search: false,
            // 全局查询参数配置(每次请求都携带ID)
            queryParams: function(params) {
                var queryParams = {
                    pageSize: params.limit,
                    pageNum: params.offset / params.limit + 1,
                    orderByColumn: params.sort,
                    isAsc: params.order,
                    // 核心:强制传递组盘头ID
                    receiptContainerId: globalReceiptContainerId || $("#receiptContainerId").val(),
                    // 其他筛选参数
                    createdBegin: $("input[name='createdBegin']").val(),
                    createdEnd: $("input[name='createdEnd']").val(),
                    type: $("select[name='type']").val(),
                    materialCode: $("input[name='materialCode']").val(),
                    materialName: $("input[name='materialName']").val(),
                    batteryPackTwoCode: $("input[name='batteryPackTwoCode']").val(),
                    countryCode: $("input[name='countryCode']").val(),
                    receiptCode: $("input[name='receiptCode']").val(),
                    materialBatch: $("input[name='materialBatch']").val(),
                    taskType: $("select[name='taskType']").val(),
                    status: $("select[name='status']").val(),
                    locationCode: $("input[name='locationCode']").val(),
                    containerCode: $("input[name='containerCode']").val(),
                    materialSpec: $("input[name='materialSpec']").val(),
                    receiptDetailId: $("input[name='receiptDetailId']").val()
                };
                console.log("明细页面查询参数:", queryParams);
                return queryParams;
            },
            onLoadSuccess: function (res) {
                let count = 0;
                let count2 = 0;
                if (res && res.rows && res.rows.length > 0) {
                    res.rows.map(item => {
                        count +=item.qty || 0;
                        count2 +=item.electricQuantity || 0;
                    });
                }
                $("#currentPageQtyTotal").val(count.toFixed(0));
                $("#currentPageElectricTotal").val(count2.toFixed(2));
            },
            columns: [
                {checkbox: true},
                {
                    field: 'batteryPackImage',
                    title: '电池包图片',
                    align: 'center',
                    width: '100px',
                    formatter: function(value, row, index) {
                        if (row.batteryPackTwoCode) {
                            var imageUrl = '/wms/inventory/inventoryDetail/viewBatteryPackImage?batteryPackTwoCode=' +
                                encodeURIComponent(row.batteryPackTwoCode) + '&t=' + new Date().getTime();

                            return '<div style="cursor:pointer;" onclick="viewBatteryPackImage(\'' + row.batteryPackTwoCode + '\')">' +
                                '<img src="' + imageUrl + '" style="width:50px; height:50px; object-fit:cover; border-radius:4px;" ' +
                                'onerror="this.onerror=null;this.style.display=\'none\'" ' +
                                'title="点击查看大图" />' +
                                '</div>';
                        }
                        return '-';
                    }
                },
                {field: 'containerCode', title: '容器编号', visible: true},
                {field: 'receiptCode', title: '入库单号', visible: true},
                {field : 'batteryPackTwoCode', title : '电池包二维码'},
                {field: 'materialCode', title: '物料编码'},
                {field: 'materialName', title: '物料名称'},
                {field: 'materialSpec', title: '物料规格', align: 'center'},
                {field: 'materialUnit', title: '物料单位', align: 'center'},
                {field: 'qty', title: '数量', align: 'center'},
                {field : 'electricQuantity', title : '电池包电量(kWh)', align: 'center'},
                {field : 'materialBatch', title : '原料批号'},
                {field : 'poundCode', title : '过磅单号'},
                {field : 'recycler', title : '回收人'},
                {field : 'materialGrossWeight', title : '电池毛重(kg)', align: 'center'},
                {field : 'materialTareWeight', title : '电池皮重(kg)', align: 'center'},
                {field : 'materialNetWeight', title : '电池净重(kg)', align: 'center'},
                {field: 'locationCode', title: '库位编号'},
                {
                    field : 'taskType',
                    title : '任务类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(taskType, value);
                    }
                },
                {
                    field : 'supplierCode',
                    title : '供应商',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        $.each(supplier, function(index, dict) {
                            if (dict.code == value) {
                                actions.push("<span class='badge badge-info'>" + dict.name + "</span>");
                                return false;
                            }
                        });
                        return actions.join('');
                    }
                },
                {field : 'countryCode', title : '国家编码'},
                {field : 'remark', title : '电池包入库备注'},
                {field : 'completeness', title : '完整程度', formatter: function(value, row, index) {
                        return $.table.selectDictLabel(completeness, value);
                    }},
                {
                    field : 'batteryTypes',
                    title : '电池产品类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(batteryTypes, value);
                    }
                },
                {
                    field : 'batteryPackType',
                    title : '电池包种类',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(batteryPackType, value);
                    }
                },
                {
                    field : 'status',
                    title : '任务状态',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(receiptContainerHeaderStatus, value);
                    }
                },
                {field: 'receiptDetailId', title: '入库单明细ID', visible: true},
                {field: 'id', title: '明细ID', align: 'center'},
                {field: 'receiptContainerId', title: '组盘头ID', align: 'center'},
                {field: 'created', title: '入库日期', sortable: true},
                {field: 'createdBy', title: '创建用户', visible: false},
                {field: 'lastUpdated', title: '最后修改时间', sortable: true},
                {field: 'lastUpdatedBy', title: '更新用户'}
            ]
        };

        $.table.init(options);

        // 强制触发搜索(确保ID传递)
        if (globalReceiptContainerId) {
            $.table.search();
            console.log("明细页面自动触发搜索,ID:", globalReceiptContainerId);
        }
    }

    // 电池包图片预览
    function viewBatteryImage(batteryPath) {
        if (!batteryPath) {
            $.modal.alertWarning("电池包图片路径为空");
            return;
        }
        var imageUrl = ctx + batteryPath + '?t=' + new Date().getTime();
        var testImg = new Image();
        testImg.onload = function() {
            openImageModal(batteryPath, imageUrl);
        };
        testImg.onerror = function() {
            $.modal.alertError("图片加载失败,请检查路径是否正确");
        };
        testImg.src = imageUrl;
    }

    function openImageModal(batteryPath, imageUrl) {
        var winWidth = window.innerWidth || document.documentElement.clientWidth;
        var winHeight = window.innerHeight || document.documentElement.clientHeight;
        var modalWidth = (winWidth * 0.95) + 'px';
        var modalHeight = (winHeight * 0.95) + 'px';

        var imageHtml = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f5f5;padding:10px;">' +
            '<img src="' + imageUrl + '" style="max-width:100%;max-height:100%;object-fit:contain;" />' +
            '</div>';

        var index = layer.open({
            type: 1,
            title: "电池包图片 - " + batteryPath,
            content: imageHtml,
            area: [modalWidth, modalHeight],
            maxmin: true,
            shade: 0.3,
            shadeClose: true,
            success: function(layero) {
                setTimeout(function() {
                    var maxBtn = layero.find('.layui-layer-max')[0];
                    if (maxBtn) maxBtn.click();
                }, 300);
                var img = layero.find('img')[0];
                var scale = 1;
                img.onwheel = function(e) {
                    e.preventDefault();
                    scale += e.deltaY > 0 ? -0.1 : 0.1;
                    scale = Math.max(0.5, Math.min(scale, 3));
                    img.style.transform = 'scale(' + scale + ')';
                };
                img.ondblclick = function() {
                    scale = 1;
                    img.style.transform = 'scale(1)';
                };
            }
        });
    }

    function report() {
        var rows=$("#bootstrap-table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        var ids = "";
        for(var i=0; i<rows.length; i++) {
            ids = ids + rows[i].id + ","
        }
        let url=prefix+'/report/' + ids;
        $.modal.open("库存打印",url);
    }

    function viewBatteryPackImage(batteryPackTwoCode) {
        if (!batteryPackTwoCode) {
            $.modal.alertWarning("电池包二维码为空");
            return;
        }
        var imageUrl = ctx + 'inventory/inventoryDetail/viewBatteryPackImage?batteryPackTwoCode=' +
            encodeURIComponent(batteryPackTwoCode) + '&t=' + new Date().getTime();

        var testImg = new Image();
        testImg.onload = function() {
            openImageModal(batteryPackTwoCode, imageUrl);
        };
        testImg.onerror = function() {
            $.modal.alertError("图片加载失败,请检查二维码是否正确");
        };
        testImg.src = imageUrl;
    }

    function localSubmit(url, type, dataType, data) {
        $.modal.loading("正在处理中,请稍后...");
        var config = {
            url: url, type: type, dataType: dataType, data: data, success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $.modal.msgSuccess(result.msg);
                } else {
                    $.modal.alertError(result.msg)
                }
                $.modal.closeLoading()
            }
        };
        $.ajax(config)
    }
</script>
</body>
</html>