fix: 流程审核详情页-流程图未能撑满剩余区域bug修复

Author: GoldenZqqq

src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

@@ -40,14 +40,22 @@ watch(
   }
 )
 </script>
-<style>
+<style lang="scss" scoped>
 .box-card {
+  height: 100%;
   width: 100%;
-  margin-bottom: 20px;
-}
+  margin-bottom: 0;
+
+  :deep(.el-card__body) {
+    height: 100%;
+    padding: 0;
+  }
 
-:deep(.process-viewer) {
-  height: 100% !important;
-  min-height: 500px;
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>

src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading" class="mb-20px">
+  <div v-loading="loading" class="process-viewer-container">
     <SimpleProcessViewer
       :flow-node="simpleModel"
       :tasks="tasks"
@@ -154,8 +154,15 @@ const setSimpleModelNodeTaskStatus = (
 </script>
 
 <style lang="scss" scoped>
-:deep(.process-viewer) {
-  height: 100% !important;
-  min-height: 500px;
+.process-viewer-container {
+  height: 100%;
+  width: 100%;
+  
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>

src/views/bpm/processInstance/detail/index.vue

@@ -319,9 +319,12 @@ $process-header-height: 194px;
         $process-header-height - 40px
     );
     overflow: auto;
+    display: flex;
+    flex-direction: column;
 
     :deep(.box-card) {
       height: 100%;
+      flex: 1;
 
       .el-card__body {
         height: 100%;