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

frontend/src/components/DeDrag/index.vue

@@ -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',

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -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',

frontend/src/components/canvas/components/Editor/index.vue

@@ -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)
     },

frontend/src/components/canvas/custom-component/DeVideo.vue

@@ -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

frontend/src/components/dataease/DeOutWidget.vue

 <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;

frontend/src/views/chart/group/Group.vue

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

frontend/src/views/panel/edit/index.vue

@@ -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

frontend/src/views/panel/filter/filterDialog.vue

@@ -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)
     }

frontend/src/views/panel/list/PanelViewShow.vue

@@ -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