487 lines
19 KiB
JavaScript
487 lines
19 KiB
JavaScript
|
let insUp;
|
|||
|
|
let CurrentTools = {
|
|||
|
|
getInsUp: function () {
|
|||
|
|
return insUp;
|
|||
|
|
},
|
|||
|
|
setInsUp: function (ins) {
|
|||
|
|
insUp = ins;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
layui.use(['jquery', 'laytpl', 'table', 'miniTab', 'upload', 'layer'], function () {
|
|||
|
|
let $ = layui.jquery,
|
|||
|
|
table = layui.table,
|
|||
|
|
layer = layui.layer,
|
|||
|
|
upload = layui.upload,
|
|||
|
|
miniTab = layui.miniTab;
|
|||
|
|
|
|||
|
|
miniTab.listen();
|
|||
|
|
|
|||
|
|
/**** index begin ***/
|
|||
|
|
//index页面
|
|||
|
|
if ($('.location-index-page').length > 0) {
|
|||
|
|
// 渲染表格
|
|||
|
|
let listUrl = $('#table-container').data('url');
|
|||
|
|
let insTb = table.render({
|
|||
|
|
elem: '#table-container',
|
|||
|
|
toolbar: '#toolbar-tpl',
|
|||
|
|
defaultToolbar: [],
|
|||
|
|
url: listUrl,
|
|||
|
|
skin: 'line',
|
|||
|
|
method: 'post',
|
|||
|
|
request: {
|
|||
|
|
pageName: 'page',
|
|||
|
|
limitName: 'size',
|
|||
|
|
},
|
|||
|
|
parseData: function (res) {
|
|||
|
|
return {
|
|||
|
|
"code": res.code, //解析接口状态
|
|||
|
|
"msg": res.msg, //解析提示文本
|
|||
|
|
"count": res.data.total, //解析数据长度
|
|||
|
|
"path": res.data.path, //解析路径
|
|||
|
|
"data": res.data.list //解析数据列表
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
cols: [[
|
|||
|
|
{type: 'checkbox'},
|
|||
|
|
{templet: '#row-type', width: 100, title: '类型'},
|
|||
|
|
{templet: '#row-src', minWidth:150, title: '轮播图', style: 'height: 60px;'},
|
|||
|
|
{field: 'name', minWidth: 250, title: '名称', edit: 'text'},
|
|||
|
|
{templet: '#row-size', width: 150, title: '大小'},
|
|||
|
|
{templet: '#row-operate', minWidth: 200, fixed: 'right', align: 'center', title: '操作'}
|
|||
|
|
]],
|
|||
|
|
done: function (res) {
|
|||
|
|
layer.closeAll('loading');
|
|||
|
|
Tools.setInsTb(insTb);
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
$('.dir-path').html(res.path);
|
|||
|
|
|
|||
|
|
let folder = $('.add-folder');
|
|||
|
|
let href = folder.data('href') + '?path=' + res.path;
|
|||
|
|
folder.data('href', href);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
initUpload();
|
|||
|
|
|
|||
|
|
//监听行工具条
|
|||
|
|
table.on('tool(table-container-image)', function (obj) {
|
|||
|
|
let data = obj.data;
|
|||
|
|
let layEvent = obj.event;
|
|||
|
|
let that = $($(this).context);
|
|||
|
|
let url = $($(this).context).data('href');
|
|||
|
|
let title = $($(this).context).data('title');
|
|||
|
|
switch (layEvent) {
|
|||
|
|
// 行 进入目录
|
|||
|
|
case 'enter':
|
|||
|
|
$('#upload-path').val(data.path + data.name);//目录变更时 一定要更新此数据
|
|||
|
|
CurrentTools.getInsUp().reload({
|
|||
|
|
data: {path: $('#upload-path').val()}
|
|||
|
|
});
|
|||
|
|
//执行重载
|
|||
|
|
table.reload('table-container', {
|
|||
|
|
where: {
|
|||
|
|
path: data.path + data.name
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
// 行 打开文件
|
|||
|
|
case 'show':
|
|||
|
|
let content = data.src;
|
|||
|
|
let oss = $('#oss-url').data('url');
|
|||
|
|
content = data.is_oss ? oss + content : content;
|
|||
|
|
// console.log(content);
|
|||
|
|
if (data.type === 'video' || data.type === 'image') {
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title: false,
|
|||
|
|
area: ['50%', '50%'],
|
|||
|
|
shade: 0.8,
|
|||
|
|
closeBtn: 0,
|
|||
|
|
shadeClose: true,
|
|||
|
|
content: [content]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
// 行 统计文件夹大小
|
|||
|
|
case 'count':
|
|||
|
|
//执行重载
|
|||
|
|
let idx = layer.load(2)
|
|||
|
|
let type = $($(this).context).data('type');
|
|||
|
|
|
|||
|
|
$.post(url, {path: data.path + data.name, type: type.split(',')}, function (res) {
|
|||
|
|
layer.close(idx)
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
that.parent().html(res.data)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return false;
|
|||
|
|
// 行 选择
|
|||
|
|
case 'select':
|
|||
|
|
selectOne(data);
|
|||
|
|
return false;
|
|||
|
|
//其他 默认为打开弹出层
|
|||
|
|
default:
|
|||
|
|
openLayer(url, title);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听工具条 注意区别toolbar和tool toolbar是表头上的工具条 tool是行中的工具条
|
|||
|
|
table.on('toolbar(table-container-image)', function (obj) {
|
|||
|
|
let layEvent = obj.event;
|
|||
|
|
let insTb = Tools.getInsTb();
|
|||
|
|
let url = $($(this).context).data('href')
|
|||
|
|
let title = $($(this).context).data('title')
|
|||
|
|
let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
|
|||
|
|
let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';
|
|||
|
|
|
|||
|
|
switch (layEvent) {
|
|||
|
|
// toolbar 删除
|
|||
|
|
case 'del':
|
|||
|
|
let checkStatus = table.checkStatus('table-container');
|
|||
|
|
if (checkStatus.data.length <= 0) {
|
|||
|
|
layer.msg('请先选择数据');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
let selected = checkStatus.data;
|
|||
|
|
let ids = [];
|
|||
|
|
|
|||
|
|
$.each(selected, function (index, val) {
|
|||
|
|
ids.push(val.id);
|
|||
|
|
})
|
|||
|
|
delRow(url, ids, insTb);
|
|||
|
|
return false;
|
|||
|
|
// toolbar 刷新
|
|||
|
|
case 'refresh':
|
|||
|
|
refreshTab(insTb);
|
|||
|
|
return false;
|
|||
|
|
// toolbar 上传
|
|||
|
|
case 'upload':
|
|||
|
|
$('#upload-btn-div').trigger('click');
|
|||
|
|
return false;
|
|||
|
|
// toolbar 搜索
|
|||
|
|
case 'search':
|
|||
|
|
let search = $('.table-search-fieldset');
|
|||
|
|
if (search.hasClass('div-show')) {
|
|||
|
|
search.css('display', 'none').removeClass('div-show');
|
|||
|
|
} else {
|
|||
|
|
search.css('display', 'block').addClass('div-show');
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
case 'multiple':
|
|||
|
|
batchSelect();
|
|||
|
|
return false;
|
|||
|
|
// 其他 默认为打开弹出层
|
|||
|
|
default:
|
|||
|
|
openLayer(url, title, width, height);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 返回上级
|
|||
|
|
$('.back-to-previous').on('click', function () {
|
|||
|
|
let path = $('.dir-path').text();
|
|||
|
|
path = path.replace(/(^\/)|(\/$)/g, '');//去除首尾/
|
|||
|
|
let arr = path.split('/');
|
|||
|
|
if (arr.length > 1) {
|
|||
|
|
arr.pop();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
path = '/' + arr.join('/') + '/';
|
|||
|
|
$('#upload-path').val(path);//目录变更时 一定要更新此数据
|
|||
|
|
table.reload('table-container', {
|
|||
|
|
where: {
|
|||
|
|
path: path
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/*** index end ***/
|
|||
|
|
|
|||
|
|
//file页面
|
|||
|
|
if ($('.location-file-page').length > 0) {
|
|||
|
|
// 渲染表格
|
|||
|
|
let listUrl = $('#table-container').data('url');
|
|||
|
|
let insTb = table.render({
|
|||
|
|
elem: '#table-container',
|
|||
|
|
toolbar: '#toolbar-tpl',
|
|||
|
|
defaultToolbar: [{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
|
|||
|
|
title: '搜索'
|
|||
|
|
, layEvent: 'search'
|
|||
|
|
, icon: 'layui-icon-search'
|
|||
|
|
}],
|
|||
|
|
url: listUrl,
|
|||
|
|
skin: 'line',
|
|||
|
|
page: true,
|
|||
|
|
method: 'post',
|
|||
|
|
request: {
|
|||
|
|
pageName: 'page',
|
|||
|
|
limitName: 'size',
|
|||
|
|
},
|
|||
|
|
parseData: function (res) {
|
|||
|
|
return {
|
|||
|
|
"code": res.code, //解析接口状态
|
|||
|
|
"msg": res.msg, //解析提示文本
|
|||
|
|
"count": res.data.total, //解析数据长度
|
|||
|
|
"path": res.data.path, //解析路径
|
|||
|
|
"data": res.data.list //解析数据列表
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
cols: [[
|
|||
|
|
{type: 'checkbox'},
|
|||
|
|
{templet: '#row-type', width: 100, title: '类型'},
|
|||
|
|
{templet: '#row-cover', title: '封面', style: 'height: 60px;'},
|
|||
|
|
{field: 'name', title: '名称', edit: 'text'},
|
|||
|
|
{field: 'size_text', title: '大小'},
|
|||
|
|
{field: 'path', align: 'left',title: '路径'},
|
|||
|
|
// {templet: '#row-oss', width: 150, title: '是否OSS'},
|
|||
|
|
// {templet: '#row-local', width: 150, title: '文件失效'},
|
|||
|
|
// {field: 'updated_at', width: 180, title: '最近操作时间'},
|
|||
|
|
{templet: '#row-operate', minWidth: 150, align: 'center', title: '操作'}
|
|||
|
|
]],
|
|||
|
|
done: function (res) {
|
|||
|
|
Tools.setInsTb(insTb);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听行工具条
|
|||
|
|
table.on('tool(table-container-filter)', function (obj) {
|
|||
|
|
let data = obj.data;
|
|||
|
|
let layEvent = obj.event;
|
|||
|
|
let url = $($(this).context).data('href');
|
|||
|
|
let title = $($(this).context).data('title');
|
|||
|
|
let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
|
|||
|
|
let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';
|
|||
|
|
let insTb = Tools.getInsTb();
|
|||
|
|
|
|||
|
|
switch (layEvent) {
|
|||
|
|
// 行 删除
|
|||
|
|
case 'del':
|
|||
|
|
let ids = [data.id];
|
|||
|
|
delRow(url, ids, insTb);
|
|||
|
|
return false;
|
|||
|
|
// 行 选择
|
|||
|
|
case 'select':
|
|||
|
|
selectOne(data);
|
|||
|
|
return false;
|
|||
|
|
//其他 默认为打开弹出层
|
|||
|
|
default:
|
|||
|
|
openLayer(url, title, width, height);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听工具条 注意区别toolbar和tool toolbar是表头上的工具条 tool是行中的工具条
|
|||
|
|
table.on('toolbar(table-container-filter)', function (obj) {
|
|||
|
|
let layEvent = obj.event;
|
|||
|
|
let insTb = Tools.getInsTb();
|
|||
|
|
let url = $($(this).context).data('href')
|
|||
|
|
let title = $($(this).context).data('title')
|
|||
|
|
let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%';
|
|||
|
|
let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%';
|
|||
|
|
|
|||
|
|
switch (layEvent) {
|
|||
|
|
// toolbar 删除
|
|||
|
|
case 'del':
|
|||
|
|
let checkStatus = table.checkStatus('table-container');
|
|||
|
|
let selected = checkStatus.data;
|
|||
|
|
if (checkStatus.data.length <= 0) {
|
|||
|
|
layer.msg('请先选择数据');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
let ids = [];
|
|||
|
|
|
|||
|
|
$.each(selected, function (index, val) {
|
|||
|
|
ids.push(val.id);
|
|||
|
|
})
|
|||
|
|
delRow(url, ids, insTb);
|
|||
|
|
return false;
|
|||
|
|
// toolbar 刷新
|
|||
|
|
case 'refresh':
|
|||
|
|
refreshTab(insTb);
|
|||
|
|
return false;
|
|||
|
|
// toolbar 上传
|
|||
|
|
case 'upload':
|
|||
|
|
$('.upload-btn').trigger('click');
|
|||
|
|
return false;
|
|||
|
|
// 本地文件一键上传到OSS
|
|||
|
|
case 'oss':
|
|||
|
|
let idx = layer.load(2);
|
|||
|
|
$.post('/manager/attachment/to-oss', function (res) {
|
|||
|
|
layer.close(idx);
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.alert('操作成功！总共' + res.data.total + '条 ' + res.data.none + '条不存在 已完成' + res.data.done + '条', {icon: 6});
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return false;
|
|||
|
|
// 多选择
|
|||
|
|
case 'multiple':
|
|||
|
|
batchSelect();
|
|||
|
|
return false;
|
|||
|
|
// 一键删除失效文件
|
|||
|
|
case 'lost':
|
|||
|
|
let lostIdx = layer.load(2);
|
|||
|
|
$.post('/manager/attachment/del-lost-file', function (res) {
|
|||
|
|
layer.close(lostIdx);
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.alert('操作成功！删除成功' + res.data.total + '条记录', {icon: 6});
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return false;
|
|||
|
|
// toolbar 搜索
|
|||
|
|
case 'search':
|
|||
|
|
let search = $('.table-search-fieldset');
|
|||
|
|
if (search.hasClass('div-show')) {
|
|||
|
|
search.css('display', 'none').removeClass('div-show');
|
|||
|
|
} else {
|
|||
|
|
search.css('display', 'block').addClass('div-show');
|
|||
|
|
}
|
|||
|
|
return false;
|
|||
|
|
// 其他 默认为打开弹出层
|
|||
|
|
default:
|
|||
|
|
openLayer(url, title, width, height);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function selectOne(data) {
|
|||
|
|
layui.use(['jquery'], function () {
|
|||
|
|
let $ = layui.jquery;
|
|||
|
|
|
|||
|
|
let index = parent.layer.getFrameIndex(window.name); //获取窗口索引
|
|||
|
|
let multiple = parent.layui.$(".choose-open").data('multiple'); //是否多选
|
|||
|
|
// 获取选中
|
|||
|
|
let inputValue = '';
|
|||
|
|
// 是否追加
|
|||
|
|
if (multiple) {
|
|||
|
|
inputValue = parent.layui.$(".choose-open").parents('.upload-file-div').find('.upload-file-value').val()+',';
|
|||
|
|
}
|
|||
|
|
inputValue += data.src;
|
|||
|
|
|
|||
|
|
//去除首尾逗号
|
|||
|
|
inputValue = inputValue.replace(/(^\,*)|(\,*$)/g, "");
|
|||
|
|
parent.layui.$(".choose-open").parents('.upload-file-div').find('.upload-file-value').val(inputValue);
|
|||
|
|
parent.initPreviewList();
|
|||
|
|
parent.layer.close(index);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function batchSelect() {
|
|||
|
|
layui.use(['jquery', 'table'], function () {
|
|||
|
|
let $ = layui.jquery, table = layui.table;
|
|||
|
|
|
|||
|
|
let checkStatus = table.checkStatus('table-container');
|
|||
|
|
let selected = checkStatus.data;
|
|||
|
|
let index = parent.layer.getFrameIndex(window.name); //获取窗口索引
|
|||
|
|
let multiple = parent.layui.$(".choose-open").data('multiple'); //是否多选
|
|||
|
|
// 获取选中
|
|||
|
|
if (selected.length <= 0) {
|
|||
|
|
layer.msg('请先选择数据');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!multiple && selected.length > 1) {
|
|||
|
|
layer.msg('选择记录过多');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let inputValue = '';
|
|||
|
|
|
|||
|
|
if (multiple) {
|
|||
|
|
inputValue = parent.layui.$(".choose-open").parents('.upload-file-div').find('.upload-file-value').val();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let hasDir = false;
|
|||
|
|
$.each(selected, function (index, item) {
|
|||
|
|
if (item.type === 'dir') {
|
|||
|
|
hasDir = true;
|
|||
|
|
}
|
|||
|
|
inputValue += ','+item.src;
|
|||
|
|
})
|
|||
|
|
if (hasDir) {
|
|||
|
|
layer.msg('不能选择文件夹');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 去除首尾,
|
|||
|
|
inputValue = inputValue.replace(/(^\,*)|(\,*$)/g, "");
|
|||
|
|
|
|||
|
|
parent.layui.$(".choose-open").parents('.upload-file-div').find('.upload-file-value').val(inputValue);
|
|||
|
|
parent.initPreviewList();
|
|||
|
|
parent.layer.close(index);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initUpload() {
|
|||
|
|
layui.use(['jquery', 'upload', 'layer'], function () {
|
|||
|
|
let $ = layui.jquery, upload = layui.upload, layer = layui.layer;
|
|||
|
|
let that = $('#upload-btn-div');
|
|||
|
|
let url = that.data('url') ? that.data('url') : '/manager/upload/image';
|
|||
|
|
let field = that.data('field') ? that.data('field') : 'image_image';
|
|||
|
|
let multiple = that.data('multiple') ? that.data('multiple') : false;
|
|||
|
|
let accept = that.data('accept') ? that.data('accept') : 'images'; //images（图片）、file（所有文件）、video（视频）、audio（音频）
|
|||
|
|
let acceptMime = that.data('mimetype') ? that.data('mimetype') : 'images/*';
|
|||
|
|
let exts = that.data('exts') ? that.data('exts') : 'jpg|png|gif|bmp|jpeg';
|
|||
|
|
let maxSize = that.data('size') ? that.data('size') : 50 * 1204; //KB
|
|||
|
|
let size = maxSize; //size KB
|
|||
|
|
let number = that.data('number') ? that.data('number') : 0;
|
|||
|
|
let path = that.data('path')? that.data('path') : '';
|
|||
|
|
let up = upload.render({
|
|||
|
|
elem: '#upload-btn-div'
|
|||
|
|
, url: url
|
|||
|
|
, auto: true
|
|||
|
|
, field: field
|
|||
|
|
, accept: accept
|
|||
|
|
, acceptMime: acceptMime
|
|||
|
|
, exts: exts
|
|||
|
|
, size: size
|
|||
|
|
, number: number
|
|||
|
|
, multiple: multiple
|
|||
|
|
, data: {
|
|||
|
|
path: path.length > 0 ? path : $('#upload-path').val() //指定上传目录 基于public下 为空则默认
|
|||
|
|
}
|
|||
|
|
, before: function (obj) {
|
|||
|
|
layer.load(2);
|
|||
|
|
}
|
|||
|
|
, done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
|
|||
|
|
layer.closeAll('loading'); //关闭loading
|
|||
|
|
let item = this.item;
|
|||
|
|
let div = item.parents('.upload-file-div');
|
|||
|
|
let existsNotice = item.data('notice-exists');//已存在文件是否提示 默认不提示
|
|||
|
|
let callback = item.data('callback');//上传成功执行函数
|
|||
|
|
if (callback) {
|
|||
|
|
eval(callback);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 200=已存在文件 0=新上传成功
|
|||
|
|
if (res.code === 0 || res.code === 200) {
|
|||
|
|
let inputValue = '';
|
|||
|
|
// 如果是多文件上传 则追加 否则 替换
|
|||
|
|
if (multiple) {
|
|||
|
|
inputValue = $(div).find('.upload-file-value').val();
|
|||
|
|
if (inputValue.length > 0) {
|
|||
|
|
inputValue += ',';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
inputValue += res.data.src;
|
|||
|
|
|
|||
|
|
$(div).find('.upload-file-value').val(inputValue);
|
|||
|
|
initPreviewList();
|
|||
|
|
if (existsNotice && res.code === 200) {
|
|||
|
|
layer.alert(res.msg);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
CurrentTools.setInsUp(up);
|
|||
|
|
})
|
|||
|
|
}
|