优化代码 弹框表单详情 当流程表单过长时候增加对应往上往下跳转按钮并内容在弹框内滚动

src/views/bpm/model/CategoryDraggableModel.vue

@@ -254,8 +254,32 @@
   </Dialog>
 
   <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" :fullscreen="true" v-model="formDetailVisible">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  <Dialog title="表单详情" :fullscreen="false" v-model="formDetailVisible" width="800" class="form-detail-dialog">
+    <div class="form-detail-container relative" @scroll="handleScroll">
+      <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+    </div>
+    
+    <!-- 将滚动按钮组移到 Dialog 组件内，但在 form-detail-container 外 -->
+    <div class="scroll-buttons-overlay">
+      <div 
+        v-show="showTopBtn"
+        class="scroll-btn"
+        @click="scrollToTop"
+      >
+        <el-icon :size="20">
+          <ArrowUpBold />
+        </el-icon>
+      </div>
+      <div 
+        v-show="showBottomBtn"
+        class="scroll-btn"
+        @click="scrollToBottom"
+      >
+        <el-icon :size="20">
+          <ArrowDownBold />
+        </el-icon>
+      </div>
+    </div>
   </Dialog>
 </template>
 
@@ -274,6 +298,8 @@ import { cloneDeep, isEqual } from 'lodash-es'
 import { useTagsView } from '@/hooks/web/useTagsView'
 import { useDebounceFn } from '@vueuse/core'
 import { subString } from '@/utils/index'
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
+import { ElBacktop } from 'element-plus'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -609,9 +635,109 @@ watchEffect(() => {
     isExpand.value = false
   }
 })
+
+// 添加顶部按钮显示控制
+const showTopBtn = ref(false)
+
+// 控制底部按钮显示
+const showBottomBtn = ref(false)
+
+// 修改滚动事件处理
+const handleScroll = () => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    const { scrollTop, scrollHeight, clientHeight } = container
+    // 当滚动到一定距离时显示顶部按钮
+    showTopBtn.value = scrollTop > 100
+    // 当未滚动到底部时显示底部按钮
+    showBottomBtn.value = scrollTop + clientHeight < scrollHeight - 10
+  }
+}
+
+// 添加滚动到顶部方法
+const scrollToTop = () => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 添加滚动到底部方法
+const scrollToBottom = () => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 在组件挂载后添加滚动监听
+onMounted(() => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.addEventListener('scroll', handleScroll)
+  }
+})
+
+// 在组件卸载前移除滚动监听
+onUnmounted(() => {
+  const container = document.querySelector('.form-detail-container')
+  if (container) {
+    container.removeEventListener('scroll', handleScroll)
+  }
+})
 </script>
 
 <style lang="scss">
+.form-detail-dialog.el-dialog {
+  margin: 5vh auto !important;
+  
+  .el-dialog__body {
+    position: relative;
+    padding: 0;
+    height: 70vh; // 设置固定高度
+    max-height: 800px;
+  }
+
+  // 添加遮罩层按钮样式
+  .scroll-buttons-overlay {
+    position: fixed;
+    right: calc(50% - 400px - 60px); // 弹框宽度的一半(400px)加上按钮到弹框的距离(60px)
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 2001;
+
+    .scroll-btn {
+      background-color: var(--el-color-primary);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+      cursor: pointer;
+      transition: all 0.3s;
+      opacity: 0.8;
+
+      &:hover {
+        background-color: var(--el-color-primary);
+        opacity: 1;
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+
 .rename-dialog.el-dialog {
   padding: 0 !important;
 
@@ -648,4 +774,26 @@ watchEffect(() => {
     transform: translateZ(0);
   }
 }
+
+.form-detail-container {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  position: relative;
+  
+  // 保留滚动条样式
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--el-color-primary-light-5);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #f5f7fa;
+  }
+}
 </style>