geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
suguangxu
2025-05-09 22:08:37 +08:00
parent 3ca8f39a18
commit 047122dfa5
7 changed files with 298 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/form/design/index.ts
View File

@ -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: 更新模板状态
*/

135
src/components/CreateCodeStep/src/EntireConfigStep.vue
View File

@ -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>

72
src/hooks/web/useFormConfig.ts Normal file
View 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
};
}

76
src/utils/helper/generatorHelper.ts
View File

@ -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 { formProps, formEventConfigs } from './config';
import { reactive, ref,onBeforeMount,onMounted } from 'vue';
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) => {

6
src/views/form/design/components/components/CodeFirstModal.vue
View File

@ -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',

6
src/views/form/design/components/components/DataFirstModal.vue
View File

@ -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',

6
src/views/form/design/components/components/SimpleTemplateModal.vue
View File

@ -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',