fix:【流程引擎】表格卡片

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

@@ -1,91 +1,83 @@
 <template>
   <div class="table-card">
     <div class="mobile-table-content">
+      <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-row>
-          <a-col v-for="(col, colIdx) in columns" :key="colIdx" :span="8">
-            <div class="mobile-table-item">
-              <div class="mobile-table-item-content" v-if="col.dataIndex === 'sequence_index_number'">
-                <div>
-                  <span>
-                    {{ col.title }}
-                  </span>
-                </div>
-                <div>
-                  <a-tag>{{ rowIdx + 1 }}</a-tag>
-                </div>
-              </div>
-              <div class="mobile-table-item-content" v-if="col.dataIndex === 'dynamic-opr-button'">
-                <div class="mob-label">
-                  <span>
-                    {{ col.title }}
-                  </span>
-                </div>
-                <a-button v-if="!disabled" type="dashed" @click="removeDomain(item)" danger>
-                  <template #icon>
-                    <DeleteOutlined />
-                  </template>
-                </a-button>
-              </div>
-              <div class="mobile-table-item-content" v-if="['sequence_index_number', 'dynamic-opr-button'].indexOf(col.dataIndex) === -1">
-                <div class="mob-label">
-                  <span
-                    v-if="
-                      record.list.find((item) => item.model == col.dataIndex) &&
-                      record.list.find((item) => item.model == col.dataIndex).rules[0].required
-                    "
-                    style="color: #ff4d4f; margin-right: 4px"
-                    >*</span
-                  >
-                  <span>
-                    {{ col.title }}
-                  </span>
-                </div>
-
-                <div class="mobile-tanle-form-item">
-                  <StFormModelItem
-                    v-if="record.disableCell && record.disableCell.find((item) => item.y == col.dataIndex && item.x == rowIdx + 1)"
-                    :record="record.list.find((item) => item.model == col.dataIndex)"
-                    :config="config"
-                    :parentDisabled="true"
-                    :index="record.list.findIndex((item) => item.model == col.dataIndex)"
-                    :domains="dynamicValidateForm.domains"
-                    :dynamicData="dynamicData"
-                    :formData="formData"
-                    :formConfig="formConfig"
-                    :childTableFieldRecord="record.list"
-                    :rowIndex="rowIdx"
-                    v-model:value="item[record.list.find((item) => item.model == col.dataIndex).model]"
-                    @input="handleInput"
-                    :columns="columns"
-                    :pagination="pagination"
-                    :currentTableData="currentTableData"
-                    :colIndex="colIdx"
-                  />
-                  <StFormModelItem
-                    v-else
-                    :record="record.list.find((item) => item.model == col.dataIndex)"
-                    :config="config"
-                    :parentDisabled="disabled"
-                    :index="record.list.findIndex((item) => item.model == col.dataIndex)"
-                    :domains="dynamicValidateForm.domains"
-                    :dynamicData="dynamicData"
-                    :formData="formData"
-                    :formConfig="formConfig"
-                    :childTableFieldRecord="record.list"
-                    :rowIndex="rowIdx"
-                    v-model:value="item[record.list.find((item) => item.model == col.dataIndex).model]"
-                    @input="handleInput"
-                    :columns="columns"
-                    :pagination="pagination"
-                    :currentTableData="currentTableData"
-                    :colIndex="colIdx"
-                  />
-                </div>
+        <a-descriptions :column="3">
+          <template #title>
+            No.{{ rowIdx + 1 }}
+          </template>
+          <template #extra>
+            <a-button v-if="!disabled" type="dashed" @click="removeDomain(item)" danger>
+              <template #icon>
+                <DeleteOutlined />
+              </template>
+            </a-button>
+          </template>
+          <a-descriptions-item
+            v-for="(col, colIdx) in columns.filter((v) => !['sequence_index_number', 'dynamic-opr-button'].includes(v.dataIndex))"
+            :key="colIdx"
+          >
+            <template #label>
+              <div class="mob-label">
+                <span
+                  v-if="
+                    record.list.find((item) => item.model == col.dataIndex) &&
+                    record.list.find((item) => item.model == col.dataIndex).rules[0].required
+                  "
+                  style="color: #ff4d4f; margin-right: 4px"
+                  >*</span
+                >
+                <span>
+                  {{ col.title }}
+                </span>
               </div>
+            </template>
+            <div class="mobile-tanle-form-item">
+              <StFormModelItem
+                v-if="record.disableCell && record.disableCell.find((item) => item.y == col.dataIndex && item.x == rowIdx + 1)"
+                :record="record.list.find((item) => item.model == col.dataIndex)"
+                :config="config"
+                :parentDisabled="true"
+                :index="record.list.findIndex((item) => item.model == col.dataIndex)"
+                :domains="dynamicValidateForm.domains"
+                :dynamicData="dynamicData"
+                :formData="formData"
+                :formConfig="formConfig"
+                :childTableFieldRecord="record.list"
+                :rowIndex="rowIdx"
+                v-model:value="item[record.list.find((item) => item.model == col.dataIndex).model]"
+                @input="handleInput"
+                :columns="columns"
+                :pagination="pagination"
+                :currentTableData="currentTableData"
+                :colIndex="colIdx"
+              />
+              <StFormModelItem
+                v-else
+                :record="record.list.find((item) => item.model == col.dataIndex)"
+                :config="config"
+                :parentDisabled="disabled"
+                :index="record.list.findIndex((item) => item.model == col.dataIndex)"
+                :domains="dynamicValidateForm.domains"
+                :dynamicData="dynamicData"
+                :formData="formData"
+                :formConfig="formConfig"
+                :childTableFieldRecord="record.list"
+                :rowIndex="rowIdx"
+                v-model:value="item[record.list.find((item) => item.model == col.dataIndex).model]"
+                @input="handleInput"
+                :columns="columns"
+                :pagination="pagination"
+                :currentTableData="currentTableData"
+                :colIndex="colIdx"
+              />
             </div>
-          </a-col>
-        </a-row>
+          </a-descriptions-item>
+        </a-descriptions>
       </div>
     </div>
 
@@ -149,9 +141,8 @@
   });
 
   defineExpose({
-    refreshTableCard
-  })
-
+    refreshTableCard,
+  });
 </script>
 
 <style scoped lang="scss">
@@ -165,6 +156,14 @@
       display: flex;
       flex-direction: column;
       gap: 10px;
+
+      :deep(.ant-descriptions-item) {
+        padding: 0 10px 10px 0;
+      }
+
+      :deep(.ant-descriptions-item-content) {
+        display: inline-block;
+      }
     }
   }
   .mobile-table {