caimei365
/
caimei365-manager


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
							<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>订单资料管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var orderArchiveId = $("#id").val();
					var shopOrderId = $("#shopOrderId").val();
					if (isNaN(shopOrderId)) {
						jBox.tip("请输入正确的子订单ID", "error");
					} else {
						$.post("${ctx}/archive/cmOrderArchive/checkShopOrderId",{"id":orderArchiveId,"shopOrderId":shopOrderId},function (result) {
							if (result.code != 0) {
								var errorMsg = result.msg;
								jBox.tip(errorMsg, "error");
							} else {
								loading('正在提交，请稍等...');
								form.submit();
							}
						});
					}
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});

        /**
         * @param obj
         * jquery控制input只能输入数字
         */
        function onlynum(obj) {
            debugger
            obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
			var orderArchiveId = $("#id").val();
			var shopOrderId = $("#shopOrderId").val();
			if (shopOrderId.length >= 3) {
				$.post("${ctx}/archive/cmOrderArchive/checkShopOrderId",{"id":orderArchiveId,"shopOrderId":shopOrderId},function (result) {
					if (result.code == 0) {
						$("#clubName").val(result.clubName);
						$("#shopName").val(result.shopName);
					}
				});
			}
        }
	</script>
	<style>
		.controls .new-tag {
			display: inline-block;
			width: 78px;
			height: 30px;
			border: 1px solid #e5e5e5;
			border-radius: 5px;
			margin: 7px;
			text-align: center;
			line-height: 30px;
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
		}

		.controls .new-tag.active {
			border-color: #e15616;
			color: #e15616;
		}

		#tagInput {
			width: 263px;
			margin: 7px;
			display: inline-block;
			height: 30px;
		}

		.controls .tags-operate .tag-add {
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
		}

		.upload {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
			margin-left: 20px;
			cursor: pointer;
			width: 52px;
			height: 20px;
		}

		.upload input {
			position: absolute;
			width: 170px;
			font-size: 20px;
			right: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
		}

		.upload:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}

		.add-submit {
			position: relative;
			display: inline;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
			margin-left: 20px;
			cursor: pointer;
			width: 52px;
			height: 30px;
		}

		.add-submit input {
			position: absolute;
			width: 50px;
			font-size: 20px;
			right: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
		}

		.add-submit:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}

		.upload-loading{
			display: none;
			width: 32px;
			height: 32px;
			margin-left: 10px;
		}
		.upload-loading img{
			width: 16px;
			height: 16px;
			margin: 0 auto 0;
		}

		#file-list-display {
			width: 600px;
			height: auto;
			float: left;
			margin-left: 20px;
		}

		#file-list-display p {
			line-height: 30px;
			font-size: 14px;
			color: #333333;
			margin: 0;
		}

		#file-list-display p .del {
			color: #2fa4e7;
			font-size: 12px;
			cursor: pointer;
			margin-left: 20px;
		}

		.Main-content{
			height: 100px;
		}
	</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/archive/cmOrderArchive/">订单资料列表</a></li>
		<li class="active"><a href="${ctx}/archive/cmOrderArchive/form?id=${cmOrderArchive.id}">订单资料${not empty cmOrderArchive.id?'编辑':'添加'}</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="cmOrderArchive" action="${ctx}/archive/cmOrderArchive/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="fileIds" id="fileIds"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label">订单资料标题：</label>
			<div class="controls">
				<form:input path="title" htmlEscape="false" maxlength="30" class="input-xlarge "/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>子订单ID：</label>
			<div class="controls">
                <form:input path="shopOrderId" htmlEscape="false" maxlength="8" class="input-xlarge required" onkeyup="onlynum(this)"/>
            </div>
		</div>
		<div class="control-group">
			<label class="control-label">供应商名称：</label>
			<div class="controls">
				<form:input path="shopName" htmlEscape="false" maxlength="50" class="input-xlarge"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">机构名称：</label>
			<div class="controls">
				<form:input path="clubName" htmlEscape="false" maxlength="50" class="input-xlarge"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" style="margin-top: 14px">商品标签：</label>
			<div class="controls Main-content">
				<div class="tags-operate">
					<input type="text" class="reg-input tag-input" id="tagInput" placeholder="输入商品标签，支持添加多个"
						   maxlength="15">
					<span class="new-tag tag-add" id="tagAdd">添加</span>
				</div>
				<div class="tags-area" id="tagArea"></div>
				<span class="err-tip" style="display: inline-block;margin-left:-55px;"></span>
				<input type="hidden" name="tag" value="${cmOrderArchive.tag}" id="tag">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label"><font color="red">*</font>返佣订单：</label>
			<div class="controls">
				<form:select path="rebateFlag" class="input-small ">
                    <form:option value="0" label="否"/>
                    <form:option value="1" label="是"/>
				</form:select>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">备注：</label>
			<div class="controls">
                <form:textarea path="remark" htmlEscape="false" rows="3" maxlength="200" class="input-xlarge"/>
            </div>
		</div>
		<div class="control-group">
			<label class="control-label">资料上传：</label>
			<input id="uploadFileName" type="text" style="display: inline;margin-left:20px" placeholder="支持pdf、word、png、jpg" disabled="true" class="input-xlarge required" />
			<div class="upload">
				<input type="file" name="file" id="archiveFile" accept=".pdf,.doc,.docx,.png,.jpg">选择文件
            </div>
			<div class="add-submit">
				<input id="addSubmit" type="button" value="上传"/>上传&nbsp;
			</div>
			<div class="upload-loading">
				<img alt="gif" src="/static/images/upload.gif" width="32px" border="none">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">资料列表：</label>
			<div id='file-list-display'>
				<c:if test="${not empty archiveFileList}">
					<c:forEach items="${archiveFileList}" var="archiveFile" varStatus="statusIndex">
						<p>${archiveFile.fileName}
							<span class="del"><a onclick="previewFile('${archiveFile.ossUrl}')" target="_blank">预览</a></span>
							<span class="del" onclick="dataDelete(this,'${archiveFile.id}')">删除</span>
						</p>
					</c:forEach>
				</c:if>
			</div>
		</div>
		<div class="form-actions">
			<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
