<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('出库任务单列表')"/>
    <link th:href="@{/ruoyi/css/ry-ui-custom.css?v=4.7.3}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row pl0 pr0">
        <div class="col-sm-8 pr0 pl0">
            <div class="box-shadow">
                <div class="ibox float-e-margins" style="margin-bottom: 10px;">
                    <div class="ibox-title">
                        <h5>身份信息</h5>
                    </div>
                    <div class="ibox-content ibox-content-1" style="margin: 0;height: 45px">
                        <form th:object="${sysUser}">
                            <div class="col-sm-4 form-horizontal">
                                <label class="control-label">当前操作员：</label>
                                <label class="control-label" style="font-weight: bold" id="currentUser"
                                       th:text="*{userName}"></label>
                            </div>
                            <div class="col-sm-3 form-horizontal">
                                <label class="control-label">角色：</label>
                                <label class="control-label" style="font-weight: bold" id="userRoles"
                                       th:text="*{roleNames}"></label>
                            </div>
                            <div class=" form-horizontal">
                                <label class="control-label">上次登录时间：</label>
                                <label class="control-label" style="font-weight: bold" id="lastLoginTime"
                                       th:text="*{loginDateStr}"></label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div style="margin-top: 10px;" class="box-shadow">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>出库信息</h5>
                    </div>
                    <div class="ibox-content ibox-content-1">
                        <!--                             <div class="col-sm-12 search-collapse">-->
                        <!--                                 <form id="formId">-->
                        <!--                                     <div class="select-list">-->
                        <!--                                         <ul>-->
                        <!--                                             <li>-->
                        <!--                                                 <label>物料编码：</label>-->
                        <!--                                                 <input type="text" name="goodsId"/>-->
                        <!--                                             </li>-->
                        <!--                                             <li>-->
                        <!--                                                 <label>物料名称：</label>-->
                        <!--                                                 <input type="text" name="goodsName"/>-->
                        <!--                                             </li>-->
                        <!--                                             <li>-->
                        <!--                                                 <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('formId')"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
                        <!--                                                 <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('formId')"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
                        <!--                                             </li>-->
                        <!--                                         </ul>-->
                        <!--                                     </div>-->
                        <!--                                 </form>-->
                        <!--                             </div>-->
                        <div class="select-table table-striped">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 pl5 pr0">
            <div class="ibox float-e-margins box-shadow">
                <div class="ibox-title">
                    <h5>出库操作</h5>
                </div>
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#goodsOut" class="nav-right-tabs-a" data-toggle="tab">人工出库</a></li>
                    <!--                         <li><a href="#wmsOthersProc" class="nav-right-tabs-a" data-toggle="tab"></a></li>-->
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="goodsOut">
                        <div class="ibox-content ibox-content-1">
                            <form class="m" id="form-goods-out">
                                <div class="row">
                                    <div class="col-sm-6 form-group">
                                        <label class="control-label">物料编码：</label>
                                        <div>
                                            <input type="text" id="goodsId" name="goodsIdOut" autocomplete="off"
                                                   class="form-control input-border-bottom">
                                            <!--                                                 onclick="openGoodsList();"-->
                                        </div>
                                    </div>
                                    <div class="col-sm-6 form-group">
                                        <label class="control-label">数量：</label>
                                        <div>
                                            <input type="number" min="1" id="pickNum" name="pickNumOut"
                                                   class="form-control input-border-bottom">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 form-group">
                                        <label class="control-label">批次号：</label>
                                        <div>
                                            <input type="text" id="batchNo" name="batchNo"
                                                   class="form-control input-border-bottom" shiro:hasPermission="business:pickingwavegoods:lotInput">
                                            <!--                                                 onclick="openGoodsList();"-->
                                        </div>
                                    </div>
                                </div>
<!--                                <div class="row">-->
<!--                                    <div class="col-sm-6 form-group">-->
<!--                                        <label class="control-label">扫码校验用：</label>-->
<!--                                        <div>-->
<!--                                            <input type="text" id="scanConfirm" name="scanConfirm"-->
<!--                                                   class="form-control input-border-bottom">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="col-sm-6 form-group">-->
<!--                                        <label class="control-label">当前已拣货数量：</label>-->
<!--                                        <div>-->
<!--                                            <input type="text" id="selNum" name="selNum"-->
<!--                                                   class="form-control input-border-bottom" readOnly="readOnly">-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="row">-->
<!--                                    <div class="col-sm-6 form-group">-->
<!--                                        <div class="checkbox">-->
<!--                                            <label><input type="checkbox" id="checkRemain" value="1">拣货尾数</label>-->
<!--                                        </div>-->
<!--                                        <div>-->
<!--                                            <input type="number" min="0" id="remainNum" name="remainNum"-->
<!--                                                   class="form-control input-border-bottom" disabled="true">-->
<!--                                            &lt;!&ndash;                                                 onclick="openGoodsList();"&ndash;&gt;-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="col-sm-6 form-group">-->
<!--                                        <div class="checkbox">-->
<!--                                            <label><input type="checkbox" id="isOthersProc" value="1">是否账户别名出库</label>-->
<!--                                        </div>-->
<!--                                        <div>-->
<!--                                            <input type="text" id="ebsAccountName" name="ebsAccountName"-->
<!--                                                   class="form-control input-border-bottom"-->
<!--                                                   onclick="openEbsAccountNameList()" disabled="true">-->
<!--                                            <input type="hidden" id="dispositionId"/>-->
<!--                                            <input type="hidden" id="description"/>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </form>
                            <div class="row">
                                <div class="col-sm-12" style="padding-right: 20px;padding-left: 20px;">
                                    <button type="button" class="btn btn-lg btn-ctl-print" onclick="goodsOutConfirm();">
                                        <span class="btn-ctl-color">确认出库</span></button>
                                </div>
