admin

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

@@ -14,4 +14,12 @@ export function addAddress(data) {
         method: 'post',
         data,
     })
+}
+// 删除地址
+export function deleteAddress(data) {
+    return request({
+        url: '/addressController/deleteAddress',
+        method: 'delete',
+        data
+    })
 }

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

@@ -1,6 +1,9 @@
 <template>
     <div class="address-add">
         <el-form :model="addressForm" ref="addressForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="地址ID" v-if="addressForm.addressid">
+                <el-input disabled v-model="addressForm.addressid"></el-input>
+            </el-form-item>
             <el-form-item label="地址名称" prop="addressname" :rules="[
                 { required: true, message: '地址名称不能为空' },
             ]">
@@ -36,15 +39,38 @@ export default {
             }
         };
     },
+    // 从路由参数中获取地址id
+    created() {
+        this.initPage();
+    },
     methods: {
+        // 初始化页面
+        initPage() {
+            // 从路由参数中获取地址id
+            const addressid = this.$route.query.addressid;
+            const addressname = this.$route.query.addressname;
+            const latitude = this.$route.query.latitude;
+            const longitude = this.$route.query.longitude;
+            // 初始化表单数据
+            this.addressForm = {
+                addressid: addressid,
+                addressname: addressname,
+                latitude: latitude,
+                longitude: longitude,
+            }
+        },
         submitForm(formName) {
             // this.$refs["组件的ref属性值"] 是获取到组件的实例对象
             this.$refs[formName].validate((valid) => {
                 if (valid) {
+                    // if(this.addressForm.addressid){
+                    //     // 修改地址
+                    //     this.addressForm.addressid = this.addressForm.addressid;
+                    // }
                     addAddress(this.addressForm).then(res => {
                         // 弹框通知用户添加成功
                         this.$message({
-                            message: '添加成功',
+                            message: this.addressForm.addressid ? '修改成功' : '添加成功' ,
                             type: 'success'
                         });
                         // 提交成功后，跳转到地址列表页面

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

@@ -11,7 +11,7 @@
 
                 <el-table-column label="操作">
                     <template slot-scope="scope">
-                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                         <!-- <el-button size="mini" type="danger"
                                     @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                         <template>
@@ -26,7 +26,7 @@
     </div>
 </template>
 <script>
-import { getAddressList } from '@/api/address'
+import { getAddressList, deleteAddress } from '@/api/address'
 export default {
     name: 'AddressList',
     data() {
@@ -42,8 +42,37 @@ export default {
         getAddress(){
             getAddressList().then(res => {
                 console.log(res.data.records)
+                
                 this.tableData = res.data.records
             })
+        },
+        // 删除地址
+        handleDelete(row){
+            // console.log(row)
+            deleteAddress([row.addressid]).then((res)=>{
+                console.log(res)
+                // 删除成功 刷新地址列表
+                this.getAddress()
+                // 删除成功 提示用户
+                this.$message({
+                    message: '删除成功',
+                    type: 'success'
+                })
+            })
+        },
+        // 编辑地址
+        handleEdit(row){
+            console.log(row)
+            // 编辑地址 跳转编辑页面
+            this.$router.push({
+                path: '/address/addressadd',
+                query: {
+                    addressid: row.addressid,
+                    addressname: row.addressname,
+                    latitude: row.latitude,
+                    longitude: row.longitude
+                }
+            })
         }
     }
 }