优化步骤表单

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fs-admin",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check build-only",

src/components/form/ElFormSteps.vue

@@ -6,26 +6,13 @@ 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 props = defineProps<Props>()
 
 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>
@@ -40,18 +27,6 @@ const handleSubmit = () => {
       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>

src/types/form.ts

@@ -18,7 +18,7 @@ export type BasicFormItem = {
   required?: boolean
   rules?: FormItemRule | FormItemRule[]
   span?: number
-  props?: object
+  props?: any
   events?: object
   request?: Function
   slots?: Array<FormSlot>

src/views/form/Step.vue

@@ -15,7 +15,7 @@ const formConfig = reactive<BasicForm>({
     {
       label: '',
       value: '',
-      name: '',
+      name: 'formSteps',
       type: 'form-steps',
       span: 24,
       props: {
@@ -31,8 +31,7 @@ const formConfig = reactive<BasicForm>({
           }
         ],
         active: 0,
-        simple: true,
-        showSubmitBtn: false
+        simple: true
       },
       events: {
         submit: handleSave
@@ -68,6 +67,27 @@ const formConfig = reactive<BasicForm>({
               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
+                }
+              }
             }
           ]
         },
@@ -93,6 +113,27 @@ const formConfig = reactive<BasicForm>({
                   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
+                }
+              }
             }
           ]
         },