test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(接口定义): 所有协议基本完成

This commit is contained in:
fit2-zhao 2020-11-26 14:23:33 +08:00
parent 2ba69e9a32
commit 5bfbf01c3d
24 changed files with 1187 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
View File

@ -264,8 +264,6 @@ public class ApiDefinitionService {
createBodyFiles(bodyUploadIds, bodyFiles);
HashTree hashTree = request.getTestElement().generateHashTree();
request.getTestElement().getJmx(hashTree);
// 调用执行方法
jMeterService.runDefinition(request.getId(), hashTree, request.getReportId(), ApiRunMode.DELIMIT.name());
return request.getId();

3
backend/src/main/java/io/metersphere/api/service/ApiModuleService.java
View File

@ -38,8 +38,7 @@ public class ApiModuleService {
public List<ApiModuleDTO> getNodeTreeByProjectId(String projectId, String protocol) {
ApiModuleExample apiDefinitionNodeExample = new ApiModuleExample();
apiDefinitionNodeExample.createCriteria().andProjectIdEqualTo(projectId);
apiDefinitionNodeExample.createCriteria().andProtocolEqualTo(protocol);
apiDefinitionNodeExample.createCriteria().andProjectIdEqualTo(projectId).andProtocolEqualTo(protocol);
apiDefinitionNodeExample.setOrderByClause("create_time asc");
List<ApiModule> nodes = apiModuleMapper.selectByExample(apiDefinitionNodeExample);
return getNodeTrees(nodes);

3
backend/src/main/java/io/metersphere/base/mapper/ApiModuleMapper.xml
View File

@ -74,8 +74,7 @@
<sql id="Base_Column_List">
id, project_id, name, parent_id, level, create_time, update_time
</sql>
<select id="selectByExample" parameterType="io.metersphere.base.domain.TestCaseNodeExample"
resultMap="BaseResultMap">
<select id="selectByExample" parameterType="io.metersphere.base.domain.TestCaseNodeExample" resultMap="BaseResultMap">
select
<if test="distinct">
distinct

22
frontend/src/business/components/api/definition/ApiDefinition.vue
View File

@ -46,11 +46,16 @@
<div v-else-if="item.type=== 'debug'">
<ms-debug-http-page :currentProtocol="currentProtocol" @saveAs="editApi" v-if="currentProtocol==='HTTP'"/>
<ms-debug-jdbc-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='SQL'"/>
<ms-debug-tcp-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='TCP'"/>
<ms-debug-dubbo-page :currentProtocol="currentProtocol" :currentProject="currentProject" @saveAs="editApi" v-if="currentProtocol==='DUBBO'"/>
</div>
<!-- 测试-->
<div v-else-if="item.type=== 'test'">
<ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject"/>
<ms-run-test-http-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='HTTP'"/>
<ms-run-test-tcp-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='TCP'"/>
<ms-run-test-sql-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='SQL'"/>
<ms-run-test-dubbo-page :currentProtocol="currentProtocol" :api-data="runTestData" @saveAsApi="editApi" :currentProject="currentProject" v-if="currentProtocol==='DUBBO'"/>
</div>
</el-tab-pane>
@ -70,8 +75,14 @@
import MsApiConfig from "./components/ApiConfig";
import MsDebugHttpPage from "./components/debug/DebugHttpPage";
import MsDebugJdbcPage from "./components/debug/DebugJdbcPage";
import MsDebugTcpPage from "./components/debug/DebugTcpPage";
import MsDebugDubboPage from "./components/debug/DebugDubboPage";
import MsRunTestHttpPage from "./components/runtest/RunTestHTTPPage";
import MsRunTestTcpPage from "./components/runtest/RunTestTCPPage";
import MsRunTestSqlPage from "./components/runtest/RunTestSQLPage";
import MsRunTestDubboPage from "./components/runtest/RunTestDubboPage";
import MsRunTestHttpPage from "./components/runtest/RunTestHttpPage";
import {downloadFile, getCurrentUser, getUUID} from "@/common/js/utils";
export default {
@ -86,7 +97,12 @@
MsApiConfig,
MsDebugHttpPage,
MsRunTestHttpPage,
MsDebugJdbcPage
MsDebugJdbcPage,
MsDebugTcpPage,
MsDebugDubboPage,
MsRunTestTcpPage,
MsRunTestSqlPage,
MsRunTestDubboPage
},
comments: {},
data() {

16
frontend/src/business/components/api/definition/components/ApiCaseList.vue
View File

@ -140,12 +140,10 @@
<div v-if="item.active">
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<ms-api-request-form :is-read-only="isReadOnly" :headers="item.request.hashTree[0].headers " :request="item.request"/>
<!-- <p class="tip">{{$t('api_test.definition.request.assertions_rule')}} </p>-->
<!--<ms-api-assertions :request="item.request" :is-read-only="isReadOnly"-->
<!--:assertions="item.request.assertions"/>-->
<ms-api-request-form :is-read-only="isReadOnly" :headers="item.request.hashTree[0].headers " :request="item.request" v-if="api.protocol==='HTTP'"/>
<ms-tcp-basis-parameters :request="item.request" :currentProject="currentProject" v-if="api.protocol==='TCP'"/>
<ms-sql-basis-parameters :request="item.request" :currentProject="currentProject" v-if="api.protocol==='SQL'"/>
<ms-dubbo-basis-parameters :request="item.request" :currentProject="currentProject" v-if="api.protocol==='DUBBO'"/>
<!-- 保存操作 -->
<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)">
{{$t('commons.save')}}
@ -175,6 +173,9 @@
import {PRIORITY, RESULT_MAP} from "../model/JsonData";
import MsApiAssertions from "./assertion/ApiAssertions";
import MsRun from "./Run";
import MsSqlBasisParameters from "./request/database/BasisParameters";
import MsTcpBasisParameters from "./request/tcp/BasisParameters";
import MsDubboBasisParameters from "./request/dubbo/BasisParameters";
export default {
name: 'ApiCaseList',
@ -184,6 +185,9 @@
MsApiRequestForm,
ApiEnvironmentConfig,
MsApiAssertions,
MsSqlBasisParameters,
MsTcpBasisParameters,
MsDubboBasisParameters,
MsRun
},
props: {

26
frontend/src/business/components/api/definition/components/ApiConfig.vue
View File

@ -2,27 +2,26 @@
<div class="card-container">
<!-- HTTP 请求参数 -->
<ms-add-complete-http-api @runTest="runTest" @saveApi="saveApi" :request="request" :headers="headers" :response="response"
<ms-edit-complete-http-api @runTest="runTest" @saveApi="saveApi" :request="request" :headers="headers" :response="response"
:basisData="currentApi" :moduleOptions="moduleOptions" :currentProject="currentProject" v-if="currentProtocol === 'HTTP'"/>
<!-- TCP -->
<ms-add-complete-tcp-api :request="request" @saveApi="saveApi" :currentProject="currentProject" :basisData="currentApi"
<ms-edit-complete-tcp-api :request="request" @runTest="runTest" @saveApi="saveApi" :currentProject="currentProject" :basisData="currentApi"
:moduleOptions="moduleOptions" v-if="currentProtocol === 'TCP'"/>
<!--DUBBO-->
<ms-add-complete-dubbo-api :request="request" @saveApi="saveApi" :currentProject="currentProject" :basisData="currentApi"
<ms-edit-complete-dubbo-api :request="request" @runTest="runTest" @saveApi="saveApi" :currentProject="currentProject" :basisData="currentApi"
:moduleOptions="moduleOptions" v-if="currentProtocol === 'DUBBO'"/>
<!--SQL-->
<ms-add-complete-sql-api :request="request" @saveApi="saveApi" :currentProject="currentProject" :basisData="currentApi"
<ms-edit-complete-sql-api :request="request" @runTest="runTest" @saveApi="saveApi" :currentProject="currentProject" :basisData="currentApi"
:moduleOptions="moduleOptions" v-if="currentProtocol === 'SQL'"/>
</div>
</template>
<script>
import MsAddCompleteHttpApi from "./complete/AddCompleteHttpApi";
import MsAddCompleteTcpApi from "./complete/AddCompleteTcpApi";
import MsAddCompleteDubboApi from "./complete/AddCompleteDubboApi";
import MsAddCompleteSqlApi from "./complete/AddCompleteSqlApi";
import MsEditCompleteHttpApi from "./complete/EditCompleteHTTPApi";
import MsEditCompleteTcpApi from "./complete/EditCompleteTCPApi";
import MsEditCompleteDubboApi from "./complete/EditCompleteDubboApi";
import MsEditCompleteSqlApi from "./complete/EditCompleteSQLApi";
import {ResponseFactory, Body} from "../model/ApiTestModel";
import {getUUID} from "@/common/js/utils";
@ -33,7 +32,7 @@
export default {
name: "ApiConfig",
components: {MsAddCompleteHttpApi, MsAddCompleteTcpApi, MsAddCompleteDubboApi, MsAddCompleteSqlApi},
components: {MsEditCompleteHttpApi, MsEditCompleteTcpApi, MsEditCompleteDubboApi, MsEditCompleteSqlApi},
data() {
return {
reqUrl: "",
@ -86,7 +85,7 @@
this.$success(this.$t('commons.save_success'));
this.reqUrl = "/api/definition/update";
this.$emit('runTest', data);
});
})
},
getMaintainerOptions() {
let workspaceId = localStorage.getItem(WORKSPACE_ID);
@ -138,15 +137,14 @@
this.reqUrl = "/api/definition/update";
this.$emit('saveApi', data);
});
},
setParameters(data) {
console.log(data)
data.projectId = this.currentProject.id;
if (this.currentProtocol === 'HTTP') {
this.request.hashTree[0].headers = this.headers;
}
this.request.name = this.currentProject.name;
this.request.name = this.currentApi.name;
data.protocol = this.currentProtocol;
data.request = this.request;
data.response = this.response;
},

