From 02f0ad94615d57e5d2cea9e54a2cb20f0eb90616 Mon Sep 17 00:00:00 2001
From: zzq <15064940501@163.com>
Date: Wed, 5 Jun 2024 17:28:56 +0800
Subject: [PATCH 01/19] =?UTF-8?q?=E8=A1=A8=E5=8D=95=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=E5=AD=97=E6=AE=B5=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?=
 =?UTF-8?q?=E3=80=81=E5=88=86=E5=89=B2=E7=BA=BF=E8=A1=A8=E5=8D=95=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=AD=89=E5=8E=BB=E9=99=A4=E4=BF=9D=E5=AD=98=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81=EF=BC=8C=E8=A1=A8=E5=8D=95=E5=8F=91=E5=B8=83=E8=B0=83?=
 =?UTF-8?q?=E7=94=A8=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VFormDesign/components/ComponentProps.vue |   2 +-
 src/views/demo/form-design/utils/index.ts     |  18 +--
 src/views/demo/onlineform/formCall/index.vue  |  47 ++++---
 .../onlineform/formModule/modalDesign.vue     |   2 +-
 .../demo/onlineform/formdesign/FormModal.vue  | 133 ++++++++++--------
 5 files changed, 120 insertions(+), 82 deletions(-)

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..6d6db49b 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/ComponentProps.vue
@@ -246,7 +246,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/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/index.vue b/src/views/demo/onlineform/formCall/index.vue
index 0972a916..c6d8f089 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)">{{
@@ -97,7 +97,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'));
 
@@ -123,11 +123,11 @@
   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);
@@ -136,8 +136,8 @@
   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([
     {
@@ -181,7 +181,7 @@
   // 图层定位数据
   const location = reactive([118.556717, 35.80391]);
   if (paramsCode == '数据统计') {
-    searchFormSchema.value = [
+    searchFormSchema = [
       {
         field: 'typeid',
         component: 'ApiSelect',
@@ -230,7 +230,7 @@
       },
     ];
   } else if (paramsCode == '数据审核') {
-    searchFormSchema.value = [
+    searchFormSchema = [
       {
         field: 'typeid',
         component: 'ApiSelect',
@@ -298,15 +298,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;
     },
@@ -573,7 +578,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();
   }
 
@@ -586,8 +591,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({
@@ -630,7 +635,7 @@
           layerFields: {},
         };
       }
-      console.log('columnObj', columnObj)
+      console.log('columnObj', columnObj);
       paramsId.value = res.formScheme.id;
       btnList.value = columnObj.table.btns;
       if (columnObj.table.columns) {
@@ -641,6 +646,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) {
@@ -728,9 +743,9 @@
             key: uuidv4(),
           };
         });
-        res[mainTableName].forEach(item => {
-          infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
-        })
+        res[mainTableName].forEach((item) => {
+          infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
+        });
       })
       .catch((err) => {
         console.log('err', err);
diff --git a/src/views/demo/onlineform/formModule/modalDesign.vue b/src/views/demo/onlineform/formModule/modalDesign.vue
index 62a92e4c..cb64be07 100644
--- a/src/views/demo/onlineform/formModule/modalDesign.vue
+++ b/src/views/demo/onlineform/formModule/modalDesign.vue
@@ -271,7 +271,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..361e33be 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -117,31 +117,32 @@
     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 > 1) {
+      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) {
+              item.columns[0].children.forEach((childItem) => {
+                if (childItem.pfield) {
+                  result.push(childItem);
+                } else {
+                  result.push({ ...childItem, ptype: 'card', pfield: item.field });
+                }
+              });
+            }
           }
         }
-      }
-      result.push(item)
-    })
-    return result
-  }
+        result.push(item);
+      });
+      return result;
+    }
+  };
   async function designSendGrandson(value) {
     let designTab = JSON.parse(value);
     let schems = saveFormDatas.value.scheme.scheme
@@ -177,9 +178,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 +212,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 +449,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 +466,33 @@
   }
 
   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]
+    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]
+        });
+        if (childList[item.pfield]) {
+          childList[item.pfield].push(pushItem);
+        } else {
+          childList[item.pfield] = [pushItem];
         }
-      }else if(item.component === 'Card'){
-        item.columns[0].children = childList[item.field]
-        result.push(item)
-      }else{
-        result.push(item)
+      } else if (item.component === 'Card') {
+        item.columns[0].children = childList[item.field];
+        result.push(item);
+      } else {
+        result.push(item);
       }
