From b11db93328a757bf63225ad3f992df863bbf3f88 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 13 Jul 2021 18:11:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E4=B8=8D=E5=86=8D=E4=BD=BF=E7=94=A8=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=EF=BC=8C=E7=BB=9F=E4=B8=80=E5=9C=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=B3=E4=B8=8A=E8=A7=92=E6=B7=BB=E5=8A=A0=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/DeDrag/index.vue      |  28 +++
 .../canvas/components/Editor/ContextMenu.vue  |   2 +-
 .../canvas/components/Editor/SettingMenu.vue  | 160 ++++++++++++++++++
 .../canvas/components/Editor/index.vue        |   3 +-
 .../canvas/custom-component/UserView.vue      |  40 ++++-
 frontend/src/components/canvas/store/copy.js  |  16 +-
 frontend/src/lang/tw.js                       |   8 +-
 frontend/src/lang/zh.js                       |   8 +-
 8 files changed, 243 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/canvas/components/Editor/SettingMenu.vue

diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index 99ad7403ee..29cda42516 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -19,6 +19,9 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
+    <setting-menu style="right:5px;position: absolute;z-index: 2">
+      <i slot="icon" class="icon iconfont icon-shezhi" />
+    </setting-menu>
     <div
       v-for="(handlei, indexi) in actualHandles"
       :key="indexi"
