使用 Laravel-form-builder 快速生成表單,支援前後端分離

laravel-form-builder: PHP表單生成器，快速生成現代化的form表單。包含核取方塊、單選框、輸入框、下拉選擇框等元素以及省市區三級聯動、時間選擇、日期選擇、顏色選擇、樹型、檔案/圖片上傳等功能。
github

1. 安裝

composer require xaboy/laravel-form-builder

2. 配置

新增下面一行到 config/app.php 中 providers 部分：

LaravelFormBuilder\FormBuilderProvider::class,

3. 釋出配置檔案與資源

php artisan vendor:publish --provider='LaravelFormBuilder\FormBuilderProvider'

4. 模板引入依賴資源

這行的作用是引入編輯器需要的 css,js 等檔案，所以你不需要再手動去引入它們。

@include('vendor.form-builder.assets')

如果專案中已包含vue、iview、jquery其中任意,可在vendor/form-builder/assets.blade.php檔案中手動移除。
iview版本為2.14.3,vue版本為2.5

5. 載入表單規則

//@include('vendor.form-builder.script',['form'=>$form,'id'=>'store']);
@include('vendor.form-builder.script',['form'=>$form]);

6. 生成表單

    //把生成form表單插入到.panel-body元素
    //laravelFormCreate_store('.panel-body');
    laravelFormCreate('.panel-body',function callback(status, res, $f, formData){
     //表單提交回撥函式
       if(!status)
           //TODO 表單提交成功
        else
           //TODO 表單提交失敗
   });

使用laravel-form-builder生成新增商品表單

use LaravelFormBuilder\Form;

$field = [
    Form::select('cate_id','產品分類')->setOptions(function(){
        $list = CategoryModel::getTierList();
        foreach ($list as $menu){
            $menus[] = ['value'=>$menu['id'],'label'=>$menu['html'].$menu['cate_name'],'disabled'=>$menu['pid']== 0];//,'disabled'=>$menu['pid']== 0];
        }
        return $menus;
    })->filterable(1)->multiple(1),
    Form::input('store_name','產品名稱')->col(Form::col(8)),
    Form::input('store_info','產品簡介')->type('textarea'),
    Form::input('keyword','產品關鍵字')->placeholder('多個用英文狀態下的逗號隔開'),
    Form::input('unit_name','產品單位','件'),
    Form::frameImageOne('image','產品主圖片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),
    Form::frameImages('slider_image','產品輪播圖(640*640px)',Url::build('admin/widget.images/index',array('fodder'=>'slider_image')))->maxLength(5)->icon('images')->width('100%')->height('550px')->spin(0),
    Form::number('price','產品售價')->min(0)->col(8),
    Form::number('ot_price','產品市場價')->min(0)->col(8),
    Form::number('give_integral','贈送積分')->min(0)->precision(0)->col(8),
    Form::number('postage','郵費')->min(0)->col(Form::col(8)),
    Form::number('sales','銷量')->min(0)->precision(0)->col(8),
    Form::number('ficti','虛擬銷量')->min(0)->precision(0)->col(8),
    Form::number('stock','庫存')->min(0)->precision(0)->col(8),
    Form::number('cost','產品成本價')->min(0)->col(8),
    Form::number('sort','排序')->col(8),
    Form::radio('is_show','產品狀態',0)->options([['label'=>'上架','value'=>1],['label'=>'下架','value'=>0]])->col(8),
    Form::radio('is_hot','熱賣單品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_benefit','促銷單品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_best','精品推薦',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_new','首發新品',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8),
    Form::radio('is_postage','是否包郵',0)->options([['label'=>'是','value'=>1],['label'=>'否','value'=>0]])->col(8)
];
$form = Form::create(Url::build('save'));
$form->setMethod('post')->setTitle('新增產品')->components($field);
return view('test',compact('form'));

效果

7. 前後端分離

獲取生成規則

$rules = $form->getRules();

前端使用可form-create生成表單