-    })
-    return result
-  }
+    });
+    return result;
+  };
   // 自动建表返回后，保存数据
   function automaticFormDataBack(data) {
     if (isStageClick.value && stepsCurrent.value === 0) {

From a067b3e2a0eaa3c46ba8a68844ee4094a02ed052 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Wed, 5 Jun 2024 17:39:27 +0800
Subject: [PATCH 02/19] =?UTF-8?q?=E3=80=90=E8=A1=A8=E5=8D=95=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E3=80=91=E5=8D=A1=E7=89=87=E7=BB=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VFormDesign/components/ComponentProps.vue |  1 +
 .../VFormDesign/components/FormOptions.vue    |  8 +++
 .../VFormDesign/components/LayoutItem.vue     | 54 ++++++++++++++++++-
 .../demo/form-design/core/formItemConfig.ts   | 23 ++++++++
 .../demo/onlineform/formdesign/FormModal.vue  | 39 +++++++++++++-
 5 files changed, 121 insertions(+), 4 deletions(-)

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..a33340f6 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)
           "
         >
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..a4d3de62 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
@@ -84,6 +84,44 @@
         <FormNodeOperate :schema="schema" :currentItem="currentItem" />
       </div>
     </template>
+    <template v-else-if="['CardGroup'].includes(schema.component)">
+      <div
+        class="grid-box"
+        :class="{ active: schema.key === currentItem.key }"
+        @click.stop="handleSetSelectItem(schema)"
+      >
+        <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 +133,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 +179,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,
       };
     },
   });
diff --git a/src/views/demo/form-design/core/formItemConfig.ts b/src/views/demo/form-design/core/formItemConfig.ts
index be1ed2b7..3eab1d05 100644
--- a/src/views/demo/form-design/core/formItemConfig.ts
+++ b/src/views/demo/form-design/core/formItemConfig.ts
@@ -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/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index a9e490a8..bef0a6d1 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -121,8 +121,19 @@
     data.forEach(item => {
       if(item.component === "Tabs"){
         item.componentProps.options = changeCardStructure(item.componentProps.options)
-      }else if(item.children){
+      }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.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)
@@ -134,8 +145,19 @@
                 result.push({...childItem, ptype: "card", pfield: item.field})
               }
             })
+            item.columns[0].children = []
             
           }
+        }else if(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)
@@ -452,6 +474,12 @@
         item.schemas = cardNestStructure(item.schemas)
         result.push(item)
       }else if(item.ptype){
+        if(Object.keys(item).includes('children')){
+          item.children = childList[item.field] || []
+        }
+        if(Object.keys(item).includes('componentProps')){
+          item.componentProps.options = childList[item.field] || []
+        }
         let pushItem = {}
         Object.keys(item).forEach(key => {
           if(key !== 'ptype' && key !== 'pfield'){
@@ -463,8 +491,15 @@
         }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.indexOf('use_card') !== -1){
+        item.children = childList[item.field] || []
         result.push(item)
       }else{
         result.push(item)

From 4bb33f6c3accc9bf5fd94b5c29c279ada981587f Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Wed, 5 Jun 2024 17:48:09 +0800
Subject: [PATCH 03/19] =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E5=B5=8C?=
 =?UTF-8?q?=E5=A5=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/onlineform/util.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/views/demo/onlineform/util.ts b/src/views/demo/onlineform/util.ts
index d95dc73f..0beeafe9 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(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.indexOf('use_card') !== -1){
+      item.children = childList[item.field] || []
       result.push(item)
     }else{
       result.push(item)

From 13bac94eac961ab1caa4ed59bd10e73ab6b3b1ae Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 08:51:52 +0800
Subject: [PATCH 04/19] =?UTF-8?q?=E4=BF=AE=E6=94=B9merge=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/onlineform/formdesign/FormModal.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/demo/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index 3e1f7e2d..42d5bf40 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -118,7 +118,7 @@
   }
   const changeCardStructure = (data) => {
     let result = []
-    if (data && data.length > 1) {
+    if (data && data.length > 0) {
       data.forEach(item => {
         if(item.component === "Tabs"){
           item.componentProps.options = changeCardStructure(item.componentProps.options)
@@ -160,12 +160,12 @@
             })
             item.children = []
           }
-          result.push(item);
-        });
-        return result;
-      }
+        }
+        result.push(item);
+      });
+      return result;
     }
