Merge remote-tracking branch 'origin/main' into main

# Conflicts:
#	frontend/src/components/canvas/components/Editor/PreviewEject.vue
This commit is contained in:
wangjiahao 2021-04-07 11:15:32 +08:00
commit 09b772bc18
10 changed files with 211 additions and 13 deletions

View File

@ -41,7 +41,6 @@ export default {
]),
methods: {
edit() {
debugger
//
localStorage.setItem('canvasDataEditTmp', JSON.stringify(this.componentData))
localStorage.setItem('canvasStyleEditTmp', JSON.stringify(this.canvasStyleData))

View File

@ -134,7 +134,6 @@ export default {
this.isShowArea = true
const move = (moveEvent) => {
debugger
this.width = Math.abs(moveEvent.clientX - startX)
this.height = Math.abs(moveEvent.clientY - startY)
if (moveEvent.clientX < startX) {

View File

@ -87,7 +87,6 @@ export default {
},
methods: {
closePanelEdit() {
debugger
bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
},
goFile() {

View File

@ -4,9 +4,9 @@
<main>
<!-- 左侧组件列表 -->
<!-- <section class="left">-->
<!-- <ComponentList />-->
<!-- </section>-->
<!-- <section class="left">-->
<!-- <ComponentList />-->
<!-- </section>-->
<!-- 中间画布 -->
<section class="center">
<div
@ -80,7 +80,6 @@ export default {
e.preventDefault()
e.stopPropagation()
debugger
let component
const id = e.dataTransfer.getData('componentId')
componentList.forEach(componentTemp => {

View File

@ -22,7 +22,8 @@ const defaultOptions = {
value: ''
},
defaultClass: 'time-filter',
component: 'de-date'
component: 'de-date',
filterDialog: true
}
class TimeYearServiceImpl extends WidgetService {

View File

@ -85,6 +85,20 @@ div:focus {
}
}
.de-filter-dialog {
min-width: 500px !important;
width: 50% !important;
.el-dialog__header{
background-color: #f4f4f5;
padding: 10px 20px !important;
}
.el-dialog__body{
padding: 1px 20px !important;
}
}
.de-search-header {
.el-tabs__header{
display: none !important;;

View File

@ -56,7 +56,6 @@ export default {
},
methods: {
drawEcharts() {
// debugger
const chart = this.chart
let chart_option = {}
// type

View File

@ -68,6 +68,14 @@
</de-main-container>
</de-container>
<el-dialog
title="过滤组件"
:visible.sync="filterVisible"
custom-class="de-filter-dialog"
>
<filter-dialog />
</el-dialog>
</el-container>
</template>
@ -94,6 +102,7 @@ import '@/components/canvas/styles/animate.css'
import 'element-ui/lib/theme-chalk/index.css'
import '@/components/canvas/styles/reset.css'
import { ApplicationContext } from '@/utils/ApplicationContext'
import FilterDialog from '../filter/filterDialog'
export default {
name: 'PanelEdit',
components: {
@ -103,7 +112,8 @@ export default {
FilterGroup,
ViewSelect,
Editor,
Toolbar
Toolbar,
FilterDialog
},
data() {
return {
@ -112,7 +122,8 @@ export default {
clickNotClose: false,
showIndex: -1,
activeName: 'attr',
reSelectAnimateIndex: undefined
reSelectAnimateIndex: undefined,
filterVisible: false
}
},
@ -249,7 +260,13 @@ export default {
}
})
} else {
component = deepCopy(ApplicationContext.getService(componentInfo.id))
const wd = ApplicationContext.getService(componentInfo.id)
if (wd.filterDialog) {
this.show = false
this.openFilterDiolog()
return
}
component = deepCopy(wd)
}
component.style.top = e.offsetY
@ -282,6 +299,9 @@ export default {
if (e.button !== 2) {
this.$store.commit('hideContextMenu')
}
},
openFilterDiolog() {
this.filterVisible = true
}
}

View File

@ -0,0 +1,169 @@
<template>
<de-container class="de-dialog-container">
<de-aside-container class="ms-aside-container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :lazy="true" class="de-tab" label="按表选择" name="dataset">按表选择</el-tab-pane>
<el-tab-pane :lazy="true" class="de-tab" label="按组件选择" name="assembly">按组件选择</el-tab-pane>
</el-tabs>
</de-aside-container>
<!--画布区域-->
<de-main-container class="ms-main-container">
<div>
<el-row>
<el-col :span="24">
<div class="filter-field">
<div class="field-content">
<div class="field-content-left">
<div class="field-content-text">字段</div>
</div>
<div class="field-content-right">请拖入左侧字段</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="filter-options-left">
<el-switch
active-text="单选"
inactive-text="多选"
/>
</div>
</el-col>
<el-col :span="16"><div class="filter-options-right">
<el-checkbox disabled>备选项1</el-checkbox>
<el-checkbox disabled>备选项</el-checkbox>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="filter-content" />
</el-col>
</el-row>
</div>
</de-main-container>
</de-container>
</template>
<script>
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
export default {
name: 'FilterDialog',
components: {
DeMainContainer,
DeContainer,
DeAsideContainer
},
data() {
return {
activeName: 'dataset'
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.de-dialog-container {
height: 50vh !important;
}
.ms-aside-container {
width: 40% !important;
min-width: 230px !important;
max-width: 260px !important;
height: 100%;
min-height: 400px;
padding: 5px;
border: none;
}
.ms-main-container {
height: 100%;
min-height: 400px;
}
.filter-field {
// background: #99a9bf;
border-radius: 4px;
height: 45px;
.field-content {
position: relative;
display: table;
width: 100%;
height: 100%;
white-space: nowrap;
.field-content-left {
width: 50px;
max-width: 50px;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 8px;
height: 100%;
border-right: none;
border: 1px solid #E6E6E6;
.field-content-text {
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
word-break: break-all;
}
}
.field-content-right {
border-left: none;
color: #9ea6b2;
border: 1px solid #E6E6E6;
width: 0%;
max-width: 0%;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 0 0 0 10px;
height: 100%;
}
}
}
.filter-options-left {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
height: 50px;
}
.filter-options-right {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
height: 50px;
}
.filter-content {
height: calc(50vh - 150px);
top: 160px;
background: #99a9bf;
}
</style>

View File

@ -25,7 +25,6 @@ export default {
},
mounted() {
bus.$on('PanelSwitchComponent', (c) => {
debugger
console.log(c)
this.param = c.param
switch (c.name) {