dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:仪表板编辑不再使用右键操作，统一在组件右上角添加设置入口

Browse Source
This commit is contained in:
wangjiahao 2021-07-13 18:11:42 +08:00
parent ab7c33c82a
commit b11db93328
8 changed files with 243 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/DeDrag/index.vue
View File

@ -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>

2
frontend/src/components/canvas/components/Editor/ContextMenu.vue
View File

@ -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() {

160
frontend/src/components/canvas/components/Editor/SettingMenu.vue Normal file
View File

@ -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>

3
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -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>
<!-- 右击菜单 -->

40
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -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>

16
frontend/src/components/canvas/store/copy.js
View File

@ -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()

8
frontend/src/lang/tw.js
View File

@ -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: '打開樣式設計',

8
frontend/src/lang/zh.js
View File

@ -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: '打开样式设计',