fix: 子表的卡片样式优化

src/views/flow/stFormDesign/packages/PopUpMapping/index.vue

@@ -50,7 +50,7 @@
               <template #title>
                 <span>Key格式</span>
               </template>
-              <span><QuestionOutlined />查询Key</span>
+              <span><QuestionCircleOutlined />查询Key</span>
             </a-popover>
             <a-input placeholder="请输入查询Key" v-model:value="qItm.queryKey"></a-input>
 

src/views/flow/stFormDesign/packages/StBatch/module/StTableCard.vue

@@ -4,7 +4,6 @@
       <div class="mobile-table" v-if="list.length === 0 && firstData.length === 0">
         <a-empty></a-empty>
       </div>
-
       <div class="mobile-table" v-for="(item, rowIdx) in list.length === 0 ? firstData : list" :key="rowIdx">
         <a-descriptions :column="3">
           <template #title>
@@ -18,6 +17,7 @@
             </a-button>
           </template>
           <a-descriptions-item
+              :span="getSpan(col)"
               v-for="(col, colIdx) in columns.filter((v) => !['sequence_index_number', 'dynamic-opr-button'].includes(v.dataIndex))"
               :key="colIdx"
           >
@@ -128,7 +128,18 @@ const handleLoadMore = () => {
   refreshTableCard();
   pageNum.value++;
 };
+const getSpan = (col) => {
+  if (!col.width || col.width == '300px') {
+    return 1
+  } else if (col.width == '600px') {
+    return 2
+  } else if (col.width == '900px') {
+    return 3
+  } else {
+    return 1
+  }
 
+}
 const refreshTableCard = () => {
   const startIndex = (pageNum.value - 1) * pageSize.value;
   const endIndex = startIndex + pageSize.value;

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

@@ -83,10 +83,22 @@
         <a-form-item v-if="typeof options.width !== 'undefined'&&!isInBatchTable" label='宽度'>
           <a-input placeholder='请输入' v-model:value='options.width'/>
         </a-form-item>
+        <a-tooltip placement="topLeft">
+          <template #title>
+            <div>示例：300px</div>
+            <div>※子表卡片样式：通过设置300px的整数倍来设置宽度（300px为默认每行三列，600px占两列，900px将占一整行）</div>
+          </template>
+          <a-form-item v-if="isInBatchTable">
+            <template #label>
+              <span style="display: inline-flex; align-items: center;">
+                <QuestionCircleOutlined style="margin-right: 4px;"/>
+                宽度
+              </span>
+            </template>
+            <a-input placeholder="请输入" v-model:value="options.childWidth"/>
+          </a-form-item>
+        </a-tooltip>
 
-        <a-form-item v-if="isInBatchTable" label='宽度（示例：300px）'>
-          <a-input placeholder='请输入' v-model:value='options.childWidth'/>
-        </a-form-item>
 
         <a-form-item v-if="typeof options.height !== 'undefined'" label='高度'>
           <a-input-number v-model:value='options.height'/>

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

@@ -40,23 +40,22 @@
               @change="dragChange"
           >
             <template #item="{ element, index }">
-              <transition-group tag="div" name="list">
-                <formNode
-                    :key="element.key"
-                    class="drag-move batch-drag-move"
-                    :selectItem.sync="selectItem"
-                    :record="element"
-                    :hideModel="hideModel"
-                    :config="config"
-                    :childTableFieldRecord="record"
-                    @handleSelectItem="handleSelectItem"
-                    @handleColAdd="handleColAdd"
-                    @handleCopy="$emit('handleCopy')"
-                    @handleChange="$emit('handleChange')"
-                    @handleShowRightMenu="handleShowRightMenu"
-                    @handleDelete="$emit('handleDelete')"
-                />
-              </transition-group>
+              <formNode
+                  :key="element.key"
+                  :style="{ width: element.options.childWidth || '300px' }"
+                  class="drag-move"
+                  :selectItem.sync="selectItem"
+                  :record="element"
+                  :hideModel="hideModel"
+                  :config="config"
+                  :childTableFieldRecord="record"
+                  @handleSelectItem="handleSelectItem"
+                  @handleColAdd="handleColAdd"
+                  @handleCopy="$emit('handleCopy')"
+                  @handleChange="$emit('handleChange')"
+                  @handleShowRightMenu="handleShowRightMenu"
+                  @handleDelete="$emit('handleDelete')"
+              />
             </template>
           </draggable>
         </a-form-item>
@@ -517,10 +516,7 @@ export default {
 
 .batch-draggable-box {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 
-  .batch-drag-move {
-    width: 350px;
-  }
 }
 </style>