31
frontend/src/business/components/api/definition/components/ApiModule.vue
View File

@ -6,7 +6,7 @@
:title="$t('test_track.project')"
@dataChange="changeProject" style="margin-bottom: 20px"/>
<el-select style="width: 100px ;height: 30px" size="small" v-model="value" @change="changeProtocol">
<el-select style="width: 100px ;height: 30px" size="small" v-model="protocol" @change="changeProtocol">
<el-option
v-for="item in options"
:key="item.value"
@ -18,15 +18,11 @@
<el-input style="width: 175px; padding-left: 3px" :placeholder="$t('test_track.module.search')" v-model="filterText"
size="small">
<template v-slot:append>
<!--
<el-button icon="el-icon-folder-add" @click="addApi"></el-button>
-->
<el-dropdown size="small" split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
<el-dropdown size="small" split-button type="primary" class="ms-api-buttion" @click="handleCommand('add-api')"
@command="handleCommand">
<el-button icon="el-icon-folder-add" @click="addApi"></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="add-api">{{$t('api_test.definition.request.title')}}</el-dropdown-item>
<!--<el-dropdown-item command="add-module">{{$t('api_test.definition.request.add_module')}}</el-dropdown-item>-->
<el-dropdown-item command="debug">{{$t('api_test.definition.request.fast_debug')}}</el-dropdown-item>
<el-dropdown-item command="import">{{$t('api_test.api_import.label')}}</el-dropdown-item>
<el-dropdown-item command="export">{{$t('report.export')}}</el-dropdown-item>
@ -93,7 +89,7 @@
</span>
</el-tree>
<ms-add-basis-http-api :current-protocol="value" ref="httpApi"></ms-add-basis-http-api>
<ms-add-basis-api :current-protocol="protocol" ref="basisApi"></ms-add-basis-api>
<api-import ref="apiImport" @refresh="refresh"/>
</div>
@ -101,7 +97,7 @@
</template>
<script>
import MsAddBasisHttpApi from "./basis/AddBasisApi";
import MsAddBasisApi from "./basis/AddBasisApi";
import SelectMenu from "../../../track/common/SelectMenu";
import {OPTIONS, DEFAULT_DATA} from "../model/JsonData";
import ApiImport from "./import/ApiImport";
@ -109,16 +105,16 @@
export default {
name: 'MsApiModule',
components: {
MsAddBasisHttpApi,
MsAddBasisApi,
SelectMenu,
ApiImport
},
data() {
return {
options: OPTIONS,
value: OPTIONS[0].value,
protocol: OPTIONS[0].value,
httpVisible: false,
expandedNode: [],
expandedNode: ["root"],
filterText: "",
nextFlag: true,
currentProject: {},
@ -143,7 +139,7 @@
methods: {
getApiModuleTree() {
if (this.currentProject) {
this.$get("/api/module/list/" + this.currentProject.id + "/" + this.value, response => {
this.$get("/api/module/list/" + this.currentProject.id + "/" + this.protocol, response => {
if (response.data != undefined && response.data != null) {
this.data[0].children = response.data;
let moduleOptions = [];
@ -365,6 +361,10 @@
},
// 保存或修改
editApiModule(node, data) {
if (!this.currentProject) {
this.$error("$t('api_test.select_project')");
return;
}
let url = "";
if (data.id === "newId") {
url = '/api/module/add';
@ -379,7 +379,7 @@
this.getChildNodeId(data, ids);
data.nodeIds = ids;
}
data.protocol = this.value;
data.protocol = this.protocol;
data.projectId = this.currentProject.id;
this.$post(url, data, () => {
this.$success(this.$t('commons.save_success'));
@ -416,7 +416,7 @@
return data.name.indexOf(value) !== -1;
},
addApi() {
this.$refs.httpApi.open(this.currentModule);
this.$refs.basisApi.open(this.currentModule, this.currentProject.id);
},
// 项目相关方法
changeProject(project) {
@ -442,7 +442,8 @@
}
},
changeProtocol() {
this.$emit('changeProtocol', this.value);
this.getApiModuleTree();
this.$emit('changeProtocol', this.protocol);
}
}
}

9
frontend/src/business/components/api/definition/components/Run.vue
View File

@ -20,6 +20,7 @@
result: {},
loading: false,
runId: "",
reqNumber: 0,
}
},
@ -43,7 +44,13 @@
let data = JSON.parse(response.data.content);
this.$emit('runRefresh', data);
} else {
setTimeout(this.getResult, 2000);
if (this.reqNumber < 60) {
this.reqNumber++;
setTimeout(this.getResult, 2000);
} else {
this.$error("获取报告超时");
this.$emit('runRefresh', {});
}
}
});
}

67
frontend/src/business/components/api/definition/components/basis/AddBasisApi.vue
View File

@ -57,8 +57,9 @@
import {WORKSPACE_ID} from '../../../../../../common/js/constants';
import {REQ_METHOD} from "../../model/JsonData";
import {getCurrentUser, getUUID} from "../../../../../../common/js/utils";
import {createComponent,Request} from "../jmeter/components";
import {createComponent, Request} from "../jmeter/components";
import HeaderManager from "../jmeter/components/configurations/header-manager";
export default {
name: "MsAddBasisApi",
components: {MsDialogFooter},
@ -86,7 +87,8 @@
value: REQ_METHOD[0].id,
options: REQ_METHOD,
}
},
}
,
methods: {
saveApi(saveAs) {
this.$refs['httpForm'].validate((valid) => {
@ -94,15 +96,10 @@
let bodyFiles = [];
let path = "/api/definition/create";
this.setParameter();
let header = createComponent("HeaderManager");
let request = createComponent("HTTPSamplerProxy");
request.path = this.httpForm.path;
request.hashTree = [header];
this.httpForm.request = request;
this.result = this.$fileUpload(path, null, bodyFiles, this.httpForm, () => {
this.httpVisible = false;
if (saveAs) {
this.httpForm.request = JSON.stringify(request);
this.httpForm.request = JSON.stringify(this.httpForm.request);
this.$parent.saveAsEdit(this.httpForm);
} else {
this.$parent.refresh(this.currentModule);
@ -124,25 +121,44 @@
}
switch (this.currentProtocol) {
case Request.TYPES.SQL:
this.httpForm.method = Request.TYPES.SQL;
this.initSQL();
break;
case Request.TYPES.DUBBO:
this.httpForm.method = "dubbo://";
this.initDUBBO();
break;
case Request.TYPES.TCP:
this.httpForm.method = Request.TYPES.TCP;
this.initTCP();
break;
default:
this.initHTTP();
break;
}
},
initHTTP() {
let header = createComponent("HeaderManager");
let request = createComponent("HTTPSamplerProxy");
request.path = this.httpForm.path;
request.hashTree = [header];
this.httpForm.request = request;
},
initSQL() {
this.httpForm.method = Request.TYPES.SQL;
this.httpForm.request = createComponent("JDBCSampler");
},
initTCP() {
this.httpForm.method = Request.TYPES.TCP;
this.httpForm.request = createComponent("TCPSampler");
},
initDUBBO() {
this.httpForm.method = "dubbo://";
this.httpForm.request = createComponent("DubboSampler");
},
getMaintainerOptions() {
let workspaceId = localStorage.getItem(WORKSPACE_ID);
this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
this.maintainerOptions = response.data;
});
}
,
},
open(currentModule, projectId) {
this.httpForm = {method: REQ_METHOD[0].id, userId: getCurrentUser().id};
this.currentModule = currentModule;
@ -154,28 +170,3 @@
}
}
</script>
<style scoped>
.ht-btn-remove {
color: white;
background-color: #DCDFE6;
}
.ht-btn-confirm {
color: white;
background-color: #1483F6;
}
.ht-btn-add {
border: 0px;
margin-top: 10px;
color: #1483F6;
background-color: white;
}
.ht-tb {
background-color: white;
border: 0px;
}
</style>

23
frontend/src/business/components/api/definition/components/complete/AddCompleteDubboApi.vue → frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
View File

@ -6,7 +6,7 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px">
<el-button type="primary" size="small" @click="validateApi">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="saveApi">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="runTest">{{$t('commons.test')}}</el-button>
</div>
</el-col>
@ -16,7 +16,7 @@
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="saveApi"/>
<ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
</el-col>
</el-row>
@ -47,8 +47,15 @@
default: false
}
},
data() {
return {validated: false}
},
methods: {
callback() {
this.validated = true;
},
validateApi() {
this.validated = false;
this.basisData.method = this.request.protocol;
if (this.currentProject === null) {
this.$error(this.$t('api_test.select_project'), 2000);
@ -57,10 +64,18 @@
this.$refs['basicForm'].validate();
},
saveApi() {
this.$emit('saveApi', this.basisData);
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
this.$emit('saveApi', this.basisData);
}
},
runTest() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
this.$emit('runTest', this.basisData);
}
}
},

