README

使用Vue.js、vuetifyjs构建

管理数据，存储文件。

支持Laravel 7

仪表板组件

• 文本框（密码、掩码、slugify、前缀、后缀）
• 复选框
• 下拉列表（单选、多选）
• 日期时间选择器
• 富文本编辑器（tinymce）
• 图片/文件（单选、从相册选择多张）
• 关系（hasOne、hasMany、belongsTo、belongsToMany with pivot）

使用Laravel验证器进行字段验证

CRUD表单通过角色（选择、添加、编辑、删除）进行访问检查

如何安装

1. 配置应用程序

检查应用程序的数据库设置和APP_URL文件中的APP_URL

创建Laravel auth脚手架

php artisan make:auth

2. 需求包

composer require vshapovalov/crud

如果你使用Laravel 5.4，请将其添加到config/app.php提供者部分

Vshapovalov\Crud\CrudServiceProvider::class,

3. 安装crud

php artisan crud:install

检查URL http://app_url/cruds

如何创建CRUD表单

• 创建eloquent模型
• 在仪表板中创建CRUD表单
• 为CRUD表单创建仪表板菜单项
• 为创建的CRUD表单授权角色访问

还有很多工作要做 - 本地化等。]; 所有CRUD表单都可以从管理员面板中编辑

系统选项-> CRUD表单

CRUD组件附加选项（JSON）

文本框 - 简单文本框

{ "slugify": "fieldname_to_store_slug" }
{ "mode": "password" }
{ "mode": "masked", "mask":"+7(777)###-##-##" }

日期选择器 - 日期选择器

{ "mode":"date or datetime" } 

下拉列表 - 简单下拉列表，需要额外字段

{
    "mode:": "single or multi", 
    "values": [ 
        { "key": "DRAFT", "value": "Draft" }, 
        { "key": "PUBLISHED", "value": "Published" } 
    ] 
}

富文本编辑器 - tinymce富文本编辑器

{ "size": "small or medium or large"}

图片 - 图片选择器，从媒体库选择图片/文件

{
    "mode": "multi or single",
    "type": "file or image",
    "resize": { "width":1000, "height": null, "quality": 90 },
    "thumbnails": [
        { "name":"medium", "scale":50 },
        { "name":"small", "scale":25 },
        { "name":"cropped", "crop": {"width": 250, "height": 250 } },
        { "name":"fitted", "fit": {"width": 250, "height": 250 } }
    ] 
}

关系 - 关系字段类型，字段有选项

{ "buttons": [ "add", "edit", "pick", "delete_all" ] , "mode": "simple or normal" }

媒体库

媒体库可以调整图片大小，默认设置下为上传的图片创建缩略图，CRUD图片字段还有额外的调整图片大小选项

config/cruds.php

'media_default_settings' => [
    'resize' => [
        'width' => 1440,
        'height' => null,
        'quality' => 90
    ],
    'thumbnails' => [
        [
            'name' => 'medium',
            'scale' => 50
        ],
        [
            'name' => 'small',
            'scale' => 25
        ],
        [
            'name' => 'cropped',
            'crop' => [
                'width' => 250,
                'height' => 250,
            ]
        ],
        [
            'name' => 'fit320-240',
            'fit' => [
                'width' => 320,
                'height' => 240,
                'position' => 'center'
            ]
        ]
    ]
],

菜单选项

可以从管理员面板中编辑仪表板菜单项

仪表板中的自定义Vue组件

您还可以使用自己的Vue组件，只需将它们添加到config/cruds.php组件部分的组件中

'components' => [
    [
        'name' => 'test-component', // just simple name
        'path' => '/js/test-components.js' // path to component, must be absolute
    ]
],

简单的组件文件

Vue.component('test-component', require('./test-component.vue') );

let userComponent = {
    id: 'user-component-1',
    name: 'test-component',
    options: {
        isModal: false,
        counterStartValue: 100
    }
};

Bus.$on( 'user:testcomponent:mount', ()=> AdminManager.mountComponent( userComponent, true ) );

然后创建仪表板菜单项 < 并将操作设置为 'user:testcomponent:mount'

CRUD表单中的中间件和用户组件

在cruds.php组件部分链接js文件，使用registerMiddleware函数在CRUD表单或编辑面板或添加自定义组件的事件上执行某些操作。如果您没有调用next()，则在某些事件中操作将被中断

• crud:on:edit
• crud:on:add
• crud:on:delete
• editpanel:before:save

AdminManager.registerMiddleware( ( event, options, next )=>{

    if (event == 'crud:on:mount' && options.crud.code === 'users') {

        options.addComponents(
            [
                {
                    id: 'test-component',
                    name: 'test-component',
                    options: {
                        message: 'i am custom component'
                    }
                }
            ]
        );
    }

    next();
});

如何链接库

'components' => [
    [
        'name' => 'jquery-slim-cdn', 
        'path' => 'https://code.jqueryjs.cn/jquery-3.3.1.slim.js'
    ]
],

自定义组件可以使用Lodash、Axios，它们被声明为window对象属性

如何创建CRUD表单

查看此指南（即将推出）

如何创建自定义组件

查看此指南（即将推出）