/*!
* 文件管理组件
* by meystack to www.swiftadmin.net
* Apache2.0 Licensed
*/
layui.define(['laypage','dropdown'], function (exports) {
"use strict";
var $ = layui.$
, laypage = layui.laypage
, dropdown = layui.dropdown
//模块名
, MOD_NAME = 'fileManager'
, MOD_INDEX = 'layui_' + MOD_NAME + '_index' //模块索引名
, TAG_NAME = undefined
//外部接口
, MODULE_FILE_NAME = {
config: {}
, index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
//设置全局项
, set: function (options) {
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件
, on: function (events, callback) {
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
, thisTags = function () {
var that = this
, options = that.config
, id = options.id || that.index;
thisTags.that[id] = that; //记录当前实例对象
return {
config: options
//重置实例
, reload: function (options) {
that.reload.call(that, options);
}
}
}
//字符常量
, STR_ELEM = 'layui-MODULE_FILE_NAME', STR_HIDE = 'layui-hide', STR_DISABLED = 'layui-disabled',
STR_NONE = 'layui-none'
, LAY_TAG_THIS = 'layui-tag-this', LAY_TAGS_RESULT = 'layui-tags-ajax'
//主模板
, TPL_MAIN = [''].join('')
, TPL_NONE = [
'
',
].join('')
//构造器
, Class = function (options) {
var that = this;
that.index = ++MODULE_FILE_NAME.index;
that.config = $.extend({}, that.config, MODULE_FILE_NAME.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
url: undefined, // ajax的URL地址
choose: false, // 是否可选择文件
limit: 30, // 限定数量
thumb: {
width: 90, // 宽度
height: 90 // 高度
},
icons: [{ // 图标
suffix: ['ppt', 'pptx'],
icon: 'ppt'
}, {
suffix: ['doc', 'docx'],
icon: 'doc'
}, {
suffix: ['xls', 'xlsx'],
icon: 'xls'
}, {
suffix: ['pdf'],
icon: 'pdf'
}, {
suffix: ['html', 'htm'],
icon: 'htm'
}, {
suffix: ['txt'],
icon: 'txt'
}, {
suffix: ['swf', 'docx'],
icon: 'flash'
}, {
suffix: ['zip', 'rar', '7z'],
icon: 'zip'
}, {
suffix: ['mp3', 'wav'],
icon: 'mp3'
}, {
suffix: ['mp4', '3gp', 'rmvb', 'avi', 'flv'],
icon: 'mp4'
}, {
suffix: ['psd'],
icon: 'psd'
}, {
suffix: ['ttf'],
icon: 'ttf'
}, {
suffix: ['apk'],
icon: 'apk'
}, {
suffix: ['exe'],
icon: 'exe'
}, {
suffix: ['torrent'],
icon: 'bt'
}, {
suffix: ['gif', 'png', 'jpeg', 'jpg', 'bmp'],
icon: 'img'
}],
};
// 重载实例
Class.prototype.reload = function (options) {
var that = this;
// 防止数组深度合并
layui.each(options, function (key, item) {
if (layui._typeof(item) === 'array') delete that.config[key];
});
that.config = $.extend(true, {}, that.config, options);
that.render();
};
//渲染
Class.prototype.render = function () {
var that = this
, options = that.config;
// 获取当前元素
var othis = options.elem = $(options.elem);
if (!othis[0]) return;
this.getData();
that.events();
};
// 获取请求的数据
Class.prototype.getData = function (page = 1, type = '', filename = '') {
let that = this,
options = this.config;
$.ajax({
url: options.url,
type: 'post',
data: {
page: page,
type: type,
filename: filename,
limit: options.limit
},
success: function (res) {
if (res.code === 200) {
that.renderData(res);
} else {
layer.error(res.msg);
}
},
error: function (err) {
layer.error('请求失败');
}
})
};
// 渲染请求的数据
Class.prototype.renderData = function (data) {
let that = this, options = this.config;
let html = '';
for (let index = 0; index < data.data.length; index++) {
const element = data.data[index];
html += '';
html += '
';
html += '
';
html += '
![]()
';
} else {
html += 'src="' + that.fileExt(element.extension) + '" style="padding-top: 15px"';
html += 'alt="' + element.filename + '" width="50" height="50" />';
}
html += '
';
html += '
' + element.filename + '';
html += '
';
html += '
';
}
options.elem.find('#files-content').html(html || TPL_NONE);
$(options.elem).find('.file-list-item').each(function (index, item) {
let data = [
{
title: '下载'
, type: 'down'
, id: $(item).data('url')
},
{
title: '编辑'
, type: 'edit'
, id: $(item).data('index')
}
, {
title: '删除'
, type: 'delete'
, id: $(item).data('index')
}];
if (options.choose) {
data.unshift({
title: '选择',
type: 'choose',
id: item
});
}
dropdown.render({
elem: item
, trigger: 'contextmenu'
, id: 'file' + index
, show: true
, data: data
, click: function (obj) {
let fileEl = '#files-ajax',
elem = '';
if (obj.type === 'down') {
window.open(obj.id);
} else if (obj.type === 'choose') {
that.choose(obj.id);
} else {
if (obj.type === 'delete') {
elem = '
';
}
$(options.elem).append(elem);
$(fileEl).trigger('click');
obj.type === 'delete' && that.reload();
}
$(fileEl).remove();
}
});
})
if (!options.elem.find('#files-page>div').length) {
laypage.render({
elem: options.elem.find('#files-page'),
count: data.count,
limit: options.limit,
jump: function (obj, first) {
if (!first) {
that.getData(obj.curr, $('.layui-tab-title li.layui-this').data('type'), $('#filename').val());
}
}
});
}
}
// 文件扩展名
Class.prototype.fileExt = function (ext) {
let type = 'file';
let icons = this.config.icons;
for (let i = 0; i < icons.length; i++) {
icons[i].suffix.find(function (item) {
if (ext.toLowerCase() === item) {
type = icons[i].icon;
}
})
}
return layui.cache.base + 'fileManager/ico/' + type + '.png';
}
//事件
Class.prototype.events = function () {
var that = this
, options = that.config;
$(options.elem).on('click', '.layui-tab-title li', function (res) {
let type = $(this).data('type');
$(options.elem).find('#files-page').html('');
that.getData(1, type, $('#filename').val());
});
$('#file-search').click(function (e) {
let filename = $('#filename').val();
$(options.elem).find('#files-page').html('');
that.getData(1, options.type, filename);
})
// 选择回显
$(options.elem).on('dblclick', '.file-list-item', function (e) {
if (options.choose) {
that.choose(this);
}
})
};
// 选择文件
Class.prototype.choose = function (obj) {
let url = $(obj).data('url'),
field = $('#_fileFiled').val(),
type = $('#_fileType').val();
if (!field || !type) {
return layer.msg('请先配置选择参数');
}
if (type === 'images') {
let o = parent.layui.$('img.' + field);
o.prop('src', url);
o.parent('div').removeClass('layui-hide');
parent.layui.$(o).parents('.layui-upload-drag').find('p,i,hr').addClass('layui-hide');
parent.layui.$('input.' + field).val(url);
} else if (type === 'multiple') {
let boxList = parent.layui.$('[lay-choose="' + field + '"]').parents('.layui-imagesbox').find('.layui-input-inline');
let length = boxList.length;
$(boxList).each(function (i, item) {
$(item).find('input.layui-hide').prop('name', field + '[' + i + '][src]');
$(item).find('input.layui-input').prop('name', field + '[' + i + '][title]');
})
let html = '
';
let elem = parent.layui.$('[lay-upload="' + field + '"]');
parent.layui.$(elem).parent().before(html);
parent.layui.$(elem).parents('form').find('input#' + field + '_clear').remove();
} else {
parent.layui.$('input.' + field).val(url);
}
parent.layer.close($('#_fileChoose').data('index'));
}
//记录所有实例
thisTags.that = {};
//获取当前实例对象
thisTags.getThis = function (id) {
var that = thisTags.that[id];
if (!that) hint.error(id ? (MOD_NAME + ' instance with ID \'' + id + '\' not found') : 'ID argument required');
return that
};
//重载实例
MODULE_FILE_NAME.reload = function (id, options) {
var that = thisTags.that[id];
that.reload(options);
return thisTags.call(that);
};
//核心入口
MODULE_FILE_NAME.render = function (options) {
var inst = new Class(options);
return thisTags.call(inst);
};
$('body').append('');
exports(MOD_NAME, MODULE_FILE_NAME);
})