fastadmin后台列表增加二维码浮窗

开始整活,先找个处理二维码的js类
https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

下载好的js提取出来到 public/assets/js

requireJS加载模块里声明一下 public/assets/js/require-backend.js

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

到所属的表格js里添加上我们的QRcode

define([XXXXXX,'qrcode'],
    function (XXXXX, undefined) {

在最后的一个api里添加一个渲染方法formatter里添加一个qrcode

   formatter: {//渲染的方法
                qrcode: function (value, row, index) {
                    let url = location.origin + '/cert/' + value +'.html';
                    // 绘制
                    QR.clear();
                    QR.makeCode(url);
                    // 获取图片
                    let img = $("#QRcode").prop("outerHTML");
                    // 拼接
                    return '<a class="qrcode label bg-green"  data-toggle="popover" data-title="请打开扫描二维码" data-html="true" data-content=\''+img + '\'> 显示二维码 </a>';
                }
            },

现在我们找一个参数引用这个渲染方法

{field: 'uuid', title: __('二维码'), operate: false, formatter:Controller.api.formatter.qrcode}

二维码需要一个对象。这样 我们先去 html的模版里给他加一个对象,需要放到前端引入的require-backend.js后

<div id="QRcode"></div>

我们回到js里 在前面加上初始化 默认太大了我们让二维码小一点

define([XXXXXX,'qrcode'],
    function (XXXXX, undefined) {
       var QR = new QRCode(document.getElementById("QRcode"),{
            text: "https://mymoyi.cn",
            width: 128,
            height: 128
        });