YH_Web_UI/WebUI/CallCenterWe.../equipmentMai.../js/addOrEditPro...

/**
 * 项目增加或编辑
 * */

var imglist; //保存项目logo的数组
var proimglist = []; //保存项目图纸的数组
var uploader; //上传实例
var limitNum = 6; //限制数量

$(function() {
	autosize($('textarea'));

	var pro_Id = helper.request.queryString("edit_id");

	if(pro_Id) { //修改
		//项目所在地//项目类型 //企业性质
		$.when(helper.getDropList.getProLocation($('#pro_province'), $('#pro_city')),
				helper.getDropList.getlistDropByDic($('#pro_property'), 'XMLX'),
				helper.getDropList.getlistDropByDic($('#pro_nature'), 'XMXZ')
			)
			.done(function() {
				getProject(pro_Id);
			});

		laydate.render({
			elem: '#pro_times',
			range: '~',
			//type: 'datetime',
			theme: '#249fea',
		});
		//合同
		laydate.render({
			elem: '#pro_order',
			theme: '#249fea',
		});
	} else {
		//项目所在地
		helper.getDropList.getProLocation($('#pro_province'), $('#pro_city'));
		//项目类型
		helper.getDropList.getlistDropByDic($('#pro_property'), 'XMLX');
		//企业性质
		helper.getDropList.getlistDropByDic($('#pro_nature'), 'XMXZ')
		$(".image-crop > img").attr('src', '');
		imgEditor(); //图片裁剪
		laydate.render({
			elem: '#pro_times',
			range: '~',
			//type: 'datetime',
			theme: '#249fea',
			//min: nowts,
		});
		laydate.render({
			elem: '#pro_order',
			theme: '#249fea',
			//min: 0,
		});
		uploaderImages(); //初始化项目图纸上传
	}

	//添加编辑保存按钮点击
	$('#pro_save').on('click', saveProject);

});
//获取单个项目
function getProject(ids) {
	$.getJSON(huayi.config.callcenter_url + "equipmentapi/api/ProjectInfo/getdetails", {
		id: ids,
	}, function(data) {
		if(data.state == "success") {
			var res = data.data;
			$('#pro_title').val(res.project_name);
			$('#pro_province').selectpicker('val', res.project_province).trigger('change'); //省
			$('#pro_city').selectpicker('val', res.project_city).trigger('change'); //市
			$('#pro_property').selectpicker('val',res.project_property).trigger('change'); //项目类型
			$('#pro_nature').selectpicker('val',res.project_nature).trigger('change'); //string	企业性质
			$('#pro_resperson').val(res.project_resperson); //项目负责人
			if(res.project_starttime && res.project_endtime){
				$('#pro_times').val(res.project_starttime + ' ~ ' + res.project_endtime); //合同时间
			}
			//项目logo
			var ipUrl = data.data.project_pic;
			if(ipUrl && ipUrl.length > 0) {
				imglist = ipUrl;
				$.each(ipUrl, function(i, v) {
					$('.crop_left img').attr('src', v.fileurl);
					$("#file_name").val(v.filename);
				});
			} else {
				$('.crop_left img').attr('src', '');
			}
			imgEditor();

			$('#pro_content').val(res.project_profile); //项目简介

			//项目图纸
			proimglist = res.project_plans;
			proimglist = proimglist == null ? [] : proimglist;
			limitNum -= proimglist.length;
			uploaderImages(); //附件上传
			if(proimglist.length > 0) {
				$('#fileNum').text(proimglist.length);
				var $list = $("#fileList");
				$.each(proimglist, function(i, v) {
					if(v.filesmallurl) {
						//原来的图片
						var $li = $(
							'<li><span class="img_mask"><i class="img_del"></i></span>' +
							'<img src="' + v.filesmallurl + '" title="原来的图片"/>' +
							'<span class="file_name">' + v.filename + '</span>' +
							'</li>'
						);
						$list.append($li);
					} else {
						var $liFile = $(
							'<li><span class="img_mask"><i class="img_del"></i></span>' +
							'<div class="noThumb" title="原来的文件"><i class="glyphicon glyphicon-paperclip"></i><p>无法预览</p></div>' +
							'<span class="file_name">' + v.filename + '</span>' +
							'</li>'
						);
						$list.append($liFile);
					}
				});
				$list.find('li').off('click');
				$list.find('li').on('click', '.img_del', function() {
					$(this).parent().parent().remove();
					var itemFileName = $(this).parent().parent().find('.file_name').text();
					$.each(proimglist, function(i, v) {
						if(v && v.filename == itemFileName) {
							proimglist.splice(i, 1);
							//helper.methods.delImgs(v.filesmallurl, v.fileurl);
						}
					});
					$('#fileNum').text(proimglist.length);
					limitNum = 6 - proimglist.length;
					uploaderImages();
				});
			}
		}
	});
}
//保存项目
function saveProject() {
	var pro_Id = helper.request.queryString("edit_id");
	var wUrl;

	if(!$.trim($('#pro_title').val())) {
		layer.confirm('项目名称不能为空', {
			icon: 2,
			btn: ['确定'] //按钮
		});
		return;
	}
	if(!$.trim($('#pro_province').val())) {
		layer.confirm('项目所在地省份不能为空！', {
			icon: 2,
			btn: ['确定'] //按钮
		});
		return;
	}
	if(!$.trim($('#pro_city').val())) {
		layer.confirm('项目所在地市不能为空！', {
			icon: 2,
			btn: ['确定'] //按钮
		});
		return;
	}

	if(!$.trim($('#pro_property').val())) {
		layer.confirm('项目类型不能为空', {
			icon: 2,
			btn: ['确定'] //按钮
		});
		return;
	}
	
	if(!$.trim($('#pro_nature').val())) {
		layer.confirm('企业性质不能为空', {
			icon: 2,
			btn: ['确定'] //按钮
		});
		return;
	}

	if(!$.trim($('#pro_resperson').val())) {
		layer.confirm('项目负责人不能为空', {
			icon: 2,
			btn: ['确定'] //按钮
		});
		return;
	}

	if(pro_Id) {
		wURL = "equipmentapi/api/ProjectInfo/update";
	} else {
		wURL = "equipmentapi/api/ProjectInfo/add";
	}

	$.post(huayi.config.callcenter_url + wURL, {
		id: pro_Id, //pro_Id为空的时候添加
		project_name: $('#pro_title').val(), //项目名称 
		project_province: $('#pro_province').val(), //项目所在省
		project_city: $('#pro_city').val(), //项目所在市
		project_property: $('#pro_property').val(), //项目类型
		project_nature: $('#pro_nature').val(), //string	企业性质
		project_resperson: $('#pro_resperson').val(), //项目负责人
		project_starttime: $('#pro_times').val() && $('#pro_times').val().split(' ~ ')[0], //目开始时间
		project_endtime: $('#pro_times').val() && $('#pro_times').val().split(' ~ ')[1], //项目结束时间
//		project_order: $('#pro_order').val(), //项目合同
		project_pic: imglist, //项目logo
		project_plans: proimglist, //项目图纸 json
		project_profile: $('#pro_content').val(), //项目简介
	}, function(data) {
		data = JSON.parse(data);
		if(data.state == "success") {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
			parent.$('#table_all').bootstrapTable('refresh');
			parent.layer.msg("保存成功");
		}
	});
}

