src/main/resources/templates/receipt/receiving/receiving-new.html

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    /*.table-striped-left{*/
    /*	width: 41%;*/
    /*	!*margin-right: 4px;*!*/
    /*}*/
    /*.table-striped-right{*/
    /*	!*right: -10px;*!*/
    /*	width: 58%;*/
    /*	float: right;*/
    /*}*/
    .info_text {
        float: right;
    }
    .info_text li {
        font-size: 16px;
    }
    .info_text li span {
        font-size: 20px;
        font-weight: bold;
        color: rgb(28, 132, 198);
    }
    .select-list {
        font-weight: bold;
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-info">
            <form id="dept-form">
                <div class="select-list">
                    <ul>
                        <li>
                            收货单号：<input type="text" id="code" name="deptName"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" id="list-btn"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                    <ul>
                        <li style="display: none">id：<input type="text" id="detailId"/></li>
                        <li style="margin-left: 120px">收货数量：<input type="text" id="receiveNum"/></li>
                        <li>容器编号：<input type="text" id="containerCode"/></li>
                        <li>
                            <button class="btn btn-sm btn-success" type="button" onclick="receipt()">组盘</button>
                        </li>
                    </ul>
                    <ul class="info_text" style="display: none">
                        <li>物料总数：<span id="material_length"></span></li>
                        <li>总单据数量：<span id="qty_length"></span></li>
                        <li>已收货数量：<span id="qtyCompleted_length"></span></li>
                    </ul>
                </div>
            </form>
        </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 class="col-sm-12 select-info table-striped-bottom">
            <div id="toolbar1" style="color: rgb(28,132,198)">本物料库存</div>
            <table id="bootstrap-table1" data-mobile-responsive="true" class="table table-bordered table-hover"></table>
            <div id="toolbar2" style="color: rgb(28,132,198)">地面储位</div>
            <table id="bootstrap-table2" data-mobile-responsive="true" class="table table-bordered table-hover"></table>
            <div id="toolbar3" style="color: rgb(28,132,198)">本物料交易</div>
            <table id="bootstrap-table3" data-mobile-responsive="true" class="table table-bordered table-hover"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var addFlag = [[${@permission.hasPermi('receipt:receiving:add')}]];
    var removeFlag = [[${@permission.hasPermi('receipt:receiving:remove')}]];
    var prefix = ctx + "receipt/receiving";
    var Types = [[${@dict.getType('taskType')}]];
    var Status = [[${@dict.getType('receiptContainerHeaderStatus')}]];
    var inventoryStatus = [[${@dict.getType('inventoryStatus')}]];
    var uWarehouseNames = [[${@warehouseWu.getName()}]];
    var company = [[${@companyService.getCode()}]];
    var customer = [[${@CustomerService.getCode()}]];
    function list_select(code) {
        $.ajax({
            url: prefix + "/scanBill",
            type: 'post',
            datatype: 'json',
            data: {
                code: code
            },
            error: function (response) {
                console.log(response);
            },
            success: function (value) {
                var qty_show = 0;
                var qtyCompleted_show = 0;
                $("#bootstrap-table").bootstrapTable('removeAll');
                if (value.data) {
                    // $("#bootstrap-table").bootstrapTable('load',value.data);
                    for (var i = 0; i < value.data.length; i++) {
                        if (value.data[i].qty > value.data[i].taskQty) {
                            $("#bootstrap-table").bootstrapTable('insertRow', {
                                index: 0, row: {
                                    projectNo: value.data[i].project,
                                    id: value.data[i].id,
                                    materialName: value.data[i].materialName,
                                    receiptId: value.data[i].receiptId,
                                    receiptCode: value.data[i].receiptCode,
                                    materialCode: value.data[i].materialCode,
                                    qty: value.data[i].qty,
                                    taskQty: value.data[i].taskQty,
                                    inventorySts: value.data[i].inventorySts,
                                    materialUnit: value.data[i].materialUnit
                                }
                            });
                        }
                        qty_show = value.data[i].qty + qty_show;
                        qtyCompleted_show = value.data[i].taskQty + qtyCompleted_show;
                    }
                    $("#material_length").text(value.data.length);
                    $("#qty_length").text(qty_show);
                    $("#qtyCompleted_length").text(qtyCompleted_show);
                } else {
                    console.log("收货单不存在！")
                }
            }
        })
    }
    $("#list-btn").click(initTable);
    $("body").bind("keypress", function (e) {
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            e.preventDefault();
            //回车执行查询
            initTable();
            // list_select($("#code").val());
        }
    });
    function initTable() {
        var receiptCode = $("#code").val();
        list_select(receiptCode);
        $("#bootstrap-table1").bootstrapTable('removeAll');
        $("#bootstrap-table2").bootstrapTable('removeAll');
        $("#bootstrap-table3").bootstrapTable('removeAll');
    }
    $("#bootstrap-table").bootstrapTable({
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        clickToSelect: true,
        pagination: true,   // 是否显示分页（*）
        pageNumber: 1,                                      // 初始化加载第一页，默认第一页
        pageSize: 5,                                       // 每页的记录行数（*）
        pageList: [5, 10, 25, 50, 100],
        modalName: "收货",
        contentType: "application/x-www-form-urlencoded",
        onClickRow: function (row, ele, field) {
            let code = $("#code").val();
            $("#detailId").val(row.id);
            var receiveNum = row.qty - row.taskQty;
            $("#receiveNum").val(receiveNum.toFixed(3));
            $.ajax({
                url: prefix + '/getReceiptInfoByBillKS',
                type: 'post',
                data: {
                    code: code,
                    id: row.id
                },
                success: res => {
                    $("#bootstrap-table1").bootstrapTable('load', res.data.list);
                    $("#bootstrap-table2").bootstrapTable('load', res.data.containers);
                    $("#bootstrap-table3").bootstrapTable('load', res.data.transactionList);
                }
            })
        },
        columns: [
            {
                checkbox: true
            },
            {
                field: 'materialCode',
                title: '物料编码',
                width: '20px'
            },
            {
                field: 'materialName',
                title: "物料名称",
                width: '20px'
            },
            {
                field: 'qty',
                title: '单据数量',
                width: '10px'
            },
            {
                field: 'taskQty',
                title: '已入数量',
                width: '10px'
            },
            {
                field: 'inventorySts',
                title: '库存状态',
                width: '20px'
            },
            {
                field: 'lot',
                title: '批号',
                width: '20px'
            },
            {
                field: 'moCode',
                title: '工作令号',
                width: '120px'
            },
            {
                field: 'id',
                title: '明细id',
                sortable: true
            }
        ]
    });
    $("#bootstrap-table1").bootstrapTable({
        removeUrl: ctx + "receipt/receiptContainerDetail/remove",
        clickToSelect: true,
        showColumns: true, //列选择
        showExport: true, //导出
        iconSize: "outline",
        toolbar: "#toolbar",
        exportDataType: "all",  //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据
        modalName: "入库组盘",
        pagination: true,   // 是否显示分页（*）
        pageNumber: 1,                                      // 初始化加载第一页，默认第一页
        pageSize: 5,                                       // 每页的记录行数（*）
        pageList: [10, 25, 50],
        toolbar: '#toolbar1',
        contentType: "application/x-www-form-urlencoded",
        columns: [
            {
                title: '操作',
                align: 'center',
                events: 'operateEvents',
                formatter: function (value, row, index) {
                    let actions = [];
                    if (row.zoneCode === 'PK') {
                        actions.push('<a id="cancel" class="btn btn-success btn-xs" style="background-color: #ac2925" href="#" onclick="Receiving(\'' + row.locationCode + '\',\'' + row.containerCode + '\')"><i class="fa fa-edit"></i>组盘</a> ');
                    } else {
                        actions.push('<a id="cancel" class="btn btn-success btn-xs " href="#" onclick="Receiving(\'' + row.locationCode + '\',\'' + row.containerCode + '\')"><i class="fa fa-edit"></i>组盘</a> ');
                    }
                    return actions.join('');
                }
            },
            // {
            //     field : 'id',
            //     title : 'id'
            // },
            {
                field: 'companyCode',
                title: '货主',
                align: 'center',
                sortable: true,
                formatter: function (value, row, index) {
                    var actions = [];
                    $.each(company, function (index, dict) {
                        if (dict.code == value) {
                            actions.push("<span class='badge badge-info'>" + dict.name + "</span>");
                            return false;
                        }
                    });
                    return actions.join('');
                }
            },
            {
                field: 'uWarehouseCode',
                title: 'U8仓库',
                align: 'center',
                sortable: true,
                formatter: function (value, row, index) {
                    var actions = [];
                    var companyName = ''
                    for (let item of uWarehouseNames) {
                        if (item.companyCode == row.companyCode && item.uWarehouseCode == value) {
                            return item.uWarehouseName;
                        }
                    }
                    return actions.join('');
                }
            },
            {
                field: 'containerCode',
                title: '容器编号'
            },
            {
                field: 'materialCode',
                title: '存货编码'
            },
            {
                field: 'materialOldCode',
                title: '存货代码'
            },
            {
                field: 'materialName',
                title: '物料名称'
            },
            {
                field: 'materialSpec',
                title: '物料规格'
            },
            {
                field: 'qty',
                title: '数量'
            },
            {
                field: 'locationCode',
                title: '库位编号'
            },
            {
                field: 'moCode',
                title: '工作令号',
                sortable: true
            },
            {
                field: 'supplierCode',
                title: '供应商编码',
                visible: false
            },
            {
                field: 'status',
                title: '库存状态',
                align: 'center',
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(inventoryStatus, value);
                }
            },
        ]
    });
    $("#bootstrap-table2").bootstrapTable({
        removeUrl: ctx + "receipt/receiptContainerDetail/remove",
        clickToSelect: true,
        showColumns: true, //列选择
        showExport: true, //导出
        iconSize: "outline",
        toolbar: "#toolbar",
        exportDataType: "all",  //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据
        modalName: "入库组盘",
        pagination: true,   // 是否显示分页（*）
        pageNumber: 1,                                      // 初始化加载第一页，默认第一页
        pageSize: 5,                                       // 每页的记录行数（*）
        pageList: [10, 25, 50],
        toolbar: '#toolbar2',
        contentType: "application/x-www-form-urlencoded",
        columns: [
            {
                title: '操作',
                align: 'center',
                events: 'operateEvents',
                formatter: function (value, row, index) {
                    let actions = [];
                    if (row.zoneCode === 'PK') {
                        actions.push('<a id="cancel" class="btn btn-success btn-xs" style="background-color: #ac2925" href="#" onclick="Receiving(\'' + row.locationCode + '\',\'' + row.code + '\')"><i class="fa fa-edit"></i>组盘</a> ');
                    } else {
                        actions.push('<a id="cancel" class="btn btn-success btn-xs " href="#" onclick="Receiving(\'' + row.locationCode + '\',\'' + row.code + '\')"><i class="fa fa-edit"></i>组盘</a> ');
                    }
                    return actions.join('');
                }
            },
            {
                field: 'uWarehouseCode',
                title: 'U8仓库',
                align: 'center',
                sortable: true,
                formatter: function (value, row, index) {
                    var actions = [];
                    var companyName = ''
                    for (let item of uWarehouseNames) {
                        if (item.companyCode == row.companyCode && item.uWarehouseCode == value) {
                            return item.uWarehouseName;
                        }
                    }
                    return actions.join('');
                }
            },
            {
                field: 'code',
                title: '容器编号'
            },
            {
                field: 'locationCode',
                title: '库位编号'
            }
        ]
    });
    $("#bootstrap-table3").bootstrapTable({
        removeUrl: ctx + "receipt/receiptContainerDetail/remove",
        clickToSelect: true,
        showColumns: true, //列选择
        showExport: true, //导出
        iconSize: "outline",
        toolbar: "#toolbar",
        exportDataType: "all",  //导出类型basic', 'all', 'selected'.当前页、所有数据、选中数据
        modalName: "入库组盘",
        pagination: true,   // 是否显示分页（*）
        pageNumber: 1,                                      // 初始化加载第一页，默认第一页
        pageSize: 5,                                       // 每页的记录行数（*）
        pageList: [10, 25, 50],
        toolbar: '#toolbar3',
        contentType: "application/x-www-form-urlencoded",
        columns: [
            {
                title: '操作',
                align: 'center',
                events: 'operateEvents',
                formatter: function (value, row, index) {
                    let actions = [];
                    if (row.zoneCode === 'PK') {
                        actions.push('<a id="cancel" class="btn btn-success btn-xs" style="background-color: #ac2925" href="#" onclick="Receiving(\'' + row.locationCode + '\',\'' + row.containerCode + '\')"><i class="fa fa-edit"></i>组盘</a> ');
                    } else {
                        actions.push('<a id="cancel" class="btn btn-success btn-xs " href="#" onclick="Receiving(\'' + row.locationCode + '\',\'' + row.containerCode + '\')"><i class="fa fa-edit"></i>组盘</a> ');
                    }
                    return actions.join('');
                }
            },
            // {
            //     field : 'id',
            //     title : 'id'
            // },
            {
                field: 'containerCode',
                title: '容器编号'
            },
            {
                field: 'materialCode',
                title: '存货编码'
            },
            {
                field: 'materialOldCode',
                title: '存货代码'
            },
            {
                field: 'materialName',
                title: '物料名称'
            },
            {
                field: 'materialSpec',
                title: '物料规格'
            },
            {
                field: 'qty',
                title: '数量'
            },
            {
                field: 'uWarehouseName',
                title: 'U8仓库'
            },
            {
                field: 'companyName',
                title: '货主'
            },
            {
                field: 'created',
                title: '创建时间',
                sortable: true,
                formatter: function (value, row, index) {
                    let time = value.slice(5, 10);
                    return `<span>${time}</span>`
                }
            },
            {
                field: 'moCode',
                title: '工作令号',
                sortable: true
            },
        ]
    });
    window.operateEvents = {
        'click #qty': function (e, value, row, index) {
            var url = prefix + '/add?';
            jQuery.each(row, function (key, val) {
                url = url + key + "=" + encodeURI(val) + "&";
            });
            var modalName = "入库组盘";
            $.modal.open("添加" + modalName, url);
        }
    };
    function receiving_refresh() {
        var receiving_code = localStorage.getItem("receiving_code");
        $("#code").val(receiving_code);
        if (receiving_code) {
            initTable();
        }
        localStorage.removeItem("receiving_code");
    }
    receiving_refresh();
    //组盘
    function receipt() {
        let num = $("#receiveNum").val();
        let containerCode = $("#containerCode").val();
        let locationCode = '';
        debugger;
        if (num == 0) {
            receiptSelect(containerCode);
        } else {
            Receiving(locationCode, containerCode);
        }
    }
    function receiptSelect(containerCode) {
        var rows = $("#bootstrap-table").bootstrapTable('getSelections');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        var ids = rows.map(function (v) {
            return v.id;
        }).join(',');
        $.ajax({
            url: ctx + "receipt/receiving/saveAll",
            type: 'post',
            data: {
                ids: ids,
                receiptContainerCode: containerCode
            },
            success: function (data) {
                if (data.code === 200) {
                    $.modal.msgSuccess('成功');
                    initTable();
                } else {
                    $.modal.msg(data.msg);
                }
            }
        })
    }
    /**
     * 组盘
     * @param locationCode
     * @param containerCode
     */
    function Receiving(locationCode, containerCode) {
        let receiptCode = $("#code").val();
        let num = $("#receiveNum").val();
        let receiptDetailId = $("#detailId").val();
        $.ajax({
            url: ctx + "receipt/receiving/save",
            type: 'post',
            data: {
                receiptCode: receiptCode,
                qty: num,
                receiptDetailId: receiptDetailId,
                locationCode: locationCode,
                containerCode: containerCode
            },
            success: function (data) {
                if (data.code === 200) {
                    debugger;
                    $.modal.msgSuccess('成功');
                    initTable();
                } else {
                    $.modal.alertError(data.msg);
                }
            }
        })
    }
</script>
</body>
</html>