MyChatDetail.vue

<template>
	<div>
		<el-button @click="$router.back()">后退</el-button>
		<h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4>
		<el-container>
			<el-main>
				<el-table border :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';
export default {
    name: 'MyChatDetail',
    props: ['id'],
    data() {
        return {
            list: [],
        };
    },
    created() {
        // 调用请求数据的方法
        this.initChatList();
    },
    methods: {
        // // 封装请求列表数据的方法
        async initChatList() {
            // 调用 axios 的 get 方法，请求列表数据
            const { data: res } = await axios.get('http://120.79.36.53: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>