<script>
	// 初始化主营内容数据
	$(function () {

		var html = '';
		$('#tagArea').html(html);
		$('.Main-content').show();

		//主营项目
		var cMainProVal = $('#tag').val();
		if (cMainProVal != null && cMainProVal != "") {
			var _mainPros = cMainProVal.split('|');
			var proList = $('#tagArea').find('.new-tag');
			for (var j = 0; j < _mainPros.length; j++) {
				var _flag = false;
				for (var i = 0; i < proList.length; i++) {
					if ($(proList[i]).attr('data-typeName') == _mainPros[j]) {
						_flag = true;
					}
				}
				if (_flag) {
					for (var i = 0; i < proList.length; i++) {
						if ($(proList[i]).attr('data-typeName') == _mainPros[j]) {
							$(proList[i]).addClass('active');
						}
					}
				} else {
					$('#tagArea').append('<span class="new-tag up-club-tag active" data-typeName="' + _mainPros[j] + '">' + _mainPros[j] + '</span> ');
					$('.Main-content').show();
				}
			}
			$('#cMainPro').val(cMainProVal);
		}
		//机构品项选择
		var optsClub = {
			$tag: $('.up-club-tag'),
			$tagArea: $('#tagArea'),
			$mainPro: $('#tag'),
			$other: $('#tagOther'),
			$input: $('#tagInput'),
			$add: $('#tagAdd'),
			$type: 'club'
		};
		getTags(optsClub);

		//点击上传按钮后上传文件
		$('#addSubmit').click(function () {
			var filesById = document.getElementById('archiveFile');
			var files = $('#archiveFile');
			var fileList = files.prop('files');
			var fileName = $('#uploadFileName').val();
			if (files === '' || files.length == 0 || fileName == '') {
				alertx('请选择上传文件');
				return;
			}
			$("#uploadFileName").val("");
			var data = new FormData();
			var orderArchiveId = $("#id").val();
			var fileIds = $("#fileIds").val();
			data.append('file', fileList[0]);
			data.append('fileName', fileName);
			data.append('orderArchiveId', orderArchiveId);
			data.append('fileIds', fileIds);
			$('.upload-loading').css("display", "inline");
			$.ajax({
				url: "${ctx}/archive/cmOrderArchive/upload",
				data: data,
				type: "POST",
				processData: false,
				contentType: false,
				dataType: "json",
				success: function (res) {
					if (res.success) {
						filesById.value = '';
						renderFileList(res.archiveFile);
						$('.upload-loading').hide();
					} else {
						$.jBox.tip(res.msg, 'error');
						$("#uploadFileName").val(fileName);
						$('.upload-loading').hide();
					}

				},
				error: function (json) {

				}
			});
		})

		var fileList = [];
		var fileIds = '';
		var files = document.getElementById("archiveFile"), renderFileList;
		//选择上传文件后显示文件名称
		files.addEventListener("change", function (event) {
			var name = event.target.files[0].name;
			console.log(name)
			$('#uploadFileName').val(name);
		});
		var fileListDisplay = document.getElementById('file-list-display');
		renderFileList = function (data) {
			fileIds += data.id + ',';
			console.log(fileIds);
			$('#fileIds').val(fileIds);
			fileList.push({fileName: data.fileName, id: data.id, ossUrl: data.ossUrl});
			fileList.forEach(function (file, index) {
				var fileDisplayEl = document.createElement("p");
				var deleteFile = document.createElement("span");
				var viewFile = document.createElement("span");
				var viewFileUrl = document.createElement("a");
				//预览链接
				viewFileUrl.innerHTML = '预览';
				viewFileUrl.setAttribute("onclick", "previewFile('" + file.ossUrl + "')");
				viewFileUrl.setAttribute("target", "_blank");
				//预览按钮
				viewFile.className = 'viewFile';
				console.log(viewFile);
				viewFile.setAttribute("class","del");
				viewFile.appendChild(viewFileUrl);
				//删除按钮
				deleteFile.innerHTML = '删除';
				deleteFile.className = 'deleteFile';
				console.log(deleteFile);
				deleteFile.setAttribute("class","del");
				deleteFile.setAttribute("onclick", "dataDelete(this, " + file.id + ")");

				fileDisplayEl.setAttribute("id", file.id);
				fileDisplayEl.innerHTML = file.fileName;
				fileDisplayEl.appendChild(viewFile);
				fileDisplayEl.appendChild(deleteFile);
				fileListDisplay.appendChild(fileDisplayEl);
			});
			fileList.splice(0, fileList.length);
		};
	});


	//选择tags(主营和服务类型通用)
	function getTags(opts) {
		opts.$tagArea.on('click', '.new-tag', function () {
			var $this = $(this);
			$this.toggleClass('active');
			setTags(opts);
		});
		opts.$other.on('click', function () {
			opts.$input.css('display', 'inline-block');
			opts.$add.css('display', 'inline-block');
		});
		opts.$add.on('click', function () {
			var _tag = $.trim(opts.$input.val());
			if (_tag) {
				var flag = false;
				opts.$tagArea.find('.new-tag').each(function (i, v) {
					var _name = $(v).attr('data-typeName');
					if (_tag == _name) {
						flag = true;
						return false;
					} else {
						if (i == opts.$tagArea.find('.new-tag').length) {
							flag = false;
						}
					}

				})
				if (flag) {
					opts.$tagArea.find('.new-tag').each(function (i, v) {
						var _name = $(v).attr('data-typeName');
						if (_tag == _name) {
							$(v).addClass('active');
							alertx('该类型已存在', opts.$add);
							flag = true;
							return false;
						}

					})
				} else {
					opts.$tagArea.append('<span class="new-tag up-' + opts.$type + '-tag active" data-typeName="' + _tag + '">' + _tag + '</span> ');
					setTags(opts);
					opts.$input.val('');
					return;
				}
			}
		})
	}

	//设置tags(主营和服务类型通用)
	function setTags(opts) {
		var tagArr = [];
		opts.$mainPro.val('')
		opts.$tagArea.find('.new-tag.active').each(function (i, v) {
			var _typeName = $(v).attr('data-typeName');
			tagArr.push(_typeName);
			opts.$mainPro.val(tagArr.join(' | '));
		})
	}

	//删除文件
	function dataDelete(that, id) {
		console.log($(that).text());
		$(that).parent().remove();
		/*var fileIds = $("#fileIds").val();
		if (fileIds.indexOf(id)) {
			fileIds.replace(id + ",", "");
		}*/
		$.ajax({
			url: "${ctx}/archive/cmOrderArchive/deleteFile",
			data: {"fileId": id},
			async: false,
			type: "POST"
		});
	}


	function previewFile(url) {
		var index = url.lastIndexOf(".");
		var suffix = url.substring(index);
		if (suffix.startsWith(".png") || suffix.startsWith(".jpg") || suffix.startsWith(".pdf")) {
			window.open(url, '_blank');
		} else {
			var previewUrl = "https://view.officeapps.live.com/op/view.aspx?src="+encodeURIComponent(url);
			window.open(previewUrl, '_blank');
		}
	}
</script>
</body>
</html>