基于Ant Design vue框架之二 修改页面细细拆分

我们还是老规矩，先上效果图吧~~

需要看整个页面的小盆友可以点下面这个路径哈~~
页面路径：总页面展示

继续上干货吧~翠花，上代码~~

继续走修改的画面：

<a-modal
        title="用户信息修改页面"
        :width="640"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
    >
    <a-spin :spinning="confirmLoading">
        <a-form :form="form">
        <!-- step1 -->
        <div>
            <a-form-item label="用户编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['id']" disabled/>
            </a-form-item>
            <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['account']" />
            </a-form-item>
            <a-form-item label="用户身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['adminName']" />
            </a-form-item>
            <a-form-item label="身份证号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['idCard']" />
            </a-form-item>
            <a-form-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['mobilePhone']" />
            </a-form-item>
            <a-form-item label="用户地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['address']" />
            </a-form-item>
        </div>
        <!-- step1 end -->
        </a-form>
    </a-spin>
    <template slot="footer">
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button
        key="forward"
        :loading="confirmLoading"
        type="primary"
        @click="handleNext(currentStep)"
        >确定</a-button>
    </template>
</a-modal>

edit(record) {
        this.visible = true
        const {
            form: { setFieldsValue }
        } = this
        this.$nextTick(() => {
            setFieldsValue(record)
        })
        },
        handleNext(step) {
        const {
            form: { validateFields }
        } = this
        // last step
        this.confirmLoading = true
        /**
        * @description  将from表单的数据进行传参并修改
        */
        validateFields((errors, values) => {
            console.log('errors:', errors, 'val:', values)
            if (!errors) {
            updateUser(values).then(res => {
                switch (res.code) {
                case 200:
                    this.$message.success('修改成功！')
                    this.$emit('ok', values)
                    this.visible = false
                    this.confirmLoading = false
                    break
                case 199:
                    this.$message.success('修改失败！')
                    break
            }
                    return res.data
            })
            }
        })
        },
        handleCancel() {
        // clear form & currentStep
        this.visible = false
        this.currentStep = 0
        }

修改的页面也就到这里了，若是有其他有想法的小伙伴可以参加其中，大家一起进步，一起共勉！！！！