0
frontend/src/business/components/api/definition/components/complete/AddCompleteHttpApi.vue → frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
View File

23
frontend/src/business/components/api/definition/components/complete/AddCompleteSqlApi.vue → frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
View File

@ -5,7 +5,7 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px">
<el-button type="primary" size="small" @click="validateApi">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="saveApi">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="runTest">{{$t('commons.test')}}</el-button>
</div>
</el-col>
@ -15,7 +15,7 @@
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="saveApi"/>
<ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
</el-col>
</el-row>
@ -47,10 +47,14 @@
},
data() {
return {}
return {validated: false}
},
methods: {
callback() {
this.validated = true;
},
validateApi() {
this.validated = false;
if (this.currentProject === null) {
this.$error(this.$t('api_test.select_project'), 2000);
return;
@ -58,11 +62,18 @@
this.$refs['basicForm'].validate();
},
saveApi() {
this.basisData.method = this.basisData.protocol;
this.$emit('saveApi', this.basisData);
this.validateApi();
if (this.validated) {
this.basisData.method = this.basisData.protocol;
this.$emit('saveApi', this.basisData);
}
},
runTest() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
this.$emit('runTest', this.basisData);
}
},
},
}

23
frontend/src/business/components/api/definition/components/complete/AddCompleteTcpApi.vue → frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
View File

