yoshop_pro/web/assets/store/js/file.library.js

;(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);