预览弹出方式调整

@@ -478,7 +478,7 @@
     </template>
   </el-dialog>
 
-  <el-dialog class="preview-dialog" v-model="state.dialogPreviewVisible" title="预览节点流程" width="100%" center style="margin-top: 0; margin-bottom: 0;">
+  <!--<el-dialog class="preview-dialog" v-model="state.dialogPreviewVisible" title="预览节点流程" width="100%" center style="margin-top: 0; margin-bottom: 0;">
     <div class="preview-container" :style="{height: state.window_height}">
       <vue-flow-editor-form
         ref="editor1"
@@ -499,11 +499,42 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <!-- <el-button @click="state.dialogPreviewVisible = false">取消</el-button> -->
+        <!~~ <el-button @click="state.dialogPreviewVisible = false">取消</el-button> ~~>
         <el-button color="#009688" @click="state.dialogPreviewVisible = false">关闭</el-button>
       </span>
     </template>
-  </el-dialog>
+  </el-dialog>-->
+
+  <el-drawer
+    v-model="state.dialogPreviewVisible"
+    title="预览节点流程"
+    direction="btt"
+    size="90%"
+    append-to-body
+  >
+    <!-- <div class="preview-container" :style="{height: state.window_height}"> -->
+    <div class="preview-container">
+      <vue-flow-editor-form
+        ref="editor1"
+        :height="state.window_height"
+        :data="flowData"
+        :miniMap="showMiniMap"
+        :onRef="onRef1"
+        :multipleSelect="showMultipleSelect"
+        :loading="state.editorLoading"
+        @click-canvas="onClickCanvasPreview"
+        @click-node="onClickNodePreview"
+        :controlConfig="state.controlConfig"
+        :toolbarButtonHandler="toolbarButtonHandler"
+      ></vue-flow-editor-form>
+    </div>
+    <div class="preview-detail-container">
+      <iframe :src="state.preview_form_url" width="100%" height="100%" style="border: 0;"></iframe>
+    </div>
+    <!-- <div>
+      <el-button color="#009688" @click="state.dialogPreviewVisible = false">关闭</el-button>
+    </div> -->
+  </el-drawer>
 </template>
 
 <script lang="ts">
@@ -675,6 +706,7 @@ export default {
       show_preview: false,
       window_height: '500px',
       preview_form_url: '',
+      drawer: false,
     });
 
     const setNodeTree = (id: string, data: object) => {
@@ -917,7 +949,7 @@ export default {
         }, 500);
       });
       // 适口高度
-      state.window_height = $(window).height() - 150 + 'px';
+      state.window_height = $(window).height() - 210 + 'px';
     });
 
     /**
@@ -2644,11 +2676,16 @@ body {
   z-index: 9;
   width: 30vw;
   height: 80vh;
-  top: 10vh;
+  top: 18vh;
   right: 20px;
   border: 1px solid #c3c3c3;
   background: #fff;
   /* padding: 1rem; */
   /* border-radius: 5px; */
 }
+
+.el-drawer.btt {
+  -webkit-animation: none !important;
+  animation: none !important;
+}
 </style>