cld/protected/view/admin/invoiceAdd.html

<!-- include 'header' -->

<link rel=stylesheet href="<?= WEB_SITE_GLOBAL ?>css/jquery.validator.css"> 
<script type="text/javascript" src="<?= WEB_SITE_GLOBAL ?>js/jquery.validator.min.js"></script>
<script type="text/javascript" src="<?= WEB_SITE_GLOBAL ?>js/zh-CN.js"></script>
<script src="<?= invoiceValidator ?>"></script>

<link rel="stylesheet" href="<?= WEB_SITE_GLOBAL ?>/js/jquery-ui.css" />
<script src="<?= WEB_SITE_GLOBAL ?>/js/jquery-ui.js"></script>

<script src="<?= WEB_SITE_GLOBAL ?>/js/jquery.ui.autocomplete.js"></script>

<script>
$(function() {

	$('a[tianyancha]').click(function() {
		var tianyancha=$("#tianyancha").val();
		window.open("https://www.tianyancha.com/search?key="+tianyancha);
	});




$('input[amount]').keyup(function() {
	var invoiceQuantity=$('#invoiceQuantity').val();
	var invoiceUnitPrice=$('#invoiceUnitPrice').val();
	
	var invoiceType=$("input[name='invoiceType']:checked").val();
	
	if(invoiceType==1&&invoiceQuantity != "" && invoiceQuantity != null && invoiceQuantity != 'undefined' && invoiceUnitPrice != "" && invoiceUnitPrice != null && invoiceUnitPrice != 'undefined'){ // "",null,undefined
		var amount=invoiceQuantity*invoiceUnitPrice;
		if (!isNaN(amount) ){
			$("#invoicePrice").val(amount);
			if(amount>100001){
				var msgHtml='<span class="msg-box n-right" for="invoicePrice"><span role="alert" class="msg-wrap n-error"><span class="n-icon"></span><span class="n-msg">此处必须小于10000</span></span></span>';
				$("#msgMaxPrice").html(msgHtml);
			}else{
				$("#msgMaxPrice").html('');
			}
		}else{
			$("#invoicePrice").val('');
			$("#msgMaxPrice").html('');
		}
    }else{
		$("#invoicePrice").val('');
		$("#msgMaxPrice").html('');
	}
});

$('#invoicePlain').click(function() {
	$("#invoicePrice").val('');
	$("#msgMaxPrice").html('');
});

$('#invoiceSpecial').click(function() {
	var invoiceQuantity=$('#invoiceQuantity').val();
	var invoiceUnitPrice=$('#invoiceUnitPrice').val();
	var amount=invoiceQuantity*invoiceUnitPrice;
	if (!isNaN(amount) ){
		$("#invoicePrice").val(amount);
		if(amount>100001){
			var msgHtml='<span class="msg-box n-right" for="invoicePrice"><span role="alert" class="msg-wrap n-error"><span class="n-icon"></span><span class="n-msg">此处必须小于10000</span></span></span>';
			$("#msgMaxPrice").html(msgHtml);
		}else{
			$("#msgMaxPrice").html('');
		}
	}else{
		$("#invoicePrice").val('');
		$("#msgMaxPrice").html('');
	}
});


$('button[invoiceDetalfn]').click(function() {
	
	var cid=$('#cid option:selected').html();
	var st=$("input[name='settlementType']:checked").val();
	var settlementType='';
	if(st=='SOFTWARE'){
		settlementType='软件销售 ';
	}else if(st=='TRAINING'){
		settlementType='培训班 ';
	}
	
	var it=$("input[name='invoiceType']:checked").val();
	var invoiceForm=$("input[name='invoiceForm']:checked").val();
	
	var invoiceTitle=$("#invoiceTitle").val();
	var TINT=$("#TINT").val();
	var addressT=$("#addressT").val();
	var phoneT=$("#phoneT").val();
	var bankT=$("#bankT").val();
	var bankAccountT=$("#bankAccountT").val();
	
	var invoiceCompany=$("#invoiceCompany").val();
	var TIN=$("#TIN").val();
	var address=$("#address").val();
	var phone=$("#phone").val();
	var bank=$("#bank").val();
	var bankAccount=$("#bankAccount").val();
	
	var invoiceType='';
	if(it=='0'){
		invoiceType='增值税普通发票  ';
		
	}else if(it=='1'){
		invoiceType='增值税专用发票 ';
		invoiceTitle=invoiceCompany;
		
		TINT=TIN;
		addressT=address;
		phoneT=phone;
		bankT=bank;
		bankAccountT=bankAccount;
	}
	
	if(invoiceForm=='electronic'){
		invoiceType='增值税普通发票（电子发票）';
	}
	
	
	var invoiceElement=$('#invoiceElement option:selected').html();
	var invoiceQuantity=$("#invoiceQuantity").val();
	var invoiceUnitPrice=$("#invoiceUnitPrice").val();
	var invoicePrice=invoiceQuantity*invoiceUnitPrice;
	
	var html='<div class="modal-body"><table class="table table-condensed table-bordered"><tbody><tr><th class="taC">开票信息</th><th class="taC">发票内容</th></tr><tr><td>';
		html+='<p><span class="text-truncate">所在办事处：</span><span>'+cid+'</span></p>';
		html+='<p><span class="text-truncate">结算方式：</span><span class="colRed">'+settlementType+'</span>';
		html+='</p><p><span class="text-truncate">发票类型：</span><span class="colRed">'+invoiceType+'</span></p>';
		html+='</td><td>';
		html+='<p><span class="text-truncate">开票内容：</span><span class="colRed">'+invoiceElement+'</span>';
		html+='</p><p><span class="text-truncate">数量：</span><span>'+invoiceQuantity+'</span>';
		html+='</p><p><span class="text-truncate">单价：</span><span>'+invoiceUnitPrice+'</span>';
		html+='</p><p><span class="text-truncate">开票金额：</span><span class="colRed">'+invoicePrice+'</span>';
		html+='</p><p><span class="text-truncate">单位名称：</span><span class="colRed">'+invoiceTitle+'</span>';
		html+='</p><p><span>纳税人识别码：</span><span class="colRed">'+TINT+'</span></p>';
		html+='<p><span class="text-truncate">注册地址：</span><span class="colRed">'+addressT+'</span></p>';
		html+='<p><span class="text-truncate">注册电话：</span><span class="colRed">'+phoneT+'</span></p>';
		html+='<p><span class="text-truncate">开户银行：</span><span class="colRed">'+bankT+'</span></p>';
		html+='<p><span class="text-truncate">银行帐号：</span><span class="colRed">'+bankAccountT+'</span></p>';
		html+='</td></tr></tbody></table><p>红字为重要内容！请谨慎确认无误！申请提交后开票信息将不能修改！</p></div>';
	
		$("#modalBody").html(html);
		
});


$("input[autoIFBTitle]").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/autoFillInIFB",
            dataType: "json",
            data:{
            	fill: request.term,
            	fillType:'TITLE'
            },
            success: function( data ) {
                response( $.map( data, function( item ) {
                	
                    return {
                    	value: item.invoiceTitle,
                    	
                    	invoiceTitle:item.invoiceTitle,
                    	TIN:item.TIN,
                    	
                    	address:item.address,
                    	phone:item.phone,
                    	bank:item.bank,
                    	bankAccount:item.bankAccount
//                        name:item.clientname+"-"+item.companyname,
//                        value: item.clientname+"-"+item.companyname
                    }
                }));
            }
        });
    },
    minLength: 1,
    select: function( event, ui ) {
    	var invoiceType=$('input[name="invoiceType"]:checked').val();
    	if(invoiceType==0){
    		$("#TINT").val(ui.item.TIN);
        	$("#addressT").val(ui.item.address);
        	$("#phoneT").val(ui.item.phone);
        	$("#bankT").val(ui.item.bank);
            $("#bankAccountT").val(ui.item.bankAccount);
    	}else{
    		$("#TIN").val(ui.item.TIN);
        	$("#address").val(ui.item.address);
        	$("#phone").val(ui.item.phone);
        	$("#bank").val(ui.item.bank);
            $("#bankAccount").val(ui.item.bankAccount);
    	}
    	
        
    }
});
$("input[autoIFBTIN]").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/autoFillInIFB",
            dataType: "json",
            data:{
            	fill: request.term,
            	fillType:'TIN'
            },
            success: function( data ) {
                response( $.map( data, function( item ) {
                	
                    return {
                    	value: item.TIN,
                    	
                    	invoiceTitle:item.invoiceTitle,
                    	TIN:item.TIN,
                    	
                    	address:item.address,
                    	phone:item.phone,
                    	bank:item.bank,
                    	bankAccount:item.bankAccount
//                        name:item.clientname+"-"+item.companyname,
//                        value: item.clientname+"-"+item.companyname
                    }
                }));
            }
        });
    },
    minLength: 1,
    select: function( event, ui ) {
    	var invoiceType=$('input[name="invoiceType"]:checked').val();
    	if(invoiceType==0){
    		$("#invoiceTitle").val(ui.item.invoiceTitle);
        	$("#addressT").val(ui.item.address);
        	$("#phoneT").val(ui.item.phone);
        	$("#bankT").val(ui.item.bank);
            $("#bankAccountT").val(ui.item.bankAccount);
    	}else{
    		$("#invoiceCompany").val(ui.item.invoiceTitle);
        	$("#address").val(ui.item.address);
        	$("#phone").val(ui.item.phone);
        	$("#bank").val(ui.item.bank);
            $("#bankAccount").val(ui.item.bankAccount);
    	}
    }
});


