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

<template>
  <div class="message-list">
    <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>
// 引入axios
import axios from "axios";
export default {
  name: "MessageList",
  data() {
    return {
      // 用来存储页面中展示的消息列表数据
      tableData: [],
      // 存储获取来的消息列表
      messageList: [],
      // 存储获取来的等级列表
      levelList: [],
      // 存储获取来的地址列表
      addressList: [],
    };
  },
  // 调用生命周期函数 created 在组件创建之后执行
  created() {
    // 将获取信息列表的promise对象放到message变量中
    let message = this.getMessageList();
    // 将获取到的等级列表的promise对象放到level变量中
    let level = this.getLevelList();
    // 将获取到的地址列表的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;
    },
    // 通过地址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);

      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: addressName,
          userName: item.jrname,
          userTel: item.jrtel,
        };
        return obj;
      });
      console.log(newList);
      this.tableData = 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();
          });
      });
    },
    // 获取地址列表
    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();
          });
      });
    },
  },
};

// 获取信息列表流程
// 1. 发送请求获取信息列表 但是发现获取到的信息列表中没有等级名称和地址名称只有ID
// 2. 获取等级列表和地址列表 ，利用已知的等级ID和地址ID获取等级名称和地址名称
// 3. 处理数据 ，将等级ID和地址ID换成等级名称和地址名称 将最终的结果拼接成一个新数组
</script>
<style scoped>
    .message-list{
        padding:30px;
    }
</style>