wg-basic/common/src/main/resources/static/assets/js/layui-util.js

function LayuiUtil(layui, viewer) {
    var $ = layui.$;
    var layer = layui.layer;
    var upload = layui.upload;
    var laydate = layui.laydate;
    var form = layui.form;
    var Viewer = viewer;
    var restAjax = layui.restajax;
    var viewerObj = {};

    /**
     * 上传图片
     * @param opt
     */
    this.initUploadImage = function (opt) {
        var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 9
        maxCount = opt.maxCount < 0 ? 9 : opt.maxCount;
        var fieldName = opt.fieldName;
        var isShow = opt.isShow;
        var defaultAllowExts = ['jpg', 'png', 'gif', 'bmp', 'jpeg'];
        var allowExts = opt.allowExts;
        allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\|') : defaultAllowExts.join('\|');
        var defaultAcceptMime = ['image/*'];
        var acceptMime = opt.acceptMime;
        acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');

        var id = '#' + fieldName;
        var fileBoxId = id + 'FileBox';
        var uploadBtnId = id + 'UploadBtn';
        var deleteBtnClass = '.delete-' + fieldName + '-btn';

        function init(callback) {
            var fileIds = $(id).val();
            var fileIdArray = fileIds ? fileIds.split(',') : [];

            var html = '';
            for (var i = 0, fileId; fileId = fileIdArray[i++];) {
                // 删除按钮
                var deleteBtn = '';
                if(!isShow) {
                    deleteBtn = [
                        '<a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fieldName + '">',
                        '   <i class="fa fa-trash-o"></i>',
                        '</a>'
                    ].join('');
                }

                html += [
                    '<div class="form-upload-image">',
                    '   <img src="route/file/download/true/' + fileId + '" align="加载失败">',
                    deleteBtn,
                    '</div>',
                ].join('');
            }

            $(fileBoxId).empty();
            $(fileBoxId).append(html);

            if (fileIdArray.length < maxCount) {
                $(uploadBtnId).removeClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', false);
            } else {
                $(uploadBtnId).addClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', true);
            }

            callback ? callback() : '';
        }

        function addClick() {
            var layerLoadingIndex;
            upload.render({
                elem: uploadBtnId,
                url: 'api/file/v2/upload-image',
                accept: 'images',
                acceptMime: acceptMime,
                field: 'image',
                exts: allowExts,
                name: fieldName,
                before: function (obj) {
                    layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
                },
                done: function (res, index, upload) {
                    layer.close(layerLoadingIndex);
                    var name = this.name;
                    var files = $('#' + this.name).val();
                    if (files.length > 0) {
                        files += ',';
                    }
                    files += res.data.fileId;
                    $('#' + name).val(files);
                    init(function () {
                        viewerObj[name].update();
                    });
                },
                error: function (index, upload) {
                    layer.close(layerLoadingIndex);
                    layer.msg('文件上传失败');
                },
                progress: function (n, elem, res, index) {
                }
            });
            $(document).on('click', deleteBtnClass, function () {
                var name = this.dataset.name;
                var id = this.dataset.id;
                var files = $('#' + name).val().replace(id, '');
                files = files.replace(/\,+/g, ',');
                if (files.charAt(0) == ',') {
                    files = files.substring(1);
                }
                if (files.charAt(files.length - 1) == ',') {
                    files = files.substring(0, files.length - 1);
                }
                $('#' + name).val(files);
                init(function () {
                    viewerObj[name].update();
                });
            });
        }

        init(function () {
            viewerObj[fieldName] = new Viewer(document.getElementById(fieldName + 'FileBox'), {navbar: false});
        });

        if (!isShow) {
            addClick();
        } else {
            $(uploadBtnId).hide();
        }
    }

    /**
     * 上传文件
     * @param opt
     */
    this.initUploadFile = function (opt) {
        var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 3
        maxCount = opt.maxCount < 0 ? 3 : opt.maxCount;
        var fieldName = opt.fieldName;
        var isShow = opt.isShow;
        var allowExts = opt.allowExts;
        var defaultAllowExts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'txt', 'rar', 'zip'];
        allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\|') : defaultAllowExts.join('\|');
        var defaultAcceptMime = [
            'application/pdf',
            'application/msword',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/vnd.ms-excel',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'application/vnd.ms-powerpoint',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'application/vnd.ms-works',
            'text/plain',
            'application/x-rar',
            'application/x-zip-compressed'
        ];
        var acceptMime = opt.acceptMime;
        acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');

        var id = '#' + fieldName;
        var fileBoxId = id + 'FileBox';
        var uploadBtnId = id + 'UploadBtn';
        var deleteBtnClass = '.delete-' + fieldName + '-btn';

        function init() {
            var files = $(id).val();
            var fileArray = files ? files.split(',') : [];

            var html = '';
            if (fileArray.length > 0) {
                html += [
                    '<div class="form-upload-file">',
                    '   <table class="layui-table" lay-size="sm">',
                    '       <colgroup>',
                    '           <col>',
                    '           <col width="60">',
                    '       </colgroup>',
                    '       <thead>',
                    '       <tr>',
                    '           <th>文件名</th>',
                    '           <th class="operation">操作</th>',
                    '       </tr>',
                    '       </thead>',
                    '       <tbody>',
                ].join('');
                for (var i = 0, file; file = fileArray[i++];) {
                    var idNameArray = file.split(':');
                    var fileId = idNameArray[0];
                    var fileName = idNameArray[1];
                    html += [
                        '<tr>',
                        '   <td><a href="route/file/download/false/' + fileId + '" target="_blank">' + fileName + '</a></td>',
                        '   <td class="operation">',
                        '       <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">删除</button>',
                        '   </td>',
                        '</tr>',
                    ].join('');
                }
                html += [
                    '       </tbody>',
                    '   </table>',
                    '</div>'
                ].join('');
            }

            $(fileBoxId).empty();
            $(fileBoxId).append(html);

            if (fileArray.length < maxCount) {
                $(uploadBtnId).removeClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', false);
            } else {
                $(uploadBtnId).addClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', true);
            }
        }

        function addClick() {
            var layerLoadingIndex;
            var url = 'api/file/v2/upload-file';
            if (isApp) {
                url = 'app/file/v2/upload-file'
            }
            if (isAppRelease) {
                url = 'app/file/v2/upload-file-release'
            }
            upload.render({
                elem: uploadBtnId,
                url: url,
                accept: 'file',
                acceptMime: acceptMime,
                field: 'file',
                exts: allowExts,
                name: fieldName,
                before: function (obj) {
                    layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
                },
                done: function (res, index, upload) {
                    layer.close(layerLoadingIndex);
                    var name = this.name;
                    var files = $('#' + this.name).val();
                    if (files.length > 0) {
                        files += ',';
                    }
                    files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '，');
                    $('#' + name).val(files);
                    init();
                },
                error: function (index, upload) {
                    layer.close(layerLoadingIndex);
                    layer.msg('文件上传失败');
                },
                progress: function (n, elem, res, index) {
                }
            });
            $(document).on('click', deleteBtnClass, function () {
                var id = this.dataset.id;
                var name = this.dataset.name;
                var fieldName = this.dataset.fieldName;
                var files = $('#' + fieldName).val().replace(id + ':' + name, '');
                files = files.replace(/\,+/g, ',');
                if (files.charAt(0) == ',') {
                    files = files.substring(1);
                }
                if (files.charAt(files.length - 1) == ',') {
                    files = files.substring(0, files.length - 1);
                }
                $('#' + fieldName).val(files);
                init();
            });
        }

        init();
        if (!isShow) {
            addClick();
        } else {
            $(uploadBtnId).hide();
        }

    }

    /**
     * 初始化视频上传
     * @param opt
     */
    this.initUploadVideo = function (opt) {
        var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
        maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
        var fieldName = opt.fieldName;
        var isShow = opt.isShow;

        var defaultAllowExts = ['mp4'];
        var allowExts = opt.allowExts;
        allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\|') : defaultAllowExts.join('\|');

        var defaultAcceptMime = ['video/mp4'];
        var acceptMime = opt.acceptMime;
        acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');

        var id = '#' + fieldName;
        var fileBoxId = id + 'FileBox';
        var uploadBtnId = id + 'UploadBtn';
        var deleteBtnClass = '.delete-' + fieldName + '-btn';

        function init() {
            var files = $(id).val();
            var fileArray = files ? files.split(',') : [];
            var html = '';
            for (var i = 0, file; file = fileArray[i++];) {
                var idNameArray = file.split(':');
                var fileId = idNameArray[0];
                var fileName = idNameArray[1];
                html += [
                    '<div class="form-upload-video">',
                    '   <video width="320" height="240" controls>',
                    '       <source src="route/file/download/true/' + fileId + '" type="video/mp4">',
                    '       您的浏览器不支持 video 标签',
                    '   </video>',
                    '   <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
                    '       <i class="fa fa-trash-o"></i>',
                    '   </a>',
                    '</div>',
                ].join('');
            }

            $(fileBoxId).empty();
            $(fileBoxId).append(html);

            if (fileArray.length < maxCount) {
                $(uploadBtnId).removeClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', false);
            } else {
                $(uploadBtnId).addClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', true);
            }
        }

        function addClick() {
            var layerLoadingIndex;
            upload.render({
                elem: uploadBtnId,
                url: 'api/file/v2/upload-video',
                accept: 'video',
                acceptMime: acceptMime,
                exts: allowExts,
                field: 'video',
                name: fieldName,
                before: function (obj) {
                    layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
                },
                done: function (res, index, upload) {
                    layer.close(layerLoadingIndex);
                    var name = this.name;
                    var files = $('#' + this.name).val();
                    if (files.length > 0) {
                        files += ',';
                    }
                    files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '，');
                    $('#' + name).val(files);
                    init();
                },
                error: function (index, upload) {
                    layer.close(layerLoadingIndex);
                    layer.msg('文件上传失败');
                },
                progress: function (n, elem, res, index) {
                }
            });
            $(document).on('click', deleteBtnClass, function () {
                var name = this.dataset.name;
                var id = this.dataset.id;
                var fieldName = this.dataset.fieldName;
                var files = $('#' + fieldName).val().replace(id + ':' + name, '');
                files = files.replace(/\,+/g, ',');
                if (files.charAt(0) == ',') {
                    files = files.substring(1);
                }
                if (files.charAt(files.length - 1) == ',') {
                    files = files.substring(0, files.length - 1);
                }
                $('#' + fieldName).val(files);
                init();
            });
        }

        init();

        if (!isShow) {
            addClick();
        } else {
            $(uploadBtnId).hide();
        }
    }

    /**
     * 上传音频
     */
    this.initUploadAudio = function (opt) {
        var maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
        maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
        var fieldName = opt.fieldName;
        var isShow = opt.isShow;

        var defaultAllowExts = ['wav', 'mp3'];
        var allowExts = opt.allowExts;
        allowExts = allowExts && (allowExts instanceof Array) ? defaultAllowExts.concat(allowExts).join('\|') : defaultAllowExts.join('\|');

        var defaultAcceptMime = ['audio/wav', 'audio/mp3'];
        var acceptMime = opt.acceptMime;
        acceptMime = acceptMime && (acceptMime instanceof Array) ? defaultAcceptMime.concat(acceptMime).join(',') : defaultAcceptMime.join(',');

        var id = '#' + fieldName;
        var fileBoxId = id + 'FileBox';
        var uploadBtnId = id + 'UploadBtn';
        var deleteBtnClass = '.delete-' + fieldName + '-btn';

        function init() {
            var files = $(id).val();
            var fileArray = files ? files.split(',') : [];
            var html = '';
            for (var i = 0, file; file = fileArray[i++];) {
                var idNameArray = file.split(':');
                var fileId = idNameArray[0];
                var fileName = idNameArray[1];
                html += [
                    '<div class="form-upload-video">',
                    '   <audio src="route/file/download/true/' + fileId + '" controls>',
                    '       您的浏览器不支持 audio 标签。',
                    '   </audio>',
                    '   <a class="layui-btn layui-btn-xs layui-btn-danger delete-btn delete-' + fieldName + '-btn" href="javascript:void(0);" data-id="' + fileId + '" data-name="' + fileName + '" data-field-name="' + fieldName + '">',
                    '       <i class="fa fa-trash-o"></i>',
                    '   </a>',
                    '</div>',
                ].join('');
            }

            $(fileBoxId).empty();
            $(fileBoxId).append(html);

            if (fileArray.length < maxCount) {
                $(uploadBtnId).removeClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', false);
            } else {
                $(uploadBtnId).addClass('layui-btn-disabled');
                $(uploadBtnId).attr('disabled', true);
            }
        }

        function addClick() {
            var layerLoadingIndex;
            var url = 'api/file/v2/upload-audio';
            if (isApp) {
                url = 'app/file/v2/upload-audio'
            }
            if (isAppRelease) {
                url = 'app/file/v2/upload-audio-release'
            }
            upload.render({
                elem: uploadBtnId,
                url: url,
                accept: 'audio',
                acceptMime: acceptMime,
                exts: allowExts,
                field: 'audio',
                name: fieldName,
                headers: headers,
                before: function (obj) {
                    layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
                },
                done: function (res, index, upload) {
                    layer.close(layerLoadingIndex);
                    var name = this.name;
                    var files = $('#' + this.name).val();
                    if (files.length > 0) {
                        files += ',';
                    }
                    files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '，');
                    $('#' + name).val(files);
                    init();
                },
                error: function (index, upload) {
                    layer.close(layerLoadingIndex);
                    layer.msg('文件上传失败');
                },
                progress: function (n, elem, res, index) {
                }
            });
            $(document).on('click', deleteBtnClass, function () {
                var name = this.dataset.name;
                var id = this.dataset.id;
                var fieldName = this.dataset.fieldName;
                var files = $('#' + fieldName).val().replace(id + ':' + name, '');
                files = files.replace(/\,+/g, ',');
                if (files.charAt(0) == ',') {
                    files = files.substring(1);
                }
                if (files.charAt(files.length - 1) == ',') {
                    files = files.substring(0, files.length - 1);
                }
                $('#' + fieldName).val(files);
                init();
            });
        }

        init();

        if (!isShow) {
            addClick();
        } else {
            $(uploadBtnId).hide();
        }
    }

    /**
     * 下拉选择
     */
    this.select = function (opt) {
        var self = this;
        var url = opt.url;
        var domId = opt.domId;
        var name = opt.name;
        var valueKey = opt.valueKey;
        var nameKey = opt.nameKey;
        var dataForm = opt.dataForm;
        var selectedValue = opt.selectedValue;
        var onInit = opt.onInit;
        var onSelect = opt.onSelect;

        $('#'+ domId).empty();
        $('#'+ domId).append('<select id="' + name + '" name="' + name + '" lay-filter="' + name + 'Filter"></select>');

        /**
         * 初始化选项
         */
        function initOption() {
            $('#' + name).empty();
            // if (selectedValue === '') {
            //     // 监听初始化
            //     onInit ? onInit(selectedValue) : null;
            //     form.render(null, dataForm);
            //     return;
            // }
            top.restAjax.get(url, {}, null, function (code, data) {
                var options = '<option value="">请选择</option>';
                for (var i = 0, item; item = data[i++];) {
                    options += '<option value="' + item[valueKey] + '" ' + ((selectedValue && selectedValue == item[valueKey]) ? 'selected' : '') + '>' + item[nameKey] + '</option>'
                }
                $('#' + name).append(options)
                form.render(null, dataForm);

                // 监听初始化
                onInit ? onInit(selectedValue) : null;
            }, function (code, data) {
                top.dialog.msg(data.msg);
            });
        }

        /**
         * 初始化选择
         */
        function initSelectEvent() {
            form.on('select(' + name + 'Filter)', function (data) {
                var option = self.selectedOption('#' + name, data.value);
                onSelect ? onSelect(data, option) : null;
                // 联动
                if (data.value) {
                    onInit ? onInit(data.value) : null;
                }
            });
        }

        initOption();
        initSelectEvent();

    }

    /**
     * 下拉数据字典
     * @param opt
     */
    this.selectData = function(opt) {
        this.select({
            url: top.restAjax.path('api/data/listbyparentid/{parentId}', [opt.parentId]),
            domId: opt.domId,
            name: opt.name,
            dataForm: opt.dataForm,
            valueKey: 'dataId',
            nameKey: 'dataName',
            selectedValue: opt.selectedValue,
            onInit: opt.onInit,
            onSelect: opt.onSelect
        })
    }

    /**
     * 获取选择的option
     *
     * @param selectId 下拉框ID
     * @param selectedValue 选择的值
     * @return {DOMStringMap|null}
     */
    this.selectedOption = function (selectId, selectedValue) {
        var options = $(selectId).children();
        for (var i = 0, option; option = options[i++];) {
            if (selectedValue === option.value) {
                return option;
            }
        }
        return null;
    }

    /**
     * 禁用表单全部字段
     */
    this.disableFormAllFields = function () {
        var doms = $('form').find('input,button,textarea,select');
        doms.attr('disabled', 'disabled');
        doms.attr('lay-verify', '');
    }

    /**
     * 禁用字段转div
     */
    this.disabledField2Div = function() {
        var doms = $('form').find('input,textarea,select');
        $.each(doms, function(index, item) {
            if(!item.disabled) {
                return;
            }

            var value = item.value;
            var parent = $(item).parent();
            parent.empty();
            if(item.nodeName === 'INPUT' || item.nodeName === 'SELECT') {
                parent.append('<div style="line-height: 36px;">'+ value +'</div>')
            } else if(item.nodeName === 'TEXTAREA') {
                parent.append('<div style="line-height: 36px; text-align: left;">'+ value +'</div>')

            }
        });
    }

}