feat: 代码生成
This commit is contained in:
dap
@@ -1,26 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import type { GenInfo } from '#/api/tool/gen/model';
|
||||
|
||||
import { onMounted, provide, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { useTabs } from '@vben/hooks';
|
||||
import { safeParseNumber } from '@vben/utils';
|
||||
|
||||
import { Skeleton, Step, Steps } from 'ant-design-vue';
|
||||
|
||||
import { genInfo } from '#/api/tool/gen';
|
||||
|
||||
import { BasicSetting, GenConfig, GenSuccess } from './edit-steps';
|
||||
import { emitter } from './mitt';
|
||||
|
||||
const current = ref(0);
|
||||
|
||||
const { setTabTitle } = useTabs();
|
||||
const routes = useRoute();
|
||||
// 获取路由参数
|
||||
const tableId = routes.params.tableId as string;
|
||||
|
||||
const genInfoData = ref<GenInfo>();
|
||||
|
||||
provide('genInfoData', genInfoData);
|
||||
|
||||
onMounted(async () => {
|
||||
const resp = await genInfo(tableId);
|
||||
console.log(resp);
|
||||
// 需要做菜单转换 严格相等 才能选中回显
|
||||
resp.info.parentMenuId = safeParseNumber(resp.info.parentMenuId);
|
||||
genInfoData.value = resp;
|
||||
setTabTitle(`生成配置: ${resp.info.tableName}`);
|
||||
});
|
||||
|
||||
/**
|
||||
* 事件总线 监听切换步骤
|
||||
*/
|
||||
emitter.on('to', (step: number) => {
|
||||
current.value = step;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<div>修改代码生成</div>
|
||||
{{ tableId }}
|
||||
<Page content-class="bg-background p-5 rounded-lg">
|
||||
<div class="flex items-center justify-center">
|
||||
<Steps :current="current" class="w-fit">
|
||||
<Step title="生成信息" />
|
||||
<Step disabled title="字段信息" />
|
||||
<Step disabled title="完成" />
|
||||
</Steps>
|
||||
</div>
|
||||
<!-- content -->
|
||||
<div v-if="genInfoData">
|
||||
<BasicSetting v-if="current === 0" />
|
||||
<GenConfig v-if="current === 1" />
|
||||
<GenSuccess v-if="current === 2" />
|
||||
</div>
|
||||
<Skeleton v-else :active="true" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
133
apps/web-antd/src/views/tool/gen/edit-steps/basic-setting.vue
Normal file
133
apps/web-antd/src/views/tool/gen/edit-steps/basic-setting.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
import type { Column, GenInfo } from '#/api/tool/gen/model';
|
||||
|
||||
import { inject, onMounted, type Ref } from 'vue';
|
||||
|
||||
import { useVbenForm } from '@vben/common-ui';
|
||||
import { addFullName, listToTree } from '@vben/utils';
|
||||
|
||||
import { Col, Row } from 'ant-design-vue';
|
||||
|
||||
import { menuList } from '#/api/system/menu';
|
||||
|
||||
import { toCurrentStep } from '../mitt';
|
||||
import { formSchema } from './basic';
|
||||
|
||||
/**
|
||||
* 从父组件注入
|
||||
*/
|
||||
const genInfoData = inject('genInfoData') as Ref<GenInfo>;
|
||||
|
||||
const [BasicForm, formApi] = useVbenForm({
|
||||
commonConfig: {
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
formItemClass: 'col-span-1',
|
||||
},
|
||||
labelWidth: 150,
|
||||
},
|
||||
schema: formSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
/**
|
||||
* 树表需要用到的数据
|
||||
*/
|
||||
async function initTreeSelect(columns: Column[]) {
|
||||
const options = columns.map((item) => {
|
||||
const label = `${item.columnName} | ${item.columnComment}`;
|
||||
return { label, value: item.columnName };
|
||||
});
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: {
|
||||
options,
|
||||
},
|
||||
fieldName: 'treeCode',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
options,
|
||||
},
|
||||
fieldName: 'treeParentCode',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
options,
|
||||
},
|
||||
fieldName: 'treeName',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载菜单选择
|
||||
*/
|
||||
async function initMenuSelect() {
|
||||
const list = await menuList();
|
||||
const tree = listToTree(list, { id: 'menuId', pid: 'parentId' });
|
||||
const treeData = [
|
||||
{
|
||||
fullName: '根目录',
|
||||
menuId: 0,
|
||||
menuName: '根目录',
|
||||
children: tree,
|
||||
},
|
||||
];
|
||||
addFullName(treeData, 'menuName', ' / ');
|
||||
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: {
|
||||
fieldNames: {
|
||||
label: 'menuName',
|
||||
value: 'menuId',
|
||||
},
|
||||
// 设置弹窗滚动高度 默认256
|
||||
listHeight: 300,
|
||||
treeData,
|
||||
treeDefaultExpandAll: false,
|
||||
// 默认展开的树节点
|
||||
treeDefaultExpandedKeys: [0],
|
||||
treeLine: { showLeafIcon: false },
|
||||
treeNodeLabelProp: 'fullName',
|
||||
},
|
||||
fieldName: 'parentMenuId',
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { info } = genInfoData.value;
|
||||
for (const key in info) {
|
||||
formApi.setFieldValue(key, info[key as keyof typeof info]);
|
||||
}
|
||||
await Promise.all([initTreeSelect(info.columns), initMenuSelect()]);
|
||||
});
|
||||
|
||||
async function handleNext() {
|
||||
try {
|
||||
const { valid } = await formApi.validate();
|
||||
if (!valid) {
|
||||
return null;
|
||||
}
|
||||
const data = await formApi.getValues();
|
||||
Object.assign(genInfoData.value.info, data);
|
||||
toCurrentStep(1);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Row justify="center">
|
||||
<Col v-bind="{ xs: 24, sm: 24, md: 20, lg: 16, xl: 16 }">
|
||||
<BasicForm />
|
||||
<div class="flex justify-center">
|
||||
<a-button type="primary" @click="handleNext">下一步</a-button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</template>
|
||||
214
apps/web-antd/src/views/tool/gen/edit-steps/basic.tsx
Normal file
214
apps/web-antd/src/views/tool/gen/edit-steps/basic.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import { getPopupContainer } from '@vben/utils';
|
||||
|
||||
import { type FormSchemaGetter, z } from '#/adapter';
|
||||
|
||||
export const formSchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Divider',
|
||||
componentProps: {
|
||||
orientation: 'left',
|
||||
},
|
||||
fieldName: 'divider1',
|
||||
formItemClass: 'col-span-2',
|
||||
label: '基本信息',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'tableName',
|
||||
label: '表名称',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'tableComment',
|
||||
label: '表描述',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'className',
|
||||
label: '实体类名称',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'functionAuthor',
|
||||
label: '作者',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Divider',
|
||||
componentProps: {
|
||||
orientation: 'left',
|
||||
},
|
||||
fieldName: 'divider2',
|
||||
formItemClass: 'col-span-2',
|
||||
label: '生成信息',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: false,
|
||||
getPopupContainer,
|
||||
options: [
|
||||
{ label: '单表(增删改查)', value: 'crud' },
|
||||
{ label: '树表(增删改查)', value: 'tree' },
|
||||
],
|
||||
},
|
||||
defaultValue: 'crud',
|
||||
fieldName: 'tplCategory',
|
||||
label: '模板类型',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
getPopupContainer,
|
||||
placeholder: '请选择',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => values.tplCategory === 'tree',
|
||||
triggerFields: ['tplCategory'],
|
||||
},
|
||||
fieldName: 'treeCode',
|
||||
helpMessage: '树节点显示的编码字段名， 如: dept_id (相当于id)',
|
||||
label: '树编码字段',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: false,
|
||||
placeholder: '请选择',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => values.tplCategory === 'tree',
|
||||
triggerFields: ['tplCategory'],
|
||||
},
|
||||
fieldName: 'treeParentCode',
|
||||
help: '树节点显示的父编码字段名， 如: parent_Id (相当于parentId)',
|
||||
label: '树父编码字段',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: false,
|
||||
placeholder: '请选择',
|
||||
},
|
||||
dependencies: {
|
||||
show: (values) => values.tplCategory === 'tree',
|
||||
triggerFields: ['tplCategory'],
|
||||
},
|
||||
fieldName: 'treeName',
|
||||
help: '树节点的显示名称字段名， 如: dept_name (相当于label)',
|
||||
label: '树名称字段',
|
||||
rules: 'selectRequired',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'packageName',
|
||||
help: '生成在哪个java包下, 例如 com.ruoyi.system',
|
||||
label: '生成包路径',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'moduleName',
|
||||
help: '可理解为子系统名，例如 system',
|
||||
label: '生成模块名',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'businessName',
|
||||
help: '可理解为功能英文名，例如 user',
|
||||
label: '生成业务名',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'functionName',
|
||||
help: '用作类描述，例如 用户',
|
||||
label: '生成功能名',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
allowClear: false,
|
||||
getPopupContainer,
|
||||
placeholder: '请选择',
|
||||
},
|
||||
defaultValue: 0,
|
||||
fieldName: 'parentMenuId',
|
||||
label: '上级菜单',
|
||||
},
|
||||
{
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: [
|
||||
{ label: 'zip压缩包', value: '0' },
|
||||
{ label: '自定义路径', value: '1' },
|
||||
],
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: '0',
|
||||
fieldName: 'genType',
|
||||
help: '默认为zip压缩包下载, 也可以自定义生成路径',
|
||||
label: '生成代码方式',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
defaultValue: '/',
|
||||
dependencies: {
|
||||
show: (model) => model.genType === '1',
|
||||
triggerFields: ['genType'],
|
||||
},
|
||||
fieldName: 'genPath',
|
||||
help: '输入绝对路径, 不支持"./"相对路径',
|
||||
label: '代码生成路径',
|
||||
rules: z
|
||||
.string()
|
||||
.regex(/^(?:[a-z]:)?(?:\/|(?:\\|\/)[^\\/:*?"<>|\r\n]+)*(?:\\|\/)?$/i, {
|
||||
message: '请输入合法的路径',
|
||||
}),
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
fieldName: 'remark',
|
||||
formItemClass: 'col-span-2 items-baseline',
|
||||
label: '备注',
|
||||
},
|
||||
];
|
||||
65
apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue
Normal file
65
apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import type { GenInfo } from '#/api/tool/gen/model';
|
||||
|
||||
import { inject, type Ref, unref } from 'vue';
|
||||
|
||||
import { Space, Table } from 'ant-design-vue';
|
||||
|
||||
import { editSave } from '#/api/tool/gen';
|
||||
|
||||
import { toCurrentStep } from '../mitt';
|
||||
|
||||
/**
|
||||
* 从父组件注入
|
||||
*/
|
||||
const genInfoData = inject('genInfoData') as Ref<GenInfo>;
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const requestData = unref(genInfoData).info;
|
||||
// 树表需要添加这个参数
|
||||
if (requestData && requestData.tplCategory === 'tree') {
|
||||
const { treeCode, treeName, treeParentCode } = requestData;
|
||||
requestData.params = {
|
||||
treeCode,
|
||||
treeName,
|
||||
treeParentCode,
|
||||
};
|
||||
}
|
||||
// 需要进行参数转化
|
||||
if (requestData) {
|
||||
const transform = (ret: boolean) => (ret ? '1' : '0');
|
||||
requestData.columns.forEach((column) => {
|
||||
const { edit, insert, query, required, list } = column;
|
||||
column.isInsert = transform(insert);
|
||||
column.isEdit = transform(edit);
|
||||
column.isList = transform(list);
|
||||
column.isQuery = transform(query);
|
||||
column.isRequired = transform(required);
|
||||
});
|
||||
// 需要手动添加父级菜单
|
||||
requestData.params = {
|
||||
...requestData.params,
|
||||
parentMenuId: requestData.parentMenuId,
|
||||
};
|
||||
}
|
||||
await editSave(requestData);
|
||||
// 跳转到成功页面
|
||||
toCurrentStep(2);
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-[16px] p-[12px]">
|
||||
<Table />
|
||||
<div class="flex justify-center">
|
||||
<Space>
|
||||
<a-button @click="toCurrentStep(0)">上一步</a-button>
|
||||
<a-button type="primary" @click="handleSubmit">下一步</a-button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
1
apps/web-antd/src/views/tool/gen/edit-steps/gen-data.tsx
Normal file
1
apps/web-antd/src/views/tool/gen/edit-steps/gen-data.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export const a = 1;
|
||||
25
apps/web-antd/src/views/tool/gen/edit-steps/gen-success.vue
Normal file
25
apps/web-antd/src/views/tool/gen/edit-steps/gen-success.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { useTabs } from '@vben/hooks';
|
||||
|
||||
import { Result } from 'ant-design-vue';
|
||||
|
||||
const { closeCurrentTab } = useTabs();
|
||||
|
||||
const router = useRouter();
|
||||
async function handleClose() {
|
||||
await closeCurrentTab();
|
||||
router.push({ path: '/tool/gen', replace: true });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Result status="success" title="修改成功">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="handleClose"> 关闭 </a-button>
|
||||
</template>
|
||||
</Result>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
3
apps/web-antd/src/views/tool/gen/edit-steps/index.ts
Normal file
3
apps/web-antd/src/views/tool/gen/edit-steps/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { default as BasicSetting } from './basic-setting.vue';
|
||||
export { default as GenConfig } from './gen-config.vue';
|
||||
export { default as GenSuccess } from './gen-success.vue';
|
||||
15
apps/web-antd/src/views/tool/gen/mitt.ts
Normal file
15
apps/web-antd/src/views/tool/gen/mitt.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { mitt } from '@vben/utils';
|
||||
|
||||
type Events = {
|
||||
to: number;
|
||||
};
|
||||
|
||||
export const emitter = mitt<Events>();
|
||||
|
||||
/**
|
||||
* 跳转到指定步骤
|
||||
* @param step 步骤
|
||||
*/
|
||||
export function toCurrentStep(step: number) {
|
||||
emitter.emit('to', step);
|
||||
}
|
||||
Reference in New Issue
Block a user