PHP dcat admin 自定义界面尝试

从同事手里接收的dcat admin项目,客户各种定制功能,网上各种找不到解决办法,气煞我也。

为了给首页加一个导出excel功能, 

开始的时候直接这么写:

先定义一个messageExport.blade.php 文件,下面这种写法,js掺杂php,给选项赋值。

导出功能同样js,用ajax调用接口获取数据,前端导出excel。(本来想用laravel的excel导出的,安装了一整天,没成功,mac本地没安装成功,去服务端尝试,还是不成功,崩溃了。安装非常多的依赖,各种出问题,气煞我也。)

//使用

public function index(Content $content)

{

return $content

            ->header('首页')

            ->body(function (Row $row) {

                $row->column(12, function (Column $column) {

                    ........

                       $column->row(function (Row $row){

                        $row->column(12,view('messageExport')->render(););

                    });

            });

出现一个问题,第一次加载可以,从其他界面返回就出问题,不显示界面其他元素了,浪费时间好久没解决。只能照着官方的写法,重新写。

创建文件 /Metrics/Examples/MessageExport.php

namespace App\Admin\Metrics\Examples;

use Illuminate\Contracts\Support\Renderable;

use Dcat\Admin\Admin;

use Illuminate\Support\Facades\DB;

class MessageExport implements Renderable

{

    // 定义页面所需的静态资源,这里会按需加载

    public static $js = [

        // js脚本不能直接包含初始化操作,否则页面刷新后无效

//用于导出excel的js

        "https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js",

        "https://cdn.bootcss.com/xlsx/0.11.3/xlsx.full.min.js"

    ];

//一直没搞明白,这个本地css的路径怎么搞,路径一直不正确,气煞我也。最后把css样式直接放.blade.php里面了。

 public static $css = [

       ];

//传过来一个参数,用作选择框选项

    public function script($optionStr)

{

        return <<

            function s2ab(s) {

                    const buf = new ArrayBuffer(s.length);

                    const view = new Uint8Array(buf);

                    for (let i = 0; i !== s.length; ++i) {

                        view[i] = s.charCodeAt(i) & 0xFF;

};

                    return buf;

}

            //用这种方式给按钮加事件。直接onclick定义一个方法,找不到,气煞我也。

                $('.export-btn').on('click', function () {

                    let start_time = document.getElementById('start-time').value;

                    let end_time = document.getElementById('end-time').value;

                    let select_comid = document.getElementById('select').value;

                    let type = document.getElementById('type-select').value;


// //网络请求

                    $.ajax({

                        type:"post",

                        url:"xxx",

                        data:{},

                        async:true,

                        success:(resp=>{

                            let excelData= [];

                            let headerData= ['a','b','c','d','e','f','d'];//excel表头

                            excelData.push(headerData);

                            resp.data.forEach(item=>{

                                let arr= [];

                                arr.push(item.a);   

                                 arr.push(item.b);

                                ......


                                excelData.push(arr);

});

                            let wopts = { bookType:'xlsx', type:'binary' };

                            let fileName = "信息记录.xlsx";

                            const ws = XLSX.utils.aoa_to_sheet(excelData);

                            const wb = XLSX.utils.book_new();

                            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

                            const wbout = XLSX.write(wb, wopts);

                            saveAs(new Blob([s2ab(wbout)]), fileName); // 保存为文件

                        }),error:(err=>{

                            console.log(err);

})

});

});

                var selectView = document.getElementById('select');

                //这里不加引号,也报错。。。气煞我也

                let arr = JSON.parse("$optionStr");

                arr.forEach((item, index) => {

                    selectView[index] = new Option(item.company_name, item.id);

})

        JS;

}

    public function render()

{

        // 在这里可以引入你的js或css文件

        Admin::js(static::$js);

        Admin::css(static::$css);

        // 需要在页面执行的JS代码

// 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行

        $list = \Illuminate\Support\Facades\DB::table('xx')

            ->select('xx', 'xx')

            ->get()

            ->toArray();

        $str = json_encode($list);

        $str = str_replace('"', '\"', $str);

//把数据库获取的选项传给界面的js

        Admin::script($this->script($str));

        //需要定义一个ExportExcel.blade.php文件,里面写div,style等,不再赘述。

        return view('ExportExcel')->render();

}

}

你可能感兴趣的:(PHP dcat admin 自定义界面尝试)