admin

10-vuecli/vueapp/vueadmin/src/router/index.js

@@ -86,6 +86,33 @@ export const constantRoutes = [
     ]
     
   },
+  {
+    path:"/message",
+    component:Layout,
+    meta:{
+      title:"消息管理",
+      icon:"el-icon-message"
+    },
+    children:[
+      {
+        path:"/message/list",
+        name:"MessageList",
+        component:() => import("@/views/message/MessageList.vue"),
+        meta:{
+          title:"消息列表",
+          icon:"el-icon-postcard"
+        }
+      },{
+        path:"/message/add",
+        name:"MessageAdd",
+        component:() => import("@/views/message/MessageAdd.vue"),
+        meta:{
+          title:"消息添加",
+          icon:"el-icon-document-add"
+        }
+      }
+    ]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

10-vuecli/vueapp/vueadmin/src/views/message/MessageAdd.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="message-add">
+        <h1>消息添加</h1>
+    </div>
+</template>

10-vuecli/vueapp/vueadmin/src/views/message/MessageList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="message-list">
+    <h1>消息列表</h1>
+  </div>
+</template>
+<script>
+// 引入axios
+import axios from "axios";
+export default {
+  name: "MessageList",
+  data() {
+    return {
+      // 用来存储页面中展示的消息列表数据
+      tableData: [],
+      // 存储获取来的消息列表
+      messageList: [1],
+      // 存储获取来的等级列表
+      levelList: [2],
+      // 存储获取来的地址列表
+      addressList: [],
+    };
+  },
+  // 调用生命周期函数 created 在组件创建之后执行
+  created() {
+    
+    // 将获取信息列表的promise对象放到message变量中
+    let message = this.getMessageList();
+    // 将获取到的等级列表的promise对象放到level变量中
+    let level = this.getLevelList();
+    Promise.all([message,level]).then(()=>{
+        this.handleData();
+    })
+
+  },
+  // methods 内部放置都是事件处理函数、自定义函数
+  methods: {
+    // 通过等级ID获取等级名称
+    getLevelById(id){
+        let levelName = "";
+        this.levelList.map((item)=>{
+            if(item.jrid == id){
+                levelName = item.levelname;
+            }
+        })
+        return levelName;
+    },
+    // 处理数据函数
+    // 将等级、地址ID换成等级名称、地址名称
+    handleData() {
+    //   console.log(this.messageList);
+    //   console.log(this.levelList);
+
+      let newList = this.messageList.map((item)=>{
+        item.jrname = "hello world";
+        let levelName = this.getLevelById(item.jrlevel);
+        let obj = {
+            levelName : levelName,
+            addressName : item.jraddressesid + "地址",
+            userName: item.jrname,
+            userTel: item.jrtel,
+        }
+        return obj;
+        
+      })
+      console.log(newList);
+    },
+    // 获取消息列表
+    getMessageList() {
+      return new Promise((resolve, reject) => {
+        // 通过axios 发送请求
+        axios({
+          method: "get",
+          url: "http://39.105.160.25:18080/messageController/getMessage",
+        })
+          .then((res) => {
+            // console.log(res.data.data.records);
+            this.messageList = res.data.data.records;
+            resolve();
+          })
+          .catch(() => {
+            reject();
+          });
+      });
+    },
+    // 获取等级列表
+    getLevelList() {
+      return new Promise((resolve, reject) => {
+        axios({
+          method: "get",
+          url: "http://39.105.160.25:18080/levelController/getLevel",
+        }).then((res) => {
+          // console.log(res.data.data.records);
+          this.levelList = res.data.data.records;
+          resolve();
+        }).catch(()=>{
+          reject();
+        })
+      });
+    },
+  },
+};
+</script>