表单设计器字段添加注释、分割线表单组件等去除保存验证，表单发布调用查询功能添加

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,
               });

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 (schemas) {
-      if (['Grid'].includes(formItem.component)) {
+      schemas.forEach((formItem: IVFormComponent) => {
-        // 栅格布局
+        if (['Grid'].includes(formItem.component)) {
-        formItem.columns?.forEach((item) => traverse(item.children));
+          // 栅格布局
-      } else {
+          formItem.columns?.forEach((item) => traverse(item.children));
-        cb(formItem);
+        } else {
-      }
+          cb(formItem);
-    });
+        }
+      });
+    }
   };
   traverse(array);
 }

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 infoUseSubTableData = ref();
-  const infoUseMainTableData = 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 => {
+        res[mainTableName].forEach((item) => {
-          infoUseMainTableData.value = {...infoUseMainTableData.value, ...item}
+          infoUseMainTableData.value = { ...infoUseMainTableData.value, ...item };
-        })
+        });
       })
       .catch((err) => {
         console.log('err', err);

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 };
       });
 
     // 常用按钮-树

src/views/demo/onlineform/formdesign/FormModal.vue

@@ -117,31 +117,32 @@
     return arr;
   }
   const changeCardStructure = (data) => {
-    let result = []
+    let result = [];
-    data.forEach(item => {
+    if (data && data.length > 1) {
-      if(item.component === "Tabs"){
+      data.forEach((item) => {
-        item.componentProps.options = changeCardStructure(item.componentProps.options)
+        if (item.component === 'Tabs') {
-      }else if(item.children){
+          item.componentProps.options = changeCardStructure(item.componentProps.options);
-        item.children = changeCardStructure(item.children)
+        } else if (item.children) {
-      }else{
+          item.children = changeCardStructure(item.children);
-        if(["Grid","Card"].includes(item.component)){
+        } else {
-          item.columns[0].children= changeCardStructure(item.columns[0].children)
+          if (['Grid', 'Card'].includes(item.component)) {
-          if(item.component === 'Card'){
+            item.columns[0].children = changeCardStructure(item.columns[0].children);
-            item.columns[0].children.forEach(childItem => {
+            if (item.component === 'Card' && item.columns[0].children) {
-              if(childItem.pfield){
+              item.columns[0].children.forEach((childItem) => {
-                result.push(childItem)
+                if (childItem.pfield) {
-              }else{
+                  result.push(childItem);
-                result.push({...childItem, ptype: "card", pfield: item.field})
+                } else {
-              }
+                  result.push({ ...childItem, ptype: 'card', pfield: item.field });
-            })
+                }
-            
+              });
+            }
           }
         }
-      }
+        result.push(item);
-      result.push(item)
+      });
-    })
+      return result;
-    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 (
-        if (!item.componentProps.fieldName) {
+          item.component != 'CardGroup' &&
-          tabLabelArr.push(item.label);
+          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 (
-            if (!list.componentProps.fieldName) {
+              list.component != 'CardGroup' &&
-              tabLabelArr.push(list.label);
+              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同级嵌套起来
+      // 将Card同级嵌套起来
-      schems.formInfo.tabList = cardNestStructure(schems.formInfo.tabList)
+      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 childList = {};
-    let result = []
+    let result = [];
-    data.forEach(item => {
+    data.forEach((item) => {
-      if(item.schemas){
+      if (item.schemas) {
-        item.schemas = cardNestStructure(item.schemas)
+        item.schemas = cardNestStructure(item.schemas);
-        result.push(item)
+        result.push(item);
-      }else if(item.ptype){
+      } else if (item.ptype) {
-        let pushItem = {}
+        let pushItem = {};
-        Object.keys(item).forEach(key => {
+        Object.keys(item).forEach((key) => {
-          if(key !== 'ptype' && key !== 'pfield'){
+          if (key !== 'ptype' && key !== 'pfield') {
-            pushItem[key] = item[key]
+            pushItem[key] = item[key];
           }
-        })
+        });
-        if(childList[item.pfield]){
+        if (childList[item.pfield]) {
-          childList[item.pfield].push(pushItem)
+          childList[item.pfield].push(pushItem);
-        }else{
+        } else {
-          childList[item.pfield] = [pushItem]
+          childList[item.pfield] = [pushItem];
         }
-      }else if(item.component === 'Card'){
+      } else if (item.component === 'Card') {
-        item.columns[0].children = childList[item.field]
+        item.columns[0].children = childList[item.field];
-        result.push(item)
+        result.push(item);
-      }else{
+      } else {
-        result.push(item)
+        result.push(item);
       }
-    })
+    });
-    return result
+    return result;
-  }
+  };
   // 自动建表返回后，保存数据
   function automaticFormDataBack(data) {
     if (isStageClick.value && stepsCurrent.value === 0) {