@@ -42,10 +45,12 @@ let eventsFor = events.mouse
 // private
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
+import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 
 export default {
   replace: true,
   name: 'VueDragResizeRotate',
+  components: { SettingMenu },
   props: {
     className: {
       type: String,
@@ -1620,4 +1625,27 @@ export default {
   outline: 1px dashed #70c0ff;
   user-select: none;
 }
+
+.mouseOn >>> .icon-shezhi{
+  z-index: 2;
+  display:block!important;
+}
+.vdr > i{
+  right: 5px;
+  color: gray;
+  position: absolute;
+}
+
+.vdr >>> i:hover {
+  color: red;
+}
+
+.vdr:hover >>> i {
+  z-index: 2;
+  display:block;
+}
+
+.vdr>>>.icon-shezhi {
+  display:none
+}
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
index e3fddce02d..96035a5c02 100644
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -5,7 +5,6 @@
         <template v-if="!curComponent.isLock">
           <li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
           <li @click="copy"> {{ $t('panel.copy') }}</li>
-          <li @click="paste"> {{ $t('panel.paste') }}</li>
           <li @click="cut"> {{ $t('panel.cut') }}</li>
           <li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
           <!--          <li @click="lock"> {{ $t('panel.lock') }}</li>-->
@@ -83,6 +82,7 @@ export default {
 
     copy() {
       this.$store.commit('copy')
+      this.paste()
     },
 
     paste() {
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
new file mode 100644
index 0000000000..4aec5e0535
--- /dev/null
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-dropdown trigger="click" @mouseup="handleMouseUp">
+        <slot name="icon" />
+        <el-dropdown-menu v-if="curComponent" slot="dropdown">
+          <el-dropdown-item v-if="editFilter.includes(curComponent.type)" @click.native="edit">{{ $t('panel.edit') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="copy">{{ $t('panel.copy') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="deleteComponent">{{ $t('panel.delete') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="topComponent">{{ $t('panel.topComponent') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="bottomComponent">{{ $t('panel.bottomComponent') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import bus from '@/utils/bus'
+
+export default {
+  data() {
+    return {
+      copyData: null,
+      editFilter: [
+        'view',
+        'custom'
+      ]
+    }
+  },
+  computed: mapState([
+    'menuTop',
+    'menuLeft',
+    'menuShow',
+    'curComponent',
+    'componentData',
+    'canvasStyleData'
+  ]),
+  methods: {
+    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')
+      }
+    },
+    lock() {
+      this.$store.commit('lock')
+    },
+
+    unlock() {
+      this.$store.commit('unlock')
+    },
+
+    // 点击菜单时不取消当前组件的选中状态
+    handleMouseUp() {
+      this.$store.commit('setClickComponentStatus', true)
+    },
+
+    cut() {
+      this.deleteCurCondition()
+      this.$store.commit('cut')
+    },
+
+    copy() {
+      this.$store.commit('copy')
+      this.paste()
+    },
+
+    paste() {
+      this.$store.commit('paste', true)
+      this.$store.commit('recordSnapshot')
+    },
+
+    deleteComponent() {
+      this.deleteCurCondition()
+      this.$store.commit('deleteComponent')
+      this.$store.commit('recordSnapshot')
+      this.$store.commit('setCurComponent', { component: null, index: null })
+    },
+
+    deleteCurCondition() {
+      if (this.curComponent.type === 'custom') {
+        this.$store.commit('removeViewFilter', this.curComponent.id)
+        bus.$emit('delete-condition', { componentId: this.curComponent.id })
+      }
+    },
+
+    upComponent() {
+      this.$store.commit('upComponent')
+      this.$store.commit('recordSnapshot')
+    },
+
+    downComponent() {
+      this.$store.commit('downComponent')
+      this.$store.commit('recordSnapshot')
+    },
+
+    topComponent() {
+      this.$store.commit('topComponent')
+      this.$store.commit('recordSnapshot')
+    },
+
+    bottomComponent() {
+      this.$store.commit('bottomComponent')
+      this.$store.commit('recordSnapshot')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .contextmenu {
+    position: absolute;
+    z-index: 1000;
+
+    ul {
+      border: 1px solid #e4e7ed;
+      border-radius: 4px;
+      background-color: #fff;
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+      box-sizing: border-box;
+      margin: 5px 0;
+      padding: 6px 0;
+
+      li {
+        font-size: 14px;
+        padding: 0 20px;
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #606266;
+        height: 34px;
+        line-height: 34px;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+      }
+    }
+  }
+</style>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index a3962b3fb5..e99a4e82b4 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -5,7 +5,6 @@
     class="editor"
     :class="{ edit: isEdit }"
     :style="customStyle"
-    @contextmenu="handleContextMenu"
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
@@ -54,6 +53,7 @@
         :prop-value="item.propValue"
         :element="item"
         :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
       />
       <component
         :is="item.component"
@@ -64,6 +64,7 @@
         :prop-value="item.propValue"
         :element="item"
         :out-style="getShapeStyleInt(item.style)"
+        :active="item === curComponent"
       />
     </de-drag>
     <!-- 右击菜单 -->
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 78759575d0..f280c142c1 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -1,6 +1,14 @@
 <template>
-  <div v-loading="requestStatus==='waiting'" class="rect-shape">
-    <i v-if="requestStatus==='success'" style="right:5px;position: absolute;z-index: 2" class="icon iconfont icon-fangda" @click.stop="openChartDetailsDialog" />
+  <div
+    v-loading="requestStatus==='waiting'"
+    :class="[
+      {
+        ['active']: active
+      },
+      'rect-shape'
+    ]"
+  >
+    <i v-if="requestStatus==='success'" style="right:25px;position: absolute;z-index: 2" class="icon iconfont icon-fangda" @click.stop="openChartDetailsDialog" />
     <div v-if="requestStatus==='error'" class="chart-error-class">
       <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
         {{ message }},{{ $t('chart.chart_show_error') }}
@@ -28,10 +36,11 @@ import { isChange } from '@/utils/conditionUtil'
 import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 
 export default {
   name: 'UserView',
-  components: { ChartComponent, TableNormal, LabelNormal, UserViewDialog },
+  components: { ChartComponent, TableNormal, LabelNormal, UserViewDialog, SettingMenu },
   props: {
     element: {
       type: Object,
@@ -53,6 +62,11 @@ export default {
       type: Number,
       required: false,
       default: 0
+    },
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -212,6 +226,14 @@ export default {
   justify-content: center;
   background-color: #ece7e7;
 }
+.active {
+
+}
+
+.active >>> .icon-fangda{
+  z-index: 2;
+  display:block!important;
+}
 
 .rect-shape > i{
   right: 5px;
@@ -219,11 +241,11 @@ export default {
   position: absolute;
 }
 
-.rect-shape > i:hover {
+.rect-shape >>> i:hover {
   color: red;
 }
 
-.rect-shape:hover > .icon-fangda {
+.rect-shape:hover >>> .icon-fangda {
   z-index: 2;
   display:block;
 }
@@ -232,4 +254,12 @@ export default {
   display:none
 }
 
+.rect-shape:hover >>> .icon-shezhi {
+  z-index: 2;
+  display:block;
+}
+
+.rect-shape>>>.icon-shezhi {
+  display:none
+}
 </style>
diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js
index 16a908fe99..ef4eb98351 100644
--- a/frontend/src/components/canvas/store/copy.js
+++ b/frontend/src/components/canvas/store/copy.js
@@ -27,14 +27,16 @@ export default {
       }
 
       const data = state.copyData.data
+      data.style.top += 20
+      data.style.left += 20
 
-      if (isMouse) {
-        data.style.top = state.menuTop
-        data.style.left = state.menuLeft
-      } else {
-        data.style.top += 10
-        data.style.left += 10
-      }
+      // if (isMouse) {
+      //   data.style.top = state.menuTop
+      //   data.style.left = state.menuLeft
+      // } else {
+      //   data.style.top += 10
+      //   data.style.left += 10
+      // }
 
       data.id = generateID()
 
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 59ebb0f759..93dd98a582 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1079,10 +1079,10 @@ export default {
     paste: '粘貼',
     cut: '剪切',
     lock: '鎖定',
-    topComponent: '置於頂層',
-    bottomComponent: '置於底層',
-    upComponent: '上移一層',
-    downComponent: '下移一層',
+    topComponent: '置頂',
+    bottomComponent: '置底',
+    upComponent: '上移',
+    downComponent: '下移',
     open_aided_design: '打開組件輔助設計',
     close_aided_design: '關閉組件輔助設計',
     open_style_design: '打開樣式設計',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index b7e75b1d4e..14a0c8a964 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1080,10 +1080,10 @@ export default {
     paste: '粘贴',
     cut: '剪切',
     lock: '锁定',
-    topComponent: '置于顶层',
-    bottomComponent: '置于底层',
-    upComponent: '上移一层',
-    downComponent: '下移一层',
+    topComponent: '置顶',
+    bottomComponent: '置底',
+    upComponent: '上移',
+    downComponent: '下移',
     open_aided_design: '打开组件辅助设计',
     close_aided_design: '关闭组件辅助设计',
     open_style_design: '打开样式设计',