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)', 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)', 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', minWidth: 150, title: '封面', style: 'height: 60px;'}, {field: 'name', minWidth: 250, title: '名称', edit: 'text'}, {field: 'size_text', width: 150, title: '大小'}, {field: 'path', width: 150, 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)', 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)', 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); }) }