前段页面优化

2025-09-26 13:48:01 +00:00 · 2023-09-22 23:21:05 +08:00
parent 34b7412bff
commit 7ba2c26e4b
24 changed files with 335 additions and 53 deletions
--- a/dbswitch-admin-ui/src/router/index.js
+++ b/dbswitch-admin-ui/src/router/index.js
@@ -112,6 +112,12 @@ const constantRouter = new Router({
          name: '修改任务',
          hidden: true,
          component: () => import('@/views/task/update')
+        },
+        {
+          path: '/task/detail',
+          name: '查看任务',
+          hidden: true,
+          component: () => import('@/views/task/detail')
        }
      ],
    },
--- a/dbswitch-admin-ui/src/views/about/me.vue
+++ b/dbswitch-admin-ui/src/views/about/me.vue
@@ -84,6 +84,8 @@
                </li>
                <li>OpenGuass
                </li>
+                <li>ClickHouse
+                </li>
                <li>MongoDB
                </li>
              </ul>
@@ -105,29 +107,29 @@
                dbswitch基于Springboot脚手架进行的后端模块开发，模块组成结构如下：
              <pre>
            └── dbswitch
-                ├── dbswitch-common               // dbswitch通用定义模块
-                ├── dbswitch-core                 // dbswitch迁移同步实现类
-                ├── dbswitch-product              // dbswitch数据库方言
-                    ├── dbswitch-product-mysql    //  -> mysql方言实现类
-                    ├── dbswitch-product-oracle   //  -> oracle方言实现类
-                    ├── dbswitch-product-sqlserver//  -> sqlserver方言实现类
-                    ├── dbswitch-product-postgres //  -> postgres方言实现类
-                    ├── dbswitch-product-dm       //  -> dm方言实现类
-                    ├── dbswitch-product-kingbase //  -> kingbase方言实现类
-                    ├── dbswitch-product-oscar    //  -> oscar方言实现类
-                    ├── dbswitch-product-gbase    //  -> gbase方言实现类
-                    ├── dbswitch-product-mariadb  //  -> mariadb方言实现类
-                    ├── dbswitch-product-openguass//  -> openguass方言实现类
-                    ├── dbswitch-product-db2      //  -> db2方言实现类
-                    ├── dbswitch-product-sybase   //  -> sybase方言实现类
-                    ├── dbswitch-product-hive     //  -> hive方言实现类
-                    ├── dbswitch-product-sqlite   //  -> sqlite方言实现类
-                    ├── dbswitch-product-openguass//  -> openguass方言实现类
-                    ├── dbswitch-product-mongodb  //  -> mongodb方言实现类
-                ├── dbswitch-data                 // 工具入口模块，读取配置文件中的参数执行异构迁移同步
-                ├── dbswitch-admin                // 在以上模块的基础上引入Quartz的调度服务与接口
-                ├── dbswitch-admin-ui             // 基于Vue2的前段WEB交互页面
-                ├── dbswitch-dist                 // 基于maven-assembly-plugin插件的项目打包模块
+                ├── dbswitch-common                   // dbswitch通用定义模块
+                ├── dbswitch-core                     // dbswitch迁移同步实现类
+                ├── dbswitch-product                  // dbswitch数据库方言
+                    ├── dbswitch-product-mysql        //  -> mysql方言实现类
+                    ├── dbswitch-product-oracle       //  -> oracle方言实现类
+                    ├── dbswitch-product-sqlserver    //  -> sqlserver方言实现类
+                    ├── dbswitch-product-postgres     //  -> postgres方言实现类
+                    ├── dbswitch-product-dm           //  -> dm方言实现类
+                    ├── dbswitch-product-kingbase     //  -> kingbase方言实现类
+                    ├── dbswitch-product-oscar        //  -> oscar方言实现类
+                    ├── dbswitch-product-gbase        //  -> gbase方言实现类
+                    ├── dbswitch-product-mariadb      //  -> mariadb方言实现类
+                    ├── dbswitch-product-openguass    //  -> openguass方言实现类
+                    ├── dbswitch-product-db2          //  -> db2方言实现类
+                    ├── dbswitch-product-sybase       //  -> sybase方言实现类
+                    ├── dbswitch-product-hive         //  -> hive方言实现类
+                    ├── dbswitch-product-sqlite       //  -> sqlite方言实现类
+                    ├── dbswitch-product-clickhouse   //  -> clickhouse方言实现类
+                    ├── dbswitch-product-mongodb      //  -> mongodb方言实现类
+                ├── dbswitch-data                     // 工具入口模块，读取配置文件中的参数执行异构迁移同步
+                ├── dbswitch-admin                    // 在以上模块的基础上引入Quartz的调度服务与接口
+                ├── dbswitch-admin-ui                 // 基于Vue2的前段WEB交互页面
+                ├── dbswitch-dist                     // 基于maven-assembly-plugin插件的项目打包模块
                </pre>
              </p>
              <ul>
