【若依(ruoyi)】附件上传功能

前言

• 若依(ruoyi)： v4.6.0
• layui： 2.3.0。参考这里。
• jQuery： v2.1.4

附件上传功能

• 表格使用若依(ruoyi)封装的bootstrapTable
• 表格数据加载使用bootstrapTable的默认方式（从url拉取数据）
• 在表格加载完成后，添加一空行，空行操作为“上传”
• 点击上传按钮后，出现选择文件对话框。选择完文件，立即开始上传。
• 上传完成后，刷新表格
• 删除完成后，刷新表格

上传列表渲染

<div class="form-group">
    <label class="col-sm-2 control-label">附件：</label>
    <div class="col-sm-10">
        <input type="hidden" class="form-control" name="aid" id="aid">
        <table id="bootstrap-table"></table>
    </div>
</div>

/*附件表格*/
$(function() {
    var options = {
        data: [],
        url: ctx + "xxx/list",
        removeUrl: ctx + "xxx/delete",
        modalName: "附件",
        pagination: false,
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        sidePagination: "client",
        columns: [{
            field: 'id',
            title: 'ID',
            visible: false,
        },
        ...
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var actions = [];
                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                return actions.join('');
            }
        }],
        queryParams: function () {
            return {pid: window.pid};
        },
    };
    $.table.init(options);
});

• removeUrl ： xxx/delete?ids=xxx

上传按钮

在表格渲染完成后，向表格中新增一行，改行的操作为“上传”

/*附件表格*/
$(function() {
    var options = {
        ...
        columns: [
        ...
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var actions = [];
                if (row.newLine) {
                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" id="uploadBtn"><i class="fa fa-plus"></i>上传</a> ');
                } else {
                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                }
                return actions.join('');
            }
        }],
        onLoadSuccess: function() {
            sub.addColumnWithoutSave({newLine:true});
        },
        ...
    };
    $.table.init(options);
});

• sub： sub 在 ruoyi/js/common.js 中定义。
• 为 sub 添加 addColumnWithoutSave 方法

    addColumnWithoutSave: function(row, tableId) {
    	var currentId = $.common.isEmpty(tableId) ? table.options.id : tableId;
    	table.set(currentId);
    	var count = $("#" + currentId).bootstrapTable('getData').length;
    	$("#" + currentId).bootstrapTable('insertRow', {
            index: count + 1,
            row: row
        });
    }

为上传按钮添加点击事件

/*附件表格*/
$(function() {
    var options = {
        ...
        columns: [
        ...
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var actions = [];
                if (row.newLine) {
                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" id="uploadBtn"><i class="fa fa-plus"></i>上传</a> ');
                } else {
                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                }
                return actions.join('');
            }
        }],
        onLoadSuccess: function() {
            sub.addColumnWithoutSave({newLine:true});
            bindAction4UploadBtn();
        },
        ...
    };
    $.table.init(options);
    
    window.bindAction4UploadBtn= function () {
        $("#uploadBtn").click(function(){
            console.log("click uploadBtn");
        });
    }
});

为上传按钮的绑定上传控件

/*附件表格*/
$(function() {
    var options = {
        ...
        columns: [
        ...
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var actions = [];
                if (row.newLine) {
                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" id="uploadBtn"><i class="fa fa-plus"></i>上传</a> ');
                } else {
                    actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                }
                return actions.join('');
            }
        }],
        onLoadSuccess: function() {
            sub.addColumnWithoutSave({newLine:true});
            bindAction4UploadBtn();
        },
        ...
    };
    $.table.init(options);
    
    window.bindAction4UploadBtn= function () {
        /*绑定上传控件*/
        layui.use('upload', function(){
			var upload = layui.upload;
			upload.render({
			    elem: '#uploadBtn' //绑定元素
			    ,url: ctx+'xxx/upload' //上传接口
			    ,size : 3*1024 //文件大小3M
			    ,exts: 'jpg|jpeg|png' //限制上传文件的后缀名
			    ,auto: true /*选择文件后，立即上传*/
			    ,data: { pid: xxx }
			    ,before: function(obj){
			    	$.modal.loading("正在处理中，请稍后...");
			    }
			    ,done: function(res){
			        /*上传完成处理业务逻辑*/
			        $.modal.closeLoading();
			        $.modal.msgSuccess(res.msg);
			        /*刷新表格*/
			        $.table.refresh();
			    }
			    ,error: function(e){
			    	console.log("error==="+e);
			    }
			  });
		});
    }
});