feat: 新增代码生成管理接口及视图模块
chenminjie
parent
23bcf4f61b
commit
1fa93dd5db
|
|
@ -0,0 +1,312 @@
|
|||
import { type PageParam, requestClient } from '#/api/request';
|
||||
|
||||
export namespace CodegenApi {
|
||||
/**
|
||||
* 代码生成字段定义 Response VO
|
||||
*/
|
||||
export interface CodegenColumnRespVO {
|
||||
/** 编号 */
|
||||
id: number;
|
||||
/** 表编号 */
|
||||
tableId: number;
|
||||
/** 字段名 */
|
||||
columnName: string;
|
||||
/** 字段类型 */
|
||||
dataType: string;
|
||||
/** 字段描述 */
|
||||
columnComment: string;
|
||||
/** 是否允许为空 */
|
||||
nullable: boolean;
|
||||
/** 是否主键 */
|
||||
primaryKey: boolean;
|
||||
/** 排序 */
|
||||
ordinalPosition: number;
|
||||
/** Java 属性类型 */
|
||||
javaType: string;
|
||||
/** Java 属性名 */
|
||||
javaField: string;
|
||||
/** 字典类型 */
|
||||
dictType?: string;
|
||||
/** 数据示例 */
|
||||
example?: string;
|
||||
/** 是否为 Create 创建操作的字段 */
|
||||
createOperation: boolean;
|
||||
/** 是否为 Update 更新操作的字段 */
|
||||
updateOperation: boolean;
|
||||
/** 是否为 List 查询操作的字段 */
|
||||
listOperation: boolean;
|
||||
/** List 查询操作的条件类型 */
|
||||
listOperationCondition: string;
|
||||
/** 是否为 List 查询操作的返回字段 */
|
||||
listOperationResult: boolean;
|
||||
/** 显示类型 */
|
||||
htmlType: string;
|
||||
/** 创建时间 */
|
||||
createTime: string; // 假设为 ISO 字符串格式的 LocalDateTime
|
||||
}
|
||||
|
||||
/**
|
||||
* 代码生成字段定义创建/修改 Request VO
|
||||
*/
|
||||
export interface CodegenColumnSaveReqVO {
|
||||
/** 编号 */
|
||||
id: number;
|
||||
/** 表编号 */
|
||||
tableId: number;
|
||||
/** 字段名 */
|
||||
columnName: string;
|
||||
/** 字段类型 */
|
||||
dataType: string;
|
||||
/** 字段描述 */
|
||||
columnComment: string;
|
||||
/** 是否允许为空 */
|
||||
nullable: boolean;
|
||||
/** 是否主键 */
|
||||
primaryKey: boolean;
|
||||
/** 排序 */
|
||||
ordinalPosition: number;
|
||||
/** Java 属性类型 */
|
||||
javaType: string;
|
||||
/** Java 属性名 */
|
||||
javaField: string;
|
||||
/** 字典类型 */
|
||||
dictType?: string;
|
||||
/** 数据示例 */
|
||||
example?: string;
|
||||
/** 是否为 Create 创建操作的字段 */
|
||||
createOperation: boolean;
|
||||
/** 是否为 Update 更新操作的字段 */
|
||||
updateOperation: boolean;
|
||||
/** 是否为 List 查询操作的字段 */
|
||||
listOperation: boolean;
|
||||
/** List 查询操作的条件类型 */
|
||||
listOperationCondition: string;
|
||||
/** 是否为 List 查询操作的返回字段 */
|
||||
listOperationResult: boolean;
|
||||
/** 显示类型 */
|
||||
htmlType: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 表定义分页 Request VO
|
||||
*/
|
||||
export interface CodegenTablePageReqVO {
|
||||
/** 表名称，模糊匹配 */
|
||||
tableName?: string;
|
||||
/** 表描述，模糊匹配 */
|
||||
tableComment?: string;
|
||||
/** 实体，模糊匹配 */
|
||||
className?: string;
|
||||
/** 创建时间 */
|
||||
createTime?: [string, string]; // 假设为 ISO 字符串格式的 LocalDateTime
|
||||
}
|
||||
|
||||
/**
|
||||
* 代码生成表定义 Response VO
|
||||
*/
|
||||
export interface CodegenTableRespVO {
|
||||
/** 编号 */
|
||||
id: number;
|
||||
/** 生成场景 */
|
||||
scene: number;
|
||||
/** 表名称 */
|
||||
tableName: string;
|
||||
/** 表描述 */
|
||||
tableComment: string;
|
||||
/** 备注 */
|
||||
remark?: string;
|
||||
/** 模块名 */
|
||||
moduleName: string;
|
||||
/** 业务名 */
|
||||
businessName: string;
|
||||
/** 类名称 */
|
||||
className: string;
|
||||
/** 类描述 */
|
||||
classComment: string;
|
||||
/** 作者 */
|
||||
author: string;
|
||||
/** 模板类型 */
|
||||
templateType: number;
|
||||
/** 前端类型 */
|
||||
frontType: number;
|
||||
/** 父菜单编号 */
|
||||
parentMenuId?: number;
|
||||
/** 主表的编号 */
|
||||
masterTableId?: number;
|
||||
/** 子表关联主表的字段编号 */
|
||||
subJoinColumnId?: number;
|
||||
/** 主表与子表是否一对多 */
|
||||
subJoinMany?: boolean;
|
||||
/** 树表的父字段编号 */
|
||||
treeParentColumnId?: number;
|
||||
/** 树表的名字字段编号 */
|
||||
treeNameColumnId?: number;
|
||||
/** 主键编号 */
|
||||
dataSourceConfigId: number;
|
||||
/** 创建时间 */
|
||||
createTime: string; // 假设为 ISO 字符串格式的 LocalDateTime
|
||||
/** 更新时间 */
|
||||
updateTime: string; // 假设为 ISO 字符串格式的 LocalDateTime
|
||||
}
|
||||
|
||||
/**
|
||||
* 代码生成表定义创建/修改 Response VO
|
||||
*/
|
||||
export interface CodegenTableSaveReqVO {
|
||||
/** 编号 */
|
||||
id: number;
|
||||
/** 生成场景 */
|
||||
scene: number;
|
||||
/** 表名称 */
|
||||
tableName: string;
|
||||
/** 表描述 */
|
||||
tableComment: string;
|
||||
/** 备注 */
|
||||
remark?: string;
|
||||
/** 模块名 */
|
||||
moduleName: string;
|
||||
/** 业务名 */
|
||||
businessName: string;
|
||||
/** 类名称 */
|
||||
className: string;
|
||||
/** 类描述 */
|
||||
classComment: string;
|
||||
/** 作者 */
|
||||
author: string;
|
||||
/** 模板类型 */
|
||||
templateType: number;
|
||||
/** 前端类型 */
|
||||
frontType: number;
|
||||
/** 父菜单编号 */
|
||||
parentMenuId?: number;
|
||||
/** 主表的编号 */
|
||||
masterTableId?: number;
|
||||
/** 子表关联主表的字段编号 */
|
||||
subJoinColumnId?: number;
|
||||
/** 主表与子表是否一对多 */
|
||||
subJoinMany?: boolean;
|
||||
/** 树表的父字段编号 */
|
||||
treeParentColumnId?: number;
|
||||
/** 树表的名字字段编号 */
|
||||
treeNameColumnId?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据库的表定义 Response VO
|
||||
*/
|
||||
export interface DatabaseTableRespVO {
|
||||
/** 表名称 */
|
||||
name: string;
|
||||
/** 表描述 */
|
||||
comment: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 基于数据库的表结构，创建代码生成器的表和字段定义 Request VO
|
||||
*/
|
||||
export interface CodegenCreateListReqVO {
|
||||
/** 数据源配置的编号 */
|
||||
dataSourceConfigId: number;
|
||||
/** 表名数组 */
|
||||
tableNames: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 代码生成表和字段的明细 Response VO
|
||||
*/
|
||||
export interface CodegenDetailRespVO {
|
||||
/** 表定义 */
|
||||
table: CodegenTableRespVO;
|
||||
/** 字段定义 */
|
||||
columns: CodegenColumnRespVO[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 代码生成预览 Response VO
|
||||
*/
|
||||
export interface CodegenPreviewRespVO {
|
||||
/** 文件路径 */
|
||||
filePath: string;
|
||||
/** 代码 */
|
||||
code: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 代码生成表和字段的修改 Request VO
|
||||
*/
|
||||
export interface CodegenUpdateReqVO {
|
||||
/** 表定义 */
|
||||
table: CodegenTableSaveReqVO;
|
||||
/** 字段定义 */
|
||||
columns: CodegenColumnSaveReqVO[];
|
||||
}
|
||||
}
|
||||
|
||||
// 查询列表代码生成表定义
|
||||
export const getCodegenTableList = (dataSourceConfigId: number) => {
|
||||
return requestClient.get<CodegenApi.CodegenTableRespVO[]>(
|
||||
`/infra/codegen/table/list?dataSourceConfigId=${dataSourceConfigId}`,
|
||||
);
|
||||
};
|
||||
|
||||
// 查询列表代码生成表定义
|
||||
export const getCodegenTablePage = (params: PageParam) => {
|
||||
return requestClient.get<CodegenApi.CodegenTableRespVO[]>(
|
||||
'/infra/codegen/table/page',
|
||||
{ params },
|
||||
);
|
||||
};
|
||||
|
||||
// 查询详情代码生成表定义
|
||||
export const getCodegenTable = (id: number) => {
|
||||
return requestClient.get<CodegenApi.CodegenDetailRespVO>(
|
||||
`/infra/codegen/detail?tableId=${id}`,
|
||||
);
|
||||
};
|
||||
|
||||
// 新增代码生成表定义
|
||||
export const createCodegenTable = (data: CodegenApi.CodegenCreateListReqVO) => {
|
||||
return requestClient.post('/infra/codegen/create', data);
|
||||
};
|
||||
|
||||
// 修改代码生成表定义
|
||||
export const updateCodegenTable = (data: CodegenApi.CodegenUpdateReqVO) => {
|
||||
return requestClient.put('/infra/codegen/update', data);
|
||||
};
|
||||
|
||||
// 基于数据库的表结构，同步数据库的表和字段定义
|
||||
export const syncCodegenFromDB = (id: number) => {
|
||||
return requestClient.put(`/infra/codegen/sync-from-db?tableId=${id}`);
|
||||
};
|
||||
|
||||
// 预览生成代码
|
||||
export const previewCodegen = (id: number) => {
|
||||
return requestClient.get(`/infra/codegen/preview?tableId=${id}`);
|
||||
};
|
||||
|
||||
// 下载生成代码
|
||||
export const downloadCodegen = (id: number) => {
|
||||
return requestClient.download(`/infra/codegen/download?tableId=${id}`);
|
||||
};
|
||||
|
||||
// 获得表定义
|
||||
export const getSchemaTableList = (params: {
|
||||
comment?: string;
|
||||
dataSourceConfigId: number;
|
||||
name?: string;
|
||||
}) => {
|
||||
return requestClient.get<CodegenApi.DatabaseTableRespVO[]>(
|
||||
'/infra/codegen/db/table/list',
|
||||
{ params },
|
||||
);
|
||||
};
|
||||
|
||||
// 基于数据库的表结构，创建代码生成器的表定义
|
||||
export const createCodegenList = (data: CodegenApi.CodegenCreateListReqVO) => {
|
||||
return requestClient.post('/infra/codegen/create-list', data);
|
||||
};
|
||||
|
||||
// 删除代码生成表定义
|
||||
export const deleteCodegenTable = (id: number) => {
|
||||
return requestClient.delete(`/infra/codegen/delete?tableId=${id}`);
|
||||
};
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace DataSourceConfigApi {
|
||||
export interface DataSourceConfigRespVO {
|
||||
id: number;
|
||||
name: string;
|
||||
url: string;
|
||||
username: string;
|
||||
createTime?: Date;
|
||||
}
|
||||
|
||||
export interface DataSourceConfigSaveReqVO {
|
||||
id?: number;
|
||||
name: string;
|
||||
url: string;
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
}
|
||||
// 新增数据源配置
|
||||
export const createDataSourceConfig = (
|
||||
data: DataSourceConfigApi.DataSourceConfigSaveReqVO,
|
||||
) => {
|
||||
return requestClient.post('/infra/data-source-config/create', data);
|
||||
};
|
||||
|
||||
// 修改数据源配置
|
||||
export const updateDataSourceConfig = (
|
||||
data: DataSourceConfigApi.DataSourceConfigSaveReqVO,
|
||||
) => {
|
||||
return requestClient.put('/infra/data-source-config/update', data);
|
||||
};
|
||||
|
||||
// 删除数据源配置
|
||||
export const deleteDataSourceConfig = (id: number) => {
|
||||
return requestClient.delete(`/infra/data-source-config/delete?id=${id}`);
|
||||
};
|
||||
|
||||
// 查询数据源配置详情
|
||||
export const getDataSourceConfig = (id: number) => {
|
||||
return requestClient.get<DataSourceConfigApi.DataSourceConfigRespVO>(
|
||||
`/infra/data-source-config/get?id=${id}`,
|
||||
);
|
||||
};
|
||||
|
||||
// 查询数据源配置列表
|
||||
export const getDataSourceConfigList = () => {
|
||||
return requestClient.get<DataSourceConfigApi.DataSourceConfigRespVO[]>(
|
||||
'/infra/data-source-config/list',
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import type { VbenFormProps } from '@vben/common-ui';
|
||||
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { CodegenApi } from '#/api/infra/codegen';
|
||||
|
||||
export namespace CodegenDefaultData {
|
||||
/**
|
||||
* 代码生成字段定义 表格配置
|
||||
*/
|
||||
export const tableColumns: VxeGridProps<CodegenApi.CodegenTableRespVO>['columns'] =
|
||||
[
|
||||
{
|
||||
type: 'checkbox',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
type: 'seq',
|
||||
width: 50,
|
||||
},
|
||||
{ field: 'id', title: '编号', width: 100 },
|
||||
{ field: 'tableName', title: '表名' },
|
||||
{ field: 'tableComment', title: '表描述' },
|
||||
{ field: 'className', title: '实体类名' },
|
||||
{ field: 'createTime', title: '创建时间', formatter: 'formatDateTime' },
|
||||
{ field: 'updateTime', title: '更新时间', formatter: 'formatDateTime' },
|
||||
{
|
||||
title: '操作',
|
||||
width: 'auto',
|
||||
fixed: 'right',
|
||||
slots: { default: 'action' },
|
||||
},
|
||||
];
|
||||
/**
|
||||
* 代码生成表定义 表格查询表单配置
|
||||
*/
|
||||
export const formSchema: VbenFormProps['schema'] = [
|
||||
{
|
||||
label: '表名称',
|
||||
fieldName: 'tableName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '表描述',
|
||||
fieldName: 'tableComment',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
fieldName: 'createTime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'daterange',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
//* ****************************** ImportTableModal.vue *******************************//
|
||||
|
||||
export namespace CodegenImportTableModalData {
|
||||
/**
|
||||
* 导入表 表格配置
|
||||
*/
|
||||
export const tableColumns: VxeGridProps<CodegenApi.DatabaseTableRespVO>['columns'] =
|
||||
[
|
||||
{ type: 'checkbox', width: 50 },
|
||||
{ type: 'seq', title: '序号', width: 50 },
|
||||
{ field: 'name', title: '表名' },
|
||||
{ field: 'comment', title: '表描述' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 导入表 表格查询表单配置
|
||||
*/
|
||||
export const formSchema: VbenFormProps['schema'] = [
|
||||
{
|
||||
label: '数据源',
|
||||
fieldName: 'dataSourceConfigId',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择数据源',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '表名称',
|
||||
fieldName: 'name',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '表描述',
|
||||
fieldName: 'comment',
|
||||
component: 'Input',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import { useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
type VxeGridListeners,
|
||||
type VxeGridProps,
|
||||
} from '@vben/plugins/vxe-table';
|
||||
|
||||
import { getSchemaTableList } from '#/api/infra/codegen';
|
||||
import {
|
||||
type DataSourceConfigApi,
|
||||
getDataSourceConfigList,
|
||||
} from '#/api/infra/data-source-config';
|
||||
|
||||
import { CodegenImportTableModalData } from '../codegen.data';
|
||||
|
||||
// checked
|
||||
const checkedStatus = ref<boolean>(false);
|
||||
|
||||
const dataSourceConfigList =
|
||||
ref<DataSourceConfigApi.DataSourceConfigRespVO[]>();
|
||||
|
||||
/**
|
||||
* 表格查询表单配置
|
||||
*/
|
||||
const formOptions = reactive<any>({
|
||||
// 默认展开
|
||||
collapsed: false,
|
||||
schema: CodegenImportTableModalData.formSchema,
|
||||
// 控制表单是否显示折叠按钮
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: '查询',
|
||||
},
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
} as VbenFormProps);
|
||||
|
||||
/**
|
||||
* 表格配置
|
||||
*/
|
||||
const gridOptions = reactive<any>({
|
||||
columns: CodegenImportTableModalData.tableColumns,
|
||||
toolbarConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
height: 'auto',
|
||||
proxyConfig: {
|
||||
autoLoad: false,
|
||||
ajax: {
|
||||
query: async (_, values) => {
|
||||
return await getSchemaTableList(values);
|
||||
},
|
||||
},
|
||||
},
|
||||
pagerConfig: {
|
||||
enabled: false,
|
||||
},
|
||||
} as VxeGridProps);
|
||||
|
||||
const gridEvents = reactive<any>({
|
||||
checkboxChange: (params) => {
|
||||
const { checked } = params;
|
||||
checkedStatus.value = checked;
|
||||
},
|
||||
checkboxAll: (params) => {
|
||||
const { checked } = params;
|
||||
checkedStatus.value = checked;
|
||||
},
|
||||
} as VxeGridListeners);
|
||||
|
||||
// 使用表格组件
|
||||
const [Grid, gridApi] = useVbenVxeGrid(
|
||||
reactive({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
gridEvents,
|
||||
}),
|
||||
);
|
||||
|
||||
const [Modal] = useVbenModal({
|
||||
class: 'w-[800px] h-[800px]',
|
||||
onOpenChange: async (isOpen) => {
|
||||
if (isOpen) {
|
||||
// 获取数据源配置列表
|
||||
dataSourceConfigList.value = await getDataSourceConfigList();
|
||||
// 设置下拉框
|
||||
gridApi.formApi.updateSchema([
|
||||
{
|
||||
fieldName: 'dataSourceConfigId',
|
||||
componentProps: {
|
||||
options: dataSourceConfigList.value?.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
},
|
||||
},
|
||||
]);
|
||||
// 设置默认值
|
||||
gridApi.formApi.setFieldValue(
|
||||
'dataSourceConfigId',
|
||||
dataSourceConfigList.value?.[0]?.id,
|
||||
);
|
||||
|
||||
// 加载表格数据
|
||||
gridApi.reload(await gridApi.formApi.getValues());
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal>
|
||||
<Grid />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, reactive, ref } from 'vue';
|
||||
|
||||
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
type VxeGridListeners,
|
||||
type VxeGridProps,
|
||||
} from '#/adapter/vxe-table';
|
||||
import { type CodegenApi, getCodegenTablePage } from '#/api/infra/codegen';
|
||||
|
||||
import { CodegenDefaultData } from './codegen.data';
|
||||
|
||||
// 使用导入表弹窗组件
|
||||
const [ImportTableModal, importTableModalApi] = useVbenModal({
|
||||
connectedComponent: defineAsyncComponent(
|
||||
() => import('./components/import-table-modal.vue'),
|
||||
),
|
||||
});
|
||||
|
||||
// checked
|
||||
const checkedStatus = ref<boolean>(false);
|
||||
|
||||
/**
|
||||
* 查看详情
|
||||
*/
|
||||
const handleView = (_row: CodegenApi.CodegenTableRespVO) => {
|
||||
// console.log('查看详情', row);
|
||||
};
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
const handleEdit = (_row: CodegenApi.CodegenTableRespVO) => {
|
||||
// console.log('编辑', row);
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
const handleDelete = (_row: CodegenApi.CodegenTableRespVO) => {
|
||||
// console.log('删除', row);
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量删除
|
||||
*/
|
||||
const handleBatchDelete = (_rows: CodegenApi.CodegenTableRespVO[]) => {
|
||||
// console.log('批量删除', rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* 导入表
|
||||
*/
|
||||
const handleImportTable = () => {
|
||||
// console.log('导入表', importTableModalApi);
|
||||
importTableModalApi.open();
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步
|
||||
*/
|
||||
const handleSync = (_row: CodegenApi.CodegenTableRespVO) => {
|
||||
// console.log('同步', row);
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量同步
|
||||
*/
|
||||
const handleBatchSync = (_rows: CodegenApi.CodegenTableRespVO[]) => {
|
||||
// console.log('批量同步', rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成代码
|
||||
*/
|
||||
const handleGenerateCode = (_row: CodegenApi.CodegenTableRespVO) => {
|
||||
// console.log('生成代码', row);
|
||||
};
|
||||
|
||||
/**
|
||||
* 批量生成代码
|
||||
*/
|
||||
const handleBatchGenerateCode = (_rows: CodegenApi.CodegenTableRespVO[]) => {
|
||||
// console.log('批量生成代码', rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* 表格查询表单配置
|
||||
*/
|
||||
const formOptions = reactive<any>({
|
||||
// 默认展开
|
||||
collapsed: false,
|
||||
schema: CodegenDefaultData.formSchema,
|
||||
// 控制表单是否显示折叠按钮
|
||||
showCollapseButton: true,
|
||||
submitButtonOptions: {
|
||||
content: '查询',
|
||||
},
|
||||
// 按下回车时是否提交表单
|
||||
submitOnEnter: false,
|
||||
} as VbenFormProps);
|
||||
|
||||
/**
|
||||
* 表格配置
|
||||
*/
|
||||
const gridOptions = reactive<any>({
|
||||
columns: CodegenDefaultData.tableColumns,
|
||||
toolbarConfig: {
|
||||
slots: {
|
||||
buttons: 'toolbar_buttons',
|
||||
},
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, params) => {
|
||||
const data = await getCodegenTablePage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
...params,
|
||||
});
|
||||
return data;
|
||||
},
|
||||
},
|
||||
},
|
||||
} as VxeGridProps);
|
||||
|
||||
const gridEvents = reactive<any>({
|
||||
checkboxChange: (params) => {
|
||||
const { checked } = params;
|
||||
checkedStatus.value = checked;
|
||||
},
|
||||
checkboxAll: (params) => {
|
||||
const { checked } = params;
|
||||
checkedStatus.value = checked;
|
||||
},
|
||||
} as VxeGridListeners);
|
||||
|
||||
// 使用表格组件
|
||||
const [Grid] = useVbenVxeGrid({
|
||||
formOptions,
|
||||
gridOptions,
|
||||
gridEvents,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid>
|
||||
<template #toolbar_buttons="{ $grid }">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button type="primary" @click="handleImportTable">导入表</Button>
|
||||
<Button
|
||||
:disabled="!checkedStatus"
|
||||
type="primary"
|
||||
@click="handleBatchSync($grid.getCheckboxRecords())"
|
||||
>
|
||||
批量同步
|
||||
</Button>
|
||||
<Button
|
||||
:disabled="!checkedStatus"
|
||||
type="primary"
|
||||
@click="handleBatchGenerateCode($grid.getCheckboxRecords())"
|
||||
>
|
||||
批量生成
|
||||
</Button>
|
||||
<Button
|
||||
:disabled="!checkedStatus"
|
||||
danger
|
||||
type="primary"
|
||||
@click="handleBatchDelete($grid.getCheckboxRecords())"
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<div class="flex w-fit items-center justify-around">
|
||||
<Button type="link" @click="handleView(row)">查看</Button>
|
||||
<Button type="link" @click="handleEdit(row)">编辑</Button>
|
||||
<Button type="link" @click="handleSync(row)">同步</Button>
|
||||
<Button type="link" @click="handleGenerateCode(row)">
|
||||
生成代码
|
||||
</Button>
|
||||
<Button danger type="link" @click="handleDelete(row)">删除</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Grid>
|
||||
<ImportTableModal />
|
||||
</Page>
|
||||
</template>
|
||||
Loading…
Reference in New Issue