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:
q4speed 2020-09-07 16:11:06 +08:00
parent 7f296f453c
commit c9cf9b8e8f
3 changed files with 165 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/business/components/api/test/components/ApiScenarioConfig.vue
View File

@ -2,7 +2,7 @@
<el-container> <el-container>
<el-aside class="scenario-aside"> <el-aside class="scenario-aside">
<div class="scenario-list"> <div class="scenario-list">
<ms-api-collapse v-model="activeName" @change="handleChange" accordion> <ms-api-collapse v-model="activeName" @change="handleChange">
<draggable :list="scenarios" group="Scenario" class="scenario-draggable" ghost-class="scenario-ghost"> <draggable :list="scenarios" group="Scenario" class="scenario-draggable" ghost-class="scenario-ghost">
<ms-api-collapse-item v-for="(scenario, index) in scenarios" :key="index" <ms-api-collapse-item v-for="(scenario, index) in scenarios" :key="index"
:title="scenario.name" :name="index" :class="{'disable-scenario': !scenario.enable}"> :title="scenario.name" :name="index" :class="{'disable-scenario': !scenario.enable}">

320
frontend/src/business/components/api/test/components/request/ApiRequestConfig.vue
View File

@ -1,33 +1,36 @@
<template> <template>
<div class="request-container"> <div class="request-container">
<draggable :list="this.scenario.requests" group="Request" class="request-draggable" ghost-class="request-ghost"> <draggable :list="this.scenario.requests" group="Request" class="request-draggable" ghost-class="request-ghost"
:disabled="isReference">
<div class="request-item" v-for="(request, index) in this.scenario.requests" :key="index" @click="select(request)" <div class="request-item" v-for="(request, index) in this.scenario.requests" :key="index" @click="select(request)"
:class="{'selected': isSelected(request), 'disable-request': !request.enable || !scenario.enable}"> :class="{'selected': isSelected(request), 'disable-request': !request.enable || !scenario.enable}">
<el-row type="flex" align="middle"> <el-row type="flex" align="middle">
<div class="request-type"> <div class="request-type">
{{request.showType()}} {{ request.showType() }}
</div> </div>
<div class="request-method"> <div class="request-method">
{{request.showMethod()}} {{ request.showMethod() }}
</div> </div>
<div class="request-name"> <div class="request-name">
{{request.name}} {{ request.name }}
</div> </div>
<div class="request-btn"> <div class="request-btn">
<el-dropdown trigger="click" @command="handleCommand"> <el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link el-icon-more"/> <span class="el-dropdown-link el-icon-more"/>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="isReadOnly" :command="{type: 'copy', index: index}"> <el-dropdown-item :disabled="isReadOnly" :command="{type: 'copy', index: index}">
{{$t('api_test.request.copy')}} {{ $t('api_test.request.copy') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item :disabled="isReadOnly" :command="{type: 'delete', index: index}"> <el-dropdown-item :disabled="isReadOnly" :command="{type: 'delete', index: index}">
{{$t('api_test.request.delete')}} {{ $t('api_test.request.delete') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="request.enable" :disabled="isReadOnly" :command="{type: 'disable', index: index}"> <el-dropdown-item v-if="request.enable" :disabled="isReadOnly"
{{$t('api_test.scenario.disable')}} :command="{type: 'disable', index: index}">
{{ $t('api_test.scenario.disable') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-if="!request.enable" :disabled="isReadOnly" :command="{type: 'enable', index: index}"> <el-dropdown-item v-if="!request.enable" :disabled="isReadOnly"
{{$t('api_test.scenario.enable')}} :command="{type: 'enable', index: index}">
{{ $t('api_test.scenario.enable') }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -48,173 +51,176 @@
</template> </template>
<script> <script>
import {RequestFactory} from "../../model/ScenarioModel"; import {RequestFactory} from "../../model/ScenarioModel";
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
export default { export default {
name: "MsApiRequestConfig", name: "MsApiRequestConfig",
components: {draggable}, components: {draggable},
props: { props: {
scenario: Object, scenario: Object,
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
default: false default: false
}
},
data() {
return {
selected: 0,
visible: false,
types: RequestFactory.TYPES,
type: ""
}
},
computed: {
isSelected() {
return function (request) {
return this.selected === request;
}
}
},
methods: {
createRequest: function (type) {
let request = new RequestFactory({type: type});
if (this.scenario.environmentId) {
request.useEnvironment = true;
}
this.scenario.requests.push(request);
this.type = "";
this.visible = false;
},
copyRequest: function (index) {
let request = this.scenario.requests[index];
this.scenario.requests.push(new RequestFactory(request));
},
disableRequest: function (index) {
this.scenario.requests[index].enable = false;
},
enableRequest: function (index) {
this.scenario.requests[index].enable = true;
},
deleteRequest: function (index) {
this.scenario.requests.splice(index, 1);
if (this.scenario.requests.length === 0) {
this.createRequest();
}
},
handleCommand: function (command) {
switch (command.type) {
case "copy":
this.copyRequest(command.index);
break;
case "delete":
this.deleteRequest(command.index);
break;
case "disable":
this.disableRequest(command.index);
break;
case "enable":
this.enableRequest(command.index);
break;
}
},
select: function (request) {
request.environment = this.scenario.environment;
if (!request.useEnvironment) {
request.useEnvironment = false;
}
request.dubboConfig = this.scenario.dubboConfig;
this.selected = request;
this.$emit("select", request, this.scenario);
}
},
created() {
this.select(this.scenario.requests[0]);
} }
},
data() {
return {
selected: 0,
visible: false,
types: RequestFactory.TYPES,
type: ""
}
},
computed: {
isSelected() {
return function (request) {
return this.selected === request;
}
},
isReference() {
return this.scenario.isReference();
}
},
methods: {
createRequest: function (type) {
let request = new RequestFactory({type: type});
if (this.scenario.environmentId) {
request.useEnvironment = true;
}
this.scenario.requests.push(request);
this.type = "";
this.visible = false;
},
copyRequest: function (index) {
let request = this.scenario.requests[index];
this.scenario.requests.push(new RequestFactory(request));
},
disableRequest: function (index) {
this.scenario.requests[index].enable = false;
},
enableRequest: function (index) {
this.scenario.requests[index].enable = true;
},
deleteRequest: function (index) {
this.scenario.requests.splice(index, 1);
if (this.scenario.requests.length === 0) {
this.createRequest();
}
},
handleCommand: function (command) {
switch (command.type) {
case "copy":
this.copyRequest(command.index);
break;
case "delete":
this.deleteRequest(command.index);
break;
case "disable":
this.disableRequest(command.index);
break;
case "enable":
this.enableRequest(command.index);
break;
}
},
select: function (request) {
request.environment = this.scenario.environment;
if (!request.useEnvironment) {
request.useEnvironment = false;
}
request.dubboConfig = this.scenario.dubboConfig;
this.selected = request;
this.$emit("select", request, this.scenario);
}
},
created() {
this.select(this.scenario.requests[0]);
} }
}
</script> </script>
<style scoped> <style scoped>
.request-item { .request-item {
border-left: 5px solid #1E90FF; border-left: 5px solid #1E90FF;
max-height: 40px; max-height: 40px;
border-top: 1px solid #EBEEF5; border-top: 1px solid #EBEEF5;
cursor: pointer; cursor: pointer;
} }
.request-item:first-child { .request-item:first-child {
border-top: 0; border-top: 0;
} }
.request-item:hover, .request-item.selected:hover { .request-item:hover, .request-item.selected:hover {
background-color: #ECF5FF; background-color: #ECF5FF;
} }
.request-item.selected { .request-item.selected {
background-color: #F5F5F5; background-color: #F5F5F5;
} }
.request-type { .request-type {
background-color: #409eff; background-color: #409eff;
color: #fff; color: #fff;
margin-left: 5px; margin-left: 5px;
padding: 4px 8px; padding: 4px 8px;
border-radius: 20px; border-radius: 20px;
white-space: nowrap; white-space: nowrap;
font-size: 12px; font-size: 12px;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
} }
.request-method { .request-method {
padding: 0 5px; padding: 0 5px;
color: #1E90FF; color: #1E90FF;
} }
.request-name { .request-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
width: 100%; width: 100%;
} }
.request-btn { .request-btn {
float: right; float: right;
text-align: center; text-align: center;
height: 40px; height: 40px;
} }
.request-btn .el-icon-more { .request-btn .el-icon-more {
padding: 13px; padding: 13px;
} }
.request-create { .request-create {
width: 100%; width: 100%;
} }
.request-ghost { .request-ghost {
opacity: 0.5; opacity: 0.5;
background-color: #909399; background-color: #909399;
} }
.request-item.disable-request { .request-item.disable-request {
border-left-color: #909399; border-left-color: #909399;
} }
.disable-request .request-type { .disable-request .request-type {
background-color: #909399; background-color: #909399;
} }
.disable-request .request-method { .disable-request .request-method {
color: #909399; color: #909399;
} }
</style> </style>

2
frontend/src/business/components/api/test/model/ScenarioModel.js
View File

@ -405,7 +405,7 @@ export class DubboRequest extends Request {
this.debugReport = undefined; this.debugReport = undefined;
this.beanShellPreProcessor = new BeanShellProcessor(options.beanShellPreProcessor); this.beanShellPreProcessor = new BeanShellProcessor(options.beanShellPreProcessor);
this.beanShellPostProcessor = new BeanShellProcessor(options.beanShellPostProcessor); this.beanShellPostProcessor = new BeanShellProcessor(options.beanShellPostProcessor);
this.enable = options.enable == undefined ? true : options.enable; this.enable = options.enable === undefined ? true : options.enable;
this.jsr223PreProcessor = new JSR223Processor(options.jsr223PreProcessor); this.jsr223PreProcessor = new JSR223Processor(options.jsr223PreProcessor);
this.jsr223PostProcessor = new JSR223Processor(options.jsr223PostProcessor); this.jsr223PostProcessor = new JSR223Processor(options.jsr223PostProcessor);