cbgReceipt.html 20 KB

Edit Raw Blame History

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header"/>
    <!--    <th:block th:include="include :: select2-css"/>-->
    <script src="/wms/js/jquery.min.js"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-cbgReceipt">
        <div class="form-group">
            <label class="col-sm-1 control-label">单据类型：</label>
            <div class="col-sm-2">
                <select id="receiptType" name="receiptType" class="form-control"
                        th:with="receiptTypeList=${@receiptTypeService.getType()}">
                    <option th:selected="${receiptType['code']} == 'CBGR'" th:each="receiptType : ${receiptTypeList}" th:text="${receiptType['name']}"
                            th:value="${receiptType['code']}"></option>
                </select>
            </div>
            <label class="col-sm-1 control-label">工单号：</label>
            <div class="col-sm-2">
                <div class="input-group">
                    <input class="form-control" type="text" placeholder="请扫描工单号" value="" id="orderCode"/>
                    <span class="input-group-btn">
                        <button type="button" onclick="chooseOrder()" id="chooseOrderBtn"
                                class="btn btn-primary">选取工单
                        </button>
                    </span>
                </div>
            </div>
            <label class="col-sm-1 control-label">生产令号：</label>
            <div class="col-sm-2">
                <input class="form-control" type="text" placeholder="请扫描生产令号" value="" id="orderNumber"/>
            </div>
            <label class="col-sm-1 control-label">生产批号：</label>
            <div class="col-sm-2">
                <input class="form-control" type="text" placeholder="请扫描生产批号" value="" id="batchNumber"/>
            </div>
        </div>
        <div class="col-sm-12 select-info">
            <div id="myTabContent" class="tab-content">
                <div class="form-group" style="margin-top: 10px">
                    <label class="col-sm-1 control-label">盛具编码：</label>
                    <div class="col-sm-2">
                        <input class="form-control" placeholder="请扫描盛具编码" name="vehicleCode"
                               id="vehicleCode"/>
                    </div>
                    <label class="col-sm-1 control-label">追溯码：</label>
                    <div class="col-sm-3">
                        <input class="form-control" id="tracingNo" name="tracingNo" type="text" placeholder="请扫描物料追溯码">
                    </div>
                    <label class="col-sm-1 control-label">数量：</label>
                    <div class="col-sm-1 input-group" style="float: inline-start">
                        <input class="form-control" min="0" placeholder="请输入数量" readonly="readonly" id="qty">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="qtySure()" id="qtySureButton">确定</button>
                        </span>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 10px">
                    <div class="col-sm-10" style="display: flex; justify-content: flex-end">
                        <span style="line-height: 34px" id="scanCount"></span>
                    </div>
                    <div class="col-sm-2" style="display: flex; justify-content: flex-end">
                        <a class="btn btn-primary" onclick="cbgReceipt()" type="button">提交</a>&nbsp;&nbsp;
                        <a class="btn btn-danger" onclick="$.modal.close()" type="button">关闭</a>
                    </div>
                </div>
                <table id="bootstrap-table" data-mobile-responsive="true"
                       class="table table-bordered table-hover text-nowrap">
                </table>
            </div>
        </div>
    </form>

