Browse Source

部门选择弹框出来数据有遮挡 issues/I5IWFM

zhangdaiscott 2 years ago
parent
commit
86632ea685

+ 39 - 25
src/components/Modal/src/BasicModal.vue

@@ -24,32 +24,33 @@
       </ModalFooter>
     </template>
 
-    <ModalWrapper
-      :useWrapper="getProps.useWrapper"
-      :footerOffset="wrapperFooterOffset"
-      :fullScreen="fullScreenRef"
-      ref="modalWrapperRef"
-      :loading="getProps.loading"
-      :loading-tip="getProps.loadingTip"
-      :minHeight="getProps.minHeight"
-      :height="getWrapperHeight"
-      :visible="visibleRef"
-      :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-      v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
-      @ext-height="handleExtHeight"
-      @height-change="handleHeightChange"
-    >
-      <!-- update-begin-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
-      <a-row>
-        <a-col :span="24 - commentSpan">
+    <!-- update-begin-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
+    <a-row>
+      <a-col :span="24 - commentSpan" class="jeecg-modal-content">
+        <ModalWrapper
+          :useWrapper="getProps.useWrapper"
+          :footerOffset="wrapperFooterOffset"
+          :fullScreen="fullScreenRef"
+          ref="modalWrapperRef"
+          :loading="getProps.loading"
+          :loading-tip="getProps.loadingTip"
+          :minHeight="getProps.minHeight"
+          :height="getWrapperHeight"
+          :visible="visibleRef"
+          :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
+          v-bind="omit(getProps.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
+          @ext-height="handleExtHeight"
+          @height-change="handleHeightChange"
+        >
           <slot></slot>
-        </a-col>
-        <a-col :span="commentSpan">
-          <slot name="comment"></slot>
-        </a-col>
-      </a-row>
-      <!-- update-end-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
-    </ModalWrapper>
+        </ModalWrapper>
+      </a-col>
+
+      <a-col :span="commentSpan" class="jeecg-comment-outer">
+        <slot name="comment"></slot>
+      </a-col>
+    </a-row>
+    <!-- update-end-author:taoyan date:2022-7-18 for:  modal弹窗 支持评论 slot -->
 
     <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
       <slot :name="item" v-bind="data || {}"></slot>
@@ -256,3 +257,16 @@
     },
   });
 </script>
+<style lang="less">
+  .jeecg-comment-outer {
+    border-left: 1px solid #f0f0f0;
+    .ant-tabs-nav-wrap {
+      /*  text-align: center;*/
+    }
+  }
+  .jeecg-modal-content {
+    > .scroll-container {
+      padding: 14px;
+    }
+  }
+</style>

+ 8 - 3
src/components/Modal/src/components/ModalClose.vue

@@ -12,10 +12,10 @@
     <!-- 是否开启评论区域 -->
     <template v-if="enableComment">
       <Tooltip title="关闭" placement="bottom" v-if="commentSpan > 0">
-        <RightSquareOutlined @click="handleCloseComment" />
+        <RightSquareOutlined @click="handleCloseComment" style="font-size: 16px" />
       </Tooltip>
       <Tooltip title="展开" placement="bottom" v-else>
-        <LeftSquareOutlined @click="handleOpenComment" />
+        <LeftSquareOutlined @click="handleOpenComment" style="font-size: 16px" />
       </Tooltip>
     </template>
 
@@ -62,7 +62,9 @@
       function handleFullScreen(e: Event) {
         e?.stopPropagation();
         e?.preventDefault();
-        emit('fullscreen');
+        if (props.commentSpan == 0 || props.enableComment == false) {
+          emit('fullscreen');
+        }
       }
 
       //update-begin-author:taoyan date:2022-7-18 for: 关闭按钮的区域宽度 取决于是否有其他图标
@@ -82,6 +84,9 @@
       function handleOpenComment(e: Event) {
         e?.stopPropagation();
         e?.preventDefault();
+        if (props.fullScreen == false) {
+          emit('fullscreen');
+        }
         emit('comment', true);
       }