MyChatDetail.vue

<template>
	<div>
		<el-button type="primary" plain size="medium" @click="goBack">后退</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" type="primary" round>复制回答</el-button>
		</div>
	</div>
</template>
<script>
// 导入 axios 请求库
import axios from 'axios'
export default {
    name: 'MyChatDetail',
    props: ['id'],
    data() {
        return {
            list: [],
        }
    },
    created() {
        // 调用请求数据的方法
        this.initChatList()
    },
    methods: {
        goBack() {
            // 传递参数到前一个页面
            const params = {
                // 参数名: 参数值
                back: 'back',
                // baz: "qux",
            }

            // 使用 $router.push() 导航到前一个页面
            this.$router.push({
                path: '/home/chat', // 前一个页面的路径
                query: params, // 参数对象
            })
        },
        // 封装请求列表数据的方法
        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>