@layout("/common/_container.html"){
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal">
|
<input type="hidden" id="id" value="${item.id!}"/>
|
<div class="row">
|
@if(objectType == 1){
|
<div class="tabs-container">
|
<ul class="nav nav-tabs">
|
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">添加人员说明文案</a></li>
|
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">选择人员说明文案</a></li>
|
</ul>
|
<div class="tab-content">
|
<div id="tab-1" class="tab-pane active">
|
<div class="panel-body">
|
<textarea id="editor_1" type="text/plain" style="width:1200px;height:400px;"></textarea>
|
<!--<div class="row btn-group-m-t">
|
<div class="col-sm-10 col-sm-offset-5">
|
<#button btnCss="info" name="保存" id="ensure" icon="fa-check" clickFun=""/>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
<div id="tab-2" class="tab-pane">
|
<div class="panel-body">
|
<textarea type="text/plain" id="editor_2" style="width:1200px;height:400px;"></textarea>
|
<!--<div class="row btn-group-m-t">
|
<div class="col-sm-10">
|
<#button btnCss="info" name="保存" id="ensure" icon="fa-check" clickFun=""/>
|
</div>
|
</div>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
<hr>
|
@}
|
<div class="form-group">
|
<label class="col-sm-1 control-label" for="operator">所属运营商：</label>
|
<div class="col-sm-9">
|
<select id="operator" class="form-control">
|
<option value="" selected>默认</option>
|
@if(isNotEmpty(operatorList)){
|
@for(item in operatorList){
|
<option value="${item.id}">${item.name}</option>
|
@}
|
@}
|
</select>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-1 control-label">门店无惠民卡介绍页</label>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-1 control-label" for="agreement">协议配置：</label>
|
<div class="col-sm-9">
|
<div class="input-group">
|
<input type="text" id="agreement" name="agreement" class="form-control" placeholder="请输入协议配置标题">
|
<span class="input-group-btn">
|
<button type="button" id="agreementAdd" name="agreementAdd" class="btn btn-primary">添加</button>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 动态添加的协议Tab -->
|
<div id="dynamic-editors-container" class="col-sm-12" style="margin-top: 20px;">
|
<div class="tabs-container" id="dynamic-tabs-container" style="display: none;">
|
<ul class="nav nav-tabs" id="agreement-tabs">
|
<!-- 动态添加的Tab将在这里显示 -->
|
</ul>
|
<div class="tab-content" id="agreement-content">
|
<!-- 动态添加的内容将在这里显示 -->
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
<div class="row btn-group-m-t">
|
<div class="col-sm-10">
|
<#button btnCss="info" name="保存" id="ensure" icon="fa-check" clickFun="submitData()"/>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<script src="${ctxPath}/modular/system/tHuiminAgreement/tHuiminAgreement_info.js"></script>
|
<script>
|
var editor_1 = null;
|
var editor_2 = null;
|
var dynamicEditors = []; // 存储动态创建的编辑器实例
|
var editorCounter = 0; // 用于生成唯一ID
|
|
$(function () {
|
//初始化编辑器
|
editor_1 = UE.getEditor('editor_1');
|
editor_2 = UE.getEditor('editor_2');
|
|
// 绑定添加按钮的点击事件
|
$("#agreementAdd").click(function() {
|
var title = $("#agreement").val().trim();
|
if(title === "") {
|
Feng.error("请输入协议配置标题");
|
return;
|
}
|
|
// 创建新的编辑器区域
|
addNewEditor(title);
|
|
// 清空输入框
|
$("#agreement").val("");
|
});
|
});
|
|
// 添加新的编辑器函数
|
function addNewEditor(title) {
|
editorCounter++;
|
var editorId = "dynamic-editor-" + editorCounter;
|
var tabId = "agreement-tab-" + editorCounter;
|
var isFirstTab = (dynamicEditors.length === 0);
|
|
// 如果是第一个编辑器，显示tabs容器
|
if(isFirstTab) {
|
$("#dynamic-tabs-container").show();
|
}
|
|
// 先将所有协议配置tab设为非激活状态
|
$("#agreement-tabs li").removeClass("active");
|
$("#agreement-content .tab-pane").removeClass("active");
|
|
// 创建新的Tab - 始终设置为激活状态
|
var tabHtml = '<li class="active" id="tab-li-' + editorCounter + '">' +
|
'<a data-toggle="tab" href="#' + tabId + '" aria-expanded="true">' + title +
|
' <i class="fa fa-times-circle delete-tab" data-editor-id="' + editorId + '" ' +
|
'data-tab-id="' + tabId + '" data-counter="' + editorCounter + '"></i></a></li>';
|
|
// 创建Tab内容 - 始终设置为激活状态
|
var contentHtml = '<div id="' + tabId + '" class="tab-pane active">' +
|
'<div class="panel-body">' +
|
'<textarea id="' + editorId + '" type="text/plain" style="width:100%;height:300px;"></textarea>' +
|
'</div></div>';
|
|
// 添加到容器中
|
$("#agreement-tabs").append(tabHtml);
|
$("#agreement-content").append(contentHtml);
|
|
// 创建一个新的编辑器实例对象
|
var editor = UE.getEditor(editorId, {
|
initialFrameHeight: 300,
|
initialFrameWidth: '100%',
|
enableAutoSave: false,
|
autoHeightEnabled: false,
|
autoFloatEnabled: false
|
});
|
|
// 确保编辑器已准备好
|
editor.ready(function() {
|
// 初始化为空内容
|
editor.setContent("");
|
|
// 存储编辑器实例和标题信息
|
dynamicEditors.push({
|
id: editorId,
|
tabId: tabId,
|
counter: editorCounter,
|
title: title,
|
editor: editor
|
});
|
|
// 绑定删除按钮事件
|
$(".delete-tab[data-editor-id='" + editorId + "']").click(function(e) {
|
e.preventDefault();
|
e.stopPropagation();
|
deleteEditor($(this).data("counter"));
|
});
|
});
|
|
// 手动激活新添加的标签页
|
$('#agreement-tabs a[href="#' + tabId + '"]').tab('show');
|
}
|
|
// 删除编辑器函数
|
function deleteEditor(counter) {
|
var index = -1;
|
var isActive = $("#tab-li-" + counter).hasClass("active");
|
var nextActive = null;
|
|
// 查找编辑器索引
|
for(var i = 0; i < dynamicEditors.length; i++) {
|
if(dynamicEditors[i].counter == counter) {
|
index = i;
|
break;
|
}
|
}
|
|
if(index === -1) return;
|
|
// 销毁编辑器实例
|
if(dynamicEditors[index].editor) {
|
dynamicEditors[index].editor.destroy();
|
}
|
|
// 如果删除的是当前活跃tab，需要激活另一个tab
|
if(isActive && dynamicEditors.length > 1) {
|
// 优先选择下一个，如果没有则选择上一个
|
if(index < dynamicEditors.length - 1) {
|
nextActive = dynamicEditors[index + 1].tabId;
|
} else {
|
nextActive = dynamicEditors[index - 1].tabId;
|
}
|
}
|
|
// 完全清理DOM元素
|
$("#tab-li-" + counter).remove();
|
$("#" + dynamicEditors[index].tabId).remove();
|
|
// 确保UEditor容器被完全移除
|
$("#" + dynamicEditors[index].id).parents(".edui-default").remove();
|
$("#" + dynamicEditors[index].id).remove();
|
|
// 从数组中移除
|
dynamicEditors.splice(index, 1);
|
|
// 如果没有编辑器了，清空并隐藏tabs容器
|
if(dynamicEditors.length === 0) {
|
$("#dynamic-tabs-container").hide();
|
// 彻底清空容器内容，确保没有残留
|
$("#agreement-tabs").empty();
|
$("#agreement-content").empty();
|
} else if(nextActive) {
|
// 激活下一个tab
|
$('a[href="#' + nextActive + '"]').tab('show');
|
}
|
}
|
|
//收集动态编辑器内容
|
collectDynamicEditors = function() {
|
var agreements = [];
|
for(var i = 0; i < dynamicEditors.length; i++) {
|
agreements.push({
|
title: dynamicEditors[i].title,
|
content: dynamicEditors[i].editor.getContent()
|
});
|
}
|
return agreements;
|
};
|
|
function submitData() {
|
//提交信息
|
var ajax = new $ax(Feng.ctxPath + "/tHuiminAgreement/save", function(data){
|
Feng.success("保存成功!");
|
},function(data){
|
Feng.error("保存失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set("addUserRemark", editor_1.getContent());
|
ajax.set("selectUserRemark", editor_2.getContent());
|
ajax.set("operatorId", $("#operator").val());
|
ajax.set("agreementSettings", JSON.stringify(collectDynamicEditors()));
|
ajax.set("id", $("#id").val());
|
ajax.start();
|
}
|
</script>
|
@}
|