//图片剪切
function imgEditor() {
	var o = $(".image-crop > img");
	o.cropper("destroy");
	o.cropper({
		aspectRatio: 1 / 1,
		resizable: true,
		dragCrop: true,
		preview: ".img-preview",
		done: function() {

		}
	});
	var r = $("#inputImage");
	var fileName = $("#file_name").val();
	if(window.FileReader) {
		r.change(function() {
			$('.progress-bar').css('width', '0%');
			$('.progress-bar').text('0%');
			var e, i = new FileReader,
				t = this.files;
			if(t.length && (e = t[0], /^image\/\w+$/.test(e.type))) {
				i.readAsDataURL(e);
				fileName = e.name;
				i.onload = function() {
					r.val("");
					o.cropper("reset", !0).cropper("replace", this.result);
				}
			} else {
				layer.msg("请选择本地图片文件");
			}
		});

		$("#setDrag").click(function() {
			var self = $(this);
			o.cropper("setDragMode", "crop");
			var imgUrl = o.cropper("getCroppedCanvas").toDataURL('image/png');
			//var dataurl = encodeURIComponent(imgUrl);
			var filesjson;
			var list = [],
				listItem = {};
			listItem.filename = fileName;
			listItem.fileurl = imgUrl;
			list.push(listItem);
			filesjson = JSON.stringify(list);
			upLoadFile(filesjson, self);
			//另外一种方式			
			//			var formData = new FormData();
			//			formData.append("type", 'proManagement');
			//			formData.append("filesjson", filesjson);
			//			$.ajax({
			//				url: huayi.config.callcenter_url + "fileserverapi/Api/Upload",
			//				type: "POST",
			//				data: formData,
			//				/**
			//				 *必须false才会自动加上正确的Content-Type
			//				 */
			//				contentType: false,
			//				/**
			//				 * 必须false才会避开jQuery对 formdata 的默认处理
			//				 * XMLHttpRequest会对 formdata 进行正确的处理
			//				 */
			//				processData: false,
			//				success: function(result) {
			//					result = $.parseJSON(result);
			//					if(result.state.toLowerCase() == "success") {
			//						debugger
			//						$("#berImg").val(result.data[0].fileurl);
			//						layer.msg("上传成功");
			//					}
			//				}
			//			})
		});
		$("#zoomIn").click(function() {
			$('.progress-bar').css('width', '0%');
			$('.progress-bar').text('0%');
			o.cropper("zoom", .1)
		});
		$("#zoomOut").click(function() {
			$('.progress-bar').css('width', '0%');
			$('.progress-bar').text('0%');
			o.cropper("zoom", -.1)
		});
		$("#rotateLeft").click(function() {
			$('.progress-bar').css('width', '0%');
			$('.progress-bar').text('0%');
			o.cropper("rotate", 45)
		});
		$("#rotateRight").click(function() {
			$('.progress-bar').css('width', '0%');
			$('.progress-bar').text('0%');
			o.cropper("rotate", -45)
		});
	} else {
		r.addClass("hide");
	}
}

