szz
/
ShiShiYiBan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增 vben5-ele-general 代码生成模板

This commit is contained in:
puhui999 2025-06-07 14:32:29 +08:00
parent 68c803360a
commit 9b39f86718
8 changed files with 389 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
yudao-module-infra/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
View File

@ -201,6 +201,23 @@ public class CodegenEngine {
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue")) vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_SCHEMA.getType(), vue3Vben5EpSchemaTemplatePath("views/modules/list_sub_erp.vue"), // 特殊：主子表专属逻辑 .put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_SCHEMA.getType(), vue3Vben5EpSchemaTemplatePath("views/modules/list_sub_erp.vue"), // 特殊：主子表专属逻辑
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue")) vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
// VUE3_VBEN5_EP
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/index.vue"),
vue3FilePath("views/${table.moduleName}/${table.businessName}/index.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/form.vue"),
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/form.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("api/api.ts"),
vue3FilePath("api/${table.moduleName}/${table.businessName}/index.ts"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/form_sub_normal.vue"), // 特殊：主子表专属逻辑
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-form.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/form_sub_inner.vue"), // 特殊：主子表专属逻辑
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-form.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/form_sub_erp.vue"), // 特殊：主子表专属逻辑
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-form.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/list_sub_inner.vue"), // 特殊：主子表专属逻辑
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
.put(CodegenFrontTypeEnum.VUE3_VBEN5_EP_GENERAL.getType(), vue3Vben5EpGeneralTemplatePath("views/modules/list_sub_erp.vue"), // 特殊：主子表专属逻辑
vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName_strikeCase}-list.vue"))
.build(); .build();
@Resource @Resource

140
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/form.vue.vm
View File

@ -1,14 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import type { Rule } from 'ant-design-vue/es/form'; import type { FormRules } from 'element-plus';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce'; import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from "#/components/upload"; import { ImageUpload, FileUpload } from "#/components/upload";
import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue'; import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
import { DICT_TYPE, getDictOptions } from '#/utils'; import { DICT_TYPE, getDictOptions } from '#/utils';
#if($table.templateType == 2)## 树表需要导入这些 #if($table.templateType == 2)## 树表需要导入这些
import { get${simpleClassName}List } from '#/api/${table.moduleName}/${table.businessName}'; import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { handleTree } from '@vben/utils' import { handleTree } from '@vben/utils'
#end #end
## 特殊：主子表专属逻辑 ## 特殊：主子表专属逻辑
@ -20,9 +20,9 @@ import { handleTree } from '@vben/utils'
#end #end
#end #end
import { computed, ref } from 'vue'; import { computed, ref, reactive } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}'; import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
@ -38,14 +38,14 @@ const formData = ref<Partial<${simpleClassName}Api.${simpleClassName}>>({
#end #end
#end #end
}); });
const rules: Record<string, Rule[]> = { const rules = reactive<FormRules>({
#foreach ($column in $columns) #foreach ($column in $columns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment) #set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
#end #end
#end #end
}; });
## 特殊：树表专属逻辑 ## 特殊：树表专属逻辑
#if ( $table.templateType == 2 ) #if ( $table.templateType == 2 )
const ${classNameVar}Tree = ref<any[]>([]) // 树形结构 const ${classNameVar}Tree = ref<any[]>([]) // 树形结构
@ -145,10 +145,7 @@ const [Modal, modalApi] = useVbenModal({
// 关闭并提示 // 关闭并提示
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
message.success({ ElMessage.success($t('ui.actionMessage.operationSuccess'));
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
@ -182,12 +179,12 @@ const [Modal, modalApi] = useVbenModal({
<template> <template>
<Modal :title="getTitle"> <Modal :title="getTitle">
<Form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
:label-col="{ span: 5 }" label-width="120px"
:wrapper-col="{ span: 18 }" label-position="right"
> >
#foreach($column in $columns) #foreach($column in $columns)
#if ($column.createOperation || $column.updateOperation) #if ($column.createOperation || $column.updateOperation)
@ -203,122 +200,121 @@ const [Modal, modalApi] = useVbenModal({
#set ($dictMethod = "boolean") #set ($dictMethod = "boolean")
#end #end
#if ( $table.templateType == 2 && $column.id == $treeParentColumn.id ) #if ( $table.templateType == 2 && $column.id == $treeParentColumn.id )
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<TreeSelect <el-tree-select
v-model:value="formData.${javaField}" v-model="formData.${javaField}"
:treeData="${classNameVar}Tree" :data="${classNameVar}Tree"
#if ($treeNameColumn.javaField == "name") #if ($treeNameColumn.javaField == "name")
:fieldNames="{ :props="{
label: 'name', label: 'name',
value: 'id', value: 'id',
children: 'children', children: 'children',
}" }"
#else #else
:fieldNames="{ :props="{
label: '$treeNameColumn.javaField', label: '$treeNameColumn.javaField',
value: 'id', value: 'id',
children: 'children', children: 'children',
}" }"
#end #end
checkable check-strictly
treeDefaultExpandAll default-expand-all
placeholder="请选择${comment}" placeholder="请选择${comment}"
/> />
</Form.Item> </el-form-item>
#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" /> <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传 #elseif($column.htmlType == "imageUpload")## 图片上传
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<ImageUpload v-model:value="formData.${javaField}" /> <ImageUpload v-model="formData.${javaField}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "fileUpload")## 文件上传 #elseif($column.htmlType == "fileUpload")## 文件上传
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<FileUpload v-model:value="formData.${javaField}" /> <FileUpload v-model="formData.${javaField}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "editor")## 文本编辑器 #elseif($column.htmlType == "editor")## 文本编辑器
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<RichTextarea v-model="formData.${javaField}" height="500px" /> <RichTextarea v-model="formData.${javaField}" height="500px" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "select")## 下拉框 #elseif($column.htmlType == "select")## 下拉框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Select v-model:value="formData.${javaField}" placeholder="请选择${comment}"> <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Select.Option <el-option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> :label="dict.label"
{{ dict.label }} />
</Select.Option>
#else##没数据字典 #else##没数据字典
<Select.Option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
#end #end
</Select> </el-select>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框 #elseif($column.htmlType == "checkbox")## 多选框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<CheckboxGroup v-model:value="formData.${javaField}"> <el-checkbox-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Checkbox <el-checkbox
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Checkbox> </el-checkbox>
#else##没数据字典 #else##没数据字典
<Checkbox label="请选择字典生成" /> <el-checkbox label="请选择字典生成" />
#end #end
</CheckboxGroup> </el-checkbox-group>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "radio")## 单选框 #elseif($column.htmlType == "radio")## 单选框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<RadioGroup v-model:value="formData.${javaField}"> <el-radio-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Radio <el-radio
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Radio> </el-radio>
#else##没数据字典 #else##没数据字典
<Radio value="1">请选择字典生成</Radio> <el-radio :label="1">请选择字典生成</el-radio>
#end #end
</RadioGroup> </el-radio-group>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "datetime")## 时间框 #elseif($column.htmlType == "datetime")## 时间框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<DatePicker <el-date-picker
v-model:value="formData.${javaField}" v-model="formData.${javaField}"
valueFormat="x" value-format="x"
placeholder="选择${comment}" placeholder="选择${comment}"
/> />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "textarea")## 文本框 #elseif($column.htmlType == "textarea")## 文本框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" /> <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
</Form.Item> </el-form-item>
#end #end
#end #end
#end #end
</Form> </el-form>
## 特殊：主子表专属逻辑 ## 特殊：主子表专属逻辑
#if ( $table.templateType == 10 || $table.templateType == 12 ) #if ( $table.templateType == 10 || $table.templateType == 12 )
<!-- 子表的表单 --> <!-- 子表的表单 -->
<Tabs v-model:active-key="subTabsName"> <el-tabs v-model="subTabsName">
#foreach ($subTable in $subTables) #foreach ($subTable in $subTables)
#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 ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
<Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render> <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
<${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData?.id" /> <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData?.id" />
</Tabs.TabPane> </el-tab-pane>
#end #end
</Tabs> </el-tabs>
#end #end
</Modal> </Modal>
</template> </template>

179
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/index.vue.vm
View File

@ -4,7 +4,7 @@ import type { VxeTableInstance } from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { cloneDeep, formatDateTime } from '@vben/utils'; import { cloneDeep, formatDateTime } from '@vben/utils';
import { Button, message,Tabs,Pagination,Form,RangePicker,DatePicker,Select,Input } from 'ant-design-vue'; import { ElButton, ElMessage, ElLoading, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
import { DictTag } from '#/components/dict-tag'; import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils'; import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
import ${simpleClassName}Form from './modules/form.vue'; import ${simpleClassName}Form from './modules/form.vue';
@ -30,7 +30,7 @@ import { handleTree,isEmpty } from '@vben/utils'
import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#else## 标准表接口 #else## 标准表接口
import { isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
import { get${simpleClassName}Page, delete${simpleClassName},#if ($deleteBatchEnable) delete${simpleClassName}List,#end export${simpleClassName} } from '#/api/${table.moduleName}/${table.businessName}'; import { get${simpleClassName}Page, delete${simpleClassName},#if ($deleteBatchEnable) delete${simpleClassName}List,#end export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#end #end
import { downloadFileFromBlobPart } from '@vben/utils'; import { downloadFileFromBlobPart } from '@vben/utils';
@ -141,37 +141,32 @@ function handleAppend(row: ${simpleClassName}Api.${simpleClassName}) {
/** 删除${table.classComment} */ /** 删除${table.classComment} */
async function handleDelete(row: ${simpleClassName}Api.${simpleClassName}) { async function handleDelete(row: ${simpleClassName}Api.${simpleClassName}) {
const hideLoading = message.loading({ const loadingInstance = ElLoading.service({
content: $t('ui.actionMessage.deleting', [row.id]), text: $t('ui.actionMessage.deleting', [row.id]),
duration: 0, background: 'rgba(0, 0, 0, 0.7)',
key: 'action_process_msg',
}); });
try { try {
await delete${simpleClassName}(row.id as number); await delete${simpleClassName}(row.id as number);
message.success({ ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_process_msg',
});
await getList(); await getList();
} finally { } finally {
hideLoading(); loadingInstance.close();
} }
} }
#if ($table.templateType != 2 && $deleteBatchEnable) #if ($table.templateType != 2 && $deleteBatchEnable)
/** 批量删除${table.classComment} */ /** 批量删除${table.classComment} */
async function handleDeleteBatch() { async function handleDeleteBatch() {
const hideLoading = message.loading({ const loadingInstance = ElLoading.service({
content: $t('ui.actionMessage.deleting'), text: $t('ui.actionMessage.deleting'),
duration: 0, background: 'rgba(0, 0, 0, 0.7)',
key: 'action_process_msg',
}); });
try { try {
await delete${simpleClassName}List(checkedIds.value); await delete${simpleClassName}List(checkedIds.value);
message.success( $t('ui.actionMessage.deleteSuccess') ); ElMessage.success($t('ui.actionMessage.deleteSuccess'));
await getList(); await getList();
} finally { } finally {
hideLoading(); loadingInstance.close();
} }
} }
@ -218,10 +213,10 @@ onMounted(() => {
<ContentWrap v-if="!hiddenSearchBar"> <ContentWrap v-if="!hiddenSearchBar">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<Form <el-form
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
layout="inline" inline
> >
#foreach($column in $columns) #foreach($column in $columns)
#if ($column.listOperation) #if ($column.listOperation)
@ -237,66 +232,69 @@ onMounted(() => {
#set ($dictMethod = "boolean") #set ($dictMethod = "boolean")
#end #end
#if ($column.htmlType == "input") #if ($column.htmlType == "input")
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<Input <el-input
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
placeholder="请输入${comment}" placeholder="请输入${comment}"
allowClear clearable
@pressEnter="handleQuery" @keyup.enter="handleQuery"
class="w-full" class="!w-[240px]"
/> />
</Form.Item> </el-form-item>
#elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox") #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<Select <el-select
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
placeholder="请选择${comment}" placeholder="请选择${comment}"
allowClear clearable
class="w-full" class="!w-[240px]"
> >
#if ("" != $dictType)## 设置了 dictType 数据字典的情况 #if ("" != $dictType)## 设置了 dictType 数据字典的情况
<Select.Option <el-option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> :label="dict.label"
{{ dict.label }} />
</Select.Option>
#else## 未设置 dictType 数据字典的情况 #else## 未设置 dictType 数据字典的情况
<Select.Option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
#end #end
</Select> </el-select>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "datetime") #elseif($column.htmlType == "datetime")
#if ($column.listOperationCondition != "BETWEEN")## 非范围 #if ($column.listOperationCondition != "BETWEEN")## 非范围
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<DatePicker <el-date-picker
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
valueFormat="YYYY-MM-DD" value-format="YYYY-MM-DD"
placeholder="选择${comment}" placeholder="选择${comment}"
allowClear clearable
class="w-full" class="!w-[240px]"
/> />
</Form.Item> </el-form-item>
#else## 范围 #else## 范围
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<RangePicker <el-date-picker
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
v-bind="getRangePickerDefaultProps()" type="daterange"
class="w-full" value-format="YYYY-MM-DD"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="!w-[240px]"
/> />
</Form.Item> </el-form-item>
#end #end
#end #end
#end #end
#end #end
<Form.Item> <el-form-item>
<Button class="ml-2" @click="resetQuery"> 重置 </Button> <el-button class="ml-2" @click="resetQuery"> 重置 </el-button>
<Button class="ml-2" @click="handleQuery" type="primary"> <el-button class="ml-2" @click="handleQuery" type="primary">
搜索 搜索
</Button> </el-button>
</Form.Item> </el-form-item>
</Form> </el-form>
</ContentWrap> </ContentWrap>
<!-- 列表 --> <!-- 列表 -->
@ -307,11 +305,11 @@ onMounted(() => {
v-model:hidden-search="hiddenSearchBar" v-model:hidden-search="hiddenSearchBar"
> >
#if (${table.templateType} == 2) #if (${table.templateType} == 2)
<Button @click="toggleExpand" class="mr-2"> <el-button @click="toggleExpand" class="mr-2">
{{ isExpanded ? '收缩' : '展开' }} {{ isExpanded ? '收缩' : '展开' }}
</Button> </el-button>
#end #end
<Button <el-button
class="ml-2" class="ml-2"
:icon="h(Plus)" :icon="h(Plus)"
type="primary" type="primary"
@ -319,8 +317,8 @@ onMounted(() => {
v-access:code="['${permissionPrefix}:create']" v-access:code="['${permissionPrefix}:create']"
> >
{{ $t('ui.actionTitle.create', ['${table.classComment}']) }} {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
</Button> </el-button>
<Button <el-button
:icon="h(Download)" :icon="h(Download)"
type="primary" type="primary"
class="ml-2" class="ml-2"
@ -329,19 +327,18 @@ onMounted(() => {
v-access:code="['${permissionPrefix}:export']" v-access:code="['${permissionPrefix}:export']"
> >
{{ $t('ui.actionTitle.export') }} {{ $t('ui.actionTitle.export') }}
</Button> </el-button>
#if ($table.templateType != 2 && $deleteBatchEnable) #if ($table.templateType != 2 && $deleteBatchEnable)
<Button <el-button
:icon="h(Trash2)" :icon="h(Trash2)"
type="primary" type="danger"
danger
class="ml-2" class="ml-2"
:disabled="isEmpty(checkedIds)" :disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch" @click="handleDeleteBatch"
v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']"
> >
批量删除 批量删除
</Button> </el-button>
#end #end
</TableToolbar> </TableToolbar>
</template> </template>
@ -381,17 +378,17 @@ onMounted(() => {
<vxe-column type="expand" width="60"> <vxe-column type="expand" width="60">
<template #content="{ row }"> <template #content="{ row }">
<!-- 子表的表单 --> <!-- 子表的表单 -->
<Tabs v-model:active-key="subTabsName" class="mx-8"> <el-tabs v-model="subTabsName" class="mx-8">
#foreach ($subTable in $subTables) #foreach ($subTable in $subTables)
#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 ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
<Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render> <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
<${subSimpleClassName}List :${subJoinColumn_strikeCase}="row?.id" /> <${subSimpleClassName}List :${subJoinColumn_strikeCase}="row?.id" />
</Tabs.TabPane> </el-tab-pane>
#end #end
</Tabs> </el-tabs>
</template> </template>
</vxe-column> </vxe-column>
#end #end
@ -423,27 +420,29 @@ onMounted(() => {
<vxe-column field="operation" title="操作" align="center"> <vxe-column field="operation" title="操作" align="center">
<template #default="{row}"> <template #default="{row}">
#if ( $table.templateType == 2 ) #if ( $table.templateType == 2 )
<Button <el-button
size="small" size="small"
type="link" type="primary"
link
@click="handleAppend(row as any)" @click="handleAppend(row as any)"
v-access:code="['${permissionPrefix}:create']" v-access:code="['${permissionPrefix}:create']"
> >
新增下级 新增下级
</Button> </el-button>
#end #end
<Button <el-button
size="small" size="small"
type="link" type="primary"
link
@click="handleEdit(row as any)" @click="handleEdit(row as any)"
v-access:code="['${permissionPrefix}:update']" v-access:code="['${permissionPrefix}:update']"
> >
{{ $t('ui.actionTitle.edit') }} {{ $t('ui.actionTitle.edit') }}
</Button> </el-button>
<Button <el-button
size="small" size="small"
type="link" type="danger"
danger link
class="ml-2" class="ml-2"
#if ( $table.templateType == 2 ) #if ( $table.templateType == 2 )
:disabled="!isEmpty(row?.children)" :disabled="!isEmpty(row?.children)"
@ -452,19 +451,21 @@ onMounted(() => {
v-access:code="['${permissionPrefix}:delete']" v-access:code="['${permissionPrefix}:delete']"
> >
{{ $t('ui.actionTitle.delete') }} {{ $t('ui.actionTitle.delete') }}
</Button> </el-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
#if ( $table.templateType != 2 ) #if ( $table.templateType != 2 )
<!-- 分页 --> <!-- 分页 -->
<div class="mt-2 flex justify-end"> <div class="mt-2 flex justify-end">
<Pagination <el-pagination
:total="total" :total="total"
v-model:current="queryParams.pageNo" v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize" v-model:page-size="queryParams.pageSize"
show-size-changer :page-sizes="[10, 20, 50, 100]"
@change="getList" layout="total, sizes, prev, pager, next, jumper"
@size-change="getList"
@current-change="getList"
/> />
</div> </div>
#end #end
@ -472,17 +473,17 @@ onMounted(() => {
#if ($table.templateType == 11) ## erp情况 #if ($table.templateType == 11) ## erp情况
<ContentWrap> <ContentWrap>
<!-- 子表的表单 --> <!-- 子表的表单 -->
<Tabs v-model:active-key="subTabsName"> <el-tabs v-model="subTabsName">
#foreach ($subTable in $subTables) #foreach ($subTable in $subTables)
#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 ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
<Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render> <el-tab-pane name="$subClassNameVar" label="${subTable.classComment}">
<${subSimpleClassName}List :${subJoinColumn_strikeCase}="select${simpleClassName}?.id" /> <${subSimpleClassName}List :${subJoinColumn_strikeCase}="select${simpleClassName}?.id" />
</Tabs.TabPane> </el-tab-pane>
#end #end
</Tabs> </el-tabs>
</ContentWrap> </ContentWrap>
#end #end
</Page> </Page>

110
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_erp.vue.vm
View File

@ -4,15 +4,15 @@
#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
<script lang="ts" setup> <script lang="ts" setup>
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import type { Rule } from 'ant-design-vue/es/form'; import type { FormRules } from 'element-plus';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { Tinymce as RichTextarea } from '#/components/tinymce'; import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from "#/components/upload"; import { ImageUpload, FileUpload } from "#/components/upload";
import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue'; import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
import { DICT_TYPE, getDictOptions } from '#/utils'; import { DICT_TYPE, getDictOptions } from '#/utils';
import { computed, ref } from 'vue'; import { computed, ref, reactive } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
@ -36,14 +36,14 @@
#end #end
#end #end
}); });
const rules: Record<string, Rule[]> = { const rules = reactive<FormRules>({
#foreach ($column in $subColumns) #foreach ($column in $subColumns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment) #set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
#end #end
#end #end
}; });
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
async onConfirm() { async onConfirm() {
@ -57,10 +57,7 @@
// 关闭并提示 // 关闭并提示
await modalApi.close(); await modalApi.close();
emit('success'); emit('success');
message.success({ ElMessage.success($t('ui.actionMessage.operationSuccess'));
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally { } finally {
modalApi.unlock(); modalApi.unlock();
} }
@ -108,12 +105,12 @@
<template> <template>
<Modal :title="getTitle"> <Modal :title="getTitle">
<Form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
:label-col="{ span: 5 }" label-width="120px"
:wrapper-col="{ span: 18 }" label-position="right"
> >
#foreach($column in $subColumns) #foreach($column in $subColumns)
#if ($column.createOperation || $column.updateOperation) #if ($column.createOperation || $column.updateOperation)
@ -129,84 +126,83 @@
#set ($dictMethod = "boolean") #set ($dictMethod = "boolean")
#end #end
#if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" /> <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传 #elseif($column.htmlType == "imageUpload")## 图片上传
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<ImageUpload v-model:value="formData.${javaField}" /> <ImageUpload v-model="formData.${javaField}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "fileUpload")## 文件上传 #elseif($column.htmlType == "fileUpload")## 文件上传
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<FileUpload v-model:value="formData.${javaField}" /> <FileUpload v-model="formData.${javaField}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "editor")## 文本编辑器 #elseif($column.htmlType == "editor")## 文本编辑器
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<RichTextarea v-model="formData.${javaField}" height="500px" /> <RichTextarea v-model="formData.${javaField}" height="500px" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "select")## 下拉框 #elseif($column.htmlType == "select")## 下拉框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Select v-model:value="formData.${javaField}" placeholder="请选择${comment}"> <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Select.Option <el-option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> :label="dict.label"
{{ dict.label }} />
</Select.Option>
#else##没数据字典 #else##没数据字典
<Select.Option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
#end #end
</Select> </el-select>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框 #elseif($column.htmlType == "checkbox")## 多选框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<CheckboxGroup v-model:value="formData.${javaField}"> <el-checkbox-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Checkbox <el-checkbox
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Checkbox> </el-checkbox>
#else##没数据字典 #else##没数据字典
<Checkbox label="请选择字典生成" /> <el-checkbox label="请选择字典生成" />
#end #end
</CheckboxGroup> </el-checkbox-group>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "radio")## 单选框 #elseif($column.htmlType == "radio")## 单选框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<RadioGroup v-model:value="formData.${javaField}"> <el-radio-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Radio <el-radio
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Radio> </el-radio>
#else##没数据字典 #else##没数据字典
<Radio value="1">请选择字典生成</Radio> <el-radio :label="1">请选择字典生成</el-radio>
#end #end
</RadioGroup> </el-radio-group>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "datetime")## 时间框 #elseif($column.htmlType == "datetime")## 时间框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<DatePicker <el-date-picker
v-model:value="formData.${javaField}" v-model="formData.${javaField}"
valueFormat="x" value-format="x"
placeholder="选择${comment}" placeholder="选择${comment}"
/> />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "textarea")## 文本框 #elseif($column.htmlType == "textarea")## 文本框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" /> <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
</Form.Item> </el-form-item>
#end #end
#end #end
#end #end
</Form> </el-form>
</Modal> </Modal>
</template> </template>

2
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_inner.vue.vm
View File

@ -1,2 +1,2 @@
## 主表的 normal 和 inner 使用相同的 form 表单 ## 主表的 normal 和 inner 使用相同的 form 表单
#parse("codegen/vue3_vben5_antd/general/views/modules/form_sub_normal.vue.vm") #parse("codegen/vue3_vben5_ele/general/views/modules/form_sub_normal.vue.vm")

170
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/form_sub_normal.vue.vm
View File

@ -7,8 +7,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { message, Tabs, Form, Input, Textarea,Button, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue'; import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker } from 'element-plus';
import { computed, ref, h, onMounted,watch,nextTick } from 'vue'; import { computed, ref, reactive, h, onMounted,watch,nextTick } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { DICT_TYPE, getDictOptions } from '#/utils'; import { DICT_TYPE, getDictOptions } from '#/utils';
@ -18,7 +18,7 @@ import { Plus } from "@vben/icons";
import { VxeColumn, VxeTable } from '#/adapter/vxe-table'; import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#else #else
import type { Rule } from 'ant-design-vue/es/form'; import type { FormRules } from 'element-plus';
import { Tinymce as RichTextarea } from '#/components/tinymce'; import { Tinymce as RichTextarea } from '#/components/tinymce';
import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#end #end
@ -76,14 +76,14 @@ const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
#end #end
#end #end
}); });
const rules: Record<string, Rule[]> = { const rules = reactive<FormRules>({
#foreach ($column in $subColumns) #foreach ($column in $subColumns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment) #set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
#end #end
#end #end
}; });
/** 暴露出表单校验方法和表单值获取方法 */ /** 暴露出表单校验方法和表单值获取方法 */
defineExpose({ defineExpose({
validate: async () => await formRef.value?.validate(), validate: async () => await formRef.value?.validate(),
@ -124,90 +124,89 @@ watch(
#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<Input v-model:value="row.${javaField}" /> <el-input v-model="row.${javaField}" />
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "imageUpload")## 图片上传 #elseif($column.htmlType == "imageUpload")## 图片上传
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<ImageUpload v-model:value="row.${javaField}" /> <ImageUpload v-model="row.${javaField}" />
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "fileUpload")## 文件上传 #elseif($column.htmlType == "fileUpload")## 文件上传
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<FileUpload v-model:value="row.${javaField}" /> <FileUpload v-model="row.${javaField}" />
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "select")## 下拉框 #elseif($column.htmlType == "select")## 下拉框
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<Select v-model:value="row.${javaField}" placeholder="请选择${comment}"> <el-select v-model="row.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Select.Option <el-option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> :label="dict.label"
{{ dict.label }} />
</Select.Option>
#else##没数据字典 #else##没数据字典
<Select.Option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
#end #end
</Select> </el-select>
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "checkbox")## 多选框 #elseif($column.htmlType == "checkbox")## 多选框
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<CheckboxGroup v-model:value="row.${javaField}"> <el-checkbox-group v-model="row.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Checkbox <el-checkbox
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Checkbox> </el-checkbox>
#else##没数据字典 #else##没数据字典
<Checkbox label="请选择字典生成" /> <el-checkbox label="请选择字典生成" />
#end #end
</CheckboxGroup> </el-checkbox-group>
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "radio")## 单选框 #elseif($column.htmlType == "radio")## 单选框
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<RadioGroup v-model:value="row.${javaField}"> <el-radio-group v-model="row.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Radio <el-radio
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Radio> </el-radio>
#else##没数据字典 #else##没数据字典
<Radio value="1">请选择字典生成</Radio> <el-radio :label="1">请选择字典生成</el-radio>
#end #end
</RadioGroup> </el-radio-group>
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "datetime")## 时间框 #elseif($column.htmlType == "datetime")## 时间框
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<DatePicker <el-date-picker
v-model:value="row.${javaField}" v-model="row.${javaField}"
:showTime="true" type="datetime"
value-format="x"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
valueFormat='x'
/> />
</template> </template>
</vxe-column> </vxe-column>
#elseif($column.htmlType == "textarea" || $column.htmlType == "editor")## 文本框 #elseif($column.htmlType == "textarea" || $column.htmlType == "editor")## 文本框
<vxe-column field="${javaField}" title="${comment}" align="center"> <vxe-column field="${javaField}" title="${comment}" align="center">
<template #default="{row}"> <template #default="{row}">
<Textarea v-model:value="row.${javaField}" /> <el-input v-model="row.${javaField}" type="textarea" />
</template> </template>
</vxe-column> </vxe-column>
#end #end
@ -215,31 +214,31 @@ watch(
#end #end
<vxe-column field="operation" title="操作" align="center"> <vxe-column field="operation" title="操作" align="center">
<template #default="{row}"> <template #default="{row}">
<Button <el-button
size="small" size="small"
type="link" type="danger"
danger link
@click="onDelete(row as any)" @click="onDelete(row as any)"
v-access:code="['${permissionPrefix}:delete']" v-access:code="['${permissionPrefix}:delete']"
> >
{{ $t('ui.actionTitle.delete') }} {{ $t('ui.actionTitle.delete') }}
</Button> </el-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
<div class="flex justify-center mt-4"> <div class="flex justify-center mt-4">
<Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['${permissionPrefix}:create']"> <el-button :icon="h(Plus)" type="primary" plain @click="onAdd" v-access:code="['${permissionPrefix}:create']">
{{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }} {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
</Button> </el-button>
</div> </div>
#else #else
<Form <el-form
ref="formRef" ref="formRef"
class="mx-4" class="mx-4"
:model="formData" :model="formData"
:rules="rules" :rules="rules"
:label-col="{ span: 5 }" label-width="120px"
:wrapper-col="{ span: 18 }" label-position="right"
> >
#foreach($column in $subColumns) #foreach($column in $subColumns)
#if ($column.createOperation || $column.updateOperation) #if ($column.createOperation || $column.updateOperation)
@ -255,84 +254,83 @@ watch(
#set ($dictMethod = "boolean") #set ($dictMethod = "boolean")
#end #end
#if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" /> <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传 #elseif($column.htmlType == "imageUpload")## 图片上传
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<ImageUpload v-model:value="formData.${javaField}" /> <ImageUpload v-model="formData.${javaField}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "fileUpload")## 文件上传 #elseif($column.htmlType == "fileUpload")## 文件上传
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<FileUpload v-model:value="formData.${javaField}" /> <FileUpload v-model="formData.${javaField}" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "editor")## 文本编辑器 #elseif($column.htmlType == "editor")## 文本编辑器
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<RichTextarea v-model="formData.${javaField}" height="500px" /> <RichTextarea v-model="formData.${javaField}" height="500px" />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "select")## 下拉框 #elseif($column.htmlType == "select")## 下拉框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Select v-model:value="formData.${javaField}" placeholder="请选择${comment}"> <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Select.Option <el-option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> :label="dict.label"
{{ dict.label }} />
</Select.Option>
#else##没数据字典 #else##没数据字典
<Select.Option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
#end #end
</Select> </el-select>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框 #elseif($column.htmlType == "checkbox")## 多选框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<CheckboxGroup v-model:value="formData.${javaField}"> <el-checkbox-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Checkbox <el-checkbox
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Checkbox> </el-checkbox>
#else##没数据字典 #else##没数据字典
<Checkbox label="请选择字典生成" /> <el-checkbox label="请选择字典生成" />
#end #end
</CheckboxGroup> </el-checkbox-group>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "radio")## 单选框 #elseif($column.htmlType == "radio")## 单选框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<RadioGroup v-model:value="formData.${javaField}"> <el-radio-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Radio <el-radio
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :label="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Radio> </el-radio>
#else##没数据字典 #else##没数据字典
<Radio value="1">请选择字典生成</Radio> <el-radio :label="1">请选择字典生成</el-radio>
#end #end
</RadioGroup> </el-radio-group>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "datetime")## 时间框 #elseif($column.htmlType == "datetime")## 时间框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<DatePicker <el-date-picker
v-model:value="formData.${javaField}" v-model="formData.${javaField}"
valueFormat="x" value-format="x"
placeholder="选择${comment}" placeholder="选择${comment}"
/> />
</Form.Item> </el-form-item>
#elseif($column.htmlType == "textarea")## 文本框 #elseif($column.htmlType == "textarea")## 文本框
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" /> <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
</Form.Item> </el-form-item>
#end #end
#end #end
#end #end
</Form> </el-form>
#end #end
</template> </template>

150
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/list_sub_erp.vue.vm
View File

@ -21,7 +21,7 @@
import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue' import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
import { Tinymce as RichTextarea } from '#/components/tinymce'; import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from "#/components/upload"; import { ImageUpload, FileUpload } from "#/components/upload";
import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue'; import { ElMessage, ElLoading, ElButton, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
import { Plus, Trash2 } from '@vben/icons'; import { Plus, Trash2 } from '@vben/icons';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { TableToolbar } from '#/components/table-toolbar'; import { TableToolbar } from '#/components/table-toolbar';
@ -29,7 +29,7 @@
#end #end
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}List,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${table.businessName}'; import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}List,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { isEmpty } from '@vben/utils'; import { isEmpty } from '@vben/utils';
#else #else
#if ($subTable.subJoinMany) ## 一对多 #if ($subTable.subJoinMany) ## 一对多
@ -52,7 +52,7 @@ const props = defineProps<{
/** 创建${subTable.classComment} */ /** 创建${subTable.classComment} */
function handleCreate() { function handleCreate() {
if (!props.${subJoinColumn.javaField}){ if (!props.${subJoinColumn.javaField}){
message.warning("请先选择一个${table.classComment}!") ElMessage.warning("请先选择一个${table.classComment}!")
return return
} }
formModalApi.setData({${subJoinColumn.javaField}: props.${subJoinColumn.javaField}}).open(); formModalApi.setData({${subJoinColumn.javaField}: props.${subJoinColumn.javaField}}).open();
@ -65,37 +65,32 @@ function handleEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
/** 删除${subTable.classComment} */ /** 删除${subTable.classComment} */
async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) { async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
const hideLoading = message.loading({ const loadingInstance = ElLoading.service({
content: $t('ui.actionMessage.deleting', [row.id]), text: $t('ui.actionMessage.deleting', [row.id]),
duration: 0, background: 'rgba(0, 0, 0, 0.7)',
key: 'action_process_msg',
}); });
try { try {
await delete${subSimpleClassName}(row.id as number); await delete${subSimpleClassName}(row.id as number);
message.success({ ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
key: 'action_process_msg',
});
await getList(); await getList();
} finally { } finally {
hideLoading(); loadingInstance.close();
} }
} }
#if ($deleteBatchEnable) #if ($deleteBatchEnable)
/** 批量删除${subTable.classComment} */ /** 批量删除${subTable.classComment} */
async function handleDeleteBatch() { async function handleDeleteBatch() {
const hideLoading = message.loading({ const loadingInstance = ElLoading.service({
content: $t('ui.actionMessage.deleting'), text: $t('ui.actionMessage.deleting'),
duration: 0, background: 'rgba(0, 0, 0, 0.7)',
key: 'action_process_msg',
}); });
try { try {
await delete${subSimpleClassName}List(checkedIds.value); await delete${subSimpleClassName}List(checkedIds.value);
message.success( $t('ui.actionMessage.deleteSuccess') ); ElMessage.success($t('ui.actionMessage.deleteSuccess'));
await getList(); await getList();
} finally { } finally {
hideLoading(); loadingInstance.close();
} }
} }
@ -207,10 +202,10 @@ onMounted(() => {
<div class="h-[600px]"> <div class="h-[600px]">
<ContentWrap v-if="!hiddenSearchBar"> <ContentWrap v-if="!hiddenSearchBar">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<Form <el-form
:model="queryParams" :model="queryParams"
ref="queryFormRef" ref="queryFormRef"
layout="inline" inline
> >
#foreach($column in $subColumns) #foreach($column in $subColumns)
#if ($column.listOperation) #if ($column.listOperation)
@ -226,66 +221,69 @@ onMounted(() => {
#set ($dictMethod = "boolean") #set ($dictMethod = "boolean")
#end #end
#if ($column.htmlType == "input") #if ($column.htmlType == "input")
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<Input <el-input
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
placeholder="请输入${comment}" placeholder="请输入${comment}"
allowClear clearable
@pressEnter="handleQuery" @keyup.enter="handleQuery"
class="w-full" class="!w-[240px]"
/> />
</Form.Item> </el-form-item>
#elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox") #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<Select <el-select
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
placeholder="请选择${comment}" placeholder="请选择${comment}"
allowClear clearable
class="w-full" class="!w-[240px]"
> >
#if ("" != $dictType)## 设置了 dictType 数据字典的情况 #if ("" != $dictType)## 设置了 dictType 数据字典的情况
<Select.Option <el-option
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')" v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
:key="dict.value" :key="dict.value"
:value="dict.value" :value="dict.value"
> :label="dict.label"
{{ dict.label }} />
</Select.Option>
#else## 未设置 dictType 数据字典的情况 #else## 未设置 dictType 数据字典的情况
<Select.Option label="请选择字典生成" value="" /> <el-option label="请选择字典生成" value="" />
#end #end
</Select> </el-select>
</Form.Item> </el-form-item>
#elseif($column.htmlType == "datetime") #elseif($column.htmlType == "datetime")
#if ($column.listOperationCondition != "BETWEEN")## 非范围 #if ($column.listOperationCondition != "BETWEEN")## 非范围
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<DatePicker <el-date-picker
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
valueFormat="YYYY-MM-DD" value-format="YYYY-MM-DD"
placeholder="选择${comment}" placeholder="选择${comment}"
allowClear clearable
class="w-full" class="!w-[240px]"
/> />
</Form.Item> </el-form-item>
#else## 范围 #else## 范围
<Form.Item label="${comment}" name="${javaField}"> <el-form-item label="${comment}">
<RangePicker <el-date-picker
v-model:value="queryParams.${javaField}" v-model="queryParams.${javaField}"
v-bind="getRangePickerDefaultProps()" type="daterange"
class="w-full" value-format="YYYY-MM-DD"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="!w-[240px]"
/> />
</Form.Item> </el-form-item>
#end #end
#end #end
#end #end
#end #end
<Form.Item> <el-form-item>
<Button class="ml-2" @click="resetQuery"> 重置 </Button> <el-button class="ml-2" @click="resetQuery"> 重置 </el-button>
<Button class="ml-2" @click="handleQuery" type="primary"> <el-button class="ml-2" @click="handleQuery" type="primary">
搜索 搜索
</Button> </el-button>
</Form.Item> </el-form-item>
</Form> </el-form>
</ContentWrap> </ContentWrap>
<!-- 列表 --> <!-- 列表 -->
@ -295,7 +293,7 @@ onMounted(() => {
ref="tableToolbarRef" ref="tableToolbarRef"
v-model:hidden-search="hiddenSearchBar" v-model:hidden-search="hiddenSearchBar"
> >
<Button <el-button
class="ml-2" class="ml-2"
:icon="h(Plus)" :icon="h(Plus)"
type="primary" type="primary"
@ -303,19 +301,18 @@ onMounted(() => {
v-access:code="['${permissionPrefix}:create']" v-access:code="['${permissionPrefix}:create']"
> >
{{ $t('ui.actionTitle.create', ['${table.classComment}']) }} {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
</Button> </el-button>
#if ($deleteBatchEnable) #if ($deleteBatchEnable)
<Button <el-button
:icon="h(Trash2)" :icon="h(Trash2)"
type="primary" type="danger"
danger
class="ml-2" class="ml-2"
:disabled="isEmpty(checkedIds)" :disabled="isEmpty(checkedIds)"
@click="handleDeleteBatch" @click="handleDeleteBatch"
v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']"
> >
批量删除 批量删除
</Button> </el-button>
#end #end
</TableToolbar> </TableToolbar>
</template> </template>
@ -358,35 +355,38 @@ onMounted(() => {
#end #end
<vxe-column field="operation" title="操作" align="center"> <vxe-column field="operation" title="操作" align="center">
<template #default="{row}"> <template #default="{row}">
<Button <el-button
size="small" size="small"
type="link" type="primary"
link
@click="handleEdit(row as any)" @click="handleEdit(row as any)"
v-access:code="['${permissionPrefix}:update']" v-access:code="['${permissionPrefix}:update']"
> >
{{ $t('ui.actionTitle.edit') }} {{ $t('ui.actionTitle.edit') }}
</Button> </el-button>
<Button <el-button
size="small" size="small"
type="link" type="danger"
danger link
class="ml-2" class="ml-2"
@click="handleDelete(row as any)" @click="handleDelete(row as any)"
v-access:code="['${permissionPrefix}:delete']" v-access:code="['${permissionPrefix}:delete']"
> >
{{ $t('ui.actionTitle.delete') }} {{ $t('ui.actionTitle.delete') }}
</Button> </el-button>
</template> </template>
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
<!-- 分页 --> <!-- 分页 -->
<div class="mt-2 flex justify-end"> <div class="mt-2 flex justify-end">
<Pagination <el-pagination
:total="total" :total="total"
v-model:current="queryParams.pageNo" v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize" v-model:page-size="queryParams.pageSize"
show-size-changer :page-sizes="[10, 20, 50, 100]"
@change="getList" layout="total, sizes, prev, pager, next, jumper"
@size-change="getList"
@current-change="getList"
/> />
</div> </div>
</ContentWrap> </ContentWrap>

2
yudao-module-infra/src/main/resources/codegen/vue3_vben5_ele/general/views/modules/list_sub_inner.vue.vm
View File

@ -1,4 +1,4 @@
## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点： ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
## 1）inner 使用 list 不分页，erp 使用 page 分页 ## 1）inner 使用 list 不分页，erp 使用 page 分页
## 2）erp 支持单个子表的新增、修改、删除，inner 不支持 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
#parse("codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm") #parse("codegen/vue3_vben5_ele/general/views/modules/list_sub_erp.vue.vm")