主题
开发
为了更好的介绍，文档将如何开发提到最前面，组件详细使用可以在对应组件页面了解到。目前开发一些案列正在进行中，后续继续补充
入门
首先创建一个简单的角色表单
php
use CatchForm\Form;
class RoleForm
{
public function form(): mixed
{
return Form::make(function (Form $form): void {
$form->text('role_name', '角色名称')->required();
$form->text('identify', '角色显示名称')->required();
$form->text('description', '角色描述')->required();
})->schemaVersion('1.1');
}
}- 使用
Form组件创建$form对象 - 使用
make方法- 接受一个
匿名函数，里面是对应表单的内容
- 接受一个
创建添加权限表单
php
public function form()
{
return Form::make(function (Form $form){
$form->row(function (Form $form){
$form->col( function (Form $form){
$form->radio('type', '菜单类型')->required()->asButton()->options(MenuType::class)
->defaultValue(1)
// 目录
->whenEqual(MenuType::Top->value(), function (Control $control){
$control->show([
'permission_name', 'icon', 'module',
'component', 'route', 'hidden',
'redirect', 'sort', 'keepalive'
]);
})
->whenNotEqual(MenuType::Top->value(), function (Control $control){
$control->hide(['parent_id', 'redirect']);
})
->whenEqual(MenuType::Top->value(), function (Control $control){
$control->required(['permission_name', 'module', 'route']);
})
// 菜单操作
->whenEqual(MenuType::Menu->value(), function (Control $control){
$control->show([
'permission_name', 'icon', 'module',
'component', 'route', 'hidden', 'redirect',
'sort', 'keepalive', 'select_permission_mark',
'active_menu'
]);
})
->whenEqual(MenuType::Menu->value(), function (Control $control){
$control->required([
'permission_name', 'module', 'route',
'select_permission_mark', 'component',
'parent_id'
]);
})
// 按钮操作
->whenEqual(MenuType::Action->value(), function (Control $control){
$control->show(['permission_name', 'text_permission_mark']);
})
->whenEqual(MenuType::Action->value(), function (Control $control){
$control->required(['permission_name', 'text_permission_mark', 'parent_id']);
})
->emitChange();
$form->text('permission_name', '菜单名称')->maxlength(30)->showWordLimit();
$form->select('module', '所属模块')->options((new Modules())->get())->emitChange();
$form->text('route', '路由Path')->maxlength(30)->showWordLimit()->required();
$form->text('redirect', 'Redirect')->maxlength(50)->showWordLimit();
$form->number('sort', '排序')->min(0)->max(999999)->defaultValue(1);
})->span12();
$form->col(function (Form $form){
$form->cascader('parent_id', '上级菜单')->optionsTo('options')->options(
\Modules\Permissions\Models\Permissions::query()
->whereIn('type', [
MenuType::Menu->value,
MenuType::Top->value
])->get(['id as value', 'permission_name as label', 'parent_id'])->toTree(id: 'value')
)->checkStrictly();
$form->selectOptions('permission_mark', '权限标识')
->alias('select_permission_mark')
->api('controllers');
$form->text('permission_mark', '权限标识')->alias('text_permission_mark');
$form->iconSelect('icon', '选择icon')->class('w-full');
$form->selectOptions('component', '所属组件')->api('components');
$form->radio('hidden', 'Hidden')->options(Status::class)->defaultValue(Status::Enable->value());
$form->radio('keepalive', 'Keepalive')->options(Status::class)->defaultValue(Status::Enable->value());
})->span12();
});
$form->text('active_menu', '激活菜单')
->info('如果是访问内页的菜单路由，例如创建文章 create/post, 虽然它隶属于文章列表，但实际上并不会嵌套在文章列表路由里
而是单独的一个路由，并且是不显示在左侧菜单的。所以在访问它的时候，需要左侧菜单高亮，则需要设置该参数');
});
}前端表单生成代码
vue
<template>
<catch-form ref="formRef" :config="config" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { CatchFormConfig, CatchFormExpose } from '@/components/catchForm/types'
defineProps<{ config: CatchFormConfig }>()
const formRef = ref<CatchFormExpose>()
</script>命令式交互通过 handler key 迁移到 web/src/components/catchForm/handlers.ts：
php
$form->select('module', '所属模块')
->handler('change', 'permissions.moduleChanged')
->injectEvent();ts
registerCatchFormHandler('permissions.moduleChanged', ({ api, args }) => {
const [module] = args as [string]
api?.mergeRule('component', { props: { query: { module } } })
})前端运行时支持组件注册、fetch adapter、handler key、提交事件和 Expose API。完整说明查看 前端运行时。
如下图显示 
分栏布局
有时候表单需要分栏布局，显示双栏布局
php
return Form::make(function (Form $form){
$form->row(function (Form $form){
$form->col( function (Form $form){
$form->text('left', '左栏目')->maxlength(30)->showWordLimit();
})->span12();
$form->col(function (Form $form){
$form->text('right', '右栏目')->alias('text_permission_mark');
})
// span 12
->span12();
});
});显示效果如下 
三栏布局
php
return Form::make(function (Form $form){
$form->row(function (Form $form){
$form->col( function (Form $form){
$form->text('left', '左栏目')->maxlength(30)->showWordLimit();
})->span8();
$form->col(function (Form $form){
$form->text('middle', '中间栏')->alias('text_permission_mark');
})->span8();
$form->col(function (Form $form){
$form->text('right', '右栏目')->alias('text_permission_mark');
})->span8();
});
});表单条件
有时候表单元素之间需要一些状态条件联动，举个简单的示例，还是以上面的示例为例
php
return Form::make(function (Form $form){
$form->row(function (Form $form){
$form->col( function (Form $form){
$form->text('left', '左栏目')->maxlength(30)->showWordLimit()
// 当输入是 `middle` 的时候才会显示中间栏目
->whenEqual('middle', function (Control $control){
$control->show(['middle']);
});
});
$form->col(function (Form $form){
$form->text('middle', '中间栏')->alias('text_permission_mark');
});
$form->col(function (Form $form){
$form->text('right', '右栏目')->alias('text_permission_mark');
});
});
});当输入是
middle的时候才会显示中间栏目
表单验证
表单组件内部内置了很多可用规则，下面演示个只允许字母的规则。
php
return Form::make(function (Form $form){
$form->text('text', '测试')->validates('alpha');
});