386 lines
14 KiB
JavaScript
386 lines
14 KiB
JavaScript
|
/*!
|
||
|
|
* 文件管理组件
|
||
|
|
* by meystack to www.swiftadmin.net
|
||
|
|
* Apache2.0 Licensed
|
||
|
|
*/
|
||
|
|
layui.define(['laypage'], function (exports) {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var $ = layui.$
|
||
|
|
|
||
|
|
, laypage = layui.laypage
|
||
|
|
//模块名
|
||
|
|
, 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 = [
|
||
|
|
'<div style="text-align: center;margin-top:30px ">',
|
||
|
|
"<svg style=\"margin-top: 10px\" width=\"64\" height=\"41\" viewBox=\"0 0 64 41\"><g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\"><ellipse class=\"ant-empty-img-simple-ellipse\" fill=\"#F5F5F5\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\"></ellipse><g class=\"ant-empty-img-simple-g\" fill-rule=\"nonzero\" stroke=\"#D9D9D9\"><path d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z\"></path><path d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\" fill=\"#FAFAFA\" class=\"ant-empty-img-simple-path\"></path></g></g></svg>",
|
||
|
|
'<div style="text-align: center; color: #d0cdcd">暂无数据</div>',
|
||
|
|
'</div>',
|
||
|
|
].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 += '<div class="file-list-item" data-index="' + element.id + '" data-url="' + element.url + '">';
|
||
|
|
html += '<div class="intro">';
|
||
|
|
html += '<div style="height: ' + options.thumb.height + 'px">';
|
||
|
|
html += '<img class="icon" data-ext="' + element.extension + '" ';
|
||
|
|
if (element.mimetype && element.mimetype.indexOf('image') !== -1) {
|
||
|
|
html += 'src="' + element.url + '" ';
|
||
|
|
html += 'alt="' + element.filename + '" width="' + options.thumb.width + '" height="' + options.thumb.height + '" />';
|
||
|
|
} else {
|
||
|
|
html += 'src="' + that.fileExt(element.extension) + '" style="padding-top: 15px"';
|
||
|
|
html += 'alt="' + element.filename + '" width="50" height="50" />';
|
||
|
|
}
|
||
|
|
|
||
|
|
html += '</div>';
|
||
|
|
html += '<span class="name" >' + element.filename + '</span>';
|
||
|
|
html += '</div>';
|
||
|
|
html += '</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
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: '<span style="color: red; ">删除</span>'
|
||
|
|
, type: 'delete'
|
||
|
|
, id: $(item).data('index')
|
||
|
|
}];
|
||
|
|
|
||
|
|
if (options.choose) {
|
||
|
|
data.unshift({
|
||
|
|
title: '选择',
|
||
|
|
type: 'choose',
|
||
|
|
id: item
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
layui.dropdown.render({
|
||
|
|
elem: item
|
||
|
|
, trigger: 'contextmenu'
|
||
|
|
, id: 'file' + index
|
||
|
|
, show: true
|
||
|
|
, data: data
|
||
|
|
, click: function (obj) {
|
||
|
|
|
||
|
|
let fileEl = '#files-ajax',
|
||
|
|
elem = '<div id="files-ajax" lay-open data-url="' + options.url + 'edit?id=' + obj.id + '" data-title="编辑附件" data-area="520px,398px">';
|
||
|
|
|
||
|
|
if (obj.type === 'down') {
|
||
|
|
window.open(obj.id);
|
||
|
|
} else if (obj.type === 'choose') {
|
||
|
|
that.choose(obj.id);
|
||
|
|
} else {
|
||
|
|
if (obj.type === 'delete') {
|
||
|
|
elem = '<div id="files-ajax" lay-ajax data-url="' + options.url + 'del?id=' + obj.id + '">';
|
||
|
|
}
|
||
|
|
$(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.info('请先配置选择参数');
|
||
|
|
}
|
||
|
|
|
||
|
|
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 = '<div class="layui-input-inline layui-uplpad-image">';
|
||
|
|
html += '<img src="' + url + '" >';
|
||
|
|
html += '<input type="text" name="' + field + '[' + (length - 1) + '][src]" class="layui-hide" value="' + url + '">';
|
||
|
|
html += '<input type="text" name="' + field + '[' + (length - 1) + '][title]" class="layui-input" placeholder="图片简介">';
|
||
|
|
html += '<span class="layui-badge layui-badge-red" onclick="layui.$(this).parent().remove();">删除</span></div>';
|
||
|
|
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('<style>.file-list-item{position:relative;display:inline-block;vertical-align:top;padding:8px 9px;margin:8px 0;cursor:pointer;}.file-list-item:hover{background-color:#F8F8F8;}.file-list-item .icon{overflow:hidden;margin:0 auto;display:block;}.file-list-item .name{width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;font-size:12px;text-align:center;margin-top:12px;display:block;}</style>');
|
||
|
|
exports(MOD_NAME, MODULE_FILE_NAME);
|
||
|
|
})
|
||
|
|
|