@moment-design/form-page

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;
  };
}