forked from github/dataease
418 lines
13 KiB
Vue
418 lines
13 KiB
Vue
<template>
|
||
<el-row>
|
||
<el-row class="de-header">
|
||
<span style="float: left;line-height: 35px; color: gray">
|
||
{{ $t('commons.name') }} ：{{ panelInfo.name || '测试仪表板' }}
|
||
</span>
|
||
<!--横向工具栏-->
|
||
<Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
|
||
</el-row>
|
||
<el-row>
|
||
<de-container>
|
||
<de-aside-container class="ms-aside-container">
|
||
<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 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)" />
|
||
</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 style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
|
||
<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 ref="leftPanel" :class="{show:show}" class="leftPanel-container">
|
||
<div />
|
||
<div v-if="show" class="leftPanel">
|
||
<div style="height:100%;overflow-y: auto">
|
||
<view-select v-show=" show && showIndex===0" />
|
||
<filter-group v-show=" show &&showIndex===1" />
|
||
<subject-setting v-show=" show &&showIndex===2" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</de-aside-container>
|
||
|
||
<!--画布区域-->
|
||
<de-main-container>
|
||
<div
|
||
class="content"
|
||
@drop="handleDrop"
|
||
@dragover="handleDragOver"
|
||
@mousedown="handleMouseDown"
|
||
@mouseup="deselectCurComponent"
|
||
>
|
||
<Editor />
|
||
</div>
|
||
</de-main-container>
|
||
</de-container>
|
||
</el-row>
|
||
|
||
<el-dialog
|
||
v-if="filterVisible && panelInfo.id"
|
||
:title="$t('panel.module')"
|
||
:visible.sync="filterVisible"
|
||
custom-class="de-filter-dialog"
|
||
>
|
||
<filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" :component-info="currentFilterCom" @re-fresh-component="reFreshComponent">
|
||
<component
|
||
:is="currentFilterCom.component"
|
||
:id="'component' + currentFilterCom.id"
|
||
class="component"
|
||
:style="currentFilterCom.style"
|
||
:element="currentFilterCom"
|
||
:in-draw="false"
|
||
/>
|
||
</filter-dialog>
|
||
<div style="text-align: end !important;margin: 0 15px !important;">
|
||
<span slot="footer">
|
||
<el-button @click="cancelFilter">{{ $t('commons.cancel') }}</el-button>
|
||
<el-button :disabled="!currentFilterCom.options.attrs.fieldId" type="primary" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
|
||
</span>
|
||
</div>
|
||
</el-dialog>
|
||
</el-row>
|
||
</template>
|
||
|
||
<script>
|
||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||
import DeContainer from '@/components/dataease/DeContainer'
|
||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||
import { addClass, removeClass } from '@/utils'
|
||
import FilterGroup from '../filter'
|
||
import ViewSelect from '../ViewSelect'
|
||
import SubjectSetting from '../SubjectSetting'
|
||
import bus from '@/utils/bus'
|
||
import Editor from '@/components/canvas/components/Editor/index'
|
||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||
import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
|
||
import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
|
||
import { mapState } from 'vuex'
|
||
import { uuid } from 'vue-uuid'
|
||
import Toolbar from '@/components/canvas/components/Toolbar'
|
||
import { get } from '@/api/panel/panel'
|
||
|
||
// 引入样式
|
||
import '@/components/canvas/assets/iconfont/iconfont.css'
|
||
import '@/components/canvas/styles/animate.css'
|
||
import '@/components/canvas/styles/reset.css'
|
||
|
||
import { ApplicationContext } from '@/utils/ApplicationContext'
|
||
import FilterDialog from '../filter/filterDialog'
|
||
export default {
|
||
name: 'PanelEdit',
|
||
components: {
|
||
DeMainContainer,
|
||
DeContainer,
|
||
DeAsideContainer,
|
||
FilterGroup,
|
||
ViewSelect,
|
||
Editor,
|
||
Toolbar,
|
||
FilterDialog,
|
||
SubjectSetting
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
editView: false,
|
||
clickNotClose: false,
|
||
showIndex: -1,
|
||
activeName: 'attr',
|
||
reSelectAnimateIndex: undefined,
|
||
filterVisible: false,
|
||
currentWidget: null,
|
||
currentFilterCom: null,
|
||
subjectVisible: false
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
panelInfo() {
|
||
return this.$store.state.panel.panelInfo
|
||
},
|
||
...mapState([
|
||
'componentData',
|
||
'curComponent',
|
||
'isClickComponent',
|
||
'canvasStyleData',
|
||
'curComponentIndex'
|
||
])
|
||
},
|
||
|
||
watch: {
|
||
show(value) {
|
||
if (value && !this.clickNotClose) {
|
||
this.addEventClick()
|
||
}
|
||
if (value) {
|
||
addClass(document.body, 'showRightPanel')
|
||
} else {
|
||
removeClass(document.body, 'showRightPanel')
|
||
}
|
||
},
|
||
panelInfo(newVal, oldVal) {
|
||
this.init(newVal.id)
|
||
}
|
||
},
|
||
created() {
|
||
this.init(this.$store.state.panel.panelInfo.id)
|
||
// this.restore()
|
||
// 全局监听按键事件
|
||
listenGlobalKeyDown()
|
||
},
|
||
mounted() {
|
||
this.insertToBody()
|
||
bus.$on('component-on-drag', () => {
|
||
this.show = false
|
||
})
|
||
|
||
bus.$on('component-dialog-edit', () => {
|
||
this.eidtDialog()
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
const elx = this.$refs.rightPanel
|
||
elx && elx.remove()
|
||
},
|
||
methods: {
|
||
init(panelId) {
|
||
// 如果临时画布有数据 则使用临时画布数据（视图编辑的时候 会保存临时画布数据）
|
||
const componentDataTemp = this.$store.state.panel.componentDataTemp
|
||
const canvasStyleDataTemp = this.$store.state.panel.canvasStyleDataTemp
|
||
if (componentDataTemp && canvasStyleDataTemp) {
|
||
this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
|
||
this.$store.commit('setCanvasStyle', JSON.parse(canvasStyleDataTemp))
|
||
} else if (panelId) {
|
||
get('panel/group/findOne/' + panelId).then(response => {
|
||
this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
|
||
const panelStyle = JSON.parse(response.data.panelStyle)
|
||
this.$store.commit('setCanvasStyle', panelStyle)
|
||
})
|
||
}
|
||
},
|
||
save() {
|
||
|
||
},
|
||
toDir() {
|
||
this.$router.replace('/panel/index')
|
||
},
|
||
showPanel(type) {
|
||
this.show = !this.show
|
||
this.showIndex = type
|
||
},
|
||
addEventClick() {
|
||
window.addEventListener('click', this.closeSidebar)
|
||
},
|
||
closeSidebar(evt) {
|
||
const parent = evt.target.closest('.button-div-class')
|
||
const self = evt.target.closest('.leftPanel')
|
||
// 点击样式按钮 排除
|
||
const stick = evt.target.closest('.el-icon-magic-stick')
|
||
if (!parent && !self && !stick) {
|
||
this.show = false
|
||
window.removeEventListener('click', this.closeSidebar)
|
||
this.showIndex = -1
|
||
}
|
||
},
|
||
insertToBody() {
|
||
this.$nextTick(() => {
|
||
const elx = this.$refs.leftPanel
|
||
const body = document.querySelector('body')
|
||
body.insertBefore(elx, body.firstChild)
|
||
})
|
||
},
|
||
|
||
resetID(data) {
|
||
if (data) {
|
||
data.forEach(item => {
|
||
item.id = uuid.v1()
|
||
})
|
||
}
|
||
return data
|
||
},
|
||
handleDrop(e) {
|
||
e.preventDefault()
|
||
e.stopPropagation()
|
||
let component
|
||
const newComponentId = uuid.v1()
|
||
|
||
const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
|
||
|
||
// 用户视图设置 复制一个模板
|
||
if (componentInfo.type === 'view') {
|
||
componentList.forEach(componentTemp => {
|
||
if (componentTemp.type === 'view') {
|
||
component = deepCopy(componentTemp)
|
||
const propValue = {
|
||
id: newComponentId,
|
||
viewId: componentInfo.id
|
||
}
|
||
component.propValue = propValue
|
||
}
|
||
})
|
||
} else {
|
||
this.currentWidget = ApplicationContext.getService(componentInfo.id)
|
||
|
||
this.currentFilterCom = this.currentWidget.getDrawPanel()
|
||
this.currentFilterCom.style.top = e.offsetY
|
||
this.currentFilterCom.style.left = e.offsetX
|
||
this.currentFilterCom.id = newComponentId
|
||
if (this.currentWidget.filterDialog) {
|
||
this.show = false
|
||
this.openFilterDiolog()
|
||
return
|
||
}
|
||
component = deepCopy(this.currentFilterCom)
|
||
}
|
||
|
||
component.style.top = e.offsetY
|
||
component.style.left = e.offsetX
|
||
component.id = newComponentId
|
||
this.$store.commit('addComponent', { component })
|
||
this.$store.commit('recordSnapshot')
|
||
this.clearCurrentInfo()
|
||
},
|
||
clearCurrentInfo() {
|
||
this.currentWidget = null
|
||
this.currentFilterCom = null
|
||
},
|
||
|
||
handleDragOver(e) {
|
||
e.preventDefault()
|
||
e.dataTransfer.dropEffect = 'copy'
|
||
},
|
||
|
||
handleMouseDown() {
|
||
console.log('handleMouseDown123')
|
||
|
||
this.$store.commit('setClickComponentStatus', false)
|
||
},
|
||
|
||
deselectCurComponent(e) {
|
||
console.log('deselectCurComponent123')
|
||
|
||
if (!this.isClickComponent) {
|
||
this.$store.commit('setCurComponent', { component: null, index: null })
|
||
}
|
||
|
||
// 0 左击 1 滚轮 2 右击
|
||
if (e.button !== 2) {
|
||
this.$store.commit('hideContextMenu')
|
||
}
|
||
},
|
||
openFilterDiolog() {
|
||
this.filterVisible = true
|
||
},
|
||
cancelFilter() {
|
||
this.filterVisible = false
|
||
this.currentWidget = null
|
||
this.clearCurrentInfo()
|
||
},
|
||
sureFilter() {
|
||
const component = deepCopy(this.currentFilterCom)
|
||
// this.$store.commit('addComponent', { component })
|
||
this.$store.commit('setComponentWithId', component)
|
||
this.$store.commit('recordSnapshot')
|
||
this.cancelFilter()
|
||
},
|
||
reFreshComponent(component) {
|
||
this.currentFilterCom = component
|
||
this.$forceUpdate()
|
||
},
|
||
eidtDialog() {
|
||
const serviceName = this.curComponent.serviceName
|
||
this.currentWidget = ApplicationContext.getService(serviceName)
|
||
this.currentFilterCom = this.curComponent
|
||
this.openFilterDiolog()
|
||
},
|
||
closeLeftPanel() {
|
||
this.show = false
|
||
this.beforeDestroy()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ms-aside-container {
|
||
height: calc(100vh - 91px);
|
||
min-width: 40px;
|
||
max-width: 60px;
|
||
border: none;
|
||
}
|
||
|
||
.de-header {
|
||
height: 35px !important;
|
||
border-bottom: 1px solid #E6E6E6;
|
||
}
|
||
|
||
.showLeftPanel {
|
||
overflow: hidden;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.leftPanel-background {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
opacity: 0;
|
||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
||
background: rgba(0, 0, 0, .2);
|
||
z-index: -1;
|
||
}
|
||
|
||
.leftPanel {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
height: calc(100vh - 91px);
|
||
position: fixed;
|
||
top: 91px;
|
||
left: 60px;
|
||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||
transform: translate(100%);
|
||
background: #fff;
|
||
z-index: 1003;
|
||
}
|
||
|
||
.show {
|
||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
||
|
||
.leftPanel-background {
|
||
z-index: 1002;
|
||
opacity: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.leftPanel {
|
||
transform: translate(0);
|
||
}
|
||
}
|
||
|
||
</style>
|