REVIEW 代码生成(ImportTable)

src/views/infra/codegen/components/ImportTable.vue → src/views/infra/codegen/ImportTable.vue

@@ -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>

src/views/infra/codegen/components/index.ts

@@ -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 }

src/views/infra/codegen/index.vue

@@ -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()
 }
 
 /** 编辑操作 */