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>
        <a
          href="http://qinyingjie.top/"
          target="_blank"
          class="header-button-item"
          >kwan</a
        >
      </el-header>

      <el-main>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="问题">
            <el-input
              clearable
              v-model="formInline.question"
              placeholder="请输入问题"
              @keydown.enter.native="initCartList"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="initCartList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="addChat">
              新增
            </el-button>
          </el-form-item>
        </el-form>
        <el-table border :data="userlist" v-loading="loading">
          <el-table-column
            prop="id"
            label="序号"
            width="50"
            sortable
          ></el-table-column>
          <el-table-column
            prop="question"
            label="问题"
            width="240"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="response"
            label="答案"
            show-overflow-tooltip
          ></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="180">
            <template slot-scope="props">
              <el-button
                type="success"
                @click.prevent="gotoDetail(props.row.id)"
                >详情
              </el-button>
              <el-button type="danger" @click="onDelete(props.row.id)"
                >删除</el-button
              >
            </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-backtop class="backtop"></el-backtop>
    </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: 14,
      total: 0,
      formInline: {
        question: "",
      },
    };
  },
  watch: {
    "formInline.question"(newVal) {
      if (newVal === "") {
        this.currentPage = 1;
        localStorage.setItem("lastPage", this.currentPage);
        this.initCartList();
      }
    },
  },
  created() {
    this.$nextTick(() => {
      const foo = this.$route.query.back;
      if (foo === "back") {
        this.currentPage = Number(localStorage.getItem("lastPage")) || 1;
        this.formInline.question = localStorage.getItem("lastQuestion") || "";
      } else {
        localStorage.setItem("lastPage", 1);
        localStorage.setItem("lastQuestion", "");
        this.currentPage = 1;
        this.formInline.question = "";
      }
      // 调用请求数据的方法
      this.initCartList();
    });
  },
  mounted() {
    this.currentPage = Number(localStorage.getItem("lastPage")) || 1;
    this.formInline.question = localStorage.getItem("lastQuestion");
    this.elementui_page_component_key++;
    this.initCartList();
  },
  methods: {
    async onDelete(id) {
      this.loading = true;
      const { data: res } = await axios.get(
        "http://localhost:8888/chatbot/delete",
        {
          params: {
            id: id,
          },
        }
      );
      this.initCartList();
      this.loading = false;
    },
    refreshPage() {
      location.reload();
    },
    gotoDetail(id) {
      this.$router.push("/home/chatinfo/" + id);
    },
    addChat() {
      this.$router.push("/home/addChat/");
    },

    async initCartList() {
      this.loading = true;
      const { data: res } = await axios.get(
        "http://localhost:8888/chatbot/page",
        {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            question: this.formInline.question,
          },
        }
      );
      if (res.code === 200) {
        this.userlist = res.result.records;
        this.total = res.result.total;
        localStorage.setItem("lastPage", this.currentPage);
        localStorage.setItem("lastQuestion", this.formInline.question);
      }
      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;
}

.backtop {
  position: fixed;
  bottom: 50px;
  right: 50px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  background-color: #007aff;
  color: #fff;
  cursor: pointer;
  z-index: 999;
}

.backtop:hover {
  background-color: #0050a0;
}
</style>