【代码优化】代码生成: vue3_vben5_antd schema 主子表模板优化(标准和内嵌模式)
This commit is contained in:
parent
1f7f06549f
commit
da248cd126
|
@ -478,11 +478,29 @@ export function use${subSimpleClassName}GridColumns(
|
||||||
#set ($dictType = $column.dictType)
|
#set ($dictType = $column.dictType)
|
||||||
#set ($javaField = $column.javaField)
|
#set ($javaField = $column.javaField)
|
||||||
#set ($comment = $column.columnComment)
|
#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}',
|
field: '${javaField}',
|
||||||
title: '${comment}',
|
title: '${comment}',
|
||||||
minWidth: 120,
|
minWidth: 120,
|
||||||
slots: { default: '${javaField}' },
|
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
|
||||||
#end
|
#end
|
||||||
|
|
|
@ -2,13 +2,7 @@
|
||||||
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
||||||
|
|
||||||
import { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
import { message, Tabs } from 'ant-design-vue';
|
import { message, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } 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 { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import { $t } from '#/locales';
|
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 { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
|
||||||
|
|
||||||
import { useFormSchema } from '../data';
|
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 emit = defineEmits(['success']);
|
||||||
const formData = ref<${simpleClassName}Api.${simpleClassName}>();
|
const formData = ref<${simpleClassName}Api.${simpleClassName}>();
|
||||||
|
@ -40,15 +48,44 @@ const getTitle = computed(() => {
|
||||||
|
|
||||||
## 特殊:主子表专属逻辑
|
## 特殊:主子表专属逻辑
|
||||||
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
#if ( $table.templateType == 10 || $table.templateType == 12 )
|
||||||
#if ( $subTables && $subTables.size() > 0 )
|
#if ( $subTables && $subTables.size() > 0 )
|
||||||
|
/** 子表的表单 */
|
||||||
/** 子表的表单 */
|
const subTabsName = ref('$subClassNameVars.get(0)')
|
||||||
const subTabsName = ref('$subClassNameVars.get(0)')
|
## 特殊:主子表专属逻辑
|
||||||
#foreach ($subClassNameVar in $subClassNameVars)
|
#foreach ($subTable in $subTables)
|
||||||
const ${subClassNameVar}FormRef = ref()
|
#set ($index = $foreach.count - 1)
|
||||||
#end
|
#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
|
||||||
|
#end
|
||||||
|
#end
|
||||||
|
|
||||||
const [Form, formApi] = useVbenForm({
|
const [Form, formApi] = useVbenForm({
|
||||||
layout: 'horizontal',
|
layout: 'horizontal',
|
||||||
|
@ -56,6 +93,7 @@ const [Form, formApi] = useVbenForm({
|
||||||
showDefaultActions: false
|
showDefaultActions: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// TODO @puhui999: 处理完成主子表标准模式和内嵌模式下的表单提交
|
||||||
const [Modal, modalApi] = useVbenModal({
|
const [Modal, modalApi] = useVbenModal({
|
||||||
async onConfirm() {
|
async onConfirm() {
|
||||||
const { valid } = await formApi.validate();
|
const { valid } = await formApi.validate();
|
||||||
|
@ -143,9 +181,67 @@ const [Modal, modalApi] = useVbenModal({
|
||||||
#set ($index = $foreach.count - 1)
|
#set ($index = $foreach.count - 1)
|
||||||
#set ($subClassNameVar = $subClassNameVars.get($index))
|
#set ($subClassNameVar = $subClassNameVars.get($index))
|
||||||
#set ($subSimpleClassName = $subSimpleClassNames.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}">
|
<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>
|
</Tabs.TabPane>
|
||||||
#end
|
#end
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
Loading…
Reference in New Issue