refactor(接口测试): sql请求结果格式化

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

@@ -23,7 +23,7 @@
                 </el-tabs>
               </el-col>
               <el-col :span="16" style="margin-top: 40px;">
-                <ms-request-result-tail v-if="isRequestResult" :request="request" :scenario-name="scenarioName"/>
+                <ms-request-result-tail v-if="isRequestResult" :request-type="requestType" :request="request" :scenario-name="scenarioName"/>
               </el-col>
             </el-row>
             <ms-api-report-export v-if="reportExportVisible" id="apiTestReport" :title="report.testName" :content="content" :total-time="totalTime"/>
@@ -47,6 +47,7 @@ import MsApiReportExport from "./ApiReportExport";
 import {exportPdf} from "../../../../common/js/utils";
 import html2canvas from "html2canvas";
 import MsApiReportViewHeader from "./ApiReportViewHeader";
+import {RequestFactory} from "../test/model/ScenarioModel";
 
 export default {
   name: "MsApiReportViewDetail",
@@ -67,7 +68,8 @@ export default {
       isRequestResult: false,
       request: {},
       scenarioName: null,
-      reportExportVisible: false
+      reportExportVisible: false,
+      requestType: undefined,
     }
   },
   props: ['reportId'],
@@ -140,6 +142,10 @@ export default {
     },
     requestResult(requestResult) {
       this.isRequestResult = false;
+      this.requestType = undefined;
+      if (requestResult.request.body.indexOf('[Callable Statement]') > -1) {
+        this.requestType = RequestFactory.TYPES.SQL;
+      }
       this.$nextTick(function () {
         this.isRequestResult = true;
         this.request = requestResult.request;

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

@@ -69,14 +69,14 @@
             <ms-request-metric :request="request"/>
             <ms-request-text  :request="request"/>
             <br>
-            <ms-response-text :response="request.responseResult"/>
+            <ms-response-text :request-type="requestType" :response="request.responseResult"/>
           </el-tab-pane>
         </el-tabs>
         <div v-else>
           <ms-request-metric :request="request"/>
           <ms-request-text v-if="isCodeEditAlive" :request="request"/>
           <br>
-          <ms-response-text v-if="isCodeEditAlive" :response="request.responseResult"/>
+          <ms-response-text :request-type="requestType" v-if="isCodeEditAlive" :response="request.responseResult"/>
         </div>
       </div>
     </el-collapse-transition>
@@ -95,7 +95,8 @@
     components: {MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric, MsRequestResult},
     props: {
       request: Object,
-      scenarioName: String
+      scenarioName: String,
+      requestType: String
     },
 
     data() {

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

@@ -6,8 +6,9 @@
     </div>
     <el-collapse-transition>
       <el-tabs v-model="activeName" v-show="isActive">
-        <el-tab-pane label="Body" name="body" class="pane">
+        <el-tab-pane :class="'body-pane'" label="Body" name="body" class="pane">
-          <ms-code-edit :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
+          <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"/>
         </el-tab-pane>
         <el-tab-pane label="Headers" name="headers" class="pane">
           <pre>{{ response.headers }}</pre>
@@ -20,7 +21,7 @@
           <pre>{{response.vars}}</pre>
         </el-tab-pane>
 
-        <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
+        <el-tab-pane v-if="activeName == 'body' && !isSqlType" :disabled="true" name="mode" class="pane assertions">
           <template v-slot:label>
             <ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
           </template>
@@ -35,18 +36,21 @@
 import MsAssertionResults from "./AssertionResults";
 import MsCodeEdit from "../../../common/components/MsCodeEdit";
 import MsDropdown from "../../../common/components/MsDropdown";
-import {BODY_FORMAT} from "../../test/model/ScenarioModel";
+import {BODY_FORMAT, RequestFactory, Request, SqlRequest} from "../../test/model/ScenarioModel";
+import MsSqlResultTable from "./SqlResultTable";
 
 export default {
   name: "MsResponseText",
 
   components: {
+    MsSqlResultTable,
     MsDropdown,
     MsCodeEdit,
     MsAssertionResults,
   },
 
   props: {
+    requestType: String,
     response: Object
   },
 
@@ -75,39 +79,52 @@ export default {
     if (this.response.headers.indexOf("Content-Type: application/json") > 0) {
       this.mode = BODY_FORMAT.JSON;
     }
+  },
+
+  computed: {
+    isSqlType() {
+      return (this.requestType === RequestFactory.TYPES.SQL && this.response.responseCode === '200');
+    }
   }
 }
 </script>
 
 <style scoped>
-.text-container .icon {
-  padding: 5px;
-}
 
-.text-container .collapse {
+  .body-pane {
-  cursor: pointer;
+    padding: 10px !important;
-}
+    background: white !important;
+  }
 
-.text-container .collapse:hover {
+  .text-container .icon {
-  opacity: 0.8;
+    padding: 5px;
-}
+  }
 
-.text-container .icon.is-active {
+  .text-container .collapse {
-  transform: rotate(90deg);
+    cursor: pointer;
-}
+  }
 
-.text-container .pane {
+  .text-container .collapse:hover {
-  background-color: #F5F5F5;
+    opacity: 0.8;
-  padding: 0 10px;
+  }
-  height: 250px;
-  overflow-y: auto;
-}
 
-.text-container .pane.assertions {
+  .text-container .icon.is-active {
-  padding: 0;
+    transform: rotate(90deg);
-}
+  }
+
+  .text-container .pane {
+    background-color: #F5F5F5;
+    padding: 0 10px;
+    height: 250px;
+    overflow-y: auto;
+  }
+
+  .text-container .pane.assertions {
+    padding: 0;
+  }
+
+  pre {
+    margin: 0;
+  }
 
-pre {
-  margin: 0;
-}
 </style>

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

@@ -0,0 +1,75 @@
+<template>
+  <el-table
+    :data="tableData"
+    border
+    size="mini"
+    highlight-current-row>
+    <el-table-column v-for="(title, index) in titles" :key="index" :label="title" min-width="15%">
+      <template v-slot:default="scope">
+        <el-popover
+          placement="top"
+          trigger="click">
+          <el-container>
+            <div>{{ scope.row[title] }}</div>
+          </el-container>
+          <span class="table-content" slot="reference">{{ scope.row[title] }}</span>
+        </el-popover>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+    export default {
+      name: "MsSqlResultTable",
+      data() {
+        return {
+          tableData: [],
+          titles: []
+        }
+      },
+      props: {
+        body: String
+      },
+      created() {
+        if (!this.body) {
+          return;
+        }
+        let rowArry = this.body.split("\n");
+        let title;
+        let result = [];
+        for (let i = 0; i < rowArry.length; i++) {
+          let colArray = rowArry[i].split("\t");
+          if (i === 0) {
+            title = colArray;
+          } else {
+            let item = {};
+            for (let j = 0; j < colArray.length; j++) {
+              item[title[j]] = (colArray[j] ? colArray[j] : "");
+            }
+            result.push(item);
+          }
+        }
+        this.titles = title;
+        this.tableData = result;
+        this.tableData.splice(this.tableData.length - 3, 3);
+      }
+    }
+</script>
+
+<style scoped>
+
+  .el-table >>> .cell {
+    white-space: nowrap;
+  }
+
+  .table-content {
+    cursor: pointer;
+  }
+
+  .el-container {
+    overflow:auto;
+    max-height: 500px;
+  }
+
+</style>

frontend/src/business/components/api/test/components/request/ApiRequestForm.vue

@@ -2,7 +2,7 @@
   <div class="request-form">
     <component @runDebug="runDebug" :is="component" :is-read-only="isReadOnly" :request="request" :scenario="scenario"/>
     <el-divider v-if="isCompleted"></el-divider>
-    <ms-request-result-tail v-loading="debugReportLoading" v-if="isCompleted" :request="request.debugRequestResult ? request.debugRequestResult : {responseResult: {}, subRequestResults: []}"
+    <ms-request-result-tail v-loading="debugReportLoading" v-if="isCompleted" :requestType="request.type" :request="request.debugRequestResult ? request.debugRequestResult : {responseResult: {}, subRequestResults: []}"
                             :scenario-name="request.debugScenario ? request.debugScenario.name : ''" ref="msDebugResult"/>
   </div>
 </template>