Merge pull request #5814 from dataease/pr@dev@feat_panel-multply

feat(仪表板): 仪表板复用时支持选择适应当前主题和保持源样式 #5703

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

@@ -123,7 +123,7 @@ 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)
+          Vue.set(newView, 'needAdaptor', store.state.multiplexingStyleAdapt?needAdaptor:false)
           newView.id = uuid.v1()
           newView.propValue.viewId = res.data
           newView['canvasId'] = data.canvasId
@@ -131,7 +131,9 @@ export default {
           if (newView.filters && newView.filters.length) {
             newView.filters = []
           }
-          needAdaptor && adaptCurThemeCommonStyle(newView)
+          if(needAdaptor && store.state.multiplexingStyleAdapt){
+            adaptCurThemeCommonStyle(newView)
+          }
           store.commit('addComponent', { component: newView })
         })
       } else if (data.type === 'de-tabs') {
@@ -143,20 +145,24 @@ export default {
             const newViewId = uuid.v1()
             sourceAndTargetIds[item.content.propValue.viewId] = newViewId
             item.content.propValue.viewId = newViewId
-            Vue.set(item.content, 'needAdaptor', needAdaptor)
+            Vue.set(item.content, 'needAdaptor', store.state.multiplexingStyleAdapt?needAdaptor:false)
             if (item.content.filters && item.content.filters.length) {
               item.content.filters = []
             }
           }
         })
         chartBatchCopy({ 'sourceAndTargetIds': sourceAndTargetIds }, state.panel.panelInfo.id).then((rsp) => {
-          needAdaptor && adaptCurThemeCommonStyle(newCop,'copy')
+          if(needAdaptor && store.state.multiplexingStyleAdapt){
+            adaptCurThemeCommonStyle(newCop,'copy')
+          }
           store.commit('addComponent', { component: newCop })
         })
       } else {
         const newCop = deepCopy(data)
         newCop.id = uuid.v1()
-        needAdaptor && adaptCurThemeCommonStyle(newCop,'copy')
+        if(needAdaptor && store.state.multiplexingStyleAdapt) {
+          adaptCurThemeCommonStyle(newCop,'copy')
+        }
         store.commit('addComponent', { component: newCop })
       }
       if (state.isCut) {

frontend/src/store/index.js

@@ -153,7 +153,8 @@ const data = {
     previewVisible: false,
     previewComponentData: [],
     currentCanvasNewId: [],
-    lastViewRequestInfo: {}
+    lastViewRequestInfo: {},
+    multiplexingStyleAdapt: true //复用样式跟随主题
   },
   mutations: {
     ...animation.mutations,
@@ -848,6 +849,9 @@ const data = {
       })
 
       bus.$emit('clear_panel_linkage', { viewId: viewId })
+    },
+    setMultiplexingStyleAdapt(state, value) {
+     state.multiplexingStyleAdapt = value
     }
   },
   modules: {

frontend/src/views/panel/edit/index.vue

@@ -428,6 +428,22 @@
           {{ $t('panel.multiplexing') }}
         </span>
         <span style="float: right;">
+          <span class="adapt-text"> 样式适配： </span>
+          <el-select
+            style="width: 120px;margin-right: 16px"
+            v-model="multiplexingStyleAdaptSelf"
+            placeholder="Select"
+            placement="top-start"
+            size="mini"
+            @change="multiplexingStyleAdaptChange"
+          >
+            <el-option
+              v-for="item in copyOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
           <el-button
             type="primary"
             size="mini"
@@ -630,7 +646,12 @@ export default {
       activeToolsName: 'view',
       rightDrawOpen: false,
       editType: null,
-      buttonVisible: false
+      buttonVisible: false,
+      copyOptions: [
+        { label: '适应新主题', value: true },
+        { label: '保持源样式', value: false }
+      ],
+      multiplexingStyleAdaptSelf : true
     }
   },
 
@@ -754,6 +775,9 @@ export default {
     curCanvasScaleSelf() {
       return this.curCanvasScaleMap[this.canvasId]
     },
+    selectComponentCount(){
+      return Object.keys(this.curMultiplexingComponents).length
+    },
     ...mapState([
       'curComponent',
       'curCanvasScaleMap',
@@ -770,7 +794,8 @@ export default {
       'mobileLayoutStyle',
       'scrollAutoMove',
       'batchOptStatus',
-      'curMultiplexingComponents'
+      'curMultiplexingComponents',
+      'multiplexingStyleAdapt'
     ])
   },
 
@@ -835,6 +860,7 @@ export default {
     })
     this.loadMultiplexingViewTree()
     this.init(this.$store.state.panel.panelInfo.id)
+    this.multiplexingStyleAdaptSelf = this.multiplexingStyleAdapt
   },
   beforeDestroy() {
     bus.$off('component-on-drag', this.componentOnDrag)
@@ -1448,6 +1474,9 @@ export default {
       this.$store.commit('copyMultiplexingComponents')
       this.$store.commit('recordSnapshot')
       this.$store.commit('canvasChange')
+    },
+    multiplexingStyleAdaptChange(value){
+      this.$store.commit('setMultiplexingStyleAdapt',value)
     }
   }
 }
@@ -1727,4 +1756,31 @@ export default {
 .dialog-css ::v-deep .el-dialog__body {
   padding: 10px 20px 20px;
 }
+
+.multiplexing-footer {
+  position: relative;
+}
+
+.adapt-count {
+  position: absolute;
+  top: 18px;
+  left: 20px;
+  color: #646a73;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+}
+
+.adapt-select {
+  position: absolute;
+  top: 18px;
+  right: 220px;
+}
+.adapt-text {
+  font-size: 14px;
+  font-weight: 400;
+  color: #1f2329;
+  line-height: 22px;
+}
 </style>