From efcf1b2c8012060e03836f7b6bdf343023f462d0 Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Thu, 16 Dec 2021 16:06:29 +0800
Subject: [PATCH] Merge branch 'master' of http://120.27.238.55:7000/r/xc-video
---
src/main/resources/templates/febs/views/video/video/video-update.html | 413 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 413 insertions(+), 0 deletions(-)
diff --git a/src/main/resources/templates/febs/views/video/video/video-update.html b/src/main/resources/templates/febs/views/video/video/video-update.html
new file mode 100644
index 0000000..393134e
--- /dev/null
+++ b/src/main/resources/templates/febs/views/video/video/video-update.html
@@ -0,0 +1,413 @@
+<style>
+ #video-update {
+ padding: 20px 25px 25px 0;
+ }
+ #video-update .layui-treeSelect .ztree li a, .ztree li span {
+ margin: 0 0 2px 3px !important;
+ }
+ #video-update #data-permission-tree-block {
+ border: 1px solid #eee;
+ border-radius: 2px;
+ padding: 3px 0;
+ }
+ #video-update .layui-treeSelect .ztree li span.button.switch {
+ top: 1px;
+ left: 3px;
+ }
+ #video-update .upload {
+ cursor: pointer;
+ }
+</style>
+<div class="layui-fluid" id="video-update">
+ <form class="layui-form" action="" lay-filter="video-update-form">
+ <input class="layui-input febs-hide" name="id" data-th-value="${video.id}" />
+ <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" th:src="${video.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="免费">
+ <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-update-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="itemId" value="{{item.id}}"/>
+ <input type="text" class="febs-hide" name="sourceId" value="{{item.sourceId}}"/>
+ <input type="text" class="layui-input" name="name" value="{{item.name}}"/>
+ </th>
+ <th>
+ <div class="upload{{item.sourceId}}">
+ {{# 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" value="{{item.thumb}}" />
+ {{# } 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" value="{{item.thumb}}" />
+ {{# } }}
+ </div>
+ </th>
+ <th>{{item.sourceName}}</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-update'),
+ upload = layui.upload,
+ validate = layui.validate,
+ laytpl = layui.laytpl,
+ tableUpload,
+ video = [[${video}]],
+ 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,
+ });
+
+ initValue();
+ });
+
+ function initValue() {
+ form.val("video-update-form", {
+ "title" : video.title,
+ "intro" : video.intro,
+ "isFree" : video.isFree + "",
+ "thumb" : video.thumb
+ })
+
+ videoCate.setValue(video.cateIds.split(','));
+
+ var items = video.items;
+ laytpl(templateHtml).render(items, function(html) {
+ $itemList.append(html);
+ });
+
+ for (var i = 0; i < items.length; i++) {
+ bindUpload(items[i].sourceId);
+ var item = {};
+ item.id = items[i].sourceId;
+ itemData.push(item);
+ }
+
+ deleteBind();
+ }
+
+ $("#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);
+ // 转化字段
+ for (var i = 0; i < noRepeatData.length; i++) {
+ noRepeatData[i].sourceId = noRepeatData[i].id;
+ noRepeatData[i].sourceName = noRepeatData[i].name;
+ noRepeatData[i].name = "";
+ noRepeatData[i].id = "";
+ }
+
+ laytpl(templateHtml).render(noRepeatData, function(html) {
+ $itemList.append(html);
+ })
+
+ for (var i = 0; i < noRepeatData.length; i++) {
+ bindUpload(noRepeatData[i].sourceId);
+ }
+ }
+``
+ 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-update-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 itemId = $(this).find("input[name = 'itemId']").val();
+ var videoItemName = $(this).find("input[name = 'name']").val();
+ var itemThumb = $(this).find("input[name = 'itemThumb']").val();
+
+ data.sourceId = sourceId;
+ data.id = itemId;
+ data.name = videoItemName;
+ data.thumb = itemThumb;
+ itemData.push(data);
+ });
+
+ if (!data.field.thumb) {
+ febs.alert.warn('未上传缩略图');
+ return;
+ }
+
+ var field = {};
+ field.items = itemData;
+ field.id = data.field.id;
+ field.title = data.field.title;
+ field.cateIds = cateIds.join(",");
+ field.thumb = data.field.thumb;
+ field.isFree = data.field.isFree;
+ field.intro = data.field.intro;
+
+ $.ajax({
+ url : ctx + 'video/video/update',
+ 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>
\ No newline at end of file
--
Gitblit v1.9.1