501 lines
18 KiB
JavaScript
501 lines
18 KiB
JavaScript
|
;(function ($, window, document, undefined) {
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 文件库模块
|
|||
|
|
* @param trigger
|
|||
|
|
* @param options
|
|||
|
|
* @constructor
|
|||
|
|
*/
|
|||
|
|
function FileLibrary(trigger, options) {
|
|||
|
|
// 配置项
|
|||
|
|
var defaults = {
|
|||
|
|
type: 'image',
|
|||
|
|
layerId: 'file-library'
|
|||
|
|
, layerSkin: 'file-library'
|
|||
|
|
};
|
|||
|
|
this.options = $.extend({}, defaults, options);
|
|||
|
|
// 触发对象
|
|||
|
|
this.$trigger = trigger;
|
|||
|
|
this.$touch = null; // 当前触发元素
|
|||
|
|
// 容器元素
|
|||
|
|
this.$element = null;
|
|||
|
|
// 初始化对象事件
|
|||
|
|
this.init();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
FileLibrary.prototype = {
|
|||
|
|
|
|||
|
|
data: {
|
|||
|
|
selectedList: []
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化
|
|||
|
|
*/
|
|||
|
|
init: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
// 打开文件库事件
|
|||
|
|
_this.triggerEvent();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 打开文件库事件
|
|||
|
|
*/
|
|||
|
|
triggerEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
if (_this.$trigger !== false) {
|
|||
|
|
// 点击开启文件库弹窗
|
|||
|
|
_this.$trigger.unbind().click(function () {
|
|||
|
|
_this.$touch = $(this);
|
|||
|
|
_this.showLibraryModal();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
_this.showLibraryModal();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示文件库弹窗
|
|||
|
|
*/
|
|||
|
|
showLibraryModal: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.getJsonData({group_id: -1}, function (data) {
|
|||
|
|
data.is_default = true;
|
|||
|
|
// 捕获页
|
|||
|
|
layer.open({
|
|||
|
|
type: 1
|
|||
|
|
, id: _this.options.layerId
|
|||
|
|
, title: '图片库'
|
|||
|
|
, skin: _this.options.layerSkin
|
|||
|
|
, area: '840px'
|
|||
|
|
, offset: 'auto'
|
|||
|
|
, anim: 1
|
|||
|
|
, closeBtn: 1
|
|||
|
|
, shade: 0.3
|
|||
|
|
, btn: ['确定', '取消']
|
|||
|
|
, content: template('tpl-file-library', data)
|
|||
|
|
, success: function (layero) {
|
|||
|
|
// 初始化文件库弹窗
|
|||
|
|
_this.initModal(layero);
|
|||
|
|
}
|
|||
|
|
, yes: function (index) {
|
|||
|
|
// 确认回调
|
|||
|
|
_this.done();
|
|||
|
|
layer.close(index);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化文件库弹窗
|
|||
|
|
*/
|
|||
|
|
initModal: function (element) {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.$element = element;
|
|||
|
|
// 清空选中的文件
|
|||
|
|
_this.onEmptySelected();
|
|||
|
|
// 注册分组下拉选择组件
|
|||
|
|
_this.selectDropdown();
|
|||
|
|
// 注册分类切换事件
|
|||
|
|
_this.switchClassEvent();
|
|||
|
|
// 注册文件点击选中事件
|
|||
|
|
_this.selectFilesEvent();
|
|||
|
|
// 新增分组事件
|
|||
|
|
_this.addGroupEvent();
|
|||
|
|
// 编辑分组事件
|
|||
|
|
_this.editGroupEvent();
|
|||
|
|
// 删除分组事件
|
|||
|
|
_this.deleteGroupEvent();
|
|||
|
|
// 注册文件上传事件
|
|||
|
|
_this.uploadImagesEvent();
|
|||
|
|
// 注册文件删除事件
|
|||
|
|
_this.deleteFilesEvent();
|
|||
|
|
// 注册文件移动事件
|
|||
|
|
_this.moveFilesEvent();
|
|||
|
|
// 注册文件列表分页事件
|
|||
|
|
_this.fileListPage();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 清空选中的文件
|
|||
|
|
*/
|
|||
|
|
onEmptySelected: function () {
|
|||
|
|
this.data.selectedList = [];
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 注册文件列表分页事件
|
|||
|
|
*/
|
|||
|
|
fileListPage: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.$element.find('#file-list-body').on('click', '.switch-page', function () {
|
|||
|
|
var page = $(this).data('page');
|
|||
|
|
_this.renderFileList(page);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 文件移动事件
|
|||
|
|
*/
|
|||
|
|
moveFilesEvent: function () {
|
|||
|
|
var _this = this
|
|||
|
|
, $groupSelect = _this.$element.find('.group-select');
|
|||
|
|
// 绑定文件选中事件
|
|||
|
|
$groupSelect.on('click', '.move-file-group', function () {
|
|||
|
|
$groupSelect.dropdown('close');
|
|||
|
|
var groupId = $(this).data('group-id')
|
|||
|
|
, fileIds = _this.getSelectedFileIds();
|
|||
|
|
if (fileIds.length === 0) {
|
|||
|
|
layer.msg('您还没有选择任何文件~', {offset: 't', anim: 6});
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
layer.confirm('确定移动选中的文件吗？', {title: '友情提示'}, function (index) {
|
|||
|
|
var load = layer.load();
|
|||
|
|
$.post(STORE_URL + '/upload.library/moveFiles', {
|
|||
|
|
group_id: groupId
|
|||
|
|
, fileIds: fileIds
|
|||
|
|
}, function (result) {
|
|||
|
|
layer.msg(result.msg);
|
|||
|
|
if (result.code === 1) {
|
|||
|
|
_this.renderFileList();
|
|||
|
|
}
|
|||
|
|
layer.close(load);
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 删除选中的文件
|
|||
|
|
*/
|
|||
|
|
deleteFilesEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.$element.on('click', '.file-delete', function () {
|
|||
|
|
var fileIds = _this.getSelectedFileIds();
|
|||
|
|
if (fileIds.length === 0) {
|
|||
|
|
layer.msg('您还没有选择任何文件~', {offset: 't', anim: 6});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
layer.confirm('确定删除选中的文件吗？', {title: '友情提示'}, function (index) {
|
|||
|
|
var load = layer.load();
|
|||
|
|
$.post(STORE_URL + '/upload.library/deleteFiles', {
|
|||
|
|
fileIds: fileIds
|
|||
|
|
}, function (result) {
|
|||
|
|
layer.close(load);
|
|||
|
|
if (result.code === 1) {
|
|||
|
|
_this.renderFileList();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 文件上传 (多文件)
|
|||
|
|
*/
|
|||
|
|
uploadImagesEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
var loadIndex = null;
|
|||
|
|
// 文件大小
|
|||
|
|
var maxSize = 2;
|
|||
|
|
// 初始化Web Uploader
|
|||
|
|
var uploader = WebUploader.create({
|
|||
|
|
// 选完文件后，是否自动上传。
|
|||
|
|
auto: true,
|
|||
|
|
// 文件接收服务端。
|
|||
|
|
server: STORE_URL + '/upload/image',
|
|||
|
|
// 选择文件的按钮。可选。
|
|||
|
|
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
|||
|
|
pick: {
|
|||
|
|
id: '.j-upload',
|
|||
|
|
multiple: true
|
|||
|
|
},
|
|||
|
|
// 文件上传域的name
|
|||
|
|
fileVal: 'iFile',
|
|||
|
|
// 图片上传前不进行压缩
|
|||
|
|
compress: false,
|
|||
|
|
// 允许重复
|
|||
|
|
duplicate: true,
|
|||
|
|
// 文件总数量
|
|||
|
|
// fileNumLimit: 10,
|
|||
|
|
// 文件大小2m => 2097152
|
|||
|
|
fileSingleSizeLimit: maxSize * 1024 * 1024,
|
|||
|
|
// 只允许选择图片文件。
|
|||
|
|
accept: {
|
|||
|
|
title: 'Images',
|
|||
|
|
extensions: 'gif,jpg,jpeg,bmp,png',
|
|||
|
|
mimeTypes: 'image/*'
|
|||
|
|
},
|
|||
|
|
// 文件上传header扩展
|
|||
|
|
headers: {
|
|||
|
|
'Accept': 'application/json, text/javascript, */*; q=0.01',
|
|||
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 验证大小
|
|||
|
|
uploader.on('error', function (type) {
|
|||
|
|
if (type === 'F_DUPLICATE') {
|
|||
|
|
console.log('请不要重复选择文件！');
|
|||
|
|
} else if (type === 'F_EXCEED_SIZE') {
|
|||
|
|
alert('文件大小不可超过' + maxSize + 'm 哦！换个小点的文件吧！');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 文件上传前触发,添加附带参数
|
|||
|
|
uploader.on('uploadBeforeSend', function (obj, data) {
|
|||
|
|
data.group_id = _this.getCurrentGroupId();
|
|||
|
|
});
|
|||
|
|
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
|
|||
|
|
uploader.on('uploadSuccess', function (file, response) {
|
|||
|
|
if (response.code === 1) {
|
|||
|
|
var $list = _this.$element.find('ul.file-list-item');
|
|||
|
|
$list.prepend(template('tpl-file-list-item', [response.data]));
|
|||
|
|
} else {
|
|||
|
|
uploader.uploadError(file, response);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// 监听文件上传失败
|
|||
|
|
uploader.on('uploadError', function (file, reason) {
|
|||
|
|
uploader.uploadError(file, reason);
|
|||
|
|
});
|
|||
|
|
// 文件上传失败回调函数
|
|||
|
|
uploader.uploadError = function (file, reason) {
|
|||
|
|
layer.msg(reason.msg, {anim: 6});
|
|||
|
|
};
|
|||
|
|
// 文件开始上传
|
|||
|
|
uploader.on('startUpload', function () {
|
|||
|
|
loadIndex = layer.load();
|
|||
|
|
});
|
|||
|
|
// 文件上传结束
|
|||
|
|
uploader.on('uploadFinished', function () {
|
|||
|
|
layer.close(loadIndex);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 新增分组事件
|
|||
|
|
*/
|
|||
|
|
addGroupEvent: function () {
|
|||
|
|
var _this = this
|
|||
|
|
, $groupList = _this.$element.find('.file-group > ul');
|
|||
|
|
_this.$element.on('click', '.group-add', function () {
|
|||
|
|
layer.prompt({title: '请输入新分组名称'}, function (value, index) {
|
|||
|
|
var load = layer.load();
|
|||
|
|
$.post(STORE_URL + '/upload.library/addGroup', {
|
|||
|
|
group_name: value,
|
|||
|
|
group_type: _this.options.type
|
|||
|
|
}, function (result) {
|
|||
|
|
layer.msg(result.msg);
|
|||
|
|
if (result.code === 1) {
|
|||
|
|
$groupList.append(template('tpl-group-item', result.data));
|
|||
|
|
var $groupSelectList = _this.$element.find('.group-select > .group-list');
|
|||
|
|
$groupSelectList.append(
|
|||
|
|
'<li>' +
|
|||
|
|
' <a class="move-file-group" data-group-id="' + result.data.group_id + '"' +
|
|||
|
|
' href="javascript:void(0);">' + result.data.group_name + '</a>' +
|
|||
|
|
'</li>'
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
layer.close(load);
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 编辑分组事件
|
|||
|
|
*/
|
|||
|
|
editGroupEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.$element.find('.file-group').on('click', '.group-edit', function () {
|
|||
|
|
var $li = $(this).parent()
|
|||
|
|
, group_id = $li.data('group-id');
|
|||
|
|
layer.prompt({title: '修改分组名称', value: $li.attr('title')}, function (value, index) {
|
|||
|
|
var load = layer.load();
|
|||
|
|
$.post(STORE_URL + '/upload.library/editGroup', {
|
|||
|
|
group_id: group_id
|
|||
|
|
, group_name: value
|
|||
|
|
}, function (result) {
|
|||
|
|
layer.msg(result.msg);
|
|||
|
|
if (result.code === 1) {
|
|||
|
|
$li.attr('title', value).find('.group-name').text(value);
|
|||
|
|
var $groupSelectList = _this.$element.find('.group-select > .group-list');
|
|||
|
|
$groupSelectList.find('[data-group-id="' + group_id + '"]').text(value);
|
|||
|
|
}
|
|||
|
|
layer.close(load);
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 删除分组事件
|
|||
|
|
*/
|
|||
|
|
deleteGroupEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
_this.$element.find('.file-group').on('click', '.group-delete', function () {
|
|||
|
|
var $li = $(this).parent()
|
|||
|
|
, group_id = $li.data('group-id');
|
|||
|
|
layer.confirm('确定删除该分组吗？', {title: '友情提示'}, function (index) {
|
|||
|
|
var load = layer.load();
|
|||
|
|
$.post(STORE_URL + '/upload.library/deleteGroup', {
|
|||
|
|
group_id: group_id
|
|||
|
|
}, function (result) {
|
|||
|
|
layer.msg(result.msg);
|
|||
|
|
if (result.code === 1) {
|
|||
|
|
$li.remove();
|
|||
|
|
var $groupSelectList = _this.$element.find('.group-select > .group-list');
|
|||
|
|
$groupSelectList.find('[data-group-id="' + group_id + '"]').remove();
|
|||
|
|
}
|
|||
|
|
layer.close(load);
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 注册文件选中事件
|
|||
|
|
*/
|
|||
|
|
selectFilesEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
// 绑定文件选中事件
|
|||
|
|
_this.$element.find('#file-list-body').on('click', '.file-list-item li', function () {
|
|||
|
|
var $this = $(this)
|
|||
|
|
, data = {
|
|||
|
|
file_id: $this.data('file-id')
|
|||
|
|
, file_path: $this.data('file-path')
|
|||
|
|
}
|
|||
|
|
, selectedList = _this.data.selectedList
|
|||
|
|
, index = $.arrayFilterMultiple(selectedList, 'file_id', data.file_id);
|
|||
|
|
index === false ? selectedList.push(data) : selectedList.splice(index, 1);
|
|||
|
|
// 选中状态
|
|||
|
|
$this.toggleClass('active');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 分类切换事件
|
|||
|
|
*/
|
|||
|
|
switchClassEvent: function () {
|
|||
|
|
var _this = this;
|
|||
|
|
// 注册分类切换事件
|
|||
|
|
_this.$element.find('.file-group').on('click', 'li', function () {
|
|||
|
|
var $this = $(this);
|
|||
|
|
// 切换选中状态
|
|||
|
|
$this.addClass('active').siblings('.active').removeClass('active');
|
|||
|
|
// 重新渲染文件列表
|
|||
|
|
_this.renderFileList();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 注册分组下拉选择组件
|
|||
|
|
*/
|
|||
|
|
selectDropdown: function () {
|
|||
|
|
this.$element.find('.group-select').dropdown();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取文件库列表数据
|
|||
|
|
* @param params
|
|||
|
|
* @param success
|
|||
|
|
*/
|
|||
|
|
getJsonData: function (params, success) {
|
|||
|
|
var loadIndex = layer.load();
|
|||
|
|
typeof params === 'function' && (success = params);
|
|||
|
|
// 获取文件库列表
|
|||
|
|
$.getJSON(STORE_URL + '/upload.library/fileList', params, function (result) {
|
|||
|
|
layer.close(loadIndex);
|
|||
|
|
if (result.code === 1) {
|
|||
|
|
typeof success === 'function' && success(result.data);
|
|||
|
|
} else {
|
|||
|
|
layer.msg(result.msg, {anim: 6});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重新渲染文件列表
|
|||
|
|
* @param page
|
|||
|
|
*/
|
|||
|
|
renderFileList: function (page) {
|
|||
|
|
var _this = this
|
|||
|
|
, groupId = this.getCurrentGroupId();
|
|||
|
|
// 重新渲染文件列表
|
|||
|
|
_this.getJsonData({group_id: groupId, page: page || 1}, function (data) {
|
|||
|
|
_this.$element.find('#file-list-body').html(template('tpl-file-list', data['file_list']));
|
|||
|
|
});
|
|||
|
|
// 清空选中的文件
|
|||
|
|
_this.onEmptySelected();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取选中的文件列表
|
|||
|
|
* @returns {Array}
|
|||
|
|
*/
|
|||
|
|
getSelectedFiles: function () {
|
|||
|
|
// var selectedList = [];
|
|||
|
|
// this.$element.find('.file-list-item > li.active').each(function (index) {
|
|||
|
|
// var $this = $(this);
|
|||
|
|
// selectedList[index] = {
|
|||
|
|
// file_id: $this.data('file-id')
|
|||
|
|
// , file_path: $this.data('file-path')
|
|||
|
|
// };
|
|||
|
|
// });
|
|||
|
|
// return selectedList;
|
|||
|
|
|
|||
|
|
return this.data.selectedList;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取选中的文件的ID集
|
|||
|
|
* @returns {Array}
|
|||
|
|
*/
|
|||
|
|
getSelectedFileIds: function () {
|
|||
|
|
var fileList = this.getSelectedFiles();
|
|||
|
|
var data = [];
|
|||
|
|
fileList.forEach(function (item) {
|
|||
|
|
data.push(item.file_id);
|
|||
|
|
});
|
|||
|
|
return data;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 获取当前分组id
|
|||
|
|
* @returns {*}
|
|||
|
|
*/
|
|||
|
|
getCurrentGroupId: function () {
|
|||
|
|
return this.$element.find('.file-group > ul > li.active').data('group-id');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 确认回调
|
|||
|
|
*/
|
|||
|
|
done: function () {
|
|||
|
|
var selectedList = this.getSelectedFiles();
|
|||
|
|
selectedList.length > 0 && typeof this.options.done === 'function'
|
|||
|
|
&& this.options.done(selectedList, this.$touch);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 在Jquery插件中使用FileLibrary对象
|
|||
|
|
$.fn.fileLibrary = function (options) {
|
|||
|
|
new FileLibrary(this, options);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 在Jquery插件中使用FileLibrary对象
|
|||
|
|
$.fileLibrary = function (options) {
|
|||
|
|
new FileLibrary(false, options);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
})(jQuery, window, document);
|