-  };
+  }
   async function designSendGrandson(value) {
     let designTab = JSON.parse(value);
     let schems = saveFormDatas.value.scheme.scheme

From bee3a2b29cf17adbe9b6893e338664e13c6c24a9 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 09:14:37 +0800
Subject: [PATCH 05/19] =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E7=BB=84?=
 =?UTF-8?q?=E5=90=88=EF=BC=8C=E9=80=89=E6=A1=86=E9=80=89=E9=A1=B9=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/onlineform/formdesign/FormModal.vue | 2 +-
 src/views/demo/onlineform/util.ts                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/demo/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index 42d5bf40..963af2c8 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -499,7 +499,7 @@
         if(Object.keys(item).includes('children')){
           item.children = childList[item.field] || []
         }
-        if(Object.keys(item).includes('componentProps')){
+        if(item.component === 'CardGroup' && Object.keys(item).includes('componentProps')){
           item.componentProps.options = childList[item.field] || []
         }
         let pushItem = {}
diff --git a/src/views/demo/onlineform/util.ts b/src/views/demo/onlineform/util.ts
index 0beeafe9..d88c2451 100644
--- a/src/views/demo/onlineform/util.ts
+++ b/src/views/demo/onlineform/util.ts
@@ -9,7 +9,7 @@ export const cardNestStructure = (data) => {
       if(Object.keys(item).includes('children')){
         item.children = childList[item.field] || []
       }
-      if(Object.keys(item).includes('componentProps')){
+      if(item.component === 'CardGroup' && Object.keys(item).includes('componentProps')){
         item.componentProps.options = childList[item.field] || []
       }
       let pushItem = {}

From 2a526b318acb47a36b2796dd59971f7cc7a87ce9 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 10:11:04 +0800
Subject: [PATCH 06/19] =?UTF-8?q?=E3=80=90=E8=A1=A8=E5=8D=95=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E3=80=91=E5=8F=AF=E6=8B=89=E5=85=A5=E6=8E=A7=E4=BB=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/VFormDesign/components/LayoutItem.vue            | 2 ++
 1 file changed, 2 insertions(+)

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 a4d3de62..2c6f0291 100644
--- a/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
+++ b/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
@@ -11,6 +11,7 @@
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
+      {{  schema.label }}
         <Row class="grid-row" v-bind="schema.componentProps">
           <Col
             class="grid-col"
@@ -90,6 +91,7 @@
         :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

From ae173adbc2d3054e4cb3cd8c5ac2abfd810127da Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 10:49:59 +0800
Subject: [PATCH 07/19] =?UTF-8?q?=E3=80=90=E8=A1=A8=E5=8D=95=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E3=80=91=E5=8F=AF=E5=88=A0=E9=99=A4=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E9=87=8C=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VFormDesign/components/FormNodeOperate.vue  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

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

From 7003924a719b8dda222d340044a270dbb5b2ff96 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 11:04:52 +0800
Subject: [PATCH 08/19] =?UTF-8?q?=E3=80=90=E8=A1=A8=E5=8D=95=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E3=80=91=E9=80=89=E9=A1=B9=E5=8D=A1=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=AD=E5=8D=95=E4=B8=AA=E9=80=89=E9=A1=B9=E5=8D=A1=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E4=B8=8D=E5=88=B0field=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/onlineform/formdesign/FormModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/demo/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index 963af2c8..7eed1ca7 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -132,6 +132,8 @@
               }
           })
           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 = []
@@ -149,7 +151,7 @@
               item.columns[0].children = []
               
             }
-          }else if(item.field.indexOf('use_card') !== -1){
+          }else if(item.field && item.field.indexOf('use_card') !== -1){
             item.children = changeCardStructure(item.children)
             item.children.forEach(childItem => {
               if(childItem.pfield){

From 6bab629112ef5905a1e80c1f582d3721b2342a4c Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 11:44:02 +0800
Subject: [PATCH 09/19] =?UTF-8?q?=E3=80=90=E8=A1=A8=E5=8D=95=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E3=80=91=E5=B5=8C=E5=A5=97=E7=BB=84=E4=BB=B6=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E9=80=89=E9=A1=B9=E5=8D=A1=E4=B8=AD=E7=9A=84=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9field=E8=8E=B7=E5=8F=96=E4=B8=8D=E5=88=B0=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/onlineform/formdesign/FormModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/demo/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index 7eed1ca7..db2eec03 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -166,6 +166,8 @@
         result.push(item);
       });
       return result;
+    }else{
+      return data
     }
   }
   async function designSendGrandson(value) {
@@ -522,7 +524,7 @@
       }else if(item.component === 'Card'){
         item.columns[0].children = childList[item.field] || []
         result.push(item)
-      }else if(item.field.indexOf('use_card') !== -1){
+      }else if(item.field && item.field.indexOf('use_card') !== -1){
         item.children = childList[item.field] || []
         result.push(item)
       }else{

From 855ff1028e6c052220f5d1fcd6acebcd6086e3dd Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 11:44:26 +0800
Subject: [PATCH 10/19] =?UTF-8?q?=E5=90=8C=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/onlineform/util.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/demo/onlineform/util.ts b/src/views/demo/onlineform/util.ts
index d88c2451..dfb1fb69 100644
--- a/src/views/demo/onlineform/util.ts
+++ b/src/views/demo/onlineform/util.ts
@@ -30,7 +30,7 @@ export const cardNestStructure = (data) => {
     }else if(item.component === 'Card'){
       item.columns[0].children = childList[item.field] || []
       result.push(item)
-    }else if(item.field.indexOf('use_card') !== -1){
+    }else if(item.field && item.field.indexOf('use_card') !== -1){
       item.children = childList[item.field] || []
       result.push(item)
     }else{

From 108be8933219d1df3d67221c81763da26b44ea43 Mon Sep 17 00:00:00 2001
From: Zhufu <1176354795@qq.com>
Date: Thu, 6 Jun 2024 14:00:58 +0800
Subject: [PATCH 11/19] =?UTF-8?q?=E3=80=90=E8=A1=A8=E5=8D=95=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E3=80=91=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=86=EF=BC=8C=E5=88=A0=E9=99=A4=E5=8E=9F=E5=85=88=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VFormDesign/components/FormNode.vue       |  7 ++++++-
 .../VFormDesign/components/LayoutItem.vue     | 11 +++++++---
 .../demo/form-design/core/formItemConfig.ts   | 20 +++++++++----------
 3 files changed, 24 insertions(+), 14 deletions(-)

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/LayoutItem.vue b/src/views/demo/form-design/components/VFormDesign/components/LayoutItem.vue
index 2c6f0291..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,7 +7,7 @@
   <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)"
       >
@@ -50,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)"
       >
