diff --git a/src/api/database/index.ts b/src/api/database/index.ts
index 7954cae4..722612b6 100644
--- a/src/api/database/index.ts
+++ b/src/api/database/index.ts
@@ -9,6 +9,8 @@ enum Api {
   GETDATABASEDETAIL = '/api/SysDatabaseLink/GetDataBaseForm', //编辑时获取详情数据
   TEStCONNECTTION = '/api/SysDatabaseLink/TestConnection', //测试连接串是否正确
   createPicTable = '/api/createTable/createTable', //图形化建表
+  updateTable = '/api/CreateTable/UpdateTable', //图形化建表-修改
+  loadTableRecordInfo = '/api/CreateTable/LoadTableRecordInfo', //图形化建表记录
 }
 
 /**
@@ -38,3 +40,9 @@ export const delDataBaseInfo = (params: AccountListItem) =>
 
 export const createPicTable = (params: AccountListItem) =>
   defHttp.post<AccountListGetResultModel>({ url: Api.createPicTable, params });
+
+export const updateTable = (params: AccountParams) =>
+  defHttp.post<AccountListGetResultModel>({ url: Api.updateTable, params });
+
+export const loadTableRecordInfo = (params: AccountParams) =>
+  defHttp.get<AccountListGetResultModel>({ url: Api.loadTableRecordInfo, params });
diff --git a/src/components/FormViewer/cardGourp.vue b/src/components/FormViewer/cardGourp.vue
new file mode 100644
index 00000000..0af5986a
--- /dev/null
+++ b/src/components/FormViewer/cardGourp.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <a-card
+      style="width: 100%"
+      :tab-list="tabListNoTitle"
+      :active-tab-key="noTitleKey"
+      @tabChange="(key) => onTabChange(key)"
+    >
+      <BasicForm ref="cardRef" @register="registerForm" @change="changeForm" />
+      <template v-if="Object.keys(childItem).length > 0">
+        <CardGourp
+          :data="childItem"
+          :parentValue="props.parentValue"
+          :formData="props.formData"
+          v-if="childItem"
+        />
+      </template>
+    </a-card>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  import { CardGourp } from './index';
+  import { ref, watch } from 'vue';
+  import { subTableStore } from '@/store/modules/subTable';
+  import dayjs from 'dayjs';
+
+  const subTableDataStore = subTableStore();
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    parentValue: {
+      type: String,
+      default: () => '',
+    },
+    formData: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
+  const noTitleKey = ref(0);
+  const formColumns = [];
+  const tabListNoTitle: any = ref([]);
+  const tableData = props.data;
+  const childGourp = ref([]);
+  const childItem = ref({});
+  let cardFormData = props.formData;
+  const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+  const userName = localStorage.getItem('fireUserLoginName');
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      schemas: formColumns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
+  console.log(props);
+  watch(
+    () => props.formData,
+    (newVal) => {
+      cardFormData = newVal;
+      formColumns.forEach((element) => {
+        for (const key in cardFormData) {
+          if (element.field == key) {
+            var obj = {};
+            obj[key] = cardFormData[key];
+            subTableDataStore.setGroupData(obj);
+          }
+        }
+      });
+      setTimeout(() => {
+        setFieldsValue(subTableDataStore.getGroupData);
+      }, 10);
+    },
+    { deep: true },
+  );
+  if (tableData.componentProps) {
+    tableData.componentProps.options.forEach((element, index) => {
+      tabListNoTitle.value.push({
+        key: index,
+        tab: element.label,
+        ...element,
+        index: index,
+      });
+      element.children.forEach((childElement) => {
+        formColumns.push({
+          parentValue: element.field,
+          ...childElement,
+          show: index == 0 ? true : false,
+          index: index,
+        });
+        if (childElement.component == 'CardGroup') {
+          childGourp.value.push({
+            ...childElement,
+            index: index,
+          });
+        }
+        if (['createuser', 'modifyuser'].includes(childElement.type)) {
+          var obj = {};
+          obj[childElement.field] = userName;
+          console.log(obj);
+          subTableDataStore.setGroupData(obj);
+        }
+        if (['createtime', 'modifytime'].includes(childElement.type)) {
+          var obj = {};
+          obj[childElement.field] = nowTime.value;
+          console.log(obj);
+          subTableDataStore.setGroupData(obj);
+        }
+      });
+    });
+  }
+  setTimeout(() => {
+    resetFields();
+  }, 10);
+
+  const onTabChange = (value: string) => {
+    noTitleKey.value = value;
+    var currentIndex = (childGourp.value || []).findIndex((element) => element.index === value);
+    console.log(currentIndex);
+    if (currentIndex == -1) {
+      childItem.value = {};
+    } else {
+      childItem.value = childGourp.value[currentIndex];
+    }
+    formColumns.forEach((element) => {
+      element.show = false;
+      updateSchema([{ field: element.field, show: false }]);
+      if (element.index == value) {
+        element.show = true;
+        updateSchema([{ field: element.field, show: true }]);
+      }
+    });
+    setTimeout(() => {
+      resetFields();
+      setFieldsValue(subTableDataStore.getGroupData);
+    }, 10);
+  };
+  function changeForm() {
+    subTableDataStore.setGroupData(getFieldsValue());
+  }
+</script>
diff --git a/src/components/FormViewer/index.ts b/src/components/FormViewer/index.ts
index 2ae3ee6f..497681a4 100644
--- a/src/components/FormViewer/index.ts
+++ b/src/components/FormViewer/index.ts
@@ -1,2 +1,3 @@
 export { default as FormViewer } from './index.vue';
 export { default as SubTable } from './subTable.vue';
+export { default as CardGourp } from './cardGourp.vue';
diff --git a/src/components/FormViewer/index.vue b/src/components/FormViewer/index.vue
index 244ea990..165ee9ba 100644
--- a/src/components/FormViewer/index.vue
+++ b/src/components/FormViewer/index.vue
@@ -5,6 +5,12 @@
         <a-tab-pane v-for="(colItem, index) in tabsColumns" :tab="colItem.label" :key="index">
           <BasicForm ref="myDataBaseFormRef" @register="registerForm" />
           <subTable ref="subTableRef" :data="subTableColumns[index]" :tabsKey="tabsKey" />
+          <CardGourp
+            v-if="cardGroupData.length > 0"
+            :data="cardGroupData[index]"
+            :formData="cardGourpFormData"
+            :parentValue="cardGroupData[index].field"
+          />
         </a-tab-pane>
       </a-tabs>
     </template>
@@ -13,7 +19,9 @@
       @register="registerForm"
       v-if="formModalVisible && tabsColumns.length < 1"
     />
+    <!-- 设计子表 -->
     <subTable v-if="formModalVisible && tabsColumns.length < 1" :data="subTableColumns[0]" />
+    <!-- 卡片 -->
     <template v-for="(item, index) in cardLayout" :key="index">
       <a-row style="width: 100%">
         <a-col :span="item?.colProps?.span || 24" style="padding: 10px">
@@ -38,6 +46,15 @@
         </a-col>
       </a-row>
     </template>
+    <!-- 卡片组 -->
+    <template v-if="formModalVisible && tabsColumns.length < 1">
+      <CardGourp
+        v-if="cardGroupData.length > 0"
+        :data="cardGroupData[0]"
+        :formData="cardGourpFormData"
+        :parentValue="cardGroupData[0].field"
+      />
+    </template>
     <!-- todo  创建/修改  人/时间 -->
     <template v-for="(item, index) in createOrModifyList" :key="index">
       <CreateOrModifyComponent :data="item" />
@@ -52,10 +69,11 @@
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import CallModalCardFormItem from '@/views/demo/onlineform/formCall/CallModalFormItem/index.vue';
   import CreateOrModifyComponent from '@/views/demo/onlineform/formCall/CreateOrModifyComponent/index.vue';
-  import { SubTable } from './index';
+  import { SubTable, CardGourp } from './index';
   import { v4 as uuidv4 } from 'uuid';
   import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
   import { subTableStore } from '@/store/modules/subTable';
+  import dayjs from 'dayjs';
 
   const subTableDataStore = subTableStore();
 
@@ -83,6 +101,11 @@
   const keyValue = ref('');
   const FieldsValue = ref({});
   const subTableRef = ref<any>();
+  const cardGroupData = ref([]);
+  const cardGourpFormData = ref({});
+  subTableDataStore.clearGoupData();
+  const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+  const userName = localStorage.getItem('fireUserLoginName');
   const getCardLayoutKey = (dataList, key) => {
     dataList.forEach((item) => {
       if (item.component === 'Card') {
@@ -109,9 +132,11 @@
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
+      console.log(scheme);
       subTableColumns.value = [];
       // 将card组件嵌套起来
       scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
+      console.log(scheme.formInfo.tabList);
       subTableDB.value = scheme.db;
       let disDetail = false;
       let tableColumns = [];
@@ -123,6 +148,7 @@
           multiterm: '',
         });
         tabElement.schemas.forEach((element) => {
+          console.log(element);
           if (element.field == props.formRelationId) {
             keyValue.value = element.componentProps.fieldName;
             getFormDetail();
@@ -192,6 +218,13 @@
               });
             });
           }
+          // 卡片组布局
+          if (element.component === 'CardGroup') {
+            console.log(element);
+            cardGroupData.value.push({
+              ...element,
+            });
+          }
           formColumns.push({
             parentValue: index,
             ...element,
@@ -208,10 +241,10 @@
         }
       });
       formModalVisible.value = true;
+      console.log(formColumns);
       setTimeout(() => {
         subTableDataStore.setTableData(tableColumns);
         resetFields();
-        console.log(props.flowFormData);
         if (!disDetail) {
           console.log('赋值赋值');
           if (props.flowFormData) {
@@ -230,6 +263,7 @@
         element.show = true;
       }
     });
+    console.log(formColumns);
     // 切换时保存值
     const values = await validate();
     if (Object.keys(FieldsValue.value).length == 0) {
@@ -258,16 +292,11 @@
       keyValue: instance.pkeyValue,
     };
     const data = await functionGetFormDataFormScheme(querys);
-    console.log(data);
-    console.log(subTableDB.value);
-    console.log(subTableDataStore.getTableData);
     let obj = new Object();
     for (var i in data) {
       subTableDB.value.forEach((element) => {
         if (element.type == 'chlid') {
           subTableDataStore.getTableData.forEach((element) => {
-            console.log(element);
-            console.log(data[i]);
             if (element.dataTable == i) {
               subTableDataStore.setSingleData(element.parentFileId, data[i]);
             }
@@ -280,21 +309,24 @@
       });
     }
     console.log(obj);
+    cardGourpFormData.value = obj;
     FieldsValue.value = obj;
     setFieldsValue({
       ...obj,
     });
-    let childTableName = subTableDB.value.find((item) => item.type === 'chlid').name;
-    let mainTableName = subTableDB.value.find((item) => item.type === 'main').name;
-    infoUseSubTableData.value = data[childTableName].map((item) => {
-      return {
-        ...item,
-        key: uuidv4(),
-      };
-    });
-    data[mainTableName].forEach((item) => {
-      infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
-    });
+    if (subTableDB.value.length > 1) {
+      let childTableName = subTableDB.value.find((item) => item.type === 'chlid').name;
+      let mainTableName = subTableDB.value.find((item) => item.type === 'main').name;
+      infoUseSubTableData.value = data[childTableName].map((item) => {
+        return {
+          ...item,
+          key: uuidv4(),
+        };
+      });
+      data[mainTableName].forEach((item) => {
+        infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
+      });
+    }
     if (Object.keys(cardValues.value).length > 0) {
       Object.keys(cardValues.value).forEach((cardItem) => {
         let cardItemKeyList = Object.keys(cardValues.value[cardItem]);
@@ -313,7 +345,6 @@
     }
   }
   async function getForm() {
-    console.log(subTableDataStore.getTableData);
     try {
       let values = await validate();
       for (const key in values) {
@@ -339,6 +370,23 @@
           query[item.parentFileId] = JSON.stringify(item.child);
         });
       }
+      // 储存卡片组信息
+      if (Object.keys(subTableDataStore.getGroupData).length > 0) {
+        for (const key in subTableDataStore.getGroupData) {
+          query[key] = subTableDataStore.getGroupData[key];
+        }
+      }
+      console.log(query);
+      // 存储创建人、创建时间等内容
+      if (createOrModifyList.value.length > 0) {
+        createOrModifyList.value.forEach((item) => {
+          if (item.type == 'createuser' || item.type == 'modifyuser') {
+            query[item.field] = userName;
+          } else if (item.type == 'createtime' || item.type == 'modifytime') {
+            query[item.field] = nowTime.value;
+          }
+        });
+      }
       console.log(query);
       return query;
     } catch (error) {
diff --git a/src/components/FormViewer/subTable.vue b/src/components/FormViewer/subTable.vue
index 9bcef40d..1676a0db 100644
--- a/src/components/FormViewer/subTable.vue
+++ b/src/components/FormViewer/subTable.vue
@@ -6,7 +6,8 @@
       :data-source="tableData"
       :pagination="false"
       :scroll="scrollValue"
-    >
+      >
+      <!-- v-if="props.data.multiterm" -->
       <template #headerCell="{ column, record }">
         <template v-if="column.key === 'setting'">
           <PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
@@ -25,6 +26,7 @@
         </template>
       </template>
     </a-table>
+    <!-- <BasicForm ref="subTableRef" @register="registerForm"  @change="changeData" v-else /> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -34,10 +36,10 @@
   import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { subTableStore } from '@/store/modules/subTable';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicForm, useForm } from '@/components/Form';
 
   const { createMessage } = useMessage();
   const subTableDataStore = subTableStore();
-
   const scrollValue = ref();
   const columns: any = ref([
     {
@@ -58,18 +60,23 @@
       default: '',
     },
   });
-  console.log(props);
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      schemas: columns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
 
   onMounted(() => {
-    console.log(subTableDataStore.getTableData);
     subTableDataStore.getTableData.forEach((element) => {
       if (element.parentFileId == props.data.parentFileId) {
-        console.log(element);
         tableData.value = element.child;
       }
     });
   });
   props.data.child.forEach((element) => {
+    console.log(element);
     if (element.component != 'InputGuid') {
       columns.value.push({
         ...element,
@@ -79,7 +86,6 @@
   watch(
     () => tableData.value,
     (newVal) => {
-      console.log(newVal);
       subTableDataStore.setSingleData(props.data.parentFileId, newVal);
     },
     { deep: true },
@@ -113,4 +119,7 @@
   defineExpose({
     getData,
   });
+  function changeData(){
+    console.log(tableData.value)
+  }
 </script>
diff --git a/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
index 573be10e..460ca58c 100644
--- a/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/ProcessDesigner/package/designer/ProcessDesigner.vue
@@ -228,7 +228,7 @@
       await process.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
         const json = JSON.parse(convert.xml2json(xml, { spaces: 2 }));
         const flowElements = json.elements[0].elements[0].elements;
-        console.log(flowElements)
+        console.log(flowElements);
         for (var j = 0; j < flowElements.length; j++) {
           if (flowElements[j].attributes.name) {
             flowWfDataStore.setWfDataName(
@@ -236,6 +236,21 @@
               flowElements[j].attributes.name,
             );
           }
+          if (flowElements[j].name == 'bpmn2:sequenceFlow') {
+            const currentNode = flowWfDataStore.getWfDataNode(flowElements[j].attributes.id);
+            if (currentNode) {
+              flowWfDataStore.updataWfDataNode(
+                flowElements[j].attributes.id,
+                'from',
+                flowElements[j].attributes.sourceRef,
+              );
+              flowWfDataStore.updataWfDataNode(
+                flowElements[j].attributes.id,
+                'to',
+                flowElements[j].attributes.targetRef,
+              );
+            }
+          }
         }
       });
       // try {
diff --git a/src/components/ProcessDesigner/package/penal/myline/index.vue b/src/components/ProcessDesigner/package/penal/myline/index.vue
index c3cb7378..da5f6a86 100644
--- a/src/components/ProcessDesigner/package/penal/myline/index.vue
+++ b/src/components/ProcessDesigner/package/penal/myline/index.vue
@@ -55,6 +55,8 @@
         const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
         if (currentNode) {
           node.value = currentNode;
+          node.value.from = newVal.from;
+          node.value.to = newVal.to;
         } else {
           node.value = newVal;
         }
diff --git a/src/components/ProcessDesigner/package/penal/startEvent/index.vue b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
index 3649f424..34ece914 100644
--- a/src/components/ProcessDesigner/package/penal/startEvent/index.vue
+++ b/src/components/ProcessDesigner/package/penal/startEvent/index.vue
@@ -163,6 +163,7 @@
   import { flowStore } from '@/store/modules/flow';
   import { SelectForm } from '@/components/SelectForm/index';
   import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
+  import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -339,6 +340,7 @@
       label?: string;
       value?: string;
     }[] = [];
+    scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
     scheme.formInfo.tabList.forEach((tabElement) => {
       tabElement.schemas.forEach(
         (element: { label?: string; field?: string; component: any; itemProps: any }) => {
@@ -360,6 +362,7 @@
               'CreateTime',
               'ModifyUser',
               'ModifyTime',
+              'CardGroup',
             ].includes(element.component) &&
             !element.itemProps.hidden
           ) {
@@ -436,6 +439,18 @@
             obj.ifShow = true;
             obj.fieldName = element.componentProps.fieldName;
             fields.push(obj);
+          } else if (['CardGroup'].includes(element.component)) {
+            element.componentProps.options.forEach((optionsElement) => {
+              optionsElement.children.forEach((childrenElement) => {
+                let obj: any = childrenElement;
+                obj.required = childrenElement.itemProps.required;
+                // obj.componentProps.disabled = false;
+                obj.disabled = true;
+                obj.ifShow = true;
+                obj.fieldName = childrenElement.componentProps.fieldName;
+                fields.push(obj);
+              });
+            });
           }
         },
       );
diff --git a/src/components/ProcessDesigner/package/penal/userTask/index.vue b/src/components/ProcessDesigner/package/penal/userTask/index.vue
index 7301b74a..46558600 100644
--- a/src/components/ProcessDesigner/package/penal/userTask/index.vue
+++ b/src/components/ProcessDesigner/package/penal/userTask/index.vue
@@ -512,6 +512,7 @@
   import { flowStore } from '@/store/modules/flow';
   import { SelectForm } from '@/components/SelectForm/index';
   import { functionGetSchemePageList, functionLoadFormPage } from '@/api/demo/formScheme';
+  import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
 
   const flowWfDataStore = flowStore();
   const labelCol = { span: 7 };
@@ -894,6 +895,7 @@
       label?: string;
       value?: string;
     }[] = [];
+    scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
     scheme.formInfo.tabList.forEach((tabElement) => {
       tabElement.schemas.forEach(
         (element: { label?: string; field?: string; component: any; itemProps: any }) => {
@@ -914,6 +916,7 @@
               'CreateTime',
               'ModifyUser',
               'ModifyTime',
+              'CardGroup',
             ].includes(element.component) &&
             !element.itemProps.hidden
           ) {
@@ -990,6 +993,18 @@
             obj.ifShow = true;
             obj.fieldName = element.componentProps.fieldName;
             fields.push(obj);
+          } else if (['CardGroup'].includes(element.component)) {
+            element.componentProps.options.forEach((optionsElement) => {
+              optionsElement.children.forEach((childrenElement) => {
+                let obj: any = childrenElement;
+                obj.required = childrenElement.itemProps.required;
+                // obj.componentProps.disabled = false;
+                obj.disabled = true;
+                obj.ifShow = true;
+                obj.fieldName = childrenElement.componentProps.fieldName;
+                fields.push(obj);
+              });
+            });
           }
         },
       );
diff --git a/src/store/modules/subTable.ts b/src/store/modules/subTable.ts
index e6e45fa5..afbf909f 100644
--- a/src/store/modules/subTable.ts
+++ b/src/store/modules/subTable.ts
@@ -4,24 +4,36 @@ export const subTableStore = defineStore({
   id: 'subTable',
   state: () => ({
     tableDta: [],
+    groupData: {},
   }),
   getters: {
     getTableData(state) {
       return state.tableDta;
     },
+    getGroupData(state) {
+      return state.groupData;
+    },
   },
   actions: {
     setTableData(data) {
       this.tableDta = data;
     },
     setSingleData(parentFileId, data) {
-      console.log(parentFileId);
-      console.log(data);
       this.tableDta.forEach((item, i) => {
         if (item.parentFileId == parentFileId) {
           item.child = data;
         }
       });
     },
+    setGroupData(data) {
+      for (const key2 in data) {
+        if (data[key2] != undefined) {
+          this.groupData[key2] = data[key2];
+        }
+      }
+    },
+    clearGoupData() {
+      this.groupData = {};
+    },
   },
 });
diff --git a/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue b/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
index b282b91c..7aff20cc 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
@@ -108,6 +108,7 @@
               'Cascader',
               'AutoComplete',
               'Tabs',
+              'CardGroup'
             ].includes(formConfig.currentItem.component)
           "
         >
@@ -246,7 +247,7 @@
           if (data && data[0]) {
             data[0].db_codecolumnsList.forEach((item) => {
               arr.push({
-                label: item.dbColumnName,
+                label: item.dbColumnName + '(' + item.description + ')',
                 value: item.dbColumnName,
                 csType: item.csType,
               });
diff --git a/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue b/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
index f9604d3b..0ff3ccd7 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormItemProps.vue
@@ -137,7 +137,6 @@
               v-bind="item.componentProps"
               :is="item.component"
               v-model:value="formConfig.currentItem[item.name]"
-              :key="formConfig.currentItem.component + '===' + formConfig.currentItem.label"
             />
           </FormItem>
         </div>
diff --git a/src/views/demo/form-design/components/VFormDesign/components/FormNode.vue b/src/views/demo/form-design/components/VFormDesign/components/FormNode.vue
index 867cca6a..7f30d187 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormNode.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormNode.vue
@@ -3,7 +3,7 @@
 -->
 <template>
   <div
-    class="drag-move-box"
+    class="drag-move-box component-border"
     @click.stop="handleSelectItem"
     :class="{ active: schema.key === formConfig.currentItem?.key }"
   >
@@ -51,3 +51,8 @@
     },
   });
 </script>
+<style lang="scss" scoped>
+.component-border{
+  border: 1px solid #d9d9d9
+}
+</style>
diff --git a/src/views/demo/form-design/components/VFormDesign/components/FormNodeOperate.vue b/src/views/demo/form-design/components/VFormDesign/components/FormNodeOperate.vue
index 1b1a587d..f9b31ce3 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormNodeOperate.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormNodeOperate.vue
@@ -47,8 +47,21 @@
           schemas.some((formItem, index) => {
             const { component, key } = formItem;
             // 处理栅格和标签页布局
-            ['Grid', 'Tabs'].includes(component) &&
-              formItem.columns?.forEach((item) => traverse(item.children));
+            if(['Grid', 'Tabs','Card', 'CardGroup'].includes(component)){
+              switch(component){
+                case 'Grid':
+                case 'Card':
+                  formItem.columns?.forEach((item) => traverse(item.children))
+                  break;
+                case 'Tabs':
+                case 'CardGroup':
+                  console.log(formItem,'formItem')
+                  formItem?.componentProps?.options?.forEach(optionItem => {
+                    traverse(optionItem.children)
+                  })
+                  break;
+              }
+            }
             if (key === props.currentItem.key) {
               let params: IVFormComponent =
                 schemas.length === 1
diff --git a/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue b/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
index c7a32a44..8ac1a6ac 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue
@@ -39,6 +39,7 @@
   import message from '../../../utils/message';
   import { Input } from 'ant-design-vue';
   import Icon from '@/components/Icon/Icon.vue';
+  import { v4 as uuidv4 } from 'uuid';
 
   export default defineComponent({
     name: 'FormOptions',
@@ -59,6 +60,13 @@
             value: '' + len,
             children: [],
           });
+        }else if (['CardGroup'].includes(formConfig.value.currentItem!.component)) {
+          formConfig.value.currentItem!.componentProps![key].push({
+            label: `卡片${len}`,
+            value: '' + len,
+            field: `use_card_${uuidv4()}`,
+            children: [],
+          });
         } else {
           formConfig.value.currentItem!.componentProps![key].push({
             label: `选项${len}`,
diff --git a/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue b/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
index 97558ff9..aa11db53 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
@@ -7,10 +7,11 @@
   <Col v-bind="colPropsComputed">
     <template v-if="['Grid','Card'].includes(schema.component)">
       <div
-        class="grid-box"
+        class="grid-box component-border"
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
+      {{  schema.label }}
         <Row class="grid-row" v-bind="schema.componentProps">
           <Col
             class="grid-col"
@@ -49,7 +50,7 @@
     </template>
     <template v-else-if="['Tabs'].includes(schema.component)">
       <div
-        class="grid-box"
+        class="grid-box component-border"
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
@@ -84,6 +85,45 @@
         <FormNodeOperate :schema="schema" :currentItem="currentItem" />
       </div>
     </template>
+    <template v-else-if="['CardGroup'].includes(schema.component)">
+      <div
+        class="grid-box component-border"
+        :class="{ active: schema.key === currentItem.key }"
+        @click.stop="handleSetSelectItem(schema)"
+      >
+        {{ schema.label  }}
+        <a-radio-group v-model:value="cardGroupRadio" :options="schema.componentProps.options" />
+        <div class="list-main draggable-box" v-for="(colItem, index) in schema.componentProps.options" :tab="colItem.label" :key="index">
+          <draggable
+            v-show="cardGroupRadio == colItem.value"
+            class="list-main draggable-box"
+            style="min-height: 50px"
+            :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
+            v-bind="{
+              group: 'form-draggable',
+              ghostClass: 'moving',
+              animation: 180,
+              handle: '.drag-move',
+            }"
+            item-key="key"
+            v-model="colItem.children"
+            @start="$emit('dragStart', $event, colItem.children)"
+            @add="$emit('handleColAdd', $event, colItem.children)"
+          >
+            <template #item="{ element }">
+              <LayoutItem
+                class="drag-move"
+                :schema="element"
+                :current-item="currentItem"
+                @handle-copy="$emit('handle-copy')"
+                @handle-delete="$emit('handle-delete')"
+              />
+            </template>
+          </draggable>
+        </div>
+        <FormNodeOperate :schema="schema" :currentItem="currentItem" />
+      </div>
+    </template>
     <FormNode
       v-else
       :key="schema.key"
@@ -95,13 +135,14 @@
   </Col>
 </template>
 <script lang="ts">
-  import { computed, defineComponent, PropType, reactive, toRefs } from 'vue';
+  import { computed, defineComponent, PropType, reactive, toRefs, ref } from 'vue';
   import draggable from 'vuedraggable';
   import FormNode from './FormNode.vue';
   import FormNodeOperate from './FormNodeOperate.vue';
   import { useFormDesignState } from '../../../hooks/useFormDesignState';
   import { IVFormComponent } from '../../../typings/v-form-component';
   import { Row, Col } from 'ant-design-vue';
+  import { v4 as uuidv4 } from 'uuid';
 
   export default defineComponent({
     name: 'LayoutItem',
@@ -140,13 +181,24 @@
       const layoutTag = computed(() => {
         return formConfig.value.layout === 'horizontal' ? 'Col' : 'div';
       });
-
+      // 控制卡片组
+      const cardGroupRadio = ref()
+      if(props.schema.component === 'CardGroup'){
+        // 为卡片组的孩子卡片分配field
+        props.schema.componentProps.options = props.schema.componentProps.options?.map(item => {
+          return {...item,field:`use_card_${uuidv4()}`}
+        })
+        if(props.schema.componentProps.options.length > 0){
+          cardGroupRadio.value = props.schema.componentProps.options[0].value
+        }
+      }
       return {
         ...toRefs(state),
         colPropsComputed,
         handleSetSelectItem,
         layoutTag,
         list1,
+        cardGroupRadio,
       };
     },
   });
@@ -162,3 +214,8 @@
     background-color: rgb(240 191 195);
   }
 </style>
+<style lang="scss" scoped>
+.component-border{
+  border: 1px solid #d9d9d9
+}
+</style>
diff --git a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts
index cc1baf6e..76408ae5 100644
--- a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts
+++ b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsConfig.ts
@@ -185,7 +185,7 @@ export const baseFormItemProps: IBaseFormAttrs[] = [
     label: '控件-FormItem',
     component: Select,
     componentProps: {
-      options: baseComponents.concat(customComponents[0]).map((item) => ({
+      options: baseComponents.concat(customComponents[1]).map((item) => ({
         value: item.component,
         label: item.label,
         key: item.component + '===' + item.label,
diff --git a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
index ce8fa851..ffa8cca7 100644
--- a/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
+++ b/src/views/demo/form-design/components/VFormDesign/config/formItemPropsScript.ts
@@ -20,27 +20,14 @@ loginUser:当前登录者信息
 callback:回调方法,在脚本里使用了http方法后才需要使用';
 `;
 
-export const formItemPropsScript = `
+export const formItemPropsScript__ = `
 // 示例代码,只支持ES5语法
-// 获取表单是新增还是编辑
-var isUpdate = utils.isUpdate();
-
-// 组件id
-var id = utils.prop
-// 组件变更数据
-var data = utils.data
-// 子组件变更行号 rowIndex
-var rowIndex = utils.rowIndex
-
-// 获取主表数据
-var value = utils.get('组件id')
 // 获取子表行数据
 var childRow = utils.get('子表组件id.行号')
 // 获取子表单元格数据
 var childCell = utils.get('子表组件id.行号.单元格组件id')
 
-// 设置主表数据
-utils.set({path:'组件id',value:'xxxx'})
+
 // 添加子表行数据
 var row = {}
 utils.set({path:'子表组件id',value:row,type:'addTable'})
@@ -48,13 +35,6 @@ utils.set({path:'子表组件id',value:row,type:'addTable'})
 utils.set({path:'子表组件id.行号',type:'deleteTable'})
 // 设置子表某一个单元格数据
 utils.set({path:'子表组件id.行号.单元格组件id',value:'xxxxxx'})
-
-// 获取主表字段显示值（针对下拉框等）
-var label = utils.getLabel('组件id')
-// 获取子表单元格显示值
-var cellLabel =  utils.getLabel('子表组件id.行号.单元格组件id')
-
-
 // 去掉子表某一行删除按钮
 utils.set({path:'子表组件id.行号.hasNoDeleteBtn',value:false})
 // 让子表某一行变成不可编辑
@@ -62,47 +42,20 @@ utils.set({path:'子表组件id.行号.disabled',value:true})
 // 让子表某一行除了某一列外不可以编辑
 utils.set({path:'子表组件id.行号.disabled',value:true})
 utils.set({path:'子表组件id.行号.abledList',value:['编辑列组件id']})
-
-
-// 显示表单加载动画
-utils.loading('数据加载中')
-// 关闭表单加载状态
-utils.hideLoading('数据加载中')
-
-
-
-// get请求
-// 需要用到回调方法
-var getCallback = function(res){ console.log(res)//请求结果 }
-utils.httpGet({url:api地址,params:{},getCallback})
-
-// post请求
-// 需要用到回调方法
-var postCallback = function(res){ console.log(res)//请求结果 }
-utils.httpPost({url:api地址,params:{},data:{},postCallback})
-
-// put请求
-// 需要用到回调方法
-var putCallback = function(res){ console.log(res)//请求结果 }
-utils.httpPut({url:api地址,params:{},data:{},putCallback})
-
-// post请求
-// 需要用到回调方法
-var deleteCallback = function(res){ console.log(res)//请求结果 }
-utils.httpDelete({url:api地址,params:{},data:{},deleteCallback})
-
-// 如果用来上述的请求，用了回掉方法，请最后写
-return 'callback'
 `;
 
-export function addBreakLines(text: string): string {
-    // 根据换行符分割文本为行
-    const lines = text.split(/\r?\n/);
-    // 在每行后面添加
-    return lines.map((line) => line + '<br />').join('');
-};
+export const formItemPropsScript = `
+// 获取表单是新增还是编辑
+var isUpdate = utils.isUpdate();
+// 组件变更数据
+var data = utils.data();
+
+// 数据设置
+// 获取主表数据
+utils.getValue('组件的字段标识');
+// 设置主表数据
+setFieldsValue(utils.setValue('组件的字段标识', '设置的值'));
 
-export const formItemPropsScript__ = `
 // 组件设置
 // 设置组件为隐藏
 formColumns.value = utils.setHide('组件的字段标识', false);
@@ -125,4 +78,26 @@ utils.message('提示信息', '提示类型');
 var loginUser = utils.loginUser();
 loginUser返回值为{ account: 账号, name: 姓名 }
 
+// 回调方法
+// get请求
+// 需要用到回调方法
+// 例子：let resGet = await utils.httpGet('/api/FormScheme/LoadFormPage', { page: 1, limit: 10 });
+let resGet = await utils.httpGet(url, params);
+url:api地址, params:参数
+
+// post请求
+let resPost = await utils.httpPost(url, params);
+url:api地址, params:参数
+
+// put请求
+// 需要用到回调方法
+let resPut = await utils.httpPut(url, params);
+url:api地址, params:参数
 `;
+
+export function addBreakLines(text: string): string {
+    // 根据换行符分割文本为行
+    const lines = text.split(/\r?\n/);
+    // 在每行后面添加
+    return lines.map((line) => line + '<br />').join('');
+};
\ No newline at end of file
diff --git a/src/views/demo/form-design/components/VFormDesign/modules/FormComponentPanel.vue b/src/views/demo/form-design/components/VFormDesign/modules/FormComponentPanel.vue
index 6b1b12bd..21cc5103 100644
--- a/src/views/demo/form-design/components/VFormDesign/modules/FormComponentPanel.vue
+++ b/src/views/demo/form-design/components/VFormDesign/modules/FormComponentPanel.vue
@@ -140,6 +140,8 @@
       }
 
       .list-main {
+        height: 100%;
+        overflow-y: scroll;
         // 列表动画
         .list-enter-active {
           transition: all 0.5s;
diff --git a/src/views/demo/form-design/core/formItemConfig.ts b/src/views/demo/form-design/core/formItemConfig.ts
index be1ed2b7..9e4f34d5 100644
--- a/src/views/demo/form-design/core/formItemConfig.ts
+++ b/src/views/demo/form-design/core/formItemConfig.ts
@@ -426,16 +426,16 @@ export const baseComponents: IVFormComponent[] = [
       ],
     },
   },
-  {
-    component: 'Upload',
-    label: '上传',
-    icon: 'ant-design:upload-outlined',
-    field: '',
-    colProps: { span: 24 },
-    componentProps: {
-      api: () => 1,
-    },
-  },
+  // {
+  //   component: 'Upload',
+  //   label: '上传',
+  //   icon: 'ant-design:upload-outlined',
+  //   field: '',
+  //   colProps: { span: 24 },
+  //   componentProps: {
+  //     api: () => 1,
+  //   },
+  // },
   {
     component: 'Cascader',
     label: '级联选择',
@@ -662,4 +662,27 @@ export const layoutComponents: IVFormComponent[] = [
       gutter: 0,
     },
   },
+  {
+    component: 'CardGroup',
+    label: '卡片组',
+    icon: 'ic:round-auto-awesome-motion',
+    colProps: { span: 24 },
+    field: '',
+    componentProps: {
+      options: [
+        {
+          label: '卡片1',
+          value: '1',
+          field:`use_card_1`,
+          children: [],
+        },
+        {
+          label: '卡片2',
+          field:`use_card_2`,
+          value: '2',
+          children: [],
+        },
+      ],
+    },
+  },
 ];
diff --git a/src/views/demo/form-design/utils/index.ts b/src/views/demo/form-design/utils/index.ts
index f902ce33..bdfbc219 100644
--- a/src/views/demo/form-design/utils/index.ts
+++ b/src/views/demo/form-design/utils/index.ts
@@ -90,14 +90,16 @@ export function toLine(str: string) {
 export function formItemsForEach(array: IVFormComponent[], cb: (item: IVFormComponent) => void) {
   if (!isArray(array)) return;
   const traverse = (schemas: IVFormComponent[]) => {
-    schemas.forEach((formItem: IVFormComponent) => {
-      if (['Grid'].includes(formItem.component)) {
-        // 栅格布局
-        formItem.columns?.forEach((item) => traverse(item.children));
-      } else {
-        cb(formItem);
-      }
-    });
+    if (schemas) {
+      schemas.forEach((formItem: IVFormComponent) => {
+        if (['Grid'].includes(formItem.component)) {
+          // 栅格布局
+          formItem.columns?.forEach((item) => traverse(item.children));
+        } else {
+          cb(formItem);
+        }
+      });
+    }
   };
   traverse(array);
 }
diff --git a/src/views/demo/onlineform/formCall/CallModal.vue b/src/views/demo/onlineform/formCall/CallModal.vue
index c9a948d7..8e0837b8 100644
--- a/src/views/demo/onlineform/formCall/CallModal.vue
+++ b/src/views/demo/onlineform/formCall/CallModal.vue
@@ -1,279 +1,184 @@
 <template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="registerModal"
-    :canFullscreen="false"
-    :draggable="false"
-    :showCancelBtn="!isDetail"
-    :showOkBtn="!isDetail"
-    :title="getTitle"
-    @ok="ModalSureClick"
-    width="80%"
-    :closeFunc="closeFunc"
-  >
-    <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"
-            @click="codeClickFunction('beforeSetData', beforeSetData)"
-            @change="codeClickFunction('changeDataEvent', changeDataEvent)"
-          />
-        </a-tab-pane>
-      </a-tabs>
-    </template>
-
-    <BasicForm
-      ref="myDataBaseFormRef"
-      @register="registerForm"
-      v-if="formModalVisible && tabsColumns.length < 1"
-      @click="codeClickFunction('beforeSetData', beforeSetData)"
-      @change="codeClickFunction('changeDataEvent', changeDataEvent)"
-    />
-    <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>
-    <template v-for="(item, index) in buttonLayout" :key="index">
-      <a-row style="width: 100%">
-        <a-col :span="item?.colProps?.span || 24" style="padding: 10px">
-          <a-button
-            :type="item.componentProps.type"
-            :shape="item.componentProps.shape"
-            :size="item.componentProps.size"
-            @click="codeClickFunction('codeClick', item.componentProps.clickCode)"
-          >
-            {{ item.label }}
-          </a-button>
-        </a-col>
-      </a-row>
-    </template>
-    <a-table
-      class="sub-table"
-      :columns="subTableColumns"
-      :data-source="subTableList"
-      :pagination="false"
-      v-if="subTableId"
-      :scroll="scrollValue"
-    >
-      <template #headerCell="{ column, record }">
-        <template v-if="column.key === 'setting'">
-          <PlusOutlined class="icon-button" @click="addListItem" v-if="!isDetail" />
+  <div class="show-form-modal" style="width: 100%">
+    <div class="title">
+      <div class="close-button"><ArrowLeftOutlined @click="closeModal" /></div>
+      <div style="margin-right: 30px; font-size: 25px">{{ getTitle }}</div>
+    </div>
+    <div class="form-content">
+      <BasicForm ref="myDataBaseFormRef" @register="registerForm" v-if="formModalVisible" />
+      <a-table
+        class="sub-table"
+        :columns="subTableColumns"
+        :data-source="subTableList"
+        :pagination="false"
+        :customRow="customRow"
+        v-if="subTableId"
+        :scroll="scrollValue"
+      >
+        <template #headerCell="{ column, record }">
+          <template v-if="column.key === 'setting'">
+            <PlusOutlined class="icon-button" @click="insertListItem()" />
+          </template>
         </template>
-      </template>
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'setting'">
-          <DeleteOutlined
-            class="icon-button"
-            @click="delListItem(column, record)"
-            v-if="!isDetail"
-          />
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'setting'">
+            <DeleteOutlined class="icon-button" @click="delListItem(column, record)" />
+          </template>
+          <template v-else>
+            <FormItem :data="column" :record="record" />
+          </template>
         </template>
-        <template v-else>
-          <FormItem :data="column" :record="record" />
-        </template>
-      </template>
-    </a-table>
-    <!-- todo  创建/修改  人/时间 -->
-  </BasicModal>
+      </a-table>
+    </div>
+    <div class="footer-button" v-if="!isDetail">
+      <a-button style="margin-right: 20px" @click="closeModal">取消</a-button>
+      <a-button type="primary" @click="ModalSureClick">确认</a-button>
+    </div>
+  </div>
 </template>
-<script lang="ts" setup>
-  import { unref, ref, reactive } from 'vue';
-  import { FormSchema } from '@/components/Table';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+
+<script setup lang="tsx">
+  import { defineEmits, defineProps, ref, onMounted, unref, reactive, toRaw, h } from 'vue';
+  import { ArrowLeftOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
   import { BasicForm, useForm } from '@/components/Form';
+  import { FormSchema } from '@/components/Table';
+  import { create, saveDraft } from '@/api/sys/WFProcess';
   import { saveFormsData } from '@/api/formrender/index';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useUserStore } from '@/store/modules/user';
-  import { create, saveDraft } from '@/api/sys/WFProcess';
-  import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
+  import FormItem from './FormItem/index.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();
-  const formModalVisible = ref(false);
-  const isUpdate = ref(true);
-  const isDetail = ref(true);
-  const getTitle = ref();
-  const primaryQuery = ref();
-  const addQuery: any = ref([]);
-  const formColumns: any = ref([]);
-  const tabsColumns: any = ref([]);
+  const myDataBaseFormRef = ref();
+  const props = defineProps([
+    'open',
+    'showFormModalData',
+    'mapgemoList',
+    'formData',
+    'MapboxComponent',
+    'mapSetData',
+    'haveMap',
+  ]);
+  const emits = defineEmits(['closeShowFormModal', 'setSelectedSubTableDataId']);
+  const subTableList = ref();
+  const subTableId = ref(null);
+  const isUpdate = ref(false);
+  const isDetail = ref(false);
   const flowCode = ref('');
+  const getTitle = ref('');
+  const formColumns: FormSchema[] = [];
+  const addQuery: any = ref([]);
+  const formModalVisible = ref(false);
+  const primaryQuery = ref();
   const userStore = useUserStore();
   const userInfo: any = userStore.getUserInfo;
   const formData = reactive({
     userId: userInfo.id,
     title: '',
   });
-  const subTableId = ref(null);
-  const subTableColumns: any = ref([]);
-  const subTableData = ref([]);
-  const subTableList: any = ref([]);
   const scrollValue = ref();
-  const cardLayout = ref([]);
-  const createOrModifyList = ref([]);
-  // 按钮
-  const buttonLayout = ref([]);
-  // 脚本
-  const beforeSetData = ref('');
-  const afterValidateForm = ref('');
-  const afterSaveEvent = ref('');
-  const changeDataEvent = ref('');
-  const [registerModal, { setModalProps, closeModal }] = useModalInner((data: any) => {
-    console.log('daaaaa', data);
-    // 脚本
-    beforeSetData.value = data?.beforeSetData;
-    afterValidateForm.value = data?.afterValidateForm;
-    afterSaveEvent.value = data?.afterSaveEvent;
-    changeDataEvent.value = data?.changeDataEvent;
+  const subTableColumns = ref([
+    {
+      dataIndex: 'setting',
+      key: 'setting',
+      fixed: 'left',
+      width: 60,
+    },
+  ]);
+  const subTableData = ref([]);
 
-    isUpdate.value = !!data?.isUpdate;
-    isDetail.value = !!data?.isDetail;
-    const arr: FormSchema[] = [];
-    data.tab.forEach((item) => {
-      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 (opt.component === 'Button') {
-              buttonLayout.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 (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;
-            }
-            if (opt.columns) {
-              opt.columns.forEach((itemColumn) => {
-                itemColumn.children.forEach((itemColumnChild) => {
-                  console.log('itemColumnChild', itemColumnChild);
-                  itemColumnChild.itemProps.hidden = true;
-                  if (index == 0) {
-                    itemColumnChild.itemProps.hidden = false;
-                  }
-                  arr.push(itemColumnChild);
-                  val.children.push(itemColumnChild);
-                });
-              });
-            }
-
-            opt.itemProps.hidden = true;
-            if (index == 0) {
-              opt.itemProps.hidden = false;
-            }
-            arr.push(opt);
-            formColumns.value = arr;
-          });
-        });
-        tabsColumns.value = item.componentProps.options;
-        console.log('tabsColumns', tabsColumns.value);
-        console.log('formColumns', formColumns.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 (item.component === 'Button') {
-          buttonLayout.value.push(item);
-        }
-        if (['createuser', 'createtime', 'modifyuser', 'modifytime'].includes(item.type)) {
-          createOrModifyList.value.push(item);
-        }
-        subTableColumns.value = [
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 100,
+    schemas: formColumns,
+    showActionButtonGroup: false,
+    baseColProps: { lg: 24, md: 24 },
+  });
+  const customRow = (record) => {
+    return {
+      onClick: (event) => {
+        if (!props.haveMap) return;
+        let mapDataList = [
           {
-            dataIndex: 'setting',
-            key: 'setting',
-            fixed: 'left',
-            width: 60,
+            columnName: 'mapgeom',
+            value: record.MapGeom || null,
           },
         ];
+        if (unref(isDetail)) {
+          props.MapboxComponent.handlerDraw(mapDataList, false);
+          return;
+        }
+        emits('setSelectedSubTableDataId', record.key);
+        if (record.isInsert) {
+          props.mapSetData.isAllowAddPolygon &&
+            props.MapboxComponent.handlerDraw(mapDataList, true);
+        } else {
+          props.MapboxComponent.handlerDraw(mapDataList, props.mapSetData.isAllowEditPolygon);
+        }
+        if (record.MapGeom.length > 0 && props.mapSetData.isEnablePostionJump) {
+          let jumpDataString = record.MapGeom;
+          let jumpDataList = jumpDataString.replace(/[A-Z|(|)]/g, '').split(' ');
 
-        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 (jumpDataString.slice(0, 5) === 'POINT') {
+            let jumpData =
+              jumpDataList[0].length > 0
+                ? [jumpDataList[0], jumpDataList[1]]
+                : [jumpDataList[1], jumpDataList[2]];
+            props.MapboxComponent.handlerLocation(jumpData);
+          } else {
+            let jumpData =
+              jumpDataList[0].length > 0
+                ? [jumpDataList[0], jumpDataList[1].split(',')[0]]
+                : [jumpDataList[1], jumpDataList[2].split(',')[0]];
+            props.MapboxComponent.handlerLocation(jumpData);
+          }
+        }
+      },
+    };
+  };
+  const closeModal = () => {
+    emits('closeShowFormModal', false);
+  };
+  function generateUniqueDigits(length: number): number[] {
+    const digits = new Set<number>();
+    while (digits.size < length) {
+      const randomDigit = Math.floor(Math.random() * 20);
+      digits.add(randomDigit);
+    }
+    return Array.from(digits);
+  }
+
+  onMounted(() => {
+    const data = props.showFormModalData;
+    isUpdate.value = !!data?.isUpdate;
+    isDetail.value = !!data?.isDetail;
+    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);
+      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;
-        }
+        });
+        scrollValue.value = { x: (subTableColumns.value.length - 1) * 140, y: 300 };
+        subTableData.value = tableData;
       }
     });
 
@@ -281,9 +186,11 @@
       getTitle.value = '新增';
       data.btnList.forEach((element) => {
         if (element.prop === 'Add' && element.isWFlow) {
+          alert("Add");
           flowCode.value = element.wFlowCode;
         }
       });
+      subTableList.value = toRaw(props.formData);
     }
     if (unref(isUpdate) && !unref(isDetail)) {
       getTitle.value = '编辑';
@@ -292,9 +199,11 @@
           flowCode.value = element.wFlowCode;
         }
       });
+      subTableList.value = toRaw(props.formData);
     }
     if (!unref(isUpdate) && unref(isDetail)) {
       getTitle.value = '详情';
+      subTableList.value = toRaw(props.formData);
     }
     formModalVisible.value = true;
     primaryQuery.value = data.query;
@@ -304,12 +213,8 @@
           ...data.record,
         });
       }, 100);
-      subTableList.value = data.recordChildren;
     } else {
-      if (tabsColumns.value.length < 1) {
-        resetFields();
-      }
-      subTableList.value = [];
+      myDataBaseFormRef.value && resetFields();
     }
     addQuery.value = [];
     if (data.addParams) {
@@ -320,96 +225,40 @@
           value: generateUniqueDigits(20).join(''),
         });
       });
-      console.log('addQuery', addQuery);
     }
   });
 
-  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);
-    const obj = getFieldsValue();
-    console.log('values', getFieldsValue());
-    // resetFields();
-    setTimeout(() => {
-      updateSchema(columns);
-      resetFields();
-    }, 100);
-    setTimeout(() => {
-      setFieldsValue(obj);
-    }, 500);
-  }
-  function generateUniqueDigits(length: number): number[] {
-    const digits = new Set<number>();
-    while (digits.size < length) {
-      const randomDigit = Math.floor(Math.random() * 20);
-      digits.add(randomDigit);
-    }
-    return Array.from(digits);
-  }
-  const addListItem = () => {
-    let keyValue = uuidv4();
-    let emptyItem = { key: keyValue };
-    subTableData.value.map((item) => {
-      if (item.component == 'InputGuid') {
-        emptyItem[item.field] = keyValue;
-      } else {
-        emptyItem[item.field] = '';
-      }
-    });
 
-    subTableList.value.push(emptyItem);
-  };
-  const delListItem = (column, record) => {
-    subTableList.value = subTableList.value.filter((item) => item.key != record.key);
-  };
-
-  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();
-      // 添加校验后脚本
-      codeClickFunction('afterValidateForm', afterValidateForm.value);
-      console.log('values', values);
       let query = values;
+      let mapGeomList = toRaw(props.mapgemoList).map((item) => {
+        return item.value;
+      });
       let saveSubTableList = [];
       subTableList.value.forEach((item) => {
         let emptyObj = {};
         for (const key in item) {
+          if (key.indexOf('guid') !== -1 && item[key] == '') {
+            let guid = generateUniqueDigits(20).join('');
+            item[key] = guid;
+            emptyObj[key] = guid;
+          }
           if (key === 'key') continue;
+          if (key === 'isInsert') continue;
           emptyObj[key] = item[key];
         }
         saveSubTableList.push(emptyObj);
       });
       query[subTableId.value] = JSON.stringify(saveSubTableList);
+      query.MapGeom = mapGeomList.join(';');
       let params: any = {
         schemeId: primaryQuery.value.id,
         isUpdate: isUpdate.value,
         pkey: primaryQuery.value.key,
       };
-      console.log('params', params);
       if (unref(isUpdate)) {
         params.pkeyValue = primaryQuery.value.keyValue;
       } else {
@@ -423,12 +272,9 @@
         });
       }
       params.data = JSON.stringify(query);
-      console.log('query222', query);
-      console.log('params222', params);
       const data = await saveFormsData(params);
       if (data) {
-        setModalProps({ confirmLoading: true });
-        emit('success');
+        emits('success');
         if (flowCode.value == '') {
           closeModal();
         } else {
@@ -438,11 +284,8 @@
       } else {
         return createMessage.error('操作失败');
       }
-    } finally {
-      setModalProps({ confirmLoading: false });
-      // 添加保存后脚本
-      codeClickFunction('afterSaveEvent', afterSaveEvent.value);
-      closeFunc();
+    } catch (error) {
+      console.log(error);
     }
   }
   async function handleCreateFlow(processId) {
@@ -466,39 +309,80 @@
       return createMessage.error('保存草稿失败');
     }
   }
-  // 脚本执行方法
-  async function codeClickFunction(code, codeClick) {
-    try {
-      // 动态导入utils模块
-      const { utils } = await import('./utils');
-      eval(codeClick);
-    } catch (e) {
-      switch (code) {
-        case 'codeClick':
-          createMessage.success('【按钮组件脚本】错误：' + e);
-          break;
-        case 'beforeSetData':
-          createMessage.success('【添加赋值前脚本】错误：' + e);
-          break;
-        case 'afterValidateForm':
-          createMessage.success('【添加校验后脚本】错误：' + e);
-          break;
-        case 'afterSaveEvent':
-          createMessage.success('【添加保存后脚本】错误：' + e);
-          break;
-        case 'changeDataEvent':
-          createMessage.success('【添加数据改变脚本】错误：' + e);
-          break;
-        default:
-          createMessage.success('【未知脚本】错误：' + e);
-          break;
+  const insertListItem = () => {
+    let keyList = subTableData.value.map((item) => {
+      return item.field;
+    });
+    let emptyItem = { key: uuidv4(), isInsert: true };
+    keyList.forEach((item) => {
+      emptyItem[item] = '';
+    });
+    subTableList.value.push(emptyItem);
+  };
+  const delListItem = (column, record) => {
+    subTableList.value = subTableList.value.filter((item) => item.key != record.key);
+  };
+</script>
+
+<style lang="scss" scoped>
+  .icon-button {
+    cursor: pointer;
+  }
+  .show-form-modal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: #fff;
+    z-index: 4;
+    padding: 30px;
+    .title {
+      font-size: 30px;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid;
+      height: 50px;
+      align-items: center;
+      .close-button {
+        opacity: 0.7;
+      }
+      .close-button:hover {
+        opacity: 1;
+      }
+    }
+    .form-content {
+      padding: 25px 25px 0px 25px;
+      height: calc(100% - 97px);
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-between;
+      overflow: auto;
+      margin-bottom: 15px;
+    }
+    .footer-button {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+</style>
+<style lang="scss">
+  .show-form-modal {
+    .form-content {
+      .sub-table {
+        .ant-table-tbody {
+          .ant-table-cell {
+            .anticon-delete {
+              opacity: 0;
+            }
+          }
+          .ant-table-cell-row-hover {
+            .anticon-delete {
+              opacity: 1;
+              color: red;
+            }
+          }
+        }
       }
     }
   }
-  const closeFunc = () => {
-    buttonLayout.value = [];
-    cardLayout.value = [];
-    createOrModifyList.value = [];
-    return true;
-  };
-</script>
+</style>
diff --git a/src/views/demo/onlineform/formCall/index.vue b/src/views/demo/onlineform/formCall/index.vue
index 620661d4..a939fafb 100644
--- a/src/views/demo/onlineform/formCall/index.vue
+++ b/src/views/demo/onlineform/formCall/index.vue
@@ -20,7 +20,7 @@
         class="table-container form-call-table"
         :style="`${haveMap ? `width:${100 - mapSetData.width}%;` : 'width:100%'}`"
       >
-        <BasicTable @register="registerTable" @row-click="handRowClick">
+        <BasicTable @register="registerTable" @row-click="handRowClick" :searchInfo="searchInfo">
           <template #toolbar>
             <div v-for="(item, index) in btnArr" :key="index">
               <a-button :type="item.class" @click="handleClickForm(item.prop)">{{
@@ -48,7 +48,7 @@
         :style="`width:${mapSetData.width}%;height:calc(100vh - 78px) `"
       >
         <MapboxMap
-          :mapConfig="mapSetData"
+          
           :layers="layers"
           :location="location"
           @handlerDrawComplete="handlerDrawComplete"
@@ -98,7 +98,7 @@
   // import MapboxMap from '@/components/MapboxMaps/MapComponent.vue'
   import ShowFormModal from './ShowFormModal/index.vue';
   import { v4 as uuidv4 } from 'uuid';
-  import { cardNestStructure } from '@/views/demo/onlineform/util.ts'
+  import { cardNestStructure } from '@/views/demo/onlineform/util.ts';
 
   const MapboxMap = defineAsyncComponent(() => import('@/components/MapboxMaps/MapComponent.vue'));
 
@@ -118,17 +118,17 @@
   const mapgemoList = ref([]);
   const MapboxComponent = ref();
   const openShowFormModal = ref(false);
-  const haveMap = ref(false);
+  const haveMap = ref(true);
   const showFormModalData = ref({});
   const treeTitle: any = ref('树形');
   const treeVisible: any = ref(false);
   const paramsId: any = ref();
   const designData: any = ref();
-  const searchValue: any = ref();
+  const searchInfo: any = ref({});
   const addParamsArr: any = ref([]);
   const paramsCode = route.query.code;
   const callColumns: BasicColumn[] = [];
-  const searchFormSchema: FormSchema[] = ref([]);
+  const searchFormSchema: FormSchema[] = [];
   const btnList: any = ref([]);
   const treeData = ref<TreeItem[]>([]);
   const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
@@ -137,15 +137,52 @@
   const flowCode = ref(''); //流程code
   const flowFormData = ref({}); //编辑时表单的数据
   const isUpdate = ref(false); //是否是编辑
-  const infoUseSubTableData = ref()
-  const infoUseMainTableData = ref({})
+  const infoUseSubTableData = ref();
+  const infoUseMainTableData = ref({});
   // 展示的图层列表
-  const layers = reactive();
+  const layers = reactive([
+    {
+      id: 1,
+      name: '沂水县道路中心线1',
+      checked: false,
+      layer: {
+        id: 'roadnetLine1',
+        type: 'line',
+        source: {
+          type: 'vector',
+          tiles: [
+            'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&X-Token=1ded3fe7',
+          ],
+          minzoom: 1,
+          maxzoom: 20,
+        },
+        'source-layer': 'yishuixian',
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        paint: {
+          'line-color': [
+            'case',
+            ['==', ['get', 'handle_status_id'], 0],
+            '#E6A23C',
+            ['==', ['get', 'handle_status_id'], 1],
+            '#409EFF',
+            ['==', ['get', 'handle_status_id'], 2],
+            '#67C23A',
+            // 默认
+            '#67C23A',
+          ],
+          'line-width': 1,
+        },
+      },
+    },
+  ]);
 
   // 图层定位数据
   const location = reactive([118.556717, 35.80391]);
   if (paramsCode == '数据统计') {
-    searchFormSchema.value = [
+    searchFormSchema = [
       {
         field: 'typeid',
         component: 'ApiSelect',
@@ -194,7 +231,7 @@
       },
     ];
   } else if (paramsCode == '数据审核') {
-    searchFormSchema.value = [
+    searchFormSchema = [
       {
         field: 'typeid',
         component: 'ApiSelect',
@@ -262,15 +299,20 @@
     showTableSetting: true,
     bordered: true,
     beforeFetch: (data) => {
+      console.log('item.key', data)
       // 接口请求前 参数处理
+      const querys = JSON.parse(JSON.stringify(data));
+      console.log('1111', querys)
+      delete querys.page;
+      delete querys.limit;
+      console.log('querys', querys)
       var temp = {
         id: paramsId.value,
         paginationInputDto: {
           page: data.page,
           rows: data.limit,
-          keyWord: data.key,
         },
-        queryJson: searchValue.value,
+        queryJson: JSON.stringify(querys),
       };
       return temp;
     },
@@ -442,8 +484,6 @@
         if (rows.length == 0) {
           return createMessage.warn('请选择一条数据进行编辑');
         }
-
-        console.log("rowsrows",rows);
         btnList.value.forEach((element) => {
           if (element.prop === 'Edit' && element.isWFlow) {
             flowCode.value = element.wFlowCode;
@@ -469,7 +509,7 @@
             showFormModalData.value = toProps;
             openShowFormModal.value = true;
             console.log("mapgemoList",mapgemoList);
-            console.log("mapSetData",mapSetData);
+            console.log("mapgemoList2",mapSetData);
             MapboxComponent.value.handlerDraw(
               mapgemoList.value,
               mapSetData.value.isAllowEditPolygon,
@@ -524,7 +564,7 @@
         if (haveMap.value) {
           showFormModalData.value = toProps;
           openShowFormModal.value = true;
-          MapboxComponent.value.handlerDraw(mapgemoList.value, false);
+          // MapboxComponent.value.handlerDraw(mapgemoList.value, false);
         } else {
           openModal(true, toProps);
         }
@@ -541,7 +581,7 @@
     const rel = selected.node.dataRef;
     const obj: any = {};
     obj[rel.key] = rel.value;
-    searchValue.value = JSON.stringify(obj);
+    searchInfo.value = JSON.stringify(obj);
     reload();
   }
 
@@ -554,8 +594,8 @@
       let formObj = JSON.parse(res.formScheme.scheme);
       console.log('formObj', formObj);
       // 将card嵌套起来
-      formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList)
       if (formObj.formInfo.tabList && formObj.formInfo.tabList.length > 1) {
+        formObj.formInfo.tabList = cardNestStructure(formObj.formInfo.tabList);
         const arr: any = [];
         formObj.formInfo.tabList.forEach((item, index) => {
           arr.push({
@@ -598,7 +638,7 @@
           layerFields: {},
         };
       }
-      console.log('columnObj', columnObj)
+      console.log('columnObj', columnObj);
       paramsId.value = res.formScheme.id;
       btnList.value = columnObj.table.btns;
       if (columnObj.table.columns) {
@@ -609,6 +649,16 @@
           });
         });
       }
+      if (columnObj.table.querys) {
+        columnObj.table.querys.forEach((item) => {
+          searchFormSchema.push({
+            field: item.key,
+            component: item.type || 'Input',
+            label: item.label,
+            colProps: { span: 6 },
+          });
+        });
+      }
       callColumns.forEach((item) => {
         formObj.formInfo.schemas.forEach((val) => {
           if (item.dataIndex == val.field && val.componentProps.options) {
@@ -678,8 +728,8 @@
       key: designData.value.primaryKey,
       keyValue,
     };
-    getFormData(params).then((res) => {
-        console.log("res111",res);
+    getFormData(params)
+      .then((res) => {
         let childTableName = designData.value.db.find((item) => item.type === 'chlid').name;
         let mainTableName = designData.value.db.find((item) => item.type === 'main').name;
         let subTableData = res[childTableName].map((item) => {
@@ -689,20 +739,16 @@
             MapGeom: item.mapgeom,
           };
         });
-
         formData.value = [...subTableData];
-
         infoUseSubTableData.value = res[childTableName].map((item) => {
           return {
             ...item,
             key: uuidv4(),
           };
         });
-
-        res[mainTableName].forEach(item => {
-          infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
-        })
-        mapgemoList.value = formData.value
+        res[mainTableName].forEach((item) => {
+          infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
+        });
       })
       .catch((err) => {
         console.log('err', err);
@@ -717,24 +763,24 @@
         item.MapGeom = geom[0].value;
       }
     });
-    mapgemoList.value = [...geom];
+    // mapgemoList.value = [...geom];
   };
   const mapOnLoad = (map) => {
-    // const test_url =
-    //   'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&field="gid","objectid",';
-    // map.addSource('street-border-source', {
-    //   type: 'vector',
-    //   tiles: [test_url],
-    // });
-    // map.addLayer({
-    //   id: 'street-border',
-    //   type: 'line',
-    //   source: 'street-border-source',
-    //   'source-layer': 'yishuixian',
-    //   layout: {
-    //     visibility: 'visible',
-    //   },
-    // });
+    const test_url =
+      'http://192.168.10.102:9020/api/DroneCaseinfo/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=yishuixian&field="gid","objectid",';
+    map.addSource('street-border-source', {
+      type: 'vector',
+      tiles: [test_url],
+    });
+    map.addLayer({
+      id: 'street-border',
+      type: 'line',
+      source: 'street-border-source',
+      'source-layer': 'yishuixian',
+      layout: {
+        visibility: 'visible',
+      },
+    });
   };
   const setSelectedSubTableDataId = (value) => {
     selectedSubTableDataId.value = value;
diff --git a/src/views/demo/onlineform/formCall/utils.ts b/src/views/demo/onlineform/formCall/utils.ts
index 0438e238..35504822 100644
--- a/src/views/demo/onlineform/formCall/utils.ts
+++ b/src/views/demo/onlineform/formCall/utils.ts
@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/web/useMessage';
 import { useUserStore } from '@/store/modules/user';
+import { defHttp } from '@/utils/http/axios';
 
 // utils.ts
 let c_formModalVisible: Boolean = false;
@@ -20,6 +21,8 @@ let c_scrollValue = '';
 let c_cardLayout: any = [];
 let c_createOrModifyList: any = [];
 let c_buttonLayout: any = [];
+let c_record: any = {};
+let c_cardValues: any = {};
 
 const { createMessage } = useMessage();
 const userStore = useUserStore();
@@ -28,8 +31,21 @@ const userInfo: any = userStore.getUserInfo;
 // 通过field获取组件
 function getComponentByFiled(data: string): any {
   return c_formColumns.find(item => item.field === data);
-};
-
+}
+function getChildComponentByFiled(data: string): any {
+  return c_subTableData.find(item => item.field === data);
+}
+function setChildComponentByFiled(childComponet: any, field: string): any {
+  c_formColumns.forEach((item, index1) => {
+    if (item.columns) {
+      item.columns[0].children.forEach((i, index2) => {
+        if (i.field == field) {
+          c_formColumns[index1].columns[0].children[index2] = childComponet;
+        }
+      });
+    }
+  });
+}
 export const utils = {
   setCallModalData: function setCallModalData(data: any) {
     c_formModalVisible = data.formModalVisible.value;
@@ -50,6 +66,8 @@ export const utils = {
     c_cardLayout = data.cardLayout.value;
     c_createOrModifyList = data.createOrModifyList.value;
     c_buttonLayout = data.buttonLayout.value;
+    c_record = data.record;
+    c_cardValues = data.cardValues.value;
   },
   formModalVisible: (): Boolean => {
     return c_formModalVisible;
@@ -105,13 +123,35 @@ export const utils = {
   buttonLayout: (): any => {
     return c_buttonLayout;
   },
+  record: (): any => {
+    return c_record;
+  },
+  cardValues: (): any => {
+    return c_cardValues;
+  },
   // 数据-----------------------------
-  // 获取数据
-
+  // 获取主表数据
+  getValue: (field: any): any => {
+    return c_record[field];
+  },
+  // 设置主表数据
+  setValue: (field: any, value: any): any => {
+    c_record[field] = value;
+    return c_record;
+  },
+  // 获取子表数据
+  getChildValue: (field: any): any => {
+    return c_record[field];
+  },
+  // 设置子表数据
+  setChildValue: (field: any, value: any): any => {
+    c_record[field] = value;
+    return c_record;
+  },
   // 组件-----------------------------
   // 获取组件
   getComponent: (field: any): any => {
-    return getComponentByFiled(field);
+    return getComponentByFiled(field) || getChildComponentByFiled(field);
   },
   // 隐藏与否
   setHide: (field: any, hideStatus: Boolean): any => {
@@ -123,6 +163,12 @@ export const utils = {
           c_formColumns[index] = componet;
         }
       });
+    } else {
+      const childComponet: any = getChildComponentByFiled(field);
+      if (childComponet) {
+        childComponet.ifShow = hideStatus;
+        setChildComponentByFiled(childComponet, field);
+      }
     }
     return c_formColumns;
   },
@@ -136,6 +182,12 @@ export const utils = {
           c_formColumns[index] = componet;
         }
       });
+    } else {
+      const childComponet: any = getChildComponentByFiled(field);
+      if (childComponet) {
+        childComponet.dynamicDisabled = disabledStatus;
+        setChildComponentByFiled(childComponet, field);
+      }
     }
     return c_formColumns;
   },
@@ -149,6 +201,12 @@ export const utils = {
           c_formColumns[index] = componet;
         }
       });
+    } else {
+      const childComponet: any = getChildComponentByFiled(field);
+      if (childComponet) {
+        childComponet.required = requiredStatus;
+        setChildComponentByFiled(childComponet, field);
+      }
     }
     return c_formColumns;
   },
@@ -169,4 +227,26 @@ export const utils = {
   loginUser: () => {
     return { account: userInfo.account, name: userInfo.name };
   },
+  // 回调方法-----------------------------
+  // get请求
+  httpGet: (api: string, params: any) => {
+    return defHttp.get<any>({
+      url: api,
+      params,
+    });
+  },
+  // post请求
+  httpPost: (api: string, params: any) => {
+    return defHttp.post<any>({
+      url: api,
+      params,
+    });
+  },
+  // put请求
+  httpPut: (api: string, params: any) => {
+    return defHttp.put<any>({
+      url: api,
+      params,
+    });
+  },
 };
diff --git a/src/views/demo/onlineform/formModule/modalDesign.vue b/src/views/demo/onlineform/formModule/modalDesign.vue
index 62a92e4c..554fd402 100644
--- a/src/views/demo/onlineform/formModule/modalDesign.vue
+++ b/src/views/demo/onlineform/formModule/modalDesign.vue
@@ -219,7 +219,7 @@
       const arr: any = [];
       formScheme.value.formInfo.tabList.forEach((item, index) => {
         item.schemas.forEach((val) => {
-          if (val.type == 'subTable' && val.columns) {
+          if (val.columns) {
             console.log('val', val);
             val.columns.forEach((col) => {
               col.children.forEach((chil) => {
@@ -235,9 +235,21 @@
       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;
+      const arr: any = [];
+      formScheme.value.formInfo.tabList[0].schemas.forEach((item) => {
+        if (item.columns) {
+          item.columns.forEach((col) => {
+            col.children.forEach((chil) => {
+              arr.push(chil);
+            });
+          });
+        } else {
+          arr.push(item);
+        }
+      });
+      formScheme.value.formInfo.schemas = arr;
     }
-    delete formScheme.value.formInfo.tabList;
+    // delete formScheme.value.formInfo.tabList;
     formScheme.value.formInfo.schemas.forEach((tab: any) => {
       if (!notInColumns.includes(tab.component)) {
         columns.push(tab);
@@ -271,7 +283,7 @@
           !['Upload', 'Uploadimg', 'Password', 'Timerange', 'Datetimerange'].includes(t.component),
       )
       .map((t) => {
-        return { key: t.field, label: t.label };
+        return { key: t.field, label: t.label, type: t.component };
       });
 
     // 常用按钮-树
diff --git a/src/views/demo/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index a9e490a8..afec3d3d 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -117,31 +117,61 @@
     return arr;
   }
   const changeCardStructure = (data) => {
-    let result = []
-    data.forEach(item => {
-      if(item.component === "Tabs"){
-        item.componentProps.options = changeCardStructure(item.componentProps.options)
-      }else if(item.children){
-        item.children = changeCardStructure(item.children)
-      }else{
-        if(["Grid","Card"].includes(item.component)){
-          item.columns[0].children= changeCardStructure(item.columns[0].children)
-          if(item.component === 'Card'){
-            item.columns[0].children.forEach(childItem => {
-              if(childItem.pfield){
-                result.push(childItem)
-              }else{
-                result.push({...childItem, ptype: "card", pfield: item.field})
+    let result = [];
+    if (data && data.length > 0) {
+      data.forEach((item) => {
+        if (item.component === 'Tabs') {
+          item.componentProps.options = changeCardStructure(item.componentProps.options);
+        } else if (item.component === 'CardGroup') {
+          item.componentProps.options = changeCardStructure(item.componentProps.options);
+          item.componentProps.options.forEach((childItem) => {
+            if (childItem.pfield) {
+              result.push(childItem);
+            } else {
+              result.push({ ...childItem, ptype: 'card', pfield: item.field });
+            }
+          });
+          item.componentProps.options = [];
+        } else if (item.children && !item.field) {
+          item.children = changeCardStructure(item.children);
+        } else if (item.children && item.field.indexOf('use_card') === -1) {
+          item.children = changeCardStructure(item.children);
+          item.children = [];
+        } else {
+          if (['Grid', 'Card'].includes(item.component)) {
+            item.columns[0].children = changeCardStructure(item.columns[0].children);
+            if (
+              (item.component === 'Card' || item.component === 'Grid') &&
+              item.columns[0].children
+            ) {
+              item.columns[0].children.forEach((childItem) => {
+                if (childItem.pfield) {
+                  result.push(childItem);
+                } else {
+                  result.push({ ...childItem, ptype: 'card', pfield: item.field });
+                }
+              });
+              item.columns[0].children = [];
+            }
+          } else if (item.field && item.field.indexOf('use_card') !== -1) {
+            item.children = changeCardStructure(item.children);
+            item.children.forEach((childItem) => {
+              if (childItem.pfield) {
+                result.push(childItem);
+              } else {
+                result.push({ ...childItem, ptype: 'card', pfield: item.field });
               }
-            })
-            
+            });
+            item.children = [];
           }
         }
-      }
-      result.push(item)
-    })
-    return result
-  }
+        result.push(item);
+      });
+      return result;
+    }else{
+      return data
+    }
+  };
   async function designSendGrandson(value) {
     let designTab = JSON.parse(value);
     let schems = saveFormDatas.value.scheme.scheme
@@ -177,9 +207,19 @@
         if (item.type == 'subTable') {
           item.columns = changeCloums(item.columns, tableData);
         }
-        tabArr.push(item.componentProps.fieldName);
-        if (!item.componentProps.fieldName) {
-          tabLabelArr.push(item.label);
+        if (
+          item.component != 'CardGroup' &&
+          item.component != 'Grid' &&
+          item.component != 'MapGeom' &&
+          item.component != 'Divider' &&
+          item.component != 'Slider' &&
+          item.component != 'Card' &&
+          item.component != 'Location'
+        ) {
+          tabArr.push(item.componentProps.fieldName);
+          if (!item.componentProps.fieldName) {
+            tabLabelArr.push(item.label);
+          }
         }
       } else {
         item.componentProps.options.forEach((val) => {
@@ -201,16 +241,26 @@
             if (list.type == 'subTable') {
               list.columns = changeCloums(list.columns, tableData);
             }
-            tabArr.push(list.componentProps.fieldName);
-            if (!list.componentProps.fieldName) {
-              tabLabelArr.push(list.label);
+            if (
+              list.component != 'CardGroup' &&
+              list.component != 'Grid' &&
+              list.component != 'MapGeom' &&
+              list.component != 'Divider' &&
+              list.component != 'Slider' &&
+              list.component != 'Card' &&
+              list.component != 'Location'
+            ) {
+              tabArr.push(list.componentProps.fieldName);
+              if (!list.componentProps.fieldName) {
+                tabLabelArr.push(list.label);
+              }
             }
           });
         });
       }
     });
     // 将Card的孩子改成和Card同级别
-    designTab.schemas = changeCardStructure(designTab.schemas)
+    designTab.schemas = changeCardStructure(designTab.schemas);
     let tabList: any = [];
     if (designTab.schemas.length > 1) {
       tabList.push({
@@ -428,8 +478,8 @@
     } else {
       //编辑
       let schems = JSON.parse(saveFormDatas.value.scheme.scheme);
-        // 将Card同级嵌套起来
-      schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList)
+      // 将Card同级嵌套起来
+      schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList);
       schems.db = arr;
       (schems.rdb = data.connect || []), (saveFormDatas.value.info.category = data.form.category);
       saveFormDatas.value.info.description = data.form.description;
@@ -445,33 +495,45 @@
   }
 
   const cardNestStructure = (data) => {
-    let childList = {}
-    let result = []
-    data.forEach(item => {
-      if(item.schemas){
-        item.schemas = cardNestStructure(item.schemas)
-        result.push(item)
-      }else if(item.ptype){
-        let pushItem = {}
-        Object.keys(item).forEach(key => {
-          if(key !== 'ptype' && key !== 'pfield'){
-            pushItem[key] = item[key]
-          }
-        })
-        if(childList[item.pfield]){
-          childList[item.pfield].push(pushItem)
-        }else{
-          childList[item.pfield] = [pushItem]
+    let childList = {};
+    let result = [];
+    data.forEach((item) => {
+      if (item.schemas) {
+        item.schemas = cardNestStructure(item.schemas);
+        result.push(item);
+      } else if (item.ptype) {
+        if (Object.keys(item).includes('children')) {
+          item.children = childList[item.field] || [];
         }
-      }else if(item.component === 'Card'){
-        item.columns[0].children = childList[item.field]
-        result.push(item)
-      }else{
-        result.push(item)
+        if (item.component === 'CardGroup' && Object.keys(item).includes('componentProps')) {
+          item.componentProps.options = childList[item.field] || [];
+        }
+        let pushItem = {};
+        Object.keys(item).forEach((key) => {
+          if (key !== 'ptype' && key !== 'pfield') {
+            pushItem[key] = item[key];
+          }
+        });
+        if (childList[item.pfield]) {
+          childList[item.pfield].push(pushItem);
+        } else {
+          childList[item.pfield] = [pushItem];
+        }
+      } else if (item.component === 'CardGroup') {
+        item.componentProps.options = childList[item.field] || [];
+        result.push(item);
+      } else if (item.component === 'Card' || item.component === 'Grid') {
+        item.columns[0].children = childList[item.field] || [];
+        result.push(item);
+      } else if (item.field.indexOf('use_card') !== -1) {
+        item.children = childList[item.field] || [];
+        result.push(item);
+      } else {
+        result.push(item);
       }
-    })
-    return result
-  }
+    });
+    return result;
+  };
   // 自动建表返回后，保存数据
   function automaticFormDataBack(data) {
     if (isStageClick.value && stepsCurrent.value === 0) {
diff --git a/src/views/demo/onlineform/util.ts b/src/views/demo/onlineform/util.ts
index d95dc73f..dfb1fb69 100644
--- a/src/views/demo/onlineform/util.ts
+++ b/src/views/demo/onlineform/util.ts
@@ -6,6 +6,12 @@ export const cardNestStructure = (data) => {
       item.schemas = cardNestStructure(item.schemas)
       result.push(item)
     }else if(item.ptype){
+      if(Object.keys(item).includes('children')){
+        item.children = childList[item.field] || []
+      }
+      if(item.component === 'CardGroup' && Object.keys(item).includes('componentProps')){
+        item.componentProps.options = childList[item.field] || []
+      }
       let pushItem = {}
       Object.keys(item).forEach(key => {
         if(key !== 'ptype' && key !== 'pfield'){
@@ -17,8 +23,15 @@ export const cardNestStructure = (data) => {
       }else{
         childList[item.pfield] = [pushItem]
       }
+
+    }else if(item.component === 'CardGroup'){
+      item.componentProps.options = childList[item.field] || []
+      result.push(item)
     }else if(item.component === 'Card'){
-      item.columns[0].children = childList[item.field]
+      item.columns[0].children = childList[item.field] || []
+      result.push(item)
+    }else if(item.field && item.field.indexOf('use_card') !== -1){
+      item.children = childList[item.field] || []
       result.push(item)
     }else{
       result.push(item)
diff --git a/src/views/demo/system/graphicaltable/index.data.ts b/src/views/demo/system/graphicaltable/index.data.ts
index 8d33c2c0..4fff29e2 100644
--- a/src/views/demo/system/graphicaltable/index.data.ts
+++ b/src/views/demo/system/graphicaltable/index.data.ts
@@ -1,16 +1,34 @@
-import { BasicColumn } from '@/components/Table';
-import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
+import { BasicColumn, FormSchema } from '@/components/Table';
 
-export const columns: BasicColumn[] = [
+// 图形化建表table
+export const graphicaltableColumns: BasicColumn[] = [
   {
-    title: '字段名',
-    dataIndex: 'name',
-    key: 'name',
+    title: '表名',
+    dataIndex: 'tableName',
+    width: 200,
   },
   {
     title: '类型',
     dataIndex: 'type',
-    key: 'type',
+    width: 200,
+  },
+  {
+    title: '行数据',
+    dataIndex: 'columnJson',
+    ifShow: false,
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUser',
+    width: 200,
+  },
+];
+// 图形化建表-搜索
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'keyword',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 },
   },
 ];
diff --git a/src/views/demo/system/graphicaltable/index.vue b/src/views/demo/system/graphicaltable/index.vue
index 500bcf83..68eea08d 100644
--- a/src/views/demo/system/graphicaltable/index.vue
+++ b/src/views/demo/system/graphicaltable/index.vue
@@ -1,38 +1,31 @@
 <template>
-  <div class="box-container">
-    <div class="flex mb-3">
-      <div class="tab-label"><span class="red">*</span>表名：</div>
-      <a-input v-model:value="tableName" placeholder="请输入表名" />
-    </div>
-    <BasicTable class="w-3/4 xl:w-5/5" @register="registerTable">
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable
+      class="w-4/4 xl:w-5/5"
+      @register="registerTable"
+      @fetch-success="onFetchSuccess"
+      :searchInfo="searchInfo"
+    >
       <template #toolbar>
-        <a-button type="primary" @click="handleAdd"> 新增 </a-button>
-        <a-button type="success" @click="handleSubmit"> 保存 </a-button>
+        <a-button type="primary" @click="handleAdd">新增</a-button>
       </template>
       <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'name'">
-          <a-input v-model:value="record.name" placeholder="请输入字段名" />
-        </template>
         <template v-if="column.key === 'type'">
-          <a-select
-            style="width: 100%"
-            ref="select"
-            placeholder="请选择"
-            v-model:value="record.type"
-            :options="codesTypeArr"
-          />
-        </template>
-        <template v-if="column.key === 'length'">
-          <a-input v-model:value="record.length" placeholder="请输入长度" />
+          {{ record.type ? '空间类型' : '非空间类型' }}
         </template>
         <template v-if="column.key === 'action'">
           <TableAction
             :actions="[
               {
-                label: '删除',
-                color: 'error',
+                label: '查看',
                 onClick: () => {
-                  handleDelete(record);
+                  handleView(record);
+                },
+              },
+              {
+                label: '编辑',
+                onClick: () => {
+                  handleEdit(record);
                 },
               },
             ]"
@@ -40,95 +33,86 @@
         </template>
       </template>
     </BasicTable>
-  </div>
+    <Modal @register="registerModal" @submit="submit" />
+  </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-
+  import { ref, reactive } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { columns } from './index.data';
-  import { createPicTable } from '@/api/database/index';
+  import { useModal } from '@/components/Modal';
+  // 子组件
+  import Modal from './modal/index.vue';
+  // ts
+  import { searchFormSchema, graphicaltableColumns } from './index.data';
+  // api
+  import { loadTableRecordInfo } from '@/api/database/index';
 
-  const tableName: any = ref('');
-  const codesTypeArr: any = ref([
-    { label: 'varchar', value: 'varchar' },
-    { label: 'int', value: 'int' },
-    { label: 'date', value: 'date' },
-  ]);
-  const [registerTable, { reload, setTableData, getDataSource }] = useTable({
-    rowKey: '',
-    columns,
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否是详情
+  const isDetail = ref(false);
+
+  // 窗口
+  const [registerModal, { openModal }] = useModal();
+  // 表格
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+    api: loadTableRecordInfo,
+    columns: graphicaltableColumns,
+    rowKey: 'id',
     formConfig: {
       labelWidth: 120,
+      schemas: searchFormSchema,
     },
-    useSearchForm: false,
-    showTableSetting: false,
+    // 序号列
     showIndexColumn: true,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
     bordered: true,
     actionColumn: {
-      width: 200,
+      width: 180,
       title: '操作',
       dataIndex: 'action',
-      key: 'action',
     },
     handleSearchInfoFn(info) {
       return info;
     },
   });
-  function handleAdd() {
-    let viesObj: any = getDataSource() || [];
-    viesObj.push({ name: '', type: '', length: 255, id: new Date().getTime() });
-    setTableData(viesObj);
-    reload();
-  }
-  function handleDelete(record: Recordable) {
-    let arr = getDataSource();
-    let newArr: any = [];
-    arr.forEach((item) => {
-      if (item.id !== record.id) {
-        newArr.push(item);
-      }
-    });
 
-    setTableData(newArr);
+  // 新增-打开窗口
+  function handleAdd() {
+    isUpdate.value = false;
+    isDetail.value = false;
+    openModal(true, {
+      isUpdate,
+      isDetail,
+    });
+  }
+  // 查看-打开窗口
+  function handleView(record) {
+    isUpdate.value = true;
+    isDetail.value = true;
+    openModal(true, {
+      isUpdate,
+      isDetail,
+      record,
+    });
+  }
+  // 编辑-打开窗口
+  function handleEdit(record) {
+    isUpdate.value = true;
+    isDetail.value = false;
+    openModal(true, {
+      isUpdate,
+      isDetail,
+      record,
+    });
+  }
+
+  // 新增、编辑、删除-提交后刷新
+  function submit() {
+    clearSelectedRowKeys();
     reload();
   }
-  function handleSubmit() {
-    let arr = getDataSource();
-    console.log('record', arr);
-    let newArr: any = [];
-    arr.forEach((item) => {
-      newArr.push({
-        name: item.name,
-        type: item.type,
-      });
-    });
-    const param: any = {
-      tableName: tableName.value,
-      tableInfos: newArr,
-    };
-    console.log('param', param);
-    createPicTable(param).then((res: Recordable) => {
-      console.log('res', res);
-    });
-  }
-  onMounted(() => {
-    const arr: any = [{ name: '', type: '', length: 255, id: new Date().getTime() }];
-    setTableData(arr);
-  });
 </script>
-<style>
-  .box-container {
-    width: 80%;
-    margin: 20px auto 0;
-  }
-  .tab-label {
-    width: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-  }
-  .red {
-    color: red;
-  }
-</style>
diff --git a/src/views/demo/system/graphicaltable/modal/index.vue b/src/views/demo/system/graphicaltable/modal/index.vue
new file mode 100644
index 00000000..f39212c6
--- /dev/null
+++ b/src/views/demo/system/graphicaltable/modal/index.vue
@@ -0,0 +1,248 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :centered="true"
+    :canFullscreen="false"
+    :defaultFullscreen="false"
+    :showCancelBtn="!isDetail"
+    :showOkBtn="!isDetail"
+    :draggable="false"
+    :title="getTitle"
+    :useWrapper="true"
+    :width="700"
+    @ok="handleOk"
+  >
+    <div class="box-container">
+      <div class="flex mb-3">
+        <div class="tab-label"><span class="red">*</span>表名：</div>
+        <a-input v-model:value="tableName" placeholder="请输入表名" :disabled="isUpdate" />
+      </div>
+    </div>
+    <BasicTable class="w-3/4 xl:w-5/5" @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleAdd" v-if="!isDetail"> 新增 </a-button>
+        <!-- <a-button type="success" @click="handleSubmit"> 保存 </a-button> -->
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name' && !isDetail">
+          <a-input v-model:value="record.name" placeholder="请输入字段名" />
+        </template>
+        <template v-if="column.key === 'type' && !isDetail">
+          <a-select
+            style="width: 100%"
+            ref="select"
+            placeholder="请选择"
+            v-model:value="record.type"
+            :options="codesTypeArr"
+          />
+        </template>
+        <template v-if="column.key === 'type' && isDetail">
+          {{ getCodesTypeArrByType(record.type) }}
+        </template>
+        <template v-if="column.key === 'explanation' && !isDetail">
+          <a-input
+            v-model:value="record.explanation"
+            placeholder="请输入备注，备注内不能含有英文字符的,和:"
+          />
+        </template>
+        <template v-if="column.key === 'action' && (!record.isOldColumn || !isUpdate)">
+          <TableAction
+            :actions="[
+              {
+                label: '删除',
+                color: 'error',
+                onClick: () => {
+                  handleDelete(record);
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, defineEmits } from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { columns, columns_isDetail } from './modal.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  // api
+  import { createPicTable, updateTable } from '@/api/database/index';
+  import { getLoad } from '@/api/sys/sysDataItemDetail';
+
+  const emit = defineEmits(['submit']);
+  const { createMessage } = useMessage();
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否是详情
+  const isDetail = ref(false);
+  const tableName: any = ref('');
+  const tableColumns: any = ref([]);
+  const codesTypeArr: any = ref([
+    { label: 'varchar', value: 'varchar' },
+    { label: 'int', value: 'int' },
+    { label: 'date', value: 'date' },
+  ]);
+
+  // 窗口
+  const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
+    setModalProps({ confirmLoading: false });
+    isUpdate.value = data.isUpdate;
+    isDetail.value = data.isDetail;
+
+    // 新增
+    if (!data.record) {
+      tableName.value = null;
+      setTableData([]);
+      handleAdd();
+      reload();
+    } else {
+      // 编辑、详情
+      tableName.value = data.record.tableName;
+      const lines = data.record.columnJson.split(':');
+      let arr: any = [];
+      for (const line of lines) {
+        const i = line.split(',');
+        arr.push({
+          name: i[0],
+          type: i[1],
+          explanation: i[2],
+          length: 255,
+          id: new Date().getTime(),
+          isOldColumn: true,
+        });
+      }
+      setTableData(arr);
+      reload();
+    }
+    // 详情隐藏按钮
+    if (isDetail.value) {
+      tableColumns.value = columns_isDetail;
+    } else {
+      tableColumns.value = columns;
+    }
+  });
+
+  // 表格
+  const [registerTable, { reload, setTableData, getDataSource }] = useTable({
+    rowKey: '',
+    columns: tableColumns,
+    formConfig: {
+      labelWidth: 120,
+    },
+    canResize: false,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn: true,
+    bordered: true,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  });
+  // 新增
+  function handleAdd() {
+    let viesObj: any = getDataSource() || [];
+    viesObj.push({ name: '', type: '', explanation: '', length: 255, id: new Date().getTime() });
+    setTableData(viesObj);
+    reload();
+  }
+  // 删除
+  function handleDelete(record: Recordable) {
+    let arr = getDataSource();
+    let newArr: any = [];
+    arr.forEach((item) => {
+      if (item.id !== record.id) {
+        newArr.push(item);
+      }
+    });
+    setTableData(newArr);
+    reload();
+  }
+  // 提交
+  function handleOk() {
+    let arr = getDataSource();
+    // console.log('record', arr);
+    let newArr: any = [];
+    let flag = true;
+    arr.forEach((item) => {
+      if (
+        item.explanation &&
+        (item.explanation.indexOf(':') > -1 || item.explanation.indexOf(',') > -1)
+      ) {
+        createMessage.warn('备注内不能含有英文字符的,和:');
+        flag = false;
+      }
+      newArr.push({
+        name: item.name,
+        type: item.type,
+        explanation: item.explanation,
+      });
+    });
+    if (flag) {
+      const param: any = {
+        tableName: tableName.value,
+        tableInfos: newArr,
+      };
+      console.log('param', param);
+      if (isUpdate.value) {
+        updateTable(param).then((res: Recordable) => {
+          console.log('res', res);
+          setTableData([]);
+          tableName.value = null;
+          emit('submit');
+          closeModal();
+        });
+      } else {
+        createPicTable(param).then((res: Recordable) => {
+          console.log('res', res);
+          setTableData([]);
+          tableName.value = null;
+          emit('submit');
+          closeModal();
+        });
+      }
+    }
+  }
+  // 字典类型
+  async function getCodesTypeArr() {
+    getLoad({ code: 'clounm_type' }).then((res) => {
+      if (res) {
+        codesTypeArr.value = [];
+        res.forEach((item) => {
+          codesTypeArr.value.push({ label: item.itemName, value: item.itemValue });
+        });
+      }
+    });
+  }
+  // 详情情况下的类型
+  function getCodesTypeArrByType(type) {
+    for (const codesType of codesTypeArr.value) {
+      if (codesType.value === type) {
+        return codesType.label;
+      }
+    }
+    return '';
+  }
+  onMounted(() => {
+    getCodesTypeArr();
+  });
+</script>
+<style>
+  .box-container {
+    width: 80%;
+    margin: 20px auto 0;
+  }
+  .tab-label {
+    width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+  .red {
+    color: red;
+  }
+</style>
diff --git a/src/views/demo/system/graphicaltable/modal/modal.data.ts b/src/views/demo/system/graphicaltable/modal/modal.data.ts
new file mode 100644
index 00000000..5c24f57d
--- /dev/null
+++ b/src/views/demo/system/graphicaltable/modal/modal.data.ts
@@ -0,0 +1,42 @@
+import { BasicColumn } from '@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '备注',
+    dataIndex: 'explanation',
+    key: 'explanation',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+  },
+];
+
+export const columns_isDetail: BasicColumn[] = [
+  {
+    title: '字段名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+  },
+  {
+    title: '备注',
+    dataIndex: 'explanation',
+    key: 'explanation',
+  },
+];
diff --git a/src/views/demo/workflow/scheme/preview.vue b/src/views/demo/workflow/scheme/preview.vue
index 8d034e88..72c10877 100644
--- a/src/views/demo/workflow/scheme/preview.vue
+++ b/src/views/demo/workflow/scheme/preview.vue
@@ -35,7 +35,9 @@
   import { postAdd, update } from '@/api/sys/WFSchemeInfo';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage } = useMessage();
+  import { flowStore } from '@/store/modules/flow';
 
+  const flowWfDataStore = flowStore();
   const props = defineProps({
     code: String,
   });
@@ -81,9 +83,7 @@
     //   tabStore.closeTabByKey('/dashboard/scheme_preview/add?code=' + schemeCode, router);
     // }
   }
-  function onSaveDesigner(){
-    
-  }
+  function onSaveDesigner() {}
 </script>
 <style scoped>
   .preview-box {