From 8a4cad1195ae6085bce0cb574d60935f22d148b3 Mon Sep 17 00:00:00 2001
From: Jiang Yu <58059348+yujiang0030@users.noreply.github.com>
Date: Tue, 4 Jun 2024 16:08:42 +0800
Subject: [PATCH] Update HistoryPanel.vue (#256)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1、点击“修改历史”：请求修改历史列表；点击“发布历史”：请求发布历史列表。
2、接口请求过程中增加loading进行交互优化。
---
 .../modules/contentModule/HistoryPanel.vue    | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue b/web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue
index 651e5245..8f1a5a40 100644
--- a/web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue
+++ b/web/src/management/pages/edit/modules/contentModule/HistoryPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <el-popover placement="top" trigger="click" @show="onShow" :width="320">
-    <el-tabs v-model="currentTab" class="custom-tab" v-if="visible">
+    <el-tabs v-model="currentTab" class="custom-tab" v-if="visible" v-loading="paneLoading">
       <el-tab-pane label="修改历史" name="daily" class="custom-tab-pane">
         <div class="line" v-for="(his, index) in dailyList" :key="index">
           <span class="operator">{{ his.operator }}</span>
@@ -25,6 +25,7 @@
   </el-popover>
 </template>
 
+
 <script>
 import { getSurveyHistory } from '@/management/api/survey'
 import moment from 'moment'
@@ -59,7 +60,8 @@ export default {
       dailyHis: [],
       publishHis: [],
       currentTab: 'daily',
-      visible: false
+      visible: false,
+      paneLoading: false
     }
   },
   watch: {
@@ -67,18 +69,15 @@ export default {
       immediate: true,
       async handler(newVal) {
         if (newVal) {
-          const [dailyHis, publishHis] = await Promise.all([
-            getSurveyHistory({
-              surveyId: this.surveyId,
-              historyType: 'dailyHis'
-            }),
-            getSurveyHistory({
-              surveyId: this.surveyId,
-              historyType: 'publishHis'
-            })
-          ])
-          this.dailyHis = dailyHis.data || []
-          this.publishHis = publishHis.data || []
+          this.fetchHis()
+        }
+      }
+    },
+    currentTab: {
+      immediate: true,
+      async handler(newVal) {
+        if (newVal) {
+          this.fetchHis()
         }
       }
     }
@@ -86,6 +85,30 @@ export default {
   methods: {
     onShow() {
       this.visible = true
+    },
+    fetchHis() {
+      this.paneLoading = true
+      switch (this.currentTab) {
+
+        case 'daily':
+          getSurveyHistory({
+            surveyId: this.surveyId,
+            historyType: 'dailyHis'
+          }).then((dailyHis) => {
+            this.dailyHis = dailyHis.data || []
+          })
+          break;
+
+        case 'publish':
+          getSurveyHistory({
+            surveyId: this.surveyId,
+            historyType: 'publishHis'
+          }).then((publishHis) => {
+            this.publishHis = publishHis.data || []
+          })
+          break;
+      }
+      this.paneLoading = false
     }
   }
 }
@@ -93,8 +116,10 @@ export default {
 
 <style lang="scss" scoped>
 @import url('@/management/styles/edit-btn.scss');
+
 .custom-tab {
   width: 300px;
+
   :deep(.el-tabs__nav) {
     width: 100%;