@@ -87,7 +87,7 @@
     </template>
     <template v-else-if="['CardGroup'].includes(schema.component)">
       <div
-        class="grid-box"
+        class="grid-box component-border"
         :class="{ active: schema.key === currentItem.key }"
         @click.stop="handleSetSelectItem(schema)"
       >
@@ -214,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/core/formItemConfig.ts b/src/views/demo/form-design/core/formItemConfig.ts
index 3eab1d05..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: '级联选择',

From eb9f762e217c8c8fe358899f6d9281e610c67698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Thu, 6 Jun 2024 14:42:29 +0800
Subject: [PATCH 12/19] =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E5=8C=96=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/database/index.ts                     |   8 +
 .../VFormDesign/components/FormItemProps.vue  |   1 -
 .../VFormDesign/config/formItemPropsConfig.ts |   2 +-
 .../VFormDesign/config/formItemPropsScript.ts |  95 +++----
 .../demo/onlineform/formCall/CallModal.vue    |   2 +
 src/views/demo/onlineform/formCall/utils.ts   |  90 ++++++-
 .../demo/system/graphicaltable/index.data.ts  |  34 ++-
 .../demo/system/graphicaltable/index.vue      | 174 ++++++-------
 .../system/graphicaltable/modal/index.vue     | 233 ++++++++++++++++++
 .../system/graphicaltable/modal/modal.data.ts |  42 ++++
 10 files changed, 511 insertions(+), 170 deletions(-)
 create mode 100644 src/views/demo/system/graphicaltable/modal/index.vue
 create mode 100644 src/views/demo/system/graphicaltable/modal/modal.data.ts

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/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/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/onlineform/formCall/CallModal.vue b/src/views/demo/onlineform/formCall/CallModal.vue
index 031b50f9..7c169ec7 100644
--- a/src/views/demo/onlineform/formCall/CallModal.vue
+++ b/src/views/demo/onlineform/formCall/CallModal.vue
@@ -546,6 +546,8 @@
           cardLayout: cardLayout,
           createOrModifyList: createOrModifyList,
           buttonLayout: buttonLayout,
+          record: isUpdate.value ? getFieldsValue() : {},
+          cardValues: cardValues,
         };
         utils.setCallModalData(callModalData);
         eval(codeClick);
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/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..138f1192
--- /dev/null
+++ b/src/views/demo/system/graphicaltable/modal/index.vue
@@ -0,0 +1,233 @@
+<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';
+  // api
+  import { createPicTable, updateTable } from '@/api/database/index';
+  import { getLoad } from '@/api/sys/sysDataItemDetail';
+
+  const emit = defineEmits(['submit']);
+
+  // 是否是修改
+  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 = [];
+    arr.forEach((item) => {
+      newArr.push({
+        name: item.name,
+        type: item.type,
+        explanation: item.explanation,
+      });
+    });
+    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',
+  },
+];

From 5d3338c7433e91c5621d6c3eccb18df49eefbb09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Thu, 6 Jun 2024 14:44:24 +0800
Subject: [PATCH 13/19] =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90=EF=BC=8C=E6=95=B0=E6=8D=AE=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormViewer/cardGourp.vue       | 126 ++++++++++++++++++
 src/components/FormViewer/index.ts            |   1 +
 src/components/FormViewer/index.vue           |  69 +++++++---
 src/components/FormViewer/subTable.vue        |  20 ++-
 .../package/penal/myline/index.vue            |   1 +
 .../package/penal/startEvent/index.vue        |  15 +++
 .../package/penal/userTask/index.vue          |  15 +++
 src/store/modules/subTable.ts                 |  16 ++-
 8 files changed, 236 insertions(+), 27 deletions(-)
 create mode 100644 src/components/FormViewer/cardGourp.vue

