fs-admin/src/components/form/ElFormSteps.vue

<script setup lang="ts">
import type { StepProps } from 'element-plus'
import type { BasicForm, BasicFormItem } from '@/types/form'

interface Props {
  formItem: BasicFormItem
  formConfig: BasicForm
  formData: any
  showSubmitBtn: boolean
}
const props = withDefaults(defineProps<Props>(), {
  active: 0,
  showSubmitBtn: true
})
const emits = defineEmits(['submit', 'next'])

const stepsProps = props.formItem.props as {
  active: number
  steps: Array<StepProps>
}

const handleNext = () => {
  stepsProps.active < stepsProps.steps?.length - 1 && stepsProps.active++
  emits('next', props.formData)
}
const handleSubmit = () => {
  emits('submit', props.formData)
}
</script>

<template>
  <el-steps class="mb-4" v-bind="stepsProps">
    <el-step v-for="item in stepsProps?.steps" v-bind="item"></el-step>
  </el-steps>
  <template v-for="(item, index) in formItem.children">
    <component
      :is="'el-' + item.type"
      :formItem="item"
      :formData="formData"
      v-if="stepsProps.active === index"
    ></component>
  </template>
  <div class="text-center">
    <el-button
      type="primary"
      @click="handleSubmit"
      v-if="showSubmitBtn && stepsProps.active === stepsProps.steps?.length - 1"
    >
      提交
    </el-button>
    <el-button type="primary" @click="handleNext" v-if="stepsProps.active < stepsProps.steps?.length - 1">
      下一步
    </el-button>
  </div>
</template>

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