feat(接口测试): 场景数据库配置页面

frontend/src/business/components/api/test/components/ApiScenarioForm.vue

@@ -37,6 +37,9 @@
                           :environment="scenario.environment"
                           :description="$t('api_test.scenario.kv_description')"/>
       </el-tab-pane>
+      <el-tab-pane :label="'数据库配置'" name="database">
+        <ms-database-config :configs="scenario.databaseConfigs"/>
+      </el-tab-pane>
       <el-tab-pane :label="$t('api_test.scenario.dubbo')" name="dubbo">
         <div class="dubbo-config-title">Config Center</div>
         <ms-dubbo-config-center :config="scenario.dubboConfig.configCenter" :is-read-only="isReadOnly"/>
@@ -62,10 +65,12 @@ import {REQUEST_HEADERS} from "@/common/js/constants";
 import MsDubboRegistryCenter from "@/business/components/api/test/components/request/dubbo/RegistryCenter";
 import MsDubboConfigCenter from "@/business/components/api/test/components/request/dubbo/ConfigCenter";
 import MsDubboConsumerService from "@/business/components/api/test/components/request/dubbo/ConsumerAndService";
+import MsDatabaseConfig from "./request/database/DatabaseConfig";
 
 export default {
   name: "MsApiScenarioForm",
   components: {
+    MsDatabaseConfig,
     MsDubboConsumerService,
     MsDubboConfigCenter, MsDubboRegistryCenter, ApiEnvironmentConfig, MsApiScenarioVariables, MsApiKeyValue
   },

frontend/src/business/components/api/test/components/request/database/DatabaseConfig.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <ms-database-from :config="currentConfig" @save="addConfig" ref="databaseFrom"/>
+    <ms-database-config-list v-if="configs.length > 0" :table-data="configs"/>
+  </div>
+</template>
+
+<script>
+    import MsDatabaseConfigList from "./DatabaseConfigList";
+    import {DatabaseConfig} from "../../../model/ScenarioModel";
+    import MsDatabaseFrom from "./DatabaseFrom";
+    import {getUUID} from "../../../../../../../common/js/utils";
+
+    export default {
+      name: "MsDatabaseConfig",
+      components: {MsDatabaseFrom, MsDatabaseConfigList},
+      props: {
+        configs: Array,
+        isReadOnly: {
+          type: Boolean,
+          default: false
+        },
+      },
+      data() {
+        return {
+          drivers: DatabaseConfig.DRIVER_CLASS,
+          currentConfig: new DatabaseConfig()
+        }
+      },
+      methods: {
+        addConfig(config) {
+          for (let item of this.configs) {
+            if (item.name === config.name) {
+              this.$warning("名称重复");
+              return;
+            }
+          }
+          config.id = getUUID();
+          this.configs.push(config);
+          this.currentConfig =  new DatabaseConfig();
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .addButton {
+    float: right;
+  }
+
+  .database-from {
+    padding: 10px;
+    border: #DCDFE6 solid 1px;
+    margin: 5px 0;
+    border-radius: 5px;
+  }
+
+</style>

frontend/src/business/components/api/test/components/request/database/DatabaseConfigDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-dialog :title="'数据库配置'" :visible.sync="visible">
+    <ms-database-from :config="config" @save="editConfig"/>
+  </el-dialog>
+</template>
+
+<script>
+    import MsDatabaseConfigList from "./DatabaseConfigList";
+    import MsDatabaseFrom from "./DatabaseFrom";
+    import {DatabaseConfig} from "../../../model/ScenarioModel";
+
+    export default {
+      name: "MsDatabaseConfigDialog",
+      components: {MsDatabaseFrom, MsDatabaseConfigList},
+      props: {
+        configs: Array,
+        isReadOnly: {
+          type: Boolean,
+          default: false
+        },
+      },
+      data() {
+        return {
+          visible: false,
+          config: new DatabaseConfig(),
+        }
+      },
+      methods: {
+        open(config) {
+          this.visible = true;
+          Object.assign(this.config, config);
+        },
+        editConfig(config) {
+          let currentConfig = undefined;
+          for (let item of this.configs) {
+            if (item.name === config.name && item.id != config.id) {
+              this.$warning("名称重复");
+              return;
+            }
+            if (item.id === config.id) {
+              currentConfig = item;
+            }
+          }
+          if (currentConfig) {
+            Object.assign(currentConfig, config)
+          } else {
+            //copy
+            this.configs.push(config);
+          }
+          this.visible = false;
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/api/test/components/request/database/DatabaseConfigList.vue

@@ -0,0 +1,92 @@
+<template>
+  <ms-main-container>
+
+    <el-table border :data="tableData" class="adjust-table table-content"
+              @row-click="handleView">
+
+      <el-table-column prop="name" :label="'连接池名称'" show-overflow-tooltip/>
+      <el-table-column prop="driver" :label="'数据库驱动'"  show-overflow-tooltip/>
+      <el-table-column prop="dbUrl" :label="'数据库连接URL'" show-overflow-tooltip/>
+      <el-table-column prop="username" :label="'用户名'"  show-overflow-tooltip/>
+      <el-table-column prop="poolMax" :label="'最大连接数'" show-overflow-tooltip/>
+      <el-table-column prop="timeout" :label="'最大等待时间'"  show-overflow-tooltip/>
+
+      <el-table-column
+        :label="$t('commons.operating')" min-width="100">
+        <template v-slot:default="scope">
+          <ms-table-operator :is-tester-permission="true" @editClick="handleEdit(scope.row)"
+                             @deleteClick="handleDelete(scope.$index)">
+            <template v-slot:middle>
+              <ms-table-operator-button :is-tester-permission="true" :tip="$t('commons.copy')"
+                                        icon="el-icon-document-copy"
+                                        type="success" @exec="handleCopy(scope.row)"/>
+            </template>
+          </ms-table-operator>
+        </template>
+      </el-table-column>
+
+    </el-table>
+
+    <ms-database-config-dialog :configs="tableData" ref="databaseConfigEdit"/>
+
+  </ms-main-container>
+</template>
+
+<script>
+
+    import {DatabaseConfig} from "../../../model/ScenarioModel";
+    import MsMainContainer from "../../../../../common/components/MsMainContainer";
+    import MsTableOperator from "../../../../../common/components/MsTableOperator";
+    import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
+    import MsDatabaseConfigDialog from "./DatabaseConfigDialog";
+    import {getUUID} from "../../../../../../../common/js/utils";
+
+    export default {
+      name: "MsDatabaseConfigList",
+      components: {MsDatabaseConfigDialog, MsTableOperatorButton, MsTableOperator, MsMainContainer},
+      props: {
+        tableData: Array,
+        isReadOnly: {
+          type: Boolean,
+          default: false
+        }
+      },
+      data() {
+        return {
+          drivers: DatabaseConfig.DRIVER_CLASS,
+          result: {},
+        }
+      },
+      methods: {
+        handleView() {
+        },
+        handleEdit(config) {
+          this.$refs.databaseConfigEdit.open(config);
+        },
+        handleDelete(index) {
+          this.tableData.splice(index, 1);
+        },
+        handleCopy(config) {
+          let copy = {};
+          Object.assign(copy, config);
+          copy.id = getUUID();
+          this.$refs.databaseConfigEdit.open(copy);
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .addButton {
+    float: right;
+  }
+
+  .database-from {
+    padding: 10px;
+    border: #DCDFE6 solid 1px;
+    margin: 5px 0;
+    border-radius: 5px;
+  }
+
+</style>

frontend/src/business/components/api/test/components/request/database/DatabaseFrom.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <el-form :model="config" :rules="rules" label-width="150px" size="small" :disabled="isReadOnly" class="database-from" ref="databaseFrom">
+
+      <el-form-item :label="'连接池名称'" prop="name">
+        <el-input v-model="config.name" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+
+      <el-form-item :label="'数据库连接URL'" prop="dbUrl">
+        <el-input v-model="config.dbUrl" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+
+      <el-form-item :label="'数据库驱动'" prop="driver">
+        <el-select v-model="config.driver" class="select-100" clearable>
+          <el-option v-for="p in drivers" :key="p" :label="p" :value="p"/>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="'用户名'" prop="username">
+        <el-input v-model="config.username" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+
+      <el-form-item :label="'密码'" prop="password">
+        <el-input v-model="config.password" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+
+      <el-form-item :label="'最大连接数'" prop="poolMax">
+        <el-input-number size="small" :disabled="isReadOnly" v-model="config.poolMax" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
+      </el-form-item>
+
+
+      <el-form-item :label="'最大等待时间(ms)'" prop="timeout">
+        <el-input-number size="small" :disabled="isReadOnly" v-model="config.timeout" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" size="small" class="addButton" @click="save">添加</el-button>
+      </el-form-item>
+
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+    import {DatabaseConfig} from "../../../model/ScenarioModel";
+
+    export default {
+      name: "MsDatabaseFrom",
+      components: {},
+      props: {
+        isReadOnly: {
+          type: Boolean,
+          default: false
+        },
+        config: {
+          type: Object,
+          default() {
+            return new DatabaseConfig();
+          }
+        },
+      },
+      data() {
+        return {
+          drivers: DatabaseConfig.DRIVER_CLASS,
+          // config: new DatabaseConfig(),
+          rules: {
+            name: [
+              {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
+              {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+            ],
+            driver: [
+              {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
+            ],
+            password: [
+              {max: 200, message: this.$t('commons.input_limit', [0, 200]), trigger: 'blur'}
+            ],
+            dbUrl: [
+              {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
+              {max: 500, message: this.$t('commons.input_limit', [0, 500]), trigger: 'blur'}
+            ],
+            username: [
+              {required: true, message: this.$t('commons.input_name'), trigger: 'blur'},
+              {max: 200, message: this.$t('commons.input_limit', [0, 200]), trigger: 'blur'}
+            ]
+          }
+        }
+      },
+      methods: {
+        save() {
+          this.$refs['databaseFrom'].validate((valid) => {
+            if (valid) {
+              this.$emit('save', this.config);
+              // this.config = new DatabaseConfig();
+            } else {
+              return false;
+            }
+          });
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .addButton {
+    float: right;
+  }
+
+  .database-from {
+    padding: 10px;
+    border: #DCDFE6 solid 1px;
+    margin: 5px 0;
+    border-radius: 5px;
+  }
+
+</style>

frontend/src/business/components/api/test/model/ScenarioModel.js

@@ -211,14 +211,16 @@ export class Scenario extends BaseConfig {
     this.environment = undefined;
     this.enableCookieShare = false;
     this.enable = true;
+    this.databaseConfigs = undefined;
 
     this.set(options);
-    this.sets({variables: KeyValue, headers: KeyValue, requests: RequestFactory}, options);
+    this.sets({variables: KeyValue, headers: KeyValue, requests: RequestFactory, databaseConfigs: DatabaseConfig}, options);
   }
 
   initOptions(options = {}) {
     options.id = options.id || uuid();
     options.requests = options.requests || [new RequestFactory()];
+    options.databaseConfigs = options.databaseConfigs || [];
     options.dubboConfig = new DubboConfig(options.dubboConfig);
     return options;
   }
@@ -479,6 +481,51 @@ export class ConfigCenter extends BaseConfig {
   }
 }
 
+export class DatabaseConfig extends BaseConfig {
+  static DRIVER_CLASS = ["com.mysql.jdbc.Driver"];
+
+  constructor(options) {
+    super();
+    this.id = undefined;
+    this.name = undefined;
+    this.poolMax = undefined;
+    this.timeout = undefined;
+    this.driver = undefined;
+    this.dbUrl = undefined;
+    this.username = undefined;
+    this.password = undefined;
+
+    this.set(options);
+  }
+
+  initOptions(options = {}) {
+    // options.id = options.id || uuid();
+    return options;
+  }
+// <JDBCDataSource guiclass="TestBeanGUI" testclass="JDBCDataSource" testname="JDBC Connection Configurationqqq" enabled="true">
+//     <boolProp name="autocommit">true</boolProp>
+//     <stringProp name="checkQuery"></stringProp>
+//     <stringProp name="connectionAge">5000</stringProp>
+//     <stringProp name="connectionProperties"></stringProp>
+//     <stringProp name="dataSource">test</stringProp>
+//     <stringProp name="dbUrl">jdbc:mysql://localhost:3306/metersphere?autoReconnect=false&amp;useUnicode=true&amp;characterEncoding=UTF-8&amp;characterSetResults=UTF-8&amp;zeroDateTimeBehavior=convertToNull&amp;allowMultiQueries=true</stringProp>
+//     <stringProp name="driver">com.mysql.jdbc.Driver</stringProp>
+//     <stringProp name="initQuery"></stringProp>
+//     <boolProp name="keepAlive">true</boolProp>
+//     <stringProp name="password">root</stringProp>
+//     <stringProp name="poolMax">10</stringProp>
+//     <boolProp name="preinit">false</boolProp>
+//     <stringProp name="timeout">10000</stringProp>
+//     <stringProp name="transactionIsolation">DEFAULT</stringProp>
+//     <stringProp name="trimInterval">60000</stringProp>
+//     <stringProp name="username">root</stringProp>
+//     </JDBCDataSource>
+
+  isValid() {
+    return !!this.name || !!this.poolMax || !!this.timeout || !!this.driver || !!this.dbUrl || !!this.username || !!this.password;
+  }
+}
+
 export class RegistryCenter extends BaseConfig {
   static PROTOCOLS = ["none", "zookeeper", "nacos", "apollo", "multicast", "redis", "simple"];