diff --git a/src/components/FormViewer/cardGourp.vue b/src/components/FormViewer/cardGourp.vue
new file mode 100644
index 00000000..f773ebbc
--- /dev/null
+++ b/src/components/FormViewer/cardGourp.vue
@@ -0,0 +1,126 @@
+<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="childGourp.length > 0">
+        <CardGourp
+          :data="childGourp[noTitleKey]"
+          :parentValue="props.parentValue"
+          :formData="props.formData"
+          v-if="childGourp[noTitleKey]"
+        />
+      </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';
+
+  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([]);
+  let cardFormData = props.formData;
+  const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 100,
+      schemas: formColumns,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 24, md: 24 },
+    });
+  console.log(props);
+  console.log(props.formData);
+  watch(
+    () => props.formData,
+    (newVal) => {
+      cardFormData = newVal;
+      console.log(cardFormData);
+      formColumns.forEach((element) => {
+        for (const key in cardFormData) {
+          console.log(key);
+          if (element.field == key) {
+            var obj = {};
+            obj[key] = cardFormData[key];
+            console.log(obj);
+            subTableDataStore.setGroupData(obj);
+          }
+        }
+      });
+      setTimeout(() => {
+        setFieldsValue(subTableDataStore.getGroupData);
+      }, 10);
+    },
+    { deep: true },
+  );
+  tableData.componentProps.options.forEach((element, index) => {
+    console.log(cardFormData);
+    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') {
+        console.log(childElement);
+        childGourp.value.push({
+          ...childElement,
+        });
+      }
+    });
+  });
+  setTimeout(() => {
+    resetFields();
+  }, 10);
+
+  const onTabChange = (value: string) => {
+    noTitleKey.value = value;
+    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();
+      console.log(subTableDataStore.getGroupData);
+      setFieldsValue(subTableDataStore.getGroupData);
+    }, 10);
+  };
+  function changeForm() {
+    console.log(getFieldsValue());
+    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..93675272 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,13 @@
         </a-col>
       </a-row>
     </template>
+    <!-- 卡片组 -->
+    <CardGourp
+      v-if="cardGroupData.length > 0"
+      :data="cardGroupData[0]"
+      :formData="cardGourpFormData"
+      :parentValue="cardGroupData[0].field"
+    />
     <!-- todo  创建/修改  人/时间 -->
     <template v-for="(item, index) in createOrModifyList" :key="index">
       <CreateOrModifyComponent :data="item" />
@@ -52,7 +67,7 @@
   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';
@@ -83,6 +98,9 @@
   const keyValue = ref('');
   const FieldsValue = ref({});
   const subTableRef = ref<any>();
+  const cardGroupData = ref([]);
+  const cardGourpFormData = ref({});
+  subTableDataStore.clearGoupData();
   const getCardLayoutKey = (dataList, key) => {
     dataList.forEach((item) => {
       if (item.component === 'Card') {
@@ -109,6 +127,7 @@
     });
     if (data) {
       const scheme = JSON.parse(data.scheme);
+      console.log(scheme);
       subTableColumns.value = [];
       // 将card组件嵌套起来
       scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
@@ -123,6 +142,7 @@
           multiterm: '',
         });
         tabElement.schemas.forEach((element) => {
+          console.log(element);
           if (element.field == props.formRelationId) {
             keyValue.value = element.componentProps.fieldName;
             getFormDetail();
@@ -192,6 +212,13 @@
               });
             });
           }
+          // 卡片组布局
+          if (element.component === 'CardGroup') {
+            console.log(element);
+            cardGroupData.value.push({
+              ...element,
+            });
+          }
           formColumns.push({
             parentValue: index,
             ...element,
@@ -208,10 +235,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 +257,7 @@
         element.show = true;
       }
     });
+    console.log(formColumns);
     // 切换时保存值
     const values = await validate();
     if (Object.keys(FieldsValue.value).length == 0) {
@@ -258,16 +286,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 +303,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 +339,6 @@
     }
   }
   async function getForm() {
-    console.log(subTableDataStore.getTableData);
     try {
       let values = await validate();
       for (const key in values) {
@@ -339,6 +364,12 @@
           query[item.parentFileId] = JSON.stringify(item.child);
         });
       }
+      // 储存卡片组信息
+      if (Object.keys(subTableDataStore.getGroupData).length > 0) {
+        for (const key in subTableDataStore.getGroupData) {
+          Object.assign(query, subTableDataStore.getGroupData[key]);
+        }
+      }
       console.log(query);
       return query;
     } catch (error) {
diff --git a/src/components/FormViewer/subTable.vue b/src/components/FormViewer/subTable.vue
index 9bcef40d..0c9e16a8 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,13 +60,17 @@
       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;
       }
     });
