add video-add no complete

Helius

2021-12-15 c68e17d384d4ebbf2d3a6c219a3c6de7ebb70d7a

 src/main/resources/templates/febs/views/video/video/video-add.html

@@ -1,80 +1,128 @@
<style>
    #user-add {
    #video-add {
        padding: 20px 25px 25px 0;
    }
    #user-add .layui-treeSelect .ztree li a, .ztree li span {
    #video-add .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
    #user-add #data-permission-tree-block {
    #video-add #data-permission-tree-block {
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 3px 0;
    }
    #user-add .layui-treeSelect .ztree li span.button.switch {
    #video-add .layui-treeSelect .ztree li span.button.switch {
        top: 1px;
        left: 3px;
    }
    #video-add .upload {
        cursor: pointer;
    }
</style>
<div class="layui-fluid" id="user-add">
    <form class="layui-form" action="" lay-filter="user-add-form">
<div class="layui-fluid" id="video-add">
    <form class="layui-form" action="" lay-filter="video-add-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">用户名：</label>
            <div class="layui-col-md6">
                <label class="layui-form-label febs-form-item-require">视频标题：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" minlength="2" maxlength="10" lay-verify="range|username"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label febs-form-item-require">视频分类：</label>
                <div class="layui-input-block" id="video-cate">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简介：</label>
            <div class="layui-input-block">
                <input type="text" name="username" minlength="2" maxlength="10" lay-verify="range|username"
                       autocomplete="off" class="layui-input">
                <textarea name="intro" autocomplete="off" placeholder="请输入简介" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机：</label>
            <label class="layui-form-label">缩略图：</label>
            <div class="layui-input-block">
                <input type="tel" name="mobile" lay-verify="phone" autocomplete="off" class="layui-input">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="thumbUpload">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="thumb" style="width: 150px;"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱：</label>
            <label class="layui-form-label febs-form-item-require">章节：</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="email" maxlength="50" autocomplete="off"
                       class="layui-input">
                <button class="layui-btn" type="button" id="addItem">新增章节</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">角色：</label>
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <select name="roleId"
                        lay-verify="required"
                        xm-select-direction="down"
                        xm-select="user-add-role"
                        xm-select-skin="default">
                </select>
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>排序</th>
                            <th>视频标题</th>
                            <th>视频缩略图</th>
                            <th>资源名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="itemList">
                    <tr>
                        <th>
                            1
                        </th>
                        <th>
                            <input type="text" class="layui-input" placeholder="" />
                        </th>
                        <th>
                            <div class="upload">
                                <img class="layui-upload-img item-img febs-hide" style="width: 150px;"/>
                                <button class="layui-btn layui-btn-xs"  type="button">点击上传</button>
                                <input type="text" class="febs-hide" name="itemThumb" />
                            </div>
                        </th>
                        <th>123</th>
                        <th>
                            <button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            2
                        </th>
                        <th>
                            <input type="text" class="layui-input" placeholder="" />
                        </th>
                        <th>
                            <div class="upload">
                                <img class="layui-upload-img item-img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg" style="width: 150px;"/>
                                <button class="layui-btn layui-btn-xs febs-hide" type="button">点击上传</button>
                                <input type="text" class="febs-hide" name="itemThumb" />
                            </div>
                        </th>
                        <th>123</th>
                        <th>
                            <button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>
                        </th>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">部门：</label>
            <label class="layui-form-label febs-form-item-require">是否免费：</label>
            <div class="layui-input-block">
                <input type="text" name="deptId" id="user-add-dept" class="layui-input">
                <input type="radio" name="isFree" value="1" title="免费" checked>
                <input type="radio" name="isFree" value="2" title="会员">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">状态：</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效" checked="">
                <input type="radio" name="status" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男性">
                <input type="radio" name="sex" value="1" title="女性">
                <input type="radio" name="sex" value="2" title="保密" checked="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据权限：</label>
            <div class="layui-input-block" id="data-permission-tree-block">
                <div class="data-permission-tree" lay-filter="dataPermissionTree" style="margin-left: 1rem"></div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
