semiReceipt.html 23.3 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-rawReceipt-rawReceipt">
        <div class="form-group">
            <label class="col-sm-1 control-label">工单号：</label>
            <div class="col-sm-3">
                <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-3">
                <input class="form-control" type="text" placeholder="请扫描生产令号" value="" id="orderNumber"/>
            </div>
            <label class="col-sm-1 control-label">生产批号：</label>
            <div class="col-sm-3">
                <input class="form-control" type="text" placeholder="请扫描生产批号" value="" id="batchNumber"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">盛具编码：</label>
            <div class="col-sm-5">
                <input class="form-control" style="width: 350px; float: left" type="text" placeholder="请扫描盛具编码" value="" id="vehicleCode"/>
            </div>
        </div>
        <div class="form-group" hidden="hidden">
            <label class="col-sm-1 control-label">盛具类型编码：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" value="" readonly="readonly" id="vehicleTypeCode"/>
            </div>
        </div>
        <div class="col-sm-12 select-info">
            <ul id="myTab" class="nav nav-tabs">
                <li id="l1" class="active"><a href="#tab1" onclick="clearTableData('tab1')" data-toggle="tab">序号追溯入库</a></li>
                <li id="l2"><a href="#tab1" onclick="clearTableData('tab2')" data-toggle="tab">批次追溯入库</a></li>
            </ul>
            <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>
                <table id="bootstrap-table" data-mobile-responsive="true"
                       class="table table-bordered table-hover text-nowrap">
                </table>
            </div>
        </div>
    </form>
</div>
<div class="wrapper wrapper-content col-sm-12">
    <div style="float: right; margin-right:20px">
