feat: vben5 codegen

This commit is contained in:
xingyu4j
2025-09-12 16:51:04 +08:00
parent 0cfd2143d1
commit e7be2a03bc
14 changed files with 335 additions and 312 deletions

View File

@@ -1,12 +1,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import type { Rule } from 'ant-design-vue/es/form'; import type { Rule } from 'ant-design-vue/es/form';
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
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 { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
import { DICT_TYPE, getDictOptions } from '#/utils';
#if($table.templateType == 2)## 树表需要导入这些 #if($table.templateType == 2)## 树表需要导入这些
import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { handleTree } from '@vben/utils' import { handleTree } from '@vben/utils'
@@ -20,7 +23,6 @@ import { handleTree } from '@vben/utils'
#end #end
#end #end
import { computed, ref } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
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}';
@@ -70,7 +72,7 @@ const getTitle = computed(() => {
#end #end
/** 重置表单 */ /** 重置表单 */
const resetForm = () => { function resetForm() {
formData.value = { formData.value = {
#foreach ($column in $columns) #foreach ($column in $columns)
#if ($column.createOperation || $column.updateOperation) #if ($column.createOperation || $column.updateOperation)
@@ -88,7 +90,7 @@ const resetForm = () => {
## 特殊:树表专属逻辑 ## 特殊:树表专属逻辑
#if ( $table.templateType == 2 ) #if ( $table.templateType == 2 )
/** 获得${table.classComment}树 */ /** 获得${table.classComment}树 */
const get${simpleClassName}Tree = async () => { async function get${simpleClassName}Tree() {
${classNameVar}Tree.value = [] ${classNameVar}Tree.value = []
const data = await get${simpleClassName}List({}); const data = await get${simpleClassName}List({});
data.unshift({ data.unshift({
@@ -147,7 +149,6 @@ const [Modal, modalApi] = useVbenModal({
emit('success'); emit('success');
message.success({ message.success({
content: $t('ui.actionMessage.operationSuccess'), content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
}); });
} finally { } finally {
modalApi.unlock(); modalApi.unlock();

View File

@@ -1,18 +1,18 @@
<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 { VxeTableInstance } from '#/adapter/vxe-table';
import { ref, h, reactive, onMounted, nextTick } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { cloneDeep, formatDateTime } from '@vben/utils'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
import { cloneDeep, downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
import { Button, message,Tabs,Pagination,Form,RangePicker,DatePicker,Select,Input } from 'ant-design-vue'; import { Button, message,Tabs,Pagination,Form,RangePicker,DatePicker,Select,Input } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
import ${simpleClassName}Form from './modules/form.vue'; import ${simpleClassName}Form from './modules/form.vue';
import { Download, Plus, RefreshCw, Search, Trash2 } from '@vben/icons'; import { Download, Plus, RefreshCw, Search, Trash2 } from '@vben/icons';
import { ContentWrap } from '#/components/content-wrap'; import { ContentWrap } from '#/components/content-wrap';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table'; import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { TableToolbar } from '#/components/table-toolbar';
import { useTableToolbar } from '#/hooks';
## 特殊:主子表专属逻辑 ## 特殊:主子表专属逻辑
#if ( $table.templateType == 11 || $table.templateType == 12 ) #if ( $table.templateType == 11 || $table.templateType == 12 )
@@ -23,7 +23,6 @@ import { useTableToolbar } from '#/hooks';
#end #end
#end #end
import { ref, h, reactive,onMounted,nextTick } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
#if (${table.templateType} == 2)## 树表接口 #if (${table.templateType} == 2)## 树表接口
import { handleTree,isEmpty } from '@vben/utils' import { handleTree,isEmpty } from '@vben/utils'
@@ -77,7 +76,7 @@ const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中 const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */ /** 查询列表 */
const getList = async () => { async function getList() {
loading.value = true loading.value = true
try { try {
const params = cloneDeep(queryParams) as any; const params = cloneDeep(queryParams) as any;
@@ -104,7 +103,7 @@ const getList = async () => {
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { function handleQuery() {
#if ( $table.templateType != 2 ) #if ( $table.templateType != 2 )
queryParams.pageNo = 1 queryParams.pageNo = 1
#end #end
@@ -112,7 +111,7 @@ const handleQuery = () => {
} }
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { function resetQuery() {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
handleQuery() handleQuery()
} }
@@ -182,7 +181,7 @@ function handleRowCheckboxChange({
#end #end
/** 导出表格 */ /** 导出表格 */
async function onExport() { async function handleExport() {
try { try {
exportLoading.value = true; exportLoading.value = true;
const data = await export${simpleClassName}(queryParams); const data = await export${simpleClassName}(queryParams);
@@ -298,7 +297,7 @@ onMounted(() => {
<!-- 列表 --> <!-- 列表 -->
<ContentWrap title="${table.classComment}"> <ContentWrap title="${table.classComment}">
<template #extra> <template #extra>
<TableToolbar <VbenVxeTableToolbar
ref="tableToolbarRef" ref="tableToolbarRef"
v-model:hidden-search="hiddenSearchBar" v-model:hidden-search="hiddenSearchBar"
> >
@@ -321,7 +320,7 @@ onMounted(() => {
type="primary" type="primary"
class="ml-2" class="ml-2"
:loading="exportLoading" :loading="exportLoading"
@click="onExport" @click="handleExport"
v-access:code="['${permissionPrefix}:export']" v-access:code="['${permissionPrefix}:export']"
> >
{{ $t('ui.actionTitle.export') }} {{ $t('ui.actionTitle.export') }}

View File

@@ -3,29 +3,97 @@
#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
#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 { Rule } from 'ant-design-vue/es/form';
import type { Rule } from 'ant-design-vue/es/form'; import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { useVbenModal } from '@vben/common-ui'; import { computed, ref } from 'vue';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from "#/components/upload";
import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
import { DICT_TYPE, getDictOptions } from '#/utils';
import { computed, ref } from 'vue'; import { useVbenModal } from '@vben/common-ui';
import { $t } from '#/locales'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { cloneDeep, formatDateTime } from '@vben/utils';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { ImageUpload, FileUpload } from "#/components/upload";
import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue';
import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { $t } from '#/locales';
const emit = defineEmits(['success']); import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
: $t('ui.actionTitle.create', ['${subTable.classComment}']);
});
const formRef = ref(); const emit = defineEmits(['success']);
const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({ const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
: $t('ui.actionTitle.create', ['${subTable.classComment}']);
});
const formRef = ref();
const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
#foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end
#end
});
const rules: Record<string, Rule[]> = {
#foreach ($column in $subColumns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
#end
#end
};
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
await formRef.value?.validate();
modalApi.lock();
// 提交表单
const data = formData.value as ${simpleClassName}Api.${subSimpleClassName};
try {
await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
});
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
resetForm()
return;
}
// 加载数据
let data = modalApi.getData<${simpleClassName}Api.${subSimpleClassName}>();
if (!data) {
return;
}
if (data.id) {
modalApi.lock();
try {
data = await get${subSimpleClassName}(data.id);
} finally {
modalApi.unlock();
}
}
// 设置到 values
formData.value = data;
},
});
/** 重置表单 */
function resetForm(){
formData.value = {
#foreach ($column in $subColumns) #foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation) #if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox") #if ($column.htmlType == "checkbox")
@@ -35,75 +103,9 @@
#end #end
#end #end
#end #end
});
const rules: Record<string, Rule[]> = {
#foreach ($column in $subColumns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
#end
#end
}; };
formRef.value?.resetFields();
const [Modal, modalApi] = useVbenModal({ }
async onConfirm() {
await formRef.value?.validate();
modalApi.lock();
// 提交表单
const data = formData.value as ${simpleClassName}Api.${subSimpleClassName};
try {
await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
// 关闭并提示
await modalApi.close();
emit('success');
message.success({
content: $t('ui.actionMessage.operationSuccess'),
key: 'action_process_msg',
});
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
resetForm()
return;
}
// 加载数据
let data = modalApi.getData<${simpleClassName}Api.${subSimpleClassName}>();
if (!data) {
return;
}
if (data.id) {
modalApi.lock();
try {
data = await get${subSimpleClassName}(data.id);
} finally {
modalApi.unlock();
}
}
// 设置到 values
formData.value = data;
},
});
/** 重置表单 */
const resetForm = () => {
formData.value = {
#foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end
#end
};
formRef.value?.resetFields();
}
</script> </script>
<template> <template>

View File

@@ -5,12 +5,15 @@
#set ($subClassNameVar = $subClassNameVars.get($subIndex)) #set ($subClassNameVar = $subClassNameVars.get($subIndex))
#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
<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 { computed, ref, h, onMounted,watch,nextTick } from 'vue';
import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
import { $t } from '#/locales'; import { DICT_TYPE } from '@vben/constants';
import { DICT_TYPE, getDictOptions } from '#/utils'; import { getDictOptions } from '@vben/hooks';
import { message, Tabs, Form, Input, Textarea,Button, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
import { $t } from '#/locales';
#if ($subTable.subJoinMany) ## 一对多 #if ($subTable.subJoinMany) ## 一对多
import type { VxeTableInstance } from '#/adapter/vxe-table'; import type { VxeTableInstance } from '#/adapter/vxe-table';
@@ -30,13 +33,14 @@ const props = defineProps<{
#if ($subTable.subJoinMany) ## 一对多 #if ($subTable.subJoinMany) ## 一对多
const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据 const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
const tableRef = ref<VxeTableInstance>(); const tableRef = ref<VxeTableInstance>();
/** 添加${subTable.classComment} */ /** 添加${subTable.classComment} */
const onAdd = async () => { async function handleAdd() {
await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1); await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
} }
/** 删除${subTable.classComment} */ /** 删除${subTable.classComment} */
const onDelete = async (row: ${simpleClassName}Api.${subSimpleClassName}) => { async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
await tableRef.value?.remove(row); await tableRef.value?.remove(row);
} }
@@ -46,9 +50,11 @@ defineExpose({
const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[]; const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[];
const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[]; const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[]; const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
return data return [
.filter((row) => !removeRecords.some((removed) => removed.id === row.id)) ...data.filter(
?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined }))); (row) => !removeRecords.some((removed) => removed.id === row.id),
),
...insertRecords.map((row: any) => ({ ...row, id: undefined })),
}, },
}); });
@@ -123,25 +129,25 @@ watch(
#if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 #if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写
#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}" /> <Input v-model:value="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:value="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:value="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}"> <Select v-model:value="row.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Select.Option <Select.Option
@@ -159,7 +165,7 @@ watch(
</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}"> <CheckboxGroup v-model:value="row.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Checkbox <Checkbox
@@ -177,7 +183,7 @@ watch(
</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}"> <RadioGroup v-model:value="row.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<Radio <Radio
@@ -195,7 +201,7 @@ watch(
</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 <DatePicker
v-model:value="row.${javaField}" v-model:value="row.${javaField}"
:showTime="true" :showTime="true"
@@ -206,7 +212,7 @@ watch(
</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}" /> <Textarea v-model:value="row.${javaField}" />
</template> </template>
</vxe-column> </vxe-column>
@@ -214,12 +220,12 @@ watch(
#end #end
#end #end
<vxe-column field="operation" title="操作" align="center"> <vxe-column field="operation" title="操作" align="center">
<template #default="{row}"> <template #default="{ row }">
<Button <Button
size="small" size="small"
type="link" type="link"
danger danger
@click="onDelete(row as any)" @click="handleDelect(row)"
v-access:code="['${permissionPrefix}:delete']" v-access:code="['${permissionPrefix}:delete']"
> >
{{ $t('ui.actionTitle.delete') }} {{ $t('ui.actionTitle.delete') }}
@@ -228,7 +234,7 @@ watch(
</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']"> <Button :icon="h(Plus)" type="primary" ghost @click="handleAdd" v-access:code="['${permissionPrefix}:create']">
{{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }} {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
</Button> </Button>
</div> </div>

View File

@@ -6,48 +6,50 @@
#set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex)) #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
<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 { VxeTableInstance } from '#/adapter/vxe-table'; import type { VxeTableInstance } from '#/adapter/vxe-table';
import { DictTag } from '#/components/dict-tag'; import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table'; import { DICT_TYPE } from '@vben/constants';
import { reactive,ref, h, nextTick,watch,onMounted } from 'vue'; import { getDictOptions } from '@vben/hooks';
import { cloneDeep, formatDateTime } from '@vben/utils';
import { ContentWrap } from '#/components/content-wrap'; import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { ContentWrap } from '#/components/content-wrap';
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue' import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
import { Tinymce as RichTextarea } from '#/components/tinymce'; import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
import { ImageUpload, FileUpload } from "#/components/upload"; import { Tinymce as RichTextarea } from '#/components/tinymce';
import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue'; import { ImageUpload, FileUpload } from "#/components/upload";
import { Plus, Trash2 } from '@vben/icons'; import { message,Button, Tabs,Pagination, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox,RangePicker, DatePicker, TreeSelect } from 'ant-design-vue';
import { $t } from '#/locales'; import { Plus, Trash2 } from '@vben/icons';
import { TableToolbar } from '#/components/table-toolbar'; import { $t } from '#/locales';
import { useTableToolbar } from '#/hooks';
#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}/${simpleClassName_strikeCase}'; 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) ## 一对多
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 { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
#end #end
#end #end
const props = defineProps<{ const props = defineProps<{
${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}(主表的关联字段) ${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}(主表的关联字段)
}>() }>()
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
const [FormModal, formModalApi] = useVbenModal({ const [FormModal, formModalApi] = useVbenModal({
connectedComponent: ${subSimpleClassName}Form, connectedComponent: ${subSimpleClassName}Form,
destroyOnClose: true, destroyOnClose: true,
}); });
/** 创建${subTable.classComment} */ /** 创建${subTable.classComment} */
function handleCreate() { function handleCreate() {
@@ -106,87 +108,87 @@ function handleRowCheckboxChange({
#end #end
#end #end
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据 const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
const total = ref(0) // 列表的总页数 const total = ref(0) // 列表的总页数
#end #end
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
#foreach ($column in $subColumns) #foreach ($column in $subColumns)
#if ($column.listOperation) #if ($column.listOperation)
#if ($column.listOperationCondition != 'BETWEEN') #if ($column.listOperationCondition != 'BETWEEN')
$column.javaField: undefined, $column.javaField: undefined,
#end
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
$column.javaField: undefined,
#end
#end
#end #end
}) #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
$column.javaField: undefined,
#end
#end
#end
})
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { function handleQuery() {
queryParams.pageNo = 1 queryParams.pageNo = 1
getList() getList()
} }
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { function resetQuery() {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
handleQuery() handleQuery()
} }
#end #end
/** 查询列表 */ /** 查询列表 */
const getList = async () => { async function getList() {
loading.value = true loading.value = true
try { try {
if (!props.${subJoinColumn.javaField}){ if (!props.${subJoinColumn.javaField}){
return [] return []
}
## 特殊:树表专属逻辑(树不需要分页接口)
#if ($table.templateType == 11) ## erp
const params = cloneDeep(queryParams) as any;
#foreach ($column in $columns)
#if ($column.listOperation)
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
}
#end
#end
#end
params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
const data = await get${subSimpleClassName}Page(params)
list.value = data.list
total.value = data.total
#else
#if ($subTable.subJoinMany) ## 一对多
list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
#else
list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
#end
#end
} finally {
loading.value = false
} }
## 特殊:树表专属逻辑(树不需要分页接口)
#if ($table.templateType == 11) ## erp
const params = cloneDeep(queryParams) as any;
#foreach ($column in $columns)
#if ($column.listOperation)
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
}
#end
#end
#end
params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
const data = await get${subSimpleClassName}Page(params)
list.value = data.list
total.value = data.total
#else
#if ($subTable.subJoinMany) ## 一对多
list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
#else
list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
#end
#end
} finally {
loading.value = false
} }
}
/** 监听主表的关联字段的变化,加载对应的子表数据 */ /** 监听主表的关联字段的变化,加载对应的子表数据 */
watch( watch(
() => props.${subJoinColumn.javaField}, () => props.${subJoinColumn.javaField},
async (val) => { async (val) => {
if (!val) { if (!val) {
return; return;
} }
await nextTick(); await nextTick();
await getList() await getList()
}, },
{ immediate: true }, { immediate: true },
); );
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
/** 初始化 */ /** 初始化 */
@@ -287,7 +289,7 @@ onMounted(() => {
<!-- 列表 --> <!-- 列表 -->
<ContentWrap title="${table.classComment}"> <ContentWrap title="${table.classComment}">
<template #extra> <template #extra>
<TableToolbar <VbenVxeTableToolbar
ref="tableToolbarRef" ref="tableToolbarRef"
v-model:hidden-search="hiddenSearchBar" v-model:hidden-search="hiddenSearchBar"
> >

View File

@@ -9,6 +9,7 @@
import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}'; import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
import { computed, ref, h, onMounted,watch,nextTick } from 'vue'; import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
#if ($subTable.subJoinMany) ## 一对多 #if ($subTable.subJoinMany) ## 一对多

View File

@@ -3,10 +3,11 @@ import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleCl
import type { FormRules } from 'element-plus'; import type { FormRules } from 'element-plus';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
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 { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus'; import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus';
import { DICT_TYPE, getDictOptions } from '#/utils';
#if($table.templateType == 2)## 树表需要导入这些 #if($table.templateType == 2)## 树表需要导入这些
import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import { handleTree } from '@vben/utils' import { handleTree } from '@vben/utils'

View File

@@ -1,18 +1,18 @@
<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 { VxeTableInstance } from '#/adapter/vxe-table';
import { ref, h, reactive, onMounted, nextTick } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui'; import { Page, useVbenModal } from '@vben/common-ui';
import { cloneDeep, formatDateTime } from '@vben/utils'; import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
import { cloneDeep, downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
import { ElButton, ElMessage, ElLoading, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus'; import { ElButton, ElMessage, ElLoading, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
import ${simpleClassName}Form from './modules/form.vue'; import ${simpleClassName}Form from './modules/form.vue';
import { Download, Plus, RefreshCw, Search, Trash2 } from '@vben/icons'; import { Download, Plus, RefreshCw, Search, Trash2 } from '@vben/icons';
import { ContentWrap } from '#/components/content-wrap'; import { ContentWrap } from '#/components/content-wrap';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table'; import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { TableToolbar } from '#/components/table-toolbar';
import { useTableToolbar } from '#/hooks';
## 特殊:主子表专属逻辑 ## 特殊:主子表专属逻辑
#if ( $table.templateType == 11 || $table.templateType == 12 ) #if ( $table.templateType == 11 || $table.templateType == 12 )
@@ -23,7 +23,6 @@ import { useTableToolbar } from '#/hooks';
#end #end
#end #end
import { ref, h, reactive,onMounted,nextTick } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
#if (${table.templateType} == 2)## 树表接口 #if (${table.templateType} == 2)## 树表接口
import { handleTree,isEmpty } from '@vben/utils' import { handleTree,isEmpty } from '@vben/utils'
@@ -104,7 +103,7 @@ const getList = async () => {
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { function handleQuery() {
#if ( $table.templateType != 2 ) #if ( $table.templateType != 2 )
queryParams.pageNo = 1 queryParams.pageNo = 1
#end #end
@@ -112,7 +111,7 @@ const handleQuery = () => {
} }
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { function resetQuery() {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
handleQuery() handleQuery()
} }
@@ -182,7 +181,7 @@ function handleRowCheckboxChange({
#end #end
/** 导出表格 */ /** 导出表格 */
async function onExport() { async function handleExport() {
try { try {
exportLoading.value = true; exportLoading.value = true;
const data = await export${simpleClassName}(queryParams); const data = await export${simpleClassName}(queryParams);
@@ -324,7 +323,7 @@ onMounted(() => {
type="primary" type="primary"
class="ml-2" class="ml-2"
:loading="exportLoading" :loading="exportLoading"
@click="onExport" @click="handleExport"
v-access:code="['${permissionPrefix}:export']" v-access:code="['${permissionPrefix}:export']"
> >
{{ $t('ui.actionTitle.export') }} {{ $t('ui.actionTitle.export') }}

View File

@@ -6,13 +6,15 @@
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import type { FormRules } from 'element-plus'; import type { FormRules } from 'element-plus';
import { computed, ref, reactive } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
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 { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker, ElTreeSelect } from 'element-plus'; 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 { 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}';

View File

@@ -5,12 +5,15 @@
#set ($subClassNameVar = $subClassNameVars.get($subIndex)) #set ($subClassNameVar = $subClassNameVars.get($subIndex))
#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
<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 { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker } from 'element-plus'; import { computed, ref, reactive, h, onMounted,watch,nextTick } from 'vue';
import { computed, ref, reactive, h, onMounted,watch,nextTick } from 'vue';
import { $t } from '#/locales'; import { DICT_TYPE } from '@vben/constants';
import { DICT_TYPE, getDictOptions } from '#/utils'; import { getDictOptions } from '@vben/hooks';
import { ElMessage, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput, ElButton, ElSelect, ElOption, ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox, ElDatePicker } from 'element-plus';
import { $t } from '#/locales';
#if ($subTable.subJoinMany) ## 一对多 #if ($subTable.subJoinMany) ## 一对多
import type { VxeTableInstance } from '#/adapter/vxe-table'; import type { VxeTableInstance } from '#/adapter/vxe-table';
@@ -31,12 +34,12 @@ const props = defineProps<{
const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据 const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
const tableRef = ref<VxeTableInstance>(); const tableRef = ref<VxeTableInstance>();
/** 添加${subTable.classComment} */ /** 添加${subTable.classComment} */
const onAdd = async () => { async function handleAdd() {
await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1); await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
} }
/** 删除${subTable.classComment} */ /** 删除${subTable.classComment} */
const onDelete = async (row: ${simpleClassName}Api.${subSimpleClassName}) => { async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
await tableRef.value?.remove(row); await tableRef.value?.remove(row);
} }
@@ -46,9 +49,11 @@ defineExpose({
const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[]; const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[];
const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[]; const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[]; const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
return data return [
.filter((row) => !removeRecords.some((removed) => removed.id === row.id)) ...data.filter(
?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined }))); (row) => !removeRecords.some((removed) => removed.id === row.id),
),
...insertRecords.map((row: any) => ({ ...row, id: undefined })),
}, },
}); });
@@ -227,7 +232,7 @@ watch(
</vxe-column> </vxe-column>
</vxe-table> </vxe-table>
<div class="flex justify-center mt-4"> <div class="flex justify-center mt-4">
<el-button :icon="h(Plus)" type="primary" plain @click="onAdd" v-access:code="['${permissionPrefix}:create']"> <el-button :icon="h(Plus)" type="primary" plain @click="handleAdd" v-access:code="['${permissionPrefix}:create']">
{{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }} {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
</el-button> </el-button>
</div> </div>

View File

@@ -9,23 +9,25 @@
import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
import type { VxeTableInstance } from '#/adapter/vxe-table'; import type { VxeTableInstance } from '#/adapter/vxe-table';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { reactive,ref, h, nextTick,watch,onMounted } from 'vue'; import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
import { cloneDeep, formatDateTime } from '@vben/utils';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
import { ContentWrap } from '#/components/content-wrap'; import { ContentWrap } from '#/components/content-wrap';
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
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 { ElMessage, ElLoading, ElButton, ElTabs, ElTabPane, ElPagination, ElForm, ElFormItem, ElDatePicker, ElSelect, ElOption, ElInput } from 'element-plus'; 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 { useTableToolbar } from '#/hooks';
#end #end
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
@@ -129,64 +131,64 @@ function handleRowCheckboxChange({
}) })
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { function handleQuery() {
queryParams.pageNo = 1 queryParams.pageNo = 1
getList() getList()
} }
/** 重置按钮操作 */ /** 重置按钮操作 */
const resetQuery = () => { function resetQuery() {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
handleQuery() handleQuery()
} }
#end #end
/** 查询列表 */ /** 查询列表 */
const getList = async () => { async function getList() {
loading.value = true loading.value = true
try { try {
if (!props.${subJoinColumn.javaField}){ if (!props.${subJoinColumn.javaField}){
return [] return []
}
## 特殊:树表专属逻辑(树不需要分页接口)
#if ($table.templateType == 11) ## erp
const params = cloneDeep(queryParams) as any;
#foreach ($column in $columns)
#if ($column.listOperation)
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
}
#end
#end
#end
params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
const data = await get${subSimpleClassName}Page(params)
list.value = data.list
total.value = data.total
#else
#if ($subTable.subJoinMany) ## 一对多
list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
#else
list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
#end
#end
} finally {
loading.value = false
} }
## 特殊:树表专属逻辑(树不需要分页接口)
#if ($table.templateType == 11) ## erp
const params = cloneDeep(queryParams) as any;
#foreach ($column in $columns)
#if ($column.listOperation)
#if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
}
#end
#end
#end
params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
const data = await get${subSimpleClassName}Page(params)
list.value = data.list
total.value = data.total
#else
#if ($subTable.subJoinMany) ## 一对多
list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
#else
list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
#end
#end
} finally {
loading.value = false
} }
}
/** 监听主表的关联字段的变化,加载对应的子表数据 */ /** 监听主表的关联字段的变化,加载对应的子表数据 */
watch( watch(
() => props.${subJoinColumn.javaField}, () => props.${subJoinColumn.javaField},
async (val) => { async (val) => {
if (!val) { if (!val) {
return; return;
} }
await nextTick(); await nextTick();
await getList() await getList()
}, },
{ immediate: true }, { immediate: true },
); );
#if ($table.templateType == 11) ## erp #if ($table.templateType == 11) ## erp
/** 初始化 */ /** 初始化 */
@@ -290,7 +292,7 @@ onMounted(() => {
<!-- 列表 --> <!-- 列表 -->
<ContentWrap title="${table.classComment}"> <ContentWrap title="${table.classComment}">
<template #extra> <template #extra>
<TableToolbar <VbenVxeTableToolbar
ref="tableToolbarRef" ref="tableToolbarRef"
v-model:hidden-search="hiddenSearchBar" v-model:hidden-search="hiddenSearchBar"
> >

View File

@@ -6,13 +6,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}'; import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { computed, ref } from 'vue';
import { $t } from '#/locales';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${table.businessName}'; import { get${subSimpleClassName}, create${subSimpleClassName}, update${subSimpleClassName} } from '#/api/${table.moduleName}/${table.businessName}';
import { $t } from '#/locales';
import { use${subSimpleClassName}FormSchema } from '../data'; import { use${subSimpleClassName}FormSchema } from '../data';

View File

@@ -9,6 +9,7 @@
import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}'; import type { ${apiName} } from '#/api/${table.moduleName}/${table.businessName}';
import { computed, ref, h, onMounted,watch,nextTick } from 'vue'; import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
import { $t } from '#/locales'; import { $t } from '#/locales';
#if ($subTable.subJoinMany) ## 一对多 #if ($subTable.subJoinMany) ## 一对多

View File

@@ -42,6 +42,19 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true, destroyOnClose: true,
}); });
/** 刷新表格 */
async function handleRefresh() {
#if ($table.templateType == 11) ## erp
await gridApi.query();
#else
#if ($subTable.subJoinMany) ## 一对多
await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
#else
await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
#end
#end
}
/** 创建${subTable.classComment} */ /** 创建${subTable.classComment} */
function handleCreate() { function handleCreate() {
if (!props.${subJoinColumn.javaField}){ if (!props.${subJoinColumn.javaField}){
@@ -151,19 +164,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
#end #end
}); });
/** 刷新表格 */
async function handleRefresh() {
#if ($table.templateType == 11) ## erp
await gridApi.query();
#else
#if ($subTable.subJoinMany) ## 一对多
await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
#else
await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
#end
#end
}
/** 监听主表的关联字段的变化,加载对应的子表数据 */ /** 监听主表的关联字段的变化,加载对应的子表数据 */
watch( watch(
() => props.${subJoinColumn.javaField}, () => props.${subJoinColumn.javaField},