github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 03:52:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: 仪表盘编辑 做出菜单不关闭问题

Browse Source
This commit is contained in:
wangjiahao 2021-05-20 11:18:31 +08:00
parent 91929a76a8
commit d56fc014c4
3 changed files with 101 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,7 +57,7 @@ export default {
customStyle() { customStyle() {
let style = {} let style = {}
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image'&&this.canvasStyleData.panel.imageUrl) { if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = { style = {
width: '100%', width: '100%',
height: '100%', height: '100%',
@ -80,6 +80,7 @@ export default {
mounted() { mounted() {
const _this = this const _this = this
debugger
// 加载数据 // 加载数据
_this.restore() _this.restore()
const erd = elementResizeDetectorMaker() const erd = elementResizeDetectorMaker()

2
frontend/src/views/panel/ViewSelect/index.vue
View File

@ -128,7 +128,7 @@ export default {
overflow-y : auto overflow-y : auto
} }
.detail-class { .detail-class {
width: 100%; width: 300px;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
} }

160
frontend/src/views/panel/edit/index.vue
View File

@ -11,66 +11,82 @@
<Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" /> <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
</el-col> </el-col>
</el-header> </el-header>
<el-main style="padding: 0px"> <de-container>
<de-container> <de-aside-container class="ms-aside-container">
<de-aside-container class="ms-aside-container"> <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
<div 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;">
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;"> <i class="el-icon-s-unfold" @click="visible = true">test</i>
<!-- 视图图表 --> <!-- 视图图表 -->
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;"> <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
<el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" /> <el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
</div>
<!-- 视图文字 -->
<div style="position: relative; margin: 18px auto 30px">
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
{{ $t('panel.view') }}
</div> </div>
<!-- 视图文字 --> </div>
<div style="position: relative; margin: 18px auto 30px"> <!-- 视图分割线 -->
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"> <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
{{ $t('panel.view') }} <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div>
<!-- 过滤组件 -->
<div tabindex="-1" style="position: relative; margin: 20px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
</div> </div>
</div> <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
<!-- 视图分割线 --> <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;"> {{ $t('panel.module') }}
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div>
<!-- 过滤组件 -->
<div tabindex="-1" style="position: relative; margin: 20px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
</div>
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
{{ $t('panel.module') }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div ref="leftPanel" :class="{show:show}" class="leftPanel-container"> </div>
<div /> <!-- <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
<div v-if="show" class="leftPanel"> <!-- <div />-->
<div style="height:100%;overflow-y: auto"> <!-- <div v-if="show" class="leftPanel">-->
<view-select v-show=" show && showIndex===0" /> <!-- <div style="height:100%;overflow-y: auto">-->
<filter-group v-show=" show &&showIndex===1" /> <!-- <view-select v-show=" show && showIndex===0" />-->
<subject-setting v-show=" show &&showIndex===2" /> <!-- <filter-group v-show=" show &&showIndex===1" />-->
</div> <!-- <subject-setting v-show=" show &&showIndex===2" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</de-aside-container> <!-- </div>-->
</de-aside-container>
<!--画布区域--> <!--画布区域-->
<de-main-container> <el-main>
<div <el-drawer
class="content" title="我是标题"
@drop="handleDrop" :visible.sync="show"
@dragover="handleDragOver" :with-header="false"
@mousedown="handleMouseDown" style="position: absolute;"
@mouseup="deselectCurComponent" direction="ltr"
> :modal="false"
<Editor /> :size="drawerSize"
</div> :wrapper-closable="false"
</de-main-container> :close-on-press-escape="false"
</de-container> :modal-append-to-body="true"
</el-main> >
<view-select v-show=" show && showIndex===0" />
<filter-group v-show=" show &&showIndex===1" />
<subject-setting v-show=" show &&showIndex===2" />
</el-drawer>
<div
class="content this_canvas"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor />
</div>
</el-main>
</de-container>
<el-dialog <el-dialog
v-if="filterVisible && panelInfo.id" v-if="filterVisible && panelInfo.id"
@ -138,6 +154,8 @@ export default {
}, },
data() { data() {
return { return {
drawerSize: '300px',
visible: false,
show: false, show: false,
editView: false, editView: false,
clickNotClose: false, clickNotClose: false,
@ -186,7 +204,7 @@ export default {
listenGlobalKeyDown() listenGlobalKeyDown()
}, },
mounted() { mounted() {
this.insertToBody() // this.insertToBody()
bus.$on('component-on-drag', () => { bus.$on('component-on-drag', () => {
this.show = false this.show = false
}) })
@ -222,7 +240,10 @@ export default {
this.$router.replace('/panel/index') this.$router.replace('/panel/index')
}, },
showPanel(type) { showPanel(type) {
this.show = !this.show debugger
if (this.showIndex === -1 || this.showIndex === type) {
this.show = !this.show
}
this.showIndex = type this.showIndex = type
}, },
addEventClick() { addEventClick() {
@ -230,7 +251,7 @@ export default {
}, },
closeSidebar(evt) { closeSidebar(evt) {
const parent = evt.target.closest('.button-div-class') const parent = evt.target.closest('.button-div-class')
const self = evt.target.closest('.leftPanel') const self = evt.target.closest('.el-drawer__wrapper')
// 点击样式按钮 排除 // 点击样式按钮 排除
const stick = evt.target.closest('.el-icon-magic-stick') const stick = evt.target.closest('.el-icon-magic-stick')
if (!parent && !self && !stick) { if (!parent && !self && !stick) {
@ -239,13 +260,13 @@ export default {
this.showIndex = -1 this.showIndex = -1
} }
}, },
insertToBody() { // insertToBody() {
this.$nextTick(() => { // this.$nextTick(() => {
const elx = this.$refs.leftPanel // const elx = this.$refs.leftPanel
const body = document.querySelector('body') // const body = document.querySelector('body')
body.insertBefore(elx, body.firstChild) // body.insertBefore(elx, body.firstChild)
}) // })
}, // },
resetID(data) { resetID(data) {
if (data) { if (data) {
@ -422,4 +443,19 @@ export default {
} }
} }
.this_canvas{
height: calc(100vh - 91px);
overflow: auto;
}
.el-main{
height: calc(100vh - 91px);
padding: 0!important;
overflow: auto;
position: relative;
}
.el-main >>> .el-drawer__wrapper{
width: 310px!important;
}
</style> </style>