You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

786 lines
34 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/courseInfo/"}){ -->
<link rel="stylesheet" type="text/css" href="${ctxPath}/css/plugin.css?v=${jsVer}" media="all"/>
<style>
.layui-table a {
margin-right: 10px;
}
.shiping {
color: red;
border: 2px solid red;
border-radius: 5px;
padding: 3px;
}
.ppt {
color: #01AAED;
border: 2px solid #01AAED;
border-radius: 5px;
padding: 3px;
}
.pdf {
color: #FFB800;
border: 2px solid #FFB800;
border-radius: 5px;
padding: 3px;
}
.lianjie {
color: #009688;
border: 2px solid #009688;
border-radius: 5px;
padding: 3px;
}
.tupian {
color: #2F4056;
border: 2px solid #2F4056;
border-radius: 5px;
padding: 2px;
}
.textType {
border: 1px solid #0f9cfd;
color: #0f9cfd;
border-radius: 5px;
padding: 3px
}
</style>
<input name="courseInfoId" type="hidden" value="${courseInfo.courseInfoId}"/>
<div class="layui-row" style="margin: 0 auto;">
<a class="layui-btn layui-btn-primary" id="addButton-cancel" style="margin-bottom: 10px;">返回</a>
<a class="layui-btn bg_button" id="addButton" style="margin-bottom: 10px;">新增章目录</a>
<a class="layui-btn" id="foldTrue" style="margin-bottom: 10px;">全部展开</a>
<a class="layui-btn layui-bg-gray" id="foldFalse" style="margin-bottom: 10px;">全部折叠</a>
</div>
<table id="courseInfoTable" lay-filter="courseInfoTable"></table>
<!--本地上传-->
<div style="display: none;" id="resources_demo">
<div class="layui-col-xs6" style="padding: 20px;border-right:thin solid #f4f4f4;height:270px">
<div class="grid-demo">
<div class="layui-upload-drag" id="resourcesUpload">
<i class="layui-icon" style="color: #3a71a8"></i>
<p>点击上传,或将文件拖拽到此处</p>
<div class="layui-hide" id="uploadDemoView">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 196px">
</div>
</div>
</div>
</div>
<div class="layui-col-xs6" style="padding: 20px">
<div class="grid-demo">
<p>上传须知:</p> <p style="text-indent: 2em;">1、可上传视频格式MP4</p>
<p style="text-indent: 2em;">2、可上传文档包括word、ppt、pdf</p>
<p style="text-indent: 2em;">3、默认使用文件名称可自行修改</p>
<!--<div class="el-col el-col-12">
</div>-->
</div>
</div>
</div>
<!--资源库上传-->
<div id="edit_dialog" class="layui-form" style="display: none;padding: 20px 20px 20px;height: 490px;overflow: auto;">
<div class="layui-inline">
<label class="layui-form-label" style="width: 80px">资源名称:</label>
<div class="layui-input-block" style="margin-left: 110px;">
<input type="text" id="resourcesInfoName" name="resourcesInfoName" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 80px">归属课程:</label>
<div class="layui-input-block" style="margin-left: -80px;">
<layui:simpleDictSelect style='layui-input-block'
type="course_info.course_info_name.course_info_status!=3,course_info_type=1,find_in_set(course_label_id,(select group_concat(course_label_id) from course_label where course_label_status = 1))"
id="courseInfoIds" name="courseInfoId_1"
layFilter="select_courseInfoIds"/>
</div>
</div>
<div class="layui-inline" style="left: 30px;">
<button type="button" class="layui-btn bg_button search"><i class="layui-icon">&#xe615;</i></button>
</div>
<table id="resourcesInfoTable" lay-filter="resourcesInfoTable"></table>
</div>
<!--资源上传结束-->
<!--添加链接-->
<div id="addLine_dialog" class="layui-form" style="display: none;padding-top: 20px">
<div class="layui-row">
<div class="layui-form-item">
<label class="layui-form-label" style="width: 80px"><span style="color: red">*</span>链接名称:</label>
<div class="layui-input-inline">
<input type="text" name="resourcesInfoName" class="layui-input">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-form-item">
<label class="layui-form-label" style="width: 80px"><span style="color: red">*</span>链接地址:</label>
<div class="layui-input-inline">
<input type="text" name="resourcesInfoContent" class="layui-input">
</div>
</div>
</div>
</div>
<!--添加图文-->
<div id="addPW_dialog" class="layui-form" style="display: none;padding-top: 20px">
<div class="layui-row">
<div class="layui-form-item">
<label class="layui-form-label" style="width: 80px"><span style="color: red">*</span>名称:</label>
<div class="layui-input-inline">
<input type="text" name="resourcesInfoName" class="layui-input">
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-form-item">
<label class="layui-form-label" style="width: 80px">内容:</label>
<div class="layui-input-inline" style="width: 60% !important;min-width: 500px;">
<textarea id="resourcesInfoContent" name="resourcesInfoContent" style="display:none;"></textarea>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-form-item">
<label class="layui-form-label" style="width: 80px">文件:</label>
<div class="layui-input-inline" style="width: 130px!important">
<button type="button" class="layui-btn" id="picWordUp">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
</div>
<div class="layui-form-mid">支持CS格式</div>
</div>
</div>
</div>
<!--# } -->
<script type="text/javascript" src="${ctxPath}/plugins/xm-select.js?v=${jsVer}"></script>
<script>
layui.define(function (exports) { //提示组件也可以依赖其它组件layui.define('jquery', callback);
exports('treetable');
});
//调用
layui.config({
base: Common.ctxPath + '/plugins/treetable-lay/' //假设这是treetable.js所在的目录 可以把你需要扩展的js插件都放在一个文件夹内
}).extend({ //设定组件别名
treetable: 'treetable'
});
layui.define(['form', 'transfer', 'table', 'tree', "laytpl", 'element', 'upload', 'treetable', "layedit"], function (exports) {
var form = layui.form,
table = layui.table,
upload = layui.upload,
treetable = layui.treetable,
layedit = layui.layedit,
editIndex,
laytpl = layui.laytpl,
transfer = layui.transfer,
tree = layui.tree,
element = layui.element;
var courseInfoParentId = $("input[name='courseInfoId']").val();
var resourcesTable = [];
layedit.set({ //富文本上传图片
uploadImage: {
url: Common.ctxPath + "/jlw/file/update.do",
imgUrl:Common.ctxPath
}
});
var courseInfoContent_;
upload.render({
elem: '#resourcesUpload'
,url: Common.ctxPath + '/jlw/file/update.do'
, accept: 'file'
,done: function(res){
layer.msg('上传成功');
layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', Common.ctxPath + res.data.src);
}
});
var uploadInst = upload.render({
elem: '#picWordUp' //上传图文
, url: Common.ctxPath + '/jlw/file/update.do'
, accept: 'file'
, exts: 'jpg|png|gif|bmp|jpeg|csv'
, done: function (res) {
//上传完毕回调
layer.msg('上传成功');
}
, error: function () {
//请求异常回调
}
});
var courseInfoTable = function () {
layer.load(1);
var data=[];
setTimeout(function () {
var ret = Common.getAjax("/jlw/courseInfo/getCourseResources.json", {courseInfoId: courseInfoParentId});
data = ret.data;
if(ret.code == 0){
data.forEach(item => {
item.resourcesInfo.forEach(function (e, i) {
e.courseInfoParentId = e.courseInfoId;
e.courseInfoId = 0;
e.courseInfoName = e.resourcesInfoName;
data.push(e);
})
});
treetable.render({
elem: '#courseInfoTable',
height: Lib.getTableHeight(1),
cellMinWidth: 100,
data: data,
treeColIndex: 0, //树形图标显示在第几列
treeSpid: courseInfoParentId, //最上级的父级id
treeIdName: 'courseInfoId', //id字段的名称
treePidName: 'courseInfoParentId', //父级节点字段
treeDefaultClose: true, //是否默认折叠
treeLinkage: true //父级展开时是否自动展开所有子级
, limit: 1000
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows.item //解析数据列表
};
}
, cols: [[ // 表头
{
field: 'LAY_TABLE_INDEX',
title: '序号',
align: "center",
},
{
field: 'courseInfoName',
title: '目录名称',
},
{
field: 'resourcesInfoType',
title: '资源类型',
width:120,
align: "center",
templet: function (d) {
//资源类型(1视频 2PPT 3PDF 4链接 5图片)
var css = '';
var value = "";
if (d.resourcesInfoType === 1) {
value = "视频";
css = "shiping";
} else if (d.resourcesInfoType === 2) {
value = "PPT";
css = "ppt";
} else if (d.resourcesInfoType === 3) {
value = "PDF";
css = "pdf";
} else if (d.resourcesInfoType === 4) {
value = "链接";
css = "lianjie";
} else if (d.resourcesInfoType === 5) {
value = "图片";
css = "tupian";
}
return '<span class=' + css + '>' + value + '</span>';
}
},
{
field: 'courseInfoId',
title: '操作',
align: "center",
style: "text-align: left;",
templet: function (d) {
var htm = '';
if (d.courseInfoType === 2) {
htm += '<a class="layui-table-link" lay-event="add">添加子章节</a>';
} else if (d.courseInfoType === 3) {
htm += '<a class="layui-table-link" lay-event="updataResources">上传资源</a>';
htm += '<a class="layui-table-link" lay-event="addLine">添加链接</a>';
htm += '<a class="layui-table-link" lay-event="addPW">添加图文</a>';
}
if (!$.isEmpty(d.resourcesInfoType)) {
htm += '<a class="layui-table-link" lay-event="look">查看</a>';
htm += '<a class="layui-table-link" lay-event="update">上传</a>';
}
htm += '<a class="layui-table-link" lay-event="edit">编辑</a>';
htm += '<a class="layui-table-link" lay-event="del">删除</a>';
htm += '<a class="layui-table-link" lay-event="move">拖动</a>';
if (!$.isEmpty(d.resourcesInfoType)) {
htm += '<a class="layui-table-link" lay-event="moveUp">上移</a>';
htm += '<a class="layui-table-link" lay-event="moveDown">下移</a>';
}
return htm;
}
}
]]
});
layer.closeAll();
}
}, 10);
};
courseInfoTable();
/*新增章目录*/
$("#addButton").click(function () {
var param = {
courseInfoParentId: courseInfoParentId,
courseInfoType: 2,
courseInfoStatus: 1
};
var title = "章节名称";
addOpen('',title,'',param)
});
/*返回*/
$("#addButton-cancel").click(function () {
parent.Lib.tableRefresh();
Lib.closeFrame();
});
//全部展开
$("#foldTrue").click(function () {
treetable.expandAll('#courseInfoTable');
});
//全部折叠
$("#foldFalse").click(function () {
treetable.foldAll('#courseInfoTable');
});
/*表格操作栏*/
table.on('tool(courseInfoTable)', function (obj) {
var data = obj.data;
var courseInfoId = data.courseInfoId;
if (obj.event === 'add') {//添加子章节
var param = {
courseInfoParentId: courseInfoId,
courseInfoType: 3,
courseInfoStatus: 1
};
addOpen("",'子章节名称',"",param);
}else if (obj.event === 'updataResources') {//上传资源
updataResourcesOpen(data);
}else if (obj.event === 'addLine') {//添加链接
addLine(data);
} else if (obj.event === 'addPW') {//添加图文
addPW(data);
}else if (obj.event === 'look') {//查看
Lib.downloadFile(data);
}else if (obj.event === 'update') {//上传
updataResourcesOpen(data);
}else if(obj.event === 'edit'){
var title="章节目录";
var param = {};
var id = '';
if (!$.isEmpty(data.resourcesInfoId)) {
title = "资源名称";
param.resourcesInfoId= data.resourcesInfoId;
id = data.resourcesInfoId;
}else {
id = courseInfoId;
param.courseInfoId = courseInfoId;
}
addOpen(id,title,data,param);
}else if (obj.event === 'del') {
layer.confirm('是否确定删除该信息?', function (index) {
layer.load();
var ret = Common.postAjax("/jlw/courseInfo/delete.json",{ids:courseInfoId});
layer.msg(ret.code == 0 ? "删除成功!" : ret.msg, {
offset: ['50%'],
icon: ret.code == 0 ? 1 : 2,
time: 1500 //2秒关闭如果不配置默认是3秒
}, function () {
courseInfoTable();
if (ret.code == 0) {
Lib.tableRefresh();
layer.closeAll();
}
});
});
/*if(courseInfoParentId != data.courseInfoParentId){
}else {
layer.msg("删除失败!不能删除根节点!", {
offset: ['50%'],
icon: 2,
time: 2000 //2秒关闭如果不配置默认是3秒
});
courseInfoTable();
}*/
}else if (obj.event === 'move') {//拖动
}else if (obj.event === 'moveUp') {//上移
}else if (obj.event === 'moveDown') {//下移
}
});
/*添加、编辑弹窗*/
function addOpen(id,title,data,param) {
layer.open({
title: "添加/编辑"
, content: '<div class="layui-inline" id="editName">\n' +
'<label class="layui-form-label">'+title+'</label>\n' +
'<div class="layui-input-inline">\n' +
'<input type="text" id="courseInfoName" name="courseInfoName" class="layui-input" >\n' +
'</div>\n' +
'</div>'
, btn: ['确定', '关闭']
, shadeClose:true
, success:function () {
$("#editName input[name='courseInfoName']").val(data.courseInfoName)
}
, yes: function (index, layero) {
if($.isEmpty(id)){
param.courseInfoName = $("#editName input[name='courseInfoName']").val();
postCourseInfo('', param);
}else {
if(!$.isEmpty(param.resourcesInfoId)){
param.resourcesInfoName = $("#editName input[name='courseInfoName']").val();
postResourcesInfo(param.resourcesInfoId,param,index)
}else{
param.courseInfoName = $("#editName input[name='courseInfoName']").val();
postCourseInfo(id, param);
}
}
},
btn2: function (index, layero) {
layer.close(index);
}
});
}
/*资源类型弹出框*/
function updataResourcesOpen(data) {
layer.open({
title: '上传资源类型'
, shadeClose: true
, content: ' <div class="layui-form" style="margin-top: 5px">' +
' <input type="radio" name="type" value="1" title="本地上传" checked>' +
' <input type="radio" name="type" value="2" title="资源库上传" >' +
' </div>'
, btn: ['确定', '关闭']
, success: function (layero, index) {
form.render();
},yes:function (index, layero){
var type = $("input[name='type']:checked").val();
if($.isEmpty(type)){
Common.info("请选择上传资源类型!!");
return;
}
if(type == '1'||type == 1){
if (!$.isEmpty(data.resourcesInfoType)) {
if (data.resourcesInfoType === 5) {
addPW(data,1);
} else if (data.resourcesInfoType === 4) {
addLine(data,1);
} else {
updataResourcesOpenLocal();
}
} else {
updataResourcesOpenLocal();
}
}else {
if (!$.isEmpty(data.resourcesInfoType)) {
updataResourcesOpenRe(data,1);
} else {
updataResourcesOpenRe(data,2);
}
}
layer.close(index);
}
, btn2: function (index, layero) {
layer.close(index);
}
});
}
/*本地资源上传弹出框*/
function updataResourcesOpenLocal() {
layer.open({
title: '本地上传'
,type:1
, shadeClose: true
, content: $("#resources_demo")
, area: ['650px','380px']
, btn: ['确定', '关闭']
,yes:function (index, layero){
layer.close(index);
}
, btn2: function (index, layero) {
layer.close(index);
}
});
}
/*资源库上传弹出框*/
function updataResourcesOpenRe(dataOld,sign) {
layer.open({
type: 1,
title: "资源库上传",
shadeClose: true,
btn: ['保存', '关闭'],
btnAlign: 'c',
area: ['820px', '580px'],
content: $("#edit_dialog"),
success: function (layero, index) {
loadResourcesInfo(sign);
$(".search").unbind();
$(".search").click(searchList); //搜索
}, yes: function (index) {
var checkStatus = table.checkStatus("resourcesInfoTable"); //获取选中行状态
var dataNew = checkStatus.data, ids = Common.concatBatchId(dataNew, "resourcesInfoId"); //获取选中行数据
if ($.isEmpty(ids)) {
layer.msg("请选择需要上传的资源!", {
offset: ['50%'],
icon: 2,
time: 2000 //2秒关闭如果不配置默认是3秒
});
return;
}
var param={}
var ret;
if(sign==2){
param = {resourcesInfoIds: ids,courseId:dataOld.courseInfoId};
ret = Common.postAjax("/jlw/resourcesInfo/copy.json", param);
layer.msg(ret.code == 0 ? "保存成功!" : ret.msg, {
offset: ['50%'],
icon: ret.code == 0 ? 1 : 2,
time: 1500 //2秒关闭如果不配置默认是3秒
}, function () {
layer.close(index);
});
}else {
param = {resourcesInfoId: dataOld.resourcesInfoId,
courseId:dataOld.courseInfoId,
resourcesInfoContent:dataNew[0].resourcesInfoContent,
resourcesInfoName:dataNew[0].resourcesInfoName,
resourcesInfoType:dataNew[0].resourcesInfoType
};
postResourcesInfo(dataOld.resourcesInfoId,param,index);
}
}, btn2: function (index, layero) {
layer.close(index);
}
});
}
//资源库表格
function loadResourcesInfo(sign) {
$("#edit_dialog input[name='resourcesInfoName']").val("");
resourcesTable = table.render({
elem: '#resourcesInfoTable',
height: Lib.getTableHeight(),
cellMinWidth: 100,
method: 'post',
even: true,
url: Common.ctxPath + '/jlw/resourcesInfo/list.json' // 数据接口
, page: Lib.tablePage // 开启分页
, limit: 10,
cols: [[ // 表头
{
type: sign == 2 ?'checkbox':'radio'
},
{
field: 'resourcesInfoName', title: '资源名称', align: "center", style: "text-align: left;"
},
{
field: 'courseInfoParentParentName', title: '归属课程', align: "center", width: 150
},
{
field: 'resourcesInfoType', width: 150, title: '资源类型', align: "center", templet: function (d) {//(1视频 2PPT 3PDF)
var text = d.resourcesInfoType == 1 ? "视频" : d.resourcesInfoType == 2 ? "PPT" : d.resourcesInfoType == 3 ? "PDF" : d.resourcesInfoType == 4 ? "链接" : d.resourcesInfoType == 5 ? "图文" : '-';
return '<span class="textType">' + text + '</span>';
}
},
{
field: 'userId',
title: '操作',
width: 80,
align: "center",
templet: function (d) {
var htm = '<button type="button" class="layui-btn layui-btn-xs bg_button" lay-event="previewPage">查看</button></a>';
return htm;
}
}
]]
});
table.on('tool(resourcesInfoTable)', function (obj) {
var data = obj.data;
if (obj.event === 'previewPage') { //预览
Lib.downloadFile(data);
}
});
}
/*资源表格搜索*/
function searchList() {
var param = {
"courseInfoFullId": $("#edit_dialog select[name='courseInfoId_1']").val(),
"resourcesInfoName": $("#edit_dialog input[name = 'resourcesInfoName']").val()
};
resourcesTable.reload({
where: param,
page: {
curr: 1
}
});
}
/*添加链接*/
function addLine(data,sign) {
layer.open({
type: 1,
title: "添加链接",
shadeClose: true,
btn: ['保存', '关闭'],
content: $("#addLine_dialog"),
success: function (layero, index) {
$("#addLine_dialog input[name='resourcesInfoName']").val(data.resourcesInfoName);
$("#addLine_dialog input[name='resourcesInfoContent']").val(data.resourcesInfoContent);
}, yes: function (index) {
var resourcesInfoName = $("#addLine_dialog input[name='resourcesInfoName']").val();
var resourcesInfoContent = $("#addLine_dialog input[name='resourcesInfoContent']").val();
if ($.isEmpty(resourcesInfoName)) {
layer.msg("请输入链接名称!", {
offset: ['50%'],
icon: 2,
time: 2000 //2秒关闭如果不配置默认是3秒
});
return;
}
if ($.isEmpty(resourcesInfoContent)) {
layer.msg("请输入链接地址!", {
offset: ['50%'],
icon: 2,
time: 2000 //2秒关闭如果不配置默认是3秒
});
return;
}
var param = {
'resourcesInfoName': resourcesInfoName,
'resourcesInfoContent': resourcesInfoContent,
'resourcesInfoType':4,
'courseInfoId':data.courseInfoId
};
if(sign == 1){
param.resourcesInfoId=data.resourcesInfoId;
param.courseInfoId=data.courseInfoParentId;
postResourcesInfo(data.resourcesInfoId,param,index)
}else {
postResourcesInfo("",param,index)
}
}, btn2: function (index, layero) {
layer.close(index);
}
});
}
/*添加图文*/
function addPW(data,sign) {
layer.open({
type: 1,
title: "添加图文",
shadeClose: true,
btn: ['保存', '关闭'],
content: $("#addPW_dialog"),
success: function (layero, index) {
$("#addPW_dialog input[name='resourcesInfoName']").val(data.resourcesInfoName);
$("#addPW_dialog textarea[name='resourcesInfoContent']").val(data.resourcesInfoContent);
//建立编辑器
courseInfoContent_ = layedit.build('resourcesInfoContent', {height: 200}); //题干
}, yes: function (index) {
var resourcesInfoName = $("#addPW_dialog input[name='resourcesInfoName']").val();
var resourcesInfoContent = layedit.getContent(courseInfoContent_);
if ($.isEmpty(resourcesInfoName)) {
layer.msg("请输入图文名称!", {
offset: ['50%'],
icon: 2,
time: 2000 //2秒关闭如果不配置默认是3秒
});
return;
}
if ($.isEmpty(resourcesInfoContent)) {
layer.msg("请输入图文内容!", {
offset: ['50%'],
icon: 2,
time: 2000 //2秒关闭如果不配置默认是3秒
});
return;
}
var param = {
'resourcesInfoName': resourcesInfoName,
'resourcesInfoContent': resourcesInfoContent,
'resourcesInfoType':5,
'courseInfoId':data.courseInfoId
};
if(sign == 1){
param.resourcesInfoId=data.resourcesInfoId;
param.courseInfoId=data.courseInfoParentId;
postResourcesInfo(data.resourcesInfoId,param,index)
}else {
postResourcesInfo("",param,index)
}
}, btn2: function (index, layero) {
layer.close(index);
}
});
}
/*课程数据提交*/
function postCourseInfo(id, param) {
layer.load();
setTimeout(function () {
var url = "/jlw/courseInfo/add.json";
if (!$.isEmpty(id)) {
url = "/jlw/courseInfo/edit.json";
}
var ret = Common.postAjax(url, param);
if (ret.code == 0) {
courseInfoTable();
}
layer.msg(ret.code == 0 ? "操作成功!" : ret.msg, {
offset: ['50%'],
icon: ret.code == 0 ? 1 : 2,
time: 1500 //2秒关闭如果不配置默认是3秒
}, function () {
layer.closeAll();
if (ret.code == 0) {
Lib.tableRefresh();
}
});
}, 50);
}
/*资源数据提交*/
function postResourcesInfo(id, param,index) {
layer.load(0,{
shadeClose: false,
shade: [0.5]
});
setTimeout(function () {
var url = "/jlw/resourcesInfo/add.json";
if (!$.isEmpty(id)) {
url = "/jlw/resourcesInfo/edit.json";
}
var ret = Common.postAjax(url, param);
if (ret.code == 0) {
layer.close(index);
courseInfoTable();
}
layer.msg(ret.code == 0 ? "操作成功!" : ret.msg, {
offset: ['50%'],
icon: ret.code == 0 ? 1 : 2,
time: 1500 //2秒关闭如果不配置默认是3秒
}, function () {
layer.closeAll();
if (ret.code == 0) {
Lib.tableRefresh();
}
});
}, 50);
}
});
</script>