</div>
<th:block th:include="include :: footer"/>
<!--<th:block th:include="include :: select2-js"/>-->
<script type="text/javascript">
    let prefix = ctx + "inventory/inventoryHeader"
    $("#form-cbgReceipt").validate({
        rules: {
            orderCode: {
                required: true,
            },
        },
    });

    let vehicleData = null;  // 当前扫描的盛具
    let material = null; // 扫描的物料
    let tableDataList = []; //表格中的数据
    let currentX = 1; //当前x坐标
    let currentY = 1; //当前y坐标

    $(function () {
        // 表格初始化
        $("#bootstrap-table").bootstrapTable({
            showToggle: false,
            showRefresh: false,
            showColumns: false,
            showSearch: false,
            columns: [
                {
                    field: 'vehicleCode',
                    title: '盛具编码'
                },
                {
                    field: 'materialCode',
                    title: '物料编码'
                },
                {
                    field: 'materialName',
                    title: '物料名称'
                },
                {
                    field: 'materialSpec',
                    title: '物料规格'
                },
                {
                    field: 'materialUnit',
                    title: '物料单位'
                },
                {
                    field: 'description',
                    title: '物料描述'
                },
                {
                    field: 'weight',
                    title: '药量(g)'
                },
                {
                    field: 'high',
                    title: '高度(cm)'
                },
                {
                    field: 'x',
                    title: 'x坐标'
                },
                {
                    field: 'y',
                    title: 'y坐标'
                },
                {
                    field: 'scTracingNo',
                    title: '生产追溯码'
                },
                {
                    field: 'bqTracingNo',
                    title: '标签追溯码'
                },
                {
                    field: 'supplierCode',
                    title: '供应商编码'
                },
                {
                    field: 'supplierBatch',
                    title: '供应商批次码'
                },
                {
                    field: 'supplierTracingNo',
                    title: '供应商SN码'
                },
                {
                    field: "action",
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (index !== 0) {
                            return
                        }
                        let rowStr = JSON.stringify(row)
                        let actions = [];
                        actions.push(`<a class='btn btn-danger btn-xs' href='#' onclick='remove(${rowStr})'><i class='fa fa-trash-o'></i>删除</a>`);
                        return actions.join('');
                    }
                }]
        });

        // 追溯码输入框输入事件
        $('#tracingNo').on('input', debounce(function () {
            let value = this.value;
            if ($.common.isEmpty(value)) {
                return;
            }
            if ($.common.isEmpty(vehicleData)) {
                $("#vehicleCode").focus();
                $.modal.msgWarning("请先扫描盛具码")
                clearTracingNo();
                return;
            }

            handleM(value);
        }, 600));

        // 盛具编码绑定输入事件
        $('#vehicleCode').on('input', debounce(function () {
            let vehicleCode = this.value;
            if ($.common.isEmpty(vehicleCode) || (vehicleData != null && vehicleCode === vehicleData.code)) {
                return
            }
            $.ajax({
                cache: true,
                type: "get",
                dataType: "json",
                url: "/wms/config/vehicle/getVehicleData",
                async: false,
                data: {
                    vehicleCode: vehicleCode,
                },
                contentType: "application/json",
                error: function (result) {
                    $.operate.ajaxSuccess(result);
                },
                success: function (result) {
                    if (result.code === web_status.SUCCESS) {
                        vehicleData = result.data;
                        tableDataList = [];
                        material = null;
                        loadTable();
                    } else {
                        $.modal.msgError(result.msg);
                    }
                }
            });
        }, 600))
    });

    function handleM(value) {
        //示例：M240108200001|Z000000105|1|0000058|5-23|0028-3-21-B。解析条码内容
        //生产追溯码|物料编码|供应商编码|供应商批次码|供应商SN码
        let splitArray = value.split("|");
        let bqTracingNo = splitArray[0];
        let materialCode = splitArray[1];
        let qty = parseInt(splitArray[2]);
        let supplierCode = splitArray[3];
        let supplierBatch = splitArray[4];
        let supplierTracingNo = splitArray[5];
        if (!checkMaterial(materialCode)) {
            return;
        }
        getMaterialInfo(materialCode);
        if ($.common.isNotEmpty(material)) {
            let tracingType = material.tracingType;
            if ($.common.isNotEmpty(tracingType) && tracingType !== undefined) {
                $.modal.msgWarning("请扫描物料的生产追溯码进行入库");
                return;
            }
            if (qty === 1) {
                addSerial(bqTracingNo, null, supplierCode, supplierTracingNo, supplierBatch);
                clearTracingNo();
            } else if (qty > 1) {
                $("#qty").removeAttr("readonly").focus();
            } else {
                $.modal.msgWarning("数量错误");
                return;
            }
            loadTable();
        }
    }

    // 添加批次
    function addBatch(bqTracingNo, qty, supplierCode, supplierBatch, supplierTracingNo) {
        // 校验数量
        if ($.common.isEmpty(qty) || qty <= 0) {
            $.modal.msgWarning("数量错误");
            return;
        }
        clearTableData()
        resetXY();
        clearTracingNo()
        clearVehicleCodeAndFocus();
        if (qty > vehicleData.maxX * vehicleData.maxY) {
            $.modal.msgWarning(`盛具最大可盛放 ${vehicleData.maxX * vehicleData.maxY} 个物料`);
            return
        }
        // 每次扫码完追溯码先清空再生成
        tableDataList = [];
        for (let i = 0; i < qty; i++) {
            tableDataList.push({
                vehicleCode: vehicleData.code,
                materialCode: material.code,
                materialName: material.name,
                materialSpec: material.spec,
                materialUnit: material.unit,
                description: material.description,
                weight: material.weight,
                high: material.high,
                qty: 1,
                x: currentX,
                y: currentY,
                bqTracingNo: bqTracingNo,
                supplierCode: supplierCode,
                supplierBatch: supplierBatch,
                supplierTracingNo: supplierTracingNo,
            });
            if (currentX === vehicleData.maxY) {
                currentX = 1;
                currentY++;
            } else {
                currentX++;
            }
        }
    }

    // 提交方法
    function cbgReceipt() {
        let orderCode = $("#orderCode").val();
        let orderNumber = $("#orderNumber").val();
        let batchNumber = $("#batchNumber").val();
        let materialDataList = []
        //let vehicleCode = $("#vehicleCode").val()
        if ($.common.isEmpty(orderCode)) {
            $.modal.msgWarning("请选择或输入工单号");
            return;
        }
        if ($.common.isEmpty(orderNumber)) {
            $.modal.msgWarning("请选择或输入生产令号");
            return;
        }
        if ($.common.isEmpty(batchNumber)) {
            $.modal.msgWarning("请选择或输入生产批号");
            return;
        }
        /*if ($.common.isEmpty(vehicleCode)) {
            $.modal.msgWarning("请扫描盛具编码");
            return;
        }*/
        if ($.common.isEmpty(tableDataList)) {
            $.modal.msgWarning("入库物料信息为空");
            return;
        }
        tableDataList.forEach(data => {
            materialDataList.push({
                "vehicleCode": data.vehicleCode,
                "materialCode": data.materialCode,
                "locationNoX": data.x,
                "locationNoY": data.y,
                "qty": data.qty,
                "tracingNo": data.bqTracingNo || data.scTracingNo,
                "qualityStatus": true,
                "supplierCode": data.supplierCode,
                "supplierBatch": data.supplierBatch,
                "supplierTracingNo": data.supplierTracingNo
            })
        });
        let json = {
            "orderCode": orderCode,
            "orderNumber": orderNumber,
            "batchNumber": batchNumber,
            //"vehicleCode": vehicleCode,
            "materialDataList": materialDataList
        }
        $.ajax({
            cache: true,
            type: "POST",
            dataType: "json",
            url: "/wms/inventory/inventoryHeader/cbgReceipt",
            async: false,
            data: JSON.stringify(json),
            contentType: "application/json",
            error: function (request) {
                $.operate.ajaxSuccess(request);
            },
            success: function (result) {
                if (result.code === web_status.SUCCESS) {
                    layer.msg("保存成功,正在刷新数据请稍后……", {
                            icon: $.modal.icon(modal_status.SUCCESS),
                            time: 500,
                            shade: [0.1, '#8F8F8F']
                        }
                    )
                    // 请求成功，不关闭页面。清空页面所有数据方便再次组盘
                    vehicleData = null;
                    tableDataList = [];
                    loadTable();
                    $("#vehicleCode").val("").focus();
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

    // 清除表格信息
    function clearTableData() {
        tableDataList = tableDataList.filter(data => data.vehicleCode !== vehicleData.code)
        loadTable();
    }

    /**
     * 重置坐标
     */
    function resetXY() {
        currentY = 1;
        currentX = 1;
    }

    function checkMaterial(materialCode) {
        if ($.common.isNotEmpty(tableDataList)) {
            let sameMaterial = tableDataList.find(x => x.materialCode === materialCode);
            if ($.common.isEmpty(sameMaterial)) {
                $.modal.msgWarning("物料不一致错误，盛具上的物料必须一致才能入库");
                clearTracingNo();
            }
        }
        return true
    }

    // 清空追溯码文本框
    function clearTracingNo() {
        $("#tracingNo").val("");
    }

    // 重新加载表格
    function loadTable() {
        tableDataList.sort((a, b) => {
            if (a.vehicleCode === b.vehicleCode) {
                return -(a.y - b.y) || -(a.x - b.x)
            }
            return a.vehicleCode - b.vehicleCode
        })
        $("#bootstrap-table").bootstrapTable('load', tableDataList);
        if (tableDataList.length !== 0) {
            const res = new Map()
            let vehicleCount = tableDataList.filter((item) => !res.has(item.vehicleCode) && res.set(item.vehicleCode, 1)).length
            let currentQty = tableDataList.filter(x => x.vehicleCode === vehicleData.code).length;
            $("#scanCount").text(`盛具数量：${vehicleCount}，扫码总数量：${tableDataList.length}，当前扫码数量：${currentQty}`).show()
        } else {
            $("#scanCount").hide();
        }
    }

    /**
     * 根据物料编码搜索物料信息
     */
    function getMaterialInfo(materialCode) {
        $.ajax({
            cache: true,
            type: "get",
            dataType: "json",
            url: "/wms/config/material/getByCode",
            async: false,
            data: {
                materialCode: materialCode
            },
            contentType: "application/json",
            error: function (res) {
                $.modal.msgError(res.msg);
            },
            success: function (res) {
                if (res.code === web_status.SUCCESS) {
                    material = res.data;
                } else {
                    $.modal.msgWarning(res.msg);
                    clearTracingNo();
                }
            }
        });
    }

    /**
     * 防抖
     * |param fn 业务方法
     * |param delay 延迟时间
     * |returns {(function(): void)|*}
     */
    function debounce(fn, delay) {
        let timeout = null;
        return function () {
            if (timeout !== null) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(() => {
                //利用call(),让this的指针从指向window 转成指向input
                fn.call(this);
            }, delay);
        }
    }

    // 选取工单按钮点击事件
    function chooseOrder() {
        $.modal.open("选取工单", ctx + "workOrder/getUsableOrder", 800, 570)
    }

    // 输入工单事件
    // 工单号绑定事件
    $('#orderCode').on('input', debounce(function () {
        let orderCode = this.value;
        if ($.common.isEmpty(orderCode)) {
            return;
        }
        $.ajax({
            cache: true,
            type: "get",
            dataType: "json",
            url: "/wms/workOrder/getOrderByCode",
            async: false,
            data: {
                orderCode: orderCode
            },
            contentType: "application/json",
            success: function (result) {
                if (result.code === web_status.SUCCESS) {
                    if (result) {
                        $("#orderCode").val(result.orderCode);
                        $("#orderNumber").val(result.orderNumber);
                        $("#batchNumber").val(result.batchNumber);
                    }
                    $("#vehicleCode").focus();
                } else {
                    $("#orderCode").val("").focus();
                    $("#orderNumber").val("");
                    $("#batchNumber").val("");
                    $.modal.msgWarning(result.msg);
                }
            }
        });
    }, 1000));

    // 数量确认按钮点击事件
    function qtySure() {
        let qty = $("#qty").val();
        if ($.common.isEmpty(qty)) {
            return;
        }
        if (qty <= 0) {
            $.modal.msgWarning("输入数量有误");
            return
        }
        let value = $("#tracingNo").val();

        let splitArray = value.split("|");
        let bqTracingNo = splitArray[0];
        let supplierCode = splitArray[3];
        let supplierBatch = splitArray[4];
        let supplierTracingNo = splitArray[5];
        addBatch(bqTracingNo, qty, supplierCode, supplierBatch, supplierTracingNo)
        clearQty();
        loadTable();
    }

    function clearQty(){
        $("#qty").val("");
    }

    function clearVehicleCodeAndFocus() {
        $("#vehicleCode").val("").focus();
    }

    /**
     * 回传事件
     */
    $("#qty").keyup(function (event) {
        if (event.keyCode === 13) {
            $("#qtySureButton").trigger("click");
        }
    })

    // 删除生成的记录
    function remove(row) {
        tableDataList = tableDataList.filter(data => data.x !== row.x || data.y !== row.y);
        loadTable();
    }
</script>
</body>
</html>