feat: 数据库管理

src/api/interface/db/connection.ts

@@ -0,0 +1,131 @@
+import { PageQuery, BaseEntity } from '@/api/interface/index'
+export interface ConnectionVO extends BaseEntity {
+  /**
+   * 唯一主键
+   */
+  id: string | number
+
+  /**
+   * 链接名称
+   */
+  name: string
+
+  /**
+   * 数据库类型
+   */
+  type: string
+
+  /**
+   * 驱动版本
+   */
+  driverVersion: string
+
+  /**
+   * 驱动类名
+   */
+  driver: string
+
+  /**
+   * jdbc-url连接串
+   */
+  url: string
+
+  /**
+   * 数据库账号
+   */
+  userName: string
+
+  /**
+   * 账号密码
+   */
+  password: string
+}
+
+export interface ConnectionForm {
+  /**
+   * 唯一主键
+   */
+  id?: string | number
+
+  /**
+   * 链接名称
+   */
+  name?: string
+
+  /**
+   * 数据库类型
+   */
+  type?: string
+
+  /**
+   * 驱动版本
+   */
+  driverVersion?: string
+
+  /**
+   * 驱动类名
+   */
+  driver?: string
+
+  /**
+   * jdbc-url连接串
+   */
+  url?: string
+
+  /**
+   * 数据库账号
+   */
+  userName?: string
+
+  /**
+   * 账号密码
+   */
+  password?: string
+
+  /**
+   * 乐观锁
+   */
+  version?: number
+}
+
+export interface ConnectionQuery extends PageQuery {
+  /**
+   * 链接名称
+   */
+  name?: string
+
+  /**
+   * 数据库类型
+   */
+  type?: string
+
+  /**
+   * 驱动版本
+   */
+  driverVersion?: string
+
+  /**
+   * 驱动类名
+   */
+  driver?: string
+
+  /**
+   * jdbc-url连接串
+   */
+  url?: string
+
+  /**
+   * 数据库账号
+   */
+  userName?: string
+
+  /**
+   * 账号密码
+   */
+  password?: string
+
+  /**
+   * 日期范围参数
+   */
+  params?: any
+}

src/api/modules/db/connection.ts

@@ -0,0 +1,70 @@
+import http from '@/api'
+import { ConnectionVO, ConnectionForm, ConnectionQuery } from '@/api/interface/db/connection'
+/**
+ * @name 查询数据库链接列表
+ * @param query 参数
+ * @returns 返回列表
+ */
+export const listConnectionApi = (query: ConnectionQuery) => {
+  return http.get<ConnectionVO[]>('/db/connection/list', query, { loading: true })
+}
+
+/**
+ * @name 查询数据库链接详细
+ * @param id id
+ * @returns returns
+ */
+export const getConnectionApi = (id: string | number) => {
+  return http.get<ConnectionVO>(`/db/connection/${id}`)
+}
+
+/**
+ * @name 新增数据库链接
+ * @param data data
+ * @returns returns
+ */
+export const addConnectionApi = (data: ConnectionForm) => {
+  return http.post<any>('/db/connection', data, { loading: false })
+}
+
+/**
+ * @name 修改数据库链接
+ * @param data data
+ * @returns returns
+ */
+export const updateConnectionApi = (data: ConnectionForm) => {
+  return http.put<any>('/db/connection', data, { loading: false })
+}
+
+/**
+ * @name 删除数据库链接
+ * @param id id
+ * @returns returns
+ */
+export const delConnectionApi = (id: string | number | Array<string | number>) => {
+  return http.delete<any>(`/db/connection/${id}`)
+}
+
+/**
+ * @name 下载模板
+ * @returns returns
+ */
+export const importTemplateApi = () => {
+  return http.downloadPost('/db/connection/importTemplate', {})
+}
+
+/**
+ * @name 导入数据
+ * @returns returns
+ */
+export const importConnectionDataApi = (data: any) => {
+  return http.post('/db/connection/importData', data)
+}
+
+/**
+ * @name 导出数据
+ * @returns returns
+ */
+export const exportConnectionApi = (data: any) => {
+  return http.downloadPost('/db/connection/export', data)
+}

