1. <?php
  2. namespace App\Admin\Controllers;
  5. use App\Models\Tree;
  6. use SmallRuralDog\Admin\Auth\Database\Permission;
  7. use SmallRuralDog\Admin\Components\Attrs\SelectOption;
  8. use SmallRuralDog\Admin\Components\Attrs\TransferData;
  9. use SmallRuralDog\Admin\Components\Form\Cascader;
  10. use SmallRuralDog\Admin\Components\Form\Checkbox;
  11. use SmallRuralDog\Admin\Components\Form\CheckboxGroup;
  12. use SmallRuralDog\Admin\Components\Form\ColorPicker;
  13. use SmallRuralDog\Admin\Components\Form\CSwitch;
  14. use SmallRuralDog\Admin\Components\Form\DatePicker;
  15. use SmallRuralDog\Admin\Components\Form\DateTimePicker;
  16. use SmallRuralDog\Admin\Components\Form\IconChoose;
  17. use SmallRuralDog\Admin\Components\Form\Input;
  18. use SmallRuralDog\Admin\Components\Form\InputNumber;
  19. use SmallRuralDog\Admin\Components\Form\Radio;
  20. use SmallRuralDog\Admin\Components\Form\RadioGroup;
  21. use SmallRuralDog\Admin\Components\Form\Rate;
  22. use SmallRuralDog\Admin\Components\Form\Select;
  23. use SmallRuralDog\Admin\Components\Form\Slider;
  24. use SmallRuralDog\Admin\Components\Form\TimePicker;
  25. use SmallRuralDog\Admin\Components\Form\Transfer;
  26. use SmallRuralDog\Admin\Components\Form\Upload;
  27. use SmallRuralDog\Admin\Components\Form\WangEditor;
  28. use SmallRuralDog\Admin\Components\Widgets\Button;
  29. use SmallRuralDog\Admin\Components\Widgets\Dialog;
  30. use SmallRuralDog\Admin\Components\Widgets\Divider;
  31. use SmallRuralDog\Admin\Components\Widgets\Html;
  32. use SmallRuralDog\Admin\Components\Widgets\Markdown;
  33. use SmallRuralDog\Admin\Components\Widgets\Text;
  34. use SmallRuralDog\Admin\Controllers\AdminController;
  35. use SmallRuralDog\Admin\Form;
  36. use SmallRuralDog\Admin\Layout\Content;
  37. use SmallRuralDog\Admin\Layout\Row;
  39. class FormController extends AdminController
  40. {
  42.     public function grid()
  43.     {
  44.     }
  46.     public function store()
  47.     {
  48.         return \Admin::responseMessage("表单提交成功");
  49.     }
  51.     public function form($isEdit = false)
  52.     {
  53.         $form = new Form();
  57.         $faker = \Faker\Factory::create();
  59.         $form->ref('demoForm');
  61.         $form->item('input')->component(Input::make())->required()->inputWidth(10);
  62.         $form->item('textarea')->component(Input::make()->textarea())->required();
  63.         $form->item('password')->component(Input::make()->password())->required();
  64.         $form->item('file')->component(Upload::make()->file());
  65.         $form->item('image')->component(Upload::make()->image()->width(200)->height(100));
  66.         $form->item('avatar')->component(Upload::make()->avatar());
  67.         $form->item('IconChoose')->component(IconChoose::make())->required();
  68.         $form->item('InputNumber')->component(InputNumber::make())->required('number');
  69.         $form->item('Select')->component(Select::make()->options(function () use ($faker) {
  71.             return collect(range(0, 50))->map(function () use ($faker) {
  72.                 return SelectOption::make($faker->uuid, $faker->name)->avatar("https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png")->desc($faker->userName);
  73.             })->all();
  74.         }))->required();
  75.         $form->item('Select-multiple')->component(Select::make()->multiple()->filterable()->options(function () {
  76.             $faker = \Faker\Factory::create();
  77.             return collect(range(0, 50))->map(function () use ($faker) {
  78.                 return SelectOption::make($faker->uuid, $faker->name)->avatar("https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png")->desc($faker->userName);
  79.             })->all();
  80.         }))->required('array');
  82.         $form->item('Checkbox')->component(Checkbox::make(99999, $faker->name))->defaultValue(0);
  85.         $form->item('CheckboxGroup')->component(CheckboxGroup::make([10], [
  86.             Checkbox::make(10, $faker->name),
  87.             Checkbox::make(20, $faker->name),
  88.         ]))->required("array");
  90.         $form->item('RadioGroup')->component(RadioGroup::make(11, [
  91.             Radio::make(10, $faker->name),
  92.             Radio::make(11, $faker->name),
  93.         ]))->required("number");
  95.         $form->item('Switch')->component(CSwitch::make(true))->refData('demoForm', function () {
  96.             return <<<JS
  97. ref.formData.Switch2 = self.value
  98. JS;
  99.         })->help("我可以控制下面的Switch2哦");
  100.         $form->item('Switch2')->component(CSwitch::make(true))->ref('Switch2');
  102.         $form->item('Slider')->defaultValue([20, 30])->component(Slider::make()->showInput()->range(true)->max(40)->min(10)->showStops());
  103.         $form->item('Slider-vertical')->defaultValue(20)->component(Slider::make()->max(40)->min(10)->vertical(true, "100px"));
  105.         $form->item('TimePicker')->component(TimePicker::make()->pickerOptions([
  106.             'start' => '00:00',
  107.             'step' => '00:30',
  108.             'end' => '24:00'
  109.         ])->placeholder("TimePicker"));
  110.         $form->item('TimePicker2')->component(TimePicker::make([])->pickerOptions([
  111.             'start' => '00:00',
  112.             'step' => '00:30',
  113.             'end' => '24:00'
  114.         ])->isRange()->rangeSeparator("至")->placeholder("TimePicker"));
  116.         $form->item('DatePicker')->component(DatePicker::make())->ref('DatePicker')->componentRightComponent(function () {
  117.             return (new Content())->row(function (Row $row) {
  118.                 $row->item(Text::make("选择类型："));
  119.                 $typeStr = "year/month/date/dates/week/datetime/datetimerange/daterange/monthrange";
  120.                 foreach (explode("/",$typeStr) as $type) {
  121.                     $row->item(Button::make($type)->type("text")->refData('DatePicker', function () use ($type) {
  122.                         return <<<JS
  123. ref.attrs.type="$type";
  124. JS;
  125.                     }));
  126.                 }
  129.             })->className("ml-10");
  130.         });
  131.         $form->item('DatePicker2')->component(DatePicker::make([])->type("daterange"));
  133.         $form->item('DateTimePicker')->component(DateTimePicker::make())->ref('DateTimePicker')->componentRightComponent(function () {
  134.             return (new Content())->row(function (Row $row) {
  135.                 $row->item(Text::make("选择类型："));
  136.                 $typeStr = "year/month/date/week/datetime/datetimerange/daterange";
  137.                 foreach (explode("/",$typeStr) as $type) {
  138.                     $row->item(Button::make($type)->type("text")->refData('DateTimePicker', function () use ($type) {
  139.                         return <<<JS
  140. ref.attrs.type="$type";
  141. JS;
  142.                     }));
  143.                 }
  146.             })->className("ml-10");
  147.         });
  149.         $form->item('Rate')->component(Rate::make(1));
  150.         $form->item('ColorPicker')->component(ColorPicker::make("#ff6600"));
  152.         $form->item('Cascader')
  153.             ->component(function () {
  154.                 return Cascader::make()->options((new Tree())->toTree())->value('id')->label('title')->expandTrigger('hover')->ref('Cascader');
  155.             })
  156.             ->componentBottomComponent(function () {
  157.                 return Content::make()->row(function (Row $row) {
  158.                     $button = Button::make("改变Cascader面板模式")->type('danger')->size('mini')->plain()->refData('Cascader', function () {
  159.                         return <<<JS
  160. ref.attrs.panel = !ref.attrs.panel
  161. JS;
  162.                     })->className('mt-10')->tooltip('我是动态注入实现的功能');
  163.                     $row->item(Html::make("下边"));
  164.                     $row->item($button);
  166.                     $row->item(Html::make("下边"));
  167.                 });
  168.             })
  169.             ->componentTopComponent(Html::make("上边")->ref("zrHtml"))
  170.             ->componentLeftComponent(Html::make("左边"))
  171.             ->componentRightComponent(Html::make("右边组件：可以选择一下联动数据，看下我的变化")->ref("zrHtml")->className('ml-10'))
  172.             ->topComponent(Divider::make("item上边组件"))
  173.             ->bottomComponent(Divider::make("item底部组件"))->refData("zrHtml", function () {
  174.                 return <<<JS
  175. ref.attrs.html = "动态注入change事件，获取到选择的数据，展现到这个组件："+self.value.join("-")
  176. JS;
  178.             });
  182.         $form->item('Transfer', "权限", 'permissions.id')->component(
  183.             Transfer::make()->data(Permission::get()->map(function ($item) {
  184.                 return TransferData::make($item->id, $item->name);
  185.             }))->titles(['可授权', '已授权'])->filterable()
  186.         );
  189.         $form->item('WangEditor')->component(WangEditor::make()->style('height:200px;')->className('flex-sub'));
  192.         $form->top(function (Content $content) {
  193.             $content->row($this->code())->className('mb-10');
  194.         });
  198.         $form->successRefData("demoForm",function (){
  199.             return <<<JS
  200. self.\$message.info("表单提交成功代码注入");
  201. JS;
  203.         });
  205.         $form->actions(function (Form\FormActions $formActions){
  206.             $formActions->hideCancelButton();
  208.             $formActions->submitButton()->content("提交表单")->style("width:200px");
  210.         });
  212.         return $form;
  213.     }
  216.     protected function code($name = "查看源代码", $ref = "codeButton")
  217.     {
  218.         return Button::make($name)->ref($ref)->dialog(function (Dialog $dialog) use ($name) {
  219.             $dialog->width('80%')->title($name);
  220.             $dialog->slot(function (Content $content) {
  221.                 $code = "```php\n";
  222.                 $code .= file_get_contents(admin_path("Controllers/FormController.php"));
  223.                 $code .= "\n```";
  225.                 $content->body(Markdown::make($code)->style("height:60vh;"));
  226.             });
  227.         });
  228.     }
  230. }

预览

FireShot Capture 003 - LaravelVueAdmin - 127.0.0.1.png