fs-admin/src/views/form/Step.vue

<script lang="ts" setup>
import type { BasicForm } from '@/types/form'
import useValidator from '@/hooks/useValidator'

const validator = useValidator()

const proFormRef = ref<any>()
const handleSave = () => {
  proFormRef.value.submit()
}

const formData = reactive<any>({})
const formConfig = reactive<BasicForm>({
  formItems: [
    {
      label: '',
      value: '',
      name: 'formSteps',
      type: 'form-steps',
      span: 24,
      props: {
        steps: [
          {
            title: 'step 1'
          },
          {
            title: 'step 2'
          },
          {
            title: 'step 3'
          }
        ],
        active: 0,
        simple: true
      },
      events: {
        submit: handleSave
      },
      children: [
        {
          label: '',
          value: '',
          name: '',
          type: 'form-group',
          span: 24,
          children: [
            {
              label: '付款账户',
              value: '',
              name: 'pay',
              type: 'input'
            },
            {
              label: '收款账户',
              value: '',
              name: 'account',
              type: 'input'
            },
            {
              label: '收款人姓名',
              value: '',
              name: 'name',
              type: 'input'
            },
            {
              label: '收款金额',
              value: '',
              name: 'sum',
              type: 'input'
            },
            {
              label: '',
              value: '',
              name: '',
              type: 'button',
              span: 24,
              props: {
                type: 'primary',
                buttonName: '下一步',
                class: 'mt-4',
                style: {
                  marginLeft: '50%',
                  transform: 'translateX(-50%)'
                }
              },
              events: {
                click: () => {
                  formConfig.formItems[0].props.active = 1
                }
              }
            }
          ]
        },
        {
          label: '',
          value: '',
          name: '',
          type: 'form-group',
          children: [
            {
              label: '区域1',
              value: '',
              name: 'area1',
              type: 'area'
            },
            {
              label: '手机号',
              value: '',
              name: 'phone1',
              type: 'input',
              rules: [
                {
                  validator: validator.mobile
                }
              ]
            },
            {
              label: '',
              value: '',
              name: '',
              type: 'button',
              span: 24,
              props: {
                type: 'primary',
                buttonName: '下一步',
                class: 'mt-4',
                style: {
                  marginLeft: '50%',
                  transform: 'translateX(-50%)'
                }
              },
              events: {
                click: () => {
                  formConfig.formItems[0].props.active = 2
                }
              }
            }
          ]
        },
        {
          label: '',
          value: '',
          name: '',
          type: 'form-group',
          children: [
            {
              label: '',
              value: '',
              name: '',
              notFormItem: true,
              type: 'result',
              span: 24,
              props: {
                icon: 'success',
                title: '操作成功',
                class: 'w-full text-center'
              }
            }
          ]
        }
      ]
    }
  ]
})

const create = (data: any) => {
  console.log(data)
}
const update = (data: any) => {
  console.log(data)
}
</script>

<template>
  <div class="h-full bg-white p-16px pt-50px flex justify-center overflow-auto">
    <div class="w-800px">
      <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
        <template #prepend1> test1 </template>
        <template #append1> test1 </template>
      </pro-form>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>