/**
 * 图片的上传 
 * fjson 上传图片 的数据
 * self 调用者的this
 */

function upLoadFile(fjson, self) {
	//	var xhrOnProgress = function(fun) {
	//		xhrOnProgress.onprogress = fun; //绑定监听 
	//		//使用闭包实现监听绑
	//		return function() {
	//
	//			//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
	//			var xhr = $.ajaxSettings.xhr();
	//
	//			//判断监听函数是否为函数
	//			if(typeof xhrOnProgress.onprogress !== 'function')
	//				return xhr;
	//
	//			//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 
	//			if(xhrOnProgress.onprogress && xhr.upload) {
	//				xhr.upload.onprogress = xhrOnProgress.onprogress;
	//			}
	//			return xhr;
	//		}
	//	};
	var formData = new FormData();
	formData.append("uploadtype", 'proManagement');
	formData.append("filesjson", fjson);
	$.ajax({
		type: "post",
		url: huayi.config.callcenter_url + "fileserverapi/Api/Upload",
		data: formData, //这里上传的数据使用了formData 对象
		processData: false,
		contentType: false, //必须false才会自动加上正确的Content-Type 
		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;
		},
		//		xhr: xhrOnProgress(function(e) {
		//			$('.progress-bar').css('width', '0%');
		//			$('.progress-bar').text('0%');
		//			var percent = Math.floor(e.loaded / e.total); //计算百分比
		//			$('.progress-bar').css('width', percent * 100 + '%');
		//			$('.progress-bar').text(percent * 100 + '%');
		//		}),
		async: true,
		beforeSend: function() { //触发ajax请求开始时执行
			self.attr("disabled", true);
			self.text('图片上传中...');
			$('.anniu').find('.btnn').css('backgroundColor', '#778592');
		},
		//		data: {
		//			uploadtype: 'proManagement',
		//			filesjson: fjson,
		//		},
		success: function(result) {
			result = $.parseJSON(result);
			self.attr("disabled", false);
			self.text('上传图片');
			$('.anniu').find('.btnn').css('backgroundColor', '#2f4050');
			/*验证请求*/
			if(result.state.toLowerCase() == "success") {
				imglist = result.data;
				layer.msg("图片上传成功");
			} else {
				layer.msg(result.message);
			}
		},
		error: function(textStatus) {
			$('.progress-bar').css('width', '0%');
			$('.progress-bar').text('0%');
			layer.confirm('网络繁忙，请稍后再试...', {
				btn: ['确定'] //按钮
			});
			self.text('上传图片');
			self.attr("disabled", false);
			$('.anniu').find('.btnn').css('backgroundColor', '#2f4050');
		},
		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: ['确定'] //按钮
				});　　　　
			}
			self.text('上传图片');
			self.attr("disabled", false);
			$('.anniu').find('.btnn').css('backgroundColor', '#2f4050');
		},

	});

}

