<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('新增产品包-job')"/>
|
<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 body-div">
|
<form class="form-horizontal m" id="form-product-add">
|
<input name="multilingual" id="multilingual" type="hidden" value="">
|
<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="levelId" id="levelId" th:value="${tExamLevel.id}" type="hidden">
|
<input class="form-control" name="levelName" id="levelName" th:value="${tExamLevel.levelName}"
|
readonly="true">
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.demographyParam.languagetype}]]：</label>
|
<div class="col-sm-8">
|
<select name="langType" id="langType" class="form-control m-b"
|
th:with="type=${@dict.getType('lang_type')}">
|
<option value="ALL">ALL</option>
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
th:value="${dict.dictValue}"></option>
|
</select>
|
</div>
|
</div>
|
<div class="form-group input-focus" th:align="center">
|
<label th:align="center" style="color: #b6151a;">( 注意：产品包指导语,内容不要直接从word复制，请务必从txt文件中复制内容 )</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 class="form-group">
|
<label class="col-sm-3 control-label">[[#{jsp.exam.productReportTemplate}]]：</label>
|
<div class="col-sm-8">
|
<select id="reportTemplateId" name="reportTemplateId" class="form-control noselect2 selectpicker" multiple>
|
<option th:each="dict : ${templateList}" th:text="${dict['reportType']}"
|
th:value="${dict['id']}" ></option>
|
</select>
|
</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 btn-rounded" id="addHeadline">
|
[[#{jsp.exam.product.addTopic}]]
|
</button>
|
<button type="button" class="btn btn-info btn-rounded add-question">
|
[[#{jsp.exam.product.titleDimensionSetting}]]
|
</button>
|
<button type="button" class="btn btn-w-m btn-warning" id="importQuestionsInBatches">
|
[[#{jsp.exam.product.importQuestionsInBatches}]]
|
</button>
|
</div>
|
</div>
|
|
|
<div id="addHeadline-must" style="color: red" hidden="true">*[[#{jsp.exam.product.pleaseSetATitleDimension}]]</div>
|
|
<div hidden="true">
|
<input name="questions" class="form-control" type="text">
|
</div>
|
</form>
|
|
<div class="ibox-content clone" 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 clone segmentation" id="hiddenTitle" hidden="true">
|
<div class="form-group">
|
<label class="col-sm-3 control-label headline-index headline-index-seq">question 1 - </label>
|
<div class="col-sm-9 form-inline">
|
<input name="segmentationName" class="form-control must-focus" type="text"
|
style="width: 70%; margin-right: 2%;" readonly>
|
<div class="segment-must" style="color: red" hidden="true">*[[#{basis.required}]]</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label permanent-seq">[[#{jsp.exam.product.permanentNumber}]]：</label>
|
<div class="col-sm-9 form-inline">
|
<input name="permanentId" class="form-control must-focus" type="text"
|
style="width: 70%; margin-right: 2%;" readonly>
|
<div class="segment-must" style="color: red" hidden="true">*[[#{basis.required}]]</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label segment-discription-seq">题目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.titleDimensionSetting}]]-->
|
<!--</button>-->
|
<!--<button type="button" class="btn btn-info btn-rounded remove-title">-->
|
<!--[[#{jsp.exam.product.deletQeution}]]-->
|
<!--</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>
|
<input type="hidden" name="questionId" value="">
|
</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>[[#{basis.save}]]
|
</button>
|
<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>[[#{basis.close}]]
|
</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 = 0;
|
var questionNum = 0;
|
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();
|
var $headlind = $(this).parents('.segmentation');
|
question.name = $headlind.find('[name="segmentationName"]').eq(0).val();
|
question.permanentId = $headlind.find('[name="permanentId"]').eq(0).val();
|
question.description = $headlind.find('[name="description"]').eq(0).val();
|
question.questionItems = new Array();
|
$($headlind.find('.ibox').find('[name="questionId"]')).each(function (i) {
|
var item = new Object();
|
item.id = $(this).val();
|
item.itemOrder = ++questionNum;
|
item.permanentId = question.permanentId + "-" + String.fromCharCode(i + 97);
|
question.questionItems.push(item);
|
}
|
);
|
question.questionId = $headlind.children('[name="questionId"]').val();
|
questionsJson.push(question);
|
});
|
$('[name="questions"]').val(JSON.stringify(questionsJson));
|
|
if (!$.validate.must($('#headline'))) {
|
return;
|
}
|
|
if (!addQuestionMust()) {
|
return;
|
}
|
|
|
if ($.validate.form()) {
|
if ($('.float-e-margins').html().trim() === "") {
|
$("#addHeadline-must").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);
|
};
|
|
var addQuestionMust = function () {
|
var flag = true;
|
$('#headline').find('.float-e-margins').each(function () {
|
if ($(this).html().trim() === "") {
|
$("#addHeadline-must").removeAttrs('hidden');
|
flag = false;
|
}
|
});
|
return flag;
|
};
|
|
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 () {
|
var options = {
|
removeUrl: prefix + "/remove",
|
exportUrl: prefix + "/export",
|
modalName: "[[#{menu.exam.question.view}]]",
|
importUrl: prefix + "/importJobData/" + $('#langType').val() + "/" + $('#levelId').val() + "/" + $('#levelName').val(),
|
importTemplateUrl: prefix + "/importTemplate",
|
modalName: "product"
|
};
|
$.table.init(options);
|
|
$('[name="langType"]').on('change', function () {
|
options.importUrl = prefix + "/importJobData/" + $('#langType').val() + "/" + $('#levelId').val() + "/" + $('#levelName').val();
|
$.table.init(options);
|
});
|
|
|
$('.body-div').on("click", "#addHeadline", function () {
|
if ($.validate.form()) {
|
$("#addHeadline-must").attr('hidden', 'true');
|
$.modal.openTab("[[#{jsp.exam.product.pleaseSelectATopic}]]", prefix + "/addTitle/job_title" + "/" + $('#langType').val());
|
}
|
});
|
|
$('.body-div').on("focus", ".must-focus", function () {
|
$(this).siblings('div[class*="must"]').attr('hidden', 'true');
|
});
|
|
// add-question
|
$('body').on("click", ".add-question", function () {
|
if ($('#headline').html().trim() == "") {
|
$.modal.alertWarning("[[#{jsp.exam.product.pleaseSelectATopic}]]");
|
return;
|
}
|
|
if ($.validate.must($(this).parents('.segmentation'))) {
|
$('#addHeadline-must').attr('hidden', 'true');
|
var $thisContent = $(this).parents('.segmentation').find(".float-e-margins");
|
$thisContent.attr('add-question-edit', 'true'); // add_question.html remove after save
|
$.modal.openTab("[[#{jsp.exam.product.pleaseSelectATopic}]]", prefix + "/addQuestion/" + $('#levelId').val() + "/" + $('#langType').val() + "?questionTemplateId=job_title");
|
$('.segmentation-group').removeAttrs("hidden");
|
}
|
});
|
|
// 批量导入的按钮
|
$('body').on("click", ".add-question-batch", function () {
|
if ($.validate.must($(this).parents('.segmentation'))) {
|
$('#addHeadline-must').attr('hidden', 'true');
|
var $thisContent = $(this).parents('.segmentation').find(".float-e-margins");
|
$thisContent.attr('add-question-edit', 'true'); // add_question.html remove after save
|
$.modal.openTab("[[#{jsp.exam.product.pleaseSelectATopic}]]", prefix + "/addQuestion/" + $('#levelId').val() + "/" + $('#langType').val() + "?questionTemplateId=job_batch");
|
$('.segmentation-group').removeAttrs("hidden");
|
}
|
});
|
|
// 批量导入题目
|
$('.body-div').on("click", "#importQuestionsInBatches", function () {
|
if ($.validate.form()) {
|
$.table.importJobExcel();
|
}
|
});
|
|
//delet title
|
$('#headline').on('click', '.remove-title', function () {
|
$(this).parent().parent().parent().remove();
|
$('.segment-guide-seq').each(function (i) {
|
$(this).text("第" + (i + 1) + "段指导语 -");
|
});
|
|
$('.headline-index-seq').each(function (i) {
|
$(this).text("题目" + (i + 1) + " -");
|
});
|
|
$('.segment-discription-seq').each(function (i) {
|
$(this).text("题目" + (i + 1) + " 描述-");
|
num = i + 1
|
});
|
});
|
|
//open summernote
|
$('#form-product-add').on('focus', '[name="guide"]', 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>
|
<!-- 导入区域 -->
|
<script id="importTpl" type="text/template">
|
<form enctype="multipart/form-data" class="mt20 mb10" id="import-form">
|
<div class="col-xs-offset-1">
|
|
<div class="form-group segmentation">
|
<div class="form-group" hidden="true">
|
<label class="col-sm-3 control-label headline-index headline-index-seq">question1 - </label>
|
<div class="col-sm-9 form-inline">
|
<input name="segmentationName" class="form-control must-focus" type="text"
|
style="width: 70%; margin-right: 2%;" readonly>
|
<div class="segment-must" style="color: red" hidden="true">*[[#{basis.required}]]</div>
|
</div>
|
</div>
|
<div class="form-group" hidden="true">
|
<label class="col-sm-3 control-label permanent-seq">[[#{jsp.exam.product.permanentNumber}]]：</label>
|
<div class="col-sm-9 form-inline">
|
<input name="permanentId" class="form-control must-focus" type="text"
|
style="width: 70%; margin-right: 2%;" readonly>
|
<div class="segment-must" style="color: red" hidden="true">*[[#{basis.required}]]</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label segment-discription-seq" hidden="true">question one desc
|
- </label>
|
<div class="col-sm-9 form-inline input-focus">
|
<textarea name="description" class="form-control" rows="5" cols="60"
|
style="margin-top: 2%; display: none"></textarea>
|
<button type="button" class="btn btn-warning btn-rounded add-question-batch">
|
[[#{jsp.exam.product.titleDimensionSetting}]]
|
</button>
|
<button id="import-button" type="button" onclick="display()" hidden="true">[[#{basis.import}]]
|
</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 ibox-dimension">
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<input type="file" id="file" name="file"/>
|
<div class="mt10 pt5">
|
<!--<input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据 -->
|
<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i
|
class="fa fa-file-excel-o"></i> [[#{basis.template}]]</a>
|
</div>
|
<font color="red" class="pull-left mt10">
|
[[#{jsp.exam.product.bulkImportTips}]]
|
</font>
|
</div>
|
</form>
|
</script>
|
</body>
|
</html>
|
