数据库连接配置,element版本从2.15.13(官网没有这个版本)升为2.15.14

xzl-admin/src/main/java/com/xzl/web/controller/DatabaseConfigController.java

@@ -0,0 +1,104 @@
+package com.xzl.web.controller;
+
+import java.util.List;
+import javax.servlet.http.HttpServletResponse;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.xzl.common.annotation.Log;
+import com.xzl.common.core.controller.BaseController;
+import com.xzl.common.core.domain.AjaxResult;
+import com.xzl.common.enums.BusinessType;
+import com.xzl.web.model.databaseConfig.DatabaseConfig;
+import com.xzl.web.service.IDatabaseConfigService;
+import com.xzl.common.utils.poi.ExcelUtil;
+import com.xzl.common.core.page.TableDataInfo;
+
+/**
+ * 数据库连接配置Controller
+ * 
+ * @author xzl
+ * @date 2024-03-15
+ */
+@RestController
+@RequestMapping("/system/databaseConfig")
+public class DatabaseConfigController extends BaseController
+{
+    @Autowired
+    private IDatabaseConfigService databaseConfigService;
+
+    /**
+     * 查询数据库连接配置列表
+     */
+    @PreAuthorize("@ss.hasPermi('system:databaseConfig:list')")
+    @GetMapping("/list")
+    public TableDataInfo list(DatabaseConfig databaseConfig)
+    {
+        startPage();
+        List<DatabaseConfig> list = databaseConfigService.selectDatabaseConfigList(databaseConfig);
+        return getDataTable(list);
+    }
+
+    /**
+     * 导出数据库连接配置列表
+     */
+    @PreAuthorize("@ss.hasPermi('system:databaseConfig:export')")
+    @Log(title = "数据库连接配置", businessType = BusinessType.EXPORT)
+    @PostMapping("/export")
+    public void export(HttpServletResponse response, DatabaseConfig databaseConfig)
+    {
+        List<DatabaseConfig> list = databaseConfigService.selectDatabaseConfigList(databaseConfig);
+        ExcelUtil<DatabaseConfig> util = new ExcelUtil<DatabaseConfig>(DatabaseConfig.class);
+        util.exportExcel(response, list, "数据库连接配置数据");
+    }
+
+    /**
+     * 获取数据库连接配置详细信息
+     */
+    @PreAuthorize("@ss.hasPermi('system:databaseConfig:query')")
+    @GetMapping(value = "/{id}")
+    public AjaxResult getInfo(@PathVariable("id") Long id)
+    {
+        return success(databaseConfigService.selectDatabaseConfigById(id));
+    }
+
+    /**
+     * 新增数据库连接配置
+     */
+    @PreAuthorize("@ss.hasPermi('system:databaseConfig:add')")
+    @Log(title = "数据库连接配置", businessType = BusinessType.INSERT)
+    @PostMapping
+    public AjaxResult add(@RequestBody DatabaseConfig databaseConfig)
+    {
+        return toAjax(databaseConfigService.insertDatabaseConfig(databaseConfig));
+    }
+
+    /**
+     * 修改数据库连接配置
+     */
+    @PreAuthorize("@ss.hasPermi('system:databaseConfig:edit')")
+    @Log(title = "数据库连接配置", businessType = BusinessType.UPDATE)
+    @PutMapping
+    public AjaxResult edit(@RequestBody DatabaseConfig databaseConfig)
+    {
+        return toAjax(databaseConfigService.updateDatabaseConfig(databaseConfig));
+    }
+
+    /**
+     * 删除数据库连接配置
+     */
+    @PreAuthorize("@ss.hasPermi('system:databaseConfig:remove')")
+    @Log(title = "数据库连接配置", businessType = BusinessType.DELETE)
+	@DeleteMapping("/{ids}")
+    public AjaxResult remove(@PathVariable Long[] ids)
+    {
+        return toAjax(databaseConfigService.deleteDatabaseConfigByIds(ids));
+    }
+}

xzl-admin/src/main/java/com/xzl/web/mapper/DatabaseConfigMapper.java

