Merge branch 'main' of github.com:dataease/dataease into main

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

@@ -57,7 +57,7 @@ export default {
     customStyle() {
       let style = {}
       if (this.canvasStyleData.openCommonStyle) {
-        if (this.canvasStyleData.panel.backgroundType === 'image'&&this.canvasStyleData.panel.imageUrl) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
             width: '100%',
             height: '100%',
@@ -80,6 +80,7 @@ export default {
   mounted() {
     const _this = this
 
+    debugger
     // 加载数据
     _this.restore()
     const erd = elementResizeDetectorMaker()

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

@@ -128,7 +128,7 @@ export default {
     overflow-y : auto
   }
   .detail-class {
-    width: 100%;
+    width: 300px;
     position: fixed;
     bottom: 0px;
   }

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

@@ -11,7 +11,6 @@
         <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
       </el-col>
     </el-header>
-    <el-main style="padding: 0px">
     <de-container>
       <de-aside-container class="ms-aside-container">
         <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
@@ -45,22 +44,39 @@
             </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">
+        <!--        <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>
+
+      <!--画布区域-->
+      <el-main>
+        <el-drawer
+          title="我是标题"
+          :visible.sync="show"
+          :with-header="false"
+          style="position: absolute;"
+          direction="ltr"
+          :modal="false"
+          :size="drawerSize"
+          :wrapper-closable="false"
+          :close-on-press-escape="false"
+          :modal-append-to-body="true"
+        >
           <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>
+        </el-drawer>
 
-        <!--画布区域-->
-        <de-main-container>
         <div
-            class="content"
+          class="content this_canvas"
           @drop="handleDrop"
           @dragover="handleDragOver"
           @mousedown="handleMouseDown"
@@ -68,9 +84,8 @@
         >
           <Editor />
         </div>
-        </de-main-container>
-      </de-container>
       </el-main>
+    </de-container>
 
     <el-dialog
       v-if="filterVisible && panelInfo.id"
@@ -138,6 +153,8 @@ export default {
   },
   data() {
     return {
+      drawerSize: '300px',
+      visible: false,
       show: false,
       editView: false,
       clickNotClose: false,
@@ -186,7 +203,7 @@ export default {
     listenGlobalKeyDown()
   },
   mounted() {
-    this.insertToBody()
+    // this.insertToBody()
     bus.$on('component-on-drag', () => {
       this.show = false
     })
@@ -222,7 +239,10 @@ export default {
       this.$router.replace('/panel/index')
     },
     showPanel(type) {
+      debugger
+      if (this.showIndex === -1 || this.showIndex === type) {
         this.show = !this.show
+      }
       this.showIndex = type
     },
     addEventClick() {
@@ -230,7 +250,7 @@ export default {
     },
     closeSidebar(evt) {
       const parent = evt.target.closest('.button-div-class')
-      const self = evt.target.closest('.leftPanel')
+      const self = evt.target.closest('.el-drawer__wrapper')
       // 点击样式按钮 排除
       const stick = evt.target.closest('.el-icon-magic-stick')
       if (!parent && !self && !stick) {
@@ -239,13 +259,13 @@ export default {
         this.showIndex = -1
       }
     },
-    insertToBody() {
-      this.$nextTick(() => {
-        const elx = this.$refs.leftPanel
-        const body = document.querySelector('body')
-        body.insertBefore(elx, body.firstChild)
-      })
-    },
+    // insertToBody() {
+    //   this.$nextTick(() => {
+    //     const elx = this.$refs.leftPanel
+    //     const body = document.querySelector('body')
+    //     body.insertBefore(elx, body.firstChild)
+    //   })
+    // },
 
     resetID(data) {
       if (data) {
@@ -422,4 +442,19 @@ export default {
   }
 }
 
+.this_canvas{
+  height: calc(100vh - 91px);
+  overflow: auto;
+}
+.el-main{
+  height: calc(100vh - 91px);
+  padding: 0!important;
+  overflow: auto;
+  position: relative;
+}
+
+.el-main >>> .el-drawer__wrapper{
+  width: 310px!important;
+}
+
 </style>