js layer的使用

Myth丶恋晨 2023-02-10 03:59 7阅读 0赞

# 基于ACE #

具体css js样式可以参考fms-proxyInvoice-admin.zip，上传资源。

#parse("common/header.vm")
    <script type="application/javascript" src="/resources/js/layer/layer.js"></script>
    <div class="main-container" id="main-container">
    	<script type="text/javascript">
    		try {
    			ace.settings.check('main-container', 'fixed')
    		} catch (e) {
    		}
    	</script>
    	<div class="main-container-inner">
    		#parse("common/leftbarOutLine.vm")
    		<div class="main-content">
    			<div class="breadcrumbs" id="breadcrumbs">
    				<script type="text/javascript">
    					try {
    						ace.settings.check('breadcrumbs', 'fixed')
    					} catch (e) {
    					}
    				</script>
    				<ul class="breadcrumb">
    					<li><i class="icon-home home-icon"></i> <a href="/">首页</a></li>
    					<li><a href="/rest/eleInv/list">电子发票</a></li>
    					<li class="active">查看详情</li>
    				</ul>
    				
    			</div>
    			<div class="page-content">
    				<div class="row">
    					<div class="col-xs-12">
    						<div class="row">
    							<div class="col-sm-12">
    								<div class="widget-box transparent">
    									<div class="widget-header widget-header-flat">
    										<h4 class="lighter">基本信息</h4>
    										<div class="widget-toolbar">
    											<a href="#" data-action="collapse"> <i
    												class="icon-chevron-up"></i>
    											</a>
    										</div>
    									</div>
    									<div class="widget-body">
    										<div class="widget-body-inner" style="display: block;">
    											<div class="widget-main">
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">订单编号</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.orderNo}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">项目订单号</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.requestId}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">会员编号</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.memberNo}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">销货方名称</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.memberName}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">销货方纳税人识别号</div>
    														<div class="profile-info-value" style="min-height: 48px;">
    															<span>$!{eleInvVo.memberCertNo}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">购买方名称</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.buyerName}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">购买方纳税人识别号</div>
    														<div class="profile-info-value" style="min-height: 48px;">
    															<span>$!{eleInvVo.buyerCode}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">发票状态</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.orderStatus}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">含税金额</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.orderAmount}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">税后金额</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.amount}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">服务费</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.serFee}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-6">
    														<div class="profile-info-name">益世税费</div>
    														<div class="profile-info-value">
                                                                    <table class="table table-striped table-bordered table-hover">
                                                                        <thead>
                                                                        <tr>
                                                                            <th>税费总额</th>
                                                                            <th>$!{eleInvVo.orderTaxFee}</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        #foreach($e in $!eleInvVo.ysAllFeeList)
                                                                        <tr>
                                                                        	<td>$e.taxItemName</td>
                                                                        	<td>$e.taxAmount</td>
                                                                        </tr>
                                                                        #end
                                                                        </tbody>
                                                                    </table>
                                                                </div>
    													</div>
    													<div class="col-md-6">
    														<div class="profile-info-name">税局税费</div>
    														<div class="profile-info-value">
                                                                    <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                                                        <thead>
                                                                        <tr>
                                                                            <th>税费总额</th>
                                                                            <th>$!{eleInvVo.taxFee}</th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        #foreach($e in $!eleInvVo.taxAllFeeList)
                                                                        <tr>
                                                                        	<td>$e.taxItemName</td>
                                                                        	<td>$e.taxAmount</td>
                                                                        </tr>
                                                                        #end
                                                                        </tbody>
                                                                    </table>
                                                                </div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">发票代码</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.invoiceCode}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">发票号码</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.invoiceNo}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">开票日期</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{dateUtil.formatDate($!{eleInvVo.invoiceDate}, 'yyyy-MM-dd')}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">项目会员编号</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.platformMemberNo}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">交易创建时间</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{dateUtil.formatDate($!{eleInvVo.bizCreatedDate}, 'yyyy-MM-dd HH:mm:ss')}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">交易完成时间</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{dateUtil.formatDate($!{eleInvVo.bizCompDate}, 'yyyy-MM-dd HH:mm:ss')}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row">
    													<div class="col-md-4">
    														<div class="profile-info-name">红字发票代码</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.redInvoiceCode}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">红字发票号码</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{eleInvVo.redInvoiceNo}</span>
    														</div>
    													</div>
    													<div class="col-md-4">
    														<div class="profile-info-name">红字开票日期</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{dateUtil.formatDate($!{eleInvVo.redInvoiceDate}, 'yyyy-MM-dd')}</span>
    														</div>
    													</div>
    												</div>
    											</div>
    											
    										</div>
    									</div>
    									
    								</div>
    								
    							</div>
    						</div>
    						<div class="row">
    							<div class="col-sm-12">
    								<div class="widget-box transparent">
    									<div class="widget-header widget-header-flat">
    										<h4 class="lighter">商品信息</h4>
    										<div class="widget-toolbar">
    											<a href="#" data-action="collapse"> <i
    												class="icon-chevron-up"></i>
    											</a>
    										</div>
    									</div>
    									<div class="widget-body">
    										<div class="widget-body-inner" style="display: block;">
    											<div class="widget-main">
    											#foreach($e in $!{eleInvVo.productList})
    												<div class="row margin-10">
    													<div class="col-md-3">
    														<div class="profile-info-name">商品名称</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{e.productName}</span>
    														</div>
    													</div>
    													<div class="col-md-3">
    														<div class="profile-info-name">规格型号</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{e.specifications}</span>
    														</div>
    													</div>
    													<div class="col-md-3">
    														<div class="profile-info-name">单位</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{e.division}</span>
    														</div>
    													</div>
    													<div class="col-md-3">
    														<div class="profile-info-name">数量</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{e.itemCount}</span>
    														</div>
    													</div>
    												</div>
    												<div class="row margin-10">
    													<div class="col-md-3">
    														<div class="profile-info-name">单价</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{moneyUtil.fromatDecimal($!{e.unitPrice})}</span>
    														</div>
    													</div>
    													<div class="col-md-3">
    														<div class="profile-info-name">含税销售额</div>
    														<div class="profile-info-value" style="min-height: 35px;">
    															<span>$!{moneyUtil.fromatDecimal($!{e.totalAmount})}</span>
    														</div>
    													</div>
    												</div>
    												#end
    											</div>
    											
    										</div>
    									</div>
    									
    								</div>
    								
    							</div>
    						</div>
    						<div class="row">
    							<div class="col-sm-12">
    								<div class="widget-box transparent">
    									<div class="widget-header widget-header-flat">
    										<h4 class="lighter">发票信息</h4>
    										<div class="widget-toolbar">
    											<a href="#" data-action="collapse"> <i
    												class="icon-chevron-up"></i>
    											</a>
    										</div>
    									</div>
    									<div class="widget-body">
    										<div class="widget-body-inner" style="display: block;">
    											<div class="widget-main">
    												<div class="row-fluid col-sm-10 center">
                                                        <ul class="ace-thumbnails">
                                                        	#if($!{eleInvVo.pdfurl})
                                                            <li style="text-align:center;">
                                                                <a href="$!{eleInvVo.pdfurl}" data-rel="colorbox1" target="_blank" class="thumbnail">
                                                                  <embed src="$!{eleInvVo.pdfurl}" style="width: 300px;height: 300px; max-height: 300px; max-width: 300px;"/>
    															  ##<iframe name="resource" src="$!{eleInvVo.pdfurl}" style="height: auto;width: auto;" scrolling="no" frameborder="0"></iframe>
    															  <div class="text"><div class="inner">蓝票</div></div>
                                                                  </a>
                                                            </li>
                                                            #end
                                                            #if($!{eleInvVo.redpdfurl})
                                                              <li style="text-align:center;">
                                                                <a href="$!{eleInvVo.redpdfurl}" data-rel="colorbox1" target="_blank" class="thumbnail">
                                                                  <embed src="$!{eleInvVo.redpdfurl}" style="width: 300px;height: 300px; max-height: 300px; max-width: 300px;"/>
    															  ##<iframe name="resource" src="$!{eleInvVo.redpdfurl}" style="height: auto;width: auto;" scrolling="no" frameborder="0"></iframe>
    															  <div class="text"><div class="inner">红票</div></div>
                                                                </a>
                                                              </li>
                                                            #end
                                                         </ul>
    												</div>
    											</div>
    											
    										</div>
    									</div>
    									
    								</div>
    								
    							</div>
    						</div>
    						<div class="row">
    							<div class="col-sm-12">
    								<div class="widget-box transparent">
    									<div class="widget-header widget-header-flat">
    										<h4 class="lighter">操作信息</h4>
    										<div class="widget-toolbar">
    											<a href="#" data-action="collapse"> <i
    												class="icon-chevron-up"></i>
    											</a>
    										</div>
    									</div>
    									<div class="widget-body">
    										<div class="widget-body-inner" style="display: block;">
    											<div class="widget-main">
    												<table class="table table-striped table-bordered table-hover">
    													<thead>
    														<tr>
    															<th>操作名称</th>
    	                                                        <th>操作时间</th>
    	                                                        <th>备注</th>
    	                                                        <th>操作人</th>
    														</tr>
    													</thead>
    													<tbody>
    														#foreach($e in $!opreatorRecordList)
    														<tr>
    															<td>$!{invoiceOperateStatusEnum.getTitle($!{e.operateStatus})}</td>
    															<td>$!{dateUtil.formatDate($!{e.createdDate}, 'yyyy-MM-dd HH:mm:ss')}</td>
    															<td>$!{e.remark}</td>
    															<td>$!{e.operator}</td>
    														</tr>
    														#end
    													</tbody>
    												</table>
    											</div>
    											
    										</div>
    									</div>
    									
    								</div>
    								
    							</div>
    						</div>
    					</div>
    				</div>
    				<div class="center" style="margin-top: 30px;">
    					<div class="btn-toolbar inline middle no-margin">
    						<div data-toggle="buttons" class="btn-group no-margin" >
    							#if("$!{eleInvVo.orderStatus.value()}" == "$!{EleInvoiceStatusEnum_RED_AUDITING.value()}")
    							<input type="hidden" id="orderNo" value="$!{eleInvVo.orderNo}" />
    							<button class="btn btn-purple" id="redCheckBtn">红冲审核</button>
    							#end
    							<button class="btn" οnclick="window.close();">关闭</button>
    						</div>
    					</div>
    				</div>
    			</div>
    			
    		</div>
    		
    	</div>
    	
    </div>
    
    
    <div id="redCheckDialog" style="display: none; margin: 30px 30px">
         <div>
          <span>审核备注：</span><input type="text" id="remark" name="remark" style="margin-left: 20px; width: 256px;"/>
         </div>
    </div>
    
    <script type="text/javascript">
    $(function(){
    	
        $("#redCheckBtn").click(function() {
            $("#redCheckDialog").dialog("open");
        });
    
        $("#redCheckDialog").dialog({
            resizable: false,
            autoOpen: false,
            width: 500,
            modal: true,
            title: "<div class='widget-header'><h4 class='smaller'><i class='blue'></i>红冲审核</h4></div>",
            title_html: true,
            buttons: [
            	{
    	            html: "通过", 
    	            "class": "btn btn-success btn-xs",
    	            //"type": "button",
    	            click: function () {
    	            	if($("#remark").val().trim()=="") {
    						alert('请填写备注信息');
    	            		return;
    	            	}
    	            	redCheckConfrim(true);
    	            	$("#redCheckDialog").dialog("close");
    	            }
                },
                {
                    html: "<i class='bigger-110'></i>驳回",
                    "class": "btn btn-xs",
                    //"type": "reset",
                    click: function () {
                    	if($("#remark").val().trim()=="") {
    						alert('请填写备注信息');
    	            		return;
    	            	}
                    	redCheckConfrim(false);
                        $("#redCheckDialog").dialog("close");
                    }
                }
            ]
        });
        
        function redCheckConfrim(pass) {
        	var msg = pass?"确定通过吗?":"确定驳回吗?";
        	layer.confirm(msg, {icon: 3, title:'提示'}, function(index){
        		redCheckAjax(pass);
    			layer.close(index);
    		});
        }
        function redCheckAjax(pass) {
        	var curlayerIndex = layer.msg('提交中，请稍后', {shade: 0.3,time:0 });
          	$.ajax({
                type:"POST",
                url:"/rest/eleInv/redCheck",
                data:{
                    "orderNo":$("#orderNo").val(),
                    "remark":$("#remark").val().trim(),
                    "pass":pass
                },
                datatype:"json",
                success: function (data) {
                	layer.close(curlayerIndex);
                    if (data.success) {
                        layer.msg('操作成功', {
                                    icon: 1,
                                    time: 2000
                                },
                                function () {
                                    window.location.reload();
                                    return;
                                }
                        );
                    } else {
    					alert(data.msg || '操作失败');
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                	layer.close(curlayerIndex);
                    alert('服务器正忙，请稍后再试!');
                }
            });
        }
    });
    </script>