@@ -79,7 +85,6 @@
   watch(
     () => tableData.value,
     (newVal) => {
-      console.log(newVal);
       subTableDataStore.setSingleData(props.data.parentFileId, newVal);
     },
     { deep: true },
@@ -113,4 +118,7 @@
   defineExpose({
     getData,
   });
+  function changeData(){
+    console.log(tableData.value)
+  }
 </script>
diff --git a/src/components/ProcessDesigner/package/penal/myline/index.vue b/src/components/ProcessDesigner/package/penal/myline/index.vue
index c3cb7378..c3ba4202 100644
--- a/src/components/ProcessDesigner/package/penal/myline/index.vue
+++ b/src/components/ProcessDesigner/package/penal/myline/index.vue
@@ -52,6 +52,7 @@
     () => props.element,
     (newVal) => {
       if (newVal.type == 'bpmn:SequenceFlow') {
+        console.log(newVal);
         const currentNode = flowWfDataStore.getWfDataNode(newVal.id);
         if (currentNode) {
           node.value = currentNode;
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 = {};
+    },
   },
 });

From 70e08d268689b8076ad494444746dfd08342cb94 Mon Sep 17 00:00:00 2001
From: zzq <15064940501@163.com>
Date: Thu, 6 Jun 2024 15:06:28 +0800
Subject: [PATCH 14/19] =?UTF-8?q?=E6=A0=85=E6=A0=BC=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=8F=8A=E6=95=B0=E6=8D=AE=E8=A7=A3=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo/onlineform/formCall/CallModal.vue    |  25 ++--
 .../onlineform/formModule/modalDesign.vue     |  18 ++-
 .../demo/onlineform/formdesign/FormModal.vue  | 139 +++++++++---------
 3 files changed, 101 insertions(+), 81 deletions(-)

diff --git a/src/views/demo/onlineform/formCall/CallModal.vue b/src/views/demo/onlineform/formCall/CallModal.vue
index 031b50f9..44b0d3ff 100644
--- a/src/views/demo/onlineform/formCall/CallModal.vue
+++ b/src/views/demo/onlineform/formCall/CallModal.vue
@@ -222,6 +222,7 @@
                   if (index == 0) {
                     itemColumnChild.itemProps.hidden = false;
                   }
+                  itemColumnChild.colProps.span = itemColumn.span;
                   arr.push(itemColumnChild);
                   val.children.push(itemColumnChild);
                 });
@@ -249,7 +250,16 @@
             item.rules[0].pattern = new RegExp(item.rules[0].pattern.slice(1, -1));
           }
         }
-        arr.push(item);
+        if (item.columns) {
+          item.columns.forEach((col) => {
+            col.children.forEach((chld) => {
+              chld.colProps.span = col.span;
+              arr.push(chld);
+            });
+          });
+        } else {
+          arr.push(item);
+        }
         formColumns.value = arr;
         if (item.component === 'Card') {
           cardLayout.value.push(item);
@@ -356,7 +366,7 @@
       subTableList.value = data.recordChildren;
     } else {
       if (tabsColumns.value.length < 1) {
-        resetFields();
+        // resetFields();
       }
       subTableList.value = [];
     }
@@ -374,8 +384,6 @@
   });
 
   function tabsChange(e) {
-    console.log('eee', e);
-    console.log('tabsColumns', tabsColumns);
     const columns: FormSchema[] = [];
     tabsColumns.value.forEach((item) => {
       item.children.forEach((val) => {
@@ -390,11 +398,8 @@
         columns.push(val);
       });
     });
-    console.log('columns', columns);
-    console.log('formColumns', formColumns);
     const obj = getFieldsValue();
-    console.log('values', getFieldsValue());
-    // resetFields();
+
     setTimeout(() => {
       updateSchema(columns);
       resetFields();
@@ -433,7 +438,9 @@
       labelWidth: 100,
       schemas: formColumns,
       showActionButtonGroup: false,
-      baseColProps: { lg: 24, md: 24 },
+      actionColOptions: {
+        span: 24,
+      },
     });
   //表单填写数据
   async function ModalSureClick() {
diff --git a/src/views/demo/onlineform/formModule/modalDesign.vue b/src/views/demo/onlineform/formModule/modalDesign.vue
index cb64be07..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);
diff --git a/src/views/demo/onlineform/formdesign/FormModal.vue b/src/views/demo/onlineform/formdesign/FormModal.vue
index 7eed1ca7..f1be491a 100644
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@@ -117,57 +117,59 @@
     return arr;
   }
   const changeCardStructure = (data) => {
-    let result = []
+    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.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 = []
-              
+      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 });
             }
-          }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.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 = []
+            });
+            item.children = [];
           }
         }
         result.push(item);
       });
       return result;
     }
-  }
+  };
   async function designSendGrandson(value) {
     let designTab = JSON.parse(value);
     let schems = saveFormDatas.value.scheme.scheme
@@ -491,23 +493,23 @@
   }
 
   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){
-        if(Object.keys(item).includes('children')){
-          item.children = childList[item.field] || []
+    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] || [];
         }
