Skip to content

V
vue-kwan-admin

檀越@新空间 / vue-kwan-admin

通知 40
Star 6
Fork 3
V
vue-kwan-admin
提交 1a26bc5e 编写于 作者: 檀越@新空间's avatar 檀越@新空间 🐭
浏览文件
操作

添加搜索

上级 96eef36b
隐藏空白更改
内联 并排
Showing with 281 addition and 184 deletion
src/components/menus/MyChat.vue
浏览文件 @ 1a26bc5e
<template> <template>
<div> <div>
<el-container> <el-container>
<el-header style="text-align: right; font-size: 12px"> <el-header style="text-align: right; font-size: 12px">
<i class="el-icon-refresh header-button-item" @click="refreshPage"></i> <i class="el-icon-refresh header-button-item" @click="refreshPage"></i>
<el-dropdown> <el-dropdown>
<i class="el-icon-setting header-button-item"></i> <i class="el-icon-setting header-button-item"></i>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<a href="http://qinyingjie.top/" target="_blank" class="header-button-item">kwan</a> <a
</el-header> href="http://qinyingjie.top/"
target="_blank"
class="header-button-item"
>kwan</a
>
</el-header>
<el-main> <el-main>
<el-table border :data="userlist" v-loading="loading"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-table-column prop="id" label="序号" width="50" sortable></el-table-column> <el-form-item label="问题">
<el-table-column prop="question" label="问题" width="240" show-overflow-tooltip></el-table-column> <el-input
<el-table-column prop="response" label="答案" show-overflow-tooltip></el-table-column> clearable
<el-table-column label="创建时间" width="170"> v-model="formInline.question"
<template slot-scope="props"> placeholder="请输入问题"
{{ props.row.createTime | dateFormat }} @keydown.enter.native="initCartList"
</template> ></el-input>
</el-table-column> </el-form-item>
<el-table-column prop="详情" label="详情" width="100"> <el-form-item>
<template slot-scope="props"> <el-button type="primary" @click="initCartList">查询</el-button>
<a href="#" @click.prevent="gotoDetail(props.row.id)">详情</a> </el-form-item>
</template> </el-form>
</el-table-column> <el-table border :data="userlist" v-loading="loading">
</el-table> <el-table-column
<el-pagination prop="id"
class="pagination" label="序号"
background width="50"
:key="elementui_page_component_key" sortable
:current-page.sync="currentPage" ></el-table-column>
:page-size="pageSize" <el-table-column
:total="total" prop="question"
@current-change="handleCurrentChange" label="问题"
></el-pagination> width="240"
</el-main> show-overflow-tooltip
<el-backtop class="backtop"></el-backtop> ></el-table-column>
</el-container> <el-table-column
</div> 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="info">
<a href="#" @click.prevent="gotoDetail(props.row.id)">详情</a>
</el-button>
<el-button type="primary" @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> </template>
<script> <script>
import axios from 'axios'; import axios from "axios";
export default { export default {
name: 'MyChat', name: "MyChat",
data() { data() {
return { return {
// 用户列表数据 // 用户列表数据
userlist: [], userlist: [],
loading: false, loading: false,
elementui_page_component_key: 0, elementui_page_component_key: 0,
currentPage: Number(localStorage.getItem('lastPage')) || 1, currentPage: Number(localStorage.getItem("lastPage")) || 1,
pageSize: 14, pageSize: 14,
total: 0, total: 0,
}; formInline: {
}, question: "",
},
created() { };
// 调用请求数据的方法 },
watch: {
"formInline.question"(newVal) {
if (newVal === "") {
this.currentPage = 1;
localStorage.setItem("lastPage", this.currentPage);
this.initCartList(); 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://120.79.36.53:8888/chatbot/delete",
{
params: {
id: id,
},
}
);
this.initCartList();
this.loading = false;
}, },
mounted() { refreshPage() {
this.currentPage = Number(localStorage.getItem('lastPage')) || 1; location.reload();
this.elementui_page_component_key++; },
gotoDetail(id) {
this.$router.push("/home/chatinfo/" + id);
}, },
methods: {
refreshPage() {
location.reload();
},
gotoDetail(id) {
this.$router.push('/home/chatinfo/' + id);
},
async initCartList() { async initCartList() {
this.loading = true; this.loading = true;
const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/page', { const { data: res } = await axios.get(
params: { "http://120.79.36.53:8888/chatbot/page",
page: this.currentPage, {
pageSize: this.pageSize, params: {
}, page: this.currentPage,
}); pageSize: this.pageSize,
if (res.code === 200) { question: this.formInline.question,
this.userlist = res.result.records; },
this.total = res.result.total; }
localStorage.setItem('lastPage', this.currentPage); );
} if (res.code === 200) {
this.loading = false; 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) { handleCurrentChange(currentPage) {
this.currentPage = currentPage; this.currentPage = currentPage;
this.initCartList(); this.initCartList();
},
}, },
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.el-header { .el-header {
background-color: #b3c0d1; background-color: #b3c0d1;
color: #333; color: #333;
line-height: 60px; line-height: 60px;
} }
.el-aside { .el-aside {
color: #333; color: #333;
} }
.pagination { .pagination {
margin-top: 16px; margin-top: 16px;
text-align: right; text-align: right;
} }
.header-button-item { .header-button-item {
margin-right: 15px; margin-right: 15px;
font-size: 20px; font-size: 20px;
} }
.backtop { .backtop {
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
right: 50px; right: 50px;
height: 40px; height: 40px;
width: 40px; width: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
border-radius: 20px; border-radius: 20px;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
z-index: 999; z-index: 999;
} }
.backtop:hover { .backtop:hover {
background-color: #0050a0; background-color: #0050a0;
} }
</style> </style>
\ No newline at end of file
src/components/user/MyChatDetail.vue
浏览文件 @ 1a26bc5e
<template> <template>
<div> <div>
<el-button @click="$router.back()">后退</el-button> <!-- <el-button @click="$router.back()">后退</el-button> -->
<h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4> <el-button @click="goBack()">后退</el-button>
<el-container> <h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4>
<el-main> <el-container>
<el-table border :data="list"> <el-main>
<el-table-column label="序号" width="50"> <el-table border :data="list">
<template slot-scope="scope"> <el-table-column label="序号" width="50">
<span>{{ scope.row.id }}</span> <template slot-scope="scope">
</template> <span>{{ scope.row.id }}</span>
</el-table-column> </template>
<el-table-column label="问题" width="240"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="问题" width="240">
<span>{{ scope.row.question }}</span> <template slot-scope="scope">
</template> <span>{{ scope.row.question }}</span>
</el-table-column> </template>
<el-table-column label="回答"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="回答">
<span id="td-response">{{ scope.row.response }}</span> <template slot-scope="scope">
</template> <span id="td-response">{{ scope.row.response }}</span>
</el-table-column> </template>
<el-table-column label="创建时间" width="170"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="创建时间" width="170">
<span>{{ scope.row.createTime | dateFormat }}</span> <template slot-scope="scope">
</template> <span>{{ scope.row.createTime | dateFormat }}</span>
</el-table-column> </template>
</el-table> </el-table-column>
</el-main> </el-table>
</el-container> </el-main>
<div class="button-container"> </el-container>
<el-button @click="copyCode">复制回答</el-button> <div class="button-container">
</div> <el-button @click="copyCode">复制回答</el-button>
</div> </div>
</div>
</template> </template>
<script> <script>
// 导入 axios 请求库 // 导入 axios 请求库
import axios from 'axios'; import axios from "axios";
export default { export default {
name: 'MyChatDetail', name: "MyChatDetail",
props: ['id'], props: ["id"],
data() { data() {
return { return {
list: [], list: [],
}; };
},
created() {
// 调用请求数据的方法
this.initChatList();
},
methods: {
goBack() {
// 传递参数到前一个页面
const params = {
// 参数名: 参数值
back: "back",
// baz: "qux",
};
// 使用 $router.push() 导航到前一个页面
this.$router.push({
path: "/home/chat", // 前一个页面的路径
query: params, // 参数对象
});
}, },
created() { // 封装请求列表数据的方法
// 调用请求数据的方法 async initChatList() {
this.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,
},
];
}
}, },
methods: { copyCode() {
// // 封装请求列表数据的方法 const codeBlock = document.getElementById("td-response");
async initChatList() { const range = document.createRange();
// 调用 axios 的 get 方法，请求列表数据 range.selectNode(codeBlock);
const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/' + this.id); const selection = window.getSelection();
// 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中 selection.removeAllRanges();
if (res.code === 200) { selection.addRange(range);
this.list = [ document.execCommand("copy");
{ selection.removeAllRanges();
id: res.result.id, this.$message.success("代码已复制到剪贴板");
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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.button-container { .button-container {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: 16px; margin: 16px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或