【代码优化】代码生成: vue3_vben5_antd schema 主子表模板优化（标准和内嵌模式）
This commit is contained in:
puhui999
parent
1f7f06549f
commit
da248cd126
|
|
@ -478,11 +478,29 @@ export function use${subSimpleClassName}GridColumns(
|
|||
#set ($dictType = $column.dictType)
|
||||
#set ($javaField = $column.javaField)
|
||||
#set ($comment = $column.columnComment)
|
||||
#if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
|
||||
#set ($dictMethod = "number")
|
||||
#elseif ($javaType == "String")
|
||||
#set ($dictMethod = "string")
|
||||
#elseif ($javaType == "Boolean")
|
||||
#set ($dictMethod = "boolean")
|
||||
#end
|
||||
{
|
||||
field: '${javaField}',
|
||||
title: '${comment}',
|
||||
minWidth: 120,
|
||||
slots: { default: '${javaField}' },
|
||||
#if ($column.htmlType == "select" || $column.htmlType == "checkbox" || $column.htmlType == "radio")
|
||||
#if ("" != $dictType)## 有数据字典
|
||||
params: {
|
||||
options: getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod'),
|
||||
},
|
||||
#else
|
||||
params: {
|
||||
options: [],
|
||||
},
|
||||
#end
|
||||
#end
|
||||
},
|
||||
#end
|
||||
#end
|
||||
|
|
|
|||
|
|
@ -2,13 +2,7 @@
|
|||
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { message, Tabs } from 'ant-design-vue';
|
||||
## 特殊：主子表专属逻辑
|
||||
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
||||
#foreach ($subSimpleClassName in $subSimpleClassNames)
|
||||
import ${subSimpleClassName}Form from './${subSimpleClassName}Form.vue'
|
||||
#end
|
||||
#end
|
||||
import { message, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } from 'ant-design-vue';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
import { $t } from '#/locales';
|
||||
|
|
@ -16,6 +10,20 @@ import { useVbenForm } from '#/adapter/form';
|
|||
import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
||||
|
||||
import { useFormSchema } from '../data';
|
||||
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
||||
#if ( $subTables && $subTables.size() > 0 )
|
||||
#foreach ($subTable in $subTables)
|
||||
#set ($index = $foreach.count - 1)
|
||||
#set ($subSimpleClassName = $subSimpleClassNames.get($index))
|
||||
#if ($subTable.subJoinMany) ## 一对多
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { use${subSimpleClassName}GridColumns } from '../data';
|
||||
#else
|
||||
import { use${subSimpleClassName}FormSchema } from '../data';
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
const formData = ref<${simpleClassName}Api.${simpleClassName}>();
|
||||
|
|
@ -40,15 +48,44 @@ const getTitle = computed(() => {
|
|||
|
||||
## 特殊：主子表专属逻辑
|
||||
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
||||
#if ( $subTables && $subTables.size() > 0 )
|
||||
|
||||
/** 子表的表单 */
|
||||
const subTabsName = ref('$subClassNameVars.get(0)')
|
||||
#foreach ($subClassNameVar in $subClassNameVars)
|
||||
const ${subClassNameVar}FormRef = ref()
|
||||
#end
|
||||
#if ( $subTables && $subTables.size() > 0 )
|
||||
/** 子表的表单 */
|
||||
const subTabsName = ref('$subClassNameVars.get(0)')
|
||||
## 特殊：主子表专属逻辑
|
||||
#foreach ($subTable in $subTables)
|
||||
#set ($index = $foreach.count - 1)
|
||||
#set ($subSimpleClassName = $subSimpleClassNames.get($index))
|
||||
#set ($subClassNameVar = $subClassNameVars.get($index))
|
||||
#if ($subTable.subJoinMany) ## 一对多
|
||||
/** {$subTable.classComment}表格配置 */
|
||||
const [${subSimpleClassName}Grid, {$subClassNameVar}GridApi] = useVbenVxeGrid({
|
||||
gridOptions: {
|
||||
columns: use${subSimpleClassName}GridColumns(),
|
||||
border: true,
|
||||
showOverflow: true,
|
||||
autoResize: true,
|
||||
keepSource: true,
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
#else
|
||||
const [${subSimpleClassName}Form, {$subClassNameVar}FormApi] = useVbenForm({
|
||||
layout: 'horizontal',
|
||||
schema: useFormSchema(),
|
||||
showDefaultActions: false
|
||||
});
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
|
||||
const [Form, formApi] = useVbenForm({
|
||||
layout: 'horizontal',
|
||||
|
|
@ -56,6 +93,7 @@ const [Form, formApi] = useVbenForm({
|
|||
showDefaultActions: false
|
||||
});
|
||||
|
||||
// TODO @puhui999: 处理完成主子表标准模式和内嵌模式下的表单提交
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
async onConfirm() {
|
||||
const { valid } = await formApi.validate();
|
||||
|
|
@ -143,9 +181,67 @@ const [Modal, modalApi] = useVbenModal({
|
|||
#set ($index = $foreach.count - 1)
|
||||
#set ($subClassNameVar = $subClassNameVars.get($index))
|
||||
#set ($subSimpleClassName = $subSimpleClassNames.get($index))
|
||||
#set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
|
||||
#set ($subColumns = $subColumnsList.get($index))##当前字段数组
|
||||
#set ($subJoinColumn = $subJoinColumns.get($index))##当前 join 字段
|
||||
<Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}">
|
||||
<${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData.id" />
|
||||
#if ($subTable.subJoinMany) ## 一对多
|
||||
<${subSimpleClassName}Grid class="mx-4">
|
||||
#foreach($column in $subColumns)
|
||||
#if ($column.createOperation || $column.updateOperation)
|
||||
#set ($javaField = $column.javaField)
|
||||
#if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
|
||||
#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
|
||||
<template #${javaField}="{ row }">
|
||||
<Input v-model:value="row.${javaField}" />
|
||||
</template>
|
||||
#elseif($column.htmlType == "imageUpload")## 图片上传
|
||||
<template #${javaField}="{ row }">
|
||||
<UploadImg v-model:value="row.${javaField}" />
|
||||
</template>
|
||||
#elseif($column.htmlType == "fileUpload")## 文件上传
|
||||
<template #${javaField}="{ row }">
|
||||
<UploadFile v-model:value="row.${javaField}" />
|
||||
</template>
|
||||
#elseif($column.htmlType == "editor")## 文本编辑器
|
||||
<template #${javaField}="{ row }">
|
||||
<Textarea v-model:value="row.${javaField}" />
|
||||
</template>
|
||||
#elseif($column.htmlType == "select")## 下拉框
|
||||
<template #${javaField}="{ row, column }">
|
||||
<Select v-model:value="row.${javaField}" class="w-full">
|
||||
<Select.Option v-for="option in column.params.options" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</template>
|
||||
#elseif($column.htmlType == "checkbox")## 多选框
|
||||
<template #${javaField}="{ row, column }">
|
||||
<CheckboxGroup v-model:value="row.${javaField}" :options="column.params.options" />
|
||||
</template>
|
||||
#elseif($column.htmlType == "radio")## 单选框
|
||||
<template #${javaField}="{ row, column }">
|
||||
<RadioGroup v-model:value="row.${javaField}" :options="column.params.options" />
|
||||
</template>
|
||||
#elseif($column.htmlType == "datetime")## 时间框
|
||||
<template #${javaField}="{ row }">
|
||||
<DatePicker
|
||||
v-model:value="row.${javaField}"
|
||||
:showTime="true"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
valueFormat='x'
|
||||
/>
|
||||
</template>
|
||||
#elseif($column.htmlType == "textarea")## 文本框
|
||||
<template #${javaField}="{ row }">
|
||||
<Textarea v-model:value="row.${javaField}" />
|
||||
</template>
|
||||
#end
|
||||
#end
|
||||
#end
|
||||
</Grid>
|
||||
#else
|
||||
<${subSimpleClassName}Form class="mx-4" />
|
||||
#end
|
||||
</Tabs.TabPane>
|
||||
#end
|
||||
</Tabs>
|
||||
|
|
|
|||
Loading…
Reference in New Issue