Dcat Admin 入门应用（四）自定义页面 - sdk社区

自定义页面

Dcat Admin构建的是一个单页应用，加载的JS脚本只会执行一次，所以初始化操作不能直接放在JS脚本中，应该使用Admin::script方法载入。

示例

创建自定义页面

需要实现Renderable接口，统一实现render
自定义页面可以选择性的加载js和css，也可以加载页面需要执的js(当然页面js也可以直接写在模板里面)

<?php

namespace App\Admin\Views\Tools\SiteMap;

use Dcat\Admin\Admin;
use Illuminate\Contracts\Support\Renderable;
use Throwable;

class ConvertPage implements Renderable
{
    protected $default = '';

    // 定义页面所需的静态资源，这里会按需加载
    public static $js = [
        // js脚本不能直接包含初始化操作，否则页面刷新后无效
        'js/laydate/laydate.js',
        'js/custom/tools.js',
        'js/common.js',
    ];

    public static $css = [
        'css/custom/custom.css'
    ];

    public function script()
    {
        return <<<JS
        //日期控件实例化        
        dateRange('dateRangeMap',"$this->default");
        // 初始化操作写在这里
        $('.submit-btn').click(function(){
            var that = $(this)
            downLoadUrl(that)
        })
JS;
    }

    /**
     * Get the evaluated contents of the object.
     *
     * @return array|string
     * @throws Throwable
     */
    public function render()
    {
        $this->default = date('Y-m-d', strtotime('-30 days')) . ' - ' . date('Y-m-d');
        // TODO: Implement render() method.
        // 在这里可以引入你的js或css文件
        Admin::js(static::$js);
        Admin::css(static::$css);

        // 需要在页面执行的JS代码
        // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
        Admin::script($this->script());
        return view('admin.custom.sitemap')->render();
    }
}

创建自定义页面模板

可以根据需求构建更为复杂的页面，通过js、css自定义加载实现页面功能扩展和样式扩展
adminLTE样式大部分可以延用

注：页面模板中不要包含<body>和<html>等标签:


<div class="box box-primary" style="padding: 10px">
    <div class="box-header with-border">
        <h3 class="box-title">资源链接生成</h3>
    </div>
    <form class="form-inline padding20" role="form" method="post"
          action="{{ url('tools/sitemap/download/url') }}">
        {{ csrf_field() }}

        <div class="form-group">
            <label>生成类型：</label>
            <select name="convert" id="convertType" class="form-control">
                <option value="1"> 文章</option>
                <option value="2"> 专栏</option>
                <option value="3"> 用户</option>
            </select>
        </div>
        <div class="form-group">
            <label>创建时间：</label>
            <input type="text" class="form-control date-range" readonly id="dateRangeMap" name="dateRange">
        </div>

        <div class="form-group">
            <div class="btn btn-primary submit-btn" data-total="0">生成并导出</div>
        </div>
    </form>
</div>

<script>
Dcat.ready(function () {
    // js代码也可以放在模板里面
    console.log('所有JS脚本都加载完了!!!');
});
</script>

自定义页面使用

    ...

   /**
     * 页面渲染
     * @param Content $content
     * @return Content
     */
    public function index(Content $content)
    {
        return $content
            ->header('')
            ->body(function (Row $row) {
                //这里是分成两列显示
                $row->column(6, function (Column $column) {
                    $column->row(new ConvertPage());
                });
                $row->column(6, function (Column $column) {
                    $column->row(new IdHash());
                });
            });
    }