src/components/ProForm/components/Item.vue

@@ -24,7 +24,7 @@
       </component>
     </template>
     <template v-if="item.compOptions.elTagName === 'radio-button'">
-      <component :is="`el-radio-button`" v-for="(col, index) in itemEnum" :key="index" :label="col[item.compOptions.valueKey || 'value']">
+      <component :is="`el-radio-button`" v-for="(col, index) in itemEnum" :key="index" :value="col[item.compOptions.valueKey || 'value']">
         {{ col[item.compOptions.labelKey || 'label'] }}
       </component>
     </template>

src/components/SelectIcon/index.vue

@@ -10,7 +10,7 @@
       @click="openDialog"
     >
       <template #append>
-        <el-button icon="customIcons[iconValue]" />
+        <el-button :icon="customIcons[iconValue] || ''" />
       </template>
     </el-input>
     <el-dialog v-model="dialogVisible" :title="placeholder" top="10%" width="40%">

src/styles/element.scss

@@ -125,11 +125,6 @@ label {
 .content-box-c {
   height: 100%;
   padding: 24px;
-  .el-tabs__content {
-    max-height: 500px;
-
-    // padding: 24px;
-  }
   .el-collapse {
     // border: none;
     border-top: none;

src/views/db/connection/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="table-box">
+    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listConnectionApi">
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-button type="primary" v-auth="['db:connection:add']" icon="CirclePlus" @click="openDialog(1, '数据库链接新增')"> 新增 </el-button>
+        <el-button type="primary" v-auth="['db:connection:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
+        <el-button type="primary" v-auth="['db:connection:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button>
+        <el-button
+          type="danger"
+          v-auth="['db:connection:remove']"
+          icon="Delete"
+          plain
+          :disabled="!scope.isSelected"
+          @click="batchDelete(scope.selectedListIds)"
+        >
+          批量删除
+        </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button type="primary" link icon="View" v-auth="['db:connection:query']" @click="openDialog(3, '数据库链接查看', scope.row)">
+          查看
+        </el-button>
+        <el-button type="primary" link icon="EditPen" v-auth="['db:connection:edit']" @click="openDialog(2, '数据库链接编辑', scope.row)">
+          编辑
+        </el-button>
+        <el-button type="primary" link icon="Delete" v-auth="['db:connection:remove']" @click="deleteConnection(scope.row)"> 删除 </el-button>
+      </template>
+    </ProTable>
+    <FormDialog ref="formDialogRef" />
+    <ImportExcel ref="dialogRef" />
+  </div>
+</template>
+
+<script setup lang="tsx" name="Connection">
+import { ref, reactive } from 'vue'
+import { useHandleData } from '@/hooks/useHandleData'
+import { useDownload } from '@/hooks/useDownload'
+import { ElMessageBox } from 'element-plus'
+import ProTable from '@/components/ProTable/index.vue'
+import ImportExcel from '@/components/ImportExcel/index.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import {
+  listConnectionApi,
+  delConnectionApi,
+  addConnectionApi,
+  updateConnectionApi,
+  importTemplateApi,
+  importConnectionDataApi,
+  exportConnectionApi,
+  getConnectionApi
+} from '@/api/modules/db/connection'
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+
+// 删除数据库链接信息
+const deleteConnection = async (params: any) => {
+  await useHandleData(delConnectionApi, params.id, '删除【' + params.id + '】数据库链接')
+  proTable.value?.getTableList()
+}
+
+// 批量删除数据库链接信息
+const batchDelete = async (ids: string[]) => {
+  await useHandleData(delConnectionApi, ids, '删除所选数据库链接信息')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
+
+// 导出数据库链接列表
+const downloadFile = async () => {
+  ElMessageBox.confirm('确认导出数据库链接数据?', '温馨提示', { type: 'warning' }).then(() =>
+    useDownload(exportConnectionApi, '数据库链接列表', proTable.value?.searchParam)
+  )
+}
+
+// 批量添加数据库链接
+const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
+const batchAdd = () => {
+  const params = {
+    title: '数据库链接',
+    tempApi: importTemplateApi,
+    importApi: importConnectionDataApi,
+    getTableList: proTable.value?.getTableList
+  }
+  dialogRef.value?.acceptParams(params)
+}
+
+const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
+// 打开弹框的功能
+const openDialog = async (type: number, title: string, row?: any) => {
+  let res = { data: {} }
+  if (row?.id) {
+    res = await getConnectionApi(row?.id || null)
+  }
+  // 重置表单
+  setItemsOptions()
+  const params = {
+    title,
+    width: 580,
+    isEdit: type !== 3,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? {} : res.data,
+    api: type == 1 ? addConnectionApi : updateConnectionApi,
+    getTableList: proTable.value?.getTableList
+  }
+  formDialogRef.value?.openDialog(params)
+}
+
+// 表格配置项
+const columns = reactive<ColumnProps<any>[]>([
+  { type: 'selection', fixed: 'left', width: 70 },
+  {
+    prop: 'id',
+    label: '唯一主键',
+    width: 120
+  },
+  {
+    prop: 'name',
+    label: '链接名称',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'type',
+    label: '数据库类型',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'driverVersion',
+    label: '驱动版本',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'driver',
+    label: '驱动类名',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'url',
+    label: 'jdbc-url连接串',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'userName',
+    label: '数据库账号',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  {
+    prop: 'password',
+    label: '账号密码',
+    search: {
+      el: 'input'
+    },
+    width: 120
+  },
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+])
+// 表单配置项
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '唯一主键',
+      prop: 'id',
+      rules: [{ required: true, message: '唯一主键不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入唯一主键'
+      }
+    },
+    {
+      label: '链接名称',
+      prop: 'name',
+      rules: [{ required: true, message: '链接名称不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入链接名称'
+      }
+    },
+    {
+      label: '数据库类型',
+      prop: 'type',
+      rules: [{ required: true, message: '数据库类型不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入数据库类型'
+      }
+    },
+    {
+      label: '驱动版本',
+      prop: 'driverVersion',
+      rules: [{ required: true, message: '驱动版本不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入驱动版本'
+      }
+    },
+    {
+      label: '驱动类名',
+      prop: 'driver',
+      rules: [{ required: true, message: '驱动类名不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入驱动类名'
+      }
+    },
+    {
+      label: 'jdbc-url连接串',
+      prop: 'url',
+      rules: [{ required: true, message: 'jdbc-url连接串不能为空', trigger: 'blur' }],
+      compOptions: {
+        type: 'textarea',
+        clearable: true,
+        placeholder: '请输入内容'
+      }
+    },
+    {
+      label: '数据库账号',
+      prop: 'userName',
+      rules: [{ required: true, message: '数据库账号不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入数据库账号'
+      }
+    },
+    {
+      label: '账号密码',
+      prop: 'password',
+      rules: [{ required: true, message: '账号密码不能为空', trigger: 'blur' }],
+      compOptions: {
+        placeholder: '请输入账号密码'
+      }
+    }
+  ]
+}
+</script>

src/views/system/menu/index.vue

@@ -16,7 +16,7 @@
       </template>
       <!-- 菜单图标 -->
       <template #icon="scope">
-        <el-icon :size="18">
+        <el-icon :size="18" v-if="scope.row.icon">
           <component :is="scope.row.icon"></component>
         </el-icon>
       </template>

src/views/tool/gen/editGenTable.vue

@@ -111,7 +111,7 @@ const submitForm = () => {
         treeCode: genTable2.treeCode,
         treeName: genTable2.treeName,
         treeParentCode: genTable2.treeParentCode,
-        parentMenuId: genTable2.parentMenuId
+        parentMenuId: genTable.parentMenuId
       }
       updateGenTableApi(genTable).then((response: any) => {
         if (response.code === 200) {