new

vue-admin-template-master/src/api/location.js

@@ -6,4 +6,22 @@ export function getLocation() {
     url: '/showAddresses',
     method: 'get'
   })
+}
+
+//添加地址列表
+export function addLocation(data) {
+  return request({
+    url: '/insertOneAddress',
+    method: 'post',
+    data
+  })
+}
+
+//删除地址列表
+export function delLocation(params) {
+  return request({
+    url: '/delOneAddress',
+    method: 'get',
+    params
+  })
 }

vue-admin-template-master/src/views/location/addLocation.vue

@@ -1,13 +1,86 @@
 <template>
-  
+  <div class="add-location">
+    <el-form
+      :model="ruleForm"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+      :rules="rules"
+    >
+      <el-form-item label="地址名称" prop="address">
+        <el-input v-model="ruleForm.address"></el-input>
+      </el-form-item>
+      <el-form-item label="经度" prop="longitude">
+        <el-input v-model="ruleForm.longitude"></el-input>
+      </el-form-item>
+      <el-form-item label="纬度" prop="latitude">
+        <el-input v-model="ruleForm.latitude"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >提交</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
+import {addLocation} from '@/api/location'
 export default {
-
-}
+  data() {
+    return {
+      ruleForm: {
+        address: "",
+        longitude: "",
+        latitude: "",
+      },
+      rules: {
+        address: [
+          { required: true, message: "请输入地址名称", trigger: "blur" },
+        ],
+        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
+        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addLocation({
+            address: this.ruleForm.address,
+            longitude: this.ruleForm.longitude,
+            latitude: this.ruleForm.latitude
+          })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "提交成功!",
+              });
+              this.$refs[formName].resetFields();
+              this.$router.push("/location/locationList");
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </script>
 
-<style>
-
+<style scoped>
+.add-location {
+  width: 500px;
+  margin: 100px auto 0;
+}
 </style>

vue-admin-template-master/src/views/location/locationList.vue

@@ -17,12 +17,23 @@
       </el-table-column>
       <el-table-column prop="latitude" label="纬度" width="180">
       </el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button
+            @click.native.prevent="deleteRow(scope.row)"
+            type="text"
+            size="small"
+          >
+            移除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
-import {getLocation} from '@/api/location'
+import {getLocation ,delLocation} from '@/api/location'
 export default {
   data() {
     return {
@@ -36,7 +47,38 @@ export default {
         console.log(res.data)
         this.tableData = res.data
       })
-    }
+    },
+    //删除地址列表
+    deleteRow(row) {
+      console.log(row.jrid);
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delLocation({
+            addressid: row.addressid,
+          })
+            .then((res) => {
+              console.log(res)
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getLocationList();
+            })
+            .catch((err) => {
+              console.log(err)
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
   },
   created(){
     this.getLocationList()
@@ -46,7 +88,7 @@ export default {
 
 <style scoped>
 .location-list{
-  width: 1000px;
+  width: 1100px;
   margin: 100px auto 0;
 }
 </style>