admin

10_vuecli/bankpro/src/api/address.js

@@ -21,19 +21,19 @@ export function getAddressList() {
     })
 }
 
-// 添加地址
+// 添加或者修改地址
 // 调用该方法需要传递参数 参数格式
 // {
+//     "addressid":"1", // 如果是添加地址 则该字段为空 如果是修改地址 则该字段为要修改的地址id
 //     "addressname": "张三",
 //     "longitude": 1111,
 //     "latitude": 2222,
 // }
-export function addAddress(data){
+export function addOrUpdateAddress(data){
     return request({
         url:"/addressController/saveOrUpdateAddress",
         method:"post",
         data
     })
-
 }
 

10_vuecli/bankpro/src/views/address/AddressAdd.vue

@@ -1,6 +1,9 @@
 <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>
@@ -13,7 +16,9 @@
 
             <el-form-item>
                 <!-- 提交按钮 -->
-                <el-button type="primary" @click="submitForm('addressForm')">立即创建</el-button>
+                <el-button type="primary" @click="submitForm('addressForm')">
+                    {{$route.query.addressid?"更新":"添加"}}地址
+                </el-button>
                 <!-- 重置按钮 -->
                 <el-button @click="resetForm('addressForm')">重置</el-button>
             </el-form-item>
@@ -21,12 +26,13 @@
     </div>
 </template>
 <script>
-    import { addAddress } from "@/api/address";
+    import { addOrUpdateAddress } from "@/api/address";
     export default{
         name:"AddressAdd",
         data(){
             return{
                 addressForm:{
+                    addressid:"",
                     addressname:"",
                     longitude:"",
                     latitude:""
@@ -45,6 +51,13 @@
                 }
             }
         },
+        mounted(){
+            // 从路由参数中获取地址信息
+            if(this.$route.query.addressid){
+                // 赋值给表单数据
+                this.addressForm = {...this.$route.query}
+            }
+        },
         methods:{
             // 添加地址按钮
             submitForm(formName){
@@ -52,7 +65,7 @@
                 this.$refs[formName].validate((valid) => {
                     if(valid){
                         // 发送请求添加地址
-                        addAddress(this.addressForm).then(()=>{
+                        addOrUpdateAddress(this.addressForm).then(()=>{
                             // 弹框提示成功
                             this.$message({
                                 message: '地址添加成功!',

10_vuecli/bankpro/src/views/address/AddressList.vue

@@ -13,8 +13,7 @@
             </el-table-column>
             <el-table-column label="操作">
                 <template slot-scope="scope">
-                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
+                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                     <el-popconfirm title="确定删除吗？" @onConfirm="deleteConfirm(scope.row)" confirm-button-text="确定删除">
                         <el-button slot="reference" size="mini" type="danger">删除</el-button>
                     </el-popconfirm>
@@ -38,6 +37,16 @@ export default {
         this.getAddress()
     },
     methods: {
+        // 编辑地址
+        handleEdit(row){
+            // 跳转到添加地址页面 并传递地址信息
+            this.$router.push({
+                path:"/address/add",
+                query:{
+                    ...row
+                }
+            })
+        },
         // 获取地址列表
         getAddress() {
             // 调用地址列表接口方法