RuoYi/zt-admin/src/main/resources/templates/advert/info/edit.html

158 lines
8.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('修改活动信息')" />
<th:block th:include="include :: ztree-css" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-role-edit" th:object="${advert}">
<input id="id" name="id" type="hidden" th:field="*{id}" />
<input id="bannerPicUrl" name="bannerPicUrl" type="hidden" th:field="*{bannerPicUrl}"/>
<input id="bannerBaNames" name="bannerBaNames" type="hidden" th:field="*{bannerBaNames}"/>
<div class="form-group">
<label class="col-sm-3 control-label is-required">广告标题:</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="bannerTitle" id="bannerTitle" th:field="*{bannerTitle}" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">广告位类型:</label>
<div class="col-sm-8">
<select name="bannerType" class="form-control m-b" th:with="type=${@dict.getType('sys_banner_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{bannerType}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">广告位图片推荐宽高比240:176</label>
<div class="col-sm-8">
<div class="file-loading">
<input id="singleFile" name="file" type="file">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">广告跳转地址:</label>
<div class="col-sm-8">
<textarea name="address" maxlength="500" class="form-control" rows="3">[[*{address}]]</textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">备注:</label>
<div class="col-sm-8">
<input id="remark" name="remark" class="form-control" type="text" th:field="*{remark}">
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:src="@{/ajax/libs/beautifyhtml/beautifyhtml.js}"></script>
<script type="text/javascript">
$(document).ready(function(){setup_draggable();$("#n-columns").on("change",function(){var v=$(this).val();if(v==="1"){var $col=$(".form-body .col-md-12").toggle(true);$(".form-body .col-md-6 .draggable").each(function(i,el){$(this).remove().appendTo($col)});$(".form-body .col-md-6").toggle(false)}else{var $col=$(".form-body .col-md-6").toggle(true);$(".form-body .col-md-12 .draggable").each(function(i,el){$(this).remove().appendTo(i%2?$col[1]:$col[0])});$(".form-body .col-md-12").toggle(false)}});$("#copy-to-clipboard").on("click",function(){var $copy=$(".form-body").clone().appendTo(document.body);$copy.find(".tools, :hidden").remove();$.each(["draggable","droppable","sortable","dropped","ui-sortable","ui-draggable","ui-droppable","form-body"],function(i,c){$copy.find("."+c).removeClass(c).removeAttr("style")});var html=html_beautify($copy.html());$copy.remove();$modal=get_modal(html).modal("show");$modal.find(".btn").remove();$modal.find(".modal-title").html("复制HTML代码");$modal.find(":input:first").select().focus();return false})});var setup_draggable=function(){$(".draggable").draggable({appendTo:"body",helper:"clone"});$(".droppable").droppable({accept:".draggable",helper:"clone",hoverClass:"droppable-active",drop:function(event,ui){$(".empty-form").remove();var $orig=$(ui.draggable);if(!$(ui.draggable).hasClass("dropped")){var $el=$orig.clone().addClass("dropped").css({"position":"static","left":null,"right":null}).appendTo(this);if($el.find("label").hasClass("radio-box")){$el=$el.html('<label class="col-sm-3 control-label">单选框:</label>'+'<div class="col-sm-9">'+'<label class="radio-box"><input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">选项1</label>'+'<label class="radio-box"><input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>'+"</div>")}else{if($el.find("label").hasClass("check-box")){$el=$el.html('<label class="col-sm-3 control-label">复选框:</label>'+'<div class="col-sm-9">'+'<label class="check-box">'+'<input type="checkbox" value="option1" id="inlineCheckbox1">选项1</label>'+'<label class="check-box">'+'<input type="checkbox" value="option2" id="inlineCheckbox2">选项2</label>'+'<label class="check-box">'+'<input type="checkbox" value="option3" id="inlineCheckbox3">选项3</label>'+"</div>")}}var id=$orig.find(":input").attr("id");if(id){id=id.split("-").slice(0,-1).join("-")+"-"+(parseInt(id.split("-").slice(-1)[0])+1);$orig.find(":input").attr("id",id);$orig.find("label").attr("for",id)}$('<p class="tools col-sm-12 col-sm-offset-3"> <a class="edit-link">编辑HTML<a> | <a class="remove-link">移除</a></p>').appendTo($el)}else{if($(this)[0]!=$orig.parent()[0]){var $el=$orig.clone().css({"position":"static","left":null,"right":null}).appendTo(this);$orig.remove()}}}}).sortable()};var get_modal=function(content){var modal=$('<div class="modal" style="overflow: auto;" tabindex="-1"> <div class="modal-dialog"><div class="modal-content"><div class="modal-header"><a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h4 class="modal-title">编辑HTML</h4></div><div class="modal-body ui-front"> <textarea class="form-control textarea-show-src" style="min-height: 200px; margin-bottom: 10px;font-family: Monaco, Fixed"></textarea><button class="btn btn-success">更新HTML</button></div></div></div></div>').appendTo(document.body);var doms=document.getElementsByClassName("textarea-show-src");for(var i=0;i<doms.length;i++){doms.item(i).innerHTML=content}return modal};$(document).on("click",".edit-link",function(ev){var $el=$(this).parent().parent();var $el_copy=$el.clone();var $edit_btn=$el_copy.find(".edit-link").parent().remove();var $modal=get_modal(html_beautify($el_copy.html())).modal("show");$modal.find(":input:first").focus();$modal.find(".btn-success").click(function(ev2){var html=$modal.find("textarea").val();if(!html){$el.remove()}else{$el.html(html);$edit_btn.appendTo($el)}$modal.modal("hide");return false})});$(document).on("click",".remove-link",function(ev){$(this).parent().parent().remove()});$(".input-group.date").datetimepicker({format:"yyyy-mm-dd",minView:"month",autoclose:true});
</script>
<script type="text/javascript">
function edit() {
var id = $("input[name='id']").val();
var bannerPicUrl = $("input[name='bannerPicUrl']").val();
var bannerTitle = $("input[name='bannerTitle']").val();
var bannerType = $("select[name='bannerType']").val();
var remark = $("input[name='remark']").val();
var address =$("textarea[name='address']").val();
$.ajax({
cache : true,
type : "POST",
url : ctx + "advert/info/edit",
data : {
"id": id,
"bannerPicUrl": bannerPicUrl,
"bannerTitle": bannerTitle,
"address": address,
"bannerType": bannerType,
"remark": remark
},
async : false,
error : function(request) {
$.modal.alertError("系统错误");
},
success : function(data) {
$.operate.successCallback(data);
}
});
}
function submitHandler() {
edit();
}
$(document).ready(function () {
//调用上面的初始化方法
var a = $("input[name='bannerBaNames']").val();
var b= [];
if (a.endsWith('null')){
b= []
}else{
b= [a]
}
console.log('a', a);
// 单图上传
$("#singleFile").fileinput({
uploadUrl: ctx + 'common/uploadsBanner',
maxFileCount: 1,
initialPreviewAsData: true,
initialPreview: b,
layoutTemplates: {
footer: '',//隐藏全部小图标
},
showRemove: true, //不显示底部清空按钮
autoReplace: true
}).on('fileuploaded', function (event, data, previewId, index) {
var rsp = data.response;
$("#bannerPicUrl").val(rsp.newFileName);
log.info("return bannerPicUrl url" + rsp.url)
log.info("reutrn bannerPicUrl fileName" + rsp.fileName)
log.info("reutrn bannerPicUrl newFileName" + rsp.newFileName)
log.info("return bannerPicUrl originalFilename" + rsp.originalFilename)
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('');
<!-- $("#bannerPicUrl").val('');-->
}).on('filebeforedelete', function (event, key) {
$.modal.msgSuccess("移除成功-2");
})
});
</script>
</body>
</html>