@ -5,7 +5,7 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px">
<el-button type="primary" size="small" @click="validateApi">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="saveApi">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="runTest">{{$t('commons.test')}}</el-button>
</div>
</el-col>
@ -15,7 +15,7 @@
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="saveApi"/>
<ms-basis-api :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm" @callback="callback"/>
</el-col>
</el-row>
@ -45,11 +45,17 @@
}
},
data() {
return {}
return {
validated: false,
}
},
methods: {
callback() {
this.validated = true;
},
validateApi() {
this.validated = false;
this.basisData.method = "TCP";
if (this.currentProject === null) {
this.$error(this.$t('api_test.select_project'), 2000);
@ -58,10 +64,17 @@
this.$refs['basicForm'].validate();
},
saveApi() {
this.$emit('saveApi', this.basisData);
this.validateApi();
if (this.validated) {
this.$emit('saveApi', this.basisData);
}
},
runTest() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
this.$emit('runTest', this.basisData);
}
}
},
}

111
frontend/src/business/components/api/definition/components/debug/DebugDubboPage.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div class="card-container" v-loading="loading">
<el-card class="card-content">
<el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand"
@command="handleCommand" size="small" style="float: right;margin-right: 20px">
{{$t('commons.test')}}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="save_as">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="request" :currentProject="currentProject" ref="requestForm"/>
<!-- TCP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="debugResult"/>
<!-- 执行组件 -->
<ms-run :debug="true" :reportId="reportId" :run-data="runData" @runRefresh="runRefresh" ref="runTest"/>
</el-card>
</div>
</template>
<script>
import MsApiRequestForm from "../request/http/ApiRequestForm";
import MsResponseResult from "../response/ResponseResult";
import MsRequestMetric from "../response/RequestMetric";
import {getUUID, getCurrentUser} from "@/common/js/utils";
import MsResponseText from "../response/ResponseText";
import MsRun from "../Run";
import {createComponent} from "../jmeter/components";
import {REQ_METHOD} from "../../model/JsonData";
import MsRequestResultTail from "../response/RequestResultTail";
import MsBasisParameters from "../request/dubbo/BasisParameters";
export default {
name: "ApiConfig",
components: {MsRequestResultTail, MsResponseResult, MsApiRequestForm, MsRequestMetric, MsResponseText, MsRun, MsBasisParameters},
props: {
currentProtocol: String,
currentProject: {},
},
data() {
return {
rules: {
method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
url: [{required: true, message: this.$t('api_test.definition.request.path_all_info'), trigger: 'blur'}],
},
debugForm: {method: REQ_METHOD[0].id},
options: [],
responseData: {type: 'TCP', responseResult: {}, subRequestResults: []},
loading: false,
debugResultId: "",
runData: [],
headers: [],
reportId: "",
reqOptions: REQ_METHOD,
request: {},
}
},
created() {
this.request = createComponent("DubboSampler");
},
watch: {
debugResultId() {
this.getResult()
}
},
methods: {
handleCommand(e) {
if (e === "save_as") {
this.saveAs();
} else {
this.runDebug();
}
},
runDebug() {
this.loading = true;
this.request.name = getUUID().substring(0, 8);
this.runData = [];
this.runData.push(this.request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
},
runRefresh(data) {
this.responseData = data;
this.loading = false;
this.$refs.debugResult.reload();
},
saveAs() {
let obj = {request: JSON.stringify(this.request)};
this.$emit('saveAs', obj);
}
}
}
</script>
<style scoped>
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 0px;
}
</style>

16
frontend/src/business/components/api/definition/components/debug/DebugJdbcPage.vue
View File

@ -11,11 +11,11 @@
</el-dropdown>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- HTTP 请求参数 -->
<!-- JDBC 请求参数 -->
<ms-basis-parameters :request="request" @callback="runDebug" :currentProject="currentProject" ref="requestForm"/>
<!-- HTTP 请求返回数据 -->
<!-- JDBC 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="debugResult"/>
@ -32,8 +32,7 @@
import {getUUID, getCurrentUser} from "@/common/js/utils";
import MsResponseText from "../response/ResponseText";
import MsRun from "../Run";
import {createComponent, Request} from "../jmeter/components";
import HeaderManager from "../jmeter/components/configurations/header-manager";
import {createComponent} from "../jmeter/components";
import {REQ_METHOD} from "../../model/JsonData";
import MsRequestResultTail from "../response/RequestResultTail";
import MsBasisParameters from "../request/database/BasisParameters";
@ -53,7 +52,7 @@
},
debugForm: {method: REQ_METHOD[0].id},
options: [],
responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
responseData: {type: 'JDBC', responseResult: {}, subRequestResults: []},
loading: false,
debugResultId: "",
runData: [],
@ -102,16 +101,11 @@
</script>
<style scoped>
.ms-http-input {
width: 500px;
margin-top: 5px;
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 20px 0;
margin: 0px;
}
</style>