@@ -82,98 +130,202 @@
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="user-add-form-submit" id="submit"></button>
            <button class="layui-btn" lay-submit="" lay-filter="video-add-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script>
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree'], function () {
<script type="text/html" id="tableRowTemplate">
    {{#  layui.each(d, function(index, item){ }}
    <tr>
        <th>
            {{item.seq}}
            <input type="text" class="febs-hide" name="sourceId" value="{{item.id}}"/>
        </th>
        <th>
            <input type="text" class="layui-input" placeholder="" value=""/>
        </th>
        <th>
            <div class="upload">
                {{#  if(!item.thumb || item.thumb == ''){ }}
                <img class="layui-upload-img item-img  febs-hide" src="" style="width: 150px;"/>
                <button class="layui-btn layui-btn-xs" type="button">点击上传</button>
                <input type="text" class="febs-hide" name="itemThumb" />
                {{# } else { }}
                <img class="layui-upload-img item-img" src="" style="width: 150px;"/>
                <button class="layui-btn layui-btn-xs febs-hide" type="button">点击上传</button>
                <input type="text" class="febs-hide" name="itemThumb" />
                {{# } }}
            </div>
        </th>
        <th>{{item.name}}</th>
        <th>
            <button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>
        </th>
    </tr>
    {{#  }); }}
</script>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree', 'upload', 'xmSelect', 'laytpl', 'table'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            formSelects = layui.formSelects,
            treeSelect = layui.treeSelect,
            form = layui.form,
            eleTree = layui.eleTree,
            $view = $('#user-add'),
            table = layui.table,
            $view = $('#video-add'),
            upload = layui.upload,
            validate = layui.validate,
            _deptTree;
            laytpl = layui.laytpl,
            tableUpload,
            templateHtml = tableRowTemplate.innerHTML,
            $itemList = $("#itemList");

        form.verify(validate);
        form.render();

        formSelects.render();
        renderDeptTree();
        var itemData = [];
        var videoCate = xmSelect.render({
            el: '#video-cate',
            language: 'zn',
            prop : {
                value : 'id'
            },
            data: []
        })

        treeSelect.render({
            elem: $view.find('#user-add-dept'),
            type: 'get',
            data: ctx + 'dept/select/tree',
            placeholder: '请选择',
            search: false
        });
        febs.get(ctx + 'video/categoryTree', null, function(res) {
            videoCate.update({
                data : res.data,
                autoRow: true,
            });
        })

        function renderDeptTree() {
            _deptTree = eleTree.render({
                elem: $view.find('.data-permission-tree'),
                url: ctx + 'dept/tree',
                accordion: true,
                highlightCurrent: true,
                showCheckbox: true,
                checkStrictly: true,
                renderAfterExpand: false,
                request: {
                    name: 'name',
                    key: "id",
                    checked: "checked",
                    data: 'data'
        $("#addItem").on('click', function() {


            febs.modal.open('选择视频资源', 'video/source/select/list', {
                area: $(window).width() <= 750 ? '90%' : '50%',
                offset: '30px',
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    var selectData = table.checkStatus('videoSourceSelectTable').data;

                    var noRepeatData = [];
                    // 需要去重
                    if (itemData.length != 0) {
                        for (var i = 0; i < selectData.length; i++) {
                            var flag = true;
                            for(var j = 0; j < itemData.length; j++) {
                                if (selectData[i].id == itemData[j].id) {
                                    flag = false;
                                    break;
                                }
                            }

                            if (flag) {
                                noRepeatData.push(selectData[i]);
                            }
                        }

                    } else {
                        itemData = selectData;
                    }
                    var data = itemData.concat(noRepeatData);

                    $itemList.empty();
                    laytpl(templateHtml).render(data, function(html) {
                        $itemList.append(html);
                    })

                    bindUpload();
                    layer.close(layer.index);
                },
                response: {
                    statusName: "code",
                    statusCode: 200,
                    dataName: "data"
                btn2: function () {
                    layer.close(layer.index);
                }
            });
            return _deptTree;
        }
        });

        formSelects.config('user-add-role', {
            searchUrl: ctx + 'role',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].roleName,
                        value: data[i].roleId
                    })
        var uploadInst = upload.render({
            elem: '#thumbUpload'
            ,url: 'common/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#thumb').attr('src', result);
                });
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != 200){
                    return layer.msg('上传失败');
                }
                result.data = tranData;
                return result;
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                febs.alert.error('获取角色列表失败');

                layer.msg('上传成功', {icon: 1});
            }
            ,error: function(){
                layer.msg('上传失败');
            }
        });

        form.on('submit(user-add-form-submit)', function (data) {
            var checked = _deptTree.getChecked(false, true);
            var deptIds = [];
            layui.each(checked, function (key, item) {
                deptIds.push(item.id)
        // 表格中的图片上传
        function bindUpload() {
            upload.render({
                elem: '.upload'
                ,url: ctx + 'common/upload' //改成您自己的上传接口
                // ,accept: 'file'
                ,before: function(obj){
                    var item = this.item;
                    var $button = $(item).find("button");
                    var $img = $(item).find('img');

                    // 如果img标签内没有src，说明没有上传图片，故此时显示的是button，所以需要操作一遍显示隐藏
                    if (!$img.attr("src")) {
                        $button.addClass("febs-hide");
                        $img.removeClass("febs-hide");
                    }

                    obj.preview(function(index, file, result){
                        $img.attr('src', result);
                    });

                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    var item = this.item;
                    var $itemThumb = $(item).find('input[name="itemThumb"]');
                    var $button = $(item).find("button");
                    var $img = $(item).find('img');

                    //如果上传失败
                    if(res.code !== 200){
                        layer.msg('上传失败');
                        // 上传失败则重置
                        $button.removeClass("febs-hide");
                        $img.addClass("febs-hide");
                        $img.attr('src', '');
                        return
                    }
                    $itemThumb.val(res.data[0]);
                    layer.msg('上传完毕', {icon: 1});
                }
                ,error: function(){
                    return layer.msg('上传失败');
                }
            });
            data.deptIds = deptIds.join(",");
            febs.post(ctx + 'user', data.field, function () {
                layer.closeAll();
                febs.alert.success('新增用户成功，初始密码为 1234qwer');
                $('#febs-user').find('#query').click();
            });
        }

        bindUpload();

        form.on('submit(video-add-form-submit)', function (data) {
            // febs.post(ctx + 'user', data.field, function () {
            //     layer.closeAll();
            //     febs.alert.success('新增用户成功，初始密码为 1234qwer');
            //     $('#febs-user').find('#query').click();
            // });
            return false;
        });
    });