$('input[type=radio][name=invoiceForm]').change(function() {
	   if (this.value == 'paper') {
		   $('tr[paperTR]').show();
		   $('tr[electronicTR]').hide();
		   $('table[electronicContact]').hide();
		   $('div[paperMark]').show();
		   $('#electronicPhone').val('1');
		   
	   } else if (this.value == 'electronic') {
		   $('tr[paperTR]').hide();
		   $('tr[electronicTR]').show();
		   $('table[electroniCcontact]').show();
		   $('div[paperMark]').hide();
		   $('#electronicPhone').val('');
		   
	   }
});


})

</script>
<body>

	<div class="mainLayout">
		<div class="mainMenu">
			<div class="menuItem">
				<a href="#" class="mLogo">CLD</a>
				<ul>
					<!-- include 'menuReceipt' -->
					</ul>
			</div>
			
		</div>
		<div class="warpContent">
			<div class="subMenu fL">
				<div class="menuItem">
					<!-- include 'invoiceMenu' -->
				</div>
			</div>
			<div class="adminContent autoHeight">
				<legend>填写申请开票</legend>
				<div class="borad-news">
					<div class="saeaList">
						<form action="/invoiceAddDo"  method="post" class="invoice" id="invoice" data-validator-option="{timely:3,showOk:''}">
							<input type="hidden" name="token" value="{{token}}">
							<input type="hidden" name="tokenTime" value="{{tokenTime}}">
						<table class="table table-bordered table-condensed">
								<tbody>
								<blockquote><p class=""><a href="/invoiceAdd/AUTOFILL" copy-invoice>加载上一张开票信息</a></p></blockquote>
								
								<tr>
									<th class="taC" width="150">所在办事处</th>
									<td>
										<select name="cid" id="cid">
								<!-- loop category -->
								<option <!-- if {{category' value.cid}} == {{staff.0.cid}}  --> selected <!-- endif --> value="{{category' value.cid}}" >{{category' value.title}}</option>
								<!-- endloop -->
										</select>
									</td>
									<th class="taC"><span class="colRed">*</span>开票内容</th>
									<td>
									<select name="invoiceElement" id="invoiceElement">
										<!-- include 'invoiceElement' -->
									</select>
								</td>
								</tr>
								<tr>
									<th class="taC"><span class="colRed">*</span>数量</th>
									<td>
										<input style="width:60px" name="invoiceQuantity" amount id="invoiceQuantity" value="1" placeholder="输入数量" pattern="[0-9]" type="number" min="1" step="1">
									</td>
									<th class="taC"><span class="colRed">*</span>单价</th>
									<td><input style="width:100px" name="invoiceUnitPrice" amount id="invoiceUnitPrice"  placeholder="输入单价" pattern="[0-9]" type="number" min="1" step="100"></td>
								</tr>
								<tr>
									<th class="taC"><span class="colRed">*</span>开票金额</th>
									<td colspan="3">
									
										<p class="colGray">数量*单价=开票金额&nbsp;&nbsp;&nbsp;&nbsp;<span style="display:none" class="colRed">专用发票总金额暂时不能超过100000.00（十万）元。</span></p>
										<b class="colOrange" id="tp" style="font-size:18px">￥0</b>
										<span id="msgMaxPrice"></span>
										<input  name="10000" id="10000" type="hidden" value="10000">
									<input  placeholder="输入开票金额" pattern="[0-9]" name="invoicePrice" id="invoicePrice" type="hidden" min="0" step="0.01">
									</td>
									
								</tr>
								
								<tr >
									<th class="taC">发票备注</th><td colspan="3"><textarea placeholder="用于发票右下角备注栏内容，如项目名称、项目地点" name="remark" style="width:550px"></textarea>
									</td>
								</tr>
								
								<tr>
									<th class="taC"><span class="colRed">*</span>发票形式</th><td colspan="3">
									<label class="radio inline"><input type="radio"  checked name="invoiceForm" value="paper">纸质发票</label>
									<label class="radio inline" ><input type="radio" name="invoiceForm" id="invoiceForm" value="electronic" >电子发票</label>
									</td>
								</tr>
								
								<tr style="display:none" electronicTR >
									<th class="taC"><span class="colRed">*</span>发票类型</th><td colspan="3">
									增值税普通发票（电子发票）
									</td>
								</tr>
								
								<tr paperTR>
									<th class="taC"><span class="colRed">*</span>发票类型</th><td colspan="3">
									<label class="radio inline"><input checked name="invoiceType" id="invoicePlain" onclick="invoiceShow()"  value="0" type="radio"  >增值税普通发票</label>
									<label class="radio inline colRed"><input name="invoiceType" id="invoiceSpecial" onclick="invoiceShow()"  value="1" type="radio">增值税专用发票</label>
									</td>
								</tr>
								
								<tr>
									<th class="taC"><span class="colRed">*</span>结算方式</th><td colspan="3">
									<label class="radio inline"><input type="radio"  onclick="settlementTypeShow()" name="settlementType" value="SOFTWARE" data-rule="checked">软件销售</label>
									
									<!-- if !empty({{itList}}) -->
									<label class="radio inline"><input type="radio" onclick="settlementTypeShow()" name="settlementType" id="settlementType" value="TRAINING">培训班</label>
									<label class="radio inline" id='trainingSelect' style="display:none">
									<select name='trainId' id='trainId' >
									<option selected value="">请选择</option>
									<!-- loop itList -->
									<option value="{{itList' value.itidKey}}">{{itList' value.trainDate}}&nbsp;{{itList' value.trainName}}</option>
									<!-- endloop -->
									</select>
									</label>
									<!-- endif -->
									<p class="colGray">结算方式影响您的工资提成，请正确选择！</p>
									</td>
								</tr>
								
								</tbody>
							</table>
						<table id="plainInvoice_box" class="table table-bordered table-condensed">
								<tbody>
								<tr>
									<th colspan="4" class="taC">增值税普通发票</th>
								</tr>
								<tr>
									<th class="taC" width="150"><span class="colRed">*</span>发票抬头</th>
									<td >
									<input type="text" name="invoiceTitle" id="invoiceTitle" autoIFBTitle value="" >
									</td>
									<th class="taC" width="150"><span class="colRed"></span>纳税人识别码</th>
									<td><input type="text" name="TINT" id="TINT" autoIFBTIN ></td>
								</tr>
								
								<tr>
									<th class="taC"><span class="colRed"></span>注册地址</th>
									<td><input type="text" name="addressT" id="addressT"></td>
									<th class="taC"><span class="colRed"></span>注册电话</th>
									<td><input type="text" name="phoneT" id="phoneT"></td>
								</tr>
								<tr>
									<th class="taC"><span class="colRed"></span>开户银行</th>
									<td><input type="text" name="bankT" id="bankT"></td>
									<th class="taC"><span class="colRed"></span>银行账号</th>
									<td><input type="text" name="bankAccountT" id="bankAccountT"></td>
								</tr>


								
								</tbody>
							</table>
						<table id="specialInvoice_box" class="table table-bordered table-condensed" style="display:none">
								<tbody>
								<tr>
									<th colspan="4" class="taC colRed">增值税专用发票</th>
								</tr>
								<tr>
									<th class="taC" width="150"><span class="colRed">*</span>单位名称</th>
									<td><input type="text" name="invoiceCompany" autoIFBTitle id="invoiceCompany"></td>
									<th class="taC" width="150"><span class="colRed">*</span>纳税人识别码</th>
									<td><input type="text" name="TIN" autoIFBTIN id="TIN"></td>

								</tr>
								<tr>
									<th class="taC"><span class="colRed">*</span>注册地址</th>
									<td><input type="text" name="address" id="address"></td>
									<th class="taC"><span class="colRed">*</span>注册电话</th>
									<td><input type="text" name="phone" id="phone"></td>
								</tr>
								<tr>
									<th class="taC"><span class="colRed">*</span>开户银行</th>
									<td><input type="text" name="bank" id="bank"></td>
									<th class="taC"><span class="colRed">*</span>银行账号</th>
									<td><input type="text" name="bankAccount" id="bankAccount"></td>
								</tr>

								</tbody>
							</table>

							<table class="table table-bordered table-condensed" style="margin-top: -21px;">
							<tr>
								<td colspan="4" class="taC"><img src="<?= WEB_SITE_GLOBAL ?>/images/tianyancha.png">
									<div class="input-append" style="margin:0">

										<input class="span3" type="text" id="tianyancha" value="">
										<a class="btn btn-small btn-primary" tianyancha href="javascript:void(0)" target="_blank">天眼一下</a>
									</div>
								</td>
							</table>

						<table class="table table-bordered table-condensed">
								
								<tr>
									<th colspan="4" class="taC">邮寄信息</th>
								</tr>
								<tr>
									<th class="taC" width="150"><span class="colRed">*</span>是否邮寄</th><td colspan="3">
									<label class="radio inline"><input type="radio" onclick="mailShow()" id="isMail" name="doPost" value="1" checked >是</label>
									<label class="radio inline"><input type="radio" onclick="mailShow()" name="doPost" value="0">否</label>
								</td>
								</tr>
								<tbody id="mail_box" >
								<tr>
									<th class="taC" width="150"><span class="colRed">*</span>收件人</th>
									<td><input type="text" name="recipients" id="recipients"></td>
									<th class="taC" width="150"><span class="colRed">*</span>收件人手机/电话</th>
									<td><input type="text" name="recipientsPhone" id="recipientsPhone"></td>
								</tr>
								<tr>
									<th class="taC" width="150"><span class="colRed">*</span>收件地址</th><td colspan="3">
									<input type="text" class="span6" name="recipientsAddress" id="recipientsAddress"></td>
								</tr>
								<tr>
									<th class="taC" width="150">邮寄物品</th><td colspan="3">
									
									
									<div class="checkbox">
									  
									    <input type="checkbox" name="softLock" value="1">
									    软件锁 （个）<br><input type="number" name="softLockNum" class="span1" placeholder="数量" value="1">
									  
									</div>
									<div paperMark class="checkbox">
									  
									    <input  type="checkbox" checked disabled value="1">
									    发票 （张）<br>1
									  
									</div>
									<div class="checkbox">
									  
									    <input type="checkbox" name="contract" value="1">
									    合同（份） <br><input type="number" name="contractNum" class="span1" placeholder="数量" value="1">
									  
									</div>
									<div class="checkbox">
									  
									    <input type="checkbox" name="instructions" value="1">
									    说明书 （本）<br><input type="number" name="instructionsNum" class="span1" placeholder="数量" value="1">
									 
									</div>
									<div class="checkbox">
									  
									    <input type="checkbox" name="remittance" value="1">
									    汇款账号单（张）
									  
									</div>
									<div class="checkbox">
									  
									    <input type="checkbox" checked="" disabled="">
									    备注<br>
									    <textarea style="width:550px" name="mailItems" placeholder="备注信息或其他需要邮寄物品请填写在这，写明数量。"></textarea>
									    
									  
									</div>
								</td>
									

								</tr>
								</tbody>
							</table>
							
							<table style="display:none" electronicContact class="table table-bordered table-condensed">
								<tbody>
								<tr>
									<th colspan="4" class="taC">电子发票发送</th>
								</tr>
								<tr>
									<th class="taC" width="150">收件人手机</th>
									<td><input class="contact" type="text"  name="electronicPhone" id="electronicPhone" value="1" placeholder="手机号"
									data-rule="required(from, .contact); digits" data-msg-required="请至少填写一种联系方式">
									</td>
								</tr>
								<tr>
									<th class="taC" width="150">收件人邮箱</th>
									<td><input class="contact" type="text"   name="electronicEmail"  placeholder="邮箱"
									data-rule="required(from, .contact); email">
									</td>
								</tr>
								<tr>
									<td class="taC" width="150" colspan="4"><span class="colRed">*电子发票收取方式二选一，手机和邮箱，请必填一项，推荐邮箱。</span></td>
								</tr>
								</tbody>
							</table>
							
						<p class="taR"><button type="button" class="button" invoiceDetalfn href="#confirm" data-toggle="modal">提交申请</button></p>
						
						<div class="modal hide fade" id="confirm">
						  <div class="modal-dialog">
						    <div class="modal-content">
						    <div class="modal-header">
						    <h3>确认信息无误</h3>
						    </div>
						    <div class="modal-body" id="modalBody">
						    	
						    </div>
							<div class="modal-footer">
							<input type="submit" class="button" value="无误，提交申请">
							    
							    <a href="#" class="button btn-gray" data-dismiss="modal" aria-hidden="true">我要检查一下</a>
							</div>
						</div>
						</div>
						</div>
						
						
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>	
	<!--申请确认-->

    <!--申请确认-->  	
<script type="text/javascript">autoFlashHeight();</script>	
</body>