npm package: @moment-design/form-page
Description: 可配置化标准表单编辑页面
Latest version: 1.3.13

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