<style>
|
#video-add {
|
padding: 20px 25px 25px 0;
|
}
|
#video-add .layui-treeSelect .ztree li a, .ztree li span {
|
margin: 0 0 2px 3px !important;
|
}
|
#video-add #data-permission-tree-block {
|
border: 1px solid #eee;
|
border-radius: 2px;
|
padding: 3px 0;
|
}
|
#video-add .layui-treeSelect .ztree li span.button.switch {
|
top: 1px;
|
left: 3px;
|
}
|
#video-add .upload {
|
cursor: pointer;
|
}
|
</style>
|
<div class="layui-fluid" id="video-add">
|
<form class="layui-form" action="" lay-filter="video-add-form">
|
<div class="layui-form-item">
|
<div class="layui-col-md6">
|
<label class="layui-form-label febs-form-item-require">视频标题：</label>
|
<div class="layui-input-block">
|
<input type="text" name="title" minlength="2" maxlength="10" lay-verify="range"
|
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">
|
<textarea name="intro" autocomplete="off" placeholder="请输入简介" class="layui-textarea"></textarea>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">缩略图：</label>
|
<div class="layui-input-block">
|
<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;"/>
|
<input class="layui-input febs-hide" name="thumb" autocomplete="off" />
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label febs-form-item-require">章节：</label>
|
<div class="layui-input-block">
|
<button class="layui-btn" type="button" id="addItem">新增章节</button>
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label"></label>
|
<div class="layui-input-block">
|
<table class="layui-table">
|
<thead>
|
<tr>
|
<th>章节标题</th>
|
<th>缩略图</th>
|
<th>资源名称</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="itemList">
|
</tbody>
|
</table>
|
</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="isFree" value="1" title="免费" checked>
|
<input type="radio" name="isFree" value="2" title="会员">
|
</div>
|
</div>
|
|
<div class="layui-form-item layui-form-text">
|
<label class="layui-form-label">备注：</label>
|
<div class="layui-input-block">
|
<textarea name="description" maxlength="100" class="layui-textarea"></textarea>
|
</div>
|
</div>
|
<div class="layui-form-item febs-hide">
|
<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 type="text/html" id="tableRowTemplate">
|
{{# layui.each(d, function(index, item){ }}
|
<tr>
|
<th>
|
<input type="text" class="febs-hide" name="sourceId" value="{{item.id}}"/>
|
<input type="text" class="layui-input" name="name" placeholder="" value=""/>
|
</th>
|
<th>
|
<div class="upload{{item.id}}">
|
{{# 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" autocomplete="off" name="itemThumb" />
|
{{# } else { }}
|
<img class="layui-upload-img item-img" src="{{item.thumb}}" style="width: 150px;"/>
|
<button class="layui-btn layui-btn-xs febs-hide" type="button">点击上传</button>
|
<input type="text" class="febs-hide" autocomplete="off" name="itemThumb" />
|
{{# } }}
|
</div>
|
</th>
|
<th>{{item.name}}</th>
|
<th>
|
<button class="layui-btn layui-btn-xs layui-btn-danger item-delete" type="button">删除</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,
|
form = layui.form,
|
table = layui.table,
|
$view = $('#video-add'),
|
upload = layui.upload,
|
validate = layui.validate,
|
laytpl = layui.laytpl,
|
tableUpload,
|
templateHtml = tableRowTemplate.innerHTML,
|
$itemList = $("#itemList");
|
|
form.verify(validate);
|
form.render();
|
|
// 已添加的item数据
|
var itemData = [];
|
var videoCate = xmSelect.render({
|
el: '#video-cate',
|
language: 'zn',
|
prop : {
|
value : 'id'
|
},
|
data: []
|
})
|
|
febs.get(ctx + 'video/categoryTree', null, function(res) {
|
videoCate.update({
|
data : res.data,
|
autoRow: true,
|
});
|
})
|
|
$("#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 {
|
noRepeatData = selectData;
|
}
|
|
if (noRepeatData.length > 0) {
|
itemData = itemData.concat(noRepeatData);
|
laytpl(templateHtml).render(noRepeatData, function(html) {
|
$itemList.append(html);
|
})
|
|
for (var i = 0; i < noRepeatData.length; i++) {
|
bindUpload(noRepeatData[i].id);
|
}
|
}
|
``
|
deleteUnBind();
|
deleteBind();
|
layer.close(layer.index);
|
},
|
btn2: function () {
|
layer.close(layer.index);
|
}
|
});
|
});
|
|
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('上传失败');
|
}
|
|
$('#thumb').next().val(res.data[0])
|
layer.msg('上传成功', {icon: 1});
|
}
|
,error: function(){
|
layer.msg('上传失败');
|
}
|
});
|
|
// 表格中的图片上传
|
function bindUpload(id) {
|
upload.render({
|
elem: '.upload' + id
|
,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('上传失败');
|
}
|
});
|
}
|
|
form.on('submit(video-add-form-submit)', function (data) {
|
var $tr = $("#itemList").find("tr");
|
var itemLength = $tr.length;
|
if (itemLength == 0) {
|
layer.msg('请添加章节！');
|
return;
|
}
|
|
var cateIds = videoCate.getValue('value');
|
if (cateIds.length <= 0) {
|
febs.alert.warn('至少选择一个目录');
|
return false;
|
}
|
|
var itemData = [];
|
$tr.each(function() {
|
var data = {};
|
var sourceId = $(this).find("input[name = 'sourceId']").val();
|
var videoItemName = $(this).find("input[name = 'name']").val();
|
var itemThumb = $(this).find("input[name = 'itemThumb']").val();
|
|
data.sourceId = sourceId;
|
data.name = videoItemName;
|
data.thumb = itemThumb;
|
itemData.push(data);
|
});
|
|
if (!data.field.thumb) {
|
febs.alert.warn('未上传缩略图');
|
return;
|
}
|
|
var field = {};
|
field.items = itemData;
|
field.title = data.field.title;
|
field.cateIds = cateIds.join(",");
|
field.thumb = data.field.thumb;
|
field.isFree = data.field.isFree;
|
field.intro = data.field.intro;
|
console.log(field);
|
|
$.ajax({
|
url : ctx + 'video/video/add',
|
type : "post",
|
dataType : "json",
|
contentType : "application/json",
|
data : JSON.stringify(field),
|
success : function(res) {
|
console.log(res)
|
if (res.code != 200) {
|
febs.alert.warn(res.message);
|
return;
|
}
|
febs.alert.success('新增成功');
|
$('#febs-video').find('#query').click();
|
layer.closeAll();
|
},
|
error : function(err) {
|
layer.msg("请求错误");
|
}
|
})
|
return false;
|
});
|
|
function deleteBind() {
|
$(".item-delete").each(function(index, element) {
|
$(this).on("click", function() {
|
var $tr = $(this).parents("tr");
|
var id = $tr.find("input[name='sourceId']").val();
|
for (var i = 0; i < itemData.length; i++) {
|
if (itemData[i].id == id) {
|
itemData.splice(i, 1);
|
break;
|
}
|
}
|
|
$tr.remove();
|
});
|
})
|
}
|
|
function deleteUnBind() {
|
$(".item-delete").each(function(index, element) {
|
$(this).unbind('click');
|
})
|
}
|
});
|
</script>
|
