wg-basic/common/src/main/resources/static/assets/js/layui-util.js
2022-06-04 23:14:31 +08:00

643 lines
24 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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++];) {
// 删除按钮
var deleteBtn = '';
if(!isShow) {
deleteBtn = [
'<a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fieldName + '">',
' <i class="fa fa-trash-o"></i>',
'</a>'
].join('');
}
html += [
'<div class="form-upload-image">',
' <img src="route/file/download/true/' + fileId + '" align="加载失败">',
deleteBtn,
'</div>',
].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 += [
'<div class="form-upload-file">',
' <table class="layui-table" lay-size="sm">',
' <colgroup>',
' <col>',
' <col width="60">',
' </colgroup>',
' <thead>',
' <tr>',
' <th>文件名</th>',
' <th class="operation">操作</th>',
' </tr>',
' </thead>',
' <tbody>',
].join('');
for (var i = 0, file; file = fileArray[i++];) {
var idNameArray = file.split(':');
var fileId = idNameArray[0];
var fileName = idNameArray[1];
html += [
'<tr>',
' <td><a href="route/file/download/false/' + fileId + '" target="_blank">' + fileName + '</a></td>',
' <td class="operation">',
' <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">删除</button>',
' </td>',
'</tr>',
].join('');
}
html += [
' </tbody>',
' </table>',
'</div>'
].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 += [
'<div class="form-upload-video">',
' <video width="320" height="240" controls>',
' <source src="route/file/download/true/' + fileId + '" type="video/mp4">',
' 您的浏览器不支持 video 标签',
' </video>',
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
' <i class="fa fa-trash-o"></i>',
' </a>',
'</div>',
].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 += [
'<div class="form-upload-video">',
' <audio src="route/file/download/true/' + fileId + '" controls>',
' 您的浏览器不支持 audio 标签。',
' </audio>',
' <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
' <i class="fa fa-trash-o"></i>',
' </a>',
'</div>',
].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();
}
}
/**
* 下拉选择
*/
this.select = function (opt) {
var self = this;
var url = opt.url;
var domId = opt.domId;
var name = opt.name;
var valueKey = opt.valueKey;
var nameKey = opt.nameKey;
var dataForm = opt.dataForm;
var selectedValue = opt.selectedValue;
var onInit = opt.onInit;
var onSelect = opt.onSelect;
$('#'+ domId).empty();
$('#'+ domId).append('<select id="' + name + '" name="' + name + '" lay-filter="' + name + 'Filter"></select>');
/**
* 初始化选项
*/
function initOption() {
$('#' + name).empty();
// if (selectedValue === '') {
// // 监听初始化
// onInit ? onInit(selectedValue) : null;
// form.render(null, dataForm);
// return;
// }
top.restAjax.get(url, {}, null, function (code, data) {
var options = '<option value="">请选择</option>';
for (var i = 0, item; item = data[i++];) {
options += '<option value="' + item[valueKey] + '" ' + ((selectedValue && selectedValue == item[valueKey]) ? 'selected' : '') + '>' + item[nameKey] + '</option>'
}
$('#' + name).append(options)
form.render(null, dataForm);
// 监听初始化
onInit ? onInit(selectedValue) : null;
}, function (code, data) {
top.dialog.msg(data.msg);
});
}
/**
* 初始化选择
*/
function initSelectEvent() {
form.on('select(' + name + 'Filter)', function (data) {
var option = self.selectedOption('#' + name, data.value);
onSelect ? onSelect(data, option) : null;
// 联动
if (data.value) {
onInit ? onInit(data.value) : null;
}
});
}
initOption();
initSelectEvent();
}
/**
* 下拉数据字典
* @param opt
*/
this.selectData = function(opt) {
this.select({
url: top.restAjax.path('api/data/listbyparentid/{parentId}', [opt.parentId]),
domId: opt.domId,
name: opt.name,
dataForm: opt.dataForm,
valueKey: 'dataId',
nameKey: 'dataName',
selectedValue: opt.selectedValue,
onInit: opt.onInit,
onSelect: opt.onSelect
})
}
/**
* 获取选择的option
*
* @param selectId 下拉框ID
* @param selectedValue 选择的值
* @return {DOMStringMap|null}
*/
this.selectedOption = function (selectId, selectedValue) {
var options = $(selectId).children();
for (var i = 0, option; option = options[i++];) {
if (selectedValue === option.value) {
return option;
}
}
return null;
}
/**
* 禁用表单全部字段
*/
this.disableFormAllFields = function () {
var doms = $('form').find('input,button,textarea,select');
doms.attr('disabled', 'disabled');
doms.attr('lay-verify', '');
}
/**
* 禁用字段转div
*/
this.disabledField2Div = function() {
var doms = $('form').find('input,textarea,select');
$.each(doms, function(index, item) {
if(!item.disabled) {
return;
}
var value = item.value;
var parent = $(item).parent();
parent.empty();
if(item.nodeName === 'INPUT' || item.nodeName === 'SELECT') {
parent.append('<div style="line-height: 36px;">'+ value +'</div>')
} else if(item.nodeName === 'TEXTAREA') {
parent.append('<div style="line-height: 36px; text-align: left;">'+ value +'</div>')
}
});
}
}