@@ -0,0 +1,61 @@
+package com.xzl.web.mapper;
+
+import java.util.List;
+import com.xzl.web.model.databaseConfig.DatabaseConfig;
+
+/**
+ * 数据库连接配置Mapper接口
+ * 
+ * @author xzl
+ * @date 2024-03-15
+ */
+public interface DatabaseConfigMapper 
+{
+    /**
+     * 查询数据库连接配置
+     * 
+     * @param id 数据库连接配置主键
+     * @return 数据库连接配置
+     */
+    public DatabaseConfig selectDatabaseConfigById(Long id);
+
+    /**
+     * 查询数据库连接配置列表
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 数据库连接配置集合
+     */
+    public List<DatabaseConfig> selectDatabaseConfigList(DatabaseConfig databaseConfig);
+
+    /**
+     * 新增数据库连接配置
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 结果
+     */
+    public int insertDatabaseConfig(DatabaseConfig databaseConfig);
+
+    /**
+     * 修改数据库连接配置
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 结果
+     */
+    public int updateDatabaseConfig(DatabaseConfig databaseConfig);
+
+    /**
+     * 删除数据库连接配置
+     * 
+     * @param id 数据库连接配置主键
+     * @return 结果
+     */
+    public int deleteDatabaseConfigById(Long id);
+
+    /**
+     * 批量删除数据库连接配置
+     * 
+     * @param ids 需要删除的数据主键集合
+     * @return 结果
+     */
+    public int deleteDatabaseConfigByIds(Long[] ids);
+}

xzl-admin/src/main/java/com/xzl/web/model/databaseConfig/DatabaseConfig.java

@@ -0,0 +1,135 @@
+package com.xzl.web.model.databaseConfig;
+
+import com.xzl.common.annotation.Excel;
+import com.xzl.common.core.domain.BaseEntity;
+import org.apache.commons.lang3.builder.ToStringBuilder;
+import org.apache.commons.lang3.builder.ToStringStyle;
+
+/**
+ * 数据库连接配置对象 database_config
+ * 
+ * @author xzl
+ * @date 2024-03-15
+ */
+public class DatabaseConfig extends BaseEntity
+{
+    private static final long serialVersionUID = 1L;
+
+    /** $column.columnComment */
+    private Long id;
+
+    /** 数据库连接名称 */
+    @Excel(name = "数据库连接名称")
+    private String connectionName;
+
+    /** 数据库类型 */
+    @Excel(name = "数据库类型")
+    private String databaseType;
+
+    /** 驱动.例如:com.mysql.cj.jdbc.Driver */
+    @Excel(name = "驱动.例如:com.mysql.cj.jdbc.Driver")
+    private String driver;
+
+    /** 数据库连接地址 */
+    @Excel(name = "数据库连接地址")
+    private String url;
+
+    /** 数据库连接用户名 */
+    @Excel(name = "数据库连接用户名")
+    private String username;
+
+    /** 数据库连接密码 */
+    @Excel(name = "数据库连接密码")
+    private String password;
+
+    /** 数据库连接检测数据流向的表名 */
+    @Excel(name = "数据库连接检测数据流向的表名")
+    private String tables;
+
+    public void setId(Long id) 
+    {
+        this.id = id;
+    }
+
+    public Long getId() 
+    {
+        return id;
+    }
+    public void setConnectionName(String connectionName) 
+    {
+        this.connectionName = connectionName;
+    }
+
+    public String getConnectionName() 
+    {
+        return connectionName;
+    }
+    public void setDatabaseType(String databaseType) 
+    {
+        this.databaseType = databaseType;
+    }
+
+    public String getDatabaseType() 
+    {
+        return databaseType;
+    }
+    public void setDriver(String driver) 
+    {
+        this.driver = driver;
+    }
+
+    public String getDriver() 
+    {
+        return driver;
+    }
+    public void setUrl(String url) 
+    {
+        this.url = url;
+    }
+
+    public String getUrl() 
+    {
+        return url;
+    }
+    public void setUsername(String username) 
+    {
+        this.username = username;
+    }
+
+    public String getUsername() 
+    {
+        return username;
+    }
+    public void setPassword(String password) 
+    {
+        this.password = password;
+    }
+
+    public String getPassword() 
+    {
+        return password;
+    }
+    public void setTables(String tables) 
+    {
+        this.tables = tables;
+    }
+
+    public String getTables() 
+    {
+        return tables;
+    }
+
+    @Override
+    public String toString() {
+        return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
+            .append("id", getId())
+            .append("connectionName", getConnectionName())
+            .append("databaseType", getDatabaseType())
+            .append("driver", getDriver())
+            .append("url", getUrl())
+            .append("username", getUsername())
+            .append("password", getPassword())
+            .append("tables", getTables())
+            .toString();
+    }
+}

