refactor: 复用存量视图自动勾选

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

@@ -9,7 +9,7 @@
       </span>
     </div>
     <div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">
-      <el-checkbox size="medium" @change="multiplexingCheck" />
+      <el-checkbox v-model="multiplexingCheckModel" size="medium" @change="multiplexingCheck" />
     </div>
   </div>
 </template>
@@ -41,6 +41,7 @@ export default {
   },
   data() {
     return {
+      multiplexingCheckModel: false,
       componentType: null,
       linkageActiveStatus: false,
       editFilter: [
@@ -67,6 +68,10 @@ export default {
     ])
   },
   mounted() {
+    if (this.showPosition === 'multiplexing-view') {
+      this.multiplexingCheckModel = true
+      this.multiplexingCheck(this.multiplexingCheckModel)
+    }
   },
   beforeDestroy() {
   },
@@ -86,7 +91,7 @@ export default {
       this.$emit('showViewDetails')
     },
     positionCheck(position) {
-      return this.showPosition === position
+      return this.showPosition.includes(position)
     },
     multiplexingCheck(val) {
       if (val) {

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

@@ -233,7 +233,7 @@ export default {
       }
     },
     editBarViewShowFlag() {
-      return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition === 'multiplexing'
+      return (this.active && this.inTab && !this.mobileLayoutStatus) || this.showPosition.includes('multiplexing')
     },
     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/views/panel/ViewSelect/multiplexing.vue

@@ -11,7 +11,7 @@
         v-if="selectedPanel"
         :component-data="componentData"
         :canvas-style-data="canvasStyleData"
-        :show-position="'multiplexing'"
+        :show-position="showPosition"
       />
       <el-col v-else style="height: 100%;">
         <el-row style="height: 100%; background-color: var(--ContentBG);" class="custom-position">
@@ -45,6 +45,7 @@ export default {
   },
   data() {
     return {
+      showPosition: 'multiplexing',
       activeName: 'PanelList',
       viewLoading: false,
       panelLoading: false,
@@ -60,21 +61,25 @@ export default {
 
   },
   mounted() {
+    this.$store.commit('initCurMultiplexingComponents')
   },
   methods: {
     showDetails(params) {
+      this.$store.commit('initCurMultiplexingComponents')
       const _this = this
       _this.selectedPanel = params
       if (params.showType === 'panel') {
-        this.panelLoading = true
+        _this.showPosition = 'multiplexing'
+        _this.panelLoading = true
         findOne(params.showId).then(response => {
-          this.panelLoading = false
+          _this.panelLoading = false
           panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), function(rsp) {
             _this.componentData = rsp.componentData
             _this.canvasStyleData = rsp.componentStyle
           })
         })
       } else if (params.showType === 'view') {
+        _this.showPosition = 'multiplexing-view'
         _this.componentData = []
         const componentId = uuid.v1()
         _this.canvasStyleData = deepCopy(DEFAULT_COMMON_CANVAS_STYLE_STRING)