表单可个性化配置功能开发：

1.表单编辑页设计成3个tab，分别用于编辑列表配置信息、表单配置信息、渲染覆盖配置信息。
2.代码生成器做了调整
  （1）加上用于控制表单、列表展示字段、列表查询字段的代码。
   （2） index页有一些地方空了许多行，做了调整，减少空行数（使用code.replace(/(\n\s*\n\s*\n)+/g, '\n')替换3个以上的换行符）。
 3.增加了工具类：useFormConfig.ts,用户比对合并个性化信息。

src/api/form/design/index.ts

@@ -112,6 +112,21 @@ export async function getFormTemplate(id: string, mode: ErrorMessageMode = 'moda
   );
 }
 
+/**
+ * @description: 获取模板详情信息-优先从缓存获取
+ */
+export async function getFormTemplateUsingCache(id: string, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormTemplateModel>(
+        {
+            url: Api.Info,
+            params: {id,useCache:1},
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
 /**
  * @description: 更新模板状态
  */

src/components/CreateCodeStep/src/EntireConfigStep.vue

@@ -1,54 +1,135 @@
 <template>
   <div class="entireConfigStep">
-    <CodeEditor v-model:value="jsonObject" @change="handleChange" language="json" />
+      <a-tabs v-model:activeKey="activeKey"  size="large" class="tab-list">
+          <a-tab-pane key="1" tab="列表配置">
+              <CodeEditor v-model:value="listConfigObject" @change="handleListConfigChange" language="json" />
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="表单配置">
+              <CodeEditor v-model:value="formConfigObject" @change="handleFormConfigChange" language="json" />
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="渲染覆盖配置">
+            <CodeEditor v-model:value="renderConfigObject" @change="handleRenderConfigChange" :mode="MODE.JS" />
+          </a-tab-pane>
+      </a-tabs>
   </div>
 </template>
 <script lang="ts" setup>
     import { onMounted, inject,watch,computed, ref,unref} from 'vue';
-    import Icon from '/@/components/Icon/index';
     import { useI18n } from '/@/hooks/web/useI18n';
     import { useMessage } from '/@/hooks/web/useMessage';
     import { debounce} from 'lodash-es';
-    import { CodeEditor } from '/@/components/CodeEditor';
+    import {CustomFormConfig, GeneratorConfig} from '/@/model/generator/generatorConfig';
+    import { CodeEditor,MODE } from '/@/components/CodeEditor';
    
     const { t } = useI18n();
     const { notification } = useMessage();
     const generatorConfig = inject<GeneratorConfig>('generatorConfig');
-    const jsonObject=ref();
+    const customFormConfig = inject<CustomFormConfig>('customFormConfig');
+    const listConfigObject=ref();
+    const formConfigObject=ref();
+    const renderConfigObject=ref();
+
+    const activeKey = ref('1');
 
     onMounted(() => {
         
     });
     
 
-  const handleChange=debounce((v)=>{
+  const handleListConfigChange=debounce((v)=>{
+      try{
+          let jsonObject = JSON.parse(v);
+          generatorConfig.listConfig.queryConfigs= jsonObject.queryConfigs;
+          generatorConfig.listConfig.columnConfigs= jsonObject.columnConfigs;
+          generatorConfig.listConfig.buttonConfigs= jsonObject.buttonConfigs;
+       }catch(e){
+         notification.error({
+           message: t('提示'),
+           description: t('列表配置json格式有误'),
+         });  
+       }
+  },1000);
+
+  const handleFormConfigChange=debounce((v)=>{
     try{
         generatorConfig.formJson= JSON.parse(v);
     }catch(e){
         notification.error({
             message: t('提示'),
-           description: t('json格式有误'),
+            description: t('表单配置json格式有误'),
         });
     }
-    },500);   
+  },1000);
+
+  const handleRenderConfigChange=debounce((v)=>{
+       /* try{
+          let jsonObject = JSON.parse(v);
+          generatorConfig.renderConfig.formProps= jsonObject.formProps;
+        }catch(e){
+          notification.error({
+              message: t('提示'),
+              description: t('渲染覆盖配置json格式有误'),
+          });
+      }*/
+      customFormConfig.renderConfig=v;
+  },1000);
 
     const initStep =()=> {
-       jsonObject.value=JSON.stringify(generatorConfig.formJson, null, 2);
+      listConfigObject.value=JSON.stringify({
+          queryConfigs:generatorConfig.listConfig.queryConfigs,
+          columnConfigs:generatorConfig.listConfig.columnConfigs,
+          buttonConfigs:generatorConfig.listConfig.buttonConfigs
+      }, null, 2);
+
+      formConfigObject.value=JSON.stringify(generatorConfig.formJson, null, 2);
+
+    /*  renderConfigObject.value=JSON.stringify({
+           searchFormSchema:generatorConfig.renderConfig.searchFormSchema||{},
+           columns:generatorConfig.renderConfig.columns||{},
+           formProps:generatorConfig.renderConfig.formProps||{}
+      }, null, 2);*/
+        renderConfigObject.value= customFormConfig.renderConfig||'let a=5;';
   }
     
   const validateStep = async (): Promise<boolean> => {
       try{
-          generatorConfig.formJson= JSON.parse(jsonObject.value);
+          let jsonObject = JSON.parse(listConfigObject.value);
+          generatorConfig.listConfig.queryConfigs= jsonObject.queryConfigs;
+          generatorConfig.listConfig.columnConfigs= jsonObject.columnConfigs;
+          generatorConfig.listConfig.buttonConfigs= jsonObject.buttonConfigs;
       }catch(e){
           notification.error({
               message: t('提示'),
-            description: t('json格式有误'),
+              description: t('表单配置json格式有误'),
           });
           return false;
       }
-      return true;
+      try{
+          generatorConfig.formJson= JSON.parse(formConfigObject.value);
+      }catch(e){
+          notification.error({
+            message: t('提示'),
+            description: t('表单配置json格式有误'),
+          });
+          return false;
       }
 
+    /*  try{
+          let jsonObject = JSON.parse(renderConfigObject.value);
+          generatorConfig.renderConfig.formProps=jsonObject.formProps ;
+      }catch(e){
+          console.log(e);
+          notification.error({
+              message: t('提示'),
+              description: t('渲染覆盖配置json格式有误'),
+          });
+          return false;
+      }*/
+
+      customFormConfig.renderConfig=renderConfigObject.value;
+
+      return true;
+  }
 
    defineExpose({initStep,validateStep});
 </script> 
@@ -57,4 +138,36 @@
       height:100%;
     }
 
+    :deep(.ant-tabs-nav-wrap) {
+        width: 100% !important;
+        display: block !important;
+        border-top: 8px solid #f0f2f5;
+        border-bottom: 3px solid #f0f2f5;
+    }
+
+    :deep(.ant-tabs-tab) {
+        width: 33.33% !important;
+        display: block !important;
+        text-align: center !important;
+    }
+
+    :deep(.ant-tabs-tabpane) {
+        padding: 0 8px;
+    }
+
+    :deep(.ant-tabs-content) {
+        height: 100% !important;
+        overflow-y: auto;
+    }
+
+    :deep(.ant-tabs-nav) {
+        margin-bottom: 0;
+    }
+
+
+    .tab-list {
+        height: 100%;
+    }
+
+
 </style>

src/hooks/web/useFormConfig.ts

@@ -0,0 +1,72 @@
+
+import { FormSchema } from '/@/components/Form';
+import { BasicColumn } from "/@/components/Table";
+import { getFormTemplateUsingCache } from '/@/api/form/design';
+import { deepMerge } from '/@/utils';
+
+
+
+export function useFormConfig() {
+   async function mergeFormSchemas(formSchema: FormSchema[],formId:String){
+       const formProps=await queryConfig(formId,'formProps');
+       let fschemas=formProps?.schemas;
+       if(fschemas&&fschemas.length>0){
+          return deepMerge(formSchema,fschemas);
+       }else{
+           return formSchema;
+       }
+    }
+
+    async function mergeColumns(columns: BasicColumn[],formId:String){
+        const cols=await queryConfig(formId,'columns');
+        if(cols&&cols.length>0){
+            const filteredCol = cols.filter(colItem =>
+                columns.some(column => column.dataIndex === colItem.dataIndex)
+            );
+            return filteredCol;
+        }else{
+            return columns;
+        }
+    }
+
+    async function mergeSearchFormSchema(searchFormSchema: FormSchema[],formId:String){
+        const sFormSchema=await queryConfig(formId,'searchFormSchema');
+        if(sFormSchema&&sFormSchema.length>0){
+            const filteredsFormSchema = sFormSchema.filter(sItem =>
+                searchFormSchema.some( searchItem => searchItem.field === sItem.field)
+            );
+            return filteredsFormSchema;
+        }else{
+            return searchFormSchema;
+        }
+    }
+
+
+  async function queryConfig(formId:String,configName:String){
+      const formTemplate = await getFormTemplateUsingCache(formId);
+      const renderConfig=formTemplate.renderConfig;
+      const exportMatches = renderConfig.matchAll(/export\s+const\s+(\w+)\s*(?::\s*\w+(?:\[\])?)?\s*=\s*([\s\S]*?)(?=\n\s*export\s+const|\n\s*const|\n\s*export\s+function|\n\s*function|$)/g);
+      for (const match of exportMatches) {
+          const varName = match[1];
+          const valueCode = match[2].trim();
+          const cleanCode = valueCode.endsWith(';') ? valueCode.slice(0, -1) : valueCode;
+          if(varName==configName) {
+              try {
+                  const value = new Function(`return ${cleanCode}`)();
+                  // console.log(value);
+                  return value;
+              } catch (e) {
+                  console.error(`Failed to parse ${varName}:`, e);
+                  throw new Error('解析表单渲染覆盖配置出错，请联系管理员处理');
+              }
+          }
+      }
+      return null;
+   }
+
+  return {
+      mergeFormSchemas,
+      mergeColumns,
+      mergeSearchFormSchema
+  };
+}

src/utils/helper/generatorHelper.ts

@@ -643,6 +643,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { useFormConfig } from '/@/hooks/web/useFormConfig';
   import { useRouter } from 'vue-router';
   import { get${pascalMainTableName} } from '/@/api/${
     model.outputConfig.outputValue
@@ -710,7 +711,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
       : ''
   }
   ${componentArray.includes('money-chinese') ? `import nzhcn from 'nzh/cn';` : ''}
-  import { searchFormSchema, columns } from './components/config';
+  import {formConfig, searchFormSchema, columns } from './components/config';
   ${
     model.listConfig.buttonConfigs.filter((x) => x.isUse).length > 0 ||
     model.listConfig.leftMenuConfig?.childIcon ||
@@ -746,6 +747,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
   }
     
   import useEventBus from '/@/hooks/event/useEventBus';
+  import { cloneDeep } from 'lodash-es';
   
   const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
 
@@ -753,8 +755,12 @@ ${hasTemplatePrint ? ' reactive ' : ''}
   const { t } = useI18n();
   defineEmits(['register']);
   const { filterColumnAuth, filterButtonAuth } = usePermission();
+  const { mergeColumns,mergeSearchFormSchema } = useFormConfig();
+
+  const filterColumns = cloneDeep(filterColumnAuth(columns));
+  const customConfigColums =ref(filterColumns);
+  const customSearchFormSchema =ref(searchFormSchema);
   
-  const filterColumns = filterColumnAuth(columns);
   const tableRef = ref();
   ${
     hasFilterButton
@@ -868,12 +874,12 @@ ${hasTemplatePrint ? ' reactive ' : ''}
     title: '${model.listConfig?.listTitle||''}' || (formName + '列表'),
     api: get${pascalMainTableName}Page,
     rowKey: '${camelCaseString(mainTable.pkField)}',
-    columns: filterColumns,
+    columns: customConfigColums,
     formConfig: {
       rowProps: {
         gutter: 16,
       },
-      schemas: searchFormSchema,
+      schemas: customSearchFormSchema,
       fieldMapToTime: [${
         model.listConfig.queryConfigs
           .filter((item) => {
@@ -961,7 +967,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
         path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
         query: {
           taskId: taskIds[0],
-          formName: formName
+          formName: formName,
+          formId:currentRoute.value.meta.formId
         }
       });
     } else if (schemaId && !taskIds && processId) {
@@ -970,7 +977,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
         query: {
           readonly: 1,
           taskId: '',
-          formName: formName
+          formName: formName,
+          formId:currentRoute.value.meta.formId
         }
       });
     } else {
@@ -978,7 +986,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
         path: '/form/${lowerClassName}/' + record.id + '/viewForm',
         query: {
           formPath: '${model.outputConfig.outputValue}/${lowerClassName}',
-          formName: formName
+          formName: formName,
+          formId:currentRoute.value.meta.formId
         }
       });
     }
