|
|
@@ -0,0 +1,469 @@
|
|
|
+<%@ 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){
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </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;
|
|
|
+ }
|
|
|
+ </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="35" class="input-xlarge "/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label"><font color="red">*</font>子订单ID：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="shopOrderId" class="input-xlarge required" >
|
|
|
+ <form:option value="" label="请选择"/>
|
|
|
+ <form:options items="${shopOrderIdList}" htmlEscape="false"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label"><font color="red">*</font>供应商名称：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:input path="shopName" htmlEscape="false" maxlength="55" class="input-xlarge required"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label"><font color="red">*</font>机构名称：</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:input path="clubName" htmlEscape="false" maxlength="55" class="input-xlarge required"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">商品标签：</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、img、jpg" disabled="true" class="input-xlarge required" />
|
|
|
+ <div class="upload">
|
|
|
+ <input type="file" name="file" id="archiveFile" accept=".pdf,.doc,.img,.jpg">选择文件
|
|
|
+ </div>
|
|
|
+ <div class="add-submit">
|
|
|
+ <input id="addSubmit" type="button" value="上传"/>上传
|
|
|
+ </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 href="${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="保 存"/>
|
|
|
+ <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 () {
|
|
|
+ debugger
|
|
|
+ var files = $('#archiveFile').prop('files');
|
|
|
+ var fileName = $('#uploadFileName').val();
|
|
|
+ if (files === '' || files.length == 0 || fileName == '') {
|
|
|
+ alertx('请选择上传文件');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var data = new FormData();
|
|
|
+ var orderArchiveId = $("#id").val();
|
|
|
+ var fileIds = $("#fileIds").val();
|
|
|
+ data.append('file', files[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) {
|
|
|
+ files.value = '';
|
|
|
+ renderFileList(res.archiveFile);
|
|
|
+ $("#uploadFileName").val("");
|
|
|
+ $('.upload-loading').hide();
|
|
|
+ } else {
|
|
|
+ $.jBox.tip(res.msg, 'error');
|
|
|
+ $('.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) {
|
|
|
+ debugger
|
|
|
+ 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("href", 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"
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
Aslee