refactor(接口测试): 修改数据库配置样式

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

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <ms-database-from :config="currentConfig" :callback="addConfig" ref="databaseFrom"/>
+    <ms-database-from :config="currentConfig" :callback="saveConfig" ref="databaseFrom"/>
-    <ms-database-config-list v-if="configs.length > 0" :table-data="configs"/>
+    <ms-database-config-list @rowSelect="rowSelect" v-if="configs.length > 0" :table-data="configs"/>
   </div>
 </template>
 
@@ -28,19 +28,33 @@
         }
       },
       methods: {
-        addConfig(config) {
+        saveConfig(config) {
           for (let item of this.configs) {
-            if (item.name === config.name) {
+            if (item.name === config.name && item.id != config.id) {
               this.$warning(this.$t('commons.already_exists'));
               return;
             }
           }
+          if (config.id) {
+            this.updateConfig(config);
+          } else {
+            this.addConfig(config);
+          }
+        },
+        addConfig(config) {
           config.id = getUUID();
           let item = {};
           Object.assign(item, config);
           this.configs.push(item);
           this.currentConfig = new DatabaseConfig();
         },
+        updateConfig(config) {
+          Object.assign(this.currentConfig, config);
+          this.currentConfig = new DatabaseConfig();
+        },
+        rowSelect(config) {
+          this.currentConfig = config;
+        }
       }
     }
 </script>

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

@@ -1,14 +1,11 @@
 <template>
   <div class="database-config-list">
 
-    <el-table border :data="tableData" class="adjust-table table-content"
+    <el-table border :data="tableData"
+              class="adjust-table table-content"
+              highlight-current-row
               @row-click="handleView">
 
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <ms-database-from :callback="editConfig" :config="props.row"/>
-        </template>
-      </el-table-column>
       <el-table-column prop="name" :label="$t('api_test.request.sql.dataSource')" show-overflow-tooltip/>
       <el-table-column prop="driver" :label="$t('api_test.request.sql.database_driver')"  show-overflow-tooltip/>
       <el-table-column prop="dbUrl" :label="$t('api_test.request.sql.database_url')" show-overflow-tooltip/>
@@ -34,11 +31,10 @@
     import MsTableOperator from "../../../../../common/components/MsTableOperator";
     import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
     import {getUUID} from "../../../../../../../common/js/utils";
-    import MsDatabaseFrom from "./DatabaseFrom";
 
     export default {
       name: "MsDatabaseConfigList",
-      components: {MsDatabaseFrom, MsTableOperatorButton, MsTableOperator},
+      components: {MsTableOperatorButton, MsTableOperator},
       props: {
         tableData: Array,
         isReadOnly: {
@@ -53,25 +49,8 @@
         }
       },
       methods: {
-        handleView() {
+        handleView(row) {
-        },
+          this.$emit('rowSelect', row);
-        handleEdit(config) {
-          this.$refs.databaseConfigEdit.open(config);
-        },
-        editConfig(config) {
-          let index = 0;
-          for (let i in this.tableData) {
-            let item = this.tableData[i];
-            if (item.name === config.name && item.id != config.id) {
-              this.$warning(this.$t('commons.already_exists'));
-              return;
-            }
-            if (item.id === config.id) {
-              index = i;
-            }
-          }
-          Object.assign(this.tableData[index], config);
-          this.$success(this.$t('commons.save_success'));
         },
         handleDelete(index) {
           this.tableData.splice(index, 1);

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

@@ -38,7 +38,10 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" size="small" class="addButton" @click="save">{{currentConfig.id ? $t('commons.save') : $t('commons.add')}}</el-button>
+        <div class="buttons">
+          <el-button type="primary" v-show="currentConfig.id" size="small" @click="save('update')">{{$t('commons.update')}}</el-button>
+          <el-button type="primary" size="small" @click="save('add')">{{$t('commons.add')}}</el-button>
+        </div>
       </el-form-item>
 
     </el-form>
@@ -102,10 +105,13 @@
         }
       },
       methods: {
-        save() {
+        save(type) {
           this.$refs['databaseFrom'].validate((valid) => {
             if (valid) {
               if (this.callback) {
+                if (type === 'add') {
+                  this.currentConfig.id = undefined;
+                }
                 this.callback(this.currentConfig);
               }
             } else {
@@ -119,7 +125,7 @@
 
 <style scoped>
 
-  .addButton {
+  .buttons {
     float: right;
   }
 

frontend/src/i18n/en-US.js

@@ -13,6 +13,7 @@ export default {
     annotation: 'Annotation',
     clear: 'Clear',
     save: 'Save',
+    update: 'Update',
     save_success: 'Saved successfully',
     delete_success: 'Deleted successfully',
     modify_success: 'Modify Success',

frontend/src/i18n/zh-CN.js

@@ -13,6 +13,7 @@ export default {
     annotation: '注释',
     clear: '清空',
     save: '保存',
+    update: '更新',
     save_success: '保存成功',
     delete_success: '删除成功',
     copy_success: '复制成功',

frontend/src/i18n/zh-TW.js

@@ -13,6 +13,7 @@ export default {
     annotation: '註釋',
     clear: '清空',
     save: '保存',
+    update: '更新',
     save_success: '保存成功',
     delete_success: '刪除成功',
     copy_success: '復制成功',