MyChat.vue

<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <i class="el-icon-refresh header-button-item" @click="refreshPage"></i>
        <el-dropdown>
          <i class="el-icon-setting header-button-item"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>新增</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span class="header-button-item">kwan</span>
      </el-header>

      <el-main>
        <el-table :data="userlist" v-loading="loading">
          <el-table-column prop="id" label="序号" width="50"></el-table-column>
          <el-table-column
            prop="question"
            label="问题"
            width="240"
          ></el-table-column>
          <el-table-column prop="response" label="答案"></el-table-column>
          <el-table-column label="创建时间" width="170">
            <template slot-scope="props">
              {{ props.row.createTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="详情" label="详情" width="100">
            <template slot-scope="props">
              <a href="#" @click.prevent="gotoDetail(props.row.id)">详情</a>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagination"
          background
          :key="elementui_page_component_key"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MyChat",

  data() {
    return {
      // 用户列表数据
      userlist: [],
      loading: false,
      elementui_page_component_key: 0,
      currentPage: Number(localStorage.getItem("lastPage")) || 1,
      pageSize: 5,
      total: 0,
    };
  },

  created() {
    // 调用请求数据的方法
    this.initCartList();
  },
  mounted() {
    this.currentPage = Number(localStorage.getItem("lastPage")) || 1;
    this.elementui_page_component_key++;
  },
  methods: {
    refreshPage() {
      location.reload();
    },
    gotoDetail(id) {
      this.$router.push("/home/chatinfo/" + id);
    },

    async initCartList() {
      this.loading = true;
      const { data: res } = await axios.get(
        "http://120.79.36.53:8888/chatbot/page",
        {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
          },
        }
      );
      if (res.code === 200) {
        this.userlist = res.result.records;
        this.total = res.result.total;
        localStorage.setItem("lastPage", this.currentPage);
      }
      this.loading = false;
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initCartList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.pagination {
  margin-top: 16px;
  text-align: right;
}
.header-button-item {
  margin-right: 15px;
  font-size: 20px;
}
</style>