6c4a742627
* refactor: remove the adapter bucket introduction pattern and improve potential introduction timing * chore: update deps
232 lines
4.9 KiB
Vue
232 lines
4.9 KiB
Vue
<script lang="ts" setup>
|
||
import { message } from 'ant-design-vue';
|
||
|
||
import { useVbenForm } from '#/adapter/form';
|
||
|
||
const [BaseForm] = useVbenForm({
|
||
// 所有表单项共用，可单独在表单内覆盖
|
||
commonConfig: {
|
||
// 所有表单项
|
||
componentProps: {
|
||
class: 'w-full',
|
||
},
|
||
},
|
||
// 提交函数
|
||
handleSubmit: onSubmit,
|
||
// 垂直布局，label和input在不同行，值为vertical
|
||
// 水平布局，label和input在同一行
|
||
layout: 'horizontal',
|
||
schema: [
|
||
{
|
||
// 组件需要在 #/adapter.ts内注册，并加上类型
|
||
component: 'Input',
|
||
// 对应组件的参数
|
||
componentProps: {
|
||
placeholder: '请输入用户名',
|
||
},
|
||
// 字段名
|
||
fieldName: 'username',
|
||
// 界面显示的label
|
||
label: '字符串',
|
||
},
|
||
{
|
||
component: 'InputPassword',
|
||
componentProps: {
|
||
placeholder: '请输入密码',
|
||
},
|
||
fieldName: 'password',
|
||
label: '密码',
|
||
},
|
||
{
|
||
component: 'InputNumber',
|
||
componentProps: {
|
||
placeholder: '请输入',
|
||
},
|
||
fieldName: 'number',
|
||
label: '数字(带后缀)',
|
||
suffix: () => '¥',
|
||
},
|
||
{
|
||
component: 'Select',
|
||
componentProps: {
|
||
allowClear: true,
|
||
filterOption: true,
|
||
options: [
|
||
{
|
||
label: '选项1',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '选项2',
|
||
value: '2',
|
||
},
|
||
],
|
||
placeholder: '请选择',
|
||
showSearch: true,
|
||
},
|
||
fieldName: 'options',
|
||
label: '下拉选',
|
||
},
|
||
{
|
||
component: 'RadioGroup',
|
||
componentProps: {
|
||
options: [
|
||
{
|
||
label: '选项1',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '选项2',
|
||
value: '2',
|
||
},
|
||
],
|
||
},
|
||
fieldName: 'radioGroup',
|
||
label: '单选组',
|
||
},
|
||
{
|
||
component: 'Radio',
|
||
fieldName: 'radio',
|
||
label: '',
|
||
renderComponentContent: () => {
|
||
return {
|
||
default: () => ['Radio'],
|
||
};
|
||
},
|
||
},
|
||
{
|
||
component: 'CheckboxGroup',
|
||
componentProps: {
|
||
name: 'cname',
|
||
options: [
|
||
{
|
||
label: '选项1',
|
||
value: '1',
|
||
},
|
||
{
|
||
label: '选项2',
|
||
value: '2',
|
||
},
|
||
],
|
||
},
|
||
fieldName: 'checkboxGroup',
|
||
label: '多选组',
|
||
},
|
||
{
|
||
component: 'Checkbox',
|
||
fieldName: 'checkbox',
|
||
label: '',
|
||
renderComponentContent: () => {
|
||
return {
|
||
default: () => ['我已阅读并同意'],
|
||
};
|
||
},
|
||
},
|
||
{
|
||
component: 'Mentions',
|
||
componentProps: {
|
||
options: [
|
||
{
|
||
label: 'afc163',
|
||
value: 'afc163',
|
||
},
|
||
{
|
||
label: 'zombieJ',
|
||
value: 'zombieJ',
|
||
},
|
||
],
|
||
placeholder: '请输入',
|
||
},
|
||
fieldName: 'mentions',
|
||
label: '提及',
|
||
},
|
||
{
|
||
component: 'Rate',
|
||
fieldName: 'rate',
|
||
label: '评分',
|
||
},
|
||
{
|
||
component: 'Switch',
|
||
componentProps: {
|
||
class: 'w-auto',
|
||
},
|
||
fieldName: 'switch',
|
||
label: '开关',
|
||
},
|
||
{
|
||
component: 'DatePicker',
|
||
fieldName: 'datePicker',
|
||
label: '日期选择框',
|
||
},
|
||
{
|
||
component: 'RangePicker',
|
||
fieldName: 'rangePicker',
|
||
label: '范围选择器',
|
||
},
|
||
{
|
||
component: 'TimePicker',
|
||
fieldName: 'timePicker',
|
||
label: '时间选择框',
|
||
},
|
||
{
|
||
component: 'TreeSelect',
|
||
componentProps: {
|
||
allowClear: true,
|
||
placeholder: '请选择',
|
||
showSearch: true,
|
||
treeData: [
|
||
{
|
||
label: 'root 1',
|
||
value: 'root 1',
|
||
children: [
|
||
{
|
||
label: 'parent 1',
|
||
value: 'parent 1',
|
||
children: [
|
||
{
|
||
label: 'parent 1-0',
|
||
value: 'parent 1-0',
|
||
children: [
|
||
{
|
||
label: 'my leaf',
|
||
value: 'leaf1',
|
||
},
|
||
{
|
||
label: 'your leaf',
|
||
value: 'leaf2',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: 'parent 1-1',
|
||
value: 'parent 1-1',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: 'parent 2',
|
||
value: 'parent 2',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
treeNodeFilterProp: 'label',
|
||
},
|
||
fieldName: 'treeSelect',
|
||
label: '树选择',
|
||
},
|
||
],
|
||
wrapperClass: 'grid-cols-1',
|
||
});
|
||
|
||
function onSubmit(values: Record<string, any>) {
|
||
message.success({
|
||
content: `form values: ${JSON.stringify(values)}`,
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<BaseForm />
|
||
</template>
|