new

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

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+/* 获取全部地址信息 */
+export function getLocation() {
+  return request({
+    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/api/message.js

@@ -0,0 +1,36 @@
+import request from '@/utils/request'
+
+/* 获取全部信息 */
+export function getMessage() {
+  return request({
+    url: '/showMessage',
+    method: 'get'
+  })
+}
+
+/* 添加信息 */
+export function addMessage(data) {
+  return request({
+    url: '/insertAllMessage',
+    method: 'post',
+    data
+  })
+}
+
+/* 根据id去查询信息 */
+export function showMessage(params) {
+  return request({
+    url: '/showOneMessage',
+    method: 'get',
+    params
+  })
+}
+
+/* 信息修改 */
+export function updateMessage(data) {
+  return request({
+    url: '/updateMessage',
+    method: 'post',
+    data
+  })
+}

vue-admin-template-master/src/icons/svg/location.svg

@@ -0,0 +1 @@
+<svg t="1718500770032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4260" width="128" height="128"><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="#d4237a" p-id="4261"></path></svg>

vue-admin-template-master/src/icons/svg/message.svg

@@ -0,0 +1 @@
+<svg t="1718516744492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4715" width="64" height="64"><path d="M785.1008 380.6208a1.2032 1.2032 0 0 0-0.1792-0.3072 107.52 107.52 0 0 0-37.6064-37.9648A94.9248 94.9248 0 0 0 698.88 328.96H38.4v438.656c0 61.44 46.08 111.744 102.4 111.744h660.48V440.704a122.4704 122.4704 0 0 0-0.9472-15.1296 117.1968 117.1968 0 0 0-15.232-44.9536z" fill="#EE7C3D" p-id="4716"></path><path d="M984.6528 241.2544a95.232 95.232 0 0 0-15.232-44.9536 1.2032 1.2032 0 0 0-0.1792-0.3072 107.52 107.52 0 0 0-37.6064-37.9648A94.9248 94.9248 0 0 0 883.2 144.64H140.8a94.9248 94.9248 0 0 0-48.4352 13.3888 107.52 107.52 0 0 0-37.6064 37.9648 1.2032 1.2032 0 0 0-0.1792 0.3072 95.232 95.232 0 0 0-15.36 44.9536 122.4704 122.4704 0 0 0-0.9472 15.1296v511.232c0 61.44 46.08 111.744 102.4 111.744H883.2c56.32 0 102.4-50.2784 102.4-111.744v-511.232a122.4704 122.4704 0 0 0-0.9472-15.1296zM883.2 226.56a11.4176 11.4176 0 0 1 1.6128 0h0.512l0.8704 0.2048 9.0368 7.68a25.3952 25.3952 0 0 1 4.224 4.48 35.1232 35.1232 0 0 1 3.3536 9.5232c-0.3584 5.12-4.2496 9.5744-7.68 12.4928L546.9184 559.5136c-8.4992 7.296-21.2224 11.4688-34.9184 11.4688s-26.4192-4.1728-34.9184-11.4432L128.7424 261.2992c-3.3792-2.9184-7.2704-7.3472-7.68-12.5184a34.3552 34.3552 0 0 1 3.3536-9.4976 25.3952 25.3952 0 0 1 4.224-4.48l9.0368-7.68 0.8704-0.1792h0.512a11.4176 11.4176 0 0 1 1.6128 0z m0 570.88H140.8c-9.6768 0-20.48-12.8-20.48-29.824V361.9072l303.488 259.8656C448 642.56 480.0256 652.8 512 652.8s64-10.3936 88.192-31.1296L903.68 361.9072v405.7088c0 17.0752-10.8032 29.824-20.48 29.824z" fill="#333333" p-id="4717"></path></svg>

vue-admin-template-master/src/router/index.js

@@ -114,6 +114,62 @@ export const constantRoutes = [{
       }
     ]
   },
+  {
+    path: '/location',
+    component: Layout,
+    name: 'Location',
+    meta: {
+      title: '地址',
+      icon: 'location'
+    },
+    children: [{
+        path: 'locationList',
+        name: 'locationList',
+        component: () => import('@/views/location/locationList.vue'),
+        meta: {
+          title: '地址列表',
+          icon: 'location'
+        }
+      },
+      {
+        path: 'addLocation',
+        name: 'addLocation',
+        component: () => import('@/views/location/addLocation.vue'),
+        meta: {
+          title: '添加地址',
+          icon: 'location'
+        }
+      }
+    ]
+  },
+  {
+    path: '/message',
+    component: Layout,
+    name: 'Message',
+    meta: {
+      title: '信息',
+      icon: 'message'
+    },
+    children: [{
+        path: 'messageList',
+        name: 'messageList',
+        component: () => import('@/views/message/messageList.vue'),
+        meta: {
+          title: '信息列表',
+          icon: 'message'
+        }
+      },
+      {
+        path: 'addMessage',
+        name: 'addMessage',
+        component: () => import('@/views/message/addMessage.vue'),
+        meta: {
+          title: '添加信息',
+          icon: 'message'
+        }
+      }
+    ]
+  },
 
   {
     path: '/form',

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

@@ -0,0 +1,86 @@
+<template>
+  <div class="add-location">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <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({
+                message: "恭喜你，添加地址信息成功",
+                type: "success",
+              });
+              this.$refs[formName].resetFields();
+              this.$router.push('/location/locationList')
+            })
+            .catch((err) => {
+              this.$message.error('错了哦，添加地址信息失败');
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.add-location {
+  width: 70%;
+  margin: 120px auto;
+}
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="location-list">
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column type="index" width="50"> </el-table-column>
+      <el-table-column prop="addressid" label="ID"> </el-table-column>
+      <el-table-column prop="addressname" label="地址名称"> </el-table-column>
+      <el-table-column prop="longitude" label="经度"> </el-table-column>
+      <el-table-column prop="latitude" label="维度"> </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, delLocation } from "@/api/location";
+export default {
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    //获取全部的地址信息
+    getLocationList() {
+      getLocation().then((res) => {
+        this.tableData = res.data;
+      });
+    },
+    //点击删除
+    deleteRow(row) {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delLocation({
+            addressid: row.addressid,
+          })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getLocationList();
+            })
+            .catch((err) => {
+              this.$message.error('删除失败');
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+  created() {
+    this.getLocationList();
+  },
+};
+</script>
+
+<style scoped>
+.location-list {
+  width: 70%;
+  margin: 120px auto;
+}
+</style>

vue-admin-template-master/src/views/message/addMessage.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="add-message">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="用户名称" prop="uname">
+        <el-input v-model="ruleForm.uname"></el-input>
+      </el-form-item>
+      <el-form-item label="地址ID" prop="addressid">
+        <el-select v-model="ruleForm.addressid" placeholder="请选择活动区域">
+          <el-option
+            v-for="item in addressData"
+            :key="item.addressid"
+            :label="item.addressname"
+            :value="item.addressid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="等级ID" prop="levelid">
+        <el-select v-model="ruleForm.levelid" placeholder="请选择活动区域">
+          <el-option
+            v-for="item in levelData"
+            :key="item.jrid"
+            :label="item.levelname"
+            :value="item.jrid"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电话号码" prop="tel">
+        <el-input v-model="ruleForm.tel"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="updateForm('ruleForm')" v-if="isupdate"
+          >修改</el-button
+        >
+        <el-button type="primary" @click="submitForm('ruleForm')" v-else
+          >提交</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getLevel } from "@/api/level";
+import { getLocation } from "@/api/location";
+import { addMessage,showMessage,updateMessage} from "@/api/message";
+export default {
+  data() {
+    return {
+      ruleForm: {
+        uname: "",
+        addressid: "",
+        levelid: "",
+        tel: "",
+      },
+      rules: {
+        uname: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
+        addressid: [
+          { required: true, message: "请选择地址", trigger: "change" },
+        ],
+        levelid: [{ required: true, message: "请选择等级", trigger: "change" }],
+        tel: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
+      },
+      addressData: [],
+      levelData: [],
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addMessage({
+            uname: this.ruleForm.uname,
+            addressid: this.ruleForm.addressid,
+            levelid: this.ruleForm.levelid,
+            tel: this.ruleForm.tel,
+          })
+            .then((res) => {
+              this.$message({
+                message: "恭喜你，添加成功",
+                type: "success",
+              });
+              this.$refs[formName].resetFields();
+              this.$router.push('/message/messageList')
+            })
+            .catch((err) => {
+              this.$message.error('错了哦，添加失败');
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    //获取地址列表
+    getLocationList() {
+      getLocation().then((res) => {
+        this.addressData = res.data;
+      });
+    },
+    //获取等级列表
+    getLevelList() {
+      getLevel().then((res) => {
+        this.levelData = res.data;
+      });
+    },
+    //显示数据
+    showMessageList(id){
+      console.log(id)
+      showMessage({
+        id: id
+      }).then((res)=>{
+        console.log(res)
+        // this.ruleForm = res.data[0]
+        this.ruleForm = {
+          uname: res.data[0].jrname,
+          addressid: res.data[0].jraddressesid,
+          levelid: res.data[0].jrlevel,
+          tel: res.data[0].jrtel
+        }
+      })
+    },
+    //修改
+    updateForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          updateMessage({
+            id: this.$route.query.id,
+            uname: this.ruleForm.uname,
+            addressid: this.ruleForm.addressid,
+            levelid: this.ruleForm.levelid,
+            tel: this.ruleForm.tel,
+          })
+            .then((res) => {
+              this.$message({
+                message: "恭喜你，修改成功",
+                type: "success",
+              });
+              this.$refs[formName].resetFields();
+              this.$router.push('/message/messageList')
+            })
+            .catch((err) => {
+              this.$message.error('错了哦，修改失败');
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  created() {
+    this.getLocationList();
+    this.getLevelList();
+    
+    console.log(this.$route.query.id)
+    if(this.$route.query.id){
+      let _id = this.$route.query.id
+      this.showMessageList(_id)
+      this.isupdate = true
+    }
+  },
+};
+</script>
+
+<style scoped>
+.add-message {
+  width: 70%;
+  margin: 120px auto;
+}
+</style>

vue-admin-template-master/src/views/message/messageList.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="message-list">
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column type="index" width="50"> </el-table-column>
+      <el-table-column prop="jrid" label="信息ID"> </el-table-column>
+      <el-table-column prop="jraddressesid" label="地址ID"> </el-table-column>
+      <el-table-column prop="jrname" label="姓名"> </el-table-column>
+      <el-table-column prop="jrlevel" label="等级ID"> </el-table-column>
+      <el-table-column prop="jrtel" label="电话号码"> </el-table-column>
+      <el-table-column prop="levelname" label="等级名称"> </el-table-column>
+      <el-table-column prop="addressname" label="地址名称"> </el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button
+            @click.native.prevent="updateRow(scope.row)"
+            type="text"
+            size="small"
+          >
+            修改
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getMessage } from "@/api/message";
+export default {
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  methods: {
+    //获取信息接口
+    getMessageList() {
+      getMessage().then((res) => {
+        console.log(res);
+        this.tableData = res.data;
+      });
+    },
+    updateRow(row){
+      console.log(row)
+      this.$router.push({
+        path: '/message/addMessage',
+        query: {
+          id: row.jrid
+        }
+      })
+    }
+  },
+  created() {
+    this.getMessageList();
+  },
+};
+</script>
+
+<style scoped>
+.message-list {
+  width: 80%;
+  margin: 120px auto;
+}
+</style>