diff --git a/src/api/demo/formScheme.ts b/src/api/demo/formScheme.ts
index bbc79cc5..2da927a1 100644
--- a/src/api/demo/formScheme.ts
+++ b/src/api/demo/formScheme.ts
@@ -251,17 +251,6 @@ export function LoadFormScheme(params) {
 }
 
 function getColumnInfoList(params) {
-  params.dbColumnInfoList.push({
-    tableName: params.tableName,
-    dbColumnName: 'id',
-    dataType: 'varchar',
-    length: 200,
-    columnDescription: '主键ID',
-    isNullable: 0,
-    isIdentity: 0,
-    isPrimarykey: 1,
-    decimalDigits: 0,
-  });
   params.dbColumnInfoList.push({
     tableName: params.tableName,
     dbColumnName: 'geom',
diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts
index 82c261e8..ea4e8474 100644
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -20,7 +20,6 @@ import {
   TimePicker,
   TreeSelect,
   Transfer,
-  Card,
 } from 'ant-design-vue';
 import ApiRadioGroup from './components/ApiRadioGroup.vue';
 import RadioButtonGroup from './components/RadioButtonGroup.vue';
@@ -36,8 +35,6 @@ import { IconPicker } from '@/components/Icon';
 import { CountdownInput } from '@/components/CountDown';
 import { BasicTitle } from '@/components/Basic';
 import { CropperAvatar } from '@/components/Cropper';
-import CreateOrModifyUser from './components/CreateOrModifyUser.vue'
-import CreateOrModifyTime from './components/CreateOrModifyTime.vue'
 
 const componentMap = new Map<ComponentType | string, Component>();
 
@@ -85,11 +82,6 @@ componentMap.set('Divider', Divider);
 componentMap.set('CropperAvatar', CropperAvatar);
 
 componentMap.set('BasicTitle', BasicTitle);
-componentMap.set('Card', Card);
-componentMap.set('CreateUser', CreateOrModifyUser);
-componentMap.set('ModifyUser', CreateOrModifyUser);
-componentMap.set('CreateTime', CreateOrModifyTime);
-componentMap.set('ModifyTime', CreateOrModifyTime);
 
 export function add<T extends string, R extends Component>(
   compName: ComponentType | T,
diff --git a/src/components/Form/src/components/CreateOrModifyTime.vue b/src/components/Form/src/components/CreateOrModifyTime.vue
deleted file mode 100644
index cc131dea..00000000
--- a/src/components/Form/src/components/CreateOrModifyTime.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <a-input v-model:value="nowTime" readOnly>
-    <template #suffix>
-      <UserOutlined />
-    </template>
-  </a-input>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { UserOutlined } from '@ant-design/icons-vue';
-import dayjs from 'dayjs';
-  const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/Form/src/components/CreateOrModifyUser.vue b/src/components/Form/src/components/CreateOrModifyUser.vue
deleted file mode 100644
index 03486ba3..00000000
--- a/src/components/Form/src/components/CreateOrModifyUser.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <a-input v-model:value="userName" readOnly>
-    <template #suffix>
-      <user-outlined />
-    </template>
-  </a-input>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { UserOutlined } from '@ant-design/icons-vue';
-const userName = ref(localStorage.getItem('fireUserLoginName'))
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/FormViewer/index.vue b/src/components/FormViewer/index.vue
index 0fd60419..07a2a8fc 100644
--- a/src/components/FormViewer/index.vue
+++ b/src/components/FormViewer/index.vue
@@ -1,6 +1,42 @@
 <template>
   <div class="my-form-viewer">
-    <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
+    {{ formColumns }}
+    <template v-if="tabsColumns.length > 1">
+      <a-tabs style="width: 100%" @change="tabsChange">
+        <a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
+          <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
+        </a-tab-pane>
+      </a-tabs>
+    </template>
+    <BasicForm
+      ref="myDataBaseFormRef"
+      @register="registerForm"
+      v-if="formModalVisible && tabsColumns.length < 1"
+    />
+    <template v-for="(item, index) in cardLayout" :key="index">
+      <a-row style="width: 100%">
+        <a-col :span="item?.colProps?.span || 24" style="padding: 10px">
+          <a-card
+            :title="item.label"
+            :class="
+              item.shadow === 'always' ? 'card-always' : item.shadow === 'hover' ? 'card-hover' : ''
+            "
+          >
+            <template v-for="(childItem, childIndex) in item.columns[0].children" :key="childIndex">
+              <a-row style="width: 100%; margin-bottom: 10px">
+                <a-col :span="childItem?.colProps?.span || 24">
+                  <CallModalCardFormItem
+                    :data="childItem"
+                    :parent="item.field"
+                    :record="cardLayoutData"
+                  />
+                </a-col>
+              </a-row>
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+    </template>
     <a-table
       class="sub-table"
       :columns="subTableColumns"
@@ -27,6 +63,10 @@
         </template>
       </template>
     </a-table>
+    <!-- todo  创建/修改  人/时间 -->
+    <template v-for="(item, index) in createOrModifyList" :key="index">
+      <CreateOrModifyComponent :data="item" />
+    </template>
   </div>
 </template>
 
@@ -36,9 +76,11 @@
   import { functionGetFormDataFormScheme, LoadFormScheme } from '@/api/demo/formScheme';
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import FormItem from '@/views/demo/onlineform/formCall/ShowFormModal/FormItem/index.vue';
+  import CallModalCardFormItem from '@/views/demo/onlineform/formCall/CallModalFormItem/index.vue';
+  import CreateOrModifyComponent from '@/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue';
   import { v4 as uuidv4 } from 'uuid';
 
-  const formColumns: FormSchema[] = [];
+  let formColumns: FormSchema[] = [];
   const props = defineProps({
     formConfig: Object,
     processId: String,
@@ -61,66 +103,156 @@
   const subTableList: any = ref([]);
   const scrollValue = ref();
   const masterData = ref([]);
-  props.formConfig.forEach((element) => {
-    console.log(element);
-    if (element.disabled == false) {
-      var obj = {
-        ...element.componentProps,
-        disabled: false,
-      };
-      obj.disabled = true;
-      element.componentProps = obj;
-    }
-    if (element.rules !== undefined) {
-      let myString = element.rules[0].pattern;
-      const lastCharacter = myString.charAt(myString.length - 1);
-      if (lastCharacter === 'i' || lastCharacter === 's') {
-        element.rules[0].pattern = new RegExp(element.rules[0].pattern.slice(1, -2), lastCharacter);
-      } else {
-        element.rules[0].pattern = new RegExp(element.rules[0].pattern.slice(1, -1));
-      }
-    }
-    formColumns.push(element);
-
-    if (element.type === 'childData' && element.ifShow) {
-      subTableId.value = element.gridprop;
-      subTableColumns.value.push({
-        key: element.field,
-        title: element.label,
-        dataIndex: element.field,
-        ...element,
-        width: 120,
-      });
-      subTableData.value.push(element);
-    } else if (!element.type && element.ifShow) {
-      masterData.value.push(element);
-    }
-  });
-  console.log(subTableColumns.value);
-  scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 400 };
-  formColumns.value = props.formConfig;
-  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
-    labelWidth: 100,
-    schemas: masterData.value,
-    showActionButtonGroup: false,
-    baseColProps: { lg: 24, md: 24 },
-  });
+  const subTableDB = ref([]);
+  const cardLayout = ref([]);
+  const cardLayoutData = ref([]);
+  const createOrModifyList = ref([]);
+  const formModalVisible = ref(false);
+  const tabsColumns: any = ref([]);
 
   const keyValue = ref('');
+  const FieldsValue = ref({});
   async function getFormHistory() {
     const data = await LoadFormScheme({
       schemeId: props.formVerison,
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
-      scheme.formInfo.schemas.forEach((element) => {
-        if (element.field == props.formRelationId) {
-          keyValue.value = element.componentProps.fieldName;
-          getFormDetail();
+      console.log(scheme);
+      console.log(props.formConfig);
+      subTableDB.value = scheme.db;
+      scheme.formInfo.tabList.forEach((tabElement, index) => {
+        tabElement.schemas.forEach((element) => {
+          if (element.field == props.formRelationId) {
+            keyValue.value = element.componentProps.fieldName;
+            getFormDetail();
+          }
+          //流程设置的表单显示和编辑与表单做关联
+          props.formConfig.forEach((configElement) => {
+            if (configElement.field == element.field) {
+              element.componentProps.disabled = !configElement.disabled;
+              element.ifShow = configElement.ifShow;
+            }
+            if (element.columns) {
+              element.columns.forEach((child) => {
+                child.children.forEach((t) => {
+                  if (configElement.field == t.field) {
+                    t.componentProps.disabled = !configElement.disabled;
+                    t.ifShow = configElement.ifShow;
+                  }
+                });
+              });
+            }
+          });
+          // 验证规则
+          if (element.rules !== undefined) {
+            let myString = element.rules[0].pattern;
+            const lastCharacter = myString.charAt(myString.length - 1);
+            if (lastCharacter === 'i' || lastCharacter === 's') {
+              element.rules[0].pattern = new RegExp(
+                element.rules[0].pattern.slice(1, -2),
+                lastCharacter,
+              );
+            } else {
+              element.rules[0].pattern = new RegExp(element.rules[0].pattern.slice(1, -1));
+            }
+          }
+          // 卡片布局
+          if (element.component === 'Card') {
+            cardLayout.value.push(element);
+            let obj = {};
+            element.columns[0].children.forEach((data) => {
+              obj[data.field] = '';
+            });
+            cardLayoutData.value[element.field] = obj;
+          }
+          if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(element.type)) {
+            createOrModifyList.value.push(element);
+          }
+          subTableColumns.value = [
+            {
+              dataIndex: 'setting',
+              key: 'setting',
+              fixed: 'left',
+              width: 60,
+            },
+          ];
+          // 选项卡
+          if (element.type === 'subTable') {
+            subTableId.value = element.field;
+            let tableData = [];
+            element.columns.forEach((itemColumn) => {
+              itemColumn.children.forEach((itemColumnChild) => {
+                tableData.push(itemColumnChild);
+                subTableColumns.value.push({
+                  key: itemColumnChild.field,
+                  title: itemColumnChild.label,
+                  dataIndex: itemColumnChild.field,
+                  ...itemColumnChild,
+                  width: 120,
+                });
+              });
+            });
+            scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
+            subTableData.value = tableData;
+          }
+          formColumns.push({
+            parentValue: index,
+            ...element,
+            show: index == 0 ? true : false,
+          });
+        });
+        //
+        if (tabElement.text != '') {
+          tabsColumns.value.push({
+            label: tabElement.text,
+            value: index,
+            children: tabElement.schemas,
+          });
         }
       });
+      formModalVisible.value = true;
+      resetFields();
+      scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 400 };
     }
   }
+  async function tabsChange(e) {
+    formColumns.forEach((element) => {
+      element.show = false;
+      if (element.parentValue == e) {
+        element.show = true;
+      }
+    });
+    // 切换时保存值
+    const values = await validate();
+    console.log(values);
+    console.log(Object.keys(FieldsValue.value));
+    if (Object.keys(FieldsValue.value).length == 0) {
+      FieldsValue.value = values;
+    }
+    console.log(values);
+    console.log(FieldsValue.value);
+    for (const key in values) {
+      for (const fieKey in FieldsValue.value) {
+        if (key == fieKey) {
+          if (values[key] != undefined) {
+            FieldsValue.value[key] = values[key];
+          }
+        }
+      }
+    }
+    setFieldsValue({
+      ...FieldsValue.value,
+    });
+    console.log(FieldsValue.value);
+  }
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      schemas: formColumns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
   async function getFormDetail() {
     var instance = JSON.parse(props.instanceInfo);
     const querys = {
@@ -129,21 +261,50 @@
       keyValue: instance.pkeyValue,
     };
     const data = await functionGetFormDataFormScheme(querys);
+    console.log(data);
     let obj = new Object();
     for (var i in data) {
-      for (var j in data[i]) {
-        Object.assign(obj, data[i][j]);
-      }
+      subTableDB.value.forEach((element) => {
+        if (element.type == 'chlid') {
+          subTableList.value = data[i];
+        } else {
+          for (var j in data[i]) {
+            Object.assign(obj, data[i][j]);
+          }
+        }
+      });
     }
+    console.log(obj);
+    FieldsValue.value = obj;
     setFieldsValue({
       ...obj,
     });
   }
   async function getForm() {
     try {
+      console.log(getFieldsValue());
       const values = await validate();
+      console.log(values);
+      console.log(FieldsValue.value);
+      for (const key in values) {
+        for (const fieKey in FieldsValue.value) {
+          if (key == fieKey) {
+            if (values[key] != undefined) {
+              FieldsValue.value[key] = values[key];
+            }
+          }
+        }
+      }
+      console.log(values);
+      console.log(FieldsValue.value);
       let saveSubTableList = [];
-      let query = values;
+      let query;
+      if (Object.keys(FieldsValue.value).length == 0) {
+        query = values;
+      } else {
+        query = FieldsValue.value;
+      }
+      console.log(query);
       subTableList.value.forEach((item) => {
         let emptyObj = {};
         for (const key in item) {
@@ -194,4 +355,8 @@
   .my-process-designer {
     width: 100%;
   }
+  .my-form-viewer {
+    overflow: auto;
+    height: 70vh;
+  }
 </style>
diff --git a/src/components/ProcessDesigner/package/penal/startEvent/index.vue b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
index e90be0cf..3649f424 100644
--- a/src/components/ProcessDesigner/package/penal/startEvent/index.vue
+++ b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
@@ -322,6 +322,8 @@
   // 表单版本更改
   async function custmerformVerisonChange(val, isChange) {
     let obj;
+    console.log(val);
+    console.log(data.formVerisons);
     data.formVerisons.forEach((element) => {
       if (element.id == val) {
         obj = element;
@@ -331,76 +333,113 @@
   }
   function loadFormScheme(strScheme, isChange) {
     const scheme = JSON.parse(strScheme);
-    console.log(scheme.formInfo.schemas)
+    console.log(scheme);
     const fields: any[] = [];
     const rfields: {
       label?: string;
       value?: string;
     }[] = [];
-    scheme.formInfo.schemas.forEach(
-      (element: { label?: string; field?: string; component: any; itemProps: any }) => {
-        console.log(element);
-        if (['InputGuid'].includes(element.component)) {
-          rfields.push({
-            label: element.label,
-            // value:element.prop
-            value: element.field,
-          });
-        }
+    scheme.formInfo.tabList.forEach((tabElement) => {
+      tabElement.schemas.forEach(
+        (element: { label?: string; field?: string; component: any; itemProps: any }) => {
+          console.log(element);
+          if (['InputGuid'].includes(element.component)) {
+            rfields.push({
+              label: element.label,
+              // value:element.prop
+              value: element.field,
+            });
+          }
 
-        if (!['Divider', 'Grid'].includes(element.component) && !element.itemProps.hidden) {
-          let obj: any = element;
-          obj.required = element.itemProps.required;
-          // obj.componentProps.disabled = false;
-          obj.disabled = true;
-          obj.ifShow = true;
-          obj.fieldName = element.componentProps.fieldName;
-          fields.push(obj);
-        } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
-          console.log('gridtable');
-          fields.push({
-            field: `${element.field}_add`,
-            label: `${element.label || '表格'}-添加按钮`,
-            required: false,
-            disabled: true,
-            ifShow: false,
-            type: 'grid',
-          });
-          fields.push({
-            field: `${element.field}_remove`,
-            label: `${element.label || '表格'}-删除按钮`,
-            required: false,
-            disabled: true,
-            ifShow: false,
-            type: 'grid',
-          });
+          if (
+            ![
+              'Divider',
+              'Grid',
+              'Card',
+              'CreateUser',
+              'CreateTime',
+              'ModifyUser',
+              'ModifyTime',
+            ].includes(element.component) &&
+            !element.itemProps.hidden
+          ) {
+            let obj: any = element;
+            obj.required = element.itemProps.required;
+            // obj.componentProps.disabled = false;
+            obj.disabled = true;
+            obj.ifShow = true;
+            obj.fieldName = element.componentProps.fieldName;
+            fields.push(obj);
+          } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
+            console.log('gridtable');
+            fields.push({
+              field: `${element.field}_add`,
+              label: `${element.label || '表格'}-添加按钮`,
+              required: false,
+              disabled: true,
+              ifShow: false,
+              type: 'grid',
+            });
+            fields.push({
+              field: `${element.field}_remove`,
+              label: `${element.label || '表格'}-删除按钮`,
+              required: false,
+              disabled: true,
+              ifShow: false,
+              type: 'grid',
+            });
 
-          fields.push({
-            field: `${element.field}_required`,
-            label: `${element.label || '表格'}-数据`,
-            required: element.itemProps.required,
-            disabled: false,
-            ifShow: false,
-            type: 'gridrequired',
-          });
-          element.columns.forEach((child) => {
-            child.children.forEach((t) => {
-              fields.push({
-                type: 'childData',
-                gridprop: element.field,
-                field: t.field,
-                label: `${element.label || '表格'}-${t.label}`,
-                required: t.itemProps.required,
-                disabled: true,
-                ifShow: true,
-                fieldName: t.componentProps.fieldName,
-                ...t,
+            fields.push({
+              field: `${element.field}_required`,
+              label: `${element.label || '表格'}-数据`,
+              required: element.itemProps.required,
+              disabled: false,
+              ifShow: false,
+              type: 'gridrequired',
+            });
+            element.columns.forEach((child) => {
+              child.children.forEach((t) => {
+                fields.push({
+                  gridprop: element.field,
+                  field: t.field,
+                  label: `${element.label || '表格'}-${t.label}`,
+                  required: t.itemProps.required,
+                  disabled: true,
+                  ifShow: true,
+                  fieldName: t.componentProps.fieldName,
+                  ...t,
+                });
               });
             });
-          });
-        }
-      },
-    );
+          } else if (['Card'].includes(element.component)) {
+            element.columns.forEach((child) => {
+              child.children.forEach((t) => {
+                fields.push({
+                  gridprop: element.field,
+                  field: t.field,
+                  required: t.itemProps.required,
+                  disabled: true,
+                  ifShow: true,
+                  fieldName: t.componentProps.fieldName,
+                  ...t,
+                });
+              });
+            });
+          } else if (
+            ['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
+            element.display
+          ) {
+            let obj: any = element;
+            obj.required = element.itemProps.required;
+            // obj.componentProps.disabled = false;
+            obj.disabled = true;
+            obj.ifShow = true;
+            obj.fieldName = element.componentProps.fieldName;
+            fields.push(obj);
+          }
+        },
+      );
+    });
     console.log(fields);
     data.formRelations = rfields;
     if (isChange) {
diff --git a/src/components/ProcessDesigner/package/penal/userTask/index.vue b/src/components/ProcessDesigner/package/penal/userTask/index.vue
index 91e7009c..d787cf82 100644
--- a/src/components/ProcessDesigner/package/penal/userTask/index.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/index.vue
@@ -858,69 +858,107 @@
       label?: string;
       value?: string;
     }[] = [];
-    scheme.formInfo.schemas.forEach(
-      (element: { label?: string; field?: string; component: any; itemProps: any }) => {
-        if (['InputGuid'].includes(element.component)) {
-          rfields.push({
-            label: element.label,
-            // value:element.prop
-            value: element.field,
-          });
-        }
+    scheme.formInfo.tabList.forEach((tabElement) => {
+      tabElement.schemas.forEach(
+        (element: { label?: string; field?: string; component: any; itemProps: any }) => {
+          if (['InputGuid'].includes(element.component)) {
+            rfields.push({
+              label: element.label,
+              // value:element.prop
+              value: element.field,
+            });
+          }
 
-        if (!['Divider', 'Grid'].includes(element.component) && !element.itemProps.hidden) {
-          let obj: any = element;
-          obj.required = element.itemProps.required;
-          // obj.componentProps.disabled = true;
-          obj.disabled = true;
-          obj.ifShow = true;
-          obj.fieldName = element.componentProps.fieldName;
-          fields.push(obj);
-        } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
-          console.log('gridtable');
-          fields.push({
-            field: `${element.field}_add`,
-            label: `${element.label || '表格'}-添加按钮`,
-            required: false,
-            disabled: true,
-            ifShow: false,
-            type: 'grid',
-          });
-          fields.push({
-            field: `${element.field}_remove`,
-            label: `${element.label || '表格'}-删除按钮`,
-            required: false,
-            disabled: true,
-            ifShow: false,
-            type: 'grid',
-          });
+          if (
+            ![
+              'Divider',
+              'Grid',
+              'Card',
+              'CreateUser',
+              'CreateTime',
+              'ModifyUser',
+              'ModifyTime',
+            ].includes(element.component) &&
+            !element.itemProps.hidden
+          ) {
+            let obj: any = element;
+            obj.required = element.itemProps.required;
+            // obj.componentProps.disabled = true;
+            obj.disabled = true;
+            obj.ifShow = true;
+            obj.fieldName = element.componentProps.fieldName;
+            fields.push(obj);
+          } else if (['Grid'].includes(element.component) || element.type == 'subTable') {
+            console.log('gridtable');
+            fields.push({
+              field: `${element.field}_add`,
+              label: `${element.label || '表格'}-添加按钮`,
+              required: false,
+              disabled: true,
+              ifShow: false,
+              type: 'grid',
+            });
+            fields.push({
+              field: `${element.field}_remove`,
+              label: `${element.label || '表格'}-删除按钮`,
+              required: false,
+              disabled: true,
+              ifShow: false,
+              type: 'grid',
+            });
 
-          fields.push({
-            field: `${element.field}_required`,
-            label: `${element.label || '表格'}-数据`,
-            required: element.itemProps.required,
-            disabled: false,
-            ifShow: false,
-            type: 'gridrequired',
-          });
-          element.columns.forEach((child) => {
-            child.children.forEach((t) => {
-              fields.push({
-                type: 'childData',
-                gridprop: element.field,
-                field: t.field,
-                label: `${element.label || '表格'}-${t.label}`,
-                required: t.itemProps.required,
-                disabled: true,
-                ifShow: true,
-                fieldName: t.componentProps.fieldName,
-                ...t,
+            fields.push({
+              field: `${element.field}_required`,
+              label: `${element.label || '表格'}-数据`,
+              required: element.itemProps.required,
+              disabled: false,
+              ifShow: false,
+              type: 'gridrequired',
+            });
+            element.columns.forEach((child) => {
+              child.children.forEach((t) => {
+                fields.push({
+                  type: 'childData',
+                  gridprop: element.field,
+                  field: t.field,
+                  label: `${element.label || '表格'}-${t.label}`,
+                  required: t.itemProps.required,
+                  disabled: true,
+                  ifShow: true,
+                  fieldName: t.componentProps.fieldName,
+                  ...t,
+                });
               });
             });
-          });
-        }
-      },
-    );
+          } else if (['Card'].includes(element.component)) {
+            element.columns.forEach((child) => {
+              child.children.forEach((t) => {
+                fields.push({
+                  gridprop: element.field,
+                  field: t.field,
+                  required: t.itemProps.required,
+                  disabled: true,
+                  ifShow: true,
+                  fieldName: t.componentProps.fieldName,
+                  ...t,
+                });
+              });
+            });
+          } else if (
+            ['CreateUser', 'CreateTime', 'ModifyUser', 'ModifyTime'].includes(element.component) &&
+            element.display
+          ) {
+            let obj: any = element;
+            obj.required = element.itemProps.required;
+            // obj.componentProps.disabled = false;
+            obj.disabled = true;
+            obj.ifShow = true;
+            obj.fieldName = element.componentProps.fieldName;
+            fields.push(obj);
+          }
+        },
+      );
+    });
     data.formRelations = rfields;
     if (isChange) {
       node.value.authFields = fields;
diff --git a/src/design/index.less b/src/design/index.less
index 98a63d04..ee6ae775 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -52,3 +52,15 @@ ul {
   padding: 0;
   list-style: none;
 }
+.card-always{
+  border-color: transparent;
+  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+}
+.card-hover{
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+.card-hover:hover{
+  border-color: transparent;
+  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+}
+
diff --git a/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue b/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue
index c093c341..1ccb8d46 100644
--- a/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue
+++ b/src/views/demo/form-design/components/VFormCreate/components/FormRender.vue
@@ -44,9 +44,18 @@
     </Row>
   </template>
   <template v-else-if="['Card'].includes(schema.component)">
-    <a-row class="grid-row" style="width:100%;padding:10px;">
+    <a-row class="grid-row" style="width: 100%; padding: 10px">
       <a-col class="grid-col" :span="schema.colProps.span">
-        <a-card :title="schema.label" :class="schema.shadow === 'always'? 'card-always': schema.shadow === 'hover'? 'card-hover': ''">
+        <a-card
+          :title="schema.label"
+          :class="
+            schema.shadow === 'always'
+              ? 'card-always'
+              : schema.shadow === 'hover'
+                ? 'card-hover'
+                : ''
+          "
+        >
           <a-row class="grid-row">
             <a-col
               class="grid-col"
@@ -54,7 +63,7 @@
               :key="index"
               :span="colItem.span"
             >
-              <template  v-for="(item, k) in colItem.children" :key="k">
+              <template v-for="(item, k) in colItem.children" :key="k">
                 <FormRender
                   :schema="item"
                   :formData="formData"
@@ -62,7 +71,6 @@
                   :setFormModel="setFormModel"
                 />
               </template>
-              
             </a-col>
           </a-row>
         </a-card>
@@ -71,7 +79,11 @@
   </template>
   <template v-else-if="['Tabs'].includes(schema.component)">
     <a-tabs style="width: 100%">
-      <a-tab-pane v-for="(colItem, index) in schema.componentProps.options" :tab="colItem.label" :key="index">
+      <a-tab-pane
+        v-for="(colItem, index) in schema.componentProps.options"
+        :tab="colItem.label"
+        :key="index"
+      >
         <FormRender
           v-for="(item, k) in colItem.children"
           :key="k"
@@ -130,9 +142,15 @@
       default: null,
     },
   });
+  console.log('itemitem', props.formConfig)
   const emit = defineEmits(['change', 'submit', 'reset']);
   const scrollValue = ref();
-  const isCreateOrModifyComponent = ['createuser','createtime','modifyuser','modifytime'].includes(props.schema.type)
+  const isCreateOrModifyComponent = [
+    'createuser',
+    'createtime',
+    'modifyuser',
+    'modifytime',
+  ].includes(props.schema.type);
   let subTableColumns = ref([
     {
       dataIndex: 'setting',
@@ -144,26 +162,29 @@
   let subTableId = ref(null);
   let subTableData = ref([]);
   let subTableList = ref([]);
-  props.formConfig.schemas.forEach((item) => {
-    if (item.type === 'subTable') {
-      subTableId.value = item.field;
-      let tableData = [];
-      item.columns.forEach((itemColumn) => {
-        itemColumn.children.forEach((itemColumnChild) => {
-          tableData.push(itemColumnChild);
-          subTableColumns.value.push({
-            key: itemColumnChild.field,
-            title: itemColumnChild.label,
-            dataIndex: itemColumnChild.field,
-            width: 120,
-            ...itemColumnChild,
+  if (props.formConfig.schemas) {
+    props.formConfig.schemas.forEach((item) => {
+      if (item.type === 'subTable') {
+        subTableId.value = item.field;
+        let tableData = [];
+        item.columns.forEach((itemColumn) => {
+          itemColumn.children.forEach((itemColumnChild) => {
+            tableData.push(itemColumnChild);
+            subTableColumns.value.push({
+              key: itemColumnChild.field,
+              title: itemColumnChild.label,
+              dataIndex: itemColumnChild.field,
+              width: 120,
+              ...itemColumnChild,
+            });
           });
         });
-      });
         scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
-      subTableData.value = tableData;
-    }
-  });
+        subTableData.value = tableData;
+      }
+    });
+  }
+
   const addListItem = () => {
     let keyValue = uuidv4();
     let emptyItem = { key: keyValue };
@@ -186,7 +207,7 @@
   .v-form-render-item {
     overflow: hidden;
   }
-  .card-always{
+  /* .card-always{
     border-color: transparent;
     box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
   }
@@ -196,6 +217,5 @@
   .card-hover:hover{
     border-color: transparent;
     box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
-  }
-
+  } */
 </style>
diff --git a/src/views/demo/form-design/components/VFormCreate/index.vue b/src/views/demo/form-design/components/VFormCreate/index.vue
index 8091f71f..3c58c0ae 100644
--- a/src/views/demo/form-design/components/VFormCreate/index.vue
+++ b/src/views/demo/form-design/components/VFormCreate/index.vue
@@ -67,14 +67,14 @@
         get: () => props.formModel,
         set: (value) => emit('update:formModel', value),
       });
-
+      console.log('props.formConfig', props.formConfig)
       const noHiddenList = computed(() => {
         return (
           props.formConfig.schemas &&
           props.formConfig.schemas.filter((item) => item.hidden !== true)
         );
       });
-
+      console.log('noHiddenList', noHiddenList)
       const fApi = useVModel(props, 'fApi', emit);
 
       const { submit, validate, clearValidate, resetFields, validateField } =
diff --git a/src/views/demo/onlineform/formCall/CallModal.vue b/src/views/demo/onlineform/formCall/CallModal.vue
index 4704c0ee..cfc1c106 100644
--- a/src/views/demo/onlineform/formCall/CallModal.vue
+++ b/src/views/demo/onlineform/formCall/CallModal.vue
@@ -9,8 +9,41 @@
     :title="getTitle"
     @ok="ModalSureClick"
     width="80%"
+    :closeFunc="closeFunc"
   >
-    <BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
+    <template v-if="tabsColumns.length > 1">
+      <a-tabs style="width: 100%" @change="tabsChange">
+        <a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
+          <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
+        </a-tab-pane>
+      </a-tabs>
+    </template>
+
+    <BasicForm
+      ref="myDataBaseFormRef"
+      @register="registerForm"
+      v-if="formModalVisible && tabsColumns.length < 1"
+    />
+    <template v-for="(item, index) in cardLayout" :key="index">
+      <a-row style="width: 100%">
+        <a-col :span="item?.colProps?.span || 24" style="padding: 10px">
+          <a-card
+            :title="item.label"
+            :class="
+              item.shadow === 'always' ? 'card-always' : item.shadow === 'hover' ? 'card-hover' : ''
+            "
+          >
+            <template v-for="(childItem, childIndex) in item.columns[0].children" :key="childIndex">
+              <a-row style="width: 100%; margin-bottom: 10px">
+                <a-col :span="childItem?.colProps?.span || 24">
+                  <CallModalFormItem :data="childItem" />
+                </a-col>
+              </a-row>
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+    </template>
     <a-table
       class="sub-table"
       :columns="subTableColumns"
@@ -37,6 +70,7 @@
         </template>
       </template>
     </a-table>
+    <!-- todo  创建/修改  人/时间 -->
   </BasicModal>
 </template>
 <script lang="ts" setup>
@@ -51,6 +85,8 @@
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { v4 as uuidv4 } from 'uuid';
   import FormItem from './ShowFormModal/FormItem/index.vue';
+  import CallModalFormItem from './CallModalFormItem/index.vue';
+  // import FormRender from '@/views/demo/form-design/components/VFormCreate/components/FormRender.vue';
 
   const emit = defineEmits(['success']);
   const { createMessage } = useMessage();
@@ -60,7 +96,8 @@
   const getTitle = ref();
   const primaryQuery = ref();
   const addQuery: any = ref([]);
-  const formColumns: FormSchema[] = [];
+  const formColumns: any = ref([]);
+  const tabsColumns: any = ref([]);
   const flowCode = ref('');
   const userStore = useUserStore();
   const userInfo: any = userStore.getUserInfo;
@@ -73,47 +110,114 @@
   const subTableData = ref([]);
   const subTableList: any = ref([]);
   const scrollValue = ref();
+  const cardLayout = ref([]);
+  const createOrModifyList = ref([]);
   const [registerModal, { setModalProps, closeModal }] = useModalInner((data: any) => {
     console.log('daaaaa', data);
     isUpdate.value = !!data?.isUpdate;
     isDetail.value = !!data?.isDetail;
+    const arr: FormSchema[] = [];
     data.tab.forEach((item) => {
-      if (item.rules !== undefined) {
-        let myString = item.rules[0].pattern;
-        const lastCharacter = myString.charAt(myString.length - 1);
-        if (lastCharacter === 'i' || lastCharacter === 's') {
-          item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -2), lastCharacter);
-        } else {
-          item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -1));
-        }
-      }
-      formColumns.push(item);
-      subTableColumns.value = [
-        {
-          dataIndex: 'setting',
-          key: 'setting',
-          fixed: 'left',
-          width: 60,
-        },
-      ];
+      if (item.field == 'Tabs') {
+        item.componentProps.options.forEach((val, index) => {
+          val.children.forEach((opt) => {
+            if (opt.rules !== undefined) {
+              let myString = opt.rules[0].pattern;
+              const lastCharacter = myString.charAt(myString.length - 1);
+              if (lastCharacter === 'i' || lastCharacter === 's') {
+                opt.rules[0].pattern = new RegExp(opt.rules[0].pattern.slice(1, -2), lastCharacter);
+              } else {
+                opt.rules[0].pattern = new RegExp(opt.rules[0].pattern.slice(1, -1));
+              }
+            }
+            if (opt.component === 'Card') {
+              cardLayout.value.push(opt);
+            }
+            if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(opt.type)) {
+              createOrModifyList.value.push(opt);
+            }
+            subTableColumns.value = [
+              {
+                dataIndex: 'setting',
+                key: 'setting',
+                fixed: 'left',
+                width: 60,
+              },
+            ];
 
-      if (item.type === 'subTable') {
-        subTableId.value = item.field;
-        let tableData = [];
-        item.columns.forEach((itemColumn) => {
-          itemColumn.children.forEach((itemColumnChild) => {
-            tableData.push(itemColumnChild);
-            subTableColumns.value.push({
-              key: itemColumnChild.field,
-              title: itemColumnChild.label,
-              dataIndex: itemColumnChild.field,
-              ...itemColumnChild,
-              width: 120,
-            });
+            if (opt.type === 'subTable') {
+              subTableId.value = opt.field;
+              let tableData = [];
+              opt.columns.forEach((itemColumn) => {
+                itemColumn.children.forEach((itemColumnChild) => {
+                  tableData.push(itemColumnChild);
+                  subTableColumns.value.push({
+                    key: itemColumnChild.field,
+                    title: itemColumnChild.label,
+                    dataIndex: itemColumnChild.field,
+                    ...itemColumnChild,
+                    width: 120,
+                  });
+                });
+              });
+              scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
+              subTableData.value = tableData;
+            }
+            opt.itemProps.hidden = true;
+            if (index == 0) {
+              opt.itemProps.hidden = false;
+            }
+            arr.push(opt);
+            formColumns.value = arr;
           });
         });
-        scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
-        subTableData.value = tableData;
+        tabsColumns.value = item.componentProps.options;
+        console.log('tabsColumns', tabsColumns.value);
+      } else {
+        if (item.rules !== undefined) {
+          let myString = item.rules[0].pattern;
+          const lastCharacter = myString.charAt(myString.length - 1);
+          if (lastCharacter === 'i' || lastCharacter === 's') {
+            item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -2), lastCharacter);
+          } else {
+            item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -1));
+          }
+        }
+        arr.push(item);
+        formColumns.value = arr;
+        if (item.component === 'Card') {
+          cardLayout.value.push(item);
+        }
+        if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(item.type)) {
+          createOrModifyList.value.push(item);
+        }
+        subTableColumns.value = [
+          {
+            dataIndex: 'setting',
+            key: 'setting',
+            fixed: 'left',
+            width: 60,
+          },
+        ];
+
+        if (item.type === 'subTable') {
+          subTableId.value = item.field;
+          let tableData = [];
+          item.columns.forEach((itemColumn) => {
+            itemColumn.children.forEach((itemColumnChild) => {
+              tableData.push(itemColumnChild);
+              subTableColumns.value.push({
+                key: itemColumnChild.field,
+                title: itemColumnChild.label,
+                dataIndex: itemColumnChild.field,
+                ...itemColumnChild,
+                width: 120,
+              });
+            });
+          });
+          scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
+          subTableData.value = tableData;
+        }
       }
     });
 
@@ -146,7 +250,9 @@
       }, 100);
       subTableList.value = data.recordChildren;
     } else {
-      resetFields();
+      if (tabsColumns.value.length < 1) {
+        resetFields();
+      }
       subTableList.value = [];
     }
     addQuery.value = [];
@@ -162,6 +268,30 @@
     }
   });
 
+  function tabsChange(e) {
+    console.log('eee', e);
+    console.log('tabsColumns', tabsColumns);
+    const columns: FormSchema[] = [];
+    // tabsColumns.value.forEach((item) => {
+    //   item.children.forEach((val) => {
+    //     val.itemProps.hidden = true;
+    //   });
+    // });
+    // tabsColumns.value[e].children.forEach((item) => {
+    //   item.itemProps.hidden = false;
+    // });
+    tabsColumns.value.forEach((item) => {
+      item.children.forEach((val) => {
+        columns.push(val);
+      });
+    });
+    console.log('columns', columns);
+    console.log('formColumns', formColumns);
+    setTimeout(() => {
+      updateSchema(columns);
+      console.log('values', getFieldsValue());
+    }, 100);
+  }
   function generateUniqueDigits(length: number): number[] {
     const digits = new Set<number>();
     while (digits.size < length) {
@@ -187,27 +317,29 @@
     subTableList.value = subTableList.value.filter((item) => item.key != record.key);
   };
 
-  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
-    labelWidth: 100,
-    schemas: formColumns,
-    showActionButtonGroup: false,
-    baseColProps: { lg: 24, md: 24 },
-  });
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, getFieldsValue }] =
+    useForm({
+      labelWidth: 100,
+      schemas: formColumns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
   //表单填写数据
   async function ModalSureClick() {
     try {
       const values = await validate();
+      console.log('values', values);
       let query = values;
       let saveSubTableList = [];
-      subTableList.value.forEach((item) => {
-        let emptyObj = {};
-        for (const key in item) {
-          if (key === 'key') continue;
-          emptyObj[key] = item[key];
-        }
-        saveSubTableList.push(emptyObj);
-      });
-      query[subTableId.value] = JSON.stringify(saveSubTableList);
+      // subTableList.value.forEach((item) => {
+      //   let emptyObj = {};
+      //   for (const key in item) {
+      //     if (key === 'key') continue;
+      //     emptyObj[key] = item[key];
+      //   }
+      //   saveSubTableList.push(emptyObj);
+      // });
+      // query[subTableId.value] = JSON.stringify(saveSubTableList);
       let params: any = {
         schemeId: primaryQuery.value.id,
         isUpdate: isUpdate.value,
@@ -267,4 +399,9 @@
       return createMessage.error('保存草稿失败');
     }
   }
+  const closeFunc = () => {
+    cardLayout.value = [];
+    createOrModifyList.value = [];
+    return true;
+  };
 </script>
diff --git a/src/views/demo/onlineform/formCall/CallModalFormItem/index.vue b/src/views/demo/onlineform/formCall/CallModalFormItem/index.vue
new file mode 100644
index 00000000..c94397ff
--- /dev/null
+++ b/src/views/demo/onlineform/formCall/CallModalFormItem/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div style="display: flex;" v-if="props.data.component !== 'InputGuid'">
+    <div style="width: 85px;">
+      {{ props.data.label }}
+    </div>
+    <Comp
+      v-if="props.data.component === 'Switch'"
+      :options="props.data.componentProps.options"
+      v-model:checked="props.record[props.parent][props.data.field]"
+    />
+    <Comp
+      v-else
+      :style="props.data.component === 'Select' ? 'width:120px' : ''"
+      :options="props.data.componentProps.options"
+      v-model:value="props.record[props.parent][props.data.field]"
+    />
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+  import { defineProps, defineEmits, ref } from 'vue';
+  import { componentMap } from '@/components/Form/src/componentMap';
+  const props = defineProps(['data', 'record','parent']);
+  console.log(props.data,'props.data')
+  const Comp = componentMap.get(props.data.component);
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/onlineform/formCall/CreateFlow.vue b/src/views/demo/onlineform/formCall/CreateFlow.vue
index a616a465..76ec7a87 100644
--- a/src/views/demo/onlineform/formCall/CreateFlow.vue
+++ b/src/views/demo/onlineform/formCall/CreateFlow.vue
@@ -19,6 +19,7 @@
           ref="formBoxRef"
           :formConfig="formConfig"
           :flowFormData="props.flowFormData"
+          :formVerison="designerData.formCurrentNode.formVerison"
           v-if="formVisble"
         />
       </a-tab-pane>
@@ -257,10 +258,12 @@
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
-      scheme.formInfo.schemas.forEach((element) => {
-        if (element.field == designerData.formCurrentNode.formRelationId) {
-          keyValue.value = element.componentProps.fieldName;
-        }
+      scheme.formInfo.tabList.forEach((tabElement) => {
+        tabElement.schemas.forEach((element) => {
+          if (element.field == designerData.formCurrentNode.formRelationId) {
+            keyValue.value = element.componentProps.fieldName;
+          }
+        });
       });
     }
   }
diff --git a/src/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue b/src/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue
new file mode 100644
index 00000000..a9cedb54
--- /dev/null
+++ b/src/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <a-row v-if="isTime && show" style="width:100%;margin-bottom:10px;">
+    <a-col flex="100px" style="display: flex;align-items: center;justify-content: right;padding-right: 7px;">{{ props.data.label }}</a-col>
+    <a-col flex="auto">
+      <a-input  v-model:value="nowTime" readOnly>
+        <template #suffix>
+          <FieldTimeOutlined />
+        </template>
+      </a-input>
+    </a-col>
+  </a-row>
+  <a-row  v-else-if="!isTime && show"  style="width:100%;margin-bottom:10px;" >
+    <a-col flex="100px" style="display: flex;align-items: center;justify-content: right;padding-right: 7px;">{{ props.data.label }}</a-col>
+    <a-col flex="auto">
+      <a-input v-model:value="userName" readOnly>
+        <template #suffix>
+          <UserOutlined />
+        </template>
+      </a-input>
+    </a-col>
+  </a-row>
+  
+
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import { UserOutlined, FieldTimeOutlined } from '@ant-design/icons-vue';
+import dayjs from 'dayjs';
+const props = defineProps(['data'])
+const show = props.data.display
+const isTime = ['createtime', 'modifytime'].includes(props.data.type)
+console.log(show)
+console.log(isTime)
+const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+const userName = localStorage.getItem('fireUserLoginName')
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/onlineform/formCall/index.vue b/src/views/demo/onlineform/formCall/index.vue
index 5d34226c..94e02562 100644
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/src/views/demo/onlineform/formCall/index.vue
@@ -111,7 +111,7 @@
   const mapSetData = ref({
     width: 100,
   });
-  const selectedSubTableDataId = ref("")
+  const selectedSubTableDataId = ref('');
   const formData = ref([]);
   const mapgemoList = ref([]);
   const MapboxComponent = ref();
@@ -309,6 +309,7 @@
     },
     afterFetch: () => {
       const rel = designData.value;
+      console.log('rel', rel);
       let arr: any = [];
       if (rel.primaryKey) {
         rel.db.forEach((val) => {
@@ -319,6 +320,7 @@
           let chlidKey: any = ref();
           if (val.type === 'chlid') {
             getOutKeyList(params).then((res: Recordable) => {
+              console.log('ressss', res)
               if (res[0]) {
                 res[0].db_codecolumnsList.forEach((item) => {
                   if (item.isPrimaryKey == 1) {
@@ -328,29 +330,62 @@
               }
             });
           }
-          rel.formInfo.schemas.forEach((item) => {
-            if (
-              item.componentProps.dataTable == val.name &&
-              rel.primaryKey == item.componentProps.fieldName
-            ) {
-              arr.push({
-                type: val.type,
-                field: item.field,
+          setTimeout(() => {
+            console.log('chlidKey', chlidKey.value)
+          }, 500);
+          
+          if (rel.formInfo.schemas.length > 1) {
+            rel.formInfo.schemas.forEach((item) => {
+              if (
+                item.componentProps.dataTable == val.name &&
+                rel.primaryKey == item.componentProps.fieldName
+              ) {
+                arr.push({
+                  type: val.type,
+                  field: item.field,
+                });
+              }
+              if (
+                val.type == 'chlid' &&
+                val.name == item.componentProps.dataTable &&
+                chlidKey.value == item.componentProps.fieldName
+              ) {
+                arr.push({
+                  type: val.type,
+                  field: item.field,
+                });
+              }
+            });
+          } else {
+            rel.formInfo.schemas[0].componentProps.options.forEach((opt) => {
+              opt.children.forEach((item) => {
+                if (
+                  item.componentProps.dataTable == val.name &&
+                  rel.primaryKey == item.componentProps.fieldName
+                ) {
+                  item.type = val.type;
+                  arr.push({
+                    type: val.type,
+                    field: item.field,
+                  });
+                }
+                if (
+                  val.type == 'chlid' &&
+                  val.name == item.componentProps.dataTable &&
+                  chlidKey.value == item.componentProps.fieldName
+                ) {
+                  item.type = val.type;
+                  arr.push({
+                    type: val.type,
+                    field: item.field,
+                  });
+                }
               });
-            }
-            if (
-              val.type == 'chlid' &&
-              val.name == item.componentProps.dataTable &&
-              chlidKey.value == item.componentProps.fieldName
-            ) {
-              arr.push({
-                type: val.type,
-                field: item.field,
-              });
-            }
-          });
+            });
+          }
         });
       }
+      console.log('after', arr);
       addParamsArr.value = [...new Set(arr)];
     },
     handleSearchInfoFn(info) {
@@ -383,6 +418,7 @@
       // key: 'f_id',
       keyValue: null,
     });
+    console.log('addParamsArr', addParamsArr);
     const str: any = ref(addParamsArr.value[0].field);
     // const str: any = ref('_input_guid_43');
     addParamsArr.value.forEach((item) => {
@@ -394,6 +430,7 @@
     if (rows.length > 0) {
       query.value.keyValue = rows[0][str.value];
     }
+    console.log('config', config)
     switch (status) {
       case 'Add':
         btnList.value.forEach((element) => {
@@ -528,10 +565,41 @@
     getFormsDesignData(params).then((res: Recordable) => {
       let columnObj = JSON.parse(res.entity.scheme);
       let formObj = JSON.parse(res.formScheme.scheme);
-
+      console.log('formObj', formObj);
+      if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 1) {
+        const arr: any = [];
+        formObj.formInfo.tabList.forEach((item, index) => {
+          arr.push({
+            label: item.text,
+            value: index + 1,
+            children: item.schemas,
+          });
+        });
+        formObj.formInfo.schemas = [
+          {
+            component: 'Tabs',
+            label: '选项卡',
+            colProps: {
+              span: 24,
+            },
+            field: 'Tabs',
+            componentProps: {
+              options: arr,
+            },
+            itemProps: {
+              labelCol: {},
+              wrapperCol: {},
+            },
+          },
+        ];
+      }
+      if (formObj.formInfo.tabList && formObj.formInfo.tabList.length == 1) {
+        formObj.formInfo.schemas = formObj.formInfo.tabList[0].schemas;
+      }
+      delete formObj.formInfo.tabList;
       // TODO 判断是否有地图
       let mapgeomData = columnObj.table?.maps;
-      haveMap.value = mapgeomData?.isShowMap || false
+      haveMap.value = mapgeomData?.isShowMap || false;
       if (haveMap.value) {
         mapSetData.value = mapgeomData || {
           isAllowAddPolygon: false,
@@ -598,7 +666,7 @@
   const closeShowFormModal = () => {
     openShowFormModal.value = false;
     MapboxComponent.value.handlerCancleDraw();
-    clearSelectedRowKeys()
+    clearSelectedRowKeys();
     formData.value = [];
   };
   const handRowClick = (record) => {
@@ -617,7 +685,7 @@
     };
     getFormData(params)
       .then((res) => {
-        let childTableName = designData.value.db.find(item => item.type  === 'chlid').name
+        let childTableName = designData.value.db.find((item) => item.type === 'chlid').name;
         let subTableData = res[childTableName].map((item) => {
           return {
             ...item,
@@ -634,12 +702,12 @@
   // 绘图完成返回geom
   const handlerDrawComplete = (geom) => {
     console.log('绘制完成返回的图斑', geom);
-    formData.value.forEach(item => {
-      if(item.key === selectedSubTableDataId.value){
-        console.log(geom[0].value,'geom[0].value')
-        item.MapGeom = geom[0].value
+    formData.value.forEach((item) => {
+      if (item.key === selectedSubTableDataId.value) {
+        console.log(geom[0].value, 'geom[0].value');
+        item.MapGeom = geom[0].value;
       }
-    })
+    });
     // mapgemoList.value = [...geom];
   };
   const mapOnLoad = (map) => {
@@ -660,8 +728,8 @@
     });
   };
   const setSelectedSubTableDataId = (value) => {
-    selectedSubTableDataId.value = value
-  }
+    selectedSubTableDataId.value = value;
+  };
 </script>
 <style lang="less">
   .full-modal {
diff --git a/src/views/demo/onlineform/formModule/modalDesign.vue b/src/views/demo/onlineform/formModule/modalDesign.vue
index fa31354e..76b0183c 100644
--- a/src/views/demo/onlineform/formModule/modalDesign.vue
+++ b/src/views/demo/onlineform/formModule/modalDesign.vue
@@ -208,6 +208,20 @@
     const scheme: any = await functionGetPreviewForm(query);
     formScheme.value = JSON.parse(scheme.scheme);
     const columns: any = [];
+    console.log('formScheme', formScheme.value);
+    if (formScheme.value.formInfo.tabList && formScheme.value.formInfo.tabList.length > 1) {
+      const arr: any = [];
+      formScheme.value.formInfo.tabList.forEach((item, index) => {
+        item.schemas.forEach((val) => {
+          arr.push(val);
+        });
+      });
+      formScheme.value.formInfo.schemas = arr;
+    }
+    if (formScheme.value.formInfo.tabList && formScheme.value.formInfo.tabList.length == 1) {
+      formScheme.value.formInfo.schemas = formScheme.value.formInfo.tabList[0].schemas;
+    }
+    delete formScheme.value.formInfo.tabList;
     formScheme.value.formInfo.schemas.forEach((tab: any) => {
       if (!notInColumns.includes(tab.component)) {
         columns.push(tab);
diff --git a/src/views/demo/onlineform/formModule/modalForm-Modal.vue b/src/views/demo/onlineform/formModule/modalForm-Modal.vue
index 8bb0db0e..21e79f3b 100644
--- a/src/views/demo/onlineform/formModule/modalForm-Modal.vue
+++ b/src/views/demo/onlineform/formModule/modalForm-Modal.vue
@@ -8,7 +8,7 @@
   >
     <div>
       <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-        <div class="m-2 mr-0 w-1/4 xl:w-1/5 overflow-hidden bg-white">
+        <div class="w-1/4 m-2 mr-0 overflow-hidden bg-white xl:w-1/5">
           <BasicTree
             ref="asyncExpandTreeRef"
             title="表单分类"
@@ -18,7 +18,7 @@
             @select="handleSelect"
           />
         </div>
-        <div class="l-rblock m-2 mr-0 overflow-hidden bg-white">
+        <div class="m-2 mr-0 overflow-hidden bg-white l-rblock">
           <BasicTable @register="registerTable" :searchInfo="searchInfo">
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'category'">
@@ -154,6 +154,37 @@
     let query: any = { keyValue: record.schemeId };
     const preview: any = await functionGetPreviewForm(query);
     let scheme = JSON.parse(preview.scheme);
+    if (scheme.formInfo.tabList && scheme.formInfo.tabList.length > 1) {
+      const arr: any = [];
+      scheme.formInfo.tabList.forEach((item, index) => {
+        arr.push({
+          label: item.text,
+          value: index + 1,
+          children: item.schemas,
+        });
+      });
+      scheme.formInfo.schemas = [
+        {
+          component: 'Tabs',
+          label: '选项卡',
+          colProps: {
+            span: 24,
+          },
+          field: 'Tabs',
+          componentProps: {
+            options: arr,
+          },
+          itemProps: {
+            labelCol: {},
+            wrapperCol: {},
+          },
+        },
+      ];
+    }
+    if (scheme.formInfo.tabList && scheme.formInfo.tabList.length == 1) {
+      scheme.formInfo.schemas = scheme.formInfo.tabList[0].schemas;
+    }
+    delete scheme.formInfo.tabList;
     formConfig.value.schemas = scheme.formInfo.schemas;
     Modal?.showModal(cloneDeep(formConfig.value));
   }
diff --git a/src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue b/src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
index f9a51963..92676127 100644
--- a/src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
+++ b/src/views/demo/onlineform/formdesign/modal/AutomaticModal.vue
@@ -59,7 +59,7 @@
 
     <CollapseContainer title="主表">
       <BasicTable
-        @register="dbColumnInfoTable"
+        :dataSource="tableInfo_main.dbColumnInfoList"
         :columns="dbColumnInfoColumns"
         :canResize="false"
         :bordered="true"
@@ -185,13 +185,15 @@
     dbColumnInfoList: [],
   };
   // 主表
-  let tableInfo_main: any = {
+  let tableInfo_main: any = ref({
     dbCode: '',
     tableName: '',
     description: '',
     type: '',
     dbColumnInfoList: [],
-  };
+  });
+  // 主键
+  let primaryKey = '';
   // 子表
   let tableInfo_list: any = ref([]);
   let scheme_chlid_db: any = [];
@@ -225,10 +227,11 @@
     { label: '是否', value: 'bool' },
     { label: '日期', value: 'timestamp' },
   ];
-  // 不需要添加表结构的
-  let notComponentArray = ['Divider'];
+  // 不需要添加的表结构
+  let notComponentArray = ['Divider', 'Button'];
+  // 需要特殊处理的表结构
   let fieldArray = ['MapGeom'];
-  let gridArray = ['Grid'];
+  let gridArray = ['Grid', 'Card'];
 
   const [dbMainTable, { getDataSource: dbMain_getDataSource, setTableData: dbMain_setTableData }] =
     useTable();
@@ -249,14 +252,13 @@
 
     // 表名和备注
     let scheme = JSON.parse(data.saveFormDatas.scheme.scheme);
-    scheme.primaryKey = 'id';
+    // scheme.primaryKey = 'id';
     setDefaultValue(scheme);
     // 制作表格
     scheme = getSchemasReturnScheme(scheme, data.saveFormDatas.info.DbCode, 'father', '');
 
     // 表格赋值
     dbMain_setTableData(scheme.db.concat(scheme_chlid_db));
-    dbColumnInfo_setTableData(tableInfo_main.dbColumnInfoList);
     saveFormDatas = data.saveFormDatas;
     saveFormDatas.scheme.scheme = JSON.stringify(scheme);
   });
@@ -281,7 +283,7 @@
     let chlid_db: any = {};
     if (type == 'father') {
       // 主表
-      schemas = scheme.formInfo.schemas;
+      schemas = scheme.formInfo.tabList[0].schemas;
       tableInfo_temp.name = scheme.db[0].name || scheme.db[0].tableName;
       tableInfo_temp.tableName = scheme.db[0].tableName || scheme.db[0].name;
       tableInfo_temp.description = scheme.db[0].description || '主表';
@@ -361,6 +363,9 @@
           temp.length = 200;
           temp.dataType = 'varchar';
           temp.columnDescription = item.label;
+          if (item.component == 'InputGuid' && temp.tableName === mainTableName) {
+            temp.isPrimarykey = 1;
+          }
           item.dbColumnInfo = temp;
 
           // 编辑-添加新的行
@@ -384,6 +389,9 @@
           temp.length = 200;
           temp.dataType = 'varchar';
           temp.columnDescription = item.label;
+          if (item.component == 'InputGuid' && item.tableName === mainTableName) {
+            temp.isPrimarykey = 0;
+          }
           item.dbColumnInfo = temp;
           // 编辑-添加新的行
           if (type == 'father') {
@@ -405,13 +413,13 @@
     });
 
     if (type == 'father') {
-      tableInfo_main = tableInfo_temp;
+      tableInfo_main.value = tableInfo_temp;
     } else if (type == 'chlid') {
       tableInfo_list.value.push(tableInfo_temp);
     }
 
     if (type == 'father') {
-      scheme.formInfo.schemas = schemas;
+      scheme.formInfo.tabList[0].schemas = schemas;
     } else if (type == 'chlid') {
       scheme.columns[0].children = schemas;
       scheme.columns[0].child_db = chlid_db;
@@ -422,13 +430,14 @@
 
   // 提交
   async function submit() {
+    getRelationField();
     // 主表
     if (props.isAddVisible) {
       // 新增
-      await AddTable(tableInfo_main);
-    } else if (dbColumnInfo_new_list.length == tableInfo_main.dbColumnInfoList.length) {
+      await AddTable(tableInfo_main.value);
+    } else if (dbColumnInfo_new_list.length == tableInfo_main.value.dbColumnInfoList.length) {
       // 暂存后-保存
-      await AddTable(tableInfo_main);
+      await AddTable(tableInfo_main.value);
     } else if (dbColumnInfo_new) {
       // 编辑
       dbColumnInfo_new?.forEach(async (item) => {
@@ -466,11 +475,31 @@
     let schems = JSON.parse(saveFormDatas.scheme.scheme);
     // db
     schems.db = dbMain_getDataSource();
+    schems.db.forEach((item) => {
+      if (item.type == 'chlid') {
+        item.relationField = primaryKey;
+      }
+    });
+    console.log(schems.db);
     saveFormDatas.scheme.scheme = JSON.stringify(schems);
     emit('automatic-modal-submitsuccess', saveFormDatas);
     closeModal();
   }
 
+  // relationField
+  function getRelationField() {
+    if (tableInfo_main.value.dbColumnInfoList.length > 0) {
+      tableInfo_main.value.dbColumnInfoList.forEach((item) => {
+        if (item.isPrimarykey == 1) {
+          primaryKey = item.dbColumnName;
+        }
+      });
+    }
+    let schems = JSON.parse(saveFormDatas.scheme.scheme);
+    schems.primaryKey = primaryKey;
+    saveFormDatas.scheme.scheme = JSON.stringify(schems);
+  }
+
   // 数据格式（默认varchar）变化后修改字段长度
   function isBoolChangeLength(record: Recordable) {
     if (record.dataType == 'bool') {
diff --git a/src/views/demo/workflow/create/preview.vue b/src/views/demo/workflow/create/preview.vue
index 1d5975f8..46afd2d2 100644
--- a/src/views/demo/workflow/create/preview.vue
+++ b/src/views/demo/workflow/create/preview.vue
@@ -18,7 +18,12 @@
     </div>
     <a-tabs v-model:activeKey="activeName" @change="changeActive">
       <a-tab-pane key="form" tab="表单信息" v-if="formVisble">
-        <FormViewer ref="formBoxRef" :formConfig="formConfig" v-if="formVisble" />
+        <FormViewer
+          ref="formBoxRef"
+          :formConfig="formConfig"
+          :formVerison="designerData.formCurrentNode.formVerison"
+          v-if="formVisble"
+        />
       </a-tab-pane>
       <a-tab-pane key="form" tab="系统表单信息" v-if="formUrlVisble">
         <AsyncComponent ref="pcForm" />
@@ -165,7 +170,7 @@
       // 有PC系统表单时
       formUrlVisble.value = true;
       let url = '../../' + currentNode.formUrl + '.vue';
-      console.log(url)
+      console.log(url);
       // AsyncComponent.value = defineAsyncComponent(() => import(url));
       AsyncComponent.value = defineAsyncComponent({
         // 加载函数
@@ -310,10 +315,12 @@
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
-      scheme.formInfo.schemas.forEach((element) => {
-        if (element.field == designerData.formCurrentNode.formRelationId) {
-          keyValue.value = element.componentProps.fieldName;
-        }
+      scheme.formInfo.tabList.forEach((tabElement) => {
+        tabElement.schemas.forEach((element) => {
+          if (element.field == designerData.formCurrentNode.formRelationId) {
+            keyValue.value = element.componentProps.fieldName;
+          }
+        });
       });
     }
   }
diff --git a/src/views/demo/workflow/task/process/audit.vue b/src/views/demo/workflow/task/process/audit.vue
index 8f26930d..1ffc8328 100644
--- a/src/views/demo/workflow/task/process/audit.vue
+++ b/src/views/demo/workflow/task/process/audit.vue
@@ -294,7 +294,6 @@
     }
     designerData.formCurrentNode = currentNode;
     formConfig.value = currentNode.authFields;
-    getFormHistory();
     if (props.isRead == 0) {
       setLogsAndTasks(data.logs, data.tasks);
       getBtns();
@@ -504,7 +503,7 @@
       var querys = {
         schemeId: designerData.formCurrentNode.formVerison,
         isUpdate: true,
-        pkey: keyValue.value,
+        pkey: instanceInfo.pkey,
         pkeyValue: instanceInfo.pkeyValue,
       };
       formBoxRef.value
@@ -654,19 +653,6 @@
       return createMessage.error('失败');
     }
   }
-  async function getFormHistory() {
-    const data = await LoadFormScheme({
-      schemeId: designerData.formCurrentNode.formVerison,
-    });
-    if (data) {
-      const scheme = JSON.parse(data.scheme);
-      scheme.formInfo.schemas.forEach((element) => {
-        if (element.field == designerData.formCurrentNode.formRelationId) {
-          keyValue.value = element.componentProps.fieldName;
-        }
-      });
-    }
-  }
   onBeforeMount(() => {
     getTaskInfo();
   });