-        if(item.component === 'CardGroup' && Object.keys(item).includes('componentProps')){
-          item.componentProps.options = 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'){
-            pushItem[key] = item[key]
+        let pushItem = {};
+        Object.keys(item).forEach((key) => {
+          if (key !== 'ptype' && key !== 'pfield') {
+            pushItem[key] = item[key];
           }
         });
         if (childList[item.pfield]) {
@@ -515,18 +517,17 @@
         } 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] || []
-        result.push(item)
-      }else if(item.field.indexOf('use_card') !== -1){
-        item.children = childList[item.field] || []
-        result.push(item)
-      }else{
-        result.push(item)
+      } 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;

From d12e16a726da3a6f18ad8646ea66248fff273eff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Thu, 6 Jun 2024 15:25:28 +0800
Subject: [PATCH 15/19] =?UTF-8?q?=E5=9B=BE=E5=BD=A2=E5=8C=96=E5=BB=BA?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/database/index.ts                     |   8 +
 .../VFormDesign/components/FormItemProps.vue  |   1 -
 .../VFormDesign/config/formItemPropsConfig.ts |   2 +-
 .../VFormDesign/config/formItemPropsScript.ts |  95 +++----
 .../demo/onlineform/formCall/CallModal.vue    |   2 +
 src/views/demo/onlineform/formCall/utils.ts   |  90 ++++++-
 .../demo/system/graphicaltable/index.data.ts  |  34 ++-
 .../demo/system/graphicaltable/index.vue      | 174 ++++++------
 .../system/graphicaltable/modal/index.vue     | 248 ++++++++++++++++++
 .../system/graphicaltable/modal/modal.data.ts |  42 +++
 10 files changed, 526 insertions(+), 170 deletions(-)
 create mode 100644 src/views/demo/system/graphicaltable/modal/index.vue
 create mode 100644 src/views/demo/system/graphicaltable/modal/modal.data.ts

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/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/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/onlineform/formCall/CallModal.vue b/src/views/demo/onlineform/formCall/CallModal.vue
index 44b0d3ff..5eab444d 100644
--- a/src/views/demo/onlineform/formCall/CallModal.vue
+++ b/src/views/demo/onlineform/formCall/CallModal.vue
@@ -553,6 +553,8 @@
           cardLayout: cardLayout,
           createOrModifyList: createOrModifyList,
           buttonLayout: buttonLayout,
+          record: isUpdate.value ? getFieldsValue() : {},
+          cardValues: cardValues,
         };
         utils.setCallModalData(callModalData);
         eval(codeClick);
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/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',
+  },
+];

From f177f6baf039659a2574598d93da2397f78417c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Thu, 6 Jun 2024 15:39:44 +0800
Subject: [PATCH 16/19] =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E8=A7=A3?=
 =?UTF-8?q?=E6=9E=90=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormViewer/cardGourp.vue | 72 +++++++++++++++----------
 src/components/FormViewer/index.vue     | 28 +++++++---
 2 files changed, 67 insertions(+), 33 deletions(-)

diff --git a/src/components/FormViewer/cardGourp.vue b/src/components/FormViewer/cardGourp.vue
index f773ebbc..1cbd4914 100644
--- a/src/components/FormViewer/cardGourp.vue
+++ b/src/components/FormViewer/cardGourp.vue
@@ -7,12 +7,12 @@
       @tabChange="(key) => onTabChange(key)"
     >
       <BasicForm ref="cardRef" @register="registerForm" @change="changeForm" />
-      <template v-if="childGourp.length > 0">
+      <template v-if="Object.keys(childItem).length > 0">
         <CardGourp
-          :data="childGourp[noTitleKey]"
+          :data="childItem"
           :parentValue="props.parentValue"
           :formData="props.formData"
-          v-if="childGourp[noTitleKey]"
+          v-if="childItem"
         />
       </template>
     </a-card>
@@ -23,6 +23,7 @@
   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({
@@ -44,7 +45,10 @@
   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,
@@ -53,19 +57,15 @@
       baseColProps: { lg: 24, md: 24 },
     });
   console.log(props);
