MyChatDetail.vue

<template>
  <div>
    <el-button @click="$router.back()">后退</el-button>
    <h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4>
    <el-container>
      <el-main>
        <el-table :data="list">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="问题" width="240">
            <template slot-scope="scope">
              <span>{{ scope.row.question }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回答">
            <template slot-scope="scope">
              <span id="td-response">{{ scope.row.response }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime | dateFormat }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <div class="button-container">
      <el-button @click="copyCode">复制回答</el-button>
    </div>
  </div>
</template>
<script>
// 导入 axios 请求库
import axios from "axios";
import ClipboardJS from "clipboard";
export default {
  name: "MyChatDetail",
  props: ["id"],
  data() {
    return {
      list: [],
    };
  },
  created() {
    // 调用请求数据的方法
    this.initChatList();
  },
  methods: {
    // // 封装请求列表数据的方法
    async initChatList() {
      // 调用 axios 的 get 方法，请求列表数据
      const { data: res } = await axios.get(
        "http://localhost:8888/chatbot/" + this.id
      );
      // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
      if (res.code === 200) {
        this.list = [
          {
            id: res.result.id,
            question: res.result.question,
            response: res.result.response,
            createTime: res.result.createTime,
          },
        ];
      }
    },
    copyCode() {
      const codeBlock = document.getElementById("td-response");
      const range = document.createRange();
      range.selectNode(codeBlock);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand("copy");
      selection.removeAllRanges();
      this.$message.success("代码已复制到剪贴板");
    },
  },
};
</script>

<style lang="less" scoped>
.button-container {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 16px;
}
</style>