Vue 开发实战实战篇 # 39：创建一个分步表单

Posted 2022-09-28 凯小默

说明

【Vue 开发实战】学习笔记。

效果

第一步：

第二步：填写密码提交

第三步：成功提示

添加 vuex

新建 ant-design-vue-pro\\src\\store\\modules\\form.js

import router from "@/router";
import request from "@/utils/request"
import  message  from "ant-design-vue";

const state = 
    step: 
        payAccount: "kaimo313"
    


const actions = 
    async submitStepForm( commit ,  payload ) 
        console.log("submitStepForm--->", ...arguments)
        let res = await request(
            url: "/api/form",
            method: "post",
            data: payload
        );
        if(res.data && res.data.message === "OK") 
            console.log("res--->", res)
            commit("saveStepFormData", payload);
            router.push("/form/step-form/result");
            message.success(
                content: "提交成功"
            );
        
    


const mutations = 
    saveStepFormData(state,  payload ) 
        state.step = 
            ...state.step,
            ...payload
        
    


export default 
    namespaced: true,
    state,
    actions,
    mutations

然后 ant-design-vue-pro\\src\\store\\index.js 使用这个模块

import Vue from "vue";
import Vuex from "vuex";
import form from "./modules/form";

Vue.use(Vuex);

export default new Vuex.Store(
    state: ,
    mutations: ,
    actions: ,
    modules: 
        form,
    ,
);

添加 mock form的提交接口

新建文件：ant-design-vue-pro\\mock\\form.js

function form(method) 
    let res = null;
    switch (method) 
        case "POST":
            res =  message: "OK" ;
            break;
        default:
            res = null;
    
    return res;


module.exports = form;

Step1 组件

<template>
    <div>
        <a-form layout="horizontal" :form="form">
            <a-form-item
                label="付款账号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input v-decorator="[
                    'payAccount',
                    
                        initialValue: step.payAccount,
                        rules: [
                            
                                required: true,
                                message: '请输入付款账号'
                            
                        ]
                    ,
                ]" placeholder="请输入付款账号" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleSubmit">下一步</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
export default 
    data() 
        this.form = this.$form.createForm(this);
        return 
            formItemLayout:
                labelCol:  span: 4 ,
                wrapperCol:  span: 14 ,
            
        ;
    ,
    computed: 
        step() 
            return this.$store.state.form.step
        
    ,
    created() 
        console.log("this.$store---->", this.$store)
    ,
    methods: 
        handleSubmit() 
            const  form, $router, $store = this;
            form.validateFields((err, values) => 
                console.log(err, values)
                if(!err) 
                    console.log(values);
                    $store.commit(
                        type: "form/saveStepFormData",
                        payload: values
                    );
                    $router.push("/form/step-form/confirm");
                
            )
        
    ,
;
</script>

<style></style>

Step2 组件

<template>
    <div>
        <a-form layout="horizontal" :form="form">
            <a-form-item
                label="付款账号"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                step.payAccount
            </a-form-item>
            <a-form-item
                label="账号密码"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
            >
                <a-input v-decorator="[
                    'password',
                    
                        initialValue: password,
                        rules: [
                            
                                required: true,
                                message: '请输入账号密码'
                            
                        ]
                    ,
                ]"
                type="password"
                placeholder="请输入账号密码" />
            </a-form-item>
            <a-form-item>
                <a-button @click="goPrev" style="margin-right: 10px;">上一步</a-button>
                <a-button type="primary" @click="handleSubmit">提交</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script>
export default 
    data() 
        this.form = this.$form.createForm(this);
        return 
            password: "",
            formItemLayout:
                labelCol:  span: 4 ,
                wrapperCol:  span: 14 ,
            
        ;
    ,
    computed: 
        step() 
            return this.$store.state.form.step
        
    ,
    created() 
        console.log("this.$store---->", this.$store)
    ,
    methods: 
        goPrev() 
            this.$router.push("/form/step-form/info");
        ,
        handleSubmit() 
            const  form, $store, step  = this;
            form.validateFields((err, values) => 
                console.log(err, values)
                if(!err) 
                    console.log(values);
                    // 以载荷形式分发
                    $store.dispatch("form/submitStepForm", 
                        payload:  ...step, ...values 
                    );
                    // 以对象形式分发
                    // $store.dispatch(
                    //     type: "form/submitStepForm",
                    //     payload:  ...step, ...values 
                    // );
                
            )
        
    ,
;
</script>

<style></style>

Step3 组件

<template>
    <div>操作成功，预计两个小时到账。</div>
</template>

<script>
export default ;
</script>

<style></style>