From f909427422f6447363bfae4d72f564e537a01f1d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 3 Aug 2021 18:37:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=81=94?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      |  5 +-
 .../components/Editor/ComponentWrapper.vue    |  2 +-
 .../canvas/components/Editor/EditBar.vue      | 48 ++++++++++++++++---
 .../canvas/components/Editor/Preview.vue      |  1 +
 .../canvas/components/Editor/index.vue        |  6 ++-
 .../components/canvas/components/Toolbar.vue  | 25 +++++++++-
 frontend/src/views/panel/edit/index.vue       |  6 ++-
 7 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 06a1c9c08a..f04a6e6211 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -19,7 +19,7 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
-    <edit-bar v-if="active" :active-model="'edit'" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="active||linkageSettingStatus" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" />
     <div
       v-for="(handlei, indexi) in actualHandles"
       :key="indexi"
@@ -463,7 +463,8 @@ export default {
       'curComponent',
       'editor',
       'curCanvasScale',
-      'canvasStyleData'
+      'canvasStyleData',
+      'linkageSettingStatus'
     ])
   },
   watch: {
diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index c5eca3650e..4b6da3a6ea 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -6,7 +6,7 @@
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
-    <edit-bar v-if="config === curComponent" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="config === curComponent" :element="config" @showViewDetails="showViewDetails" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index 7e768c3f4f..a86257ffa6 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -1,22 +1,34 @@
 <template>
   <div class="bar-main">
-    <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
-      <i slot="icon" class="icon iconfont icon-shezhi" />
-    </setting-menu>
-    <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
-    <!--    <el-checkbox />-->
+    <div v-if="linkageSettingStatus" style="margin-right: 0px;width: 18px">
+      <el-checkbox v-model="linkageActiveStatus" />
+      <i v-if="linkageActiveStatus" class="icon iconfont icon-edit" @click.stop="linkageEdit" />
+    </div>
+    <div v-else>
+      <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
+        <i slot="icon" class="icon iconfont icon-shezhi" />
+      </setting-menu>
+      <i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
+      <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+    </div>
+
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import eventBus from '@/components/canvas/utils/eventBus'
+import bus from '@/utils/bus'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 
 export default {
   components: { SettingMenu },
 
   props: {
+    element: {
+      type: Object,
+      required: true
+    },
     active: {
       type: Boolean,
       required: false,
@@ -32,6 +44,7 @@ export default {
   data() {
     return {
       componentType: null,
+      linkageActiveStatus: false,
       editFilter: [
         'view',
         'custom'
@@ -44,11 +57,34 @@ export default {
     'menuShow',
     'curComponent',
     'componentData',
-    'canvasStyleData'
+    'canvasStyleData',
+    'linkageSettingStatus'
   ]),
   methods: {
     showViewDetails() {
       this.$emit('showViewDetails')
+    },
+    edit() {
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      if (this.curComponent.type === 'view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      }
+      if (this.curComponent.type === 'custom') {
+        bus.$emit('component-dialog-edit')
+      }
+
+      // 编辑样式组件
+
+      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+        bus.$emit('component-dialog-style')
+      }
+    },
+    linkageEdit() {
+
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 9b6728fbf5..8e5d3cd9d4 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -153,6 +153,7 @@ export default {
       this.searchCount++
     }, refreshTime)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
+    this.$store.commit('setLinkageSettingStatus', false)
   },
   beforeDestroy() {
     clearInterval(this.timer)
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index e54dc297ff..91fb7c8a73 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -8,7 +8,7 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <Grid v-if="canvasStyleData.auxiliaryMatrix" :matrix-style="matrixStyle" />
+    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
     <!--页面组件列表展示-->
     <de-drag
       v-for="(item, index) in componentData"
@@ -29,6 +29,7 @@
       :snap="true"
       :snap-tolerance="2"
       :change-style="customStyle"
+      :draggable="!linkageSettingStatus"
       @refLineParams="getRefLineParams"
       @showViewDetails="showViewDetails(index)"
     >
@@ -249,7 +250,8 @@ export default {
       'componentData',
       'curComponent',
       'canvasStyleData',
-      'editor'
+      'editor',
+      'linkageSettingStatus'
     ])
   },
   watch: {
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 8d8bb5569a..c63c4544b6 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -1,6 +1,17 @@
 <template>
   <div>
-    <div class="toolbar">
+    <!--    linkageActiveStatus:{{ linkageActiveStatus }}-->
+    <div v-if="linkageSettingStatus" class="toolbar">
+      <span style="float: right;">
+        <el-button size="mini" @click="saveLinkage">
+          {{ $t('commons.confirm') }}
+        </el-button>
+        <el-button size="mini" @click="cancelLinkage">
+          {{ $t('commons.cancel') }}
+        </el-button>
+      </span>
+    </div>
+    <div v-else class="toolbar">
 
       <div class="canvas-config" style="margin-right: 10px">
         <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
@@ -125,7 +136,8 @@ export default {
     'curComponent',
     'changeTimes',
     'snapshotIndex',
-    'lastSaveSnapshotIndex'
+    'lastSaveSnapshotIndex',
+    'linkageSettingStatus'
   ]),
 
   created() {
@@ -302,6 +314,15 @@ export default {
     },
     closeNotSave() {
       this.close()
+    },
+    saveLinkage() {
+      this.cancelLinkageSettingStatus()
+    },
+    cancelLinkage() {
+      this.cancelLinkageSettingStatus()
+    },
+    cancelLinkageSettingStatus() {
+      this.$store.commit('setLinkageSettingStatus', false)
     }
   }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index d02c121d19..3fb4e2ee29 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -21,7 +21,7 @@
     <de-container>
       <!--左侧导航栏-->
       <de-aside-container class="ms-aside-container">
-        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
+        <div v-if="!linkageSettingStatus" style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
           <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
             <!-- 视图图表 start -->
             <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
@@ -290,7 +290,8 @@ export default {
       'isClickComponent',
       'canvasStyleData',
       'curComponentIndex',
-      'componentData'
+      'componentData',
+      'linkageSettingStatus'
     ])
   },
 
@@ -322,6 +323,7 @@ export default {
     listenGlobalKeyDown()
 
     this.$store.commit('setCurComponent', { component: null, index: null })
+    this.$store.commit('setLinkageSettingStatus', false)
   },
   mounted() {
     // this.insertToBody()