+
-
-
+
最多可上传九张图片
+
+
+
-
+
-
-
+
最多可上传九张图片
@@ -106,64 +65,25 @@
+
+
-
+
-
-
+
最多可上传九张图片
+
+
+
-
+
-
-
+
最多可上传一个视频
@@ -197,16 +117,240 @@
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
- }).use(['index', 'form', 'laydate', 'laytpl'], function(){
+ }).use(['index', 'form', 'laydate', 'laytpl', 'upload'], function(){
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var wangEditor = window.wangEditor;
+ var upload = layui.upload;
var wangEditorObj = {};
var viewerObj = {};
var contentId = top.restAjax.params(window.location.href).contentId;
+ // 初始化视频上传
+ var videosArray = [];
+
+ function renderVideo() {
+ var $previewImgsFileBox = $('#videoFileBox');
+ var imgs = '';
+ $.each(videosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventVideo() {
+ upload.render({
+ elem: '#videoBtn',
+ url: top.restAjax.path('api/file/uploadvideo', []),
+ field: 'video',
+ accept: 'video',
+ acceptMime: 'video/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ videosArray.push(res.data);
+ renderVideo();
+ $('#video').val(videosArray.join(','));
+ if(videosArray.length >= 1) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-video-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'video') {
+ videosArray.splice(index, 1);
+ renderVideo();
+ $('#video').val(videosArray.join(','));
+ if(videosArray.length < 9) {
+ var $uploadLogoBtn = $('#videoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var photosArray = [];
+
+ function renderPhoto() {
+ var $previewImgsFileBox = $('#photoFileBox');
+ var imgs = '';
+ $.each(photosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEvent() {
+ upload.render({
+ elem: '#photoBtn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ photosArray.push(res.data);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ photosArray.splice(index, 1);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length < 9) {
+ var $uploadLogoBtn = $('#photoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var icon1Array = [];
+
+ function renderIcon1() {
+ var $previewImgsFileBox = $('#icon1FileBox');
+ var imgs = '';
+ $.each(icon1Array, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventIcon1() {
+ upload.render({
+ elem: '#icon1Btn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ icon1Array.push(res.data);
+ renderIcon1();
+ $('#icon1').val(icon1Array.join(','));
+ if(icon1Array.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-icon1-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ icon1Array.splice(index, 1);
+ renderIcon1();
+ $('#icon1').val(icon1Array.join(','));
+ if(icon1Array.length < 9) {
+ var $uploadLogoBtn = $('#icon1Btn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var icon2Array = [];
+
+ function renderIcon2() {
+ var $previewImgsFileBox = $('#icon2FileBox');
+ var imgs = '';
+ $.each(icon2Array, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventIcon2() {
+ upload.render({
+ elem: '#icon2Btn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ icon2Array.push(res.data);
+ renderIcon2();
+ $('#icon2').val(icon2Array.join(','));
+ if(icon2Array.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-icon2-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ icon2Array.splice(index, 1);
+ renderIcon2();
+ $('#icon2').val(icon2Array.join(','));
+ if(icon2Array.length < 9) {
+ var $uploadLogoBtn = $('#icon2Btn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
@@ -488,10 +632,10 @@
// 初始化内容
function initData() {
- initIcon1UploadFile();
- initIcon2UploadFile();
- initPhotoUploadFile();
- initVideoUploadFile();
+ initEvent();
+ initEventVideo();
+ initEventIcon1();
+ initEventIcon2();
initContentRichText();
}
initData();
diff --git a/src/main/resources/templates/content-sub/update.html b/src/main/resources/templates/content-sub/update.html
index 765ca2b..b930566 100644
--- a/src/main/resources/templates/content-sub/update.html
+++ b/src/main/resources/templates/content-sub/update.html
@@ -34,66 +34,25 @@
+
+
-
+
-
-
+
最多可上传九张图片
+
+
+
-
+
-
-
+
最多可上传九张图片
@@ -106,64 +65,25 @@
+
+
-
+
-
-
+
最多可上传九张图片
+
+
+
-
+
-
-
+
最多可上传一个视频
@@ -197,17 +117,242 @@
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
- }).use(['index', 'form', 'laydate', 'laytpl'], function(){
+ }).use(['index', 'form', 'laydate', 'laytpl', 'upload'], function(){
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
+ var upload = layui.upload;
var contentSubId = top.restAjax.params(window.location.href).contentSubId;
var wangEditor = window.wangEditor;
var wangEditorObj = {};
var viewerObj = {};
+ // 初始化视频上传
+ var videosArray = [];
+
+ function renderVideo() {
+ $('#video').val(videosArray.join(','));
+ var $previewImgsFileBox = $('#videoFileBox');
+ var imgs = '';
+ $.each(videosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventVideo() {
+ upload.render({
+ elem: '#videoBtn',
+ url: top.restAjax.path('api/file/uploadvideo', []),
+ field: 'video',
+ accept: 'video',
+ acceptMime: 'video/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ videosArray.push(res.data);
+ renderVideo();
+ $('#video').val(videosArray.join(','));
+ if(videosArray.length >= 1) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-video-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'video') {
+ videosArray.splice(index, 1);
+ renderVideo();
+ $('#video').val(videosArray.join(','));
+ if(videosArray.length < 9) {
+ var $uploadLogoBtn = $('#videoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var photosArray = [];
+
+ function renderPhoto() {
+ var $previewImgsFileBox = $('#photoFileBox');
+ var imgs = '';
+ $.each(photosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEvent() {
+ upload.render({
+ elem: '#photoBtn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ photosArray.push(res.data);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ photosArray.splice(index, 1);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length < 9) {
+ var $uploadLogoBtn = $('#photoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var icon1Array = [];
+
+ function renderIcon1() {
+ var $previewImgsFileBox = $('#icon1FileBox');
+ var imgs = '';
+ $.each(icon1Array, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventIcon1() {
+ upload.render({
+ elem: '#icon1Btn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ icon1Array.push(res.data);
+ renderIcon1();
+ $('#icon1').val(icon1Array.join(','));
+ if(icon1Array.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-icon1-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ icon1Array.splice(index, 1);
+ renderIcon1();
+ $('#icon1').val(icon1Array.join(','));
+ if(icon1Array.length < 9) {
+ var $uploadLogoBtn = $('#icon1Btn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var icon2Array = [];
+
+ function renderIcon2() {
+ var $previewImgsFileBox = $('#icon2FileBox');
+ var imgs = '';
+ $.each(icon2Array, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventIcon2() {
+ upload.render({
+ elem: '#icon2Btn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ icon2Array.push(res.data);
+ renderIcon2();
+ $('#icon2').val(icon2Array.join(','));
+ if(icon2Array.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-icon2-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ icon2Array.splice(index, 1);
+ renderIcon2();
+ $('#icon2').val(icon2Array.join(','));
+ if(icon2Array.length < 9) {
+ var $uploadLogoBtn = $('#icon2Btn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
@@ -492,17 +637,37 @@
function initData() {
var loadLayerIndex;
top.restAjax.get(top.restAjax.path('api/contentSub/get/{contentSubId}', [contentSubId]), {}, null, function(code, data) {
+ var videoValue = data.video;
+ delete data.video;
+
var dataFormData = {};
for(var i in data) {
dataFormData[i] = data[i] +'';
}
form.val('dataForm', dataFormData);
form.render(null, 'dataForm');
- initIcon1UploadFile();
- initIcon2UploadFile();
- initPhotoUploadFile();
- initVideoUploadFile();
initContentRichText(data['content']);
+
+ if (data.icon1) {
+ icon1Array = data.icon1.split(',');
+ renderIcon1();
+ }
+
+ if (data.icon2) {
+ icon2Array = data.icon2.split(',');
+ renderIcon2();
+ }
+
+ if (data.photo) {
+ photosArray = data.photo.split(',');
+ renderPhoto();
+ }
+
+ if (videoValue) {
+ videosArray = videoValue.split(',');
+ renderVideo();
+ }
+
}, function(code, data) {
top.dialog.msg(data.msg);
}, function() {
@@ -512,7 +677,11 @@
});
}
initData();
-
+ initEvent();
+ initEventVideo();
+ initEventIcon1();
+ initEventIcon2();
+
// 提交表单
form.on('submit(submitForm)', function(formData) {
top.dialog.confirm(top.dataMessage.commit, function(index) {
diff --git a/src/main/resources/templates/content/save.html b/src/main/resources/templates/content/save.html
index 6ac27e2..e4bdf22 100644
--- a/src/main/resources/templates/content/save.html
+++ b/src/main/resources/templates/content/save.html
@@ -68,34 +68,15 @@
+
+
-
+
-
-
+
最多可上传一个视频
+
+
+
+
-
-
+
最多可上传一个视频
`
@@ -198,7 +198,7 @@
videosArray.splice(index, 1);
renderVideo();
$('#video').val(videosArray.join(','));
- if(videosArray.length < 9) {
+ if(videosArray.length < 1) {
var $uploadLogoBtn = $('#videoBtn');
$uploadLogoBtn.removeAttr('disabled', 'disabled');
$uploadLogoBtn.removeClass('layui-disabled');
@@ -371,21 +371,6 @@
});
}
- // 初始化视频
- function initVideo(fileName, data) {
- for(var i = 0, item; item = data[i++];) {
- var player = new ckplayer({
- container: '#'+ fileName + i,
- variable: 'player',
- flashplayer: false,
- video: {
- file: 'route/file/download/true/'+ item.fileId,
- type: 'video/mp4'
- }
- });
- }
- }
-
// 初始化内容富文本
function initContentRichText(value) {
var editor = new wangEditor('#content');
@@ -410,51 +395,6 @@
wangEditorObj['content'] = editor;
}
- // 初始化视频视频上传
- function initVideoUploadFile() {
- var files = $('#video').val();
- initFileList('video', files, initVideo);
-
- form.on('button(videoUploadFile)', function(obj) {
- var name = this.dataset.name;
- var explain = this.dataset.explain;
- top.dialog.file({
- type: 'video',
- title: '上传'+ explain,
- width: '400px',
- height: '420px',
- maxFileCount: '1',
- onClose: function() {
- var uploadFileArray = top.dialog.dialogData.uploadFileArray;
- if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
- var files = $('#'+ name).val();
- for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
- if(files.length > 0) {
- files += ',';
- }
- files += file.data;
- }
- initFileList(name, files, initVideo);
- }
- }
- });
- });
-
- form.on('button(videoRemoveFile)', function(obj) {
- var name = this.dataset.name;
- var id = this.dataset.id;
- var files = $('#'+ name).val().replace(id, '');
- files = files.replace(/\,+/g, ',');
- if(files.charAt(0) == ',') {
- files = files.substring(1);
- }
- if(files.charAt(files.length - 1) == ',') {
- files = files.substring(0, files.length - 1);
- }
- initFileList(name, files, initVideo);
- });
- }
-
// 初始化新闻类型选择部门
function initNewsTypeSelectDepartment() {
$(document.body).on('click', '#newsTypeSelectDepartment', function() {
@@ -486,14 +426,21 @@
for(var i in data) {
dataFormData[i] = data[i] +'';
}
- coverPhotosArray = data.photo.split(',');
- renderCoverPhoto();
- photosArray = data.photo.split(',');
- renderPhoto();
+ if (data.coverPhoto) {
+ coverPhotosArray = data.coverPhoto.split(',');
+ renderCoverPhoto();
+ }
- videosArray = videoValue.split(',');
- renderVideo();
+ if (data.photo) {
+ photosArray = data.photo.split(',');
+ renderPhoto();
+ }
+
+ if (videoValue) {
+ videosArray = videoValue.split(',');
+ renderVideo();
+ }
form.val('dataForm', dataFormData);
form.render(null, 'dataForm');