Vue3 重构：基础设施 -> 代码生成

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

@@ -1,9 +1,8 @@
 <template>
-  <!-- 导入表 -->
-  <XModal title="导入表" v-model="visible">
-    <el-form :model="queryParams" ref="queryRef" :inline="true">
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
       <el-form-item label="数据源" prop="dataSourceConfigId">
-        <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable>
+        <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源">
           <el-option
             v-for="config in dataSourceConfigs"
             :key="config.id"
@@ -13,52 +12,64 @@
         </el-select>
       </el-form-item>
       <el-form-item label="表名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入表名称" clearable />
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="表描述" prop="comment">
-        <el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable />
+        <el-input
+          v-model="queryParams.comment"
+          placeholder="请输入表描述"
+          clearable
+          @keyup.enter="handleQuery"
+        />
       </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-button @click="handleQuery"><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>
-    <vxe-table
-      ref="xTable"
-      :data="dbTableList"
-      v-loading="dbLoading"
-      :checkbox-config="{ highlight: true, range: true }"
-      height="260px"
-      class="xtable-scrollbar"
-    >
-      <vxe-column type="checkbox" width="60" />
-      <vxe-column field="name" title="表名称" />
-      <vxe-column field="comment" title="表描述" />
-    </vxe-table>
+
+    <el-row>
+      <el-table
+        v-loading="dbLoading"
+        @row-click="clickRow"
+        ref="tableRef"
+        :data="dbTableList"
+        @selection-change="handleSelectionChange"
+        height="260px"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="name" label="表名称" :show-overflow-tooltip="true" />
+        <el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
+      </el-table>
+    </el-row>
+
     <template #footer>
       <div class="dialog-footer">
-        <XButton type="primary" :title="t('action.import')" @click="handleImportTable()" />
-        <XButton :title="t('dialog.close')" @click="handleClose()" />
+        <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>
     </template>
-  </XModal>
+  </Dialog>
 </template>
 <script setup lang="ts">
-import { VxeTableInstance } from 'vxe-table'
 import type { DatabaseTableVO } from '@/api/infra/codegen/types'
-import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
-import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+import * as CodegenApi from '@/api/infra/codegen'
+import { getDataSourceConfigList, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
+import { ElTable } from 'element-plus'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const emit = defineEmits(['ok'])
-// ======== 显示页面 ========
-const visible = ref(false)
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('导入表') // 弹窗的标题
 const dbLoading = ref(true)
 const queryParams = reactive({
   name: undefined,
@@ -67,10 +78,9 @@ const queryParams = reactive({
 })
 const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
 const show = async () => {
-  const res = await getDataSourceConfigListApi()
-  dataSourceConfigs.value = res
-  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id
-  visible.value = true
+  dataSourceConfigs.value = await getDataSourceConfigList()
+  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
+  modelVisible.value = true
   await getList()
 }
 /** 查询表数据 */
@@ -79,8 +89,7 @@ const dbTableList = ref<DatabaseTableVO[]>([])
 /** 查询表数据 */
 const getList = async () => {
   dbLoading.value = true
-  const res = await getSchemaTableListApi(queryParams)
-  dbTableList.value = res
+  dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
   dbLoading.value = false
 }
 // 查询操作
@@ -91,23 +100,22 @@ const handleQuery = async () => {
 const resetQuery = async () => {
   queryParams.name = undefined
   queryParams.comment = undefined
-  queryParams.dataSourceConfigId = 0
+  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
   await getList()
 }
-const xTable = ref<VxeTableInstance>()
+const tableRef = ref<typeof ElTable>()
 /** 多选框选中数据 */
 const tables = ref<string[]>([])
-
+const clickRow = (row) => {
+  unref(tableRef)?.toggleRowSelection(row)
+}
+// 多选框选中数据
+const handleSelectionChange = (selection) => {
+  tables.value = selection.map((item) => item.name)
+}
 /** 导入按钮操作 */
 const handleImportTable = async () => {
-  if (xTable.value?.getCheckboxRecords().length === 0) {
-    message.error('请选择要导入的表')
-    return
-  }
-  xTable.value?.getCheckboxRecords().forEach((item) => {
-    tables.value.push(item.name)
-  })
-  await createCodegenListApi({
+  await CodegenApi.createCodegenList({
     dataSourceConfigId: queryParams.dataSourceConfigId,
     tableNames: tables.value
   })
@@ -116,7 +124,7 @@ const handleImportTable = async () => {
   handleClose()
 }
 const handleClose = () => {
-  visible.value = false
+  modelVisible.value = false
   tables.value = []
 }
 defineExpose({