tianze-pro/web/src/main/resources/templates/jlw/courseInfo/courseConfigureNew.html

<!--# 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: 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">
            <div class="layui-row">上传须知:</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'], function (exports) {
        var form = layui.form,
            transfer = layui.transfer,
            upload = layui.upload,
            laytpl = layui.laytpl,
            table = layui.table,
            tree = layui.tree,
            element = layui.element,
            treetable = layui.treetable;
        var courseInfoParentId = $("input[name='courseInfoId']").val();

        //拖拽上传
        upload.render({
            elem: '#resourcesUpload'
            ,url: Common.ctxPath +  '/jlw/file/update.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,done: function(res){
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', Common.ctxPath + res.data.src);
            }
        });

        var courseInfoTable = function () {
            var ret = Common.getAjax("/jlw/courseInfo/getCourseResources.json", {courseInfoId: courseInfoParentId});
            var data = ret.data;
            if (ret.code == 0) {
                ret.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: '资源类型',
                        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: '操作',
                        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="addWP">添加图文</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;
                        }
                    }
                ]]
            });
        };
        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') {//上传资源
                var that = this;
                updataResourcesOpen();
            }else if (obj.event === 'addLine') {//添加链接

            }else if (obj.event === 'addWP') {//添加图文

            }else if (obj.event === 'look') {//查看

            }else if (obj.event === 'update') {//上传

            }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)
                        }else{
                            param.courseInfoName = $("#editName input[name='courseInfoName']").val();
                            postCourseInfo(id, param);
                        }
                    }
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                }
            });
        }
        function updataResourcesOpen() {
            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){
                        updataResourcesOpenLocal();
                    }else {

                    }
                    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 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) {
            layer.load();
            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) {
                    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>