表单可个性化配置功能开发:
1.表单编辑页设计成3个tab,分别用于编辑列表配置信息、表单配置信息、渲染覆盖配置信息。 2.代码生成器做了调整 (1)加上用于控制表单、列表展示字段、列表查询字段的代码。 (2) index页有一些地方空了许多行,做了调整,减少空行数(使用code.replace(/(\n\s*\n\s*\n)+/g, '\n')替换3个以上的换行符)。 3.增加了工具类:useFormConfig.ts,用户比对合并个性化信息。
This commit is contained in:
72
src/hooks/web/useFormConfig.ts
Normal file
72
src/hooks/web/useFormConfig.ts
Normal file
@ -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
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user