zhaozhiqiang
/
YH_Web_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="../../Script/Common/huayi.load.js"></script>
		<script src="../../Script/Common/huayi.config.js"></script>
		<title>导入号码</title>
		<style>
			.btn-success {
				color: #fff;
				background-color: #249fea;
				border-color: #4cae4c;
				border-radius: 4px;
				cursor: pointer;
			}
			
			.btn-success.active,
			.btn-success:active,
			.btn-success:focus,
			.btn-success:hover {
				border-color: #4cae4c;
				background-color: #249fea;
			}
			
			.btn-success[disabled],
			.btn-success[disabled]:active,
			.btn-success[disabled]:focus,
			.btn-success[disabled]:hover {
				background-color: #249fea;
			}
			
			#importNum {
				width: 130px;
				margin: 60px auto 0 auto;
			}
			
			.progress {
				width: 80%;
				margin: 20px auto 0 auto;
				display: none;
			}
		</style>
	</head>

	<body>

		<div style="padding: 10px; margin-bottom: 20px;">
			<div class="alert alert-info" role="alert">
				<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
				<span class="sr-only">tips:</span> 上传文件需要严格按照下载的EXCEL模板进行填写！上传后点击导入即可！
			</div>
			<div class="form-inline clearfix">
				<div class="form-group">
					<a href="../drmb/importPhonesTemplate.xlsx" download="外呼号码导入模板.xlsx" class="btn btn-success form-control" id="downloadExl" title="点击下载EXCEL模板" rel="nofollow">
						下载EXCEL模板
					</a>
				</div>
				<div class="form-group">
					<input class="hidden" type="file" id="upFile" name="upFile" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,application/x-xls,application/x-xlsx" />
					<input class="form-control btn btn-success" title="点击上传Excel文件" type="button" value="上传Excel文件" id="upFileExcel" />
					<span class="excelName"></span>
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

				</div>
			</div>
			<div class="form-group text-center">
				<input type="button" id="importNum" class="form-control btn btn-success" value="导入" />
			</div>
		</div>

		<script>
			var wid = helper.request.queryString("tid");
			var percents = 0;//长传文件进度值
			$(document).ready(function() {

				//上传EXCEL文件
				$("#upFileExcel").click(function() {
					$("#upFile").trigger("click");
				});
				$("#upFile").change(function() {
					var Files = document.getElementById("upFile").files;
					$('.excelName').html(Files[0].name); //文件名称
				});
				$("#importNum").click(function() {
					uploads();
				});

			});
			//上传Excel文件 模拟实时进度
			function uploads() {
				var txtName = $('.excelName').text();
				if(txtName == '') {
					layer.confirm('请先上传文件', {
						icon: 2,
						btn: ['确定']
					});
					return;
				}
				//一般情况下，excel后缀是".xls"，在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt"，启动宏的工作簿后缀名是".xlsm"。
				if(txtName.indexOf('.xls') != -1 ||
					txtName.indexOf('.xlsx') != -1 ||
					txtName.indexOf('.xlt') != -1 ||
					txtName.indexOf('.xlsm') != -1
				) {
					var formData = new FormData();
					var Files = document.getElementById("upFile").files;
					formData.append("upFile", Files[0]);//是	Files[]	上传文件
					formData.append("taskid", wid);//是	string	任务id
					$.ajax({
						url: huayi.config.callcenter_url + "callcenterapi/api/autocallouttask/importexcel",
						type: "POST",
						data: formData,
						/**
						 *必须false才会自动加上正确的Content-Type
						 */
						contentType: false,
						/**
						 * 必须false才会避开jQuery对 formdata 的默认处理
						 * XMLHttpRequest会对 formdata 进行正确的处理
						 */
						processData: false,
						xhr: function() {
							var xhr = jQuery.ajaxSettings.xhr();
							xhr.upload.onload = function() {
								updateProgress(88);
							}
							xhr.upload.onprogress = function(ev) {
								updateProgress(70);
							}
							return xhr;
						},
						beforeSend: function(request) {
							$('.progress').show();
							$("#importNum").attr("disabled", true);
							$("#importNum").val('导入中...');
							updateProgress(50);

						},
						success: function(result) {
							updateProgress(100);
							var r = $.parseJSON(result);
							$("#importNum").attr("disabled", false);
							$("#importNum").val('导入');
							if(r.state.toLowerCase() == "success") {
								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer.close(index); //再执行关闭
								parent.$('#phoneTable').bootstrapTable('refresh');
								parent.layer.alert(r.message, {
									icon: 1,
									btn: ['确定']
								});

							}
						},
						error: function(textStatus) {
							percents = 0;
							$('.progress').hide();
							layer.confirm('网络繁忙，请稍后再试...', {
								btn: ['确定'] //按钮
							});
							$("#importNum").attr("disabled", false);
							$("#importNum").val('导入');
						},
						complete: function(XMLHttpRequest, textStatus) {
							percents = 0;
							$('.progress').hide();
							if(textStatus == 'timeout') {
								var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
								xmlhttp.abort();
								layer.confirm('网络超时，请稍后再试...', {
									btn: ['确定'] //按钮
								});　　　　
							}
							$("#importNum").attr("disabled", false);
							$("#importNum").val('导入');
						},
					});

				} else {
					layer.confirm('请上传EXCEL文件', {
						icon: 2,
						btn: ['确定']
					});
					return;
				}
			}

			//更新进度条
			function updateProgress(p) {
				while(percents < p) {
					percents++;
					$('.progress-bar').css('width', percents + '%');
					$('.progress-bar').text(percents + '%');
				}

			}

			//上传Excel文件      (XHR中表示的是文件上传进度；上传完成返回数据还需要时间；)
			function upload() {
				var txtName = $('.excelName').text();
				if(txtName == '') {
					layer.confirm('请先上传文件', {
						icon: 2,
						btn: ['确定']
					});
					return;
				}
				//一般情况下，excel后缀是".xls"，在2007以及以后的版本中又增加了".xlsx"。excel的模板文件后缀名是".xlt"，启动宏的工作簿后缀名是".xlsm"。
				if(txtName.indexOf('.xls') != -1 ||
					txtName.indexOf('.xlsx') != -1 ||
					txtName.indexOf('.xlt') != -1 ||
					txtName.indexOf('.xlsm') != -1
				) {
					var formData = new FormData();
					var Files = document.getElementById("upFile").files;
					formData.append("upFile", Files[0]);
					formData.append("taskid", wid);
					formData.append("token", $.cookie("token"));
					$.ajax({
						url: huayi.config.callcenter_url + "CallOutPlan/TelInput",
						type: "POST",
						data: formData,
						/**
						 *必须false才会自动加上正确的Content-Type
						 */
						contentType: false,
						/**
						 * 必须false才会避开jQuery对 formdata 的默认处理
						 * XMLHttpRequest会对 formdata 进行正确的处理
						 */
						processData: false,
						xhr: function() { //这是关键  获取原生的xhr对象  做以前做的所有事情  
							var xhr = jQuery.ajaxSettings.xhr();
							xhr.upload.onload = function() {
								//alert('finish downloading')
							}
							xhr.upload.onprogress = function(ev) {
								//console.log(ev);
								//if(ev.lengthComputable) {
								var percent = 100 * ev.loaded / ev.total;
								//console.log(percent, ev);
								$('.progress-bar').css('width', percent + '%');
								$('.progress-bar').text(percent + '%');
								//}
							}
							return xhr;
						},
						beforeSend: function(request) {
							$('.progress').show();
							$("#importNum").attr("disabled", true);
							$("#importNum").val('导入中...');
						},
						success: function(result) {
							$('.progress').hide();
							var r = $.parseJSON(result);
							$("#importNum").attr("disabled", false);
							$("#importNum").val('导入');
							if(r.state.toLowerCase() == "success") {
								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer.close(index); //再执行关闭
								parent.Right(wid);
								parent.layer.alert(r.message, {
									icon: 1,
									btn: ['确定']
								});

							}
						},
						error: function(textStatus) {
							$('.progress-bar').css('width', '0%');
							$('.progress-bar').text('0%');
							layer.confirm('网络繁忙，请稍后再试...', {
								btn: ['确定'] //按钮
							});
							$("#importNum").attr("disabled", false);
							$("#importNum").val('导入');
						},
						complete: function(XMLHttpRequest, textStatus) {
							//$('.progress-bar').css('width', '0%');
							//$('.progress-bar').text('0%');
							if(textStatus == 'timeout') {
								var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
								xmlhttp.abort();
								layer.confirm('网络超时，请稍后再试...', {
									btn: ['确定'] //按钮
								});　　　　
							}
							$("#importNum").attr("disabled", false);
							$("#importNum").val('导入');
						},
					});

				} else {
					layer.confirm('请上传EXCEL文件', {
						icon: 2,
						btn: ['确定']
					});
					return;
				}
			}

		</script>
	</body>

</html>