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

feat(接口定义): 需求4 可以全局设置环境选项 #1001750 --story=1001750 --user=赵勇 4.接口定义增加全局运... https://www.tapd.cn/55049933/s/1031567

This commit is contained in:
fit2-zhao 2021-08-03 09:51:54 +08:00 committed by fit2-zhao
parent a0013580ca
commit 698ab5db12
2 changed files with 200 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -141,6 +141,9 @@ export default {
if (this.createCase) { if (this.createCase) {
this.sysAddition(); this.sysAddition();
} }
if (!this.environment && this.$store.state.useEnvironment) {
this.environment = this.$store.state.useEnvironment;
}
}, },
computed: { computed: {
isCaseEdit() { isCaseEdit() {

391
frontend/src/business/components/api/definition/components/runtest/RunTestHTTPPage.vue
View File

@ -5,7 +5,7 @@
<el-form :model="api" :rules="rules" ref="apiData" :inline="true" label-position="right"> <el-form :model="api" :rules="rules" ref="apiData" :inline="true" label-position="right">
<p class="tip">{{$t('test_track.plan_view.base_info')}} </p> <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<!-- 请求方法 --> <!-- 请求方法 -->
<el-form-item :label="$t('api_report.request')" prop="method"> <el-form-item :label="$t('api_report.request')" prop="method">
<el-select v-model="api.request.method" style="width: 100px" size="small"> <el-select v-model="api.request.method" style="width: 100px" size="small">
@ -15,7 +15,7 @@
<!-- 执行环境 --> <!-- 执行环境 -->
<el-form-item prop="environmentId"> <el-form-item prop="environmentId">
<environment-select :current-data="api" :project-id="projectId"/> <environment-select :current-data="api" :project-id="projectId"/>
</el-form-item> </el-form-item>
<!-- 请求地址 --> <!-- 请求地址 -->
@ -28,27 +28,27 @@
<el-form-item> <el-form-item>
<el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')" <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
@command="handleCommand" size="small"> @command="handleCommand" size="small">
{{$t('commons.test')}} {{ $t('commons.test') }}
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}} <el-dropdown-item command="load_case">{{ $t('api_test.definition.request.load_case') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="save_as_case">{{$t('api_test.definition.request.save_as_case')}} <el-dropdown-item command="save_as_case">{{ $t('api_test.definition.request.save_as_case') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="update_api">{{$t('api_test.definition.request.update_api')}}</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-item command="save_as_api">{{ $t('api_test.definition.request.save_as') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-form-item> </el-form-item>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p> <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- HTTP 请求参数 --> <!-- HTTP 请求参数 -->
<ms-api-request-form :isShowEnable="true" :headers="api.request.headers" :request="api.request"/> <ms-api-request-form :isShowEnable="true" :headers="api.request.headers" :request="api.request"/>
</el-form> </el-form>
<!--返回结果--> <!--返回结果-->
<!-- HTTP 请求返回数据 --> <!-- HTTP 请求返回数据 -->
<p class="tip">{{$t('api_test.definition.request.res_param')}} </p> <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
<ms-request-result-tail :response="responseData" ref="runResult"/> <ms-request-result-tail :response="responseData" ref="runResult"/>
<ms-jmx-step :request="api.request" :response="responseData"/> <ms-jmx-step :request="api.request" :response="responseData"/>
@ -71,205 +71,208 @@
</template> </template>
<script> <script>
import MsApiRequestForm from "../request/http/ApiHttpRequestForm"; import MsApiRequestForm from "../request/http/ApiHttpRequestForm";
import {getUUID} from "@/common/js/utils"; import {getUUID} from "@/common/js/utils";
import MsApiCaseList from "../case/ApiCaseList"; import MsApiCaseList from "../case/ApiCaseList";
import MsContainer from "../../../../common/components/MsContainer"; import MsContainer from "../../../../common/components/MsContainer";
import MsRequestResultTail from "../response/RequestResultTail"; import MsRequestResultTail from "../response/RequestResultTail";
import MsRun from "../Run"; import MsRun from "../Run";
import {REQ_METHOD} from "../../model/JsonData"; import {REQ_METHOD} from "../../model/JsonData";
import EnvironmentSelect from "../environment/EnvironmentSelect"; import EnvironmentSelect from "../environment/EnvironmentSelect";
import MsJmxStep from "../step/JmxStep"; import MsJmxStep from "../step/JmxStep";
export default { export default {
name: "RunTestHTTPPage", name: "RunTestHTTPPage",
components: { components: {
EnvironmentSelect, EnvironmentSelect,
MsApiRequestForm, MsApiRequestForm,
MsApiCaseList, MsApiCaseList,
MsContainer, MsContainer,
MsRequestResultTail, MsRequestResultTail,
MsRun, MsRun,
MsJmxStep MsJmxStep
}, },
data() { data() {
return { return {
visible: false, visible: false,
api: {}, api: {},
loaded: false, loaded: false,
loading: false, loading: false,
createCase: "", createCase: "",
currentRequest: {}, currentRequest: {},
refreshSign: "", refreshSign: "",
responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []}, responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
reqOptions: REQ_METHOD, reqOptions: REQ_METHOD,
rules: { rules: {
method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}], method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
path: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}], path: [{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'}], environmentId: [{required: true, message: this.$t('api_test.definition.request.run_env'), trigger: 'change'}],
}, },
runData: [], runData: [],
reportId: "", reportId: "",
envMap: new Map envMap: new Map
}
},
props: {apiData: {}, currentProtocol: String, syncTabs: Array, projectId: String},
computed: {
'api.environmentId'() {
return this.$store.state.useEnvironment;
}
},
watch: {
'$store.state.useEnvironment': function () {
this.api.environmentId = this.$store.state.useEnvironment;
}
},
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();
} }
}, },
props: {apiData: {}, currentProtocol: String, syncTabs: Array, projectId: String}, runTest() {
computed:{ this.$refs['apiData'].validate((valid) => {
'api.environmentId'(){ if (valid) {
return this.$store.state.useEnvironment; this.loading = true;
} this.api.request.name = this.api.id;
this.api.request.url = undefined;
this.api.request.useEnvironment = this.api.environmentId;
this.api.protocol = this.currentProtocol;
this.runData = [];
this.runData.push(this.api.request);
/*触发执行操作*/
this.reportId = getUUID().substring(0, 8);
}
})
}, },
watch:{ errorRefresh() {
'$store.state.useEnvironment':function (){ this.loading = false;
this.api.environmentId = this.$store.state.useEnvironment;
}
}, },
methods: { runRefresh(data) {
handleCommand(e) { this.responseData = {type: 'HTTP', responseResult: {responseCode: ""}, subRequestResults: []};
switch (e) { if (data) {
case "load_case": this.responseData = data;
return this.loadCase(); }
case "save_as_case": this.loading = false;
return this.saveAsCase(); },
case "update_api": saveAs() {
return this.updateApi(); this.$emit('saveAs', this.api);
case "save_as_api": },
return this.saveAsApi(); loadCase() {
default: this.refreshSign = getUUID();
return this.runTest(); this.loaded = true;
} this.$refs.caseList.open();
}, },
runTest() { apiCaseClose() {
this.$refs['apiData'].validate((valid) => { this.visible = false;
if (valid) { },
this.loading = true; getBodyUploadFiles() {
this.api.request.name = this.api.id; let bodyUploadFiles = [];
this.api.request.url = undefined; this.api.bodyUploadIds = [];
this.api.request.useEnvironment = this.api.environmentId; let request = this.api.request;
this.api.protocol = this.currentProtocol; if (request.body) {
this.runData = []; request.body.kvs.forEach(param => {
this.runData.push(this.api.request); if (param.files) {
/*触发执行操作*/ param.files.forEach(item => {
this.reportId = getUUID().substring(0, 8); if (item.file) {
} item.name = item.file.name;
}) bodyUploadFiles.push(item.file);
}, }
errorRefresh(){ });
this.loading = false;
},
runRefresh(data) {
this.responseData = {type: 'HTTP', responseResult: {responseCode: ""}, subRequestResults: []};
if (data) {
this.responseData = data;
}
this.loading = false;
},
saveAs() {
this.$emit('saveAs', this.api);
},
loadCase() {
this.refreshSign = getUUID();
this.loaded = true;
this.$refs.caseList.open();
},
apiCaseClose() {
this.visible = false;
},
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) {
item.name = item.file.name;
bodyUploadFiles.push(item.file);
}
});
}
});
}
return bodyUploadFiles;
},
saveAsCase() {
//用于触发创建操作
this.createCase = getUUID();
this.$refs.caseList.open();
this.loaded = false;
},
saveAsApi() {
let data = {};
let req = this.api.request;
req.id = getUUID();
data.request = JSON.stringify(req);
data.method = req.method;
data.path = req.path;
data.url = this.api.url;
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.api.method = this.api.request.method;
this.api.path = this.api.request.path;
if (Object.prototype.toString.call(this.api.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
this.api.response = JSON.parse(this.api.response);
}
if (this.api.tags instanceof Array) {
this.api.tags = JSON.stringify(this.api.tags);
}
this.$fileUpload(url, null, bodyFiles, this.api, () => {
this.$success(this.$t('commons.save_success'));
this.$emit('saveApi', this.api);
if (this.syncTabs.indexOf(this.api.id) === -1) {
this.syncTabs.push(this.api.id);
} }
}); });
}, }
selectTestCase(item) { return bodyUploadFiles;
if (item != null) { },
this.api.request = item.request; saveAsCase() {
} else { //用于触发创建操作
this.api.request = this.currentRequest; this.createCase = getUUID();
} this.$refs.caseList.open();
}, this.loaded = false;
},
refresh() { saveAsApi() {
this.$emit('refresh'); let data = {};
}, let req = this.api.request;
getResult() { req.id = getUUID();
if (this.api.id) { data.request = JSON.stringify(req);
let url = "/api/definition/report/getReport/" + this.api.id; data.method = req.method;
this.$get(url, response => { data.path = req.path;
if (response.data) { data.url = this.api.url;
let data = JSON.parse(response.data.content); data.status = this.api.status;
this.responseData = data; 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.api.method = this.api.request.method;
this.api.path = this.api.request.path;
if (Object.prototype.toString.call(this.api.response).match(/\[object (\w+)\]/)[1].toLowerCase() !== 'object') {
this.api.response = JSON.parse(this.api.response);
}
if (this.api.tags instanceof Array) {
this.api.tags = JSON.stringify(this.api.tags);
}
this.$fileUpload(url, null, bodyFiles, this.api, () => {
this.$success(this.$t('commons.save_success'));
this.$emit('saveApi', this.api);
if (this.syncTabs.indexOf(this.api.id) === -1) {
this.syncTabs.push(this.api.id);
} }
});
},
selectTestCase(item) {
if (item != null) {
this.api.request = item.request;
} else {
this.api.request = this.currentRequest;
} }
}, },
created() {
// 深度复制 refresh() {
this.api = JSON.parse(JSON.stringify(this.apiData)); this.$emit('refresh');
this.api.protocol = this.currentProtocol; },
this.currentRequest = this.api.request; getResult() {
//this.getResult(); if (this.api.id) {
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 = JSON.parse(JSON.stringify(this.apiData));
this.api.protocol = this.currentProtocol;
this.currentRequest = this.api.request;
if (!this.api.environmentId && this.$store.state.useEnvironment) {
this.api.environmentId = this.$store.state.useEnvironment;
}
//this.getResult();
} }
}
</script> </script>
<style scoped> <style scoped>
.ms-htt-width { .ms-htt-width {
width: 350px; width: 350px;
} }
/deep/ .el-drawer { /deep/ .el-drawer {
overflow: auto; overflow: auto;
} }
</style> </style>