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>