dbswitch/dbswitch-admin-ui/src/views/task/detail.vue

<template>
  <el-card>
    <el-form :model="updateform"
             status-icon
             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}}]{{updateform.sourceConnectionName}}</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}}]{{updateform.targetConnectionName}}</el-descriptions-item>
        <el-descriptions-item label="目地端schema">{{updateform.targetSchema}}</el-descriptions-item>
        <el-descriptions-item label="自动同步模式">
          <span v-if="updateform.autoSyncMode == 2">
            目标端建表并同步数据
          </span>
          <span v-if="updateform.autoSyncMode == 1">
            目标端只创建物理表
          </span>
          <span v-if="updateform.autoSyncMode == 0">
            目标端只同步表里数据
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="建表字段自增"
                              v-if=" updateform.autoSyncMode!==0 ">{{updateform.targetAutoIncrement}}</el-descriptions-item>
        <el-descriptions-item label="数据批次大小"
                              v-if=" updateform.autoSyncMode!==1 ">{{updateform.batchSize}}</el-descriptions-item>
        <el-descriptions-item label="表名大小写转换"
                              v-if=" updateform.autoSyncMode!==0 ">
          <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="列名大小写转换"
                              v-if=" updateform.autoSyncMode!==0 ">
          <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"
               size="mini"
               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,
        autoSyncMode: 2,
        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;
          let varAutoSyncMode = 2;
          if (detail.configuration.targetDropTable && detail.configuration.targetOnlyCreate) {
            varAutoSyncMode = 1;
          } else if (!detail.configuration.targetDropTable && !detail.configuration.targetOnlyCreate) {
            varAutoSyncMode = 0;
          } else {
            varAutoSyncMode = 2;
          }
          this.updateform = {
            id: detail.id,
            name: detail.name,
            description: detail.description,
            scheduleMode: detail.scheduleMode,
            cronExpression: detail.cronExpression,
            sourceConnectionId: detail.configuration.sourceConnectionId,
            sourceConnectionName: detail.configuration.sourceConnectionName,
            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,
            targetConnectionName: detail.configuration.targetConnectionName,
            targetDropTable: detail.configuration.targetDropTable,
            targetOnlyCreate: detail.configuration.targetOnlyCreate,
            targetAutoIncrement: detail.configuration.targetAutoIncrement,
            autoSyncMode: varAutoSyncMode,
            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>