AliOlySFDCSta.git

<!--仿EquipmentSetShippmentReceived6.page-->
<apex:page Controller="ReceivingNoteStockInController" showHeader="false" sidebar="false" id="allPage" action="{!init}" title="收货清单入库" lightningStylesheets="true">
<head>
    <meta name="format-detection" content="telephone=no"/>
</head>
<apex:stylesheet value="{!URLFOR($Resource.blockUIcss)}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery183minjs)}"/>
<apex:includeScript value="{!URLFOR($Resource.PleaseWaitDialog)}"/>
<apex:includeScript value="{!URLFOR($Resource.instascan)}"/>
<apex:stylesheet value="{!URLFOR($Resource.EquipmentSetShippmentReceivedcss)}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery_confirm, 'jquery-confirm.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery_confirm, 'jquery-confirm.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.sldsMy)}"/><!-- 20230925 ljh lightning -->
<apex:stylesheet value="{!URLFOR($Resource.StyleUtilColorCss)}"/><!-- 20230619 ljh lightning  -->
<script type="text/javascript">
function showConfirm(message, okhandler, errorhandler) {
    j$.confirm({
            title: '确认',
            content: message,
            boxWidth: '50%',
            useBootstrap: false,
            buttons: {
                OK: function () {
                    okhandler();
                },
                cancel: {
                    text: '取消', // With spaces and symbols
                    action: function () {
                        errorhandler();
                    }
                }
            }
        });
}
function savejs() {
    blockme();
    var hasPhoto = true;
    var saveable = true;
    j$("input[name$='arrivalin']:checked").each(function() {
        if (j$(this).parent().parent().find("input:submit:visible").size() > 0) {
            hasPhoto = false;
        }
        if (j$(this).parent().children("[name='onetoone']").size() > 0) {
            var val = j$(this).parent().children("[name='onetoone']").val();
            if (j$("input[name='onetoone_main'][value='"+val+"']").size() == 0) {
                saveable = false;
            } else {
                var eachchk = false;
                j$("input[name='onetoone_main'][value='"+val+"']").parent().children("[name$='arrivalin']").each(function(idx,val) {
                    if (j$(val).attr("checked") == "checked") eachchk = true;
                })
                saveable = saveable ? eachchk : saveable;
            }
        }
    })
    if (!hasPhoto) {
        showConfirm('有未上传照片的备品，是否确认入库？', function() {
            if (!saveable) {
                showConfirm("有未勾选主体的一对一附属品，是否拆分上架并放到备用库？", function() {
                    save();
                }, function() {
                    unblockUI();
                })
            } else {
                save();
            }
        }, function() {
            unblockUI();
        });
        // j$.confirm({
        //     title: '确认',
        //     content: '有未上传照片的备品，是否确认入库？',
        //     boxWidth: '50%',
        //     useBootstrap: false,
        //     buttons: {
        //         OK: function () {
        //             if (!saveable) {
        //                 if (confirm("有未勾选主体的一对一附属品存在，是否确认入库？")) {
        //                     save();
        //                 } else {
        //                     unblockUI();
        //                 }
        //             } else {
        //                 save();
        //             }
        //         },
        //         cancel: {
        //             text: '取消', // With spaces and symbols
        //             action: function () {
        //                 unblockUI();
        //             }
        //         }
        //     }
        // });
        // var test = window.confirm("有未上传照片的备品，是否确认入库？");
        // if (test) {
        //     if (!saveable) {
        //         if (confirm("有未勾选主体的一对一附属品存在，是否确认入库？")) {
        //             save();
        //         } else {
        //             unblockUI();
        //         }
        //     } else {
        //         save();
        //     }
        // } else {
        //     unblockUI();
        // }
    } else {
        if (!saveable) {
            showConfirm("有未勾选主体的一对一附属品，是否拆分上架并放到备用库？", function() {
                save();
            }, function() {
                unblockUI();
            })
            // if (confirm("有未勾选主体的一对一附属品存在，是否确认入库？")) {
            //     save();
            // } else {
            //     unblockUI();
            // }
        } else {
            save();
        }
    }
    
}
function filljs1() {
   j$("input[name$='arrivalin']").prop("checked", true);
}
function filljsQR1(qrcode) {
    blockme();
    //qiu 改 var select1 = j$("[data-qr='"+qrcode+"']").children("input[type='checkbox']");
    if (qrcode.substr(-8,3) == '250') qrcode = qrcode.slice(0,-8);
    var select1 = j$("[data-qr='"+qrcode+"'],[data-bar^='"+qrcode+"']").children("input[type='checkbox']");
    if (select1.size() > 1) {
        alert("数量管理附属品请手动打勾！");
    } else {
        select1.prop("checked", true);
    }
    unblockUI();
    j$("#scanedqr").append("<li>"+qrcode+"</li>");
    j$("#scanedqr").animate({ scrollTop: j$("#scanedqr").prop("scrollHeight")}, 1000);
}
function filljsQR2(qrcode, setId) {
    // blockme();
    // addAccessory(qrcode, setId);
 
    // j$("#scanedqr").append("<li>"+qrcode+"</li>");
    // j$("#scanedqr").animate({ scrollTop: j$("#scanedqr").prop("scrollHeight")}, 1000);
}
 
