分页

src/views/als/intelligentQA/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="intelligentQA">
-    <div class="history">
+    <div class="history" style="position: relative">
       <div class="historyTitle">历史记录</div>
       <div class="historyContent">
         <div v-for="item in historyData" :key="item.id" class="historyItem">
@@ -9,6 +9,7 @@
           <i class="el-icon-more historyMore" @click="historyDetail(item.id)"></i>
         </div>
       </div>
+      <el-pagination style="position: absolute; bottom: 15px" small :pager-count="5" background layout="prev, pager, next" :total="this.historyRequset.total" @prev-click="prevHandle" @next-click="nextHandle" @current-change="currentHandle"> </el-pagination>
     </div>
     <div class="chat">
       <!-- <div class="header">Header</div> -->
@@ -53,11 +54,8 @@
               <div class="answerData" v-if="item.sqlAnswer">
                 <h2>数据库</h2>
                 <div class="answer">
-                  <!-- <el-table :data="item.sqlAnswer" style="width: 100%; height: 250px; overflow: scroll">
-                    <el-table-column v-for="item in sqlAnswerKey" :prop="item" :key="item" :label="item" align="center"> </el-table-column>
-                  </el-table> -->
-                  <vxe-table :data="item.sqlAnswer">
-                    <vxe-column v-for="item in sqlAnswerKey" :field="item" :title="item" :key="item" align="center"></vxe-column>
+                  <vxe-table max-height="300px" :cell-config="{ height: 45 }" :data="item.sqlAnswer">
+                    <vxe-column v-for="item in sqlAnswerKey" minWidth="120px" :field="item" :title="item" :key="item" align="center"></vxe-column>
                   </vxe-table>
                 </div>
               </div>
@@ -163,12 +161,17 @@ export default {
       sqlAnswerKey: [],
       collapseActiveNames: [],
       main: null,
-      askUrl: '/als/algorithm/execute/qa'
+      askUrl: '/als/algorithm/execute/qa',
+      historyRequset: {
+        total: 0,
+        pageSize: 10,
+        pageNum: 1
+      }
     }
   },
   mounted() {
     this.main = document.getElementsByClassName('main')[0]
-    this.getHistoryAll()
+    this.getHistory()
     this.getGroupAPI()
     this.adjustHeight()
   },
@@ -202,10 +205,20 @@ export default {
       })
     },
 
-    async getHistoryAll() {
+    // async getHistoryAll() {
+    //   try {
+    //     const { data } = await getQAHistoryListAll()
+    //     this.historyData = data.slice(0, 20)
+    //     // console.log('this.historyData', this.historyData)
+    //   } catch (error) {}
+    // },
+
+    async getHistory() {
+      const { pageSize, pageNum } = this.historyRequset
       try {
-        const { data } = await getQAHistoryListAll()
-        this.historyData = data.slice(0, 20)
+        const { data } = await getQAHistoryList({ pageSize, pageNum })
+        this.historyRequset.total = data.total
+        this.historyData = data.list
         // console.log('this.historyData', this.historyData)
       } catch (error) {}
     },
@@ -372,6 +385,25 @@ export default {
       // return marked(item)
       const html = marked.parse(item)
       return html
+    },
+
+    // 上一页
+    prevHandle(nowPage) {
+      if (nowPage == 1) return
+      this.historyRequset.pageNum = nowPage
+      this.getHistory()
+    },
+
+    // 下一页
+    nextHandle(nowPage) {
+      if (nowPage >= this.historyRequset.total / nowPage) return
+      this.historyRequset.pageNum = nowPage
+      this.getHistory()
+    },
+
+    currentHandle(nowPage) {
+      this.historyRequset.pageNum = nowPage
+      this.getHistory()
     }
 
     // const { code, data } = {