refactor: 代码生成基础信息表单
puhui999
parent
90450a8df9
commit
10baedfc07
|
|
@ -1,96 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { InfraCodegenApi } from '#/api/infra/codegen';
|
|
||||||
|
|
||||||
import { CircleHelp } from '@vben/icons';
|
|
||||||
import { Col, Form, FormItem, Input, Row, Textarea, Tooltip } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { ref, unref, watch } from 'vue';
|
|
||||||
|
|
||||||
defineOptions({ name: 'InfraCodegenBasicInfoForm' });
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
table?: InfraCodegenApi.CodegenTable;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const formRef = ref();
|
|
||||||
const formData = ref({
|
|
||||||
tableName: '',
|
|
||||||
tableComment: '',
|
|
||||||
className: '',
|
|
||||||
author: '',
|
|
||||||
remark: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const rules = {
|
|
||||||
tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }],
|
|
||||||
tableComment: [{ required: true, message: '请输入表描述', trigger: 'blur' }],
|
|
||||||
className: [{ required: true, message: '请输入实体类名称', trigger: 'blur' }],
|
|
||||||
author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
|
|
||||||
};
|
|
||||||
|
|
||||||
/** 监听 table 属性，复制给 formData 属性 */
|
|
||||||
watch(
|
|
||||||
() => props.table,
|
|
||||||
(table) => {
|
|
||||||
if (!table) return;
|
|
||||||
formData.value = { ...table };
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
validate: async () => {
|
|
||||||
try {
|
|
||||||
await unref(formRef).validate();
|
|
||||||
return true;
|
|
||||||
} catch {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<Form ref="formRef" :model="formData" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
|
|
||||||
<Row :gutter="16">
|
|
||||||
<Col :span="12">
|
|
||||||
<FormItem label="表名称" name="tableName">
|
|
||||||
<Input v-model:value="formData.tableName" placeholder="请输入仓库名称" />
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col :span="12">
|
|
||||||
<FormItem label="表描述" name="tableComment">
|
|
||||||
<Input v-model:value="formData.tableComment" placeholder="请输入" />
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col :span="12">
|
|
||||||
<FormItem name="className">
|
|
||||||
<template #label>
|
|
||||||
<span>
|
|
||||||
实体类名称
|
|
||||||
<Tooltip
|
|
||||||
title="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
|
|
||||||
placement="top"
|
|
||||||
>
|
|
||||||
<CircleHelp />
|
|
||||||
</Tooltip>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<Input v-model:value="formData.className" placeholder="请输入" />
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col :span="12">
|
|
||||||
<FormItem label="作者" name="author">
|
|
||||||
<Input v-model:value="formData.author" placeholder="请输入" />
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
<Col :span="24">
|
|
||||||
<FormItem label="备注" name="remark">
|
|
||||||
<Textarea v-model:value="formData.remark" :rows="3" />
|
|
||||||
</FormItem>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</template>
|
|
||||||
|
|
@ -49,6 +49,59 @@ export function useImportTableFormSchema(
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 基本信息表单的 schema */
|
||||||
|
export function useBasicInfoFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'tableName',
|
||||||
|
label: '表名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入仓库名称',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'tableComment',
|
||||||
|
label: '表描述',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'className',
|
||||||
|
label: '实体类名称',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
help: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'author',
|
||||||
|
label: '作者',
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入',
|
||||||
|
},
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'remark',
|
||||||
|
label: '备注',
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
rows: 3,
|
||||||
|
},
|
||||||
|
// 使用Tailwind的col-span-2让元素跨越两列
|
||||||
|
formItemClass: 'md:col-span-2',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
/** 列表的搜索表单 */
|
/** 列表的搜索表单 */
|
||||||
export function useGridFormSchema(): VbenFormSchema[] {
|
export function useGridFormSchema(): VbenFormSchema[] {
|
||||||
return [
|
return [
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { InfraCodegenApi } from '#/api/infra/codegen';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { watch } from 'vue';
|
||||||
|
|
||||||
|
import { useBasicInfoFormSchema } from '../data';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
table: InfraCodegenApi.CodegenTable;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
/** 表单实例 */
|
||||||
|
const [Form, formApi] = useVbenForm({
|
||||||
|
// 配置表单布局为两列
|
||||||
|
wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4',
|
||||||
|
schema: useBasicInfoFormSchema(),
|
||||||
|
layout: 'horizontal',
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 动态更新表单值 */
|
||||||
|
watch(
|
||||||
|
() => props.table,
|
||||||
|
(val: any) => {
|
||||||
|
if (!val) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
formApi.setValues(val);
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 暴露出表单校验方法和表单值获取方法 */
|
||||||
|
defineExpose({
|
||||||
|
validate: formApi.validate,
|
||||||
|
getValues: formApi.getValues,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Form />
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue