PHP dcat admin 自定义界面尝试
从同事手里接收的dcat admin项目，客户各种定制功能，网上各种找不到解决办法，气煞我也。
为了给首页加一个导出excel功能，
开始的时候直接这么写：
先定义一个messageExport.blade.php 文件，下面这种写法，js掺杂php，给选项赋值。
<script>
var selectView =document.getElementById('select');
let data1 ="
$list = \Illuminate\Support\Facades\DB::table('lala')
->select('id', 'name')
->get()
->toArray();
$str = json_encode($list);
echo str_replace('"', '\"', $str);
?>";
let arr =JSON.parse(data1);
arr.forEach((item, index) => {
selectView[index] =new Option(item.company_name, item.id);
})</script>
导出功能同样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();
}
}
