Vip4.0W/10_vuecli/bankpro/src/views/address/AddressAdd.vue

<template>
    <div class="address-add">
        <el-form :model="addressForm" :rules="rules" ref="addressForm" label-width="100px">
            <el-form-item label="地址ID" v-if="$route.query.addressid">
                <el-input disabled v-model="addressForm.addressid"></el-input>
            </el-form-item>
            <el-form-item label="地址名称" prop="addressname">
                <el-input v-model="addressForm.addressname"></el-input>
            </el-form-item>
            <el-form-item label="地址经度" prop="longitude">
                <el-input type="number" v-model="addressForm.longitude"></el-input>
            </el-form-item>
            <el-form-item label="地址纬度" prop="latitude">
                <el-input type="number" v-model="addressForm.latitude"></el-input>
            </el-form-item>

            <el-form-item>
                <!-- 提交按钮 -->
                <el-button type="primary" @click="submitForm('addressForm')">
                    {{$route.query.addressid?"更新":"添加"}}地址
                </el-button>
                <!-- 重置按钮 -->
                <el-button @click="resetForm('addressForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { addOrUpdateAddress } from "@/api/address";
    export default{
        name:"AddressAdd",
        data(){
            return{
                addressForm:{
                    addressid:"",
                    addressname:"",
                    longitude:"",
                    latitude:""
                },
                // 表单验证规则
                rules:{
                    addressname:[
                        {required:true,message:"请输入地址名称",trigger:"blur"}
                    ],
                    longitude:[
                        {required:true,message:"请输入地址经度",trigger:"blur"}
                    ],
                    latitude:[
                        {required:true,message:"请输入地址纬度",trigger:"blur"}
                    ]
                }
            }
        },
        mounted(){
            // 从路由参数中获取地址信息
            if(this.$route.query.addressid){
                // 赋值给表单数据
                this.addressForm = {...this.$route.query}
            }
        },
        methods:{
            // 添加地址按钮
            submitForm(formName){
                // 验证表单
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        // 发送请求添加地址
                        addOrUpdateAddress(this.addressForm).then(()=>{
                            // 弹框提示成功
                            this.$message({
                                message: '地址添加成功!',
                                type: 'success'
                            });
                            // 重置表单
                            this.resetForm("addressForm");
                            // 跳转地址列表页面
                            this.$router.push("/address/list")
                        }).catch(()=>{
                            // 弹框提示失败
                            this.$message({
                                message: '地址添加失败!',
                                type: 'error'
                            });
                        })
                    }else{
                        // 验证失败
                        this.$message({
                            message: '请填写完整地址信息',
                            type: 'warning'
                        });
                    }
                })
            },
            // 重置表单
            resetForm(formName){
                // 重置表单数据
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<style scoped>
    .address-add{
        width: 600px;
        margin: 100px auto;
    }
</style>