From c68e17d384d4ebbf2d3a6c219a3c6de7ebb70d7a Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Wed, 15 Dec 2021 19:42:27 +0800
Subject: [PATCH] add video-add no complete
---
src/main/resources/templates/febs/views/video/video/video-add.html | 374 +++++++++++++++++++++++++++++++++++++---------------
1 files changed, 263 insertions(+), 111 deletions(-)
diff --git a/src/main/resources/templates/febs/views/video/video/video-add.html b/src/main/resources/templates/febs/views/video/video/video-add.html
index da6eb48..573dae2 100644
--- a/src/main/resources/templates/febs/views/video/video/video-add.html
+++ b/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;
});
});
--
Gitblit v1.9.1