function afterPhoto() {
    blockme();
    fetchPhotoStatus();
}
 
function resetDetailDivMargintop() {
    var handerHeight = document.getElementById('hander').clientHeight;
    document.getElementById('detailDiv').style.marginTop = handerHeight + 'px';
}
 
window.onload = function hiddenName(){
    if( document.getElementById('allPage:allForm:CDS_staff_mlktp')){
        document.getElementById('allPage:allForm:CDS_staff_mlktp').style.visibility="hidden" ;
        document.getElementById('allPage:allForm:CDS_staff_mlktp').style.width="200px" ;
    }
    resetDetailDivMargintop();
}
 
function checkMessage() {
    if (j$(escapeVfId('allPage:allForm:done_flg')).val() == 'true') {
        alert("保存完了");
    }
}
 
</script>
<style type="text/css">
    .menu div.m_title{
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        text-align: left;
        margin: 0;
        /*20230725 ljh*/
        /*padding: 1%;*/
        /*width: 98%;*/
        background:#DCDCDC;
        position: relative;
        padding-left: 0.75rem;/*20230721 ljh  */
    }
    .checkintitle{
        position:absolute;
        right:10px;   
    }
    .dateFormat {
        display: none;
    }
    #Step_tab {
        list-style-type: none;
        padding: 0;
        height: 25px;
        border-bottom: 5px solid #3b5998;
    }
    #Step_tab li {
        position: relative;
        width: 20%;
        float: left;
        margin: 0;
        padding: 0;
        text-align: center;
        cursor: pointer;
    }
    #Step_tab li span {
        margin: 0;
        padding: 15px 0 11px;
        color: #2daae1;
        font-size: 12px;
        font-weight: bold;
        line-height: 1;
    }
    #Step_tab li.selected {
        background: #3b5998;
    }
    #Step_tab li.selected span {
        color: #fff;
    }
    div.menu{
        /*20230725 ljh*/
        /*margin-bottom: 20px; */
        /*width: 490px;*/
    }
 
    hr {
        border-top: 2px dotted #f00;
        color: #fff;
        background-color: #fff;
        height: 1px;
        /*20230725 ljh*/
        /*width: 90%;*/
        width: 98%;
    }
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .menu blockquote{
        margin: 0;
        padding: 1px;
        list-style: none;
        border-top: 1px solid #ddd;
 
    }
    .menu{
        border:1px solid #a1a1a1;
        border-radius:10px;
        /*width: 400px;*//*20230725 ljh*/
    }
    .menu li .fieldname {
        /*20230725 ljh*/
        /*width: 30%;
        line-height: 25px;*/
        text-align: right;
        float: left;
    }
    .menu li .fieldvalue{
        /*20230725 ljh*/
        /*width: 40%;
        line-height: 25px;*/
        text-align: left;
        margin-left: 10px;
    }
    /*20230725 ljh*/
    .menu li {
        vertical-align: middle;
        /*height: 25px;
        margin: 5px 0;*/
    }
    .commandbutton{
        width: 100px !important;
        margin-left: 20px !important;
    }
    div.freezehander{
        /*width:500px;*//*20230725 ljh*/
    }
     
