Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
开源元宇宙
vue-vben-admin
提交
f2ec2ca2
V
vue-vben-admin
项目概览
开源元宇宙
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
f2ec2ca2
编写于
3月 17, 2023
作者:
qq_25847755
提交者:
GitHub
3月 17, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 添加更多配置项 (#2607)
上级
b66a83c1
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
152 addition
and
40 deletion
+152
-40
src/views/demo/form/UseForm.vue
src/views/demo/form/UseForm.vue
+152
-40
未找到文件。
src/views/demo/form/UseForm.vue
浏览文件 @
f2ec2ca2
...
...
@@ -49,6 +49,17 @@
{
value
:
'
default
'
,
label
:
'
defualt
'
},
];
const
layoutList
=
[
{
value
:
'
vertical
'
,
label
:
'
vertical
'
},
{
value
:
'
inline
'
,
label
:
'
inline
'
},
{
value
:
'
horizontal
'
,
label
:
'
horizontal
'
},
];
const
labelAlignList
=
[
{
value
:
'
left
'
,
label
:
'
left
'
},
{
value
:
'
right
'
,
label
:
'
right
'
},
];
const
schemas
:
FormSchema
[]
=
[
{
field
:
'
field1
'
,
...
...
@@ -157,10 +168,9 @@
},
},
];
const
formSchemas
:
FormSchema
[]
=
[
{
field
:
''
,
field
:
'
d1
'
,
component
:
'
Divider
'
,
label
:
'
基础属性
'
,
colProps
:
{
span
:
24
},
...
...
@@ -168,15 +178,39 @@
orientation
:
'
center
'
,
},
},
{
field
:
'
name
'
,
defaultValue
:
'
useForm
'
,
component
:
'
Input
'
,
label
:
'
name
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
layout
'
,
defaultValue
:
'
horizontal
'
,
component
:
'
RadioButtonGroup
'
,
label
:
'
layout
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
options
:
layoutList
,
},
},
{
field
:
'
labelAlign
'
,
defaultValue
:
'
right
'
,
component
:
'
RadioButtonGroup
'
,
label
:
'
labelAlign
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
options
:
labelAlignList
,
},
},
{
field
:
'
labelWidth
'
,
defaultValue
:
120
,
component
:
'
InputNumber
'
,
label
:
'
labelWidth
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
'
size
'
,
...
...
@@ -186,18 +220,21 @@
colProps
:
{
span
:
24
},
componentProps
:
{
options
:
sizeList
,
size
:
'
small
'
,
},
},
{
field
:
'
colon
'
,
defaultValue
:
false
,
component
:
'
Switch
'
,
label
:
'
colon
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
disabled
'
,
defaultValue
:
false
,
component
:
'
Switch
'
,
label
:
'
disabled
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
'
compact
'
,
...
...
@@ -205,32 +242,99 @@
component
:
'
Switch
'
,
label
:
'
compact
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
''
,
field
:
'
autoSetPlaceHolder
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
autoSetPlaceHolder
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
autoSubmitOnEnter
'
,
defaultValue
:
false
,
component
:
'
Switch
'
,
label
:
'
autoSubmitOnEnter
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
showAdvancedButton
'
,
defaultValue
:
false
,
component
:
'
Switch
'
,
label
:
'
showAdvancedButton
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
d2
'
,
component
:
'
Divider
'
,
label
:
'
网格布局
'
,
label
:
'
网格布局
(rowProps)
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
orientation
:
'
center
'
,
},
},
{
field
:
'
actionColOptions.span
'
,
component
:
'
Slid
er
'
,
defaultValue
:
24
,
label
:
'
span
'
,
field
:
'
rowProps.gutter.0
'
,
component
:
'
InputNumb
er
'
,
defaultValue
:
0
,
label
:
'
Horizontal Gutter
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
min
:
1
,
max
:
24
,
addonAfter
:
'
px
'
,
},
},
{
field
:
''
,
field
:
'
rowProps.gutter.1
'
,
component
:
'
InputNumber
'
,
defaultValue
:
0
,
label
:
'
Vertical Gutter
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
addonAfter
:
'
px
'
,
},
},
{
field
:
'
rowProps.align
'
,
defaultValue
:
'
top
'
,
component
:
'
Select
'
,
label
:
'
align
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
options
:
[
{
value
:
'
stretch
'
,
label
:
'
stretch
'
},
{
value
:
'
bottom
'
,
label
:
'
bottom
'
},
{
value
:
'
top
'
,
label
:
'
top
'
},
{
value
:
'
middle
'
,
label
:
'
middle
'
},
],
},
},
{
field
:
'
rowProps.justify
'
,
defaultValue
:
'
start
'
,
component
:
'
Select
'
,
label
:
'
justify
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
options
:
[
{
value
:
'
space-around
'
,
label
:
'
space-around
'
},
{
value
:
'
space-between
'
,
label
:
'
space-between
'
},
{
value
:
'
center
'
,
label
:
'
center
'
},
{
value
:
'
end
'
,
label
:
'
end
'
},
{
value
:
'
start
'
,
label
:
'
start
'
},
],
},
},
{
field
:
'
wrap
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
wrap
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
d3
'
,
component
:
'
Divider
'
,
label
:
'
操作按钮
'
,
colProps
:
{
span
:
24
},
...
...
@@ -242,11 +346,10 @@
field
:
'
showActionButtonGroup
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
操作按钮
'
,
label
:
'
showActionButtonGroup
'
,
colProps
:
{
span
:
24
},
componentProps
:
({
formActionType
})
=>
{
return
{
size
:
'
small
'
,
onChange
:
async
(
val
:
boolean
)
=>
{
formActionType
.
updateSchema
([
{
field
:
'
showResetButton
'
,
componentProps
:
{
disabled
:
!
val
}
},
...
...
@@ -254,6 +357,10 @@
field
:
'
showSubmitButton
'
,
componentProps
:
{
disabled
:
!
val
},
},
{
field
:
'
actionColOptions.span
'
,
componentProps
:
{
disabled
:
!
val
},
},
]);
},
};
...
...
@@ -263,24 +370,36 @@
field
:
'
showResetButton
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
重置按钮
'
,
label
:
'
showResetButton
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
'
showSubmitButton
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
提交按钮
'
,
label
:
'
showSubmitButton
'
,
colProps
:
{
span
:
24
},
},
{
field
:
'
d4
'
,
component
:
'
Divider
'
,
label
:
'
操作按钮网格布局(actionColOptions)
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
orientation
:
'
center
'
,
},
},
{
field
:
''
,
field
:
'
actionColOptions.span
'
,
component
:
'
Slider
'
,
defaultValue
:
24
,
label
:
'
span
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
min
:
0
,
max
:
24
},
},
{
field
:
'
d5
'
,
component
:
'
Divider
'
,
label
:
'
其他事件
'
,
colProps
:
{
span
:
24
},
...
...
@@ -309,32 +428,29 @@
const
visible
=
ref
<
boolean
>
(
false
);
const
settingFormRef
=
ref
();
const
[
registerSetting
]
=
useForm
({
labelWidth
:
80
,
size
:
'
small
'
,
schemas
:
formSchemas
,
compact
:
true
,
actionColOptions
:
{
span
:
24
},
showActionButtonGroup
:
false
,
});
const
resetSettings
=
async
()
=>
{
setProps
({
resetButtonOptions
:
{
disabled
:
false
,
text
:
'
重置
'
}
});
setProps
({
submitButtonOptions
:
{
disabled
:
false
,
loading
:
false
}
});
await
setFieldsValue
({
field9
:
[]
});
await
settingFormRef
.
value
?.
resetFields
();
};
const
handleSubmitSetting
=
async
(
values
:
Recordable
)
=>
{
console
.
log
(
values
);
await
setProps
(
values
);
visible
.
value
=
false
;
};
const
[
register
,
{
setProps
,
setFieldsValue
,
updateSchema
}]
=
useForm
({
labelWidth
:
120
,
schemas
,
actionColOptions
:
{
span
:
24
},
fieldMapToTime
:
[[
'
fieldTime
'
,
[
'
startTime
'
,
'
endTime
'
],
'
YYYY-MM
'
]],
});
async
function
handleLoad
()
{
const
promiseFn
=
function
()
{
return
new
Promise
((
resolve
)
=>
{
...
...
@@ -348,9 +464,7 @@
},
1000
);
});
};
const
item
=
await
promiseFn
();
const
{
field9
,
province
,
city
,
district
}
=
item
as
any
;
await
updateSchema
({
field
:
'
field9
'
,
...
...
@@ -359,16 +473,14 @@
},
});
await
setFieldsValue
({
field9
});
visible
.
value
=
false
;
}
const
showDrawer
=
()
=>
{
visible
.
value
=
true
;
};
const
onSettings
=
()
=>
{
settingFormRef
.
value
?.
submit
();
};
const
withClose
=
(
formProps
:
Partial
<
FormProps
>
)
=>
{
setProps
(
formProps
);
visible
.
value
=
false
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录