Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dr.Disrespect
vue-vben-admin
提交
8284d106
V
vue-vben-admin
项目概览
Dr.Disrespect
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
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 搜索 >>
未验证
提交
8284d106
编写于
2月 23, 2023
作者:
qq_25847755
提交者:
GitHub
2月 23, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor<useForm>: 重构案例 (#2577)
上级
de305ecd
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
208 addition
and
112 deletion
+208
-112
src/views/demo/form/UseForm.vue
src/views/demo/form/UseForm.vue
+208
-112
未找到文件。
src/views/demo/form/UseForm.vue
浏览文件 @
8284d106
<
template
>
<PageWrapper
title=
"UseForm操作示例"
>
<div
class=
"mb-4"
>
<a-button
@
click=
"setProps(
{ labelWidth: 150 })" class="mr-2"> 更改labelWidth
</a-button>
<a-button
@
click=
"setProps(
{ labelWidth: 120 })" class="mr-2"> 还原labelWidth
</a-button>
<a-button
@
click=
"setProps(
{ size: 'large' })" class="mr-2"> 更改Size
</a-button>
<a-button
@
click=
"setProps(
{ size: 'default' })" class="mr-2"> 还原Size
</a-button>
<a-button
@
click=
"setProps(
{ disabled: true })" class="mr-2"> 禁用表单
</a-button>
<a-button
@
click=
"setProps(
{ disabled: false })" class="mr-2"> 解除禁用
</a-button>
<a-button
@
click=
"setProps(
{ compact: true })" class="mr-2"> 紧凑表单
</a-button>
<a-button
@
click=
"setProps(
{ compact: false })" class="mr-2"> 还原正常间距
</a-button>
<a-button
@
click=
"setProps(
{ actionColOptions: { span: 8 } })" class="mr-2">
操作按钮位置
</a-button>
</div>
<div
class=
"mb-4"
>
<a-button
@
click=
"setProps(
{ showActionButtonGroup: false })" class="mr-2">
隐藏操作按钮
</a-button>
<a-button
@
click=
"setProps(
{ showActionButtonGroup: true })" class="mr-2">
显示操作按钮
</a-button>
<a-button
@
click=
"setProps(
{ showResetButton: false })" class="mr-2"> 隐藏重置按钮
</a-button>
<a-button
@
click=
"setProps(
{ showResetButton: true })" class="mr-2"> 显示重置按钮
</a-button>
<a-button
@
click=
"setProps(
{ showSubmitButton: false })" class="mr-2">
隐藏查询按钮
</a-button>
<a-button
@
click=
"setProps(
{ showSubmitButton: true })" class="mr-2"> 显示查询按钮
</a-button>
<a-button
@
click=
"
setProps(
{
resetButtonOptions: {
disabled: true,
text: '重置New',
},
})
"
class="mr-2"
>
<Space
class=
"mb-4"
>
<a-button
type=
"primary"
@
click=
"showDrawer"
>
更改设置
</a-button>
<a-button
@
click=
"setProps(
{ resetButtonOptions: { disabled: true, text: '重置New' } })">
修改重置按钮
</a-button>
<a-button
@
click=
"
setProps(
{
submitButtonOptions: {
disabled: true,
loading: true,
},
})
"
class="mr-2"
>
<a-button
@
click=
"setProps(
{ submitButtonOptions: { disabled: true, loading: true } })">
修改查询按钮
</a-button>
<a-button
@
click=
"handleLoad"
class=
"mr-2"
>
联动回显
</a-button>
</div>
</Space>
<Drawer
v-model:visible=
"visible"
title=
"更改设置"
placement=
"right"
>
<BasicForm
ref=
"settingFormRef"
@
register=
"registerSetting"
@
submit=
"handleSubmitSetting"
/>
<template
#extra
>
<Space>
<a-button
@
click=
"resetSettings"
>
重置设置
</a-button>
<a-button
type=
"primary"
@
click=
"onSettings"
>
应用
</a-button>
</Space>
</
template
>
</Drawer>
<CollapseContainer
title=
"useForm示例"
>
<BasicForm
@
register=
"register"
@
submit=
"handleSubmit"
/>
</CollapseContainer>
</PageWrapper>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
BasicForm
,
FormSchema
,
useForm
}
from
'
/@/components/Form/index
'
;
import
{
CollapseContainer
}
from
'
/@/components/Container/index
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
Drawer
,
Space
}
from
'
ant-design-vue
'
;
import
{
BasicForm
,
FormSchema
,
useForm
}
from
'
/@/components/Form
'
;
import
{
CollapseContainer
}
from
'
/@/components/Container
'
;
import
{
PageWrapper
}
from
'
/@/components/Page
'
;
import
{
areaRecord
}
from
'
/@/api/demo/cascader
'
;
const
sizeList
=
[
{
value
:
'
large
'
,
label
:
'
large
'
},
{
value
:
'
middle
'
,
label
:
'
middle
'
},
{
value
:
'
small
'
,
label
:
'
small
'
},
{
value
:
'
default
'
,
label
:
'
defualt
'
},
];
const
schemas
:
FormSchema
[]
=
[
{
field
:
'
field1
'
,
component
:
'
Input
'
,
label
:
'
字段1
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
componentProps
:
{
placeholder
:
'
自定义placeholder
'
,
onChange
:
(
e
:
any
)
=>
{
...
...
@@ -86,45 +59,29 @@
field
:
'
field2
'
,
component
:
'
Input
'
,
label
:
'
字段2
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
},
{
field
:
'
field3
'
,
component
:
'
DatePicker
'
,
label
:
'
字段3
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
},
{
field
:
'
fieldTime
'
,
component
:
'
RangePicker
'
,
label
:
'
时间字段
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
},
{
field
:
'
field4
'
,
component
:
'
Select
'
,
label
:
'
字段4
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
componentProps
:
{
options
:
[
{
label
:
'
选项1
'
,
value
:
'
1
'
,
key
:
'
1
'
,
},
{
label
:
'
选项2
'
,
value
:
'
2
'
,
key
:
'
2
'
,
},
{
label
:
'
选项1
'
,
value
:
'
1
'
,
key
:
'
1
'
},
{
label
:
'
选项2
'
,
value
:
'
2
'
,
key
:
'
2
'
},
],
},
},
...
...
@@ -137,14 +94,8 @@
},
componentProps
:
{
options
:
[
{
label
:
'
选项1
'
,
value
:
'
1
'
,
},
{
label
:
'
选项2
'
,
value
:
'
2
'
,
},
{
label
:
'
选项1
'
,
value
:
'
1
'
},
{
label
:
'
选项2
'
,
value
:
'
2
'
},
],
},
},
...
...
@@ -152,19 +103,11 @@
field
:
'
field7
'
,
component
:
'
RadioGroup
'
,
label
:
'
字段7
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
componentProps
:
{
options
:
[
{
label
:
'
选项1
'
,
value
:
'
1
'
,
},
{
label
:
'
选项2
'
,
value
:
'
2
'
,
},
{
label
:
'
选项1
'
,
value
:
'
1
'
},
{
label
:
'
选项2
'
,
value
:
'
2
'
},
],
},
},
...
...
@@ -172,9 +115,7 @@
field
:
'
field8
'
,
component
:
'
ApiCascader
'
,
label
:
'
联动
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
componentProps
:
{
api
:
areaRecord
,
apiParamKey
:
'
parentCode
'
,
...
...
@@ -193,9 +134,7 @@
field
:
'
field9
'
,
component
:
'
ApiCascader
'
,
label
:
'
联动回显
'
,
colProps
:
{
span
:
8
,
},
colProps
:
{
span
:
8
},
componentProps
:
{
api
:
areaRecord
,
apiParamKey
:
'
parentCode
'
,
...
...
@@ -212,17 +151,161 @@
},
];
const
formSchemas
:
FormSchema
[]
=
[
{
field
:
''
,
component
:
'
Divider
'
,
label
:
'
基础属性
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
orientation
:
'
center
'
,
},
},
{
field
:
'
labelWidth
'
,
defaultValue
:
120
,
component
:
'
InputNumber
'
,
label
:
'
labelWidth
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
'
size
'
,
defaultValue
:
'
default
'
,
component
:
'
Select
'
,
label
:
'
size
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
options
:
sizeList
,
size
:
'
small
'
,
},
},
{
field
:
'
disabled
'
,
defaultValue
:
false
,
component
:
'
Switch
'
,
label
:
'
disabled
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
'
compact
'
,
defaultValue
:
false
,
component
:
'
Switch
'
,
label
:
'
compact
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
''
,
component
:
'
Divider
'
,
label
:
'
网格布局
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
orientation
:
'
center
'
,
},
},
{
field
:
'
actionColOptions.span
'
,
component
:
'
Slider
'
,
defaultValue
:
24
,
label
:
'
span
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
min
:
1
,
max
:
24
,
},
},
{
field
:
''
,
component
:
'
Divider
'
,
label
:
'
操作按钮
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
orientation
:
'
center
'
,
},
},
{
field
:
'
showActionButtonGroup
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
操作按钮
'
,
colProps
:
{
span
:
24
},
componentProps
:
({
formActionType
})
=>
{
return
{
size
:
'
small
'
,
onChange
:
async
(
val
:
boolean
)
=>
{
formActionType
.
updateSchema
([
{
field
:
'
showResetButton
'
,
componentProps
:
{
disabled
:
!
val
}
},
{
field
:
'
showSubmitButton
'
,
componentProps
:
{
disabled
:
!
val
},
},
]);
},
};
},
},
{
field
:
'
showResetButton
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
重置按钮
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
{
field
:
'
showSubmitButton
'
,
defaultValue
:
true
,
component
:
'
Switch
'
,
label
:
'
提交按钮
'
,
colProps
:
{
span
:
24
},
componentProps
:
{
size
:
'
small
'
,
},
},
];
export
default
defineComponent
({
components
:
{
BasicForm
,
CollapseContainer
,
PageWrapper
},
components
:
{
BasicForm
,
CollapseContainer
,
PageWrapper
,
Drawer
,
Space
,
},
setup
()
{
const
{
createMessage
}
=
useMessage
();
const
visible
=
ref
<
boolean
>
(
false
);
const
settingFormRef
=
ref
();
const
[
registerSetting
]
=
useForm
({
labelWidth
:
80
,
schemas
:
formSchemas
,
compact
:
true
,
actionColOptions
:
{
span
:
24
},
showActionButtonGroup
:
false
,
});
const
resetSettings
=
async
()
=>
{
await
settingFormRef
.
value
?.
resetFields
();
};
const
handleSubmitSetting
=
async
(
values
:
Recordable
)
=>
{
await
setProps
(
values
);
visible
.
value
=
false
;
};
const
[
register
,
{
setProps
,
setFieldsValue
,
updateSchema
}]
=
useForm
({
labelWidth
:
120
,
schemas
,
actionColOptions
:
{
span
:
24
,
},
actionColOptions
:
{
span
:
24
},
fieldMapToTime
:
[[
'
fieldTime
'
,
[
'
startTime
'
,
'
endTime
'
],
'
YYYY-MM
'
]],
});
...
...
@@ -249,19 +332,32 @@
displayRenderArray
:
[
province
,
city
,
district
],
},
});
await
setFieldsValue
({
field9
,
});
await
setFieldsValue
({
field9
});
}
const
showDrawer
=
()
=>
{
visible
.
value
=
true
;
};
const
onSettings
=
()
=>
{
settingFormRef
.
value
?.
submit
();
};
return
{
register
,
schemas
,
handleSubmit
:
(
values
:
Recordable
)
=>
{
c
reateMessage
.
success
(
'
click search,values:
'
+
JSON
.
stringify
(
values
)
);
c
onsole
.
log
(
values
);
},
setProps
,
handleLoad
,
visible
,
showDrawer
,
settingFormRef
,
onSettings
,
resetSettings
,
registerSetting
,
handleSubmitSetting
,
};
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录