forked from github/dataease
Merge remote-tracking branch 'origin/main' into main
# Conflicts: # frontend/src/components/canvas/components/Editor/PreviewEject.vue
This commit is contained in:
commit
09b772bc18
@ -41,7 +41,6 @@ export default {
|
||||
]),
|
||||
methods: {
|
||||
edit() {
|
||||
debugger
|
||||
// 编辑时临时保存 当前修改的画布
|
||||
localStorage.setItem('canvasDataEditTmp', JSON.stringify(this.componentData))
|
||||
localStorage.setItem('canvasStyleEditTmp', JSON.stringify(this.canvasStyleData))
|
||||
|
@ -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) {
|
||||
|
@ -87,7 +87,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
closePanelEdit() {
|
||||
debugger
|
||||
bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
|
||||
},
|
||||
goFile() {
|
||||
|
@ -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 => {
|
||||
|
@ -22,7 +22,8 @@ const defaultOptions = {
|
||||
value: ''
|
||||
},
|
||||
defaultClass: 'time-filter',
|
||||
component: 'de-date'
|
||||
component: 'de-date',
|
||||
filterDialog: true
|
||||
}
|
||||
|
||||
class TimeYearServiceImpl extends WidgetService {
|
||||
|
@ -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;;
|
||||
|
@ -56,7 +56,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
drawEcharts() {
|
||||
// debugger
|
||||
const chart = this.chart
|
||||
let chart_option = {}
|
||||
// type
|
||||
|
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
|
169
frontend/src/views/panel/filter/filterDialog.vue
Normal file
169
frontend/src/views/panel/filter/filterDialog.vue
Normal 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>
|
@ -25,7 +25,6 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
bus.$on('PanelSwitchComponent', (c) => {
|
||||
debugger
|
||||
console.log(c)
|
||||
this.param = c.param
|
||||
switch (c.name) {
|
||||
|
Loading…
Reference in New Issue
Block a user