ShiShiYiBan/yudao-ui-admin-vue3/src/views/infra/codegen/components/ImportTable.vue

128 lines
3.9 KiB
Vue
Raw Normal View History

2022-11-16 00:24:55 +08:00
<template>
<!-- 导入表 -->
<XModal title="导入表" v-model="visible">
<el-form :model="queryParams" ref="queryRef" :inline="true">
<el-form-item label="数据源" prop="dataSourceConfigId">
<el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable>
<el-option
v-for="config in dataSourceConfigs"
:key="config.id"
:label="config.name"
:value="config.id"
/>
</el-select>
</el-form-item>
<el-form-item label="表名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入表名称" clearable />
</el-form-item>
<el-form-item label="表描述" prop="comment">
<el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable />
</el-form-item>
<el-form-item>
<XButton
type="primary"
preIcon="ep:search"
:title="t('common.query')"
@click="handleQuery()"
/>
<XButton preIcon="ep:refresh-right" :title="t('common.reset')" @click="resetQuery()" />
</el-form-item>
</el-form>
<vxe-table
ref="xTable"
:data="dbTableList"
v-loading="dbLoading"
:checkbox-config="{ highlight: true, range: true }"
2022-11-17 17:18:48 +08:00
height="260px"
2022-11-16 00:24:55 +08:00
class="xtable-scrollbar"
>
<vxe-column type="checkbox" width="60" />
<vxe-column field="name" title="表名称" />
<vxe-column field="comment" title="表描述" />
</vxe-table>
<template #footer>
<div class="dialog-footer">
<XButton type="primary" :title="t('action.import')" @click="handleImportTable()" />
<XButton :title="t('dialog.close')" @click="handleClose()" />
</div>
</template>
</XModal>
</template>
2022-07-18 19:06:37 +08:00
<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
2022-11-16 00:24:55 +08:00
import { useMessage } from '@/hooks/web/useMessage'
2022-11-23 13:59:13 +08:00
import { VxeTableInstance } from 'vxe-table'
2022-07-18 19:06:37 +08:00
import type { DatabaseTableVO } from '@/api/infra/codegen/types'
2022-11-23 13:59:13 +08:00
import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
2022-07-18 19:06:37 +08:00
const { t } = useI18n() // 国际化
2022-11-16 00:24:55 +08:00
const message = useMessage() // 消息弹窗
2022-07-25 16:53:36 +08:00
const emit = defineEmits(['ok'])
2022-07-18 19:06:37 +08:00
// ======== 显示页面 ========
const visible = ref(false)
2022-07-25 16:53:36 +08:00
const dbLoading = ref(true)
2022-07-18 19:06:37 +08:00
const queryParams = reactive({
2022-07-28 21:40:15 +08:00
name: undefined,
comment: undefined,
2022-07-18 19:06:37 +08:00
dataSourceConfigId: 0
})
const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
const show = async () => {
const res = await getDataSourceConfigListApi()
dataSourceConfigs.value = res
queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id
visible.value = true
await getList()
}
/** 查询表数据 */
const dbTableList = ref<DatabaseTableVO[]>([])
/** 查询表数据 */
const getList = async () => {
2022-07-25 16:53:36 +08:00
dbLoading.value = true
2022-07-18 19:06:37 +08:00
const res = await getSchemaTableListApi(queryParams)
dbTableList.value = res
2022-07-25 16:53:36 +08:00
dbLoading.value = false
2022-07-18 19:06:37 +08:00
}
// 查询操作
const handleQuery = async () => {
await getList()
}
// 重置操作
const resetQuery = async () => {
2022-07-28 21:40:15 +08:00
queryParams.name = undefined
queryParams.comment = undefined
queryParams.dataSourceConfigId = 0
2022-07-18 19:06:37 +08:00
await getList()
}
2022-11-16 00:24:55 +08:00
const xTable = ref<VxeTableInstance>()
2022-07-18 19:06:37 +08:00
/** 多选框选中数据 */
const tables = ref<string[]>([])
2022-11-16 00:24:55 +08:00
2022-07-18 19:06:37 +08:00
/** 导入按钮操作 */
2022-07-25 16:53:36 +08:00
const handleImportTable = async () => {
2022-11-16 00:24:55 +08:00
if (xTable.value?.getCheckboxRecords().length === 0) {
message.error('请选择要导入的表')
2022-07-18 19:06:37 +08:00
return
}
2022-11-16 00:24:55 +08:00
xTable.value?.getCheckboxRecords().forEach((item) => {
tables.value.push(item.name)
})
2022-07-25 16:53:36 +08:00
await createCodegenListApi({
2022-07-18 19:06:37 +08:00
dataSourceConfigId: queryParams.dataSourceConfigId,
tableNames: tables.value
})
2022-11-16 00:24:55 +08:00
message.success('导入成功')
2022-07-25 16:53:36 +08:00
emit('ok')
2022-11-16 00:24:55 +08:00
handleClose()
}
const handleClose = () => {
visible.value = false
tables.value = []
2022-07-18 19:06:37 +08:00
}
defineExpose({
show
})
</script>