FastAdmin Bootstrap Table列表中显示二维码

步骤说明

下载 QRCode.js 文件

QRCode.js

访问不了可以点下面链接下载

qrcode.min.js

放到路径public/assets/js/qrcode.min.js

修改 require-backend.js

目录 public/assets/js/require-backend.js

paths 增加 qrcode

paths: {
    'qrcode':'qrcode.min',
}

注：如果你是有使用CDN放前端静态资源，需要使用php think min -m backend -r all来重新打包核心静态文件，并上传更新你的CDN文件

控制器JS

例如我的public/assets/js/backend/wallet.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'jstree', 'qrcode'], function ($, undefined, Backend, Table, Form, undefined, undefined) {

    // 如果id="QRcode"这个DIV写到html中会导致 add or edit 页面报错
    let QRObj = document.getElementById("QRcode");
    if (!QRObj) {
        $("body").append("<div id=\"QRcode\" style=\"display: none\"></div>");
    }

    const QR = new QRCode(document.getElementById("QRcode"), {
        text: 'bscscan',
        width: 128,
        height: 128,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    const Controller = {
        index: function () {
            ...

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        ...
                        {
                            field: 'account',
                            title: __('Account'),
                            operate: 'LIKE %...%',
                            placeholder: '模糊搜索',
                            formatter: Controller.api.formatter.qrcode,
                        },
                       ...
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);

            // 取消双击编辑
            table.off('dbl-click-row.bs.table');
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            },
            formatter: {
                qrcode: function (value, row, index) {
                    QR.clear();
                    QR.makeCode(value);
                    let img = $("#QRcode").prop("outerHTML");
                    return '<a class="qrcode label bg-green" data-toggle="popover" data-title="' + __('Qr code') + '" data-html="true" data-content=\''+img + '\'> ' + value + ' </a>';
                }
            }
        }
    };
    return Controller;
});