<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('新增产品包列表')"/>
|
<th:block th:include="include :: summernote-css"/>
|
<th:block th:include="include :: select2-css"/>
|
<th:block th:include="include :: bootstrap-select-css"/>
|
</head>
|
|
<body class="white-bg">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<form class="form-horizontal m" id="form-product-add">
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.product.productPackageName}]]：</label>
|
<div class="col-sm-8">
|
<input name="name" class="form-control" type="text" required>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.product.questionnaireType}]]：</label>
|
<div class="col-sm-8">
|
<input class="form-control" name="subjectId" id="subjectId" value="" type="hidden">
|
<input class="form-control" name="subjectName" id="subjectName" value="" readonly="true">
|
</div>
|
</div>
|
|
<div class="form-group input-focus" th:align="center">
|
<label th:align="center" style="color: #b6151a;">( [[#{jsp.exam.product.precautions}]] )</label>
|
</div>
|
<div class="form-group input-focus">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.product.productPackageInstructions}]]：</label>
|
<div class="col-sm-8">
|
<textarea name="guide" class="form-control" rows="5" cols="60"></textarea>
|
</div>
|
</div>
|
|
<div id="headline">
|
</div>
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label"></label>
|
<div class="col-sm-8">
|
<button type="button" class="btn btn-w-m btn-success" id="addHeadline">[[#{jsp.exam.product.addSegment}]]</button>
|
<div id="addHeadline-erro" style="color: red" hidden="true">*[[#{jsp.exam.product.pleaseSetATitle}]]</div>
|
</div>
|
</div>
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.product.suggestedDuration}]]（minute）：</label>
|
<div class="col-sm-8">
|
<input name="suggestTime" class="form-control" type="text" required>
|
</div>
|
</div>
|
|
<div hidden="true">
|
<input name="questions" class="form-control" type="text">
|
</div>
|
|
</form>
|
|
<div class="ibox-content" id="questionSelect" hidden="true">
|
<div name="question-seq">[[#{jsp.exam.product.titleTemplate}]]</div>
|
<p>[[#{jsp.exam.level.titleTemplate}]]：</p>
|
<ul class="list-inline">
|
</ul>
|
<input type="text" hidden="true" name="contentId">
|
<input type="text" hidden="true" name="questionId">
|
</div>
|
|
<div class="form-group" id="hiddenTitle" hidden="true">
|
<div class="form-group input-focus">
|
<label class="col-sm-3 control-label segment-guide-seq">[[#{jsp.exam.product.paragraph1}]]</label>
|
<div class="col-sm-9">
|
<textarea name="title-guide" class="form-control" rows="5" cols="60"
|
style="margin-top: 2%;"></textarea>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label headline-index headline-index-seq">[[#{jsp.exam.product.paragraph1Heading}]] - </label>
|
<div class="col-sm-9 form-inline">
|
<input name="segmentationName" class="form-control" type="text" style="width: 70%; margin-right: 2%;">
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label segment-discription-seq">[[#{jsp.exam.product.paragraph_1}]] - </label>
|
<div class="col-sm-9 form-inline input-focus">
|
<textarea name="description" class="form-control" rows="5" cols="60"
|
style="margin-top: 2%;"></textarea>
|
<button type="button" class="btn btn-info btn-rounded add-question">[[#{jsp.exam.product.topicSetting}]]</button>
|
<button type="button" class="btn btn-info btn-rounded remove-title">[[#{jsp.exam.product.deleteSegment}]]</button>
|
</div>
|
</div>
|
<div class="form-group segmentation-group">
|
<div>
|
<label class="col-sm-3 control-label"></label>
|
<div class="col-sm-8">
|
<!--question content-->
|
<div class="ibox float-e-margins">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--模态窗口-->
|
<div class="modal inmodal" id="modalWindow" tabindex="-1" role="dialog" aria-hidden="true">
|
<div class="modal-dialog modal-lg">
|
<div class="modal-content">
|
<div class="modal-title">
|
<h5>[[#{jsp.exam.product.pleaseEnterALanguage}]]</h5>
|
</div>
|
<div class="modal-body" id="eg">
|
<div class="click2edit wrapper">
|
<p>[[#{jsp.exam.product.pleaseEnterQuestions}]]...</p>
|
</div>
|
</div>
|
<div class="modal-footer">
|
<button id="save" class="btn btn-primary btn-xs" onclick="save()" type="button">[[#{basis.save}]]</button>
|
<button id="edit" class="btn btn-danger btn-xs m-l-sm" onclick="cancel()" type="button">[[#{jsp.cancel.btn}]]</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-sm-offset-5 col-sm-10">
|
<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
|
</button>
|
<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
|
</button>
|
</div>
|
</div>
|
|
<th:block th:include="include :: footer"/>
|
<th:block th:include="include :: summernote-js"/>
|
<th:block th:include="include :: select2-js"/>
|
<th:block th:include="include :: bootstrap-select-js"/>
|
<script type="text/javascript">
|
var prefix = ctx + "exam/product";
|
var num = 1;
|
var $parent = $.operate.parentHtml();
|
$('#subjectId').val($parent.$('#subjectId').val());
|
$('#subjectName').val($parent.$('#subjectId option:selected').text());
|
|
$("#form-product-add").validate({
|
focusCleanup: true
|
});
|
|
function submitHandler() {
|
var questionsJson = new Array();
|
var $name = $('#headline').find('.headline-index');
|
$($name).each(function (i) {
|
var question = new Object();
|
var $headlind = $(this).parent().parent();
|
question.guide = $headlind.find('[name="title-guide"]').eq(0).val();
|
question.name = $headlind.find('[name="segmentationName"]').eq(0).val();
|
question.description = $headlind.find('[name="description"]').eq(0).val();
|
question.questionItems = new Array();
|
$($headlind.find('[name="questionId"]')).each(function (i) {
|
var item = new Object();
|
item.id = $(this).val();
|
item.itemOrder = i+1;
|
question.questionItems.push(item);
|
}
|
);
|
questionsJson.push(question);
|
});
|
$('[name="questions"]').val(JSON.stringify(questionsJson));
|
|
if ($.validate.form()) {
|
if ($('.float-e-margins').html().trim() === "") {
|
$("#addHeadline-erro").removeAttrs('hidden');
|
return;
|
}
|
|
$.operate.saveTab(prefix + "/add", $('#form-product-add').serialize());
|
}
|
};
|
|
var edit = function (htmlValue) {
|
$("#eg").addClass("no-padding");
|
$('.click2edit').summernote({
|
lang: 'zh-CN',
|
focus: true,
|
height: 120,//结合高度和disableResizeEditor的使用可以固定窗口
|
//disableResizeEditor: true
|
callbacks: {
|
onImageUpload: function (files) {
|
sendFile(files[0], this);
|
}
|
}
|
});
|
//给富文本编辑器赋值
|
$('.click2edit').summernote('code', htmlValue);
|
};
|
|
function sendFile(file, obj) {
|
var data = new FormData();
|
data.append("file", file);
|
$.ajax({
|
type: "POST",
|
url: ctx + "common/images",
|
data: data,
|
cache: false,
|
contentType: false,
|
processData: false,
|
dataType: 'json',
|
success: function(result) {
|
if (result.code == web_status.SUCCESS) {
|
$(obj).summernote('editor.insertImage', result.url, result.fileName);
|
} else {
|
$.modal.alertError(result.msg);
|
}
|
},
|
error: function(error) {
|
$.modal.alertWarning("图片上传失败。");
|
}
|
});
|
};
|
|
var save = function () {
|
$("#eg").removeClass("no-padding");
|
var aHTML = $('.click2edit').summernote('code');
|
$('#modalWindow').modal('hide');
|
var $focusInput = $('.input-focus').find('[edit="true"]');
|
$focusInput.val($.trim(aHTML));
|
$focusInput.removeAttrs("edit");
|
$('.click2edit').summernote('destroy');
|
};
|
|
var cancel = function () {
|
$('.input-focus').find('[edit="true"]').removeAttrs("edit");
|
$('#modalWindow').modal('hide');
|
};
|
|
$(function () {
|
$('#addHeadline').click(function () {
|
$("#addHeadline-erro").attr('hidden', 'true');
|
var $hiddenTitle = $('#hiddenTitle').clone();
|
$hiddenTitle.removeAttrs('hidden');
|
$hiddenTitle.removeAttrs('id');
|
$hiddenTitle.find('input').attr('required', 'true');
|
$hiddenTitle.find('textarea').attr('required', 'true');
|
$hiddenTitle.find('label').eq(0).text([[#{jsp.exam.product.the}]] + num + [[#{jsp.exam.product.paragraphInstruction}]]+" -");
|
$hiddenTitle.find('label').eq(1).text([[#{jsp.exam.product.the}]] + num + [[#{jsp.exam.product.sectionHeader}]] +" -");
|
$hiddenTitle.find('label').eq(2).text([[#{jsp.exam.product.the}]] + num + [[#{jsp.exam.product.paragraphTitleDescription}]]+" -");
|
$('#headline').append($hiddenTitle);
|
num++;
|
});
|
|
//add-question
|
$('#headline').on("click", ".add-question", function () {
|
$('#addHeadline-erro').attr('hidden', 'true');
|
var $thisContent = $(this).parent().parent().parent().find(".float-e-margins");
|
$thisContent.attr('add-question-edit', 'true');//add_question.html remove after save
|
$.modal.openTab([[#{jsp.exam.product.pleaseSelectATopic}]], prefix + "/addQuestion/" + $('#subjectId').val());
|
$('.segmentation-group').removeAttrs("hidden");
|
});
|
|
//delet title
|
$('#headline').on('click', '.remove-title', function () {
|
$(this).parent().parent().parent().remove();
|
$('.segment-guide-seq').each(function(i){
|
$(this).text([[#{jsp.exam.product.the}]]+(i + 1) + [[#{jsp.exam.product.paragraphInstruction}]]+" -");
|
});
|
|
$('.headline-index-seq').each(function (i) {
|
$(this).text([[#{jsp.exam.product.the}]] + (i+1) + [[#{jsp.exam.product.sectionHeader}]]+" -");
|
});
|
|
$('.segment-discription-seq').each(function (i) {
|
$(this).text([[#{jsp.exam.product.the}]] + (i+1) + [[#{jsp.exam.product.paragraphTitleDescription}]]+" -");
|
num = i+1
|
});
|
|
$('[name="question-seq"]').each(function (i) {
|
$(this).html((i + 1) + ')');
|
});
|
});
|
|
//open summernote
|
$('#form-product-add').on('focus', '[name="guide"],[name="title-guide"],[name="description"]', function () {
|
$(this).attr('edit', 'true');
|
edit($(this).val());
|
$('#modalWindow').modal('show');
|
});
|
|
$('#modalWindow').on('shown.bs.modal', function () {
|
var $this = $(this);
|
var dialog = $this.find('.modal-dialog');
|
|
// 用这种方式保持富文本编辑器的窗口向下滚动
|
var scrollTop = $(document).scrollTop();
|
dialog.css({
|
marginTop: scrollTop - 15
|
});
|
});
|
});
|
</script>
|
</body>
|
</html>
|
