SulaJS

# Create-Wizard 分步表单

# install

tnpm i -S @sula-template/create-wizard

# usage

import CreateWizard from "@sula-template/create-wizard";

# API

# ref

获取 form 实例

# layout

  • 类型: 'horizontal' | 'vertical' | 'inline'
  • 默认值: 'horizontal'

# itemLayout

  • 类型：object
  • 默认值：{ span: 24, labelCol: { span: 6 }, wrapperCol: { span: 12 } }

表单项布局分布，同itemLayout

# mode

  • 类型：'create' | 'view' | 'edit'
  • 默认值： 'create'

表单模式，create👉 创建模式，view👉 查看模式，edit👉 编辑模式

# initialValues

  • 类型： object
  • 默认值： -

表单初始值

注意

  • 仅在初始设置时生效，不会随设置值的改变而变化
  • 可以通过实例方法改变表单值

# remoteValues

表单初始值远程请求配置,详细配置请查看sula form remoteValues

# formProps

表单其他配置，详细配置请查看sula-form

# backAction

返回按钮行为设置

# actionsPosition

  • 类型：inner | bottom
  • 默认值：inner

按钮组位置

# steps

  • 类型：Array<step>
  • 默认值： -

步骤组件每一个步骤的内容，具体step配置信息请看下面

step配置参数：

参数 说明 类型 默认值
title 主标题 string -
subTitle 副标题 string -
description 描述 string -
fields 表单项 fields 表单项
submit 单步提交配置，优先级最高 FetchType -

常用示例：

{ 
  steps: [
    {
      title: "Step 1",
      subTitle: "00:00:05",
      description: "This is a description.",
      fields: [
        {
          name: "step1-name",
          label: "Name",
          render: "input"
        }
      ]
    },
    {
      title: "Step 2",
      subTitle: "00:00:15",
      description: "This is a description.",
      fields: [
        {
          name: "step2-name",
          label: "Name",
          render: "textarea"
        }
      ]
    }
  ]
};

step嵌套step示例：

{ 
  steps: [
    {
      title: "Step 1",
      subTitle: "00:00:05",
      description: "This is a description.",
      steps: [{
        title: 'Step2-1',
        fields: [{
          name: 'step2-1-name',
          label: 'Name',
          render: 'input',
        }]
      },{
        title: 'Step2-2',
        fields: [{
          name: 'step2-2-age',
          label: 'Age',
          render: {
            type: 'inputnumber',
            props: {
              style: { width: '100%' },
            }
          }
        }]
      }]
    }
  ]
};

# result

  • 类型：object
  • 默认值： -

结果页面配置，如果不设置则无结果页

示例：

{
    title: 'Result',
    subTitle: '00:00:36',
    description:  'This is a result description.',
    successMessage: 'Submitted successfully',
    successDescription:  'Submitted description successfully',
    isStep: true,
}

配置参数：

参数 说明 类型 默认值
title 主标题 string -
subTitle 副标题 string -
description 描述 string -
successMessage 成功提示 string -
failedMessage 失败提示 string -
successDescription 提交成功描述提示 string -
failedDescription 提交失败描述提示 string -
isStep 是否作为一个Step显示 boolean -

# showSave

  • 类型：boolean
  • 默认值：false

是否支持单步保存，单步保存将默认使用submit配置，如果某一个步请求不一样，则可以

const config = {
  steps = [{
    submit: {
      // 该步骤不一样的请求配置
    }
  }]
}

# submit

向后端提交步骤条的表单信息

示例：

{
  url: "https://jsonplaceholder.typicode.com/posts/1",
  type: "get",
  params: {
   id: '0323',
  },
  final() {},
  finish({ result }) {},
};

配置参数：

参数 说明 类型 默认值
url 请求路径 string -
type 请求方式 string -
params 请求参数 object -
final 最后回调 () => void -
finish 成功回调 (result) => void -

使用 tips：

  • params和表单的value进行合并
  • final在finally中执行，无论成功失败都会调用。
  • finish请求成功时执行。
  • 如果不配置finish默认是back。
Last Updated: 2020/2/16 下午7:32:28

← Search-Table 查询表格 →