cbgReceipt.html 15.6 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-5">
                <input class="form-control" style="width: 370px; float: left" type="text" placeholder="请扫描领料单" name="shipmentReferCode"
                       id="shipmentReferCode"/>
                <button style="margin-left: 10px" type="button" onclick="chooseShipmentReferCode()" id="chooseShipmentReferCodeBtn"
                        class="btn btn-primary">选取领料单
                </button>
            </div>
            <label class="col-sm-1 control-label">工单号：</label>
            <div class="col-sm-5">
                <input class="form-control" style="width: 370px; float: left" type="text" placeholder="请扫描工单号" name="orderCode" id="orderCode"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">盛具编码：</label>
            <div class="col-sm-5">
                <input class="form-control" placeholder="请扫描盛具编码" style="width: 370px; float: left" name="vehicleCode"
                       id="vehicleCode"/>
            </div>
        </div>
        <div class="col-sm-12 select-info">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">
                    <div class="form-group" style="margin-top: 10px">
                        <label class="col-sm-1 control-label">追溯码：</label>
                        <div class="col-sm-4">
                            <input class="form-control" id="tracingNo" name="tracingNo" type="text" placeholder="请扫描物料追溯码">
                        </div>
                        <div class="col-sm-4">
                            <span style="line-height: 34px" id="scanCount"></span>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab3">
                    <div class="form-group" style="margin-top: 10px">
                        <label class="col-sm-1 control-label">数量：</label>
                        <div class="col-sm-4">
                            <input class="form-control" min="1" id="qty" name="qty" type="number" placeholder="请输入入库数量">
                        </div>
                    </div>
                </div>
                <table id="bootstrap-table" data-mobile-responsive="true"
                       class="table table-bordered table-hover text-nowrap">
                </table>
            </div>
        </div>
    </form>
    <div class="form-group">
        <div class="form-control-static col-sm-offset-9" style="margin-left:88%; margin-top: 20%">
            <button class="btn btn-primary" onclick="cbgReceipt()" type="submit">提交</button>&nbsp;&nbsp;
            <button class="btn btn-danger" onclick="$.modal.close()" type="button">关闭</button>
        </div>
    </div>
