src/api/address.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function getAddressList() {
+  return request({
+    url: '/showAddresses',
+    method: 'get'
+  })
+}
+
+export function addAddress(data) {
+  return request({
+    url: '/insertOneAddress',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteAddress(params) { 
+  return request({
+    url: '/delOneAddress',
+    method: 'get',
+    params
+  })
+}

src/icons/svg/address-add.svg

@@ -0,0 +1 @@
+<svg t="1699425520417" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4697" width="200" height="200"><path d="M93.6 927.9c-2.8 0-5.5-0.6-8.1-1.8-6.5-3.1-10.6-9.7-10.6-16.9V251.6c0-5.7 2.6-11.1 7-14.7L269.7 86.6c6.4-5.1 15.4-5.5 22.2-1l215 143.4 215-143.4c6.8-4.5 15.7-4.1 22.2 1L932 236.9c4.5 3.6 7 9 7 14.7v469.7c0 10.4-8.4 18.8-18.8 18.8s-18.8-8.4-18.8-18.8V260.6l-170.1-136-214 142.6c-6.3 4.2-14.5 4.2-20.8 0l-214-142.6-170.1 136V870l157.3-125.9c6.4-5.1 15.4-5.5 22.2-1l215.5 143.7 83.7-50.2c8.9-5.3 20.5-2.5 25.8 6.4 5.3 8.9 2.5 20.4-6.4 25.8l-93.9 56.4c-6.3 3.7-14 3.6-20.1-0.5L282.5 782 105.4 923.8c-3.4 2.7-7.6 4.1-11.8 4.1z" fill="#007AFF" p-id="4698"></path><path d="M287.1 777.6c-10.4 0-17-8.4-17-18.8V101.3c0-10.4 6.6-18.8 17-18.8s17 8.4 17 18.8v657.5c0 10.4-6.6 18.8-17 18.8zM734.4 571c-10.4 0-22.6-8.4-22.6-18.8V101.3c0-10.4 12.3-18.8 22.6-18.8 10.4 0 22.6 8.4 22.6 18.8v450.9c0 10.4-12.3 18.8-22.6 18.8zM502.2 927.9c-10.4 0-17-8.4-17-18.8V251.6c0-10.4 6.6-18.8 17-18.8s17 8.4 17 18.8v657.5c0 10.4-6.6 18.8-17 18.8z" fill="#007AFF" p-id="4699"></path><path d="M751.1 927.9c-103.6 0-187.9-84.3-187.9-187.9 0-103.6 84.3-187.9 187.9-187.9C854.7 552.2 939 636.5 939 740c0 103.6-84.3 187.9-187.9 187.9z m0-338.1c-82.9 0-150.3 67.4-150.3 150.3s67.4 150.3 150.3 150.3S901.4 823 901.4 740.1 834 589.8 751.1 589.8z" fill="#007AFF" p-id="4700"></path><path d="M751.3 834c-10.4 0-17-8.4-17-18.8V664.9c0-10.4 6.6-18.8 17-18.8s17 8.4 17 18.8v150.3c0 10.4-6.6 18.8-17 18.8z" fill="#007AFF" p-id="4701"></path><path d="M826.3 751.9H676c-10.4 0-18.8-6.6-18.8-17s8.4-17 18.8-17h150.3c10.4 0 18.8 6.6 18.8 17s-8.4 17-18.8 17z" fill="#007AFF" p-id="4702"></path></svg>

src/icons/svg/address-list.svg

@@ -0,0 +1 @@
+<svg t="1699425565566" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5769" width="200" height="200"><path d="M743.424 554.496c69.12 0 124.928 54.272 124.928 121.344v4.096c-1.536 39.936-24.576 84.992-61.952 131.072-13.824 16.896-29.184 32.768-44.032 47.104l-7.68 7.168c-1.024 1.024-2.56 2.048-3.584 3.072l-7.68 6.656-4.608-4.096c-20.992-18.432-40.448-38.912-58.368-60.416-37.376-45.568-60.416-90.624-61.952-131.072v-4.096c0-66.56 56.32-120.832 124.928-120.832zM341.504 213.504v64h-42.496v533.504h317.44c7.68 10.752 15.872 22.016 24.576 32.768 8.704 10.752 17.92 20.992 27.648 31.232H299.008c-35.328 0-64-28.672-64-64V277.504c0-35.328 28.672-64 64-64h42.496z m401.92 404.992c-32.768 0-58.88 24.064-60.928 53.76v5.632c1.024 22.528 16.384 55.296 47.104 92.672 4.096 5.12 8.704 10.24 13.312 15.872l6.656-7.68 6.656-7.68c29.184-35.328 44.544-66.56 47.104-89.088v-5.632c1.024-31.744-26.112-57.856-59.904-57.856z m0 25.088c19.456 0 35.84 15.872 35.84 35.84 0 19.456-15.872 35.84-35.84 35.84-19.456 0-35.84-15.872-35.84-35.84 0-19.456 16.384-35.84 35.84-35.84z m-188.928-89.088v64H362.496v-64h192z m171.008-340.992c35.328 0 64 28.672 64 64v231.936c-20.992-5.632-42.496-7.168-64-5.12V277.504h-42.496V213.504h42.496z m-64 212.992v64H362.496V426.496h299.008z m-85.504-276.992c35.328 0 64 28.672 64 64V256c0 35.328-28.672 64-64 64h-128C412.672 320 384 291.328 384 256v-42.496c0-35.328 28.672-64 64-64h128z m0 64h-128V256h128v-42.496z" p-id="5770" fill="#1296db"></path></svg>

src/icons/svg/address.svg

@@ -0,0 +1 @@
+<svg t="1699425668825" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8165" width="200" height="200"><path d="M821.653333 633.813333L576.533333 917.333333a85.333333 85.333333 0 0 1-129.066666 0.064L198.634667 629.952c-1.152-1.322667-2.133333-2.773333-2.88-4.266667A361.088 361.088 0 0 1 149.333333 448c0-200.298667 162.368-362.666667 362.666667-362.666667s362.666667 162.368 362.666667 362.666667c0 63.744-16.490667 125.162667-47.381334 179.370667a21.269333 21.269333 0 0 1-5.632 6.421333zM792.32 602.453333A318.442667 318.442667 0 0 0 832 448c0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 55.317333 14.037333 108.522667 40.384 155.733333l247.317333 285.738667a42.666667 42.666667 0 0 0 64.554667-0.021333L792.32 602.453333zM512 597.333333a149.333333 149.333333 0 1 1 0-298.666666 149.333333 149.333333 0 0 1 0 298.666666z m0-42.666666a106.666667 106.666667 0 1 0 0-213.333334 106.666667 106.666667 0 0 0 0 213.333334z" fill="#1296db" p-id="8166"></path></svg>

src/router/index.js

@@ -114,6 +114,31 @@ export const constantRoutes = [
       }
     ]
   }, 
+  {
+    path: '/address',
+    component: Layout,
+    meta: { title: '地址管理', icon: 'address-manager' },
+    children: [
+      {
+        path: 'index',
+        name: 'Address',
+        component: () => import('@/views/address/index'),
+        meta: { title: '地址首页', icon: 'address' }
+      },
+      {
+        path: 'addressList',
+        name: 'AddressList',
+        component: () => import('@/views/address/addressList'),
+        meta: {title: '地址列表', icon: 'address-list'}
+      },
+      {
+        path: 'addAddress',
+        name: 'AddAddress',
+        component: () => import('@/views/address/addAddress'),
+        meta: {title: '添加地址', icon: 'address-list'}
+      }
+    ]
+  }, 
   {
     path: '/nested',
     component: Layout,

src/views/address/addAddress.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <h1 class="list-title">添加地址</h1>
+    <el-form :model="addAddressRuleForm" :rules="rules" ref="addAddressRuleForm" label-width="100px"
+      class="demo-addAddressRuleForm">
+      <el-form-item label="地址名称" prop="addressname">
+        <el-input v-model="addAddressRuleForm.addressname" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="地址经度" prop="longitude">
+        <el-input v-model="addAddressRuleForm.longitude" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="地址纬度" prop="latitude">
+        <el-input v-model="addAddressRuleForm.latitude" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('addAddressRuleForm')">提交</el-button>
+        <el-button @click="resetForm('addAddressRuleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { addAddress } from '@/api/address'
+
+export default {
+  data() {
+    return {
+      addAddressRuleForm: {
+        addressname: '',
+        longitude: '',
+        latitude: ''
+      },
+      rules: {
+        addressname: [
+          { required: true, message: '地址名称不能为空' }
+        ],
+        longitude: [
+          { required: true, message: '地址经度不能为空' }
+        ],
+        latitude: [
+          { required: true, message: '地址纬度不能为空' }
+        ]
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addAddress({
+            address: this.addAddressRuleForm.addressname,
+            longitude: this.addAddressRuleForm.longitude,
+            latitude: this.addAddressRuleForm.latitude,
+          }).then(res => {
+            if (res.code == 101) {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              this.$router.push({
+                path: '/address/addressList'
+              })
+            } else {
+              this.$message.error(res.message);
+            }
+          }).catch(err => {
+            this.$message.error(err.message);
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    }
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.demo-addAddressRuleForm {
+  margin: 50px auto 0;
+  transform: translateX(-50px);
+  width: 700px;
+}
+</style>

src/views/address/addressList.vue

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <h1 class="list-title">地址列表</h1>
+    <hr>
+    <div v-show="isShow">
+      <el-table :data="tableData" style="width: 700px" max-height="250" class="list-table">
+        <el-table-column fixed prop="addressid" label="地址ID" width="150">
+        </el-table-column>
+        <el-table-column prop="addressname" label="地址名称" width="120">
+        </el-table-column>
+        <el-table-column prop="longitude" label="地址经度" width="120">
+        </el-table-column>
+        <el-table-column prop="latitude" label="地址纬度" width="120">
+        </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>
+    <div v-show="!isShow">
+      <p>暂时没有地址</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAddressList, deleteAddress } from '@/api/address';
+
+export default {
+  methods: {
+    deleteRow(row) {
+      deleteAddress({
+        addressid: row.addressid
+      }).then(res => {
+        if (res.code == 101) {
+          this.$message({
+            message: res.message,
+            type: 'success'
+          })
+          this.showAddressList()
+        }else {
+          this.$message.error(res.message);
+        }
+      }).catch(err => {
+        this.$message.error(err.message);
+      })
+    },
+    showAddressList() {
+      getAddressList().then(res => {
+        if (res.code == 101) {
+          this.tableData = res.data
+        } else {
+          this.isShow = false  
+        }
+      }).catch(err => {
+        console.log('err', err)
+      })
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      isShow: true
+    }
+  },
+  created() {
+    this.showAddressList()
+  }
+}
+</script>
+
+<style scoped>
+.list-title {
+  text-align: center;
+  color: #4f4e4e;
+  font-weight: normal;
+}
+
+.list-table {
+  margin: 0 auto;
+}
+</style>

src/views/address/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h1>地址首页</h1>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+} 
+</style>

src/views/level/levelList.vue

@@ -47,7 +47,6 @@ export default {
     },
     showLevelList() {
       getLevelList().then(res => {
-        console.log('res', res)
         if (res.code == 101) {
           this.tableData = res.data
         } else {