refactor(仪表板): 复用视图支持适配当前仪表板样式

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -253,7 +253,7 @@ export default {
     },
     // 此处单独计算componentData的值 不放入全局mapState中
     componentDataInfo() {
-      return this.componentDataShow
+      return this.componentDataShow||[]
     },
     ...mapState([
       'isClickComponent'

frontend/src/components/canvas/components/Editor/SettingMenu.vue

@@ -130,7 +130,7 @@ export default {
     },
 
     paste() {
-      this.$store.commit('paste', true)
+      this.$store.commit('paste', false)
       this.$store.commit('recordSnapshot', 'paste')
     },
 

frontend/src/components/canvas/custom-component/UserView.vue

@@ -137,7 +137,7 @@ import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } f
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
-import { viewPropsSave } from '@/api/chart/chart'
+import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
 import { checkAddHttp } from '@/utils/urlUtils'
 import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView'
 import Vue from 'vue'
@@ -582,6 +582,15 @@ export default {
             this.chart['position'] = this.inTab ? 'tab' : 'panel'
             // 记录当前数据
             this.panelViewDetailsInfo[id] = JSON.stringify(this.chart)
+            if(this.element.needAdaptor){
+              const customStyleObj = JSON.parse(this.chart.customStyle)
+              const customAttrObj = JSON.parse(this.chart.customAttr)
+              adaptCurTheme(customStyleObj, customAttrObj)
+              this.chart.customStyle = JSON.stringify(customStyleObj)
+              this.chart.customAttr = JSON.stringify(customAttrObj)
+              viewEditSave(this.panelInfo.id,{ id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
+              this.$store.commit('adaptorStatusDisable',this.element.id)
+            }
             this.sourceCustomAttrStr = this.chart.customAttr
             this.sourceCustomStyleStr = this.chart.customStyle
             this.chart.drillFields = this.chart.drillFields ? JSON.parse(this.chart.drillFields) : []

frontend/src/components/canvas/store/copy.js

@@ -4,6 +4,8 @@ import generateID from '@/components/canvas/utils/generateID'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { chartBatchCopy, chartCopy } from '@/api/chart/chart'
 import { uuid } from 'vue-uuid'
+import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
+import Vue from "vue";
 
 export default {
   state: {
@@ -85,7 +87,7 @@ export default {
       state.isCut = false
     },
 
-    paste(state, isMouse) {
+    paste(state, needAdaptor) {
       if (!state.copyData) {
         toast('请选择组件')
         return
@@ -103,12 +105,13 @@ export default {
       if (data.type === 'view') {
         chartCopy(data.propValue.viewId, state.panel.panelInfo.id).then(res => {
           const newView = deepCopy(data)
+          Vue.set(newView, 'needAdaptor', needAdaptor)
           newView.id = uuid.v1()
           newView.propValue.viewId = res.data
           if (newView.filters && newView.filters.length) {
             newView.filters = []
           }
-
+          needAdaptor && adaptCurThemeCommonStyle(newView)
           store.commit('addComponent', { component: newView })
         })
       } else if (data.type === 'de-tabs') {
@@ -120,17 +123,20 @@ export default {
             const newViewId = uuid.v1()
             sourceAndTargetIds[item.content.propValue.viewId] = newViewId
             item.content.propValue.viewId = newViewId
+            Vue.set(item.content, 'needAdaptor', needAdaptor)
             if (item.content.filters && item.content.filters.length) {
               item.content.filters = []
             }
           }
         })
         chartBatchCopy({ 'sourceAndTargetIds': sourceAndTargetIds }, state.panel.panelInfo.id).then((rsp) => {
+          needAdaptor && adaptCurThemeCommonStyle(newCop)
           store.commit('addComponent', { component: newCop })
         })
       } else {
         const newCop = deepCopy(data)
         newCop.id = uuid.v1()
+        needAdaptor && adaptCurThemeCommonStyle(newCop)
         store.commit('addComponent', { component: newCop })
       }
       if (state.isCut) {

frontend/src/store/index.js

@@ -708,6 +708,13 @@ const data = {
     },
     setInEditorStatus(state, status) {
       state.isInEditor = status
+    },
+    adaptorStatusDisable(state,componentId) {
+      state.componentData.forEach(item => {
+       if(item.id === componentId){
+         item.needAdaptor = false
+       }
+      })
     }
   },
   modules: {