diff --git a/common/src/main/resources/static/assets/js/layui-util.js b/common/src/main/resources/static/assets/js/layui-util.js new file mode 100644 index 00000000..7693e02b --- /dev/null +++ b/common/src/main/resources/static/assets/js/layui-util.js @@ -0,0 +1,507 @@ +function LayuiUtil(layui, viewer) { + var $ = layui.$; + var layer = layui.layer; + var upload = layui.upload; + var laydate = layui.laydate; + var form = layui.form; + var Viewer = viewer; + var restAjax = layui.restajax; + var viewerObj = {}; + + /** + * 上传图片 + * @param opt + */ + this.initUploadImage = function (opt) { + var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 9 + maxCount = opt.maxCount < 0 ? 9 : opt.maxCount; + var fieldName = opt.fieldName; + var isShow = opt.isShow; + var defaultAllowExts = ['jpg', 'png', 'gif', 'bmp', 'jpeg']; + var allowExts = opt.allowExts; + allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|'); + + var defaultAcceptMime = ['image/*']; + var acceptMime = opt.acceptMime; + acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(','); + + var id = '#' + fieldName; + var fileBoxId = id + 'FileBox'; + var uploadBtnId = id + 'UploadBtn'; + var deleteBtnClass = '.delete-' + fieldName + '-btn'; + + function init(callback) { + var fileIds = $(id).val(); + var fileIdArray = fileIds ? fileIds.split(',') : []; + + var html = ''; + for (var i = 0, fileId; fileId = fileIdArray[i++];) { + html += [ + '
', + ' ', + ' ', + ' ', + ' ', + '
', + ].join(''); + } + + $(fileBoxId).empty(); + $(fileBoxId).append(html); + + if (fileIdArray.length < maxCount) { + $(uploadBtnId).removeClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', false); + } else { + $(uploadBtnId).addClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', true); + } + + callback ? callback() : ''; + } + + function addClick() { + var layerLoadingIndex; + upload.render({ + elem: uploadBtnId, + url: 'api/file/v2/upload-image', + accept: 'images', + acceptMime: acceptMime, + field: 'image', + exts: allowExts, + name: fieldName, + before: function (obj) { + layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3}) + }, + done: function (res, index, upload) { + layer.close(layerLoadingIndex); + var name = this.name; + var files = $('#' + this.name).val(); + if (files.length > 0) { + files += ','; + } + files += res.data.fileId; + $('#' + name).val(files); + init(function () { + viewerObj[name].update(); + }); + }, + error: function (index, upload) { + layer.close(layerLoadingIndex); + layer.msg('文件上传失败'); + }, + progress: function (n, elem, res, index) { + } + }); + $(document).on('click', deleteBtnClass, function () { + 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); + } + $('#' + name).val(files); + init(function () { + viewerObj[name].update(); + }); + }); + } + + init(function () { + viewerObj[fieldName] = new Viewer(document.getElementById(fieldName + 'FileBox'), {navbar: false}); + }); + + if (!isShow) { + addClick(); + } else { + $(uploadBtnId).hide(); + } + } + + /** + * 上传文件 + * @param opt + */ + this.initUploadFile = function (opt) { + var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 3 + maxCount = opt.maxCount < 0 ? 3 : opt.maxCount; + var fieldName = opt.fieldName; + var isShow = opt.isShow; + var allowExts = opt.allowExts; + var defaultAllowExts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip']; + allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|'); + var defaultAcceptMime = [ + 'application/pdf', + 'application/msword', + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', + 'application/vnd.ms-excel', + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', + 'application/vnd.ms-powerpoint', + 'application/vnd.openxmlformats-officedocument.presentationml.presentation', + 'application/vnd.ms-works', + 'text/plain', + 'application/x-rar', + 'application/x-zip-compressed' + ]; + var acceptMime = opt.acceptMime; + acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(','); + + var id = '#' + fieldName; + var fileBoxId = id + 'FileBox'; + var uploadBtnId = id + 'UploadBtn'; + var deleteBtnClass = '.delete-' + fieldName + '-btn'; + + function init() { + var files = $(id).val(); + var fileArray = files ? files.split(',') : []; + + var html = ''; + if (fileArray.length > 0) { + html += [ + '
', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ].join(''); + for (var i = 0, file; file = fileArray[i++];) { + var idNameArray = file.split(':'); + var fileId = idNameArray[0]; + var fileName = idNameArray[1]; + html += [ + '', + ' ', + ' ', + '', + ].join(''); + } + html += [ + ' ', + '
文件名操作
' + fileName + '', + ' ', + '
', + '
' + ].join(''); + } + + $(fileBoxId).empty(); + $(fileBoxId).append(html); + + if (fileArray.length < maxCount) { + $(uploadBtnId).removeClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', false); + } else { + $(uploadBtnId).addClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', true); + } + } + + function addClick() { + var layerLoadingIndex; + var url = 'api/file/v2/upload-file'; + if (isApp) { + url = 'app/file/v2/upload-file' + } + if (isAppRelease) { + url = 'app/file/v2/upload-file-release' + } + upload.render({ + elem: uploadBtnId, + url: url, + accept: 'file', + acceptMime: acceptMime, + field: 'file', + exts: allowExts, + name: fieldName, + before: function (obj) { + layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3}) + }, + done: function (res, index, upload) { + layer.close(layerLoadingIndex); + var name = this.name; + var files = $('#' + this.name).val(); + if (files.length > 0) { + files += ','; + } + files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, ','); + $('#' + name).val(files); + init(); + }, + error: function (index, upload) { + layer.close(layerLoadingIndex); + layer.msg('文件上传失败'); + }, + progress: function (n, elem, res, index) { + } + }); + $(document).on('click', deleteBtnClass, function () { + var id = this.dataset.id; + var name = this.dataset.name; + var fieldName = this.dataset.fieldName; + var files = $('#' + fieldName).val().replace(id + ':' + name, ''); + 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); + } + $('#' + fieldName).val(files); + init(); + }); + } + + init(); + if (!isShow) { + addClick(); + } else { + $(uploadBtnId).hide(); + } + + } + + /** + * 初始化视频上传 + * @param opt + */ + this.initUploadVideo = function (opt) { + var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1 + maxCount = opt.maxCount < 0 ? 1 : opt.maxCount; + var fieldName = opt.fieldName; + var isShow = opt.isShow; + + var defaultAllowExts = ['mp4']; + var allowExts = opt.allowExts; + allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|'); + + var defaultAcceptMime = ['video/mp4']; + var acceptMime = opt.acceptMime; + acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(','); + + var id = '#' + fieldName; + var fileBoxId = id + 'FileBox'; + var uploadBtnId = id + 'UploadBtn'; + var deleteBtnClass = '.delete-' + fieldName + '-btn'; + + function init() { + var files = $(id).val(); + var fileArray = files ? files.split(',') : []; + var html = ''; + for (var i = 0, file; file = fileArray[i++];) { + var idNameArray = file.split(':'); + var fileId = idNameArray[0]; + var fileName = idNameArray[1]; + html += [ + '
', + ' ', + ' ', + ' ', + ' ', + '
', + ].join(''); + } + + $(fileBoxId).empty(); + $(fileBoxId).append(html); + + if (fileArray.length < maxCount) { + $(uploadBtnId).removeClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', false); + } else { + $(uploadBtnId).addClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', true); + } + } + + function addClick() { + var layerLoadingIndex; + upload.render({ + elem: uploadBtnId, + url: 'api/file/v2/upload-video', + accept: 'video', + acceptMime: acceptMime, + exts: allowExts, + field: 'video', + name: fieldName, + before: function (obj) { + layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3}) + }, + done: function (res, index, upload) { + layer.close(layerLoadingIndex); + var name = this.name; + var files = $('#' + this.name).val(); + if (files.length > 0) { + files += ','; + } + files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, ','); + $('#' + name).val(files); + init(); + }, + error: function (index, upload) { + layer.close(layerLoadingIndex); + layer.msg('文件上传失败'); + }, + progress: function (n, elem, res, index) { + } + }); + $(document).on('click', deleteBtnClass, function () { + var name = this.dataset.name; + var id = this.dataset.id; + var fieldName = this.dataset.fieldName; + var files = $('#' + fieldName).val().replace(id + ':' + name, ''); + 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); + } + $('#' + fieldName).val(files); + init(); + }); + } + + init(); + + if (!isShow) { + addClick(); + } else { + $(uploadBtnId).hide(); + } + } + + /** + * 上传音频 + */ + this.initUploadAudio = function (opt) { + var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1 + maxCount = opt.maxCount < 0 ? 1 : opt.maxCount; + var fieldName = opt.fieldName; + var isShow = opt.isShow; + + var defaultAllowExts = ['wav', 'mp3']; + var allowExts = opt.allowExts; + allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\\|') : defaultAllowExts.join('\\|'); + + var defaultAcceptMime = ['audio/wav', 'audio/mp3']; + var acceptMime = opt.acceptMime; + acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(','); + + var id = '#' + fieldName; + var fileBoxId = id + 'FileBox'; + var uploadBtnId = id + 'UploadBtn'; + var deleteBtnClass = '.delete-' + fieldName + '-btn'; + + function init() { + var files = $(id).val(); + var fileArray = files ? files.split(',') : []; + var html = ''; + for (var i = 0, file; file = fileArray[i++];) { + var idNameArray = file.split(':'); + var fileId = idNameArray[0]; + var fileName = idNameArray[1]; + html += [ + '
', + ' ', + ' ', + ' ', + ' ', + '
', + ].join(''); + } + + $(fileBoxId).empty(); + $(fileBoxId).append(html); + + if (fileArray.length < maxCount) { + $(uploadBtnId).removeClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', false); + } else { + $(uploadBtnId).addClass('layui-btn-disabled'); + $(uploadBtnId).attr('disabled', true); + } + } + + function addClick() { + var layerLoadingIndex; + var url = 'api/file/v2/upload-audio'; + if (isApp) { + url = 'app/file/v2/upload-audio' + } + if (isAppRelease) { + url = 'app/file/v2/upload-audio-release' + } + upload.render({ + elem: uploadBtnId, + url: url, + accept: 'audio', + acceptMime: acceptMime, + exts: allowExts, + field: 'audio', + name: fieldName, + headers: headers, + before: function (obj) { + layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3}) + }, + done: function (res, index, upload) { + layer.close(layerLoadingIndex); + var name = this.name; + var files = $('#' + this.name).val(); + if (files.length > 0) { + files += ','; + } + files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, ','); + $('#' + name).val(files); + init(); + }, + error: function (index, upload) { + layer.close(layerLoadingIndex); + layer.msg('文件上传失败'); + }, + progress: function (n, elem, res, index) { + } + }); + $(document).on('click', deleteBtnClass, function () { + var name = this.dataset.name; + var id = this.dataset.id; + var fieldName = this.dataset.fieldName; + var files = $('#' + fieldName).val().replace(id + ':' + name, ''); + 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); + } + $('#' + fieldName).val(files); + init(); + }); + } + + init(); + + if (!isShow) { + addClick(); + } else { + $(uploadBtnId).hide(); + } + } + +} \ No newline at end of file diff --git a/module-form/src/main/resources/static/form/js/form-util.js b/module-form/src/main/resources/static/form/js/form-util.js index 55680f77..fed0216f 100644 --- a/module-form/src/main/resources/static/form/js/form-util.js +++ b/module-form/src/main/resources/static/form/js/form-util.js @@ -294,7 +294,7 @@ function FormUtil(layui, viewer) { 'text/plain', 'application/x-rar', 'application/x-zip-compressed' - ].join(''), + ].join(','), field: 'file', exts: 'pdf|doc|docx|xls|xlsx|ppt|pptx|wps|txt|rar|zip', name: fieldName,