| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <Dialog v-model="dialogVisible" title="导入表" width="800px"> |
| 3 | <!-- 搜索栏 --> | |
| 4 | <el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px"> | |
| 5 | <el-form-item label="数据源" prop="dataSourceConfigId"> | |
| 6 | <el-select | |
| 7 | v-model="queryParams.dataSourceConfigId" | |
| 8 | class="!w-240px" | |
| 9 | placeholder="请选择数据源" | |
| 10 | > | |
| 11 | <el-option | |
| 12 | v-for="config in dataSourceConfigList" | |
| 13 | :key="config.id" | |
| 14 | :label="config.name" | |
| 15 | :value="config.id" | |
| 16 | /> | |
| 17 | </el-select> | |
| 18 | </el-form-item> | |
| 19 | <el-form-item label="表名称" prop="name"> | |
| 20 | <el-input | |
| 21 | v-model="queryParams.name" | |
| 22 | class="!w-240px" | |
| 23 | clearable | |
| 24 | placeholder="请输入表名称" | |
| 25 | @keyup.enter="getList" | |
| 26 | /> | |
| 27 | </el-form-item> | |
| 28 | <el-form-item label="表描述" prop="comment"> | |
| 29 | <el-input | |
| 30 | v-model="queryParams.comment" | |
| 31 | class="!w-240px" | |
| 32 | clearable | |
| 33 | placeholder="请输入表描述" | |
| 34 | @keyup.enter="getList" | |
| 35 | /> | |
| 36 | </el-form-item> | |
| 37 | <el-form-item> | |
| 38 | <el-button @click="getList"> | |
| 39 | <Icon class="mr-5px" icon="ep:search" /> | |
| 40 | 搜索 | |
| 41 | </el-button> | |
| 42 | <el-button @click="resetQuery"> | |
| 43 | <Icon class="mr-5px" icon="ep:refresh" /> | |
| 44 | 重置 | |
| 45 | </el-button> | |
| 46 | </el-form-item> | |
| 47 | </el-form> | |
| 48 | <!-- 列表 --> | |
| 49 | <el-row> | |
| 50 | <el-table | |
| 51 | ref="tableRef" | |
| 52 | v-loading="dbTableLoading" | |
| 53 | :data="dbTableList" | |
| 54 | height="260px" | |
| 55 | @row-click="handleRowClick" | |
| 56 | @selection-change="handleSelectionChange" | |
| 57 | > | |
| 58 | <el-table-column type="selection" width="55" /> | |
| 59 | <el-table-column :show-overflow-tooltip="true" label="表名称" prop="name" /> | |
| 60 | <el-table-column :show-overflow-tooltip="true" label="表描述" prop="comment" /> | |
| 61 | </el-table> | |
| 62 | </el-row> | |
| 63 | <!-- 操作 --> | |
| 64 | <template #footer> | |
| 65 | <el-button :disabled="tableList.length === 0" type="primary" @click="handleImportTable"> | |
| 66 | 导入 | |
| 67 | </el-button> | |
| 68 | <el-button @click="close">关闭</el-button> | |
| 69 | </template> | |
| 70 | </Dialog> | |
| 71 | </template> | |
| 72 | <script lang="ts" setup> | |
| 73 | import * as CodegenApi from '@/api/infra/codegen' | |
| 74 | import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig' | |
| 75 | import { ElTable } from 'element-plus' | |
| 76 | ||
| 77 | defineOptions({ name: 'InfraCodegenImportTable' }) | |
| 78 | ||
| 79 | const message = useMessage() // 消息弹窗 | |
| 80 | ||
| 81 | const dialogVisible = ref(false) // 弹窗的是否展示 | |
| 82 | const dbTableLoading = ref(true) // 数据源的加载中 | |
| 83 | const dbTableList = ref<CodegenApi.DatabaseTableVO[]>([]) // 表的列表 | |
| 84 | const queryParams = reactive({ | |
| 85 | name: undefined, | |
| 86 | comment: undefined, | |
| 87 | dataSourceConfigId: 0 | |
| 88 | }) | |
| 89 | const queryFormRef = ref() // 搜索的表单 | |
| 90 | const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表 | |
| 91 | ||
| 92 | /** 查询表数据 */ | |
| 93 | const getList = async () => { | |
| 94 | dbTableLoading.value = true | |
| 95 | try { | |
| 96 | dbTableList.value = await CodegenApi.getSchemaTableList(queryParams) | |
| 97 | } finally { | |
| 98 | dbTableLoading.value = false | |
| 99 | } | |
| 100 | } | |
| 101 | ||
| 102 | /** 重置操作 */ | |
| 103 | const resetQuery = async () => { | |
| 104 | queryParams.name = undefined | |
| 105 | queryParams.comment = undefined | |
| 106 | queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number | |
| 107 | await getList() | |
| 108 | } | |
| 109 | ||
| 110 | /** 打开弹窗 */ | |
| 111 | const open = async () => { | |
| 112 | // 加载数据源的列表 | |
| 113 | dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList() | |
| 114 | queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number | |
| 115 | dialogVisible.value = true | |
| 116 | // 加载表的列表 | |
| 117 | await getList() | |
| 118 | } | |
| 119 | defineExpose({ open }) // 提供 open 方法，用于打开弹窗 | |
| 120 | ||
| 121 | /** 关闭弹窗 */ | |
| 122 | const close = () => { | |
| 123 | dialogVisible.value = false | |
| 124 | tableList.value = [] | |
| 125 | } | |
| 126 | ||
| 127 | const tableRef = ref<typeof ElTable>() // 表格的 Ref | |
| 128 | const tableList = ref<string[]>([]) // 选中的表名 | |
| 129 | ||
| 130 | /** 处理某一行的点击 */ | |
| 131 | const handleRowClick = (row) => { | |
| 132 | unref(tableRef)?.toggleRowSelection(row) | |
| 133 | } | |
| 134 | ||
| 135 | /** 多选框选中数据 */ | |
| 136 | const handleSelectionChange = (selection) => { | |
| 137 | tableList.value = selection.map((item) => item.name) | |
| 138 | } | |
| 139 | ||
| 140 | /** 导入按钮操作 */ | |
| 141 | const handleImportTable = async () => { | |
| 142 | await CodegenApi.createCodegenList({ | |
| 143 | dataSourceConfigId: queryParams.dataSourceConfigId, | |
| 144 | tableNames: tableList.value | |
| 145 | }) | |
| 146 | message.success('导入成功') | |
| 147 | emit('success') | |
| 148 | close() | |
| 149 | } | |
| 150 | const emit = defineEmits(['success']) | |
| 151 | </script> | |
