358 lines
13 KiB
Vue
358 lines
13 KiB
Vue
<script lang="ts" setup>
|
||
import type { InfraCodegenApi } from '#/api/infra/codegen';
|
||
import type { SystemMenuApi } from '#/api/system/menu';
|
||
|
||
import { CircleHelp } from '@vben/icons';
|
||
import { Col, Divider, Form, FormItem, Input, Row, Select, SelectOption, Tooltip, TreeSelect } from 'ant-design-vue';
|
||
|
||
import { getCodegenTableList } from '#/api/infra/codegen';
|
||
import { getSimpleMenusList } from '#/api/system/menu';
|
||
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
||
import { onMounted, ref, unref, watch } from 'vue';
|
||
|
||
defineOptions({ name: 'InfraCodegenGenerateInfoForm' });
|
||
|
||
const props = defineProps<Props>();
|
||
|
||
interface Props {
|
||
columns?: InfraCodegenApi.CodegenColumn[];
|
||
table?: InfraCodegenApi.CodegenTable;
|
||
}
|
||
|
||
const formRef = ref();
|
||
const formData = ref<InfraCodegenApi.CodegenTable>({} as InfraCodegenApi.CodegenTable);
|
||
const subColumns = ref<InfraCodegenApi.CodegenColumn[]>([]);
|
||
const tables = ref<InfraCodegenApi.CodegenTable[]>([]);
|
||
const menus = ref<SystemMenuApi.SystemMenu[]>([]);
|
||
|
||
/** 菜单树选项 */
|
||
const menuTreeProps = {
|
||
value: 'id',
|
||
title: 'name',
|
||
children: 'children',
|
||
};
|
||
|
||
const rules = {
|
||
templateType: [{ required: true, message: '生成模板不能为空', trigger: 'blur' }],
|
||
frontType: [{ required: true, message: '前端类型不能为空', trigger: 'blur' }],
|
||
scene: [{ required: true, message: '生成场景不能为空', trigger: 'blur' }],
|
||
moduleName: [{ required: true, message: '模块名不能为空', trigger: 'blur' }],
|
||
businessName: [{ required: true, message: '业务名不能为空', trigger: 'blur' }],
|
||
className: [{ required: true, message: '类名称不能为空', trigger: 'blur' }],
|
||
classComment: [{ required: true, message: '类描述不能为空', trigger: 'blur' }],
|
||
};
|
||
|
||
/** 监听 table 属性，复制给 formData 属性 */
|
||
watch(
|
||
() => props.table,
|
||
(table) => {
|
||
if (!table) return;
|
||
formData.value = { ...table };
|
||
},
|
||
{
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
);
|
||
|
||
/** 子表名称选中 */
|
||
async function subTableNameSelected(value) {
|
||
// 使用表ID获取子表的字段
|
||
const subTableColumns = await getSubCodegenColumns(formData.value.dataSourceConfigId, value);
|
||
subColumns.value = subTableColumns;
|
||
// 重置已经选择的子表字段
|
||
formData.value.subTableFkColumnId = undefined;
|
||
formData.value.mainTableFKColumnId = undefined;
|
||
}
|
||
|
||
/** 获取子表的列 */
|
||
async function getSubCodegenColumns(dataSourceConfigId: number, tableName: string) {
|
||
const tableList = await getCodegenTableList(dataSourceConfigId);
|
||
const subTable = tableList.find((item) => item.tableName === tableName);
|
||
if (subTable) {
|
||
// 这里需要实际API来获取子表的列信息
|
||
// 由于没有完整接口信息，这里仅模拟返回
|
||
return [];
|
||
}
|
||
return [];
|
||
}
|
||
|
||
/** 初始化 */
|
||
onMounted(async () => {
|
||
// 获取菜单列表
|
||
menus.value = await getSimpleMenusList();
|
||
// 获取表数据，用于主子表选择
|
||
tables.value = await getCodegenTableList(formData.value.dataSourceConfigId);
|
||
});
|
||
|
||
/** 暴露方法 */
|
||
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="templateType">
|
||
<Select v-model:value="formData.templateType">
|
||
<SelectOption
|
||
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE, 'number')"
|
||
:key="dict.value"
|
||
:value="dict.value"
|
||
>
|
||
{{ dict.label }}
|
||
</SelectOption>
|
||
</Select>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="前端类型" name="frontType">
|
||
<Select v-model:value="formData.frontType">
|
||
<SelectOption
|
||
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE, 'number')"
|
||
:key="dict.value"
|
||
:value="dict.value"
|
||
>
|
||
{{ dict.label }}
|
||
</SelectOption>
|
||
</Select>
|
||
</FormItem>
|
||
</Col>
|
||
|
||
<Col :span="12">
|
||
<FormItem label="生成场景" name="scene">
|
||
<Select v-model:value="formData.scene">
|
||
<SelectOption
|
||
v-for="dict in getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE, 'number')"
|
||
:key="dict.value"
|
||
:value="dict.value"
|
||
>
|
||
{{ dict.label }}
|
||
</SelectOption>
|
||
</Select>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="上级菜单">
|
||
<Tooltip placement="top">
|
||
<template #title>分配到指定菜单下，例如 系统管理</template>
|
||
<template #default>
|
||
<TreeSelect
|
||
v-model:value="formData.parentMenuId"
|
||
:tree-data="menus"
|
||
:field-names="menuTreeProps"
|
||
show-search
|
||
tree-node-filter-prop="title"
|
||
:tree-checkable="false"
|
||
:tree-default-expand-all="false"
|
||
placeholder="请选择系统菜单"
|
||
style="width: 100%"
|
||
/>
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
|
||
<Col :span="12">
|
||
<FormItem label="模块名" name="moduleName">
|
||
<Tooltip placement="top">
|
||
<template #title>模块名，即一级目录，例如 system、infra、tool 等等</template>
|
||
<template #default>
|
||
<Input v-model:value="formData.moduleName" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
|
||
<Col :span="12">
|
||
<FormItem label="业务名" name="businessName">
|
||
<Tooltip placement="top">
|
||
<template #title>业务名，即二级目录，例如 user、permission、dict 等等</template>
|
||
<template #default>
|
||
<Input v-model:value="formData.businessName" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
|
||
<Col :span="12">
|
||
<FormItem label="类名称" name="className">
|
||
<Tooltip placement="top">
|
||
<template #title>类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等</template>
|
||
<template #default>
|
||
<Input v-model:value="formData.className" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
|
||
<Col :span="12">
|
||
<FormItem label="类描述" name="classComment">
|
||
<Tooltip placement="top">
|
||
<template #title>用作类描述，例如 用户</template>
|
||
<template #default>
|
||
<Input v-model:value="formData.classComment" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
</Row>
|
||
|
||
<!-- 树表信息 -->
|
||
<template v-if="formData.templateType === 2">
|
||
<Divider>树表信息</Divider>
|
||
<Row :gutter="16">
|
||
<Col :span="12">
|
||
<FormItem label="父编号字段" name="treeParentColumnId">
|
||
<Tooltip placement="top">
|
||
<template #title>树显示的父编码字段名， 如：parent_Id</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Select v-model:value="formData.treeParentColumnId" placeholder="请选择" allow-clear>
|
||
<SelectOption v-for="column in columns" :key="column.id" :value="column.id">
|
||
{{ column.columnName }}
|
||
</SelectOption>
|
||
</Select>
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="名称字段" name="treeNameColumnId">
|
||
<Tooltip placement="top">
|
||
<template #title>树节点显示的名称字段，一般是name</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Select v-model:value="formData.treeNameColumnId" placeholder="请选择" allow-clear>
|
||
<SelectOption v-for="column in columns" :key="column.id" :value="column.id">
|
||
{{ column.columnName }}
|
||
</SelectOption>
|
||
</Select>
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
</Row>
|
||
</template>
|
||
|
||
<!-- 主子表信息 -->
|
||
<template v-if="formData.templateType === 3">
|
||
<Divider>主子表信息</Divider>
|
||
<Row :gutter="16">
|
||
<Col :span="24">
|
||
<FormItem label="关联子表的成员变量名" name="subJoinColumnId">
|
||
<Tooltip placement="top">
|
||
<template #title>子表的成员变量名，默认为子表的名称</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Input v-model:value="formData.subJoinColumnId" placeholder="请输入" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="子表的表名" name="subTableName">
|
||
<Tooltip placement="top">
|
||
<template #title>关联的子表的表名， 如：sys_user_post</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Select
|
||
v-model:value="formData.subTableName"
|
||
placeholder="请选择"
|
||
allow-clear
|
||
@change="subTableNameSelected"
|
||
>
|
||
<SelectOption v-for="table in tables" :key="table.tableName" :value="table.tableName">
|
||
{{ `${table.tableName}：${table.tableComment}` }}
|
||
</SelectOption>
|
||
</Select>
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="子表的类名" name="subTableClassName">
|
||
<Tooltip placement="top">
|
||
<template #title>子表的类名， 如：SysUserPost</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Input v-model:value="formData.subTableClassName" placeholder="请输入" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="子表的外键字段" name="subTableFkColumnId">
|
||
<Tooltip placement="top">
|
||
<template #title>子表的外键字段的编号，对应主表的主键</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Select v-model:value="formData.subTableFkColumnId" placeholder="请选择" allow-clear>
|
||
<SelectOption v-for="column in subColumns" :key="column.id" :value="column.id">
|
||
{{ column.columnName }}
|
||
</SelectOption>
|
||
</Select>
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="主表的类名" name="mainTableClassName">
|
||
<Tooltip placement="top">
|
||
<template #title>主表的类名， 如：SysUser</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Input v-model:value="formData.mainTableClassName" placeholder="请输入" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="主表的外键字段" name="mainTableFKColumnId">
|
||
<Tooltip placement="top">
|
||
<template #title>子表的外键关联到主表的主键字段编号</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Select v-model:value="formData.mainTableFKColumnId" placeholder="请选择" allow-clear>
|
||
<SelectOption v-for="column in columns" :key="column.id" :value="column.id">
|
||
{{ column.columnName }}
|
||
</SelectOption>
|
||
</Select>
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
<Col :span="12">
|
||
<FormItem label="子表的类描述" name="subTableClassComment">
|
||
<Tooltip placement="top">
|
||
<template #title>子表的描述，例如 用户岗位</template>
|
||
<template #icon><CircleHelp /></template>
|
||
<template #default>
|
||
<Input v-model:value="formData.subTableClassComment" placeholder="请输入" />
|
||
</template>
|
||
</Tooltip>
|
||
</FormItem>
|
||
</Col>
|
||
</Row>
|
||
</template>
|
||
</Form>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.form-header {
|
||
padding-left: 8px;
|
||
margin-bottom: 16px;
|
||
font-size: 16px;
|
||
border-left: 3px solid #1890ff;
|
||
}
|
||
</style>
|