基於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>
<!-- .breadcrumb -->
</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>
<!-- /widget-main -->
</div>
</div>
<!-- /widget-body -->
</div>
<!-- /widget-box -->
</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>
<!-- /widget-main -->
</div>
</div>
<!-- /widget-body -->
</div>
<!-- /widget-box -->
</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>
<!-- /widget-main -->
</div>
</div>
<!-- /widget-body -->
</div>
<!-- /widget-box -->
</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>
<!-- /widget-main -->
</div>
</div>
<!-- /widget-body -->
</div>
<!-- /widget-box -->
</div><!-- col-sm-12 -->
</div><!-- /row -->
</div><!-- /col-xs-12 -->
</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>
<!-- /.page-content -->
</div>
<!-- /.main-content -->
</div>
<!-- /.main-container-inner -->
</div>
<!-- /.main-container -->
<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>