<!--        <button class="btn btn-primary" onclick="rawReceipt()" type="submit">提交</button>&nbsp;&nbsp;-->
        <button class="btn btn-danger" onclick="$.modal.close()" type="button">关闭</button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script>
    let vehicle = null;  // 当前扫描的盛具
    let tempCoordinateList;  // 当前盛具类型具体坐标
    let material = null; // 扫描的物料

    let virtualX = 1;
    let virtualY = 1;
    let tableDataList = [];
    // 被删除过的x,y记录，当x,y重新填入后清空对应的x,y
    let tableDeletedDataList = [];

    $(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: 'auxiliaryUnit',
                    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) {
                        // JSON.stringify()将对象转化成JSON字符串；.replace(/""/g,"’")将JSON字符串中的双引号转化成单引号
                        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('');
                    }
                }]
        });

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

        // 追溯码输入框输入事件
        $('#tracingNo').on('input', debounce(function () {
            let value = this.value;
            if (isEmpty(value) || checkVehicleIsEmpty()) {
                return;
            }
            if (isEmpty(tempCoordinateList)) {
                $.modal.msgWarning("盛具已装满")
                clearTracingNo();
                return;
            }
            // 追溯码规则：追溯码@物料编码@供应商编码@供应商追溯码
            // 追溯码实例：Z000000123_S108_2-23-2212-0001@Z000000123@0000001@ST12345789@
            // 解析追溯码，以"@"分割
            let splitArray = value.split("@");
            let tracingNo = splitArray[0];
            let materialCode = splitArray[1];
            let qty = splitArray[2];
            let supplierCode = splitArray[3];
            let supplierTracingNo = splitArray[4];

            // 一盘中只能存在一种物料
            if (!isEmpty(tableDataList)) {
                let sameMaterial = tableDataList.find(x => x.materialCode === materialCode);
                if (isEmpty(sameMaterial)) {
                    $.modal.msgWarning("物料不一致错误，盛具上的物料必须一致才能入库");
                    clearTracingNo();
                    return;
                }
            }

            // 根据码中的物料查询物料信息
            if (isEmpty(material) || materialCode !== material.code) {
                let materialInfo = getMaterialInfo(materialCode);
                if (isEmpty(materialInfo)) {
                    $.modal.msgWarning("码中物料不存在")
                    clearTracingNo();
                    return;
                }
                material = materialInfo;
            }
            let id = $('#myTab li[class="active"]').attr("id")
            if (id === "l1") {
                addSerial(tracingNo, qty, supplierCode, supplierTracingNo);
            }
            if (id === "l2") {
                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);
                        if (flagStr === "tab1" || flagStr === "tab2") {
                            $("#tracingNo").focus();
                        }
                        tableDataList = [];
                        tableDeletedDataList = [];
                        material = null;
                        loadTable();
                        virtualX = 1;
                        virtualY = 1;
                    } else {
                        $.modal.msgError(result.msg);
                    }
                }
            });
        }, 600))

        // 切换标签之后触发
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            if (flagStr === "tab1" || flagStr === "tab2") {
                $("#tracingNo").focus();
            }
        })
    });

    // 添加序号
    function addSerial(tracingNo, qty, supplierCode, supplierTracingNo) {
        if (parseInt(qty) !== 1) {
            $.modal.msgWarning("追溯码入库，数量不为1")
            clearTracingNo();
            return;
        }
        let sameTracingNodata = tableDataList.find(data => data.tracingNo === tracingNo);
        if (sameTracingNodata !== null && sameTracingNodata !== undefined) {
            $.modal.msgWarning("追溯码已经扫描过，在坐标" + sameTracingNodata.x + "," + sameTracingNodata.y + "上")
            clearTracingNo();
            return;
        }
        let obj;
        if (vehicle.typeCode === 'CJ10000') {
            // 通用盛具生成虚拟坐标
            obj = {
                materialCode: material.code,
                materialName: material.name,
                materialSpec: material.spec,
                materialUnit: material.unit,
                weight: material.weight,
                high: material.high,
                solidifyTime: material.solidifyTime,
                qty: qty,
                x: virtualX++,
                y: virtualY++,
                tracingNo: tracingNo,
                supplierCode: supplierCode,
                supplierTracingNo: supplierTracingNo
            }
        } else {
            if (isEmpty(tempCoordinateList)) {
                $.modal.msgWarning("当前盛具已装满");
                clearTracingNo()
                return;
            }
            let coordinate = tempCoordinateList[0];
            obj = {
                materialCode: material.code,
                materialName: material.name,
                materialSpec: material.spec,
                materialUnit: material.unit,
                weight: material.weight,
                high: material.high,
                solidifyTime: material.solidifyTime,
                qty: qty,
                x: coordinate.locationX,
                y: coordinate.locationY,
                tracingNo: tracingNo,
                supplierCode: supplierCode,
                supplierTracingNo: supplierTracingNo
            }
        }

        if (tableDeletedDataList.length !== 0) {
            // 已排好序。优先添加之前删除过的坐标
            obj.x = tableDeletedDataList[0].x;
            obj.y = tableDeletedDataList[0].y;
            // 删除第一个元素
            tableDeletedDataList.shift();
        } else {
            if (vehicle.typeCode !== 'CJ10000') {
                tempCoordinateList.shift();
            }
        }
        tableDataList.push(obj);
    }

    // 添加批次
    function addBatch(tracingNo, qty, supplierCode, supplierTracingNo) {
        // 校验数量
        if (qty <= 0) {
            $.modal.msgWarning("码中数量不为正整数");
            return;
        }
        let coordinateList = vehicle.coordinateList;
        // 每次扫码完追溯码先清空再生成
        tableDataList = [];
        if (vehicle.typeCode === 'CJ10000') {
            // 通用盛具生成虚拟坐标
            for (let i = 1; i <= qty; 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: i,
                    y: i,
                    tracingNo: tracingNo,
                    supplierCode: supplierCode,
                    supplierTracingNo: supplierTracingNo
                });
            }
        } else {
            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 rawReceipt() {
        let orderCode = $("#orderCode").val();
        let orderNumber = $("#orderNumber").val();
        let batchNumber = $("#batchNumber").val();
        let vehicleTypeCode = $("#vehicleTypeCode").val()
        let vehicleCode = $("#vehicleCode").val()
        let materialDataList = []
        if (isEmpty(vehicleCode)) {
            $.modal.msgWarning("请扫描盛具编码");
            return;
        }
        if (isEmpty(orderCode)) {
            $.modal.msgWarning("请选择或输入工单号");
            return;
        }
        if (isEmpty(orderNumber)) {
            $.modal.msgWarning("请选择或输入生产令号");
            return;
        }
        if (isEmpty(batchNumber)) {
            $.modal.msgWarning("请选择或输入生产批号");
            return;
        }
        if (tableDataList === null || tableDataList.length === 0) {
            $.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,
                "supplierCode": data.supplierCode,
                "supplierTracingNo": data.supplierTracingNo
            })
        });
        let timestamp = Date.now();
        let json = {
            "taskNo": timestamp,
            "orderCode": orderCode,
            "orderNumber": orderNumber,
            "batchNumber": batchNumber,
            "vehicleTypeCode": vehicleTypeCode,
            "vehicleCode": vehicleCode,
            "materialDataList": materialDataList
        }
        $.ajax({
            cache: true,
            type: "POST",
            dataType: "json",
            url: "/wms/API/WMS/v2/wmsReceipt",
            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']
                        }
                    )
                    // $.modal.msgReload("保存成功,正在刷新数据请稍后……", modal_status.SUCCESS);
                    // 请求成功，不关闭页面。清空页面所有数据方便再次组盘
                    vehicle = null;
                    tableDataList = [];
                    tableDeletedDataList = [];
                    loadTable();
                    virtualX = 1;
                    virtualY = 1;
                    $("#vehicleCode").val("").focus();
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

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

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

    // 删除生成的记录
    function remove(row) {
        tableDataList = tableDataList.filter(data => data.x !== row.x || data.y !== row.y);
        tableDeletedDataList.push({
            x: row.x,
            y: row.y
        })
        tableDeletedDataList.sort((a, b) => {
            return a.x - b.x || a.y - b.y
        })
        loadTable();
    }

    // 重新加载表格
    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();
        }
    }

    let flagStr = "tab1"

    // 清除表格信息
    function clearTableData(str) {
        if (flagStr === str) {
            return;
        }
        flagStr = str;
        tableDataList = [];
        tableDeletedDataList = [];
        if (!isEmpty(vehicle)) {
            tempCoordinateList = JSON.parse(JSON.stringify(forwardSortXY(vehicle.coordinateList)));
        }
        loadTable();
        virtualX = 1;
        virtualY = 1;
    }

    /**
     * 对坐标进行排序
     * 规则：先 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;
    }

    /**
     * 校验所扫的码
     * @param str 码中内容
     * @returns {boolean} true: 校验通过，false: 校验失败
     */
    function checkYard(str) {
        let splitArray = str.split(" ");
        let materialCode = splitArray[0];
        if (materialCode !== material.code) {
            $.modal.msgWarning("扫描物料码与所选物料不一致");
            return false;
        }
        return true
    }

    /**
     * 根据物料编码搜索物料信息
     */
    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>