表单弹窗
<h1>表单弹窗</h1>
<h2>数据表单弹窗</h2>
<p>通过<code>Form::dialog</code>方法可以快速构建一个基于数据表单的表单弹窗，仅需增加数行代码。</p>
<p>> {tip} 表单弹窗的实现原理是：通过<code>create</code>和<code>edit</code>页面获取构建好的表单<code>HTML</code>字符，然后使用弹窗插件把这部分<code>HTML</code>字符渲染出来。
如果期间需要加载新的<code>js</code>脚本，则会等待脚本加载完毕再执行表单初始化<code>js</code>代码。</p>
<h3>简单示例</h3>
<h4>开启表单弹窗</h4>
<pre><code class="language-php">&lt;?php
use App\Http\Controllers\Controller;
use Dcat\Admin\Form;
use Dcat\Admin\Layout\Content;
class ModalFormController extends Controller
{
public function index(Content $content)
{
return $content
-&gt;header('Modal Form')
-&gt;body($this-&gt;build());
}
protected function build()
{
Form::dialog('新增角色')
-&gt;click('.create-form') // 绑定点击按钮
-&gt;url('auth/roles/create') // 表单页面链接，此参数会被按钮中的 “data-url” 属性替换。。
-&gt;width('700px') // 指定弹窗宽度，可填写百分比，默认 720px
-&gt;height('650px') // 指定弹窗高度，可填写百分比，默认 690px
-&gt;success('Dcat.reload()'); // 新增成功后刷新页面
Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;success('Dcat.reload()'); // 编辑成功后刷新页面
// 当需要在同个“class”的按钮中绑定不同的链接时，把链接放到按钮的“data-url”属性中即可
$editPage = admin_base_path('auth/roles/1/edit');
return &quot;
&lt;div style='padding:30px 0'&gt;
&lt;span class='btn btn-success create-form'&gt; 新增表单弹窗 &lt;/span&gt; &amp;nbsp;&amp;nbsp;
&lt;span class='btn btn-blue edit-form' data-url='{$editPage}'&gt; 编辑表单弹窗 &lt;/span&gt;
&lt;/div&gt;
&quot;;
}
}</code></pre>
<h4>表单构建以及保存数据</h4>
<pre><code class="language-php">&lt;?php
use App\Admin\Repositories\Role;
use Dcat\Admin\Controllers\HasResourceActions;
use Dcat\Admin\Form;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Admin;
class RoleController
{
use HasResourceActions;
/**
* Edit interface.
*
* @param mixed $id
* @param Content $content
*
* @return Content
*/
public function edit($id, Content $content)
{
return $content
-&gt;header(trans('admin.roles'))
-&gt;description(trans('admin.edit'))
-&gt;body($this-&gt;form()-&gt;edit($id));
}
/**
* Create interface.
*
* @param Content $content
*
* @return Content
*/
public function create(Content $content)
{
return $content
-&gt;header(trans('admin.roles'))
-&gt;description(trans('admin.create'))
-&gt;body($this-&gt;form());
}
/**
* Make a form builder.
*
* @return Form
*/
protected function form()
{
return Form::make(new Role(), function (Form $form) {
$form-&gt;display('id', 'ID');
$form-&gt;text('slug', trans('admin.slug'))-&gt;required()-&gt;prepareForSave(function ($value) {
return $value;
});
$form-&gt;text('name', trans('admin.name'))-&gt;required();
$form-&gt;tree('permissions')
-&gt;nodes(function () {
$permissionModel = config('admin.database.permissions_model');
$permissionModel = new $permissionModel;
return $permissionModel-&gt;allNodes();
})
-&gt;customFormat(function ($v) {
if (!$v) return [];
return array_column($v, 'id');
});
$form-&gt;display('created_at', trans('admin.created_at'));
$form-&gt;display('updated_at', trans('admin.updated_at'));
});
}
}</code></pre>
<h4>效果</h4>
<p><a href="{{public}}/assets/img/screenshots/form-modal.png" target="_blank">
<img style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" src="{{public}}/assets/img/screenshots/form-modal.png">
</a></p>
<h3>功能接口</h3>
<p>表单弹窗必须绑定一个可点击的页面元素，通过点击这个元素弹出弹窗。</p>
<h4>设置弹窗标题</h4>
<pre><code class="language-php">$modal = Form::dialog('标题');</code></pre>
<h4>绑定点击按钮</h4>
<p>通过<code>ModalForm::click</code>方法可以绑定点击按钮，绑定后当点击该按钮时会弹出弹窗</p>
<pre><code class="language-php">Form::dialog('标题')
-&gt;click('#click-button');</code></pre>
<h4>设置URL</h4>
<p>如果是创建类型的表单，则可以通过以下方法设置获取表单模板的url</p>
<pre><code class="language-php">Form::dialog('新增角色')
-&gt;click('.create-form')
-&gt;url('auth/roles/create');</code></pre>
<p>如果是编辑类型的表单，则需要多个url，因为点击每个按钮弹出弹窗的表单内容是不同的，所以每个按钮的链接也不同。</p>
<p>这个时候通过<code>ModalForm::url</code>方法设置的一个链接已经无法满足需求了，因而需要在点击按钮的<code>data-url</code>属性上保存url：</p>
<pre><code class="language-php">Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;success('Dcat.reload()'); // 编辑成功后刷新页面
// 当需要在同个“class”的按钮中绑定不同的链接时，把链接放到按钮的“data-url”属性中即可
$editPage1 = admin_base_path('auth/roles/1/edit');
$editPage2 = admin_base_path('auth/roles/2/edit');
return &quot;
&lt;div style='padding:30px 0'&gt;
&lt;span class='btn btn-blue edit-form' data-url='{$editPage1}'&gt; 编辑表单弹窗1 &lt;/span&gt;
&lt;span class='btn btn-blue edit-form' data-url='{$editPage2}'&gt; 编辑表单弹窗2 &lt;/span&gt;
&lt;/div&gt;
&quot;;</code></pre>
<h4>表单保存成功回调</h4>
<p>通过<code>success</code>方法可以设置表单保存成功之后执行的<code>js</code>代码，在这段<code>js</code>代码作用域内有一个<code>response</code>变量，通过这个变量可以获取服务端返回的<code>json</code>数据。</p>
<pre><code class="language-php">Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;success(
&lt;&lt;&lt;JS
// 打印服务端响应数据
console.log(response);
// 提示成功信息
Dcat.success(response.message || '保存成功');
// 保存成功之后刷新页面
Dcat.reload();
JS
);</code></pre>
<h4>表单保存失败回调</h4>
<p>通过<code>error</code>方法可以设置表单保存失败之后执行的<code>js</code>代码，在这段<code>js</code>代码作用域内有一个<code>response</code>变量，通过这个变量可以获取服务端返回的<code>json</code>数据。</p>
<pre><code class="language-php">Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;error(
&lt;&lt;&lt;JS
// 打印服务端响应数据
console.log(response);
JS
);</code></pre>
<h4>表单保存之后回调</h4>
<p>通过<code>saved</code>方法可以设置表单保存之后执行的<code>js</code>代码，在这段<code>js</code>代码作用域内有两个<code>js</code>变量：</p>
<ul>
<li><code>success</code> 值为真表示保存成功，否则失败</li>
<li><code>response</code> 服务端返回的<code>json</code>数据</li>
</ul>
<pre><code class="language-php">Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;saved(
&lt;&lt;&lt;JS
// 打印服务端响应数据
console.log(response);
if (success) {
console.log('保存成功');
} else {
console.log('保存失败');
}
JS
);</code></pre>
<h4>强制刷新</h4>
<p>每次点击按钮都重新从服务端拉取新的模板数据</p>
<pre><code class="language-php">Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;forceRefresh();</code></pre>
<h4>设置弹窗宽高</h4>
<pre><code class="language-php">Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;dimensions('50%', '400px');
// 或
Form::dialog('编辑角色')
-&gt;click('.edit-form')
-&gt;width('50%')
-&gt;height('400px');</code></pre>
<h2>工具表单弹窗</h2>
<p>数据表单的弹窗功能通常需要结合一个资源控制器去实现，相对会比较复杂一点，所以系统也内置了另外一种更简便的表单弹窗功能，使用方法请参考<a href="widgets-form.md#modal">工具表单-弹窗</a>。</p>
<p><a href="{{public}}/assets/img/screenshots/modal-widget-form.png" target="_blank">
<img class="img img-full" src="{{public}}/assets/img/screenshots/modal-widget-form.png">
</a></p>