111
frontend/src/business/components/api/definition/components/debug/DebugTcpPage.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<div class="card-container" v-loading="loading">
<el-card class="card-content">
<el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand"
@command="handleCommand" size="small" style="float: right;margin-right: 20px">
{{$t('commons.test')}}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="save_as">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="request" @callback="runDebug" :currentProject="currentProject" ref="requestForm"/>
<!-- TCP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" :currentProtocol="currentProtocol" ref="debugResult"/>
<!-- 执行组件 -->
<ms-run :debug="true" :reportId="reportId" :run-data="runData" @runRefresh="runRefresh" ref="runTest"/>
</el-card>
</div>
</template>
<script>
import MsApiRequestForm from "../request/http/ApiRequestForm";
import MsResponseResult from "../response/ResponseResult";
import MsRequestMetric from "../response/RequestMetric";
import {getUUID, getCurrentUser} from "@/common/js/utils";
import MsResponseText from "../response/ResponseText";
import MsRun from "../Run";
import {createComponent} from "../jmeter/components";
import {REQ_METHOD} from "../../model/JsonData";
import MsRequestResultTail from "../response/RequestResultTail";
import MsBasisParameters from "../request/tcp/BasisParameters";
export default {
name: "ApiConfig",
components: {MsRequestResultTail, MsResponseResult, MsApiRequestForm, MsRequestMetric, MsResponseText, MsRun, MsBasisParameters},
props: {
currentProtocol: String,
currentProject: {},
},
data() {
return {
rules: {
method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
url: [{required: true, message: this.$t('api_test.definition.request.path_all_info'), trigger: 'blur'}],
},
debugForm: {method: REQ_METHOD[0].id},
options: [],
responseData: {type: 'TCP', responseResult: {}, subRequestResults: []},
loading: false,
debugResultId: "",
runData: [],
headers: [],
reportId: "",
reqOptions: REQ_METHOD,
request: {},
}
},
created() {
this.request = createComponent("TCPSampler");
},
watch: {
debugResultId() {
this.getResult()
}
},
methods: {
handleCommand(e) {
if (e === "save_as") {
this.saveAs();
} else {
this.$refs['requestForm'].validate();
}
},
runDebug() {
this.loading = true;
this.request.name = getUUID().substring(0, 8);
this.runData = [];
this.runData.push(this.request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
},
runRefresh(data) {
this.responseData = data;
this.loading = false;
this.$refs.debugResult.reload();
},
saveAs() {
let obj = {request: JSON.stringify(this.request)};
this.$emit('saveAs', obj);
}
}
}
</script>
<style scoped>
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 0px;
}
</style>

2
frontend/src/business/components/api/definition/components/request/database/BasisParameters.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<el-row>
<el-col :span="21" style="padding-bottom: 50px">
<el-col :span="21" style="padding-bottom: 20px">
<div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin: 20px">
<el-form :model="request" :rules="rules" ref="request" label-width="100px" :disabled="isReadOnly" style="margin: 20px">

2
frontend/src/business/components/api/definition/components/request/dubbo/BasisParameters.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<el-row>
<el-col :span="21" style="padding-bottom: 50px">
<el-col :span="21" style="padding-bottom: 20px">
<div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin: 20px">
<el-form :model="request" ref="request" label-width="100px" :disabled="isReadOnly" style="margin: 20px">