</style>
 
<div id="myModal" class="modal">
 
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" onclick="stopScan()">&times;</span>
    <p>扫描中</p>
        <p>Code:<input type="text" id="qrcode"/></p>
    <video playsinline="true" id="preview" style="width: 100%;z-index: 11;transform: scaleX(-1);margin-top: 10px;"></video>
    扫码履历：
    <ul id="scanedqr" style="list-style-type: none; text-align: center;padding: 0;width: 100%; height: 100px; overflow: auto">
    </ul>
 
  </div>
 
</div>
<apex:form id="allForm">
    <apex:actionFunction name="save" action="{!save}" rerender="allForm" onComplete="unblockUI();checkMessage();resetDetailDivMargintop();" />
    <apex:actionFunction name="fetchPhotoStatus" action="{!fetchPhotoStatus}" rerender="allForm" onComplete="unblockUI();resetDetailDivMargintop();" />
    <apex:inputHidden value="{!done_flg}" id="done_flg"/>
    <div id="main">
        <input type="hidden" id="QRType" value="1"/>
        <input type="hidden" id="QRTypeID" value=""/>
        <div id="hander" class="freezehander">
            <apex:outputPanel id="message">
                <apex:pageMessages />
            </apex:outputPanel>
            <!-- <div style="text-align: right;margin-top: 10px;">
                <apex:commandButton styleClass="commandbutton" onclick="savejs();" rerender="dummy" value="保存" disabled="{!saveBtnDisabled}"/>
            </div>
            <apex:outputText id="saveBtnDisabled" value="{!saveBtnDisabled}" style="display: none;"/> -->
            <!-- <apex:outputText value="（出库指示后取消）" style="color:red;" rendered="{!IF(SR_status='Received' && es.cancel_after_loaner_arranged__c, true, false)}"/> -->
            <!-- <table style="border-collapse: collapse; font-size:13px;">
                <colgroup>
                    <col width="150" />
                    <col width="170" />
                </colgroup>
                <tr>
                    状态切换btn
                    <th colspan="2" style="font-size:20px;text-align: center;width:500px;">
                        <ul id="Step_tab">
                            <li class="selected"><span class="tabsize">入库</span></li>
                        </ul>
                    </th>
                </tr>
            </table>
            <div style="text-align: right;margin-bottom: 20px;">
                <apex:commandButton styleClass="commandbutton" onclick="qrsacn()" value="扫一扫" rerender="dummy"/>
                <apex:commandButton styleClass="commandbutton" onclick="filljs1();" value="全部OK" rerender="dummy"/>
            </div>
            <apex:outputPanel layout="none" rendered="{!isConsum}">
                <div style="font-size: 14px;background-color:yellow;display:inline;">⚠️已存在货架号信息时无法修改，请在新品收货完成后再修改。</div>
            </apex:outputPanel>
            <div style="font-size: 14px;">缺少一对一入库:<apex:inputCheckbox value="{!forceSave}" /></div> -->
 
            <apex:pageBlock >
                <table style="border-collapse: collapse; font-size:13px;">
                    <colgroup>
                        <col width="20%" />
                        <col width="80%" />
                    </colgroup>
                    <tr>
                        <!-- 状态切换btn -->
                        <th  style="font-size:20px;text-align: center;width:280px;height: 50px;" >
                            <ul id="Step_tab" style="margin:0;">
                                <li class="selected"><span class="tabsize">入库</span></li>
                            </ul>
                        </th>
                        <th width="900px;" style="padding-left:50px;" class="myBtn">
                            <apex:commandButton styleClass="commandbutton" onclick="qrsacn()" value="扫一扫" rerender="dummy"/>
                            <apex:commandButton styleClass="commandbutton" onclick="filljs1();" value="全部OK" rerender="dummy"/>
                            <apex:commandButton styleClass="commandbutton" onclick="savejs();" rerender="dummy" value="保存" disabled="{!saveBtnDisabled}"/>
                            <apex:outputText id="saveBtnDisabled" value="{!saveBtnDisabled}" style="display: none;"/>
                        </th>
                    </tr>
                </table>
                <apex:outputPanel layout="none" rendered="{!isConsum}">
                    <div style="font-size: 14px;background-color:yellow;display:inline;">⚠️已存在货架号信息时无法修改，请在新品收货完成后再修改。</div>
                </apex:outputPanel>
                <div style="font-size: 14px;">缺少一对一入库:<apex:inputCheckbox value="{!forceSave}" /></div>
            </apex:pageBlock>
        </div>
        <apex:outputPanel id="detail">
 
        <div id="detailDiv" class="detail">
            <apex:variable var="indexloop" value="{!0}" />
            <apex:variable var="SetName" value="" />
            <apex:variable var="main_loc" value="" />
            <apex:repeat value="{!esdList}" var="esdInfo" id="esdList" rendered="{!IF(SR_status='StockIn', true, false)}">
                <apex:outputPanel layout="none" rendered="{!NOT(esdInfo.accessoryFlg)}" >
                    <apex:variable var="indexloop" value="{!indexloop+1}"/>
                    <apex:variable var="SetName" value="{!IF(SetName='', esdInfo.rec.ReceivingNoteSummary__c, SetName)}" />
                    <apex:outputPanel layout="none" rendered="{!IF(SetName=esdInfo.rec.ReceivingNoteSummary__c && indexloop != 1, true, false)}">
                        <br/>
                    </apex:outputPanel>
                    <apex:outputPanel layout="none" rendered="{!IF(SetName=esdInfo.rec.ReceivingNoteSummary__c, false, true)}">
                        <hr/>
                        <h3 style="padding: 5px;" class="detailtab">{!esdInfo.rec.ReceivingNoteSummary__r.Name}：{!esdInfo.rec.ReceivingNoteSummary__r.Fixture_Set__r.Name}</h3>
                        <apex:variable var="SetName" value="{!esdInfo.rec.ReceivingNoteSummary__c}" />
                    </apex:outputPanel>
                    <apex:outputPanel layout="none" rendered="{!IF(indexloop == 1, true, false)}">
                        <h3 style="padding: 5px;" class="detailtab">{!esdInfo.rec.ReceivingNoteSummary__r.Name}：{!esdInfo.rec.ReceivingNoteSummary__r.Fixture_Set__r.Name}</h3>
                    </apex:outputPanel>
                    <apex:outputPanel layout="none" rendered="{!IF(esdInfo.errorInfo=null, false, true)}">
                        <div>
                        <span style="color:red;font-weight: bold;">异常: </span><span style="color:red;font-weight: bold;">{!esdInfo.errorInfo}</span>
                        </div>
                    </apex:outputPanel>
 
                    <div class="menu">
                        <h2><div class="m_title">&nbsp;{!esdInfo.rec.Product_Name_F__c}&nbsp;&nbsp;
                            <!-- 2023-08-31 zyh 机身编码换位置 start -->
                            <!-- 20231029 ljh update style="display: -->
                            <span style="display: {!IF(esdInfo.rec.SerialNumber_F__c != null,'','none')}">({!esdInfo.rec.SerialNumber_F__c})</span>&nbsp;&nbsp;
                            <!-- 2023-08-31 zyh 机身编码换位置 end -->
                            <apex:outputPanel layout="none" rendered="{!esdInfo.onetoone}">(一对一附属品)</apex:outputPanel>
                    </div></h2>
 
                    <!-- TODO 回库はSet単位で、明細一つ一つのquickCheck要らないが、SetのquickCheck要る？ -->
                    <!-- <ul style="display:table text-align:center"> -->
                    <!-- 20230722 ljh -->
                    <ul style="padding: 1px 0.75rem;" >
                        <li>
                            <span class="fieldname">明细No.</span>
                            <span class="fieldvalue">{!esdInfo.rec.ReceivingNoteDetailNo__c}</span>
                        </li>
                        <li style="{!IF(ISBLANK(esdInfo.rec.Fixture_Arrival_Process__c),'display: none;','')}">
                            <span class="fieldname">备品入库处理</span>
                            <span class="fieldvalue" style="width: 65%;">{!esdInfo.rec.Fixture_Arrival_Process__c}</span>
                        </li>
                        <li style="{!IF(esdInfo.rec.Fixture_Arrival_Process__c == '变体','','display: none;')}">
                            <span class="fieldname">备品入库产品</span>
                            <span class="fieldvalue" style="width: 65%;">{!esdInfo.rec.Fixture_Arrival_Product__r.Name}</span>
                        </li>
                        <!-- 仅对固定资产提供资产照片和机身编码照片项 -->
                        <li style="display:{!IF(esdInfo.rec.Is_Internal_Asset__c,'true','none')}">
                            <span class="fieldname" >资产照片</span>
                            <apex:outputPanel rendered="{!ISBLANK(esdInfo.rec.RNDAssert__r.ImageAsset__c) && NOT(esdInfo.hasAssetImage)}">
                                <!-- 无照片时，显示 无 和 拍照键 -->
                                <span class="fieldvalue">无</span>
                                <apex:commandButton value="拍照" onclick="location.href='/takePhoto?type=3&id={!esdInfo.rec.Id}';return false"/>
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!NOT(ISBLANK(esdInfo.rec.RNDAssert__r.ImageAsset__c)) || esdInfo.hasAssetImage}">
                                <!-- 有照片时，显示 有 -->
                                <span class="fieldvalue">有</span>
                            </apex:outputPanel>
                        </li>                            
 
                        <li style="display:{!IF(esdInfo.rec.Is_Internal_Asset__c,'true','none')}">
                            <span class="fieldname" >机身编码照片</span>
                            <apex:outputPanel rendered="{!ISBLANK(esdInfo.rec.RNDAssert__r.ImageSerial__c) && NOT(esdInfo.hasSerialImage)}">
                                <!-- 无照片时，显示 无 和 拍照键 -->
                                <span class="fieldvalue">无</span>
                                <apex:commandButton value="拍照" onclick="location.href='/takePhoto?type=4&id={!esdInfo.rec.Id}';return false"/>
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!NOT(ISBLANK(esdInfo.rec.RNDAssert__r.ImageSerial__c)) || esdInfo.hasSerialImage}">
                                <!-- 有照片时，显示 有 -->
                                <span class="fieldvalue">有</span>
                            </apex:outputPanel>
                        </li>
 
                        <li>
                            <span class="fieldname">产品照片</span>
                            <apex:outputPanel rendered="{!NOT(esdInfo.hasProductImage)}">
                                <!-- 无照片时，显示 无 和 拍照键 -->
                                <span class="fieldvalue">无</span>
                                <apex:commandButton value="拍照" onclick="location.href='/takePhoto?type=5&id={!esdInfo.rec.Id}';return false"/>
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!esdInfo.hasProductImage}">
                                <!-- 有照片时，显示 有 -->
                                <span class="fieldvalue">有</span>
                            </apex:outputPanel>
                        </li>
                        <!-- 2023-08-31 zyh 机身编码换位置 start -->
                        <!-- <li>
                            <span class="fieldname">机身编码</span>
                            <apex:outputPanel rendered="{!ISBLANK(esdInfo.rec.SerialNumber_F__c) }"> -->
                                <!-- 无机身编号时，显示 无 -->
                                <!-- <span class="fieldvalue">无</span>
                            </apex:outputPanel>
                            <span class="fieldvalue">{!esdInfo.rec.SerialNumber_F__c}</span>
                        </li> -->
                        <!-- 2023-08-31 zyh 机身编码换位置 end -->     
                        <li data-assert="{!esdInfo.rec.Fixture_QRCode_F__c}_loc">
                            <!-- 货架号 -->
                            <span class="fieldname">{!$ObjectType.Asset.fields.WH_location__c.label}</span>
 
                            <apex:outputPanel layout="none" rendered="{!esdInfo.editable && esdInfo.rec.WH_location__c =''}">
                                <apex:inputField id="WHlocation" value="{!esdInfo.rec.WH_location__c}" styleClass="fieldvalue" style="margin-top:5px;height:15px"/>
                            </apex:outputPanel>
                            <apex:outputPanel layout="none" rendered="{!NOT(esdInfo.editable && esdInfo.rec.WH_location__c ='')}">
                                <span class="fieldvalue">{!esdInfo.rec.WH_location__c}</span>
                            </apex:outputPanel>
                        </li>
 
                        <!-- qiu 改 -->
                        <li data-qr="{!esdInfo.rec.Fixture_QRCode_F__c}" data-bar="{!esdInfo.rec.Barcode_F__c}">
                            <!-- 入库确认 -->
                            <span class="fieldname">{!$ObjectType.ReceivingNoteDetail__c.fields.Arrival_in_wh__c.label}</span>
                            
                            <apex:outputPanel layout="none" rendered="{!esdInfo.editable}">
                                <!-- 可修改情况下的入库确认的checkbox -->
                                <span class="fieldvalue"><apex:inputField id="arrivalin" value="{!esdInfo.rec.Arrival_in_wh__c}" style="margin-left:20px;margin-top:18px;" /></span>
 
                                <apex:outputPanel layout="none" rendered="{!esdInfo.rec.FSD_OneToOneAccessory_Cnt_F__c > 0 && esdInfo.onetoone}">
                                    <input type="hidden" name="onetoone" value="{!esdInfo.rec.ReceivingNoteSummary__c}"/>
                                </apex:outputPanel>
 
                                <apex:outputPanel layout="none" rendered="{!esdInfo.rec.FSD_OneToOneAccessory_Cnt_F__c > 0 && esdInfo.rec.Is_Body_F__c}">
                                    <apex:variable var="main_loc" value="{!esdInfo.rec.WH_location__c}" />
                                    <span class="fieldvalue"><input type="hidden" name="onetoone_main" value="{!esdInfo.rec.ReceivingNoteSummary__c}"/></span>
                                </apex:outputPanel>
 
                            </apex:outputPanel>
 
                            <apex:outputPanel layout="none" rendered="{!(NOT(esdInfo.editable))}">
                                <!-- 不可修改情况下的入库确认的checkbox --><!-- 已入库的加背景颜色——zyh -->
                                <span class="fieldvalue" style="background-color:{!IF(esdInfo.rec.Arrival_in_wh__c,'#1BFF00','')}">&nbsp;<apex:outputField value="{!esdInfo.rec.Arrival_in_wh__c}" /></span>
                       
                                <apex:outputPanel layout="none" rendered="{!esdInfo.rec.FSD_OneToOneAccessory_Cnt_F__c > 0 && esdInfo.rec.Is_Body_F__c}">
                                    <span class="fieldvalue">&nbsp;<apex:variable var="main_loc" value="{!esdInfo.rec.WH_location__c}" /></span>
                                </apex:outputPanel>
 
                            </apex:outputPanel>
                        </li>
 
                        <!--  【FY24大及巨大课题】北京新法规项目对应 DB202307428742 20230804 by lc Start -->
                        <li>
                            <span class="fieldname">{!$ObjectType.Asset.fields.Storage_Conditions__c.label}</span>
                            <span class="fieldvalue">{!esdInfo.rec.RNDAssert__r.Storage_Conditions__c}</span>
                        </li>
                        <li>
                            <span class="fieldname">{!$ObjectType.Asset.fields.Temperature_And_Humidity_Zone__c.label}</span>
                            <apex:outputPanel layout="none" rendered="{!esdInfo.editable}">
                                <apex:inputField value="{!esdInfo.rec.RNDAssert__r.Temperature_And_Humidity_Zone__c}" styleClass="fieldvalue" style="margin-top:10px; width:300px" />
                            </apex:outputPanel>
                            <apex:outputPanel layout="none" rendered="{!(NOT(esdInfo.editable))}">
                                <span><apex:outputField value="{!esdInfo.rec.RNDAssert__r.Temperature_And_Humidity_Zone__c}" /></span>
                            </apex:outputPanel>
                        </li>
                        <!--  【FY24大及巨大课题】北京新法规项目对应 DB202307428742 20230804 by lc End -->
                    </ul>
                    </div>
 
                </apex:outputPanel>
                
            </apex:repeat>
        </div>
        </apex:outputPanel>
    </div>
    <script type="text/javascript">
        var standalone = window.navigator.standalone,
            userAgent = window.navigator.userAgent.toLowerCase(),
            safari = /safari/.test( userAgent ),
            ios = /iphone|ipod|ipad/.test( userAgent ),
            ver = (navigator.userAgent).match(/OS (\d)?\d_\d(_\d)?/i)[0].split('_')[0].replace("OS ","");
        let scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 ,mirror: false});
 
        function filljsQR(content) {
            if (j$("#QRType").val() == 2) {
                filljsQR2(content, j$("#QRTypeID").val());
            } else {
                filljsQR1(content);
            }
        }
        scanner.addListener('scan', function (content) {
            filljsQR(content);
        });
        
        function qrsacn() {
            j$("#QRType").val(1);
            if (!standalone && !safari && ios) {
                window.location.href="sfqr://scan";
            } else {
                j$(".modal").show();
                Instascan.Camera.getCameras().then(function (cameras) {
                  if (cameras.length > 0) {
                    if (ver >= 13) {
                        scanner.start(cameras[1]);
                    } else {
                        // scanner.start(cameras[0]);
                        // 20231105 zq 设置摄像头 start
                        if(cameras.length > 1){
                            scanner.start(cameras[1]);
                        }else{
                            scanner.start(cameras[0]);
                        }
                        // 20231105 zq 设置摄像头 end
                    }
                  } else {
                    console.error('No cameras found.');
                  }
                }).catch(function (e) {
                  console.error(e);
                });
            }
        }
 
        function qrsacn2(setId) {
            j$("#QRType").val(2);
            j$("#QRTypeID").val(setId);
            if (!standalone && !safari && ios) {
                window.location.href="sfqr://scan";
            } else {
                j$(".modal").show();
                Instascan.Camera.getCameras().then(function (cameras) {
                  if (cameras.length > 0) {
                    if (ver >= 13) {
                        scanner.start(cameras[1]);
                    } else {
                        // scanner.start(cameras[0]);
                        // 20231105 zq 设置摄像头 start
                        if(cameras.length > 1){
                            scanner.start(cameras[1]);
                        }else{
                            scanner.start(cameras[0]);
                        }
                        // 20231105 zq 设置摄像头 end
                    }
                  } else {
                    console.error('No cameras found.');
                  }
                }).catch(function (e) {
                  console.error(e);
                });
            }
        }
 
        function stopScan() {
            scanner.stop().then(function () {
                j$(".modal").hide();
            });
            j$("#scanedqr").children().remove();
        }
        
        j$(document).ready(function(){
            j$( '#qrcode' ).unbind();
            j$( '#qrcode' ).keypress( function ( e ) {
                if ( e.which == 13 ) {
                    filljsQR(j$( '#qrcode' ).val());
                    return false;
                }
            });
        });
    </script>
</apex:form>
</apex:page>