271 lines
10 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--#layout("/common/layout.html",{"jsBase":"/js/jlw/courseLabel/"}){ -->
<style>
.btn_radius, .btn_radius:hover {
padding: 0 2px;
margin-right: 5px;
margin-bottom: 5px;
color: #73a2f8 !important;
border-color: #73a2f8 !important;
}
.addLabel {
color: #73a2f8;
cursor: pointer;
}
.layui-form-item {
margin-bottom: 0;
}
.layui-form-item label {
width: 150px;
line-height: 20px;
height: 25px;
text-align: left !important;
padding: 9px 0 !important;
}
.layui-input-block {
margin-left: 180px;
}
.classDel, .classEdit {
cursor: pointer;
font-size: 20px;
}
.classDel {
color: red;
margin-left: 10px;
}
.classEdit {
color: #73a2f8;
}
.layui-colla-title {
background-color: inherit;
font-size: 18px;
}
.layui-collapse, .layui-colla-content, .layui-colla-item {
border: none;
}
.layui-colla-content, .layui-colla-item {
margin-left: 55px;
font-size: 16px !important;
}
#view .layui-colla-item h2 {
width: 200px;
}
</style>
<div class="layui-row">
<h2><i class="iconfont" style="font-size: 30px;float: left;padding: 0 20px;">&#xe635;</i>课程分类管理</h2>
</div>
<div class="layui-collapse" lay-accordion id="view">
</div>
<script id="demo" type="text/html">
<div class="layui-colla-item">
<h2 class="layui-colla-title">应用课程类</h2>
<div class="layui-colla-content layui-show">
<div class="layui-row" id="yykcl">
{{# layui.each(d.yykcl, function(index, item){ }}
<div class="layui-form-item" courseLabelId="{{item.courseLabelId}}">
<label class="layui-form-label">{{item.courseLabelName}}</label>
<div class="layui-input-block" style="line-height: 36px;">
{{# if(item.addType != 'ADMIN_ADD'){ }}
<i class="layui-icon classEdit">&#xe642;</i>
<i class="layui-icon classDel">&#xe640;</i>
{{# } }}
</div>
</div>
{{# }); }}
</div>
<div class="layui-row" style="margin-top: 10px;">
<span index="0" class="addLabel">
<button type="button"
class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary btn_radius">
<i class="layui-icon">&#xe624;</i>
</button>
<span>分类</span>
</span>
</div>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">考证课程类</h2>
<div class="layui-colla-content">
<div class="layui-row" id="kzkcl">
{{# layui.each(d.kzkcl, function(index, item){ }}
<div class="layui-form-item" courseLabelId="{{item.courseLabelId}}">
<label class="layui-form-label">{{item.courseLabelName}}</label>
<div class="layui-input-block" style="line-height: 36px;">
{{# if(item.addType != 'ADMIN_ADD'){ }}
<i class="layui-icon classEdit">&#xe642;</i>
<i class="layui-icon classDel">&#xe640;</i>
{{# } }}
</div>
</div>
{{# }); }}
</div>
<div class="layui-row" style="margin-top: 10px;">
<span index="1" class="addLabel">
<button type="button"
class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary btn_radius">
<i class="layui-icon">&#xe624;</i>
</button>
<span style="color:#73a2f8;">分类</span>
</span>
</div>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">理论课程类</h2>
<div class="layui-colla-content">
<div class="layui-row" id="llkcl">
{{# layui.each(d.llkcl, function(index, item){ }}
<div class="layui-form-item" courseLabelId="{{item.courseLabelId}}">
<label class="layui-form-label">{{item.courseLabelName}}</label>
<div class="layui-input-block" style="line-height: 36px;">
{{# if(item.addType != 'ADMIN_ADD'){ }}
<i class="layui-icon classEdit">&#xe642;</i>
<i class="layui-icon classDel">&#xe640;</i>
{{# } }}
</div>
</div>
{{# }); }}
</div>
<div class="layui-row" style="margin-top: 10px;">
<span index="2" class="addLabel">
<button type="button"
class="layui-btn layui-btn-radius layui-btn-xs layui-btn-primary btn_radius">
<i class="layui-icon">&#xe624;</i>
</button>
<span style="color:#73a2f8;">分类</span>
</span>
</div>
</div>
</div>
</script>
<!--#} -->
<script>
layui.use(['form', 'element', 'laytpl'], function () {
var element = layui.element, form = layui.form, laytpl = layui.laytpl;
var ret = Common.getAjax("/jlw/courseLabel/getValues.json", {courseLabelStatus: 1});
var yykcl = [];
var kzkcl = [];
var llkcl = [];
if (ret.code == 0) {
for (var i = 0; i < ret.data.length; i++) {
if (ret.data[i].courseLabelType == '应用课程类') {
yykcl.push(ret.data[i]);
} else if (ret.data[i].courseLabelType == '考证课程类') {
kzkcl.push(ret.data[i]);
} else if (ret.data[i].courseLabelType == '理论课程类') {
llkcl.push(ret.data[i]);
}
}
}
var getTpl = demo.innerHTML
, view = document.getElementById('view');
laytpl(getTpl).render({yykcl: yykcl, kzkcl: kzkcl, llkcl: llkcl}, function (html) {
view.innerHTML = html;
$(".addLabel").click(addLabel);
$(".classEdit").click(classEdit);
$(".classDel").click(classDel);
element.render();
});
var courseLabelType = ['应用课程类', '考证课程类', '理论课程类'];
//绑定添加分类按钮
function addLabel() {
var num = $(this).attr("index"); //0应用课程类 1:考证课程类 2:理论课程类
var id = num == 0 ? '#yykcl' : num == 1 ? '#kzkcl' : num == 2 ? '#llkcl' : '';
var ret = Common.postAjax("/jlw/courseLabel/add.json", {
courseLabelType: courseLabelType[num],
courseLabelName: "未命名",
courseLabelStatus: 1
});
if (ret.code == 0) {
var htm = '<div class="layui-form-item" courseLabelId="' + ret.data + '">\n' +
' <label class="layui-form-label">未命名</label>\n' +
' <div class="layui-input-block" style="line-height: 36px;">\n' +
' <i class="layui-icon classEdit">&#xe642;</i>\n' +
' <i class="layui-icon classDel">&#xe640;</i>\n' +
' </div>\n' +
' </div>';
$(id).append(htm);
$(".classEdit").unbind();
$(".classDel").unbind();
$(".classEdit").click(classEdit);
$(".classDel").click(classDel);
} else {
layer.msg(ret.msg);
}
}
//编辑相应的分类
function classEdit() {
var this_ = $(this);
var p = $(this).parent().prev();
var text = p.text();
p.text("");
p.append('<input type="text" name="courseLabelName" placeholder="请输入标签名" class="layui-input" value="' + text + '" style="height: 25px;margin-left:-11px;margin-top: -4px;">');
$("input[name='courseLabelName']").val("").focus().val(text);
$("input[name='courseLabelName']").blur(function () {
var value = $(this).val();
var this_name = $(this);
if (text != value) {
var ret = Common.postAjax("/jlw/courseLabel/edit.json", {
courseLabelName: value, courseLabelId: this_.parents(".layui-form-item").attr("courseLabelId")
});
layer.msg(ret.code == 0 ? "修改成功!" : ret.msg, {
offset: ['50%'],
icon: ret.code == 0 ? 1 : 2,
time: 1000 //2秒关闭如果不配置默认是3秒
});
if (ret.code == 0) {
p.text(value);
p.show();
this_name.remove();
}
} else {
p.text(value);
p.show();
this_name.remove();
}
});
}
//删除相应的分类
function classDel() {
var this_ = $(this);
layer.confirm('是否确定删除该分类?', function (index) {
var ret = Common.postAjax("/jlw/courseLabel/edit.json", {
courseLabelId: this_.parents(".layui-form-item").attr("courseLabelId"),
courseLabelStatus: 2
});
layer.msg(ret.code == 0 ? "修改成功!" : ret.msg, {
offset: ['50%'],
icon: ret.code == 0 ? 1 : 2,
time: 1000 //2秒关闭如果不配置默认是3秒
}, function () {
if (ret.code == 0) {
this_.parent().prev().text(value);
layer.close(index);
}
});
this_.parents(".layui-form-item").remove();
layer.close(index);
});
}
});
</script>