--- a/dbswitch-admin-ui/src/views/task/assignment.vue
+++ b/dbswitch-admin-ui/src/views/task/assignment.vue
@@ -46,13 +46,13 @@
                         min-width="30%">
          <template slot-scope="scope">
            <el-button size="small"
-                       type="danger"
+                       type="primary"
                       icon="el-icon-timer"
                       v-if="scope.row.isPublished===false"
                       @click="handlePublish(scope.$index, scope.row)"
                       circle>发布</el-button>
            <el-button size="small"
-                       type="primary"
+                       type="info"
                       icon="el-icon-delete-location"
                       v-if="scope.row.isPublished===true"
                       @click="handleRetireTask(scope.$index, scope.row)"
@@ -63,6 +63,12 @@
                       v-if="scope.row.isPublished===true"
                       @click="handleRunTask(scope.$index, scope.row)"
                       circle>执行</el-button>
+            <el-button size="small"
+                       type="success"
+                       icon="el-icon-document"
+                       v-if="scope.row.isPublished===true"
+                       @click="handleDetail(scope.$index, scope.row)"
+                       circle>详情</el-button>
            <el-button size="small"
                       type="warning"
                       icon="el-icon-edit"
@@ -70,7 +76,7 @@
                       @click="handleUpdate(scope.$index, scope.row)"
                       circle>修改</el-button>
            <el-button size="small"
-                       type="success"
+                       type="danger"
                       icon="el-icon-delete"
                       v-if="scope.row.isPublished===false"
                       @click="handleDelete(scope.$index, scope.row)"
