fix: 流程优化

src/views/flow/stFormDesign/packages/StFormDesign/module/layoutItem.vue

@@ -40,10 +40,15 @@
               @change="dragChange"
           >
             <template #item="{ element, index }">
+
               <formNode
                   :key="element.key"
                   :style="{ width: element.options.childWidth || '300px' }"
-                  class="drag-move"
+                  :class="{
+                    'drag-move': true,
+                    'span-2': element.options.childWidth === '600px',
+                    'span-3': element.options.childWidth === '900px'
+                  }"
                   :selectItem.sync="selectItem"
                   :record="element"
                   :hideModel="hideModel"
@@ -117,7 +122,7 @@
                 @start="$emit('dragStart', $event, column.list)"
                 @add="$emit('handleColAdd', $event, column.list)"
             >
-              <transition-group tag="div" name="list" class="list-main">
+              <div class="list-main">
                 <formNode
                     v-for="item in column.list"
                     :key="item.key"
@@ -133,7 +138,7 @@
                     @handleShowRightMenu="handleShowRightMenu"
                     @handleDelete="$emit('handleDelete')"
                 />
-              </transition-group>
+              </div>
             </draggable>
           </div>
         </a-form-item>
@@ -178,7 +183,7 @@
                   @change="dragChange"
               >
                 <template #item="{ element, index }">
-                  <transition-group tag="div" name="list" class="list-main">
+                  <div class="list-main">
                     <layoutItem
                         :key="element.key"
                         class="drag-move"
@@ -195,7 +200,7 @@
                         @handleShowRightMenu="handleShowRightMenu"
                         @handleDelete="$emit('handleDelete')"
                     />
-                  </transition-group>
+                  </div>
                 </template>
               </draggable>
             </div>
@@ -236,7 +241,7 @@
                 @change="dragChange"
             >
               <template #item="{ element, index }">
-                <transition-group tag="div" name="list" class="list-main">
+                <div class="list-main">
                   <layoutItem
                       :key="element.key"
                       class="drag-move"
@@ -253,7 +258,7 @@
                       @handleShowRightMenu="handleShowRightMenu"
                       @handleDelete="$emit('handleDelete')"
                   />
-                </transition-group>
+                </div>
               </template>
             </draggable>
           </a-col>
@@ -292,7 +297,7 @@
                 @change="dragChange"
             >
               <template #item="{ element, index }">
-                <transition-group tag="div" name="list" class="list-main">
+                <div class="list-main">
                   <layoutItem
                       :key="element.key"
                       class="drag-move"
@@ -310,7 +315,7 @@
                       @handleShowRightMenu="handleShowRightMenu"
                       @handleDelete="$emit('handleDelete')"
                   />
-                </transition-group>
+                </div>
               </template>
             </draggable>
           </div>
@@ -366,7 +371,7 @@
                   @change="dragChange"
               >
                 <template #item="{ element, index }">
-                  <transition-group tag="div" name="list" class="list-main">
+                  <div class="list-main">
                     <layoutItem
                         :key="element.key"
                         class="drag-move"
@@ -383,7 +388,7 @@
                         @handleShowRightMenu="handleShowRightMenu"
                         @handleDelete="$emit('handleDelete')"
                     />
-                  </transition-group>
+                  </div>
                 </template>
               </draggable>
             </td>
@@ -515,8 +520,22 @@ export default {
 }
 
 .batch-draggable-box {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 每行3列 */
+  gap: 5px; /* 设置子元素之间的间距 */
+}
+
+.batch-draggable-box > * {
+  grid-column: span 1; /* 默认占用1列 */
+}
+
+/* 如果某个子元素需要占用2列 */
+.batch-draggable-box > .span-2 {
+  grid-column: span 2; /* 占用2列 */
+}
 
+/* 如果某个子元素需要占用3列 */
+.batch-draggable-box > .span-3 {
+  grid-column: span 3; /* 占用3列 */
 }
 </style>