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

1.代码生成器-增加对列表中按钮的个性化配置控制
2.useFormConfig.ts-优化代码,增加对配置错误的捕获并弹出错误信息
This commit is contained in:
suguangxu
2025-05-12 11:55:38 +08:00
parent 047122dfa5
commit e0298b4cd3
2 changed files with 81 additions and 27 deletions

View File

@ -3,41 +3,85 @@ import { FormSchema } from '/@/components/Form';
import { BasicColumn } from "/@/components/Table"; import { BasicColumn } from "/@/components/Table";
import { getFormTemplateUsingCache } from '/@/api/form/design'; import { getFormTemplateUsingCache } from '/@/api/form/design';
import { deepMerge } from '/@/utils'; import { deepMerge } from '/@/utils';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
const { t } = useI18n();
const { notification } = useMessage();
export function useFormConfig() { export function useFormConfig() {
async function mergeFormSchemas(formSchema: FormSchema[],formId:String){ async function mergeFormSchemas(formSchema: FormSchema[],formId:String){
const formProps=await queryConfig(formId,'formProps'); try{
let fschemas=formProps?.schemas; const formProps=await queryConfig(formId,'formProps');
if(fschemas&&fschemas.length>0){ let fschemas=formProps?.schemas;
return deepMerge(formSchema,fschemas); if(fschemas&&fschemas.length>0){
}else{ return deepMerge(formSchema,fschemas);
return formSchema; }else{
return formSchema;
}
}catch(e){
notification.error({
message: t('提示'),
description: '解析表单渲染覆盖配置出错[解析formProps发生异常]',
});
return [];
} }
} }
async function mergeColumns(columns: BasicColumn[],formId:String){ async function mergeColumns(columns: BasicColumn[],formId:String){
const cols=await queryConfig(formId,'columns'); try{
if(cols&&cols.length>0){ const cols=await queryConfig(formId,'columns');
const filteredCol = cols.filter(colItem => if(cols&&cols.length>0){
columns.some(column => column.dataIndex === colItem.dataIndex) const filteredCol = cols.filter(colItem =>
); columns.some(column => column.dataIndex === colItem.dataIndex)
return filteredCol; );
}else{ return filteredCol;
return columns; }else{
return columns;
}
}catch(e){
notification.error({
message: t('提示'),
description: '解析表单渲染覆盖配置出错[解析columns发生异常]',
});
return [];
} }
} }
async function mergeSearchFormSchema(searchFormSchema: FormSchema[],formId:String){ async function mergeSearchFormSchema(searchFormSchema: FormSchema[],formId:String){
const sFormSchema=await queryConfig(formId,'searchFormSchema'); try{
if(sFormSchema&&sFormSchema.length>0){ const sFormSchema=await queryConfig(formId,'searchFormSchema');
const filteredsFormSchema = sFormSchema.filter(sItem => if(sFormSchema&&sFormSchema.length>0){
searchFormSchema.some( searchItem => searchItem.field === sItem.field) const filteredsFormSchema = sFormSchema.filter(sItem =>
); searchFormSchema.some( searchItem => searchItem.field === sItem.field)
return filteredsFormSchema; );
return filteredsFormSchema;
}else{
return searchFormSchema;
}
}catch(e){
notification.error({
message: t('提示'),
description: '解析表单渲染覆盖配置出错[解析searchFormSchema发生异常]',
});
return [];
}
}
async function mergeButtons(buttons,formId:String){
try{
const btns=await queryConfig(formId,'buttons');
if(btns&&btns.length>0){
return btns;
}else{ }else{
return searchFormSchema; return buttons;
}
}catch(e){
notification.error({
message: t('提示'),
description: '解析表单渲染覆盖配置出错[解析buttons发生异常]',
});
return[];
} }
} }
@ -53,7 +97,6 @@ export function useFormConfig() {
if(varName==configName) { if(varName==configName) {
try { try {
const value = new Function(`return ${cleanCode}`)(); const value = new Function(`return ${cleanCode}`)();
// console.log(value);
return value; return value;
} catch (e) { } catch (e) {
console.error(`Failed to parse ${varName}:`, e); console.error(`Failed to parse ${varName}:`, e);
@ -67,6 +110,7 @@ export function useFormConfig() {
return { return {
mergeFormSchemas, mergeFormSchemas,
mergeColumns, mergeColumns,
mergeSearchFormSchema mergeSearchFormSchema,
mergeButtons
}; };
} }

View File

@ -755,7 +755,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
const { t } = useI18n(); const { t } = useI18n();
defineEmits(['register']); defineEmits(['register']);
const { filterColumnAuth, filterButtonAuth } = usePermission(); const { filterColumnAuth, filterButtonAuth } = usePermission();
const { mergeColumns,mergeSearchFormSchema } = useFormConfig(); const { mergeColumns,mergeSearchFormSchema,mergeButtons } = useFormConfig();
const filterColumns = cloneDeep(filterColumnAuth(columns)); const filterColumns = cloneDeep(filterColumnAuth(columns));
const customConfigColums =ref(filterColumns); const customConfigColums =ref(filterColumns);
@ -772,11 +772,13 @@ ${hasTemplatePrint ? ' reactive ' : ''}
}` }`
: '' : ''
} }
//所有按钮
const buttons = ref([{"name":"新增","code":"add","icon":"ant-design:plus-outlined","isDefault":true,"isUse":true,"type":"primary"},{"name":"编辑","code":"edit","icon":"ant-design:form-outlined","isDefault":true,"isUse":true},{"name":"刷新","code":"refresh","icon":"ant-design:reload-outlined","isDefault":true,"isUse":true},{"name":"删除","code":"delete","icon":"ant-design:delete-outlined","isDefault":true,"isUse":true}]);
//展示在列表内的按钮 //展示在列表内的按钮
const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork','flowRecord']); const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork','flowRecord']);
const buttonConfigs = computed(()=>{ const buttonConfigs = computed(()=>{
const list = ${JSON.stringify(model.listConfig.buttonConfigs.filter((x) => x.isUse))} return filterButtonAuth(buttons.value);
return filterButtonAuth(list);
}) })
const tableButtonConfig = computed(() => { const tableButtonConfig = computed(() => {
@ -1453,6 +1455,7 @@ ${hasTemplatePrint ? ' reactive ' : ''}
} }
setCustomConfigColumns(); setCustomConfigColumns();
setCustomSearchFormSchema(); setCustomSearchFormSchema();
setCustomButtons();
}); });
onUnmounted(() => { onUnmounted(() => {
if (schemaIdComputedRef.value) { if (schemaIdComputedRef.value) {
@ -1614,6 +1617,13 @@ ${hasTemplatePrint ? ' reactive ' : ''}
customSearchFormSchema.value=cols; customSearchFormSchema.value=cols;
} }
}; };
async function setCustomButtons(){
if (formConfig.useCustomConfig) {
const btns= await mergeButtons(buttons.value,currentRoute.value.meta.formId);
buttons.value=btns;
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
:deep(.ant-table-selection-col) { :deep(.ant-table-selection-col) {