【功能完善】INFRA:代码生成 vben5 antd 主子表 erp 模版
This commit is contained in:
parent
515cbbb285
commit
c6582b2a61
|
@ -38,6 +38,9 @@ import { downloadByData } from '#/utils/download';
|
||||||
const subTabsName = ref('$subClassNameVars.get(0)')
|
const subTabsName = ref('$subClassNameVars.get(0)')
|
||||||
#if ($table.templateType == 11)
|
#if ($table.templateType == 11)
|
||||||
const select${simpleClassName} = ref<${simpleClassName}Api.${simpleClassName}>();
|
const select${simpleClassName} = ref<${simpleClassName}Api.${simpleClassName}>();
|
||||||
|
async function onCellClick({ row }: { row: ${simpleClassName}Api.${simpleClassName} }) {
|
||||||
|
select${simpleClassName}.value = row
|
||||||
|
}
|
||||||
#end
|
#end
|
||||||
#end
|
#end
|
||||||
|
|
||||||
|
@ -323,7 +326,15 @@ onMounted(async () => {
|
||||||
expandAll: true,
|
expandAll: true,
|
||||||
reserve: true,
|
reserve: true,
|
||||||
}"
|
}"
|
||||||
#end
|
#end
|
||||||
|
#if ($table.templateType == 11) ## erp情况
|
||||||
|
@cell-click="onCellClick"
|
||||||
|
:row-config="{
|
||||||
|
keyField: 'id',
|
||||||
|
isHover: true,
|
||||||
|
isCurrent: true,
|
||||||
|
}"
|
||||||
|
#end
|
||||||
show-overflow
|
show-overflow
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
>
|
>
|
||||||
|
|
|
@ -4,49 +4,54 @@
|
||||||
#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 { useVbenModal } from '@vben/common-ui';
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
import { message } from 'ant-design-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/dict';
|
||||||
|
|
||||||
import { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
import { $t } from '#/locales';
|
import { $t } from '#/locales';
|
||||||
import { useVbenForm } from '#/adapter/form';
|
|
||||||
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}';
|
||||||
|
|
||||||
import { use${subSimpleClassName}FormSchema } from '../data';
|
|
||||||
|
|
||||||
const emit = defineEmits(['success']);
|
const emit = defineEmits(['success']);
|
||||||
const formData = ref<${simpleClassName}Api.${subSimpleClassName}>();
|
|
||||||
const getTitle = computed(() => {
|
const getTitle = computed(() => {
|
||||||
return formData.value?.id
|
return formData.value?.id
|
||||||
? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
|
? $t('ui.actionTitle.edit', ['${subTable.classComment}'])
|
||||||
: $t('ui.actionTitle.create', ['${subTable.classComment}']);
|
: $t('ui.actionTitle.create', ['${subTable.classComment}']);
|
||||||
});
|
});
|
||||||
|
|
||||||
const [Form, formApi] = useVbenForm({
|
const formRef = ref();
|
||||||
commonConfig: {
|
const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
|
||||||
componentProps: {
|
#foreach ($column in $subColumns)
|
||||||
class: 'w-full',
|
#if ($column.createOperation || $column.updateOperation)
|
||||||
},
|
#if ($column.htmlType == "checkbox")
|
||||||
formItemClass: 'col-span-2',
|
$column.javaField: [],
|
||||||
labelWidth: 80,
|
#else
|
||||||
},
|
$column.javaField: undefined,
|
||||||
layout: 'horizontal',
|
#end
|
||||||
schema: use${subSimpleClassName}FormSchema(),
|
#end
|
||||||
showDefaultActions: false
|
#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({
|
const [Modal, modalApi] = useVbenModal({
|
||||||
async onConfirm() {
|
async onConfirm() {
|
||||||
const { valid } = await formApi.validate();
|
await formRef.value?.validate();
|
||||||
if (!valid) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
modalApi.lock();
|
modalApi.lock();
|
||||||
// 提交表单
|
// 提交表单
|
||||||
const data = (await formApi.getValues()) as ${simpleClassName}Api.${subSimpleClassName};
|
const data = formData.value as ${simpleClassName}Api.${subSimpleClassName};
|
||||||
data.${subJoinColumn.javaField} = formData.value?.${subJoinColumn.javaField};
|
|
||||||
try {
|
try {
|
||||||
await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
|
await (formData.value?.id ? update${subSimpleClassName}(data) : create${subSimpleClassName}(data));
|
||||||
// 关闭并提示
|
// 关闭并提示
|
||||||
|
@ -62,7 +67,7 @@
|
||||||
},
|
},
|
||||||
async onOpenChange(isOpen: boolean) {
|
async onOpenChange(isOpen: boolean) {
|
||||||
if (!isOpen) {
|
if (!isOpen) {
|
||||||
formData.value = undefined;
|
resetForm()
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -81,13 +86,127 @@
|
||||||
}
|
}
|
||||||
// 设置到 values
|
// 设置到 values
|
||||||
formData.value = data;
|
formData.value = data;
|
||||||
await formApi.setValues(formData.value);
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
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>
|
||||||
<Modal :title="getTitle">
|
<Modal :title="getTitle">
|
||||||
<Form class="mx-4" />
|
<Form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="{ span: 5 }"
|
||||||
|
:wrapper-col="{ span: 18 }"
|
||||||
|
>
|
||||||
|
#foreach($column in $subColumns)
|
||||||
|
#if ($column.createOperation || $column.updateOperation)
|
||||||
|
#set ($dictType = $column.dictType)
|
||||||
|
#set ($javaField = $column.javaField)
|
||||||
|
#set ($javaType = $column.javaType)
|
||||||
|
#set ($comment = $column.columnComment)
|
||||||
|
#if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
|
||||||
|
#set ($dictMethod = "number")
|
||||||
|
#elseif ($javaType == "String")
|
||||||
|
#set ($dictMethod = "string")
|
||||||
|
#elseif ($javaType == "Boolean")
|
||||||
|
#set ($dictMethod = "boolean")
|
||||||
|
#end
|
||||||
|
#if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键,不用在表单里
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "imageUpload")## 图片上传
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<ImageUpload v-model:value="formData.${javaField}" />
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "fileUpload")## 文件上传
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<FileUpload v-model:value="formData.${javaField}" />
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "editor")## 文本编辑器
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<RichTextarea v-model="formData.${javaField}" height="500px" />
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "select")## 下拉框
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
|
||||||
|
#if ("" != $dictType)## 有数据字典
|
||||||
|
<Select.Option
|
||||||
|
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
|
||||||
|
:key="dict.value"
|
||||||
|
:value="dict.value"
|
||||||
|
>
|
||||||
|
{{ dict.label }}
|
||||||
|
</Select.Option>
|
||||||
|
#else##没数据字典
|
||||||
|
<Select.Option label="请选择字典生成" value="" />
|
||||||
|
#end
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "checkbox")## 多选框
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<CheckboxGroup v-model:value="formData.${javaField}">
|
||||||
|
#if ("" != $dictType)## 有数据字典
|
||||||
|
<Checkbox
|
||||||
|
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
|
||||||
|
:key="dict.value"
|
||||||
|
:value="dict.value"
|
||||||
|
>
|
||||||
|
{{ dict.label }}
|
||||||
|
</Checkbox>
|
||||||
|
#else##没数据字典
|
||||||
|
<Checkbox label="请选择字典生成" />
|
||||||
|
#end
|
||||||
|
</CheckboxGroup>
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "radio")## 单选框
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<RadioGroup v-model:value="formData.${javaField}">
|
||||||
|
#if ("" != $dictType)## 有数据字典
|
||||||
|
<Radio
|
||||||
|
v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
|
||||||
|
:key="dict.value"
|
||||||
|
:value="dict.value"
|
||||||
|
>
|
||||||
|
{{ dict.label }}
|
||||||
|
</Radio>
|
||||||
|
#else##没数据字典
|
||||||
|
<Radio value="1">请选择字典生成</Radio>
|
||||||
|
#end
|
||||||
|
</RadioGroup>
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "datetime")## 时间框
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<DatePicker
|
||||||
|
v-model:value="formData.${javaField}"
|
||||||
|
valueFormat="x"
|
||||||
|
placeholder="选择${comment}"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
#elseif($column.htmlType == "textarea")## 文本框
|
||||||
|
<Form.Item label="${comment}" name="${javaField}">
|
||||||
|
<Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
|
||||||
|
</Form.Item>
|
||||||
|
#end
|
||||||
|
#end
|
||||||
|
#end
|
||||||
|
</Form>
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -14,11 +14,15 @@
|
||||||
import { VxeColumn, VxeTable } from 'vxe-table';
|
import { VxeColumn, VxeTable } from '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 { cloneDeep, formatDateTime } from '@vben/utils';
|
||||||
|
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 ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
|
||||||
import { Button, message } from 'ant-design-vue';
|
import { Tinymce as RichTextarea } from '#/components/tinymce';
|
||||||
|
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 { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||||||
import { Plus } from '@vben/icons';
|
import { Plus } from '@vben/icons';
|
||||||
import { $t } from '#/locales';
|
import { $t } from '#/locales';
|
||||||
import { TableToolbar } from '#/components/table-toolbar';
|
import { TableToolbar } from '#/components/table-toolbar';
|
||||||
|
@ -99,8 +103,6 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
|
||||||
#end
|
#end
|
||||||
#end
|
#end
|
||||||
#end
|
#end
|
||||||
|
|
||||||
${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
/** 搜索按钮操作 */
|
/** 搜索按钮操作 */
|
||||||
|
@ -134,6 +136,7 @@ const resetQuery = () => {
|
||||||
#end
|
#end
|
||||||
#end
|
#end
|
||||||
#end
|
#end
|
||||||
|
params.${subJoinColumn.javaField} = props.${subJoinColumn.javaField};
|
||||||
const data = await get${subSimpleClassName}Page(params)
|
const data = await get${subSimpleClassName}Page(params)
|
||||||
list.value = data.list
|
list.value = data.list
|
||||||
total.value = data.total
|
total.value = data.total
|
||||||
|
|
Loading…
Reference in New Issue