前端页面修改

dbswitch-admin-ui/package.json

@@ -10,13 +10,16 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "ant-design-vue": "^2.2.8",
     "axios": "^0.19.2",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.6",
+    "qs": "^6.11.2",
     "urlencode": "^1.1.0",
     "vue": "^2.5.2",
     "vue-count-to": "^1.0.13",
     "vue-cron": "^1.0.9",
+    "vue-hot-reload-api": "^2.3.4",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

dbswitch-admin-ui/src/router/index.js

@@ -24,45 +24,53 @@ const constantRouter = new Router({
                 },
                 {
                     path: '/connection',
-          name: '连接配置',
+                    name: '数据源管理',
                     icon: "el-icon-s-order",
                     component: () => import('@/views/connection/index'),
                     children: [
+                        {
+                            path: '/connection/list',
+                            name: '数据源',
+                            icon: "el-icon-bank-card",
+                            component: () => import('@/views/connection/list')
+                            // children: [
+                            //     {
+                            //         path: '/dataSourceCreateStep1',
+                            //         name: '选择数据源',
+                            //         icon: "el-icon-menu",
+                            //         component: () => import('@/views/connection/dataSourceCreateStep1')
+                            //     }
+                            // ]
+                        },
                         {
                             path: '/connection/driver',
                             name: '驱动配置',
                             icon: "el-icon-help",
                             component: () => import('@/views/connection/driver'),
-            },
-            {
-              path: '/connection/list',
-              name: '连接管理',
-              icon: "el-icon-bank-card",
-              component: () => import('@/views/connection/list')
                         }
                     ]
                 },
                 {
                     path: '/metadata',
-          name: '数据目录',
+                    name: '数据库管理',
                     icon: "el-icon-coin",
                     component: () => import('@/views/metadata/index')
                 },
                 {
                     path: '/task',
-          name: '任务管理',
+                    name: '数据集成 MDI',
                     icon: "el-icon-s-tools",
                     component: () => import('@/views/task/index'),
                     children: [
                         {
                             path: '/task/assignment',
-              name: '任务安排',
+                            name: '任务管理',
                             icon: "el-icon-eleme",
                             component: () => import('@/views/task/assignment'),
                         },
                         {
                             path: '/task/schedule',
-              name: '调度记录',
+                            name: '监控调度',
                             icon: "el-icon-pie-chart",
                             component: () => import('@/views/task/schedule')
                         }

dbswitch-admin-ui/src/views/connection/list.vue

@@ -16,7 +16,10 @@
           <el-button type="primary"
                      size="mini"
                      icon="el-icon-document-add"
-                     @click="addConnection">添加</el-button>
+                     @click="addConnection">接入数据源</el-button>
+<!--                     @click="selectDataSource">接入数据源-->
+<!--          </el-button>-->
+
         </div>
       </div>
 
@@ -25,10 +28,10 @@
                 size="small"
                 border>
         <el-table-column prop="id"
-                         label="编号"
+                         label="序号"
                          min-width="5%"></el-table-column>
         <el-table-column prop="name"
-                         label="连接名称"
+                         label="数据源名称"
                          show-overflow-tooltip
                          min-width="20%"></el-table-column>
         <el-table-column prop="createTime"
@@ -58,22 +61,26 @@
                          type="danger"
                          icon="el-icon-video-play"
                          @click="handleTest(scope.$index, scope.row)"
-                         round>测试</el-button>
+                         round>测试
+              </el-button>
               <el-button size="small"
                          type="primary"
                          icon="el-icon-document"
                          @click="handleMore(scope.$index, scope.row)"
-                         round>详情</el-button>
+                         round>详情
+              </el-button>
               <el-button size="small"
                          type="warning"
                          icon="el-icon-edit"
                          @click="handleUpdate(scope.$index, scope.row)"
-                         round>编辑</el-button>
+                         round>编辑
+              </el-button>
               <el-button size="small"
                          type="success"
                          icon="el-icon-delete"
                          @click="handleDelete(scope.$index, scope.row)"
-                         round>删除</el-button>
+                         round>删除
+              </el-button>
             </el-button-group>
           </template>
         </el-table-column>
@@ -155,6 +162,31 @@
         </div>
       </el-dialog>
 
+      <el-dialog title="接入数据源"
+                 :visible.sync="dataSourceCreateStep1"
+                 :showClose="false"
+                 :before-close="handleClose">
+
+
+        <el-form :model="createform"
+                 size="mini"
+                 status-icon
+                 :rules="rules"
+                 ref="createform">
+          <el-form-item label="数据库类型"
+                        label-width="120px"
+                        :required=true
+                        prop="type">
+            <el-radio-group v-model="createform.type" @change="selectChangedDriverVersion">
+              <el-radio :label="item.type" :key="index" v-for="(item,index) in databaseType">{{ item.type }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+        </el-form>
+
+
+      </el-dialog>
+
       <el-dialog title="添加数据源连接信息"
                  :visible.sync="createFormVisible"
                  :showClose="false"
@@ -164,7 +196,7 @@
                  status-icon
                  :rules="rules"
                  ref="createform">
-          <el-form-item label="连接名称"
+          <el-form-item label="数据源名称"
                         label-width="120px"
                         :required=true
                         prop="name"
@@ -218,14 +250,14 @@
                       auto-complete="off">
             </el-input>
           </el-form-item>
-          <el-form-item label="账号名称"
+          <el-form-item label="用户名"
                         label-width="120px"
                         prop="username"
                         style="width:85%">
             <el-input v-model="createform.username"
                       auto-complete="off"></el-input>
           </el-form-item>
-          <el-form-item label="连接密码"
+          <el-form-item label="密码"
                         label-width="120px"
                         prop="password"
                         style="width:85%">
@@ -238,7 +270,8 @@
              class="dialog-footer">
           <el-button @click="createFormVisible = false">取 消</el-button>
           <el-button type="primary"
-                     @click="handleCreate">确 定</el-button>
+                     @click="handleCreate">确 定
+          </el-button>
         </div>
       </el-dialog>
 
@@ -317,7 +350,8 @@
              class="dialog-footer">
           <el-button @click="updateFormVisible = false">取 消</el-button>
           <el-button type="primary"
-                     @click="handleSave">确 定</el-button>
+                     @click="handleSave">确 定
+          </el-button>
         </div>
       </el-dialog>
     </el-card>
@@ -337,8 +371,7 @@ export default {
       totalCount: 2,
       databaseType: [],
       connectionDriver: [],
-      tableData: [
+      tableData: [],
-      ],
       queryForm: {
         title: "",
         type: "",
@@ -413,7 +446,8 @@ export default {
       },
       dialogFormVisible: false,
       createFormVisible: false,
-      updateFormVisible: false
+      updateFormVisible: false,
+      dataSourceCreateStep1: false,
     }
   },
   methods: {
@@ -510,6 +544,10 @@ export default {
       this.createFormVisible = true;
       this.createform = {};
     },
+    selectDataSource: function () {
+      this.dataSourceCreateStep1 = true;
+
+    },
     handleCreate: function () {
       let driverClass = "";
       if (this.databaseType.length > 0) {
@@ -643,7 +681,7 @@ export default {
       this.loading = true;
       this.currentPage = currentPage;
       this.loadData();
-    }
+    },
   },
   created() {
     this.loadDatabaseTypes();
@@ -657,12 +695,14 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .el-card,
 .el-message {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
+
 .connection-list-top {
   width: 100%;
   display: flex;
@@ -675,14 +715,18 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
 .left-search-input {
   width: 300px;
   margin-right: auto;
   margin: 10px 5px;
 }
+
 .right-add-button-group {
   width: 100px;
   margin-left: auto;
   margin: 10px 5px;
 }
 </style>
+
+

dbswitch-admin/src/main/resources/application.yml

@@ -12,9 +12,9 @@ spring:
     static-path-pattern: /statics/**
   datasource:
     driver-class-name: com.mysql.jdbc.Driver
-    url: jdbc:mysql://192.168.31.57:3306/dbswitch?createDatabaseIfNotExist=true&useUnicode=true&characterEncoding=UTF8&autoReconnect=true&useSSL=false&allowMultiQueries=true&failOverReadOnly=false&connectTimeout=30000
+    url: jdbc:mysql://192.168.171.131:3306/dbswitch?createDatabaseIfNotExist=true&useUnicode=true&characterEncoding=UTF8&autoReconnect=true&useSSL=false&allowMultiQueries=true&failOverReadOnly=false&connectTimeout=30000
-    username: tangyibo
+    username: root
-    password: 123456
+    password: root
     validation-query: SELECT 1
     test-on-borrow: true
   flyway:
@@ -32,4 +32,4 @@ mybatis:
 
 dbswitch:
   configuration:
-    drivers-base-path: ${APP_DRIVERS_PATH}
+    drivers-base-path: ${APP_DRIVERS_PATH:D:\Code\Gitee\IdeaProjects\dbswitch\drivers}