REVIEW 代码生成(ImportTable)

b1e74a1d · YunaiV · d5f3f0ad · b1e74a1d · b1e74a1d · b1e74a1d
Commit b1e74a1d authored Mar 29, 2023 by YunaiV
Showing with 73 additions and 65 deletions

src/views/infra/codegen/ImportTable.vue
+67 -58

src/views/infra/codegen/PreviewCode.vue
+0 -0

src/views/infra/codegen/components/index.ts
+1 -3

src/views/infra/codegen/index.vue
+5 -4

No files found.
--- a/src/views/infra/codegen/components/ImportTable.vue
+++ b/src/views/infra/codegen/components/ImportTable.vue
 <template>
-  <Dialog :title="modelTitle" v-model="modelVisible">
+  <Dialog title="导入表" v-model="modelVisible" width="800px">
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true">
+    <!-- 搜索栏 -->
+    <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"
+        v-loading="dbTableLoading"
-        @row-click="clickRow"
+        @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="tableList.length === 0">
-        <el-button @click="handleImportTable" type="primary" :disabled="tables.length === 0">{{
+        导入
-          t('action.import')
+      </el-button>
-        }}</el-button>
+      <el-button @click="close">关闭</el-button>
-        <el-button @click="handleClose">{{ t('dialog.close') }}</el-button>
-      </div>
    </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 dbTableLoading = ref(true) // 数据源的加载中
-const dbLoading = ref(true)
+const dbTableList = ref<CodegenApi.DatabaseTableVO[]>([]) // 表的列表
 const queryParams = reactive({
  name: undefined,
  comment: undefined,
  dataSourceConfigId: 0
 })
-const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
+const queryFormRef = ref() // 搜索的表单
-const show = async () => {
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
-  dataSourceConfigs.value = await getDataSourceConfigList()
-  queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id as number
-  modelVisible.value = true
-  await getList()
-}
-/** 查询表数据 */
-const dbTableList = ref<DatabaseTableVO[]>([])
 /** 查询表数据 */
 const getList = async () => {
-  dbLoading.value = true
+  dbTableLoading.value = true
-  dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
+  try {
-  dbLoading.value = false
+    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 open = async () => {
-const clickRow = (row) => {
+  // 加载数据源的列表
+  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')
+  emit('success')
-  handleClose()
+  close()
 }
-const handleClose = () => {
+const emit = defineEmits(['success'])
-  modelVisible.value = false
-  tables.value = []
-}
-defineExpose({
-  show
-})
 </script>
--- a/src/views/infra/codegen/components/Preview.vue
+++ b/src/views/infra/codegen/components/Preview.vue
--- a/src/views/infra/codegen/components/index.ts
+++ b/src/views/infra/codegen/components/index.ts
 import BasicInfoForm from './BasicInfoForm.vue'
 import ColumInfoForm from './ColumInfoForm.vue'
 import GenerateInfoForm from './GenerateInfoForm.vue'
-import ImportTable from './ImportTable.vue'
+export { BasicInfoForm, ColumInfoForm, GenerateInfoForm }
-import Preview from './Preview.vue'
-export { BasicInfoForm, ColumInfoForm, GenerateInfoForm, ImportTable, Preview }
--- a/src/views/infra/codegen/index.vue
+++ b/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()
 }
 /** 编辑操作 */