feat: 审批详情页-流程图和流转记录的高度会随着父容器高度自动调整

Author: GoldenZqqq

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

@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
+    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
   </el-card>
 </template>
 <script lang="ts" setup>
@@ -45,4 +45,9 @@ watch(
   width: 100%;
   margin-bottom: 20px;
 }
+
+:deep(.process-viewer) {
+  height: 100% !important;
+  min-height: 500px;
+}
 </style>

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

@@ -4,6 +4,7 @@
       :flow-node="simpleModel"
       :tasks="tasks"
       :process-instance="processInstance"
+      class="process-viewer"
     />
   </div>
 </template>
@@ -151,3 +152,10 @@ const setSimpleModelNodeTaskStatus = (
   )
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.process-viewer) {
+  height: 100% !important;
+  min-height: 500px;
+}
+</style>

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

@@ -319,6 +319,15 @@ $process-header-height: 194px;
         $process-header-height - 40px
     );
     overflow: auto;
+
+    :deep(.box-card) {
+      height: 100%;
+
+      .el-card__body {
+        height: 100%;
+        padding: 0;
+      }
+    }
   }
 }