表单可个性化配置功能开发:
1.代码生成器-增加对列表中按钮的个性化配置控制 2.useFormConfig.ts-优化代码,增加对配置错误的捕获并弹出错误信息
This commit is contained in:
@ -3,11 +3,15 @@ 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){
|
||||||
|
try{
|
||||||
const formProps=await queryConfig(formId,'formProps');
|
const formProps=await queryConfig(formId,'formProps');
|
||||||
let fschemas=formProps?.schemas;
|
let fschemas=formProps?.schemas;
|
||||||
if(fschemas&&fschemas.length>0){
|
if(fschemas&&fschemas.length>0){
|
||||||
@ -15,9 +19,17 @@ export function useFormConfig() {
|
|||||||
}else{
|
}else{
|
||||||
return formSchema;
|
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){
|
||||||
|
try{
|
||||||
const cols=await queryConfig(formId,'columns');
|
const cols=await queryConfig(formId,'columns');
|
||||||
if(cols&&cols.length>0){
|
if(cols&&cols.length>0){
|
||||||
const filteredCol = cols.filter(colItem =>
|
const filteredCol = cols.filter(colItem =>
|
||||||
@ -27,9 +39,17 @@ export function useFormConfig() {
|
|||||||
}else{
|
}else{
|
||||||
return columns;
|
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){
|
||||||
|
try{
|
||||||
const sFormSchema=await queryConfig(formId,'searchFormSchema');
|
const sFormSchema=await queryConfig(formId,'searchFormSchema');
|
||||||
if(sFormSchema&&sFormSchema.length>0){
|
if(sFormSchema&&sFormSchema.length>0){
|
||||||
const filteredsFormSchema = sFormSchema.filter(sItem =>
|
const filteredsFormSchema = sFormSchema.filter(sItem =>
|
||||||
@ -39,6 +59,30 @@ export function useFormConfig() {
|
|||||||
}else{
|
}else{
|
||||||
return searchFormSchema;
|
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{
|
||||||
|
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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user