21
frontend/src/business/components/api/definition/components/request/tcp/BasisParameters.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<el-row>
<el-col :span="21" style="padding-bottom: 50px">
<el-col :span="21" style="padding-bottom: 20px">
<div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin: 20px">
<el-form class="tcp" :model="request" ref="request" label-width="auto" :disabled="isReadOnly" style="margin: 20px">
<el-form class="tcp" :model="request" :rules="rules" ref="request" label-width="auto" :disabled="isReadOnly" style="margin: 20px">
<el-row :gutter="10">
<el-col :span="9">
@ -158,6 +158,11 @@
classes: TCPSampler.CLASSES,
isReloadData: false,
options: API_STATUS,
rules: {
classname: [{required: true, message: "请选择TCPClient", trigger: 'change'}],
server: [{required: true, message: this.$t('api_test.request.tcp.server_cannot_be_empty'), trigger: 'blur'}],
port: [{required: true, message: this.$t('commons.port_cannot_be_empty'), trigger: 'change'}],
},
}
},
created() {
@ -209,7 +214,17 @@
runTest() {
},
validate() {
if (this.currentProject === null) {
this.$error(this.$t('api_test.select_project'), 2000);
return;
}
this.$refs['request'].validate((valid) => {
if (valid) {
this.$emit('callback');
}
})
},
getEnvironments() {
if (this.currentProject) {
this.environments = [];

261
frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<div class="card-container">
<el-card class="card-content" v-loading="loading">
<!-- 操作按钮 -->
<el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
@command="handleCommand" size="small" style="float: right;margin-right: 20px">
{{$t('commons.test')}}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
</el-dropdown-item>
<el-dropdown-item command="save_as_case">{{$t('api_test.definition.request.save_as_case')}}
</el-dropdown-item>
<el-dropdown-item command="update_api">{{$t('api_test.definition.request.update_api')}}</el-dropdown-item>
<el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="currentRequest" :currentProject="currentProject" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" ref="runResult"/>
</el-card>
<!-- 加载用例 -->
<ms-bottom-container v-bind:enableAsideHidden="isHide">
<ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :api="api"
:currentProject="currentProject" :loaded="loaded"
ref="caseList"/>
</ms-bottom-container>
<!-- 环境 -->
<api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
<!-- 执行组件 -->
<ms-run :debug="false" :environment="api.environment" :reportId="reportId" :run-data="runData"
@runRefresh="runRefresh" ref="runTest"/>
</div>
</template>
<script>
import MsApiRequestForm from "../request/http/ApiRequestForm";
import {downloadFile, getUUID} from "@/common/js/utils";
import MsApiCaseList from "../ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import {parseEnvironment} from "../../model/EnvironmentModel";
import ApiEnvironmentConfig from "../environment/ApiEnvironmentConfig";
import MsRequestResultTail from "../response/RequestResultTail";
import MsRun from "../Run";
import MsBasisParameters from "../request/dubbo/BasisParameters";
import {REQ_METHOD} from "../../model/JsonData";
export default {
name: "RunTestDubboPage",
components: {
MsApiRequestForm,
MsApiCaseList,
MsContainer,
MsBottomContainer,
MsRequestResultTail,
ApiEnvironmentConfig,
MsRun,
MsBasisParameters
},
data() {
return {
isHide: true,
api: {},
loaded: false,
loading: false,
currentRequest: {},
responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
reqOptions: REQ_METHOD,
environments: [],
rules: {
method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
url: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}],
environmentId: [{required: true, message: this.$t('api_test.definition.request.run_env'), trigger: 'change'}],
},
runData: [],
reportId: "",
}
},
props: {apiData: {}, currentProject: {}, currentProtocol: String,},
methods: {
handleCommand(e) {
switch (e) {
case "load_case":
return this.loadCase();
case "save_as_case":
return this.saveAsCase();
case "update_api":
return this.updateApi();
case "save_as_api":
return this.saveAsApi();
default:
return this.runTest();
}
},
runTest() {
this.loading = true;
this.api.request.name = this.api.id;
this.api.protocol = this.currentProtocol;
this.runData = [];
this.runData.push(this.api.request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
},
runRefresh(data) {
this.responseData = data;
this.loading = false;
},
saveAs() {
this.$emit('saveAs', this.api);
},
loadCase() {
this.loaded = true;
this.isHide = false;
},
apiCaseClose() {
this.isHide = true;
},
getBodyUploadFiles() {
let bodyUploadFiles = [];
this.api.bodyUploadIds = [];
let request = this.api.request;
if (request.body) {
request.body.kvs.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
let fileId = getUUID().substring(0, 8);
item.name = item.file.name;
item.id = fileId;
this.api.bodyUploadIds.push(fileId);
bodyUploadFiles.push(item.file);
}
});
}
});
}
return bodyUploadFiles;
},
saveAsCase() {
this.isHide = false;
this.loaded = false;
this.$refs.caseList.addCase();
},
saveAsApi() {
let data = {};
data.request = JSON.stringify(this.api.request);
data.method = this.api.method;
data.status = this.api.status;
data.userId = this.api.userId;
data.description = this.api.description;
this.$emit('saveAsApi', data);
},
updateApi() {
let url = "/api/definition/update";
let bodyFiles = this.getBodyUploadFiles();
this.$fileUpload(url, null, bodyFiles, this.api, () => {
this.$success(this.$t('commons.save_success'));
this.$emit('saveApi', this.api);
});
},
selectTestCase(item) {
if (item != null) {
this.api.request = item.request;
} else {
this.api.request = this.currentRequest;
}
},
getEnvironments() {
if (this.currentProject) {
this.$get('/api/environment/list/' + this.currentProject.id, response => {
this.environments = response.data;
this.environments.forEach(environment => {
parseEnvironment(environment);
});
let hasEnvironment = false;
for (let i in this.environments) {
if (this.environments[i].id === this.api.environmentId) {
this.api.environment = this.environments[i];
hasEnvironment = true;
break;
}
}
if (!hasEnvironment) {
this.api.environmentId = '';
this.api.environment = undefined;
}
});
} else {
this.api.environmentId = '';
this.api.environment = undefined;
}
},
openEnvironmentConfig() {
if (!this.currentProject) {
this.$error(this.$t('api_test.select_project'));
return;
}
this.$refs.environmentConfig.open(this.currentProject.id);
},
environmentChange(value) {
for (let i in this.environments) {
if (this.environments[i].id === value) {
this.api.request.useEnvironment = this.environments[i].id;
break;
}
}
},
environmentConfigClose() {
this.getEnvironments();
},
getResult() {
let url = "/api/definition/report/getReport/" + this.api.id;
this.$get(url, response => {
if (response.data) {
let data = JSON.parse(response.data.content);
this.responseData = data;
}
});
}
},
created() {
this.api = this.apiData;
this.api.protocol = this.currentProtocol;
this.currentRequest = this.api.request;
this.getEnvironments();
this.getResult();
}
}
</script>
<style scoped>
.ms-htt-width {
width: 350px;
}
.environment-button {
margin-left: 20px;
padding: 7px;
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 20px 0;
}
</style>

2
frontend/src/business/components/api/definition/components/runtest/RunTestHttpPage.vue → frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
View File