//上传项目图纸
function uploaderImages() {
	if(uploader) {
		uploader.destroy();
	}
	uploader = WebUploader.create({
		auto: true, // 选完文件后，是否自动上传 
		swf: '../plugins/webuploader/Uploader.swf', // swf文件路径 
		server: huayi.config.callcenter_url + "fileserverapi/Api/Upload", // 文件接收服务端 
		pick: '#imgPicker', // 选择文件的按钮。可选 
		formData: {
			uploadtype: 'proDrawings'
		},
		// 只允许选择图片文件。 
		accept: {
			//			title: 'Images',
			//			extensions: 'gif,jpg,jpeg,bmp,png',
			//			mimeTypes: 'image/*'
		},
		compress: false, //webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图片  
		//fileVal: "upFile",//设置文件上传域的name。  
		threads: limitNum, //上传并发数。允许同时最大上传进程数,为了保证文件上传顺序  
		fileNumLimit: limitNum,
		fileSizeLimit: 30 * 1024 * 1024, // 30 M
		fileSingleSizeLimit: 5 * 1024 * 1024 // 5 M
	});

	uploader.on('fileQueued', function(file) {
		var $list = $("#fileList"),
			$li = $(
				'<li id="' + file.id + '"><span class="img_mask"><i class="img_del"></i></span>' +
				'<img/>' +
				'<span class="img_state"><i></i></span>' +
				'<span class="file_name">' + file.name + '</span>' +
				'</li>'
			),
			$img = $li.find('img');

		// $list为容器jQuery实例 
		$list.append($li);

		// 创建缩略图 
		uploader.makeThumb(file, function(error, src) {
			if(error) {
				$img.replaceWith('<div class="noThumb"><i class="glyphicon glyphicon-paperclip"></i><p>无法预览</p></div>');
				return;
			}
			$img.attr('src', src);
		}, 109, 109); //109*109为缩略图尺寸 

		//绑定删除
		$('#' + file.id).on('click', '.img_del', function() {
			uploader.removeFile(file);
			var $fileLi = $('#' + file.id);
			$fileLi.off().find('.img_del').off().end().remove();
			var itemFileName = $(this).parent().parent().find('.file_name').text();
			$.each(proimglist, function(i, v) {
				if(v && v.filename == itemFileName) {
					proimglist.splice(i, 1);
					helper.methods.delImgs(v.filesmallurl, v.fileurl);
				}
			});
			$('#fileNum').text(proimglist.length);
		});

	});

	// 文件上传过程中创建进度条实时显示。 
	uploader.on('uploadProgress', function(file, percentage) {
		var $li = $('#' + file.id),
			$percent = $li.find('.progress span');

		// 避免重复创建 
		if(!$percent.length) {
			$percent = $('<div class="progress" style="">' +
					'<span class="text">0%</span>' +
					'<span class="percentage"></span>' +
					'</div>')
				.appendTo($li)
				.find('span');
		}

		$percent.eq(0).text(Math.round(percentage * 100) + '%');
		$percent.eq(1).css('width', Math.round(percentage * 100) + '%');
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。 
	uploader.on('uploadSuccess', function(file, res) {
		proimglist.push(res.data[0]);
		$('#fileNum').text(proimglist.length);
		$('#' + file.id).addClass('upload-state-done');
	});

	// 文件上传失败，显示上传出错。 
	uploader.on('uploadError', function(file) {
		var $li = $('#' + file.id),
			$error = $li.find('div.error');

		// 避免重复创建 
		if(!$error.length) {
			$error = $('<div class="error"></div>').appendTo($li);
		}

		$error.text('上传失败');
	});

	// 完成上传完了，成功或者失败，先删除进度条。 
	uploader.on('uploadComplete', function(file) {
		$('#' + file.id).find('.progress').remove();
	});

	uploader.onError = function(code) {
		//console.log('Error：' + code);
		switch(code) {
			case "Q_EXCEED_NUM_LIMIT":
				layer.msg('只能上传六个文件。');
				break;
			case "Q_TYPE_DENIED":
				layer.msg('图片类型不正确。');
				break;
			case "F_DUPLICATE":
				layer.msg('该文件已上传，请选择其它文件。');
				break;
			case "F_EXCEED_SIZE":
				layer.msg('单文件大小不能超过5M。');
				break;
			case "Q_EXCEED_SIZE_LIMIT":
				layer.msg('总文件大小不能超过30M。');
				break;
			default:
				break;
		}

	};
}