<!--                                <div class="col-sm-6" style="padding-right: 20px;padding-left: 20px;">-->
<!--                                    <button type="button" class="btn btn-lg btn-ctl-print-red" onclick="backStock()">-->
<!--                                        <span class="btn-ctl-color">返库</span></button>-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<style>
    .fixed-table-toolbar {
        display: none !important;
    }
</style>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('business:pickingwavegoods:edit')}]];
    var removeFlag = [[${@permission.hasPermi('business:pickingwavegoods:remove')}]];
    var prefix = ctx + "business/pickingwavegoods";
    var statusDatas = [[${@dict.getType('out_status')}]];

    /**
     * 表格初始化
     */
    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "库存信息",
            showSearch: false,
            showToggle: false,
            showRefresh: false,
            showColumns: false,
            // TODO
            columns: [
                {
                    field: 'goodId',
                    title: '物料编码',
                    sortable: true
                },
                {
                    field: 'goodsName',
                    title: '物料描述',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'produclotid',
                    title: '批次号',
                    sortable: true
                },
                {
                    field: 'productionDate',
                    title: '生产日期',
                    sortable: true
                },
                {
                    field: 'expiryDate',
                    title: '有效日期',
                    sortable: true
                },
                {
                    field: 'mistockNum',
                    title: '数量',
                    sortable: true
                },
                {
                    field: 'pickingNum',
                    title: '出库数量',
                    sortable: true
                },
                {
                    field: 'ctl',
                    title: '托盘号',
                    sortable: true
                },
                {
                    field: 'locId',
                    title: '库位',
                    sortable: true,
                    align: 'center'
                },
                {
                    field: 'outstand',
                    title: '出库站台',
                    sortable: true
                },
                {
                    field: 'outstatus',
                    title: '状态',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(statusDatas, value);
                    }
                }
            ]
        };
        $.table.init(options);
    });

    // 出库任务列表，每间隔5秒刷新
    setInterval(function () {
        console.log('刷新出库任务');
        $.table.refresh();
    }, 1000)

    // 校验
    function checkGoodsOut(goodsId, produclotid, pickingNum, outStand) {
        console.log("扫描开始");
        $.modal.msg('请扫码校验');
        // 初始化参数
        let codeString = "";
        let scanMode = true;
        let pickingNumConfirm = 0;
        let numBefore = 0;
        console.log("扫码模式：" + scanMode);
        console.log("待校验物料编码：" + goodsId);
        console.log("待校验批次号：" + produclotid);
        $("#scanConfirm").val("");
        $("#scanConfirm").focus();
        $(this).keydown(function (e) {
            if (scanMode) {
                let code = e.which;
                if (code !== 13) {
                    // codeString += String.fromCharCode(code);
                } else if (code === 13) {
                    codeString = $("#scanConfirm").val();
                    console.log("扫码所得字符串：" + codeString);
                    let scanInfo = codeString.replace(/(\[GS\])|(\[RS\])|(\[EOT\])/g, " ");
                    console.log("扫码所得字符串格式化：" + scanInfo);
                    let goodsInfoConfirm = scanInfo.trim().split(" ");
                    let goodsIdConfirm = goodsInfoConfirm[0];
                    console.log("扫码所得物料编码：" + goodsIdConfirm);
                    let productLotIdConfirm = goodsInfoConfirm[2];
                    console.log("扫码所得批次号：" + productLotIdConfirm);
                    $("#scanConfirm").val("");
                    // setTimeout(function () {
                    //     $("#scanConfirm").val("");
                    // }, 500);
                    // 判断是否是拣选尾数
                    if ($("input[id='checkRemain']:checked").val()) {
                        pickingNumConfirm = Number(pickingNumConfirm) + Number($("#remainNum").val());
                    } else {
                        pickingNumConfirm = Number(pickingNumConfirm) + Number(goodsInfoConfirm[6]);
                    }
                    console.log("扫码所得数量：" + pickingNumConfirm);
                    if (goodsIdConfirm == goodsId && productLotIdConfirm == produclotid) {
                        if (pickingNumConfirm == pickingNum) {
                            // 前端检验成功，清空扫描数据
                            $("#selNum").val("");
                            scanMode = false;
                            $.ajax({
                                type: "post",
                                url: ctx + "business/pickingwavegoods/scanGoods",
                                data: {
                                    "goodId": goodsId,
                                    "outstand": outStand,
                                    "produclotid": produclotid
                                },
                                success: function (data) {
                                    console.log(data)
                                    scanMode = false;
                                    if (data.code == 0) {
                                        if (data.msg == "0") {
                                            $.modal.msgError('当前任务不可校验，请确认出库状态')
                                        } else {
                                            $.modal.msgSuccess('校验成功');
                                        }
                                    } else {
                                        $.modal.msgError('状态更新错误')
                                    }
                                },
                                error: function () {
                                    $.modal.msgError('状态更新错误')
                                }
                            });
                        } else if (pickingNumConfirm < pickingNum) {
                            // 数量不够继续扫描
                            // 显示已拣货数量
                            $("#selNum").val(pickingNumConfirm);
                            numBefore = pickingNumConfirm;
                            $("#scanConfirm").focus();
                            $.modal.msgError('未全部出库，请继续出库扫描');
                        } else {
                            // 恢复上一个数量
                            pickingNumConfirm = numBefore;
                            $("#scanConfirm").focus();
                            // 数量超过，提示最后一个重新扫
                            $.modal.msgError('拣货数量超过，请确认最后一次的物料，并重新扫描！');
                        }
                    } else {
                        scanMode = false;
                        $.modal.msgError('物料编码或批次号不对');
                    }
                    console.log("扫码模式：" + scanMode);
                }
            }
        })
    }

    /**
     * 出库确认,生成出库任务
     */
    function goodsOutConfirm() {

        if ($("#goodsId").val() == null || $("#goodsId").val() == "") {
            $.modal.msgError('请选择物料编码');
            return;
        }

        if ($("#pickNum").val() == null || $("#pickNum").val() == "" || $("#pickNum").val() == 0) {
            $.modal.msgError('请输入出库数量');
            return;
        }
        goodsOutOrder();
    }

    /**
     *  普通出库
     */
    function goodsOutOrder() {
        $.ajax({
            type: "post",
            url: ctx + "business/pickingwavegoods/add",
            data: {
                "goodId": $("#goodsId").val(),
                "pickingNum": $("#pickNum").val(),
                "produclotid": $("#batchNo").val()
            },
            success: function (data) {
                console.log(data)
                if (data.code == 0) {
                    $.modal.msgSuccess(data.msg)
                    $("#goodsId").val("")
                    $("#pickNum").val("")
                    $("#batchNo").val("")
                } else {
                    $.modal.msgError(data.msg)
                }
            },
            error: function () {
                $.modal.msgError('错误')
            }
        });
    }

    /**
     * 回库
     */
    function backStock() {
        $.ajax({
            type: "post",
            url: ctx + "business/pickingwavegoods/backStock",
            data: {
                "outstand": $("#outStand").val()
            },
            success: function (data) {
                console.log(data)
                if (data.code == 0) {
                    if (data.msg == "0") {
                        $.modal.msgError('当前站台无可回库任务')
                    } else {
                        $.modal.msgSuccess('已提交回库请求')
                    }
                } else {
                    $.modal.msgError('错误')
                }
            },
            error: function () {
                $.modal.msgError('错误')
            }
        });
    }

    /**
     * 账户别名出库
     */
    function othersProc() {
        $.ajax({
            type: "post",
            url: prefix + "/othersProc",
            data: {
                "goodId": $("#goodsId").val(),
                "pickNum": $("#pickNum").val(),
                "outStand": $("#outStand").val(),
                "putinId": $("#batchNo").val(),
                "businessid": $("#dispositionId").val(),
                "specification": $("#ebsAccountName").val(),
                "ckType": "4"
            },
            success: function (data) {
                console.log(data)
                if (data.code == 0) {
                    $.modal.msgSuccess(data.msg)
                    $("#goodsId").val("")
                    $("#pickNum").val("")
                    $("#batchNo").val("")
                } else {
                    $.modal.msgError(data.msg)
                }
            },
            error: function () {
                $.modal.msgError('错误')
            }
        });
    }

    function openEbsAccountNameList() {
        var options = {
            title: '选择账户别名',
            url: prefix + "/selEbsAccountName",
            // width: 800,
            // height: 1000,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var rows = layero.find("iframe")[0].contentWindow.getSelections();
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        console.log(rows);
        $('#description').val(rows.pop());
        $('#ebsAccountName').val(rows.pop());
        $('#dispositionId').val(rows.pop());
        $.modal.close(index);
    }

    $("#checkRemain").click(function () {
        var isRemain = $("input[id='checkRemain']:checked").val();
        if (isRemain) {
            $("#remainNum").attr("disabled", false);
        } else {
            $("#remainNum").attr("disabled", true);
        }
    })

    $("#isOthersProc").click(function () {
        var isOthersProc = $("input[id='isOthersProc']:checked").val();
        if (isOthersProc) {
            $("#ebsAccountName").attr("disabled", false);
        } else {
            $("#ebsAccountName").attr("disabled", true);
        }
    })
</script>
</body>
</html>