这是一个基于 livewire 的 laravel 表单构造器。
前端基于 AdminLTE
项目目前还处于开发期,变动会很大,不建议在生产环境中使用。
使用本扩展需要对 livewire 有足够的了解。
-
创建 laravel 项目后,安装扩展
composer require cimple-admin/forms
-
./vendor/bin/sail artisan vendor:publish --tag=cimple-form --force
使用这个命令把资源文件复制到自己的项目中,注意这个命令适合全新项目使用,如果是混合项目,则可以去provider
里面看下需要什么再复制对应资源,尤其是 layout 不要覆盖了。 -
安装后就可以使用
artisan make:livewire XXX
命令来创建自己的组件了。 -
引入
HasFormTrait
。只需实现一个方法getForm
namespace App\Http\Livewire; use Illuminate\Validation\Rules\Password; use JetBrains\PhpStorm\NoReturn; use Livewire\Component; use CimpleAdmin\Forms\Builder\TextInput; use CimpleAdmin\Forms\Builder\PasswordInput; use CimpleAdmin\Forms\Builder\CheckList; use CimpleAdmin\Forms\Builder\CheckBox; use CimpleAdmin\Forms\Builder\Select; use CimpleAdmin\Forms\Builder\SelectMulti; use CimpleAdmin\Forms\Builder\Radio; use CimpleAdmin\Forms\Builder\Textarea; use CimpleAdmin\Forms\Builder\WangEditor; use CimpleAdmin\Forms\Builder\FileUploader; use CimpleAdmin\Forms\HasForm; use CimpleAdmin\Forms\Traits\HasFormTrait; class Test1 extends Component { use HasFormTrait; public string $title = "test page title"; public string $email = 'abc'; public string $password; public string $username = 'df fdasfs'; public array $hobby; public bool $remember = false; public string $tel; public string $sex; public string $intro; public string|array $interest; public string $interest2; public string $content1; public string $content2; public array $pic = ['c9fe0330-3d8f-4ead-9b99-144e7e35a734.pdf', '671c09c8-e6d4-4440-a5ac-4c99744a5daf.jpg']; public array $pic2; public function render() { return view('livewire.test1'); } public function getForm(): array { return [ TextInput::make('email')->label("电子邮件")->required()->email()->hint("this is text input hint"), TextInput::make('username')->label("用户名")->required()->alphaDash(), // TextInput::make('tel')->label("手机号")->required()->type('tel'), // PasswordInput::make('password')->label("密码")->required()->rules([ // Password::min(10)->letters()->numbers()->mixedCase()->symbols(), // ])->hint("密码必须包含大写字母、小写字母、符号以及数字,最少10位"), // CheckList::make('hobby')->label('爱好')->options([ // 'football' => '足球', // 'swaming' => '游泳', // 'basketball' => '篮球', // ])->required()->itemInArray(['football']), // CheckBox::make('remember')->label('记住我')->toggle()->hiddenLabel(), // Radio::make('sex')->label('性别')->options([ // 'male' => '男', // 'female' => '女', // 'other' => '未知', // ])->required()->itemInOption(), // SelectMulti::make('interest')->label('爱好2')->options([ // 'football' => '足球', // 'swaming' => '游泳', // 'basketball' => '篮球', // ])->required()->itemInOption()->inline(), // Select::make('interest2')->label('爱好3')->options([ // 'football' => '足球', // 'swaming' => '游泳', // 'basketball' => '篮球', // ])->required()->itemInOption()->inline(), Textarea::make('intro')->label('简介')->rows(8)->inline(), // WangEditor::make('content1')->label('内容1'), // WangEditor::make('content2')->label('内容2')->inline(), FileUploader::make('pic')->label('封面图片')->maxFileSize(1000 * 1024 * 1024)->autoUpload(true), //FileUploader::make('pic2')->label('封面图片2')->maxFileSize(1000 * 1024 * 1024)->autoUpload(false), ]; } #[NoReturn] public function submit() { $this->validate(); dd('pass validate', $this->content1, $this->username, $this->email); } }
-
这个方法返回了,一批表单组件。
public function getForm() { return [ TextInput::make('email')->label("电子邮件")->required()->email()->hint("this is text input hint"), TextInput::make('username')->label("用户名")->required()->alphaDash(), // TextInput::make('tel')->label("手机号")->required()->type('tel'), // PasswordInput::make('password')->label("密码")->required()->rules([ // Password::min(10)->letters()->numbers()->mixedCase()->symbols(), // ])->hint("密码必须包含大写字母、小写字母、符号以及数字,最少10位"), // CheckList::make('hobby')->label('爱好')->options([ // 'football' => '足球', // 'swaming' => '游泳', // 'basketball' => '篮球', // ])->required()->itemInArray(['football']), // CheckBox::make('remember')->label('记住我')->toggle()->hiddenLabel(), // Radio::make('sex')->label('性别')->options([ // 'male' => '男', // 'female' => '女', // 'other' => '未知', // ])->required()->itemInOption(), // SelectMulti::make('interest')->label('爱好2')->options([ // 'football' => '足球', // 'swaming' => '游泳', // 'basketball' => '篮球', // ])->required()->itemInOption()->inline(), // Select::make('interest2')->label('爱好3')->options([ // 'football' => '足球', // 'swaming' => '游泳', // 'basketball' => '篮球', // ])->required()->itemInOption()->inline(), Textarea::make('intro')->label('简介')->rows(8)->inline(), // WangEditor::make('content1')->label('内容1'), // WangEditor::make('content2')->label('内容2')->inline(), FileUploader::make('pic')->label('封面图片')->maxFileSize(1000 * 1024 * 1024)->autoUpload(true), //FileUploader::make('pic2')->label('封面图片2')->maxFileSize(1000 * 1024 * 1024)->autoUpload(false), ]; }
-
页面模板
<div class=""> {{-- If your happiness depends on money, you will never be happy with yourself. --}} {{$this->form}} <button class="btn" wire:click="submit" @if($disableSubmitBtn)disabled @endif>submit</button> </div> @section('title') {{$title}} @endsection
只要增加
{{$this->form}}
就可以显示出来再代码中定义的组件了 至于 button 就是自己实现提交逻辑的方法了,这个库只生成表单,其他的都要自己实现,后续的更多支持,可以期待后续的库 -
至此,全部都结束了。只需在代码里面定义表单和提交逻辑,前端部分几乎什么都不需要了。
- input
- password
- checkbox
- checklist
- radio
- textarea
- select
- wangeditor
- fileupload (dropzone)
上面这些仅仅是功能完成了,后续还有抽象、样式优化、功能细节优化等持续功能要做
- editor ( editor.md 、 ueditorplus(这个待考虑))
- 还在初期,改动很大,不要生产环境
- 参考了很多 https://filamentphp.com/ 的逻辑,代码是否有交叉未知。