From b175eeff753eac337ba0b2b0d5df41ec1f7a2213 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 31 Jan 2024 10:48:49 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20Tab?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A4=8D=E5=88=B6=E6=94=AF=E6=8C=81=E5=90=8C?=
 =?UTF-8?q?=E6=97=B6=E5=A4=8D=E5=88=B6=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/api/chart/chart.js          |  4 +--
 .../src/components/canvas/store/copy.js       | 35 +++++++++++++++++--
 core/frontend/src/store/index.js              |  3 ++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/core/frontend/src/api/chart/chart.js b/core/frontend/src/api/chart/chart.js
index f812769b75..dea06f253f 100644
--- a/core/frontend/src/api/chart/chart.js
+++ b/core/frontend/src/api/chart/chart.js
@@ -28,7 +28,7 @@ export function getChartTree(data) {
   })
 }
 
-export function chartCopy(id, panelId) {
+export async function chartCopy(id, panelId) {
   return request({
     url: '/chart/view/chartCopy/' + id + '/' + panelId,
     method: 'post',
@@ -36,7 +36,7 @@ export function chartCopy(id, panelId) {
   })
 }
 
-export function chartBatchCopy(params, panelId) {
+export async function chartBatchCopy(params, panelId) {
   return request({
     url: '/chart/view/chartBatchCopy/' + panelId,
     method: 'post',
diff --git a/core/frontend/src/components/canvas/store/copy.js b/core/frontend/src/components/canvas/store/copy.js
index 6232614813..75a8e22fc5 100644
--- a/core/frontend/src/components/canvas/store/copy.js
+++ b/core/frontend/src/components/canvas/store/copy.js
@@ -91,6 +91,7 @@ export default {
         component['canvasId'] = 'canvas-main'
         component['canvasPid'] = '0'
         state.copyData = {
+          dataFrom: 'multiplexing',
           data: component,
           index: index
         }
@@ -107,10 +108,17 @@ export default {
       state.isCut = false
     },
 
-    paste(state, needAdaptor) {
+    async paste(state, needAdaptor) {
       if (!state.copyData) {
         return
       }
+      let targetComponentData
+
+      if (state.copyData.dataFrom === 'multiplexing') {
+        targetComponentData = state.previewComponentData
+      } else {
+        targetComponentData = state.componentData
+      }
       const data = state.copyData.data
       // 仪表板复制的组件默认不在移动端部署中mobileSelected = false
       data.mobileSelected = false
@@ -118,7 +126,6 @@ export default {
         data.style.top = Number(data.style.top) + 20
         data.style.left = Number(data.style.left) + 20
       }
-      data.id = generateID()
       // 如果是用户视图 测先进行底层复制
       if (data.type === 'view') {
         chartCopy(data.propValue.viewId, state.panel.panelInfo.id).then(res => {
@@ -137,6 +144,7 @@ export default {
           store.commit('addComponent', { component: newView })
         })
       } else if (data.type === 'de-tabs') {
+        const newTabComponents = []
         const sourceAndTargetIds = {}
         const newCop = deepCopy(data)
         newCop.id = uuid.v1()
@@ -149,14 +157,35 @@ export default {
             if (item.content.filters && item.content.filters.length) {
               item.content.filters = []
             }
+          } else if (item.content && item.content.type === 'canvas') {
+            const oldTabCanvasId = data.id + '-' + item.name
+            const newTabCanvasId = newCop.id + '-' + item.name
+            targetComponentData.forEach(component => {
+              if (component.canvasId === oldTabCanvasId) {
+                const newTabCop = deepCopy(component)
+                newTabCop.id = uuid.v1()
+                newTabCop.canvasId = newTabCanvasId
+                if (component.component === 'user-view') {
+                  newTabCop.propValue.viewId = uuid.v1()
+                  sourceAndTargetIds[component.propValue.viewId] = newTabCop.propValue.viewId
+                }
+                if (needAdaptor && store.state.multiplexingStyleAdapt) {
+                  adaptCurThemeCommonStyle(newTabCop, 'copy')
+                }
+                newTabComponents.push(newTabCop)
+              }
+            })
           }
         })
-        chartBatchCopy({ 'sourceAndTargetIds': sourceAndTargetIds }, state.panel.panelInfo.id).then((rsp) => {
+        await chartBatchCopy({ 'sourceAndTargetIds': sourceAndTargetIds }, state.panel.panelInfo.id).then((rsp) => {
           if (needAdaptor && store.state.multiplexingStyleAdapt) {
             adaptCurThemeCommonStyle(newCop, 'copy')
           }
           store.commit('addComponent', { component: newCop })
         })
+        if (newTabComponents) {
+          store.commit('addBatchComponent', newTabComponents)
+        }
       } else {
         const newCop = deepCopy(data)
         newCop.id = uuid.v1()
diff --git a/core/frontend/src/store/index.js b/core/frontend/src/store/index.js
index 059f5b32f6..433c78b878 100644
--- a/core/frontend/src/store/index.js
+++ b/core/frontend/src/store/index.js
@@ -275,6 +275,9 @@ const data = {
     setMobileComponentData(state, mobileComponentData = []) {
       Vue.set(state, 'mobileComponentData', mobileComponentData)
     },
+    addBatchComponent(state, components = []) {
+      state.componentData.push(...components)
+    },
     addComponent(state, { component, index }) {
       if (index !== undefined) {
         state.componentData.splice(index, 0, component)