</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: {
            shipmentReferCode: {
                required: true,
            },
            orderCode: {
                required: true,
            },
            materialCode: {
                required: true,
            },
            qty: {
                required: true
            }
        },
    });

    // 选取领料单按钮点击事件
    function chooseShipmentReferCode() {
        $.modal.open("选取领料单", ctx + "workOrder/getUsableShipmentReferCode", 800, 500)
    }

    let vehicle = null;  // 当前扫描的盛具
    let tempCoordinateList;  // 当前盛具类型具体坐标
    let material = null; // 扫描的物料
    let tableDataList = []; //表格中的数据

    $(function () {
        // 表格初始化
        $("#bootstrap-table").bootstrapTable({
            showToggle: false,
            showRefresh: false,
            showColumns: false,
            showSearch: false,
            columns: [
                {
                    field: 'materialCode',
                    title: '物料编码'
                },
                {
                    field: 'materialName',
                    title: '物料名称'
                },
                {
                    field: 'materialSpec',
                    title: '物料规格'
                },
                {
                    field: 'materialUnit',
                    title: '物料单位'
                },
                {
                    field: 'weight',
                    title: '药量(克)'
                },
                {
                    field: 'high',
                    title: '高度'
                },
                {
                    field: 'solidifyTime',
                    title: '固化时间(时)'
                },
                {
                    field: 'x',
                    title: 'x坐标'
                },
                {
                    field: 'y',
                    title: 'y坐标'
                },
                {
                    field: 'tracingNo',
                    title: '追溯码'
                },
                {
                    field: 'supplierCode',
                    title: '供应商编码'
                },
                {
                    field: 'supplierTracingNo',
                    title: '供应商追溯码'
                }/*,
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        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 (isEmpty(value) || checkVehicleIsEmpty()) {
                return;
            }
            // 追溯码规则：物料编码@序号(或批次号)@供应商编码@供应商追溯码
            // 追溯码实例：Z000000123@Z000000123_S108_2-23-2212-0001@0000001@ST12345789@
            // 解析追溯码，以"@"分割
            let splitArray = value.split("@");
            let materialCode = splitArray[0];
            let tracingNo = splitArray[1];
            let qty = splitArray[2];
            let supplierCode = splitArray[3];
            let supplierTracingNo = splitArray[4];

            // 根据码中的物料查询物料信息
            if (isEmpty(material) || materialCode !== material.code) {
                let materialInfo = getMaterialInfo(materialCode);
                if (isEmpty(materialInfo)) {
                    $.modal.msgWarning("码中物料不存在")
                    clearTracingNo();
                    return;
                }
                material = materialInfo;
            }
            addBatch(tracingNo, qty, supplierCode, supplierTracingNo);
            loadTable();
            clearTracingNo();
        }, 600));

        // 盛具编码绑定输入事件
        $('#vehicleCode').on('input', debounce(function () {
            let vehicleCode = this.value;
            if (isEmpty(vehicleCode)) {
                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) {
                        vehicle = result.data;
                        let coordinateList = vehicle.coordinateList;
                        if (isEmpty(coordinateList)) {
                            $.modal.msgWarning("当前盛具未配置xy轴坐标");
                            $('#vehicleCode').focus();
                            return;
                        }
                        tempCoordinateList = JSON.parse(JSON.stringify(forwardSortXY(coordinateList)));
                        $("#vehicleTypeCode").val(vehicle.typeCode);
                        tableDataList = [];
                        material = null;
                        loadTable();
                    } else {
                        $.modal.msgError(result.msg);
                    }
                }
            });
        }, 600))
    });

    // 添加批次
    function addBatch(tracingNo, qty, supplierCode, supplierTracingNo) {
        // 校验数量
        if (qty <= 0) {
            $.modal.msgWarning("码中数量不为正整数");
            return;
        }
        let coordinateList = vehicle.coordinateList;
        // 每次扫码完追溯码先清空再生成
        tableDataList = [];
        if (qty > coordinateList.length) {
            $.modal.msgWarning("码中数量已超过盛具最大可盛数量:" + coordinateList.length);
            return;
        }
        for (let i = 0; i < qty && i < coordinateList.length; i++) {
            tableDataList.push({
                materialCode: material.code,
                materialName: material.name,
                materialSpec: material.spec,
                materialUnit: material.unit,
                weight: material.weight,
                high: material.high,
                solidifyTime: material.solidifyTime,
                qty: 1,
                x: coordinateList[i].locationX,
                y: coordinateList[i].locationY,
                tracingNo: tracingNo,
                supplierCode: supplierCode,
                supplierTracingNo: supplierTracingNo
            });
        }
    }

    // 提交方法
    function cbgReceipt() {
        let orderCode = $("#orderCode").val();
        let shipmentReferCode = $("#shipmentReferCode").val();
        let vehicleCode = $("#vehicleCode").val()
        let fromPort = $("#fromPort option:selected").val()
        let materialDataList = []
        if (isEmpty(orderCode)) {
            $.modal.msgWarning("请选择或输入工单号");
            return;
        }
        if (isEmpty(shipmentReferCode)) {
            $.modal.msgWarning("请选择或输入领料单号");
            return;
        }
        if (isEmpty(vehicleCode)) {
            $.modal.msgWarning("请扫描盛具编码");
            return;
        }
        if (isEmpty(tableDataList)) {
            $.modal.msgWarning("入库物料信息为空");
            return;
        }
        tableDataList.forEach(data => {
            materialDataList.push({
                "materialCode": data.materialCode,
                "locationNoX": data.x,
                "locationNoY": data.y,
                "qty": data.qty,
                "tracingNo": data.tracingNo,
                "qualityStatus": true,
                "isMaterial": true
            })
        });
        let json = {
            "orderCode": orderCode,
            "shipmentReferCode": shipmentReferCode,
            "vehicleCode": vehicleCode,
            "fromPort": fromPort,
            "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']
                        }
                    )
                    // 请求成功，不关闭页面。清空页面所有数据方便再次组盘
                    vehicle = null;
                    tableDataList = [];
                    loadTable();
                    $("#vehicleCode").val("").focus();
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

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

    // 重新加载表格
    function loadTable() {
        tableDataList.sort((a, b) => {
            return -(a.y - b.y) || -(a.x - b.x)
        })
        $("#bootstrap-table").bootstrapTable('load', tableDataList);
        if (tableDataList.length !== 0) {
            $("#scanCount").text("已扫描：" + tableDataList.length + "个 ").show()
        } else {
            $("#scanCount").hide();
        }
    }

    /**
     * 对坐标进行排序
     * 规则：先 y 正向排序，后x 正向排序，
     */
    function forwardSortXY(array) {
        return array.sort((a, b) => {
            return a.locationY - b.locationY || a.locationX - b.locationX
        })
    }

    /**
     * 校验为空
     * @param obj 校验参数
     * @returns {boolean} true:为空，false:不为空
     */
    function isEmpty(obj) {
        return obj === undefined || obj === null || obj.length === 0;
    }

    /**
     * 校验盛具是否为空
     * @returns {boolean} true:为空，false:不为空
     */
    function checkVehicleIsEmpty() {
        if (isEmpty(vehicle)) {
            $("#vehicleCode").focus();
            $.modal.msgWarning("请先扫描盛具码")
            clearTracingNo();
            return true;
        }
        return false;
    }

    /**
     * 根据物料编码搜索物料信息
     */
    function getMaterialInfo(materialCode) {
        let material = undefined;
        $.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) {
                material = res.data;
            }
        });
        return material;
    }

    /**
     * 防抖
     * @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);
        }
    }
</script>
</body>
</html>