REVIEW 代码生成(ImportTable)

This commit is contained in:
YunaiV 2023-03-29 15:07:50 +08:00
parent d5f3f0add1
commit b1e74a1d05
4 changed files with 73 additions and 65 deletions

View File

@ -1,10 +1,15 @@
<template>
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form :model="queryParams" ref="queryFormRef" :inline="true">
<Dialog title="导入表" v-model="modelVisible" width="800px">
<!-- 搜索栏 -->
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="数据源" prop="dataSourceConfigId">
<el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源">
<el-select
v-model="queryParams.dataSourceConfigId"
placeholder="请选择数据源"
class="!w-240px"
>
<el-option
v-for="config in dataSourceConfigs"
v-for="config in dataSourceConfigList"
:key="config.id"
:label="config.name"
:value="config.id"
@ -16,7 +21,8 @@
v-model="queryParams.name"
placeholder="请输入表名称"
clearable
@keyup.enter="handleQuery"
@keyup.enter="getList"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="表描述" prop="comment">
@ -24,19 +30,20 @@
v-model="queryParams.comment"
placeholder="请输入表描述"
clearable
@keyup.enter="handleQuery"
@keyup.enter="getList"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="getList"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
</el-form-item>
</el-form>
<!-- 列表 -->
<el-row>
<el-table
v-loading="dbLoading"
@row-click="clickRow"
v-loading="dbTableLoading"
@row-click="handleRowClick"
ref="tableRef"
:data="dbTableList"
@selection-change="handleSelectionChange"
@ -47,87 +54,89 @@
<el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
</el-table>
</el-row>
<!-- 操作 -->
<template #footer>
<div class="dialog-footer">
<el-button @click="handleImportTable" type="primary" :disabled="tables.length === 0">{{
t('action.import')
}}</el-button>
<el-button @click="handleClose">{{ t('dialog.close') }}</el-button>
</div>
<el-button @click="handleImportTable" type="primary" :disabled="tableList.length === 0">
导入
</el-button>
<el-button @click="close">关闭</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import type { DatabaseTableVO } from '@/api/infra/codegen/types'
import * as CodegenApi from '@/api/infra/codegen'
import { getDataSourceConfigList, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
import { ElTable } from 'element-plus'
const { t } = useI18n() //
const message = useMessage() //
const emit = defineEmits(['ok'])
const modelVisible = ref(false) //
const modelTitle = ref('导入表') //
const dbLoading = ref(true)
const dbTableLoading = ref(true) //
const dbTableList = ref<CodegenApi.DatabaseTableVO[]>([]) //
const queryParams = reactive({
name: undefined,
comment: undefined,
dataSourceConfigId: 0
})
const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
const show = async () => {
dataSourceConfigs.value = await getDataSourceConfigList()
queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
modelVisible.value = true
await getList()
}
/** 查询表数据 */
const dbTableList = ref<DatabaseTableVO[]>([])
const queryFormRef = ref() //
const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) //
/** 查询表数据 */
const getList = async () => {
dbLoading.value = true
dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
dbLoading.value = false
dbTableLoading.value = true
try {
dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
} finally {
dbTableLoading.value = false
}
}
//
const handleQuery = async () => {
await getList()
}
//
/** 重置操作 */
const resetQuery = async () => {
queryParams.name = undefined
queryParams.comment = undefined
queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
await getList()
}
const tableRef = ref<typeof ElTable>()
/** 多选框选中数据 */
const tables = ref<string[]>([])
const clickRow = (row) => {
/** 打开弹窗 */
const open = async () => {
//
dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
modelVisible.value = true
//
await getList()
}
defineExpose({ open }) // open
/** 关闭弹窗 */
const close = () => {
modelVisible.value = false
tableList.value = []
}
const tableRef = ref<typeof ElTable>() // Ref
const tableList = ref<string[]>([]) //
/** 处理某一行的点击 */
const handleRowClick = (row) => {
unref(tableRef)?.toggleRowSelection(row)
}
//
/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
tables.value = selection.map((item) => item.name)
tableList.value = selection.map((item) => item.name)
}
/** 导入按钮操作 */
const handleImportTable = async () => {
await CodegenApi.createCodegenList({
dataSourceConfigId: queryParams.dataSourceConfigId,
tableNames: tables.value
tableNames: tableList.value
})
message.success('导入成功')
emit('ok')
handleClose()
emit('success')
close()
}
const handleClose = () => {
modelVisible.value = false
tables.value = []
}
defineExpose({
show
})
const emit = defineEmits(['success'])
</script>

View File

@ -1,6 +1,4 @@
import BasicInfoForm from './BasicInfoForm.vue'
import ColumInfoForm from './ColumInfoForm.vue'
import GenerateInfoForm from './GenerateInfoForm.vue'
import ImportTable from './ImportTable.vue'
import Preview from './Preview.vue'
export { BasicInfoForm, ColumInfoForm, GenerateInfoForm, ImportTable, Preview }
export { BasicInfoForm, ColumInfoForm, GenerateInfoForm }

View File

@ -135,16 +135,17 @@
</content-wrap>
<!-- 弹窗导入表 -->
<ImportTable ref="importRef" @ok="getList" />
<ImportTable ref="importRef" success="getList" />
<!-- 弹窗预览代码 -->
<Preview ref="previewRef" />
<PreviewCode ref="previewRef" />
</template>
<script setup lang="ts" name="Codegen">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as CodegenApi from '@/api/infra/codegen'
import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
import { ImportTable, Preview } from './components'
import ImportTable from './ImportTable.vue'
import PreviewCode from './PreviewCode.vue'
const message = useMessage() //
const { t } = useI18n() //
const { push } = useRouter() //
@ -189,7 +190,7 @@ const resetQuery = () => {
//
const importRef = ref()
const openImportTable = () => {
importRef.value.show()
importRef.value.open()
}
/** 编辑操作 */