Unverified 提交 bfdb77fa authored 作者: 王嘉豪's avatar 王嘉豪 提交者: GitHub

Merge pull request #230 from dataease/pr@dev@panel

feat:仪表板编辑不再使用右键操作,统一在组件右上角添加设置入口
...@@ -19,6 +19,9 @@ ...@@ -19,6 +19,9 @@
@mouseenter="enter" @mouseenter="enter"
@mouseleave="leave" @mouseleave="leave"
> >
<setting-menu style="right:5px;position: absolute;z-index: 2">
<i slot="icon" class="icon iconfont icon-shezhi" />
</setting-menu>
<div <div
v-for="(handlei, indexi) in actualHandles" v-for="(handlei, indexi) in actualHandles"
:key="indexi" :key="indexi"
...@@ -42,10 +45,12 @@ let eventsFor = events.mouse ...@@ -42,10 +45,12 @@ let eventsFor = events.mouse
// private // private
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
export default { export default {
replace: true, replace: true,
name: 'VueDragResizeRotate', name: 'VueDragResizeRotate',
components: { SettingMenu },
props: { props: {
className: { className: {
type: String, type: String,
...@@ -1620,4 +1625,27 @@ export default { ...@@ -1620,4 +1625,27 @@ export default {
outline: 1px dashed #70c0ff; outline: 1px dashed #70c0ff;
user-select: none; 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> </style>
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
<template v-if="!curComponent.isLock"> <template v-if="!curComponent.isLock">
<li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li> <li v-if="editFilter.includes(curComponent.type)" @click="edit"> {{ $t('panel.edit') }}</li>
<li @click="copy"> {{ $t('panel.copy') }}</li> <li @click="copy"> {{ $t('panel.copy') }}</li>
<li @click="paste"> {{ $t('panel.paste') }}</li>
<li @click="cut"> {{ $t('panel.cut') }}</li> <li @click="cut"> {{ $t('panel.cut') }}</li>
<li @click="deleteComponent"> {{ $t('panel.delete') }}</li> <li @click="deleteComponent"> {{ $t('panel.delete') }}</li>
<!-- <li @click="lock"> {{ $t('panel.lock') }}</li>--> <!-- <li @click="lock"> {{ $t('panel.lock') }}</li>-->
...@@ -83,6 +82,7 @@ export default { ...@@ -83,6 +82,7 @@ export default {
copy() { copy() {
this.$store.commit('copy') this.$store.commit('copy')
this.paste()
}, },
paste() { paste() {
......
<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>
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
class="editor" class="editor"
:class="{ edit: isEdit }" :class="{ edit: isEdit }"
:style="customStyle" :style="customStyle"
@contextmenu="handleContextMenu"
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
> >
<!-- 网格线 --> <!-- 网格线 -->
...@@ -54,6 +53,7 @@ ...@@ -54,6 +53,7 @@
:prop-value="item.propValue" :prop-value="item.propValue"
:element="item" :element="item"
:out-style="getShapeStyleInt(item.style)" :out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
/> />
<component <component
:is="item.component" :is="item.component"
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
:prop-value="item.propValue" :prop-value="item.propValue"
:element="item" :element="item"
:out-style="getShapeStyleInt(item.style)" :out-style="getShapeStyleInt(item.style)"
:active="item === curComponent"
/> />
</de-drag> </de-drag>
<!-- 右击菜单 --> <!-- 右击菜单 -->
......
<template> <template>
<div v-loading="requestStatus==='waiting'" class="rect-shape"> <div
<i v-if="requestStatus==='success'" style="right:5px;position: absolute;z-index: 2" class="icon iconfont icon-fangda" @click.stop="openChartDetailsDialog" /> 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 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;"> <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
{{ message }},{{ $t('chart.chart_show_error') }} {{ message }},{{ $t('chart.chart_show_error') }}
...@@ -28,10 +36,11 @@ import { isChange } from '@/utils/conditionUtil' ...@@ -28,10 +36,11 @@ import { isChange } from '@/utils/conditionUtil'
import { BASE_CHART_STRING } from '@/views/chart/chart/chart' import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy } from '@/components/canvas/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
export default { export default {
name: 'UserView', name: 'UserView',
components: { ChartComponent, TableNormal, LabelNormal, UserViewDialog }, components: { ChartComponent, TableNormal, LabelNormal, UserViewDialog, SettingMenu },
props: { props: {
element: { element: {
type: Object, type: Object,
...@@ -53,6 +62,11 @@ export default { ...@@ -53,6 +62,11 @@ export default {
type: Number, type: Number,
required: false, required: false,
default: 0 default: 0
},
active: {
type: Boolean,
required: false,
default: false
} }
}, },
data() { data() {
...@@ -212,6 +226,14 @@ export default { ...@@ -212,6 +226,14 @@ export default {
justify-content: center; justify-content: center;
background-color: #ece7e7; background-color: #ece7e7;
} }
.active {
}
.active >>> .icon-fangda{
z-index: 2;
display:block!important;
}
.rect-shape > i{ .rect-shape > i{
right: 5px; right: 5px;
...@@ -219,11 +241,11 @@ export default { ...@@ -219,11 +241,11 @@ export default {
position: absolute; position: absolute;
} }
.rect-shape > i:hover { .rect-shape >>> i:hover {
color: red; color: red;
} }
.rect-shape:hover > .icon-fangda { .rect-shape:hover >>> .icon-fangda {
z-index: 2; z-index: 2;
display:block; display:block;
} }
...@@ -232,4 +254,12 @@ export default { ...@@ -232,4 +254,12 @@ export default {
display:none display:none
} }
.rect-shape:hover >>> .icon-shezhi {
z-index: 2;
display:block;
}
.rect-shape>>>.icon-shezhi {
display:none
}
</style> </style>
...@@ -27,14 +27,16 @@ export default { ...@@ -27,14 +27,16 @@ export default {
} }
const data = state.copyData.data const data = state.copyData.data
data.style.top += 20
data.style.left += 20
if (isMouse) { // if (isMouse) {
data.style.top = state.menuTop // data.style.top = state.menuTop
data.style.left = state.menuLeft // data.style.left = state.menuLeft
} else { // } else {
data.style.top += 10 // data.style.top += 10
data.style.left += 10 // data.style.left += 10
} // }
data.id = generateID() data.id = generateID()
......
...@@ -1083,10 +1083,10 @@ export default { ...@@ -1083,10 +1083,10 @@ export default {
paste: '粘貼', paste: '粘貼',
cut: '剪切', cut: '剪切',
lock: '鎖定', lock: '鎖定',
topComponent: '置於頂層', topComponent: '置',
bottomComponent: '置於底層', bottomComponent: '置',
upComponent: '上移一層', upComponent: '上移',
downComponent: '下移一層', downComponent: '下移',
open_aided_design: '打開組件輔助設計', open_aided_design: '打開組件輔助設計',
close_aided_design: '關閉組件輔助設計', close_aided_design: '關閉組件輔助設計',
open_style_design: '打開樣式設計', open_style_design: '打開樣式設計',
......
...@@ -1084,10 +1084,10 @@ export default { ...@@ -1084,10 +1084,10 @@ export default {
paste: '粘贴', paste: '粘贴',
cut: '剪切', cut: '剪切',
lock: '锁定', lock: '锁定',
topComponent: '置于顶层', topComponent: '置',
bottomComponent: '置于底层', bottomComponent: '置',
upComponent: '上移一层', upComponent: '上移',
downComponent: '下移一层', downComponent: '下移',
open_aided_design: '打开组件辅助设计', open_aided_design: '打开组件辅助设计',
close_aided_design: '关闭组件辅助设计', close_aided_design: '关闭组件辅助设计',
open_style_design: '打开样式设计', open_style_design: '打开样式设计',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论