fix(接口测试): sql 查询多表格式化优化

frontend/src/business/components/api/report/components/ResponseText.vue

@@ -7,8 +7,8 @@
     <el-collapse-transition>
       <el-tabs v-model="activeName" v-show="isActive">
         <el-tab-pane :class="'body-pane'" label="Body" name="body" class="pane">
-          <ms-sql-result-table v-if="isSqlType" :body="response.body"/>
-          <ms-code-edit v-if="!isSqlType" :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
+          <ms-sql-result-table v-if="isSqlType && mode == 'table'" :body="response.body"/>
+          <ms-code-edit v-if="mode != 'table'" :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
         </el-tab-pane>
         <el-tab-pane label="Headers" name="headers" class="pane">
           <pre>{{ response.headers }}</pre>
@@ -21,9 +21,10 @@
           <pre>{{response.vars}}</pre>
         </el-tab-pane>
 
-        <el-tab-pane v-if="activeName == 'body' && !isSqlType" :disabled="true" name="mode" class="pane assertions">
+        <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
           <template v-slot:label>
-            <ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
+            <ms-dropdown v-if="!isSqlType" :commands="modes" :default-command="mode" @command="modeChange"/>
+            <ms-dropdown v-if="isSqlType" :commands="sqlModes" :default-command="mode" @command="sqlModeChange"/>
           </template>
         </el-tab-pane>
 
@@ -59,6 +60,7 @@ export default {
       isActive: true,
       activeName: "body",
       modes: ['text', 'json', 'xml', 'html'],
+      sqlModes: ['text', 'table'],
       mode: BODY_FORMAT.TEXT
     }
   },
@@ -69,6 +71,9 @@ export default {
     },
     modeChange(mode) {
       this.mode = mode;
+    },
+    sqlModeChange(mode) {
+      this.mode = mode;
     }
   },
 

frontend/src/business/components/api/report/components/SqlResultTable.vue

@@ -1,10 +1,13 @@
 <template>
+  <div>
     <el-table
-    :data="tableData"
+      v-for="(table, index) in tables"
+      :key="index"
+      :data="table.tableData"
       border
       size="mini"
       highlight-current-row>
-    <el-table-column v-for="(title, index) in titles" :key="index" :label="title" min-width="15%">
+      <el-table-column v-for="(title, index) in table.titles" :key="index" :label="title" min-width="150px">
         <template v-slot:default="scope">
           <el-popover
             placement="top"
@@ -17,6 +20,7 @@
         </template>
       </el-table-column>
     </el-table>
+  </div>
 </template>
 
 <script>
@@ -24,7 +28,7 @@
       name: "MsSqlResultTable",
       data() {
         return {
-          tableData: [],
+          tables: [],
           titles: []
         }
       },
@@ -36,29 +40,71 @@
           return;
         }
         let rowArry = this.body.split("\n");
-        let title;
+        this.getTableData(rowArry);
+        if (this.tables.length > 1) {
+          for (let i = 0; i < this.tables.length; i++) {
+            if (this.tables[i].titles.length === 1 && i < this.tables.length - 1) {
+              this.tables[i].tableData.splice(this.tables[i].tableData.length - 1, 1);
+            }
+          }
+
+          let lastTable = this.tables[this.tables.length - 1];
+          if (lastTable.titles.length === 1) {
+            if (lastTable.tableData.length > 4) {
+              lastTable.tableData.splice(lastTable.tableData.length - 4, 4);
+            } else {
+              this.tables.splice(this.tables.length - 1, 1);
+            }
+          } else {
+            this.tables.splice(this.tables.length - 1, 1);
+          }
+        } else {
+          let table = this.tables[0];
+          table.tableData.splice(table.tableData.length - 4, 4);
+        }
+      },
+      methods: {
+        getTableData(rowArry) {
+          let titles;
           let result = [];
           for (let i = 0; i < rowArry.length; i++) {
             let colArray = rowArry[i].split("\t");
             if (i === 0) {
-            title = colArray;
+              titles = colArray;
+            } else {
+              if (colArray.length != titles.length) {
+                // 创建新的表
+                if (colArray.length === 1 && colArray[0] === '') {
+                  this.getTableData(rowArry.slice(i + 1));
+                } else {
+                  this.getTableData(rowArry.slice(i));
+                }
+                break;
               } else {
                 let item = {};
                 for (let j = 0; j < colArray.length; j++) {
-              item[title[j]] = (colArray[j] ? colArray[j] : "");
+                  item[titles[j]] = (colArray[j] ? colArray[j] : "");
                 }
                 result.push(item);
               }
             }
-        this.titles = title;
-        this.tableData = result;
-        this.tableData.splice(this.tableData.length - 3, 3);
+          }
+
+          this.tables.splice(0, 0, {
+            titles: titles,
+            tableData: result
+          });
+        }
       }
     }
 </script>
 
 <style scoped>
 
+  .el-table {
+    margin-bottom: 20px;
+  }
+
   .el-table >>> .cell {
     white-space: nowrap;
   }