@@ -153,6 +159,9 @@ export default {
    handleCreate: function () {
      this.$router.push('/task/create')
    },
+    handleDetail: function (index, row) {
+      this.$router.push({ path: '/task/detail', query: { id: row.id } })
+    },
    handleUpdate: function (index, row) {
      this.$router.push({ path: '/task/update', query: { id: row.id } })
    },
--- a/dbswitch-admin-ui/src/views/task/detail.vue
+++ b/dbswitch-admin-ui/src/views/task/detail.vue
@@ -0,0 +1,263 @@
+<template>
+  <el-card>
+    <el-form :model="updateform"
+             status-icon
+             :rules="rules"
+             ref="updateform">
+      <el-descriptions size="small"
+                       :column="1"
+                       label-class-name="el-descriptions-item-label-class"
+                       border>
+        <el-descriptions-item label="任务名称">{{updateform.name}}</el-descriptions-item>
+        <el-descriptions-item label="任务描述">{{updateform.description}}</el-descriptions-item>
+        <el-descriptions-item label="调度方式">
+          <span v-if="updateform.scheduleMode == 'MANUAL'">
+            手动执行
+          </span>
+          <span v-if="updateform.scheduleMode == 'SYSTEM_SCHEDULED'">
+            系统调度
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="updateform.scheduleMode == 'SYSTEM_SCHEDULED'"
+                              label="CRON表达式">{{updateform.cronExpression}}</el-descriptions-item>
+        <el-descriptions-item label="源端数据源">[{{updateform.sourceConnectionId}}]{{sourceConnection.name}}</el-descriptions-item>
+        <el-descriptions-item label="源端schema">{{updateform.sourceSchema}}</el-descriptions-item>
+        <el-descriptions-item label="源端表类型">{{updateform.tableType}}</el-descriptions-item>
+        <el-descriptions-item label="源端表选择方式">
+          <span v-if="updateform.includeOrExclude == 'INCLUDE'">
+            包含表
+          </span>
+          <span v-if="updateform.includeOrExclude == 'EXCLUDE'">
+            排除表
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item label="源端表名列表">
+          <span v-show="updateform.includeOrExclude == 'INCLUDE' && (!updateform.sourceTables || updateform.sourceTables.length==0)"><b>所有物理表</b></span>
+          <p v-for="item in updateform.sourceTables"
+             v-bind:key="item">{{item}}</p>
+        </el-descriptions-item>
+        <el-descriptions-item label="目地端数据源">[{{updateform.targetConnectionId}}]{{targetConnection.name}}</el-descriptions-item>
+        <el-descriptions-item label="目地端schema">{{updateform.targetSchema}}</el-descriptions-item>
+        <el-descriptions-item label="只创建表">{{updateform.targetOnlyCreate}}</el-descriptions-item>
+        <el-descriptions-item label="删除同名表">{{updateform.targetDropTable}}</el-descriptions-item>
+        <el-descriptions-item label="数据处理批次量">{{updateform.batchSize}}</el-descriptions-item>
+        <el-descriptions-item label="表名大小写转换">
+          <span v-if="updateform.tableNameCase == 'NONE'">
+            无转换
+          </span>
+          <span v-if="updateform.tableNameCase == 'UPPER'">
+            转大写
+          </span>
+          <span v-if="updateform.tableNameCase == 'LOWER'">
+            转小写
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item label="列名大小写转换">
+          <span v-if="updateform.columnNameCase == 'NONE'">
+            无转换
+          </span>
+          <span v-if="updateform.columnNameCase == 'UPPER'">
+            转大写
+          </span>
+          <span v-if="updateform.columnNameCase == 'LOWER'">
+            转小写
+          </span>
+        </el-descriptions-item>
+        <el-descriptions-item label="表名映射规则">
+          <span v-show="!updateform.tableNameMapper || updateform.tableNameMapper.length==0">[映射关系为空]</span>
+          <table v-if="updateform.tableNameMapper && updateform.tableNameMapper.length>0"
+                 class="name-mapper-table">
+            <tr>
+              <th>表名匹配的正则名</th>
+              <th>替换的目标值</th>
+            </tr>
+            <tr v-for='(item,index) in updateform.tableNameMapper'
+                :key="index">
+              <td>{{item['fromPattern']}}</td>
+              <td>{{item['toValue']}}</td>
+            </tr>
+          </table>
+        </el-descriptions-item>
+        <el-descriptions-item label="字段名映射规则">
+          <span v-show="!updateform.columnNameMapper || updateform.columnNameMapper.length==0">[映射关系为空]</span>
+          <table v-if="updateform.columnNameMapper && updateform.columnNameMapper.length>0"
+                 class="name-mapper-table">
+            <tr>
+              <th>字段名匹配的正则名</th>
+              <th>替换的目标值</th>
+            </tr>
+            <tr v-for='(item,index) in updateform.columnNameMapper'
+                :key="index">
+              <td>{{item['fromPattern']}}</td>
+              <td>{{item['toValue']}}</td>
+            </tr>
+          </table>
+        </el-descriptions-item>
+      </el-descriptions>
+
+    </el-form>
+    <el-button type="primary"
+               icon="el-icon-arrow-left"
+               @click="handleGoBack">
+      返回
+    </el-button>
+  </el-card>
+</template>
+
+<script>
+export default {
+
+  data () {
+    return {
+      updateform: {
+        id: 0,
+        name: "",
+        description: "",
+        scheduleMode: "MANUAL",
+        cronExpression: "",
+        sourceConnectionId: '请选择',
+        sourceSchema: "",
+        tableType: "TABLE",
+        includeOrExclude: "",
+        sourceTables: [],
+        tableNameMapper: [],
+        columnNameMapper: [],
+        tableNameCase: 'NONE',
+        columnNameCase: 'NONE',
+        targetConnectionId: '请选择',
+        targetDropTable: true,
+        targetOnlyCreate: false,
+        targetSchema: "",
+        batchSize: 5000
+      },
+      sourceConnection: {},
+      targetConnection: {},
+      sourceConnectionSchemas: [],
+      sourceSchemaTables: [],
+      targetConnectionSchemas: [],
+    }
+  },
+  methods: {
+    loadAssignmentDetail: function () {
+      this.$http.get(
+        "/dbswitch/admin/api/v1/assignment/detail/id/" + this.$route.query.id
+      ).then(res => {
+        if (0 === res.data.code) {
+          let detail = res.data.data;
+          this.updateform = {
+            id: detail.id,
+            name: detail.name,
+            description: detail.description,
+            scheduleMode: detail.scheduleMode,
+            cronExpression: detail.cronExpression,
+            sourceConnectionId: detail.configuration.sourceConnectionId,
+            sourceSchema: detail.configuration.sourceSchema,
+            tableType: detail.configuration.tableType,
+            includeOrExclude: detail.configuration.includeOrExclude,
+            sourceTables: detail.configuration.sourceTables,
+            tableNameMapper: detail.configuration.tableNameMapper,
+            columnNameMapper: detail.configuration.columnNameMapper,
+            tableNameCase: detail.configuration.tableNameCase,
+            columnNameCase: detail.configuration.columnNameCase,
+            targetConnectionId: detail.configuration.targetConnectionId,
+            targetDropTable: detail.configuration.targetDropTable,
+            targetOnlyCreate: detail.configuration.targetOnlyCreate,
+            targetSchema: detail.configuration.targetSchema,
+            batchSize: detail.configuration.batchSize
+          }
+          this.selectChangedSourceConnection(this.updateform.sourceConnectionId)
+          this.selectUpdateChangedSourceSchema(this.updateform.sourceSchema)
+          this.selectChangedTargetConnection(this.updateform.targetConnectionId)
+        } else {
+          if (res.data.message) {
+            alert("查询任务失败," + res.data.message);
+          }
+        }
+      });
+    },
+    selectChangedSourceConnection: function (value) {
+      this.sourceConnection = this.connectionNameList.find(
+        (item) => {
+          return item.id === value;
+        });
+
+      this.sourceConnectionSchemas = [];
+      this.$http.get(
+        "/dbswitch/admin/api/v1/connection/schemas/get/" + value
+      ).then(res => {
+        if (0 === res.data.code) {
+          this.sourceConnectionSchemas = res.data.data;
+        } else {
+          this.$message.error("查询来源端数据库的Schema失败," + res.data.message);
+          this.sourceConnectionSchemas = [];
+        }
+      });
+    },
+    selectUpdateChangedSourceSchema: function (value) {
+      this.sourceSchemaTables = [];
+      if ('TABLE' === this.updateform.tableType) {
+        this.$http.get(
+          "/dbswitch/admin/api/v1/connection/tables/get/" + this.updateform.sourceConnectionId + "?schema=" + value
+        ).then(res => {
+          if (0 === res.data.code) {
+            this.sourceSchemaTables = res.data.data;
+          } else {
+            this.$message.error("查询来源端数据库在指定Schema下的物理表列表失败," + res.data.message);
+            this.sourceSchemaTables = [];
+          }
+        });
+      } else {
+        this.$http.get(
+          "/dbswitch/admin/api/v1/connection/views/get/" + this.updateform.sourceConnectionId + "?schema=" + value
+        ).then(res => {
+          if (0 === res.data.code) {
+            this.sourceSchemaTables = res.data.data;
+          } else {
+            this.$message.error("查询来源端数据库在指定Schema下的视图表列表失败," + res.data.message);
+            this.sourceSchemaTables = [];
+          }
+        });
+      }
+    },
+    selectChangedTargetConnection: function (value) {
+      this.targetConnection = this.connectionNameList.find(
+        (item) => {
+          return item.id === value;
+        });
+
+      this.targetConnectionSchemas = [];
+      this.$http.get(
+        "/dbswitch/admin/api/v1/connection/schemas/get/" + value
+      ).then(res => {
+        if (0 === res.data.code) {
+          this.targetConnectionSchemas = res.data.data;
+        } else {
+          this.$message.error("查询目的端数据库的Schema失败," + res.data.message);
+          this.targetConnectionSchemas = [];
+        }
+      });
+    },
+    handleGoBack () {
+      this.$router.go(-1);
+    },
+  },
+  created () {
+    this.loadAssignmentDetail();
+  },
+}
+</script>
+
+<style scoped>
+.el-card {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.el-descriptions__body
+  .el-descriptions__table
+  .el-descriptions-row
+  .el-descriptions-item__label {
+  min-width: 20px;
+  max-width: 60px;
+}
+</style>