115 lines
2.6 KiB
Vue
115 lines
2.6 KiB
Vue
<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 {
|
|
type CodegenApi,
|
|
createCodegenList,
|
|
getSchemaTableList,
|
|
} from '#/api/infra/codegen';
|
|
|
|
import { CodegenImportTableModalData } from '../codegen.data';
|
|
|
|
const confirmLoading = ref<boolean>(false);
|
|
|
|
// checked
|
|
const checkedStatus = ref<boolean>(false);
|
|
const checkedRecords = ref<any[]>([]);
|
|
/**
|
|
* 表格查询表单配置
|
|
*/
|
|
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, $grid } = params;
|
|
checkedStatus.value = checked;
|
|
checkedRecords.value = $grid.getCheckboxRecords();
|
|
},
|
|
checkboxAll: (params) => {
|
|
const { checked } = params;
|
|
checkedStatus.value = checked;
|
|
},
|
|
} as VxeGridListeners);
|
|
|
|
// 使用表格组件
|
|
const [Grid, gridApi] = useVbenVxeGrid(
|
|
reactive({
|
|
formOptions,
|
|
gridOptions,
|
|
gridEvents,
|
|
}),
|
|
);
|
|
|
|
const [Modal, modalApi] = useVbenModal({
|
|
class: 'w-[800px] h-[800px]',
|
|
confirmLoading: confirmLoading.value,
|
|
closeOnClickModal: false,
|
|
closeOnPressEscape: false,
|
|
onOpened: async () => {
|
|
gridApi.reload(await gridApi.formApi.getValues());
|
|
},
|
|
onConfirm: async () => {
|
|
modalApi.setState({ confirmLoading: true });
|
|
const formValues = await gridApi.formApi.getValues();
|
|
// 获取选中的数据
|
|
const checkedRecords =
|
|
gridApi.grid.getCheckboxRecords() as CodegenApi.DatabaseTableRespVO[];
|
|
try {
|
|
await createCodegenList({
|
|
dataSourceConfigId: formValues.dataSourceConfigId,
|
|
tableNames: checkedRecords.map((item) => item.name),
|
|
});
|
|
} finally {
|
|
modalApi.setState({ confirmLoading: false });
|
|
}
|
|
modalApi.close();
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Modal>
|
|
<Grid />
|
|
</Modal>
|
|
</template>
|