@ -99,7 +99,7 @@
import {REQ_METHOD} from "../../model/JsonData";
export default {
name: "ApiConfig",
name: "RunTestHTTPPage",
components: {
MsApiRequestForm,
MsApiCaseList,

261
frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<div class="card-container">
<el-card class="card-content" v-loading="loading">
<!-- 操作按钮 -->
<el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
@command="handleCommand" size="small" style="float: right;margin-right: 20px">
{{$t('commons.test')}}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
</el-dropdown-item>
<el-dropdown-item command="save_as_case">{{$t('api_test.definition.request.save_as_case')}}
</el-dropdown-item>
<el-dropdown-item command="update_api">{{$t('api_test.definition.request.update_api')}}</el-dropdown-item>
<el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="currentRequest" @callback="runTest" :currentProject="currentProject" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" ref="runResult"/>
</el-card>
<!-- 加载用例 -->
<ms-bottom-container v-bind:enableAsideHidden="isHide">
<ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :api="api"
:currentProject="currentProject" :loaded="loaded"
ref="caseList"/>
</ms-bottom-container>
<!-- 环境 -->
<api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
<!-- 执行组件 -->
<ms-run :debug="false" :environment="api.environment" :reportId="reportId" :run-data="runData"
@runRefresh="runRefresh" ref="runTest"/>
</div>
</template>
<script>
import MsApiRequestForm from "../request/http/ApiRequestForm";
import {downloadFile, getUUID} from "@/common/js/utils";
import MsApiCaseList from "../ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import {parseEnvironment} from "../../model/EnvironmentModel";
import ApiEnvironmentConfig from "../environment/ApiEnvironmentConfig";
import MsRequestResultTail from "../response/RequestResultTail";
import MsRun from "../Run";
import MsBasisParameters from "../request/database/BasisParameters";
import {REQ_METHOD} from "../../model/JsonData";
export default {
name: "RunTestSQLPage",
components: {
MsApiRequestForm,
MsApiCaseList,
MsContainer,
MsBottomContainer,
MsRequestResultTail,
ApiEnvironmentConfig,
MsRun,
MsBasisParameters
},
data() {
return {
isHide: true,
api: {},
loaded: false,
loading: false,
currentRequest: {},
responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
reqOptions: REQ_METHOD,
environments: [],
rules: {
method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
url: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}],
environmentId: [{required: true, message: this.$t('api_test.definition.request.run_env'), trigger: 'change'}],
},
runData: [],
reportId: "",
}
},
props: {apiData: {}, currentProject: {}, currentProtocol: String,},
methods: {
handleCommand(e) {
switch (e) {
case "load_case":
return this.loadCase();
case "save_as_case":
return this.saveAsCase();
case "update_api":
return this.updateApi();
case "save_as_api":
return this.saveAsApi();
default:
return this.$refs['requestForm'].validate();
}
},
runTest() {
this.loading = true;
this.api.request.name = this.api.id;
this.api.protocol = this.currentProtocol;
this.runData = [];
this.runData.push(this.api.request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
},
runRefresh(data) {
this.responseData = data;
this.loading = false;
},
saveAs() {
this.$emit('saveAs', this.api);
},
loadCase() {
this.loaded = true;
this.isHide = false;
},
apiCaseClose() {
this.isHide = true;
},
getBodyUploadFiles() {
let bodyUploadFiles = [];
this.api.bodyUploadIds = [];
let request = this.api.request;
if (request.body) {
request.body.kvs.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
let fileId = getUUID().substring(0, 8);
item.name = item.file.name;
item.id = fileId;
this.api.bodyUploadIds.push(fileId);
bodyUploadFiles.push(item.file);
}
});
}
});
}
return bodyUploadFiles;
},
saveAsCase() {
this.isHide = false;
this.loaded = false;
this.$refs.caseList.addCase();
},
saveAsApi() {
let data = {};
data.request = JSON.stringify(this.api.request);
data.method = this.api.method;
data.status = this.api.status;
data.userId = this.api.userId;
data.description = this.api.description;
this.$emit('saveAsApi', data);
},
updateApi() {
let url = "/api/definition/update";
let bodyFiles = this.getBodyUploadFiles();
this.$fileUpload(url, null, bodyFiles, this.api, () => {
this.$success(this.$t('commons.save_success'));
this.$emit('saveApi', this.api);
});
},
selectTestCase(item) {
if (item != null) {
this.api.request = item.request;
} else {
this.api.request = this.currentRequest;
}
},
getEnvironments() {
if (this.currentProject) {
this.$get('/api/environment/list/' + this.currentProject.id, response => {
this.environments = response.data;
this.environments.forEach(environment => {
parseEnvironment(environment);
});
let hasEnvironment = false;
for (let i in this.environments) {
if (this.environments[i].id === this.api.environmentId) {
this.api.environment = this.environments[i];
hasEnvironment = true;
break;
}
}
if (!hasEnvironment) {
this.api.environmentId = '';
this.api.environment = undefined;
}
});
} else {
this.api.environmentId = '';
this.api.environment = undefined;
}
},
openEnvironmentConfig() {
if (!this.currentProject) {
this.$error(this.$t('api_test.select_project'));
return;
}
this.$refs.environmentConfig.open(this.currentProject.id);
},
environmentChange(value) {
for (let i in this.environments) {
if (this.environments[i].id === value) {
this.api.request.useEnvironment = this.environments[i].id;
break;
}
}
},
environmentConfigClose() {
this.getEnvironments();
},
getResult() {
let url = "/api/definition/report/getReport/" + this.api.id;
this.$get(url, response => {
if (response.data) {
let data = JSON.parse(response.data.content);
this.responseData = data;
}
});
}
},
created() {
this.api = this.apiData;
this.api.protocol = this.currentProtocol;
this.currentRequest = this.api.request;
this.getEnvironments();
this.getResult();
}
}
</script>
<style scoped>
.ms-htt-width {
width: 350px;
}
.environment-button {
margin-left: 20px;
padding: 7px;
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 20px 0;
}
</style>

