fix: 【流程引擎】修改

src/views/flow/stFormDesign/packages/StBatch/batch.vue

@@ -82,95 +82,23 @@
           </div>
         </template>
       </a-table>
-      <div v-if="!isMobile&&record?.options?.tableCard==true">
-        <a-card v-for="(item, rowIdx) in firstData" :key="rowIdx" style="margin-bottom: 10px"
-                class="mobile-table">
-          <div v-for="(col, colIdx) in columns" :key="colIdx" 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>
-            </div>
-          </div>
-        </a-card>
-        <a-button type="dashed" style="width: 100%"
-                  v-show="this.dynamicValidateForm.domains&&this.dynamicValidateForm.domains.length>1"
-                  @click="openChild=true">查看更多 (共有{{ this.dynamicValidateForm.domains.length }}条数据)
-        </a-button>
-      </div>
+      <st-table-card
+          v-if="!isMobile && record?.options?.tableCard == true"
+          :form-data="formData"
+          :dynamic-data="dynamicData"
+          :form-config="formConfig"
+          :dynamic-validate-form="dynamicValidateForm"
+          :first-data="firstData"
+          :columns="columns"
+          :record="record"
+          :disabled="disabled"
+          :config="config"
+          :pagination="pagination"
+          :current-table-data="currentTableData"
+          @removeDomain="removeDomain"
+          @handleInput="handleInput"
+          ref="stTableCardRef"
+      />
 
       <div v-if="isMobile">
         <a-card v-for="(item, rowIdx) in firstData" :key="rowIdx" style="margin-bottom: 10px"
@@ -358,6 +286,7 @@
 
 <script>
 import StFormModelItem from './module/StFormModelItem.vue';
+import StTableCard from './module/StTableCard.vue'
 import {v1 as uuidv1} from 'uuid';
 import {DeleteOutlined, CopyOutlined, PlusOutlined} from '@ant-design/icons-vue';
 import {isMobile} from '/@/utils';
@@ -377,6 +306,7 @@ export default {
   },
   components: {
     StFormModelItem,
+    StTableCard,
     DeleteOutlined,
     CopyOutlined,
     PlusOutlined,
@@ -537,7 +467,7 @@ export default {
       }
 
       this.refreshCurrentTableData();
-
+      this.$refs.stTableCardRef && this.$refs.stTableCardRef.refreshTableCard();
       this.handleInput('DELETE');
     },
     addDomain() {

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="table-card">
+    <div class="mobile-table-content">
+      <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>
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+
+    <a-button type="dashed" style="width: 100%" v-show="isShowMoreBtn" @click="handleLoadMore"
+      >查看更多 (共有{{ dynamicValidateForm.domains.length }}条数据)
+    </a-button>
+  </div>
+</template>
+
+<script setup>
+  import StFormModelItem from '/@/views/flow/stFormDesign/packages/StBatch/module/StFormModelItem.vue';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
+  import { isEmpty } from 'lodash';
+  import { computed, nextTick, ref, watch } from 'vue';
+
+  const props = defineProps([
+    'formData',
+    'dynamicData',
+    'formConfig',
+    'dynamicValidateForm',
+    'firstData',
+    'columns',
+    'record',
+    'disabled',
+    'config',
+    'pagination',
+    'currentTableData',
+  ]);
+
+  const list = ref([]);
+
+  const pageNum = ref(1);
+  const pageSize = ref(5);
+
+  const emits = defineEmits(['removeDomain', 'handleInput']);
+
+  const removeDomain = (item) => {
+    emits('removeDomain', item);
+  };
+
+  const handleInput = (event) => {
+    emits('handleInput', event);
+  };
+  const handleLoadMore = () => {
+    refreshTableCard();
+    pageNum.value++;
+  };
+
+  const refreshTableCard = () => {
+    const startIndex = (pageNum.value - 1) * pageSize.value;
+    const endIndex = startIndex + pageSize.value;
+    list.value = props.dynamicValidateForm.domains.slice(0, endIndex);
+  };
+
+  const isShowMoreBtn = computed(() => {
+    return (
+      props.dynamicValidateForm.domains &&
+      props.dynamicValidateForm.domains.length > 1 &&
+      props.dynamicValidateForm.domains.length !== list.value.length
+    );
+  });
+
+  defineExpose({
+    refreshTableCard
+  })
+
+</script>
+
+<style scoped lang="scss">
+  .table-card {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    background: #fff;
+    .mobile-table-content {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+  .mobile-table {
+    border: 1px solid rgba(#000, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+
+    :deep(.ant-card-body) {
+      padding: 15px;
+    }
+
+    .mobile-table-item {
+      width: 100%;
+
+      .mobile-table-item-content {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 0;
+        border-bottom: 1px solid #f0f0f0;
+
+        .mob-label {
+          width: 100px;
+        }
+
+        .mobile-tanle-form-item {
+          width: calc(100% - 100px);
+        }
+      }
+    }
+  }
+</style>

src/views/flow/stFormWork/formWork.vue

@@ -1679,28 +1679,29 @@ defineExpose(exposeVm());
 }
 
 :deep(.ant-card-head) {
-  border-bottom: none;
-  background: linear-gradient(180deg, #fcfdff 3%, #eef3ff 100%);
-  padding: 0px 0px 0px 30px;
+  border-bottom: 1px solid #dcdfe6;
+  //background: linear-gradient(180deg, #fcfdff 3%, #eef3ff 100%);
+  padding: 0px 0px 0px 20px;
   min-height: 39px;
 
   &::before {
     position: absolute;
     left: 10px;
-    top: 12px;
+    top: 10px;
     content: '';
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
+    width: 4px;
+    height: 18px;
+    border-radius: 4px;
     background: rgba(95, 140, 249);
-    border: 4px solid rgba(192, 210, 253);
-    box-sizing: content-box;
+    //border: 4px solid rgba(192, 210, 253);
+    //box-sizing: content-box;
   }
 }
 
 :deep(.ant-card-head-title) {
-  color: #467af8;
+  color: #171726;
   font-size: 16px;
+  font-weight: 600;
   position: relative;
   // margin-left: 30px;
 }