admin

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

@@ -1,6 +1,28 @@
 <template>
   <div class="message-list">
-    <h1>消息列表</h1>
+    <div class="table-content">
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column label="序号" type="index" width="180">
+        </el-table-column>
+        <el-table-column prop="userName" label="用户姓名" width="180">
+        </el-table-column>
+        <el-table-column prop="userTel" label="用户手机号" width="180">
+        </el-table-column>
+        <el-table-column prop="levelName" label="用户等级"> </el-table-column>
+        <el-table-column prop="addressName" label="用户地址"> </el-table-column>
+        <el-table-column label="操作">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+        <el-button
+          size="mini"
+          type="danger"
+          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+    </el-table>
+    </div>
   </div>
 </template>
 <script>
@@ -13,56 +35,67 @@ export default {
       // 用来存储页面中展示的消息列表数据
       tableData: [],
       // 存储获取来的消息列表
-      messageList: [1],
+      messageList: [],
       // 存储获取来的等级列表
-      levelList: [2],
+      levelList: [],
       // 存储获取来的地址列表
       addressList: [],
     };
   },
   // 调用生命周期函数 created 在组件创建之后执行
   created() {
-    
     // 将获取信息列表的promise对象放到message变量中
     let message = this.getMessageList();
     // 将获取到的等级列表的promise对象放到level变量中
     let level = this.getLevelList();
-    Promise.all([message,level]).then(()=>{
-        this.handleData();
-    })
-
+    // 将获取到的地址列表的promise对象放到address变量中
+    let address = this.getAddressList();
+    Promise.all([message, level, address]).then(() => {
+      this.handleData();
+    });
   },
   // methods 内部放置都是事件处理函数、自定义函数
   methods: {
     // 通过等级ID获取等级名称
-    getLevelById(id){
-        let levelName = "";
-        this.levelList.map((item)=>{
-            if(item.jrid == id){
-                levelName = item.levelname;
-            }
-        })
-        return levelName;
+    getLevelById(id) {
+      let levelName = "";
+      this.levelList.map((item) => {
+        if (item.jrid == id) {
+          levelName = item.levelname;
+        }
+      });
+      return levelName;
+    },
+    // 通过地址ID获取地址名称
+    getAddressById(id) {
+      let addressName = "";
+      this.addressList.map((item) => {
+        if (item.addressid == id) {
+          addressName = item.addressname;
+        }
+      });
+      return addressName;
     },
     // 处理数据函数
     // 将等级、地址ID换成等级名称、地址名称
     handleData() {
-    //   console.log(this.messageList);
-    //   console.log(this.levelList);
+      //   console.log(this.messageList);
+      //   console.log(this.levelList);
 
-      let newList = this.messageList.map((item)=>{
+      let newList = this.messageList.map((item) => {
         item.jrname = "hello world";
         let levelName = this.getLevelById(item.jrlevel);
+        let addressName = this.getAddressById(item.jraddressesid);
         let obj = {
-            levelName : levelName,
-            addressName : item.jraddressesid + "地址",
-            userName: item.jrname,
-            userTel: item.jrtel,
-        }
+          levelName: levelName,
+          addressName: addressName,
+          userName: item.jrname,
+          userTel: item.jrtel,
+        };
         return obj;
-        
-      })
+      });
       console.log(newList);
+      this.tableData = newList;
     },
     // 获取消息列表
     getMessageList() {
@@ -88,15 +121,43 @@ export default {
         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();
         })
+          .then((res) => {
+            // console.log(res.data.data.records);
+            this.levelList = res.data.data.records;
+            resolve();
+          })
+          .catch(() => {
+            reject();
+          });
+      });
+    },
+    // 获取地址列表
+    getAddressList() {
+      return new Promise((resolve, reject) => {
+        axios({
+          method: "get",
+          url: "http://39.105.160.25:18080/addressController/getAddress",
+        })
+          .then((res) => {
+            this.addressList = res.data.data.records;
+            resolve();
+          })
+          .catch(() => {
+            reject();
+          });
       });
     },
   },
 };
-</script>
+
+// 获取信息列表流程
+// 1. 发送请求获取信息列表 但是发现获取到的信息列表中没有等级名称和地址名称只有ID
+// 2. 获取等级列表和地址列表 ，利用已知的等级ID和地址ID获取等级名称和地址名称
+// 3. 处理数据 ，将等级ID和地址ID换成等级名称和地址名称 将最终的结果拼接成一个新数组
+</script>
+<style scoped>
+    .message-list{
+        padding:30px;
+    }
+</style>