refactor(仪表板): Tab组件复制支持同时复制内部组件

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',

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()

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)