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[] {
|
||||
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