xzl-admin/src/main/java/com/xzl/web/service/IDatabaseConfigService.java

@@ -0,0 +1,61 @@
+package com.xzl.web.service;
+
+import java.util.List;
+import com.xzl.web.model.databaseConfig.DatabaseConfig;
+
+/**
+ * 数据库连接配置Service接口
+ * 
+ * @author xzl
+ * @date 2024-03-15
+ */
+public interface IDatabaseConfigService 
+{
+    /**
+     * 查询数据库连接配置
+     * 
+     * @param id 数据库连接配置主键
+     * @return 数据库连接配置
+     */
+    public DatabaseConfig selectDatabaseConfigById(Long id);
+
+    /**
+     * 查询数据库连接配置列表
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 数据库连接配置集合
+     */
+    public List<DatabaseConfig> selectDatabaseConfigList(DatabaseConfig databaseConfig);
+
+    /**
+     * 新增数据库连接配置
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 结果
+     */
+    public int insertDatabaseConfig(DatabaseConfig databaseConfig);
+
+    /**
+     * 修改数据库连接配置
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 结果
+     */
+    public int updateDatabaseConfig(DatabaseConfig databaseConfig);
+
+    /**
+     * 批量删除数据库连接配置
+     * 
+     * @param ids 需要删除的数据库连接配置主键集合
+     * @return 结果
+     */
+    public int deleteDatabaseConfigByIds(Long[] ids);
+
+    /**
+     * 删除数据库连接配置信息
+     * 
+     * @param id 数据库连接配置主键
+     * @return 结果
+     */
+    public int deleteDatabaseConfigById(Long id);
+}

xzl-admin/src/main/java/com/xzl/web/service/impl/DatabaseConfigServiceImpl.java

@@ -0,0 +1,93 @@
+package com.xzl.web.service.impl;
+
+import java.util.List;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import com.xzl.web.mapper.DatabaseConfigMapper;
+import com.xzl.web.model.databaseConfig.DatabaseConfig;
+import com.xzl.web.service.IDatabaseConfigService;
+
+/**
+ * 数据库连接配置Service业务层处理
+ * 
+ * @author xzl
+ * @date 2024-03-15
+ */
+@Service
+public class DatabaseConfigServiceImpl implements IDatabaseConfigService 
+{
+    @Autowired
+    private DatabaseConfigMapper databaseConfigMapper;
+
+    /**
+     * 查询数据库连接配置
+     * 
+     * @param id 数据库连接配置主键
+     * @return 数据库连接配置
+     */
+    @Override
+    public DatabaseConfig selectDatabaseConfigById(Long id)
+    {
+        return databaseConfigMapper.selectDatabaseConfigById(id);
+    }
+
+    /**
+     * 查询数据库连接配置列表
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 数据库连接配置
+     */
+    @Override
+    public List<DatabaseConfig> selectDatabaseConfigList(DatabaseConfig databaseConfig)
+    {
+        return databaseConfigMapper.selectDatabaseConfigList(databaseConfig);
+    }
+
+    /**
+     * 新增数据库连接配置
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 结果
+     */
+    @Override
+    public int insertDatabaseConfig(DatabaseConfig databaseConfig)
+    {
+        return databaseConfigMapper.insertDatabaseConfig(databaseConfig);
+    }
+
+    /**
+     * 修改数据库连接配置
+     * 
+     * @param databaseConfig 数据库连接配置
+     * @return 结果
+     */
+    @Override
+    public int updateDatabaseConfig(DatabaseConfig databaseConfig)
+    {
+        return databaseConfigMapper.updateDatabaseConfig(databaseConfig);
+    }
+
+    /**
+     * 批量删除数据库连接配置
+     * 
+     * @param ids 需要删除的数据库连接配置主键
+     * @return 结果
+     */
+    @Override
+    public int deleteDatabaseConfigByIds(Long[] ids)
+    {
+        return databaseConfigMapper.deleteDatabaseConfigByIds(ids);
+    }
+
+    /**
+     * 删除数据库连接配置信息
+     * 
+     * @param id 数据库连接配置主键
+     * @return 结果
+     */
+    @Override
+    public int deleteDatabaseConfigById(Long id)
+    {
+        return databaseConfigMapper.deleteDatabaseConfigById(id);
+    }
+}