-  console.log(props.formData);
   watch(
     () => props.formData,
     (newVal) => {
       cardFormData = newVal;
-      console.log(cardFormData);
       formColumns.forEach((element) => {
         for (const key in cardFormData) {
-          console.log(key);
           if (element.field == key) {
             var obj = {};
             obj[key] = cardFormData[key];
-            console.log(obj);
             subTableDataStore.setGroupData(obj);
           }
         }
@@ -76,35 +76,55 @@
     },
     { deep: true },
   );
-  tableData.componentProps.options.forEach((element, index) => {
-    console.log(cardFormData);
-    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,
+  if (tableData.componentProps) {
+    tableData.componentProps.options.forEach((element, index) => {
+      tabListNoTitle.value.push({
+        key: index,
+        tab: element.label,
+        ...element,
         index: index,
       });
-      if (childElement.component == 'CardGroup') {
-        console.log(childElement);
-        childGourp.value.push({
+      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 }]);
@@ -115,12 +135,10 @@
     });
     setTimeout(() => {
       resetFields();
-      console.log(subTableDataStore.getGroupData);
       setFieldsValue(subTableDataStore.getGroupData);
     }, 10);
   };
   function changeForm() {
-    console.log(getFieldsValue());
     subTableDataStore.setGroupData(getFieldsValue());
   }
 </script>
diff --git a/src/components/FormViewer/index.vue b/src/components/FormViewer/index.vue
index 93675272..32ff6615 100644
--- a/src/components/FormViewer/index.vue
+++ b/src/components/FormViewer/index.vue
@@ -47,12 +47,14 @@
       </a-row>
     </template>
     <!-- 卡片组 -->
-    <CardGourp
-      v-if="cardGroupData.length > 0"
-      :data="cardGroupData[0]"
-      :formData="cardGourpFormData"
-      :parentValue="cardGroupData[0].field"
-    />
+    <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" />
@@ -71,6 +73,7 @@
   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();
 
@@ -101,6 +104,8 @@
   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') {
@@ -131,6 +136,7 @@
       subTableColumns.value = [];
       // 将card组件嵌套起来
       scheme.formInfo.tabList = cardNestStructure(scheme.formInfo.tabList);
+      console.log(scheme.formInfo.tabList);
       subTableDB.value = scheme.db;
       let disDetail = false;
       let tableColumns = [];
@@ -370,6 +376,16 @@
           Object.assign(query, subTableDataStore.getGroupData[key]);
         }
       }
+      // 存储创建人、创建时间等内容
+      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) {

From 8acacd4a993bb7e12daafa32ed7ab67fc4c7a46b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Thu, 6 Jun 2024 15:59:50 +0800
Subject: [PATCH 17/19] =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=BB=84=E5=8A=A0?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA=E4=BA=BA=E7=AD=89=E8=B5=8B=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormViewer/cardGourp.vue | 24 ++++++++++++------------
 src/components/FormViewer/index.vue     |  3 ++-
 src/components/FormViewer/subTable.vue  |  1 +
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/FormViewer/cardGourp.vue b/src/components/FormViewer/cardGourp.vue
index 1cbd4914..0af5986a 100644
--- a/src/components/FormViewer/cardGourp.vue
+++ b/src/components/FormViewer/cardGourp.vue
@@ -97,18 +97,18 @@
             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);
-        // }
+        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);
+        }
       });
     });
   }
diff --git a/src/components/FormViewer/index.vue b/src/components/FormViewer/index.vue
index 32ff6615..165ee9ba 100644
--- a/src/components/FormViewer/index.vue
+++ b/src/components/FormViewer/index.vue
@@ -373,9 +373,10 @@
       // 储存卡片组信息
       if (Object.keys(subTableDataStore.getGroupData).length > 0) {
         for (const key in subTableDataStore.getGroupData) {
-          Object.assign(query, subTableDataStore.getGroupData[key]);
+          query[key] = subTableDataStore.getGroupData[key];
         }
       }
+      console.log(query);
       // 存储创建人、创建时间等内容
       if (createOrModifyList.value.length > 0) {
         createOrModifyList.value.forEach((item) => {
diff --git a/src/components/FormViewer/subTable.vue b/src/components/FormViewer/subTable.vue
index 0c9e16a8..1676a0db 100644
--- a/src/components/FormViewer/subTable.vue
+++ b/src/components/FormViewer/subTable.vue
@@ -76,6 +76,7 @@
     });
   });
   props.data.child.forEach((element) => {
+    console.log(element);
     if (element.component != 'InputGuid') {
       columns.value.push({
         ...element,

From 50241b880a38aeb1b5ca43fae2f30a6807a2b59e Mon Sep 17 00:00:00 2001
From: shichao <17568097882@163.com>
Date: Thu, 6 Jun 2024 16:32:03 +0800
Subject: [PATCH 18/19] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=8C=BA100%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/VFormDesign/modules/FormComponentPanel.vue       | 2 ++
 1 file changed, 2 insertions(+)

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;

From 189843c8e9d0fd6ef226e03d971958e6dd9e16f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=A6=8D?= <1455167345@qq.com>
Date: Thu, 6 Jun 2024 16:44:41 +0800
Subject: [PATCH 19/19] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessDesigner.vue        | 17 ++++++++++++++++-
 .../package/penal/myline/index.vue              |  3 ++-
 src/views/demo/workflow/scheme/preview.vue      |  6 +++---
 3 files changed, 21 insertions(+), 5 deletions(-)

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 c3ba4202..da5f6a86 100644
--- a/src/components/ProcessDesigner/package/penal/myline/index.vue
+++ b/src/components/ProcessDesigner/package/penal/myline/index.vue
@@ -52,10 +52,11 @@
     () => props.element,
     (newVal) => {
       if (newVal.type == 'bpmn:SequenceFlow') {
-        console.log(newVal);
         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/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 {