261
frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<div class="card-container">
<el-card class="card-content" v-loading="loading">
<!-- 操作按钮 -->
<el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
@command="handleCommand" size="small" style="float: right;margin-right: 20px">
{{$t('commons.test')}}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
</el-dropdown-item>
<el-dropdown-item command="save_as_case">{{$t('api_test.definition.request.save_as_case')}}
</el-dropdown-item>
<el-dropdown-item command="update_api">{{$t('api_test.definition.request.update_api')}}</el-dropdown-item>
<el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<!-- TCP 请求参数 -->
<ms-basis-parameters :request="currentRequest" @callback="runTest" :currentProject="currentProject" ref="requestForm"/>
<!--返回结果-->
<!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<ms-request-result-tail :response="responseData" ref="runResult"/>
</el-card>
<!-- 加载用例 -->
<ms-bottom-container v-bind:enableAsideHidden="isHide">
<ms-api-case-list @apiCaseClose="apiCaseClose" @selectTestCase="selectTestCase" :api="api"
:currentProject="currentProject" :loaded="loaded"
ref="caseList"/>
</ms-bottom-container>
<!-- 环境 -->
<api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
<!-- 执行组件 -->
<ms-run :debug="false" :environment="api.environment" :reportId="reportId" :run-data="runData"
@runRefresh="runRefresh" ref="runTest"/>
</div>
</template>
<script>
import MsApiRequestForm from "../request/http/ApiRequestForm";
import {downloadFile, getUUID} from "@/common/js/utils";
import MsApiCaseList from "../ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer";
import MsBottomContainer from "../BottomContainer";
import {parseEnvironment} from "../../model/EnvironmentModel";
import ApiEnvironmentConfig from "../environment/ApiEnvironmentConfig";
import MsRequestResultTail from "../response/RequestResultTail";
import MsRun from "../Run";
import MsBasisParameters from "../request/tcp/BasisParameters";
import {REQ_METHOD} from "../../model/JsonData";
export default {
name: "RunTestTCPPage",
components: {
MsApiRequestForm,
MsApiCaseList,
MsContainer,
MsBottomContainer,
MsRequestResultTail,
ApiEnvironmentConfig,
MsRun,
MsBasisParameters
},
data() {
return {
isHide: true,
api: {},
loaded: false,
loading: false,
currentRequest: {},
responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
reqOptions: REQ_METHOD,
environments: [],
rules: {
method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
url: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}],
environmentId: [{required: true, message: this.$t('api_test.definition.request.run_env'), trigger: 'change'}],
},
runData: [],
reportId: "",
}
},
props: {apiData: {}, currentProject: {}, currentProtocol: String,},
methods: {
handleCommand(e) {
switch (e) {
case "load_case":
return this.loadCase();
case "save_as_case":
return this.saveAsCase();
case "update_api":
return this.updateApi();
case "save_as_api":
return this.saveAsApi();
default:
return this.$refs['requestForm'].validate();
}
},
runTest() {
this.loading = true;
this.api.request.name = this.api.id;
this.api.protocol = this.currentProtocol;
this.runData = [];
this.runData.push(this.api.request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
},
runRefresh(data) {
this.responseData = data;
this.loading = false;
},
saveAs() {
this.$emit('saveAs', this.api);
},
loadCase() {
this.loaded = true;
this.isHide = false;
},
apiCaseClose() {
this.isHide = true;
},
getBodyUploadFiles() {
let bodyUploadFiles = [];
this.api.bodyUploadIds = [];
let request = this.api.request;
if (request.body) {
request.body.kvs.forEach(param => {
if (param.files) {
param.files.forEach(item => {
if (item.file) {
let fileId = getUUID().substring(0, 8);
item.name = item.file.name;
item.id = fileId;
this.api.bodyUploadIds.push(fileId);
bodyUploadFiles.push(item.file);
}
});
}
});
}
return bodyUploadFiles;
},
saveAsCase() {
this.isHide = false;
this.loaded = false;
this.$refs.caseList.addCase();
},
saveAsApi() {
let data = {};
data.request = JSON.stringify(this.api.request);
data.method = this.api.method;
data.status = this.api.status;
data.userId = this.api.userId;
data.description = this.api.description;
this.$emit('saveAsApi', data);
},
updateApi() {
let url = "/api/definition/update";
let bodyFiles = this.getBodyUploadFiles();
this.$fileUpload(url, null, bodyFiles, this.api, () => {
this.$success(this.$t('commons.save_success'));
this.$emit('saveApi', this.api);
});
},
selectTestCase(item) {
if (item != null) {
this.api.request = item.request;
} else {
this.api.request = this.currentRequest;
}
},
getEnvironments() {
if (this.currentProject) {
this.$get('/api/environment/list/' + this.currentProject.id, response => {
this.environments = response.data;
this.environments.forEach(environment => {
parseEnvironment(environment);
});
let hasEnvironment = false;
for (let i in this.environments) {
if (this.environments[i].id === this.api.environmentId) {
this.api.environment = this.environments[i];
hasEnvironment = true;
break;
}
}
if (!hasEnvironment) {
this.api.environmentId = '';
this.api.environment = undefined;
}
});
} else {
this.api.environmentId = '';
this.api.environment = undefined;
}
},
openEnvironmentConfig() {
if (!this.currentProject) {
this.$error(this.$t('api_test.select_project'));
return;
}
this.$refs.environmentConfig.open(this.currentProject.id);
},
environmentChange(value) {
for (let i in this.environments) {
if (this.environments[i].id === value) {
this.api.request.useEnvironment = this.environments[i].id;
break;
}
}
},
environmentConfigClose() {
this.getEnvironments();
},
getResult() {
let url = "/api/definition/report/getReport/" + this.api.id;
this.$get(url, response => {
if (response.data) {
let data = JSON.parse(response.data.content);
this.responseData = data;
}
});
}
},
created() {
this.api = this.apiData;
this.api.protocol = this.currentProtocol;
this.currentRequest = this.api.request;
this.getEnvironments();
this.getResult();
}
}
</script>
<style scoped>
.ms-htt-width {
width: 350px;
}
.environment-button {
margin-left: 20px;
padding: 7px;
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 4px;
border-left: 4px solid #783887;
margin: 20px 0;
}
</style>

12
frontend/src/business/components/api/definition/model/JsonData.js
View File

@ -8,9 +8,9 @@ export const PRIORITY = [
export const OPTIONS = [
{value: 'HTTP', name: 'HTTP'},
{value: 'DUBBO', name: 'DUBBO'},
{value: 'TCP', name: 'TCP'},
{value: 'SQL', name: 'SQL'}
{value: 'SQL', name: 'SQL'},
{value: 'DUBBO', name: 'DUBBO'}
]
export const DEFAULT_DATA = [{
@ -35,7 +35,7 @@ export const API_METHOD_COLOUR = [
['GET', "#61AFFE"], ['POST', '#49CC90'], ['PUT', '#fca130'],
['PATCH', '#E2EE11'], ['DELETE', '#f93e3d'], ['OPTIONS', '#0EF5DA'],
['HEAD', '#8E58E7'], ['CONNECT', '#90AFAE'],
['DUBBO', '#C36EEF'], ['dubbo://', '#C36EEF'],['SQL', '#0AEAD4'], ['TCP', '#0A52DF'],
['DUBBO', '#C36EEF'], ['dubbo://', '#C36EEF'], ['SQL', '#0AEAD4'], ['TCP', '#0A52DF'],
]
export const REQUIRED = [
@ -44,7 +44,7 @@ export const REQUIRED = [
]
export const RESULT_MAP = new Map([
['success','执行结果：通过'],
['error','执行结果：未通过'],
['default','执行结果：未执行']
['success', '执行结果：通过'],
['error', '执行结果：未通过'],
['default', '执行结果：未执行']
]);