FitsFormDialog 表单弹窗
wuzeling2022年9月30日小于 1 分钟约 257 字
# FitsFormDialog 表单弹窗
# 对话框表单
通过设置 formType='dialog' 开启对话框形式的表单弹窗。
<template>
<el-button @click="openForm">
打开表单
</el-button>
<fits-form-dialog :option="dialogOpt" @submit="submitDialogForm" @cancel="dialogOpt.visible = false"
class="dialogFormExample" ref="formtypeRef" />
</template>
<script setup lang="ts">
import { FitsFormDialog } from '@/fits-components';
import { FitsFormCreateModel } from '@/fits-components/type'
import { isHomeNumber, isPhoneNumber, isShortNumber } from '@/utils/is';
const formtypeRef = ref()
const dialogOpt = reactive({
visible: false,
forms: [
{
title: '用户信息',
iconClass: 'user',
form: new FitsFormCreateModel({
rule: [
{
type: "input",
field: "UserName",
title: "用户名称",
props: {
placeholder: "请输入用户名称",
},
effect: {
required: '请输入用户名称'
}
},
{
type: "input",
field: "UserAccount",
title: "用户账号",
props: {
placeholder: "请输入用户账号",
},
effect: {
required: '请输入用户账号'
}
},
{
type: "input",
field: "oldPwd",
title: "初始密码",
props: {
type: 'password',
placeholder: "请输入原始密码"
},
effect: {
required: '请输入原始密码'
}
},
{
type: "radio",
field: "sex",
title: "性别",
options: [
{
value: "1",
label: "男"
},
{
value: "2",
label: "女"
}
]
},
{
type: "input",
field: "shortNum",
title: "短号",
props: {
placeholder: "请输入短号"
},
validate: [
{
validator: (rule: any, val: any) => {
return val ? isShortNumber(val) : true
},
message: "请输入正确的短号"
}
],
},
{
type: "radio",
field: "status",
title: "状态",
options: [
{
value: "1",
label: "启用"
},
{
value: "2",
label: "禁用"
}
]
},
],
option: {
form: {
labelPosition: 'right',
inline: true,
},
submitBtn: false,
resetBtn: false
},
}),
},
{
title: '组织关系',
iconClass: 'fits-system',
form: new FitsFormCreateModel({
rule: [
{
type: "datePicker",
field: "onJobDate",
title: "入职日期",
props: {
placeholder: "请选择入职日期"
},
effect: {
required: '请选择入职日期'
}
},
{
type: "input",
field: "officenumber",
title: "办公号码",
props: {
placeholder: "请输入办公号码"
},
validate: [
{
validator: (rule: any, val: any) => {
return val ? isHomeNumber(val) || isPhoneNumber(val) : true
},
message: "请输入正确的手机号或固话"
}
]
},
{
type: "datePicker",
field: "offJobDate",
title: "离职日期",
props: {
placeholder: "请选择离职日期"
}
},
{
type: "select",
field: "UserTag",
title: "用户标签",
props: {
filterable: true,
placeholder: "请选择用户标签",
},
options: [
{
value: "1",
label: "选项1"
},
{
value: "2",
label: "选项2"
}
],
},
],
option: {
form: {
labelPosition: 'right',
inline: true,
},
submitBtn: false,
resetBtn: false
},
}),
}
],
dialogProp: {
title: '新增用户',
width: '50%'
},
formType: 'dialog'
})
function openForm() {
dialogOpt.forms.map(item => item.form.col = 2)
dialogOpt.visible = true
}
function submitDialogForm(formValue: any) {
alert(JSON.stringify(formValue));
}
</script>
<style lang="scss">
.dialogFormExample {
.el-dialog {
min-width: 780px;
}
}
</style>
<style lang="scss" scoped>
</style>```# 抽屉表单
通过设置 formType='drawer' 开启抽屉形式的表单弹窗。
<template>
<el-button @click="openForm">
打开表单
</el-button>
<fits-form-dialog :option="dialogOpt" @submit="submitDialogForm" @cancel="dialogOpt.visible = false"
class="dialogFormExample" ref="formtypeRef">
<template #header>
<span>
头部插槽
</span>
</template>
<template #footer>
<span>
底部插槽
</span>
</template>
</fits-form-dialog>
</template>
<script setup lang="ts">
import { FitsFormDialog } from '@/fits-components';
import { FitsFormCreateModel } from '@/fits-components/type'
import { isHomeNumber, isPhoneNumber, isShortNumber } from '@/utils/is';
const formtypeRef = ref()
const dialogOpt = reactive({
width: '80%',
visible: false,
forms: [
{
title: '用户信息',
iconClass: 'user',
form: new FitsFormCreateModel({
rule: [
{
type: "input",
field: "UserName",
title: "用户名称",
props: {
placeholder: "请输入用户名称",
},
effect: {
required: '请输入用户名称'
}
},
{
type: "input",
field: "UserAccount",
title: "用户账号",
props: {
placeholder: "请输入用户账号",
},
effect: {
required: '请输入用户账号'
}
},
{
type: "input",
field: "oldPwd",
title: "初始密码",
props: {
type: 'password',
placeholder: "请输入原始密码"
},
effect: {
required: '请输入原始密码'
}
},
{
type: "radio",
field: "sex",
title: "性别",
options: [
{
value: "1",
label: "男"
},
{
value: "2",
label: "女"
}
]
},
{
type: "input",
field: "shortNum",
title: "短号",
props: {
placeholder: "请输入短号"
},
validate: [
{
validator: (rule: any, val: any) => {
return val ? isShortNumber(val) : true
},
message: "请输入正确的短号"
}
],
},
{
type: "radio",
field: "status",
title: "状态",
options: [
{
value: "1",
label: "启用"
},
{
value: "2",
label: "禁用"
}
]
},
],
option: {
form: {
labelPosition: 'right',
},
submitBtn: false,
resetBtn: false
},
}),
},
{
title: '组织关系',
iconClass: 'fits-system',
form: new FitsFormCreateModel({
rule: [
{
type: "datePicker",
field: "onJobDate",
title: "入职日期",
props: {
placeholder: "请选择入职日期"
},
effect: {
required: '请选择入职日期'
}
},
{
type: "input",
field: "officenumber",
title: "办公号码",
props: {
placeholder: "请输入办公号码"
},
validate: [
{
validator: (rule: any, val: any) => {
return val ? isHomeNumber(val) || isPhoneNumber(val) : true
},
message: "请输入正确的手机号或固话"
}
]
},
{
type: "datePicker",
field: "offJobDate",
title: "离职日期",
props: {
placeholder: "请选择离职日期"
}
},
{
type: "select",
field: "UserTag",
title: "用户标签",
props: {
filterable: true,
placeholder: "请选择用户标签",
},
options: [
{
value: "1",
label: "选项1"
},
{
value: "2",
label: "选项2"
}
],
},
],
option: {
form: {
labelPosition: 'right',
},
submitBtn: false,
resetBtn: false
},
}),
}
],
dialogProp: {
title: '新增用户',
width: '50%'
},
formType: 'drawer'
})
function openForm() {
dialogOpt.forms.map((item: any) => item.form.col = 1)
dialogOpt.visible = true
}
function submitDialogForm(formValue: any) {
alert(JSON.stringify(formValue));
}
</script>
<style lang="scss">
.dialogFormExample {
.el-dialog {
min-width: 780px;
}
}
</style>
<style lang="scss" scoped>
</style>```# FitsFormDialogModel 表单弹窗的属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 控制弹窗是否可见 | boolean | - |
| forms | 由一个或多个表单模块组成的数组 | FitsFormModuleModel[] | - |
| formType | 表单展现形式 | dialog / drawer | dialog |
| dialogProp | 弹窗 / 抽屉组件的配置 | dialogPropsopen in new window / drawerPropsopen in new window | - |
# FitsFormModuleModel属性
| 属性 | 说明 | 类型 | 必填项 | 默认值 |
|---|---|---|---|---|
| form | 子表单 | FitsFormCreateModel | 必填 | - |
| title | 表单模块名称 | string | 非必填 | - |
| iconClass | 表单模块图标 | string | 非必填 | - |
Loading...