github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 19:42:56 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor: 过滤组件样式边界优化

Browse Source
This commit is contained in:
wangjiahao 2021-11-29 19:18:12 +08:00
parent 079f24d7c8
commit 02bcadae10
9 changed files with 56 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/DeDrag/index.vue
View File

@ -30,7 +30,7 @@
:style="mainSlotStyle"
>
<edit-bar v-if="editBarShow" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @resizeView="resizeView" @linkJumpSet="linkJumpSet" />
<mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
<mobile-check-bar v-if="mobileCheckBarShow" :element="element" @amRemoveItem="amRemoveItem" />
<div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
<div
v-for="(handlei, indexi) in actualHandles"
@ -536,7 +536,7 @@ export default {
return this.$store.state.curComponent
},
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix ? this.componentGap : 0
return this.element.auxiliaryMatrix && this.element.type !== 'custom' ? this.componentGap : 0
},
...mapState([
'editor',

2
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -69,7 +69,7 @@ export default {
return this.curComponent && this.config === this.curComponent
},
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix ? this.componentGap : 0
return this.config.auxiliaryMatrix ? this.componentGap : 0
},
...mapState([
'mobileLayoutStatus',

55
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -58,7 +58,7 @@
>
<component
:is="item.component"
v-if="item.type==='v-text'"
v-if="renderOk&&item.type==='v-text'"
:id="'component' + item.id"
ref="wrapperChild"
class="component"
@ -71,7 +71,7 @@
@input="handleInput"
/>
<de-out-widget
v-else-if="item.type==='custom'"
v-else-if="renderOk&&item.type==='custom'"
:id="'component' + item.id"
ref="wrapperChild"
class="component"
@ -83,7 +83,7 @@
/>
<component
:is="item.component"
v-else-if="item.type==='other'"
v-else-if="renderOk&&item.type==='other'"
:id="'component' + item.id"
ref="wrapperChild"
class="component"
@ -95,7 +95,7 @@
/>
<component
:is="item.component"
v-else
v-else-if="renderOk"
:id="'component' + item.id"
ref="wrapperChild"
class="component"
@ -327,6 +327,7 @@ function init() {
const vm = this
recalcCellWidth.call(this)
resetPositionBox.call(this)
// initPosition(this)
let i = 0
const timeid = setInterval(function() {
if (i >= vm.yourList.length) {
@ -470,6 +471,15 @@ function removeItem(index) {
this.yourList.splice(index, 1, {})
}
function initPosition(_this) {
_this.yourList.forEach(item => {
checkItemPosition.call(_this, item, {
x: item.x,
y: item.y
})
})
}
function addItem(item, index) {
// console.log('addItem')
if (index < 0) {
@ -807,7 +817,7 @@ export default {
},
data() {
return {
psDebug: false, // 定位调试模式
psDebug: true, // 定位调试模式
editorX: 0,
editorY: 0,
start: { // 选中区域的起点
@ -995,41 +1005,6 @@ export default {
e.preventDefault()
}
this.hideArea()
// 获取编辑器的位移信息，每次点击时都需要获取一次。主要是为了方便开发时调试用。
const rectInfo = this.editor.getBoundingClientRect()
this.editorX = rectInfo.x
this.editorY = rectInfo.y
const startX = e.clientX
const startY = e.clientY
this.start.x = startX - this.editorX
this.start.y = startY - this.editorY
// 展示选中区域
this.isShowArea = true
const move = (moveEvent) => {
this.width = Math.abs(moveEvent.clientX - startX)
this.height = Math.abs(moveEvent.clientY - startY)
if (moveEvent.clientX < startX) {
this.start.x = moveEvent.clientX - this.editorX
}
if (moveEvent.clientY < startY) {
this.start.y = moveEvent.clientY - this.editorY
}
}
const up = (e) => {
document.removeEventListener('mousemove', move)
document.removeEventListener('mouseup', up)
if (e.clientX === startX && e.clientY === startY) {
this.hideArea()
return
}
this.createGroup()
}
document.addEventListener('mousemove', move)
document.addEventListener('mouseup', up)
// 挤占式画布设计
this.containerMouseDown(e)
},

2
frontend/src/components/canvas/custom-component/DeVideo.vue
View File

@ -66,7 +66,7 @@ export default {
return (this.element.optStatus.dragging || this.element.optStatus.resizing)
},
curGap() {
return this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix ? this.componentGap : 0
return this.element.auxiliaryMatrix ? this.componentGap : 0
},
player() {
return this.$refs.videoPlayer.player

60
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -1,31 +1,29 @@
<template>
<div class="outside-container">
<div ref="myContainer" class="my-container">
<div ref="conditionMain" class="condition-main" :class="mainClass">
<div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
<div class="condition-title-absolute">
<div class="first-title">
<div class="span-container">
<span ref="deTitle">{{ element.options.attrs.title }}</span>
</div>
<div ref="myContainer" class="my-container">
<div ref="conditionMain" class="condition-main" :class="mainClass">
<div v-if="element.options.attrs.title" ref="deTitleContainer" class="condition-title">
<div class="condition-title-absolute">
<div class="first-title">
<div class="span-container">
<span ref="deTitle">{{ element.options.attrs.title }}</span>
</div>
</div>
</div>
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
<div class="condition-content-container">
<div class="first-element">
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
<component
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
:in-screen="inScreen"
/>
</div>
</div>
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'">
<div class="condition-content-container">
<div class="first-element">
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner">
<component
:is="element.component"
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
:in-screen="inScreen"
/>
</div>
</div>
</div>
@ -99,16 +97,12 @@ export default {
</script>
<style lang="scss" scoped>
.outside-container {
width: 100%;
height: 100%;
}
.my-container {
position: absolute;
overflow: auto;
inset: 0px;
}
.condition-main {
.ccondition-main {
position: absolute;
overflow: auto;
inset: 0px;
@ -162,11 +156,11 @@ export default {
height: 100%;
}
.first-element-contaner {
width: 100%;
width: calc(100% - 10px);
background: initial;
position:absolute;
bottom: 0px;
margin: 0 0px;
bottom: 5px;
margin: 0 4px;
div {
width: 100%;
}
@ -174,7 +168,7 @@ export default {
.first-element-grid-contaner {
background: #fff;
border: 1px solid #d7dae2;
top: 0px;
top: 5px;
}
.condition-main-line {
height: 40px !important;

4
frontend/src/views/chart/group/Group.vue
View File

@ -447,9 +447,9 @@ export default {
mounted() {
if (this.mountedInit) {
this.treeNode(true)
this.refresh()
this.getChartGroupTree()
}
this.refresh()
this.getChartGroupTree()
},
methods: {
clickAdd(param) {

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

@ -523,7 +523,7 @@ export default {
const xuanfuanniu = evt.target.closest('.icon-xuanfuanniu')
const shujujuzhen = evt.target.closest('.icon-shujujuzhen')
const suffix = evt.target.closest('.el-input__suffix')
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen&&!suffix) {
if (!parent && !self && !stick && !xuanfuanniu && !shujujuzhen && !suffix) {
this.show = false
window.removeEventListener('click', this.closeSidebar)
this.showIndex = -1
@ -649,21 +649,22 @@ export default {
this.beforeDialogValue = []
this.filterVisible = true
},
cancelFilter() {
closeFilter() {
this.beforeDialogValue = []
this.filterVisible = false
this.currentWidget = null
this.clearCurrentInfo()
},
cancelFilter() {
this.closeFilter()
bus.$emit('onRemoveLastItem')
},
sureFilter() {
this.currentFilterCom.options.value = []
const component = deepCopy(this.currentFilterCom)
// this.$store.commit('addComponent', { component })
this.$store.commit('setComponentWithId', component)
this.$store.commit('recordSnapshot', 'sureFilter')
this.cancelFilter()
this.closeFilter()
},
reFreshComponent(component) {
this.currentFilterCom = component

1
frontend/src/views/panel/filter/filterDialog.vue
View File

@ -663,6 +663,7 @@ export default {
showTitleChange(value) {
if (!value) {
this.componentInfo.options.attrs.title = ''
this.componentInfo.style.backgroundColor = ''
}
this.$emit('re-fresh-component', this.componentInfo)
}

2
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -304,7 +304,7 @@ export default {
}
},
changePdfTemplate() {
this.pdfTemplateContent = this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent
this.pdfTemplateContent = this.pdfTemplateAll[this.pdfTemplateSelectedIndex] ? this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent : ''
},
closePreExport() {
this.pdfExportShow = false