Merge pull request #2679 from dataease/pr@dev@refactor_multiply

refactor(仪表板): 仪表板的复用支持复用所有组件

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

@@ -5,7 +5,7 @@
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
-    <edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="componentActiveFlag" :element="config" :show-position="showPosition" @showViewDetails="showViewDetails" />
     <div :id="componentCanvasId" :style="commonStyle" class="main_view">
       <close-bar v-if="previewVisible" @closePreview="closePreview" />
       <de-out-widget
@@ -150,7 +150,7 @@ export default {
       return style
     },
     componentActiveFlag() {
-      return (this.curComponent && this.config === this.curComponent) && !this.previewVisible && !this.showPosition.includes('multiplexing') && !this.showPosition.includes('email-task')
+      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && this.showPosition.includes('multiplexing') && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
     },
     curGap() {
       return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0

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

@@ -5,6 +5,9 @@
       <el-checkbox v-model="linkageInfo.linkageActive" size="medium" />
       <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
     </div>
+    <div v-if="positionCheck('multiplexing')" style="margin-right: 1px;width: 18px;z-index: 5">
+      <el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
+    </div>
     <div v-if="batchOptAreaShow" style="margin-right: -1px;width: 20px;z-index: 5">
       <el-checkbox size="medium" @change="batchOptChange" />
     </div>
@@ -73,10 +76,16 @@ export default {
     previewVisible: {
       type: Boolean,
       default: false
+    },
+    showPosition: {
+      type: String,
+      required: false,
+      default: 'NotProvided'
     }
   },
   data() {
     return {
+      multiplexingCheckModel: false,
       barWidth: 24,
       componentType: null,
       linkageActiveStatus: false,
@@ -106,7 +115,6 @@ export default {
         return 'bar-main-preview'
       }
     },
-
     showJumpFlag() {
       return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable
     },
@@ -120,7 +128,7 @@ export default {
     },
     // 编辑或预览区域显示
     normalAreaShow() {
-      return !this.linkageSettingStatus && !this.batchOptStatus
+      return !this.linkageSettingStatus && !this.batchOptStatus && !this.positionCheck('multiplexing')
     },
     existLinkage() {
       let linkageFiltersCount = 0
@@ -166,6 +174,18 @@ export default {
   beforeDestroy() {
   },
   methods: {
+    positionCheck(position) {
+      return this.showPosition.includes(position)
+    },
+    multiplexingCheck(val) {
+      if (val) {
+        // push
+        this.$store.commit('addCurMultiplexingComponent', { 'component': this.element, 'componentId': this.element.id })
+      } else {
+        // remove
+        this.$store.commit('removeCurMultiplexingComponentWithId', this.element.id )
+      }
+    },
     closePreview() {
       this.$emit('closePreview')
     },
@@ -217,8 +237,7 @@ export default {
     edit() {
       if (this.curComponent.type === 'custom') {
         bus.$emit('component-dialog-edit', 'update')
-      }
-      else if (this.curComponent.type === 'custom-button') {
+      } else if (this.curComponent.type === 'custom-button') {
         bus.$emit('button-dialog-edit')
       } else if (this.curComponent.type === 'v-text' || this.curComponent.type === 'de-rich-text' || this.curComponent.type === 'rect-shape') {
         bus.$emit('component-dialog-style')

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

@@ -236,7 +236,7 @@ export default {
       }
     },
     editBarViewShowFlag() {
-      return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition.includes('multiplexing') || this.showPosition.includes('email-task')
+      return (this.active && this.inTab && !this.mobileLayoutStatus) && !this.showPosition.includes('multiplexing') || this.showPosition.includes('email-task')
     },
     charViewShowFlag() {
       return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'

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

@@ -35,10 +35,10 @@ export default {
       const canvasStyleData = state.canvasStyleData
       const curCanvasScale = state.curCanvasScale
       const componentGap = state.componentGap
-      Object.keys(state.curMultiplexingComponents).forEach(function(viewId, index) {
+      Object.keys(state.curMultiplexingComponents).forEach(function(componentId, index) {
         const component =
           {
-            ...deepCopy(state.curMultiplexingComponents[viewId]),
+            ...deepCopy(state.curMultiplexingComponents[componentId]),
             ...deepCopy(deepCopy(state.viewBase)),
             'auxiliaryMatrix': canvasStyleData.auxiliaryMatrix
           }

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -80,6 +80,7 @@
             :filters="filterMap[item.content.propValue && item.content.propValue.viewId] || []"
             :out-style="outStyle"
             :canvas-style-data="canvasStyleData"
+            :show-position="showPosition"
           />
         </div>
 
@@ -193,6 +194,11 @@ export default {
     h: {
       type: Number,
       default: 200
+    },
+    showPosition: {
+      type: String,
+      required: false,
+      default: 'NotProvided'
     }
   },
   data() {

frontend/src/layout/components/Topbar.vue

@@ -329,7 +329,7 @@ export default {
       if (result !== 'success' && result !== 'fail') {
         window.location.href = result
       } else {
-        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+        this.$router.push('/login')
       }
     },
     loadUiInfo() {

frontend/src/permission.js

@@ -92,7 +92,8 @@ router.beforeEach(async(to, from, next) => {
       next()
     } else {
       // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
+      // next(`/login?redirect=${to.path}`)
+      next('/login')
       NProgress.done()
     }
   }