xzl-admin/src/main/resources/mapper/DatabaseConfigMapper.xml

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.xzl.web.mapper.DatabaseConfigMapper">
+    
+    <resultMap type="com.xzl.web.model.databaseConfig.DatabaseConfig" id="DatabaseConfigResult">
+        <result property="id"    column="id"    />
+        <result property="connectionName"    column="connection_name"    />
+        <result property="databaseType"    column="database_type"    />
+        <result property="driver"    column="driver"    />
+        <result property="url"    column="url"    />
+        <result property="username"    column="username"    />
+        <result property="password"    column="password"    />
+        <result property="tables"    column="tables"    />
+    </resultMap>
+
+    <sql id="selectDatabaseConfigVo">
+        select id, connection_name, database_type, driver, url, username, password, tables from database_config
+    </sql>
+
+    <select id="selectDatabaseConfigList" parameterType="com.xzl.web.model.databaseConfig.DatabaseConfig" resultMap="DatabaseConfigResult">
+        <include refid="selectDatabaseConfigVo"/>
+        <where>  
+            <if test="connectionName != null  and connectionName != ''"> and connection_name like concat('%', #{connectionName}, '%')</if>
+            <if test="databaseType != null  and databaseType != ''"> and database_type = #{databaseType}</if>
+            <if test="driver != null  and driver != ''"> and driver = #{driver}</if>
+            <if test="url != null  and url != ''"> and url = #{url}</if>
+            <if test="username != null  and username != ''"> and username like concat('%', #{username}, '%')</if>
+            <if test="password != null  and password != ''"> and password = #{password}</if>
+            <if test="tables != null  and tables != ''"> and tables = #{tables}</if>
+        </where>
+    </select>
+    
+    <select id="selectDatabaseConfigById" parameterType="Long" resultMap="DatabaseConfigResult">
+        <include refid="selectDatabaseConfigVo"/>
+        where id = #{id}
+    </select>
+        
+    <insert id="insertDatabaseConfig" parameterType="com.xzl.web.model.databaseConfig.DatabaseConfig" useGeneratedKeys="true" keyProperty="id">
+        insert into database_config
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="connectionName != null and connectionName != ''">connection_name,</if>
+            <if test="databaseType != null and databaseType != ''">database_type,</if>
+            <if test="driver != null and driver != ''">driver,</if>
+            <if test="url != null and url != ''">url,</if>
+            <if test="username != null and username != ''">username,</if>
+            <if test="password != null and password != ''">password,</if>
+            <if test="tables != null">tables,</if>
+         </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="connectionName != null and connectionName != ''">#{connectionName},</if>
+            <if test="databaseType != null and databaseType != ''">#{databaseType},</if>
+            <if test="driver != null and driver != ''">#{driver},</if>
+            <if test="url != null and url != ''">#{url},</if>
+            <if test="username != null and username != ''">#{username},</if>
+            <if test="password != null and password != ''">#{password},</if>
+            <if test="tables != null">#{tables},</if>
+         </trim>
+    </insert>
+
+    <update id="updateDatabaseConfig" parameterType="com.xzl.web.model.databaseConfig.DatabaseConfig">
+        update database_config
+        <trim prefix="SET" suffixOverrides=",">
+            <if test="connectionName != null and connectionName != ''">connection_name = #{connectionName},</if>
+            <if test="databaseType != null and databaseType != ''">database_type = #{databaseType},</if>
+            <if test="driver != null and driver != ''">driver = #{driver},</if>
+            <if test="url != null and url != ''">url = #{url},</if>
+            <if test="username != null and username != ''">username = #{username},</if>
+            <if test="password != null and password != ''">password = #{password},</if>
+            <if test="tables != null">tables = #{tables},</if>
+        </trim>
+        where id = #{id}
+    </update>
+
+    <delete id="deleteDatabaseConfigById" parameterType="Long">
+        delete from database_config where id = #{id}
+    </delete>
+
+    <delete id="deleteDatabaseConfigByIds" parameterType="String">
+        delete from database_config where id in 
+        <foreach item="id" collection="array" open="(" separator="," close=")">
+            #{id}
+        </foreach>
+    </delete>
+</mapper>

xzl-ui/package.json

@@ -41,7 +41,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
-    "element-ui": "2.15.13",
+    "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
@@ -60,7 +60,8 @@
     "vue-router": "3.4.9",
     "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "workflow-bpmn-modeler": "^0.2.8"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

xzl-ui/src/api/system/databaseConfig.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询数据库连接配置列表
+export function listConfig(query) {
+  return request({
+    url: '/system/databaseConfig/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询数据库连接配置详细
+export function getConfig(id) {
+  return request({
+    url: '/system/databaseConfig/' + id,
+    method: 'get'
+  })
+}
+
+// 新增数据库连接配置
+export function addConfig(data) {
+  return request({
+    url: '/system/databaseConfig',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改数据库连接配置
+export function updateConfig(data) {
+  return request({
+    url: '/system/databaseConfig',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除数据库连接配置
+export function delConfig(id) {
+  return request({
+    url: '/system/databaseConfig/' + id,
+    method: 'delete'
+  })
+}

xzl-ui/src/views/system/databaseConfig/index.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="connectionName">
+        <el-input
+          v-model="queryParams.connectionName"
+          placeholder="请输入数据库连接名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:databaseConfig:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:databaseConfig:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:databaseConfig:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:databaseConfig:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" align="center" prop="id"  width="50"/>
+      <el-table-column label="连接名称" align="center" prop="connectionName" width="100"/>
+      <el-table-column label="类型" align="center" prop="databaseType" width="100"/>
+      <el-table-column label="驱动" align="center" prop="driver" show-overflow-tooltip />
+      <el-table-column label="地址" align="center" prop="url" show-overflow-tooltip  />
+      <el-table-column label="用户名" align="center" prop="username" width="100"/>
+      <el-table-column label="密码" align="center" prop="password" />
+      <el-table-column label="检测表" align="center" show-overflow-tooltip prop="tables" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:config:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:config:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改数据库连接配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="连接名称" prop="connectionName">
+          <el-input v-model="form.connectionName" placeholder="请输入数据库连接名称" />
+        </el-form-item>
+        <el-form-item label="驱动" prop="driver">
+          <el-input v-model="form.driver" placeholder="请输入驱动.例如:com.mysql.cj.jdbc.Driver" />
+        </el-form-item>
+        <el-form-item label="地址" prop="url">
+          <el-input v-model="form.url" placeholder="请输入数据库连接地址" />
+        </el-form-item>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="form.username" placeholder="请输入数据库连接用户名" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="form.password" placeholder="请输入数据库连接密码" />
+        </el-form-item>
+        <el-form-item label="检测表" prop="tables">
+          <el-input v-model="form.tables" placeholder="请输入数据库连接检测数据流向的表名" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listConfig, getConfig, delConfig, addConfig, updateConfig } from "@/api/system/databaseConfig";
+
+export default {
+  name: "Config",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 数据库连接配置表格数据
+      configList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        connectionName: null,
+        databaseType: null,
+        driver: null,
+        url: null,
+        username: null,
+        password: null,
+        tables: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        connectionName: [
+          { required: true, message: "数据库连接名称不能为空", trigger: "blur" }
+        ],
+        databaseType: [
+          { required: true, message: "数据库类型不能为空", trigger: "change" }
+        ],
+        driver: [
+          { required: true, message: "驱动.例如:com.mysql.cj.jdbc.Driver不能为空", trigger: "blur" }
+        ],
+        url: [
+          { required: true, message: "数据库连接地址不能为空", trigger: "blur" }
+        ],
+        username: [
+          { required: true, message: "数据库连接用户名不能为空", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "数据库连接密码不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询数据库连接配置列表 */
+    getList() {
+      this.loading = true;
+      listConfig(this.queryParams).then(response => {
+        this.configList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        connectionName: null,
+        databaseType: null,
+        driver: null,
+        url: null,
+        username: null,
+        password: null,
+        tables: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加数据库连接配置";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getConfig(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改数据库连接配置";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateConfig(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addConfig(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除数据库连接配置编号为"' + ids + '"的数据项？').then(function() {
+        return delConfig(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/databaseConfig/export', {
+        ...this.queryParams
+      }, `config_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>