添加搜索

src/components/menus/MyChat.vue

@@ -9,22 +9,59 @@
             <el-dropdown-item>新增</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-				<a href="http://qinyingjie.top/" target="_blank" class="header-button-item">kwan</a>
+        <a
+          href="http://qinyingjie.top/"
+          target="_blank"
+          class="header-button-item"
+          >kwan</a
+        >
       </el-header>
 
       <el-main>
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-form-item label="问题">
+            <el-input
+              clearable
+              v-model="formInline.question"
+              placeholder="请输入问题"
+              @keydown.enter.native="initCartList"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="initCartList">查询</el-button>
+          </el-form-item>
+        </el-form>
         <el-table border :data="userlist" v-loading="loading">
-					<el-table-column prop="id" label="序号" width="50" sortable></el-table-column>
-					<el-table-column prop="question" label="问题" width="240" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="response" label="答案" show-overflow-tooltip></el-table-column>
+          <el-table-column
+            prop="id"
+            label="序号"
+            width="50"
+            sortable
+          ></el-table-column>
+          <el-table-column
+            prop="question"
+            label="问题"
+            width="240"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column
+            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="100">
+          <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>
@@ -44,9 +81,9 @@
 </template>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 export default {
-    name: 'MyChat',
+  name: "MyChat",
 
   data() {
     return {
@@ -54,40 +91,83 @@ export default {
       userlist: [],
       loading: false,
       elementui_page_component_key: 0,
-            currentPage: Number(localStorage.getItem('lastPage')) || 1,
+      currentPage: Number(localStorage.getItem("lastPage")) || 1,
       pageSize: 14,
       total: 0,
+      formInline: {
+        question: "",
+      },
     };
   },
-
+  watch: {
+    "formInline.question"(newVal) {
+      if (newVal === "") {
+        this.currentPage = 1;
+        localStorage.setItem("lastPage", this.currentPage);
+        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.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;
+    },
     refreshPage() {
       location.reload();
     },
     gotoDetail(id) {
-            this.$router.push('/home/chatinfo/' + id);
+      this.$router.push("/home/chatinfo/" + id);
     },
 
     async initCartList() {
       this.loading = true;
-            const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/page', {
+      const { data: res } = await axios.get(
+        "http://120.79.36.53:8888/chatbot/page",
+        {
           params: {
             page: this.currentPage,
             pageSize: this.pageSize,
+            question: this.formInline.question,
           },
-            });
+        }
+      );
       if (res.code === 200) {
         this.userlist = res.result.records;
         this.total = res.result.total;
-                localStorage.setItem('lastPage', this.currentPage);
+        localStorage.setItem("lastPage", this.currentPage);
+        localStorage.setItem("lastQuestion", this.formInline.question);
       }
       this.loading = false;
     },

src/components/user/MyChatDetail.vue

 <template>
   <div>
-		<el-button @click="$router.back()">后退</el-button>
+    <!-- <el-button @click="$router.back()">后退</el-button> -->
+    <el-button @click="goBack()">后退</el-button>
     <h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4>
     <el-container>
       <el-main>
@@ -35,10 +36,10 @@
 </template>
 <script>
 // 导入 axios 请求库
-import axios from 'axios';
+import axios from "axios";
 export default {
-    name: 'MyChatDetail',
-    props: ['id'],
+  name: "MyChatDetail",
+  props: ["id"],
   data() {
     return {
       list: [],
@@ -49,10 +50,26 @@ export default {
     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);
+      const { data: res } = await axios.get(
+        "http://120.79.36.53:8888/chatbot/" + this.id
+      );
       // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
       if (res.code === 200) {
         this.list = [
@@ -66,15 +83,15 @@ export default {
       }
     },
     copyCode() {
-            const codeBlock = document.getElementById('td-response');
+      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');
+      document.execCommand("copy");
       selection.removeAllRanges();
-            this.$message.success('代码已复制到剪贴板');
+      this.$message.success("代码已复制到剪贴板");
     },
   },
 };