表单设计时,子表控件字段可以修改

代码生成时添加驼峰命名
This commit is contained in:
wangmingwei
2026-05-18 16:17:41 +08:00
parent a4558bfdf2
commit 99362bf3c2
2 changed files with 51 additions and 2 deletions

View File

@@ -36,7 +36,8 @@
</a-form-item>
<a-form-item>
<template #label>控件字段<BasicHelp :text="fieldText" /></template>
<yunzhupaas-input v-model:value="activeData.__vModel__" disabled v-if="yunzhupaasKey === 'table'" />
<!-- <yunzhupaas-input v-model:value="activeData.__vModel__" disabled v-if="yunzhupaasKey === 'table'" /> -->
<yunzhupaas-input v-model:value="activeData.__vModel__" v-if="yunzhupaasKey === 'table'" />
<yunzhupaas-select
v-model:value="activeData.__vModel__"
ref="fieldSelectRef"
@@ -98,9 +99,16 @@
<yunzhupaas-input
v-model:value="activeData.__vModel__"
placeholder="请输入数据库字段"
:disabled="yunzhupaasKey === 'table' || !!formInfo.isKit"
@change="onInputFieldChange($event, config.formId, config.parentVModel)" />
</a-form-item>
<!-- <a-form-item>
<template #label>控件字段<BasicHelp :text="fieldText" /></template>
<yunzhupaas-input
v-model:value="activeData.__vModel__"
placeholder="请输入数据库字段"
:disabled="yunzhupaasKey === 'table' || !!formInfo.isKit"
@change="onInputFieldChange($event, config.formId, config.parentVModel)" />
</a-form-item> -->
</div>
</div>
<a-form-item label="控件标题" v-if="!layoutList.includes(yunzhupaasKey) || yunzhupaasKey === 'table'">

View File

@@ -20,6 +20,7 @@
<a-step title="命名规范" />
</a-steps>
<a-space class="options" :size="10">
<a-button @click="tuofeng()">驼峰命名</a-button>
<a-button type="primary" @click="handleSubmit()" :disabled="loading" :loading="btnLoading">{{ t('common.saveText') }}</a-button>
<a-button @click="closeModal()">{{ t('common.closeText') }}</a-button>
</a-space>
@@ -124,6 +125,22 @@
scroll: { y: unref(getScrollY) },
};
});
/**
* 下划线命名转驼峰命名
* @param str 下划线命名字符串(如 mdm_work_type、work_type_id
* @param isBigHump 是否大驼峰(首字母大写),默认 false 为小驼峰
* @returns 驼峰命名字符串
*/
function toHump(str: string, isBigHump = false): string {
return str.replace(/_(\w)/g, (_, letter) => letter.toUpperCase())
.replace(/^\w/, (firstLetter) => {
return isBigHump ? firstLetter.toUpperCase() : firstLetter.toLowerCase();
});
}
// 示例:
// toHump('mdm_work_type') → "mdmWorkType"(小驼峰)
// toHump('work_type_id', true) → "WorkTypeId"(大驼峰)
const getChildTableBindValues = computed(() => {
return {
columns: childColumns,
@@ -151,6 +168,30 @@
});
});
}
// 点击触发驼峰命名(有值用原值,无值自动驼峰)
function tuofeng() {
state.list = state.list.map(tableItem => {
// 处理表:有值用原值,无值转驼峰
const tableAlias = tableItem.aliasName?.trim() || toHump(tableItem.table);
// 处理字段
const newFields = tableItem.fields.map(fieldItem => {
const fieldAlias = fieldItem.aliasName?.trim() || toHump(fieldItem.field);
return {
...fieldItem,
aliasName: fieldAlias
};
});
return {
...tableItem,
aliasName: tableAlias,
fields: newFields
};
});
createMessage.success('已自动生成驼峰命名(空值才填充)');
}
function handleSubmit() {
state.btnLoading = true;
changeLoading(true);