FormPage
可配置化标准表单编辑页面
运行环境
| 名称 | 版本号 |
|---|---|
| Node.js | 15+ |
| NPM | 7+ |
| Vue.js | 3+ |
| @moment-design/web-vue | 1+ |
使用组件
安装依赖
npm install @moment-design/form-page --save
使用组件
import FormPage from "@moment-design/form-page"
import "@moment-design/form-page/dist/css/index.css"
<form-page :config=config @operate="handleOperate" @submit="submit"></form-page>
API
Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| operate | 点击操作按钮 | (key: string, rows?: any, index? number) |
| submit | 验证通过后提交表单 | (data: any) |
Props config
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| form | 配置表单 | config.form | - |
| sections | 配置表单区块 | config.sections | - |
Props config.form
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 表单标题 | string | - |
| disabled | 表单禁用 | boolean | - |
| operatesAlign | 底部操作按钮对齐方式 | 'left' | 'center' | 'right' | - |
| operates | 底部操作按钮 | ConfigFormOperates | - |
| data | 表单数据 | any | - |
| others | 其他扩展属性 | any | - |
Props ConfigFormOperates
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| left | 底部左侧操作按钮 | Array<ConfigFormOperatesItem> | - |
| centerShowResetButton | 底部中间重置按钮 | boolean | - |
| centerShowSubmitButton | 底部中间保存按钮 | boolean | - |
| center | 底部中间操作按钮 | Array<ConfigFormOperatesItem> | - |
| right | 底部右侧操作按钮 | Array<ConfigFormOperatesItem> | - |
Props ConfigFormOperatesItem
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| name | 操作按钮名称 | string | - |
| others | 操作按钮扩展属性 | others?: { permission?: string; [key: string]: any; }; | - |
Props config.sections
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 区块标题 | string | - |
| items | 区块表单项 | Array<ConfigSectionsItem> | - |
Props ConfigSectionsItem
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| type | 表单项类型 | undefined | 'text' | 'switch' | 'input' | 'textarea' | 'number' | 'select' | 'cascader' | 'radio' | 'checkbox' | 'date' | 'time' | 'daterange' | 'slot' | 'hidden' | - |
| label | 表单项 label | string | - |
| name | 表单项 name | string | - |
| size | 表单项大小 | 'mini' | 'small' | 'medium' | 'large' | - |
| rules | 表单项校验 | Array<any> | - |
| info | 表单项介绍 | string | - |
| tooltip | 表单项提示 | string | - |
| options | 下拉 / 级联数据 | Array<any> | - |
| others | 其他扩展属性 | any | - |
类型校验
export interface ILForm {
/**
* 表单配置
*/
form: {
/**
* 表单标题
*/
title?: string;
/**
* 表单禁用
*/
disabled?: boolean;
/**
* 底部操作按钮对齐方式
*/
operatesAlign?: 'left' | 'center' | 'right';
/**
* 底部操作按钮
*/
operates?: {
/**
* 底部左侧操作按钮
*/
left?: Array<ILFormOperates>;
/**
* 底部中间重置按钮
*/
centerShowResetButton?: boolean;
/**
* 底部中间保存按钮
*/
centerShowSubmitButton?: boolean;
/**
* 底部中间操作按钮
*/
center?: Array<ILFormOperates>;
/**
* 底部右侧操作按钮
*/
right?: Array<ILFormOperates>;
};
/**
* 表单数据
*/
data: any;
/**
* 其他扩展属性
*/
others?: any;
};
sections: Array<{
/**
* 区块标题
*/
title?: string;
/**
* 区块表单项
*/
items: Array<{
/**
* 表单项类型
*/
type:
| undefined
| 'text'
| 'switch'
| 'input'
| 'textarea'
| 'number'
| 'select'
| 'cascader'
| 'radio'
| 'checkbox'
| 'date'
| 'time'
| 'daterange'
| 'slot'
| 'hidden';
/**
* 表单项 label
*/
label: string;
/**
* 表单项 name
*/
name: string;
/**
* 表单项大小 "small" | "medium" | "large"
*/
size?: 'mini' | 'small' | 'medium' | 'large';
/**
* 表单项校验
*/
rules?: Array<any>;
/**
* 表单项介绍
*/
info?: string;
/**
* 表单项提示
*/
tooltip?: string;
/**
* 下拉 / 级联数据
*/
options?: Array<any>;
/**
* 其他扩展属性
*/
others?: any;
}>;
}>;
}
export interface ILFormOperates {
/**
* 操作按钮名称
*/
name: string;
/**
* 操作按钮扩展属性
*/
others?: {
/**
* 绑定权限节点
*/
permission?: string;
/**
* 其他扩展属性
*/
[key: string]: any;
};
}
