提取

src/views/dataChart/dataChartConversation.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-navigation-drawer
+    v-model="drawer"
+    absolute
+    temporary
+    right
+    width="300"
+    overlay-opacity="0"
+  >
+    <div v-loading="loading">
+      <v-list dense>
+        <v-list-item-group
+          v-model="selected"
+          color="primary"
+          @change="onSelectConversation"
+        >
+          <v-list-item
+            v-for="(conversation) in conversationList"
+            :key="conversation.conversation_id"
+          >
+            <v-list-item-content>
+              <v-list-item-title>{{ conversation.conversation_title }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </div>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import {
+  getConversations,
+  getConversationsById
+} from '@/api/dataChart'
+export default {
+  name: 'dataChartConversation',
+  data () {
+    return {
+      loading: false,
+      drawer: false,
+      selected: null,
+      lastSelected: null,
+      conversationList: []
+    }
+  },
+  methods: {
+    target () {
+      this.drawer = !this.drawer
+      if (this.drawer) {
+        this.getConversationList()
+      }
+    },
+    async getConversationList () {
+      this.loading = true
+      try {
+        const { data } = await getConversations({ limit: 5 })
+        this.conversationList = data.conversations
+      } catch (error) {
+        this.$snackbar.error(error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async onSelectConversation (index) {
+      if (!index) {
+        setTimeout(() => {
+          this.selected = this.lastSelected
+        })
+        return
+      }
+      this.lastSelected = index
+      try {
+        const { data } = await getConversationsById(this.conversationList[index].conversation_id)
+        this.$emit('update', data)
+      } catch (error) {
+        this.$snackbar.error(error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dataChart/dataChartEdit.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <div class="chart-content d-flex heightFull">
+    <div class="chart-content d-flex heightFull overflow-hidden">
       <FullscreenToggle v-if="showChart" class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
         <template v-slot="{ toggle, isFullscreen }">
           <div class="position-absolute d-flex flex-column" style="right: 10px; top: 80px; z-index: 999">
@@ -34,7 +34,17 @@
           <InitChart ref="chart" class="heightFull widthFull"></InitChart>
         </template>
       </FullscreenToggle>
-      <DataChartEditChat :class="showChart ? 'widthHalf' : 'widthFull'" @render="onRender"></DataChartEditChat>
+      <DataChartEditChat ref="dataChartEditChatRefs" :class="showChart ? 'widthHalf' : 'widthFull'" @render="onRender">
+        <v-btn
+          class="history"
+          color="indigo lighten-1"
+          dark
+          @click.stop="onClick"
+        >
+          最近会话
+        </v-btn>
+      </DataChartEditChat>
+      <DataChartConversation ref="dataChartConversationRefs" @update="onUpdate"></DataChartConversation>
     </div>
   </div>
 </template>
@@ -45,14 +55,15 @@ import * as Charts from './utils/options.js'
 import DataChartEditChat from './dataChartEditChat.vue'
 import InitChart from '@/charts/initChart'
 import { cloneDeep } from 'lodash'
-
+import DataChartConversation from './dataChartConversation.vue'
 import FullscreenToggle from '@/components/FullscreenToggle'
 export default {
   name: 'dataChartEdit',
   components: {
     DataChartEditChat,
     InitChart,
-    FullscreenToggle
+    FullscreenToggle,
+    DataChartConversation
   },
   data () {
     return {
@@ -121,6 +132,12 @@ export default {
       }
       this.chart.setOption(_option, true)
       this.chart.hideLoading()
+    },
+    onClick () {
+      this.$refs.dataChartConversationRefs.target()
+    },
+    onUpdate (data) {
+      this.$refs.dataChartEditChatRefs.update(data)
     }
   }
 }
@@ -163,6 +180,7 @@ export default {
   &-content {
     width: 0;
     flex: 1;
+    position: relative;
     &-show {
       width: 50%;
       border: 1px solid #ccc !important;
@@ -177,4 +195,10 @@ export default {
     position: absolute;
   }
 }
+.history {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 1;
+}
 </style>

src/views/dataChart/dataChartEditChat.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="chart-content-chat heightFull d-flex flex-column position-relative overflow-hidden">
-    <v-btn
-      class="history"
-      color="indigo lighten-1"
-      dark
-      @click.stop="drawer = !drawer"
-    >
-      最近会话
-    </v-btn>
+    <slot></slot>
     <div class="chart-content-chat-title mb-3">
       <v-tabs>
         <v-tab>AI 取数</v-tab>
@@ -230,49 +223,19 @@
         </div>
       </div>
     </div>
-    <v-navigation-drawer
-      v-model="drawer"
-      absolute
-      temporary
-      right
-      width="300"
-      overlay-opacity="0"
-    >
-      <v-list dense>
-        <v-list-item-group
-          v-model="selected"
-          color="primary"
-          @change="onSelectConversation"
-        >
-          <v-list-item
-            v-for="(conversation) in conversationList"
-            :key="conversation.conversation_id"
-          >
-            <v-list-item-content>
-              <v-list-item-title>{{ conversation.conversation_title }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list-item-group>
-      </v-list>
-    </v-navigation-drawer>
   </div>
 </template>
 
 <script>
 import {
   getAsk,
-  addFeedback,
-  getConversations,
-  getConversationsById
+  addFeedback
 } from '@/api/dataChart'
 import { mapGetters } from 'vuex'
 export default {
   name: 'dataChartEditChat',
   data () {
     return {
-      selected: null,
-      lastSelected: null,
-      drawer: false,
       routingMode: undefined,
       chips: [
         { text: '聊天模式', value: 'chat_direct' },
@@ -294,17 +257,13 @@ export default {
         }
       ],
       abortController: null,
-      conversationId: undefined,
-      conversationList: []
+      conversationId: undefined
       // trueData: false
     }
   },
   computed: {
     ...mapGetters(['userInfo'])
   },
-  created () {
-    this.getConversationList()
-  },
   methods: {
     onNew () {
       this.abortController.abort('')
@@ -413,48 +372,28 @@ export default {
       }
       this.$emit('render', data)
     },
-    async getConversationList () {
-      try {
-        const { data } = await getConversations({ limit: 5 })
-        this.conversationList = data.conversations
-      } catch (error) {
-        this.$snackbar.error(error)
-      }
-    },
-    async onSelectConversation (index) {
-      if (!index) {
-        setTimeout(() => {
-          this.selected = this.lastSelected
-        })
-        return
-      }
-      this.lastSelected = index
-      try {
-        const { data } = await getConversationsById(this.conversationList[index].conversation_id)
-        this.items.splice(1, this.items.length - 1, ...data.messages.map(e => {
-          if (e.role === 'user') {
-            return {
-              type: 2,
-              user: '游客',
-              content: e.content
-            }
-          }
+    update (data) {
+      this.items.splice(1, this.items.length - 1, ...data.messages.map(e => {
+        if (e.role === 'user') {
           return {
-            type: 1,
-            content: e.metadata,
-            showSnackbar: false,
-            dataValidation: false,
-            question: e.content, // 记录当前问题
-            showMenu: false,
-            model: {
-              dataAxis: null,
-              typeAxis: null
-            }
+            type: 2,
+            user: '游客',
+            content: e.content
           }
-        }))
-      } catch (error) {
-        this.$snackbar.error(error)
-      }
+        }
+        return {
+          type: 1,
+          content: e.metadata,
+          showSnackbar: false,
+          dataValidation: false,
+          question: e.content, // 记录当前问题
+          showMenu: false,
+          model: {
+            dataAxis: null,
+            typeAxis: null
+          }
+        }
+      }))
     }
   }
 }
@@ -531,10 +470,4 @@ export default {
 .element::-webkit-scrollbar {
   display: none; /* Chrome/Safari/Opera */
 }
-.history {
-  position: absolute;
-  right: 20px;
-  top: 20px;
-  z-index: 1;
-}
 </style>