@@ -1007,7 +1016,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
         path: '/form/${lowerClassName}/0/createForm',
         query: {
           formPath: '${model.outputConfig.outputValue}/${lowerClassName}',
-          formName: formName
+          formName: formName,
+          formId:currentRoute.value.meta.formId
         }
       });
     }
@@ -1025,7 +1035,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
       path: '/form/${lowerClassName}/' + record.id + '/updateForm',
       query: {
           formPath: '${model.outputConfig.outputValue}/${lowerClassName}',
-          formName: formName
+          formName: formName,
+          formId:currentRoute.value.meta.formId
       }
     });`
         : ` 
@@ -1440,6 +1451,8 @@ ${hasTemplatePrint ? ' reactive ' : ''}
     } else {
       bus.on(FORM_LIST_MODIFIED, handleRefresh);
     }
+    setCustomConfigColumns();
+    setCustomSearchFormSchema();
   });
   onUnmounted(() => {
     if (schemaIdComputedRef.value) {
@@ -1587,6 +1600,20 @@ ${hasTemplatePrint ? ' reactive ' : ''}
   `
       : ''
   }
+  
+  async function setCustomConfigColumns(){
+    if (formConfig.useCustomConfig) {
+      const cols= await mergeColumns(customConfigColums.value,currentRoute.value.meta.formId);
+      customConfigColums.value=cols;
+    }
+  };
+  
+  async function setCustomSearchFormSchema(){
+    if (formConfig.useCustomConfig) {
+       const cols= await mergeSearchFormSchema(customSearchFormSchema.value,currentRoute.value.meta.formId);
+       customSearchFormSchema.value=cols;
+    }
+   };
 </script>
 <style lang="less" scoped>
   :deep(.ant-table-selection-col) {
@@ -1599,7 +1626,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
     display: none !important;
   }
 </style>`;
-  return code;
+  return code.replace(/(\n\s*\n\s*\n)+/g, '\n');
 }
 /**
  * 构建SimpleForm页面
@@ -1640,8 +1667,8 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
   />
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, onMounted } from 'vue';
+  import { reactive, ref,onBeforeMount,onMounted } from 'vue';
-  import { formProps, formEventConfigs } from './config';
+  import { formProps, formEventConfigs ,formConfig} from './config';
   import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
   import { add${pascalMainTableName}, get${pascalMainTableName}, update${pascalMainTableName} } from '/@/api/${
     model.outputConfig.outputValue
@@ -1649,11 +1676,16 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
   import { cloneDeep } from 'lodash-es';
   import { FormDataProps } from '/@/components/Designer/src/types';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { useFormConfig } from '/@/hooks/web/useFormConfig';
   import { FromPageType } from '/@/enums/workflowEnum';
   import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent,} from '/@/hooks/web/useFormEvent';
   import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
   import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
+  import { useRouter } from 'vue-router';
+  
   const { filterFormSchemaAuth } = usePermission();
+  const { mergeFormSchemas } = useFormConfig();
+  const { currentRoute } = useRouter();
 
   const RowKey = '${mainTable.pkField ? camelCase(mainTable.pkField) : 'id'}';
   const emits = defineEmits(['changeUploadComponentIds','loadingCompleted', 'form-mounted']);
@@ -1665,7 +1697,7 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
   });
   const systemFormRef = ref();
   const data: { formDataProps: FormDataProps } = reactive({
-    formDataProps: cloneDeep(formProps),
+    formDataProps: {schemas:[]} as FormDataProps,
   });
   const state = reactive({
     formModel: {},
@@ -1673,6 +1705,8 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
   
   onMounted(async () => {
     try {
+      await setCustomFormSchemas();
+      
       if (props.fromPage == FromPageType.MENU) {
         setMenuPermission();
         await createFormEvent(formEventConfigs, state.formModel,
@@ -1701,9 +1735,19 @@ export function buildSimpleFormCode(model: GeneratorConfig, _tableInfo: TableInf
 
     }
   });
+  
+  // 根据渲染覆盖配置设置表单属性
+  async function setCustomFormSchemas() {
+     const cloneProps=cloneDeep(formProps);
+      if (formConfig.useCustomConfig) {
+         await mergeFormSchemas(cloneProps.schemas!,currentRoute.value.query.formId);
+      }
+     data.formDataProps=cloneProps;
+  }
+  
   // 根据菜单页面权限，设置表单属性（必填，禁用，显示）
   function setMenuPermission() {
-    data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
+    data.formDataProps.schemas = filterFormSchemaAuth(data.formDataProps.schemas!);
   }
 
   // 校验form 通过返回表单数据
@@ -2051,6 +2095,10 @@ export function buildConfigJsonCode(model: GeneratorConfig, formProps: FormProps
   import { BasicColumn } from '/@/components/Table';
   ${findUpload(formProps.schemas) ? `import { uploadApi } from '/@/api/sys/upload';` : ''}
    
+  export const formConfig ={
+     useCustomConfig:false,
+  };
+   
   export const searchFormSchema: FormSchema[] = [
     ${model.listConfig.queryConfigs
       .map((item) => {

src/views/form/design/components/components/CodeFirstModal.vue

@@ -149,15 +149,19 @@
     customFormConfig.category = data.category;
     customFormConfig.formDesignType = data.formDesignType;
     customFormConfig.formJson = JSON.parse(data.formJson);
+    customFormConfig.listConfig = JSON.parse(data.listConfig);
+    customFormConfig.renderConfig =data.renderConfig;
     customFormConfig.remark = data.remark;
 
-    const { formJson } = customFormConfig;
+    const { formJson,listConfig,renderConfig } = customFormConfig;
 
     generatorConfig.databaseId = formJson.databaseId;
     generatorConfig.isDataAuth = formJson.isDataAuth;
     generatorConfig.dataAuthList = formJson.dataAuthList;
     generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
     generatorConfig.formJson = formJson.formJson;
+    generatorConfig.listConfig = listConfig;
+    generatorConfig.renderConfig = renderConfig;
     generatorConfig.formEventConfig = formJson.formEventConfig!;
     generatorConfig.formJson.list = generatorConfig.formJson.list.filter(
       (x) => x.type !== 'hiddenComponent',

src/views/form/design/components/components/DataFirstModal.vue

@@ -137,15 +137,19 @@
     customFormConfig.category = data.category;
     customFormConfig.formDesignType = data.formDesignType;
     customFormConfig.formJson = JSON.parse(data.formJson);
+    customFormConfig.listConfig = JSON.parse(data.listConfig);
+    customFormConfig.renderConfig =data.renderConfig;
     customFormConfig.remark = data.remark;
 
-    const { formJson } = customFormConfig;
+    const { formJson,listConfig,renderConfig } = customFormConfig;
 
     generatorConfig.databaseId = formJson.databaseId;
     generatorConfig.isDataAuth = formJson.isDataAuth;
     generatorConfig.dataAuthList = formJson.dataAuthList;
     generatorConfig.tableConfigs = formJson.tableConfigs;
     generatorConfig.formJson = formJson.formJson;
+    generatorConfig.listConfig = listConfig;
+    generatorConfig.renderConfig = renderConfig;
     generatorConfig.formEventConfig = formJson.formEventConfig!;
     generatorConfig.formJson.list = generatorConfig.formJson.list.filter(
       (x) => x.type !== 'hiddenComponent',

src/views/form/design/components/components/SimpleTemplateModal.vue

@@ -148,15 +148,19 @@
     customFormConfig.category = data.category;
     customFormConfig.formDesignType = data.formDesignType;
     customFormConfig.formJson = JSON.parse(data.formJson);
+    customFormConfig.listConfig = JSON.parse(data.listConfig);
+    customFormConfig.renderConfig =data.renderConfig;
     customFormConfig.remark = data.remark;
 
-    const { formJson } = customFormConfig;
+    const { formJson,listConfig,renderConfig } = customFormConfig;
 
     generatorConfig.databaseId = formJson.databaseId;
     generatorConfig.isDataAuth = formJson.isDataAuth;
     generatorConfig.dataAuthList = formJson.dataAuthList;
     generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
     generatorConfig.formJson = formJson.formJson;
+    generatorConfig.listConfig = listConfig;
+    generatorConfig.renderConfig = renderConfig;
     generatorConfig.formEventConfig = formJson.formEventConfig!;
     generatorConfig.formJson.list = generatorConfig.formJson.list.filter(
       (x) => x.type !== 'hiddenComponent',