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-12-10 16:48:56 +08:00
parent 8bfcf45844
commit d5b777a55a
12 changed files with 348 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/src/main/java/io/metersphere/api/dto/definition/request/MsTestElement.java
View File

@ -12,6 +12,7 @@ import io.metersphere.api.dto.definition.request.auth.MsAuthManager;
import io.metersphere.api.dto.definition.request.configurations.MsHeaderManager;
import io.metersphere.api.dto.definition.request.controller.MsIfController;
import io.metersphere.api.dto.definition.request.extract.MsExtract;
import io.metersphere.api.dto.definition.request.processors.MsJSR223Processor;
import io.metersphere.api.dto.definition.request.processors.post.MsJSR223PostProcessor;
import io.metersphere.api.dto.definition.request.processors.pre.MsJSR223PreProcessor;
import io.metersphere.api.dto.definition.request.sampler.MsDubboSampler;
@ -37,6 +38,7 @@ import java.util.List;
@JsonSubTypes({
@JsonSubTypes.Type(value = MsHTTPSamplerProxy.class, name = "HTTPSamplerProxy"),
@JsonSubTypes.Type(value = MsHeaderManager.class, name = "HeaderManager"),
@JsonSubTypes.Type(value = MsJSR223Processor.class, name = "JSR223Processor"),
@JsonSubTypes.Type(value = MsJSR223PostProcessor.class, name = "JSR223PostProcessor"),
@JsonSubTypes.Type(value = MsJSR223PreProcessor.class, name = "JSR223PreProcessor"),
@JsonSubTypes.Type(value = MsTestPlan.class, name = "TestPlan"),
@ -52,7 +54,7 @@ import java.util.List;
@JsonSubTypes.Type(value = MsScenario.class, name = "scenario"),
})
@JSONType(seeAlso = {MsHTTPSamplerProxy.class, MsHeaderManager.class, MsJSR223PostProcessor.class,
@JSONType(seeAlso = {MsHTTPSamplerProxy.class, MsHeaderManager.class, MsJSR223Processor.class, MsJSR223PostProcessor.class,
MsJSR223PreProcessor.class, MsTestPlan.class, MsThreadGroup.class, AuthManager.class, MsAssertions.class,
MsExtract.class, MsTCPSampler.class, MsDubboSampler.class, MsJDBCSampler.class, MsConstantTimer.class, MsIfController.class, MsScenario.class}, typeKey = "type")
@Data
@ -118,7 +120,8 @@ public abstract class MsTestElement {
ObjectMapper mapper = new ObjectMapper();
mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
ApiDefinitionWithBLOBs apiDefinition = apiDefinitionService.getBLOBs(this.getId());
element = mapper.readValue(apiDefinition.getRequest(), new TypeReference<MsTestElement>() {});
element = mapper.readValue(apiDefinition.getRequest(), new TypeReference<MsTestElement>() {
});
hashTree.add(element);
} catch (Exception ex) {
ex.printStackTrace();

3
backend/src/main/java/io/metersphere/xmind/XmindCaseParser.java
View File

@ -14,6 +14,7 @@ import io.metersphere.xmind.parser.XmindParser;
import io.metersphere.xmind.parser.pojo.Attached;
import io.metersphere.xmind.parser.pojo.JsonRootBean;
import io.metersphere.xmind.utils.DetailUtil;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.web.multipart.MultipartFile;
@ -185,7 +186,7 @@ public class XmindCaseParser {
String nodePath = parent.getPath() + "/" + item.getTitle();
item.setPath(nodePath);
item.setParent(parent);
if (item.getChildren() != null && !item.getChildren().getAttached().isEmpty()) {
if (item.getChildren() != null && CollectionUtils.isNotEmpty(item.getChildren().getAttached())) {
recursion(item, level + 1, item.getChildren().getAttached());
} else {
if (!nodePath.startsWith("/")) {

28
frontend/src/business/components/api/automation/scenario/ApiComponent.vue
View File

@ -2,20 +2,30 @@
<div v-loading="loading">
<el-card>
<el-row>
<div class="el-step__icon is-text ms-api-col" v-if="request.referenced">
<div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'">
<div class="el-step__icon-inner">{{request.index}}</div>
</div>
<div class="el-step__icon is-text ms-api-col-create" v-else>
<div class="el-step__icon-inner">{{request.index}}</div>
</div>
<el-button v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'" class="ms-left-buttion" size="small">
{{$t('api_test.automation.api_list_import')}}
</el-button>
<el-button v-if="request.referenced==undefined || request.referenced==='Created' || request.referenced==='Copy'" class="ms-create-buttion" size="small">
{{$t('api_test.automation.customize_req')}}
</el-button>
<i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
@click="active(request)" v-if="request.referenced!=undefined && request.referenced!='Deleted' && request.referenced!='REF'"/>
<span>{{request.type!= 'create' ? request.name:''}} </span>
<span v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'">{{request.name}} </span>
<el-input size="small" v-model="request.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')" v-else/>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
<el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</el-row>
<!-- 请求参数-->
@ -112,6 +122,12 @@
color: #F56C6C;
}
.ms-left-buttion {
color: #F56C6C;
background-color: #FCF1F1;
margin-right: 20px;
}
.ms-api-col-create {
background-color: #EBF2F2;
border-color: #008080;
@ -127,6 +143,12 @@
transform: rotate(90deg);
}
.ms-create-buttion {
color: #008080;
background-color: #EBF2F2;
margin-right: 20px;
}
.tip {
padding: 3px 5px;
font-size: 16px;

4
frontend/src/business/components/api/automation/scenario/ApiCustomize.vue
View File

@ -61,7 +61,9 @@
this.request.method = row.method;
}
this.request.resourceId = getUUID();
this.$emit('addCustomizeApi', this.request);
let obj = {};
Object.assign(obj, this.request);
this.$emit('addCustomizeApi', obj);
},
reload() {
this.loading = true

13
frontend/src/business/components/api/automation/scenario/ApiScenarioComponent.vue
View File

@ -2,13 +2,14 @@
<div v-loading="loading">
<el-card>
<el-row>
<div class="el-step__icon is-text ms-api-col" style="float: left">
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{scenario.index}}</div>
</div>
<div style="margin-left: 20px;float: left"> {{scenario.name}}</div>
<el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.wait_controller')}}</el-button>
{{scenario.name}}
<el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
<el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</el-row>
</el-card>
</div>
@ -73,6 +74,12 @@
padding: 15px;
}
.ms-title-buttion {
background-color: #F4F4F5;
margin-right: 20px;
color: #606266;
}
.icon.is-active {
transform: rotate(90deg);
}

32
frontend/src/business/components/api/automation/scenario/ConstantTimer.vue
View File

@ -2,24 +2,14 @@
<div>
<el-card>
<el-row>
<div class="el-step__icon is-text ms-api-col" style="float: left">
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{timer.index}}</div>
</div>
<div>
<el-row :gutter="10" type="flex" align="middle">
<el-col :span="2">{{ $t('api_test.request.wait') }}</el-col>
<el-col :span="10">
<el-input-number class="width-100" size="small" v-model="timer.delay" :min="0" :step="1000"/>
</el-col>
<el-col :span="2">ms</el-col>
<el-col :span="8">
<el-switch v-model="timer.enable" :inactive-text="$t('api_test.scenario.enable_disable')"/>
</el-col>
<el-col :span="2">
<el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove"/>
</el-col>
</el-row>
</div>
<el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.wait_controller')}}</el-button>
<el-input-number class="width-100" size="small" v-model="timer.delay" :min="0" :step="1000"/>
ms
<!--<el-switch v-model="timer.enable" :inactive-text="$t('api_test.scenario.enable_disable')" style="margin-left: 20px"/>-->
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</el-row>
</el-card>
</div>
@ -37,7 +27,7 @@
},
methods: {
remove() {
this.$emit('remove', this.timer,this.node);
this.$emit('remove', this.timer, this.node);
}
}
}
@ -45,7 +35,7 @@
<style scoped>
.width-100 {
width: 100%
width: 40%
}
.ms-api-col {
@ -55,6 +45,12 @@
color: #67C23A;
}
.ms-title-buttion {
background-color: #F2F9EE;
color: #67C23A;
margin-right: 20px;
}
/deep/ .el-card__body {
padding: 15px;
}

166
frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
View File

@ -1,10 +1,10 @@
<template>
<el-card class="card-content">
<div style="background-color: white;">
<div class="ms-main-div">
<el-row>
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px">
<div class="ms-opt-btn">
<el-button type="primary" size="small" @click="editScenario">{{$t('commons.save')}}</el-button>
</div>
</el-col>
@ -119,7 +119,7 @@
<el-row>
<el-col :span="21">
<!-- 调试部分 -->
<div style="margin-left: 20px;border:1px #DCDFE6 solid;border-radius: 4px;margin-right: 10px">
<div class="ms-debug-div">
<el-row style="margin: 5px">
<el-col :span="6" class="ms-col-one">
{{currentScenario.name ===undefined || ''? $t('api_test.scenario.name') : currentScenario.name}}
@ -199,37 +199,37 @@
<el-button type="primary" icon="el-icon-refresh" size="small" @click="showAll">{{$t('commons.show_all')}}</el-button>
<br/>
<div v-if="operatingElements.indexOf('HTTPSamplerProxy')>0 || operatingElements.indexOf('DubboSampler')>0 || operatingElements.indexOf('JDBCSampler')>0 || operatingElements.indexOf('TCPSampler')>0 ">
<el-button class="ms-right-buttion" size="small" style="color: #F56C6C;background-color: #FCF1F1" @click="apiListImport">+{{$t('api_test.automation.api_list_import')}}</el-button>
<el-button class="ms-right-buttion ms-btn-1" size="small" @click="apiListImport">+{{$t('api_test.automation.api_list_import')}}</el-button>
</div>
<!--<div v-if="operatingElements.indexOf('OT_IMPORT')>0">
<el-button class="ms-right-buttion" size="small" style="color: #409EFF;background-color: #EEF5FE" @click="addComponent('OT_IMPORT')">+{{$t('api_test.automation.external_import')}}</el-button>
</div>-->
<div v-if="operatingElements.indexOf('ConstantTimer')>0">
<el-button class="ms-right-buttion" size="small" style="color: #67C23A;background-color: #F2F9EE" @click="addComponent('ConstantTimer')">+{{$t('api_test.automation.wait_controller')}}</el-button>
<el-button class="ms-right-buttion ms-btn-3" size="small" @click="addComponent('ConstantTimer')">+{{$t('api_test.automation.wait_controller')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('IfController')>0">
<el-button class="ms-right-buttion" size="small" style="color: #E6A23C;background-color: #FCF6EE" @click="addComponent('IfController')">+{{$t('api_test.automation.if_controller')}}</el-button>
<el-button class="ms-right-buttion ms-btn-4" size="small" @click="addComponent('IfController')">+{{$t('api_test.automation.if_controller')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('scenario')===0">
<el-button class="ms-right-buttion" size="small" style="color: #606266;background-color: #F4F4F5" @click="addComponent('scenario')">+{{$t('api_test.automation.scenario_import')}}</el-button>
<el-button class="ms-right-buttion ms-btn-5" size="small" @click="addComponent('scenario')">+{{$t('api_test.automation.scenario_import')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('JSR223Processor')>0">
<el-button class="ms-right-buttion" size="small" style="color: #7B4D12;background-color: #F1EEE9" @click="addComponent('JSR223Processor')">+{{$t('api_test.automation.customize_script')}}</el-button>
<el-button class="ms-right-buttion ms-btn-6" size="small" @click="addComponent('JSR223Processor')">+{{$t('api_test.automation.customize_script')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('CustomizeReq')>0">
<el-button class="ms-right-buttion" size="small" style="color: #008080;background-color: #EBF2F2" @click="addComponent('CustomizeReq')">+{{$t('api_test.automation.customize_req')}}</el-button>
<el-button class="ms-right-buttion ms-btn-7" size="small" @click="addComponent('CustomizeReq')">+{{$t('api_test.automation.customize_req')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('JSR223PreProcessor')>0">
<el-button class="ms-right-buttion" size="small" style="color: #B8741A;background-color: #F9F1EA" @click="addComponent('JSR223PreProcessor')">+{{$t('api_test.definition.request.pre_script')}}</el-button>
<el-button class="ms-right-buttion ms-btn-8" size="small" @click="addComponent('JSR223PreProcessor')">+{{$t('api_test.definition.request.pre_script')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('JSR223PostProcessor')>0">
<el-button class="ms-right-buttion" size="small" style="color: #783887;background-color: #F2ECF3" @click="addComponent('JSR223PostProcessor')">+{{$t('api_test.definition.request.post_script')}}</el-button>
<el-button class="ms-right-buttion ms-btn-9" size="small" @click="addComponent('JSR223PostProcessor')">+{{$t('api_test.definition.request.post_script')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('Assertions')>0">
<el-button class="ms-right-buttion" size="small" style="color: #A30014;background-color: #F7E6E9" @click="addComponent('Assertions')">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
<el-button class="ms-right-buttion ms-btn-10" size="small" @click="addComponent('Assertions')">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
</div>
<div v-if="operatingElements.indexOf('Extract')>0">
<el-button class="ms-right-buttion" size="small" style="color: #015478;background-color: #E6EEF2" @click="addComponent('Extract')">+{{$t('api_test.definition.request.extract_param')}}</el-button>
<el-button class="ms-right-buttion ms-btn-11" size="small" @click="addComponent('Extract')">+{{$t('api_test.definition.request.extract_param')}}</el-button>
</div>
</el-col>
</div>
@ -245,7 +245,7 @@
<!--自定义接口-->
<el-drawer :visible.sync="customizeVisible" :destroy-on-close="true" direction="ltr" :withHeader="false" :title="$t('api_test.automation.customize_req')" style="overflow: auto" :modal="false" size="90%">
<ms-api-customize :request="customizeRequest" @addCustomizeApi="addCustomizeApi" />
<ms-api-customize :request="customizeRequest" @addCustomizeApi="addCustomizeApi"/>
<!--<el-button style="float: right;margin: 20px" @click="addCustomizeApi">{{$t('commons.save')}}</el-button>-->
</el-drawer>
<!--场景导入 -->
@ -361,38 +361,6 @@
},
watch: {},
methods: {
nodeClick(e) {
if (e.referenced != 'REF' && e.referenced != 'Deleted') {
this.operatingElements = ELEMENTS.get(e.type);
} else {
this.operatingElements = [];
}
this.selectedTreeNode = e;
},
showAll() {
this.operatingElements = ELEMENTS.get("ALL");
this.selectedTreeNode = undefined;
this.reload();
},
apiListImport() {
this.apiListVisible = true;
},
recursiveSorting(arr) {
for (let i in arr) {
arr[i].index = Number(i) + 1;
if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
this.recursiveSorting(arr[i].hashTree);
}
}
},
sort() {
for (let i in this.scenarioDefinition) {
this.scenarioDefinition[i].index = Number(i) + 1;
if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
this.recursiveSorting(this.scenarioDefinition[i].hashTree);
}
}
},
addComponent(type) {
switch (type) {
case ELEMENT_TYPE.IfController:
@ -436,6 +404,38 @@
this.sort();
this.reload();
},
nodeClick(e) {
if (e.referenced != 'REF' && e.referenced != 'Deleted') {
this.operatingElements = ELEMENTS.get(e.type);
} else {
this.operatingElements = [];
}
this.selectedTreeNode = e;
},
showAll() {
this.operatingElements = ELEMENTS.get("ALL");
this.selectedTreeNode = undefined;
this.reload();
},
apiListImport() {
this.apiListVisible = true;
},
recursiveSorting(arr) {
for (let i in arr) {
arr[i].index = Number(i) + 1;
if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
this.recursiveSorting(arr[i].hashTree);
}
}
},
sort() {
for (let i in this.scenarioDefinition) {
this.scenarioDefinition[i].index = Number(i) + 1;
if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
this.recursiveSorting(this.scenarioDefinition[i].hashTree);
}
}
},
addCustomizeApi(request) {
this.customizeVisible = false;
if (this.selectedTreeNode != undefined) {
@ -734,6 +734,22 @@
width: 100%;
}
.ms-main-div {
background-color: white;
}
.ms-opt-btn {
float: right;
margin-right: 20px;
}
.ms-debug-div {
margin-left: 20px;
border: 1px #DCDFE6 solid;
border-radius: 4px;
margin-right: 10px;
}
.ms-scenario-button {
margin-left: 30%;
padding: 7px;
@ -761,6 +777,61 @@
margin-top: 10px;
}
.ms-btn-1 {
color: #F56C6C;
background-color: #FCF1F1
}
.ms-btn-2 {
color: #F56C6C;
background-color: #FCF1F1
}
.ms-btn-3 {
color: #67C23A;
background-color: #F2F9EE
}
.ms-btn-4 {
color: #E6A23C;
background-color: #FCF6EE
}
.ms-btn-5 {
color: #606266;
background-color: #F4F4F5
}
.ms-btn-6 {
color: #7B4D12;
background-color: #F1EEE9
}
.ms-btn-7 {
color: #008080;
background-color: #EBF2F2
}
.ms-btn-8 {
color: #B8741A;
background-color: #F9F1EA
}
.ms-btn-9 {
color: #783887;
background-color: #F2ECF3
}
.ms-btn-10 {
color: #A30014;
background-color: #F7E6E9
}
.ms-btn-11 {
color: #015478;
background-color: #E6EEF2
}
/deep/ .el-tree-node__content {
height: 100%;
margin-top: 8px;
@ -775,4 +846,7 @@
overflow: auto;
}
/deep/ .el-step__icon.is-text {
border: 1px solid;
}
</style>

45
frontend/src/business/components/api/automation/scenario/IfController.vue
View File

@ -1,32 +1,23 @@
<template>
<el-card>
<el-row>
<div class="el-step__icon is-text ms-api-col" style="float: left">
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{controller.index}}</div>
</div>
<div>
<el-row :gutter="10" type="flex" align="middle">
<el-col :span="1">If</el-col>
<el-col :span="6">
<el-input size="small" v-model="controller.variable" :placeholder="$t('api_test.request.condition_variable')"/>
</el-col>
<el-col :span="5">
<el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
@change="change">
<el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
</el-select>
</el-col>
<el-col :span="6">
<el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator"/>
</el-col>
<el-col :span="4">
<el-switch v-model="controller.enable" :inactive-text="$t('api_test.scenario.enable_disable')"/>
</el-col>
<el-col :span="2">
<el-button size="mini" type="danger" icon="el-icon-delete" circle @click="remove"/>
</el-col>
</el-row>
</div>
<el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.if_controller')}}</el-button>
<el-input size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
<el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
@change="change" style="width: 10%;margin-left: 10px">
<el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
</el-select>
<el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
<!--<el-switch v-model="controller.enable" :inactive-text="$t('api_test.scenario.enable_disable')" style="margin-left: 10px"/>-->
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</el-row>
</el-card>
</template>
@ -102,4 +93,10 @@
margin-right: 10px;
color: #E6A23C;
}
.ms-title-buttion {
background-color: #FCF6EE;
margin-right: 20px;
color: #E6A23C;
}
</style>

5
frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
View File

@ -7,8 +7,9 @@
</div>
<el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
<i class="icon el-icon-arrow-right" :class="{'is-active': this.jsr223ProcessorData.active}" @click="changeActive" style="margin-left: 20px"/>
<el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>
<el-button size="small" style="float: right" @click="remove">{{$t('commons.remove')}}</el-button>
<el-input size="small" v-model="jsr223ProcessorData.name" :placeholder="$t('commons.input_name')" class="ms-api-header-select" style="width: 40%"/>
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</div>
</el-row>
<el-collapse-transition>

112
frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
View File

@ -6,40 +6,49 @@
<div class="el-step__icon-inner">{{assertions.index}}</div>
</div>
<el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9">{{$t('api_test.definition.request.assertions_rule')}}</el-button>
<el-button size="small" style="float: right;margin-top: 0px" @click="remove">{{$t('commons.remove')}}</el-button>
</div>
<div class="assertion-add">
<el-row :gutter="10">
<el-col :span="4">
<el-select :disabled="isReadOnly" class="assertion-item" v-model="type"
:placeholder="$t('api_test.request.assertions.select_type')"
size="small">
<el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/>
<el-option :label="'JSONPath'" :value="options.JSON_PATH"/>
<el-option :label="'XPath'" :value="options.XPATH2"/>
<el-option :label="$t('api_test.request.assertions.response_time')" :value="options.DURATION"/>
<el-option :label="$t('api_test.request.assertions.jsr223')" :value="options.JSR223"/>
</el-select>
</el-col>
<el-col :span="20">
<ms-api-assertion-regex :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.REGEX"
:callback="after"/>
<ms-api-assertion-json-path :is-read-only="isReadOnly" :list="assertions.jsonPath"
v-if="type === options.JSON_PATH" :callback="after"/>
<ms-api-assertion-x-path2 :is-read-only="isReadOnly" :list="assertions.xpath2" v-if="type === options.XPATH2"
:callback="after"/>
<ms-api-assertion-duration :is-read-only="isReadOnly" v-model="time" :duration="assertions.duration"
v-if="type === options.DURATION" :callback="after"/>
<ms-api-assertion-jsr223 :is-read-only="isReadOnly" :list="assertions.jsr223" v-if="type === options.JSR223"
:callback="after"/>
<el-button v-if="!type" :disabled="true" type="primary" size="small">
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>
</el-row>
</div>
<ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
<i class="icon el-icon-arrow-right" :class="{'is-active': assertions.active}" @click="active(assertions)" style="margin-left: 20px"/>
<el-input size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</div>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="assertions.active">
<div class="assertion-add">
<el-row :gutter="10">
<el-col :span="4">
<el-select :disabled="isReadOnly" class="assertion-item" v-model="type"
:placeholder="$t('api_test.request.assertions.select_type')"
size="small">
<el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/>
<el-option :label="'JSONPath'" :value="options.JSON_PATH"/>
<el-option :label="'XPath'" :value="options.XPATH2"/>
<el-option :label="$t('api_test.request.assertions.response_time')" :value="options.DURATION"/>
<el-option :label="$t('api_test.request.assertions.jsr223')" :value="options.JSR223"/>
</el-select>
</el-col>
<el-col :span="20">
<ms-api-assertion-regex :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.REGEX"
:callback="after"/>
<ms-api-assertion-json-path :is-read-only="isReadOnly" :list="assertions.jsonPath"
v-if="type === options.JSON_PATH" :callback="after"/>
<ms-api-assertion-x-path2 :is-read-only="isReadOnly" :list="assertions.xpath2" v-if="type === options.XPATH2"
:callback="after"/>
<ms-api-assertion-duration :is-read-only="isReadOnly" v-model="time" :duration="assertions.duration"
v-if="type === options.DURATION" :callback="after"/>
<ms-api-assertion-jsr223 :is-read-only="isReadOnly" :list="assertions.jsr223" v-if="type === options.JSR223"
:callback="after"/>
<el-button v-if="!type" :disabled="true" type="primary" size="small">
{{ $t('api_test.request.assertions.add') }}
</el-button>
</el-col>
</el-row>
</div>
<ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
</div>
</el-collapse-transition>
</el-card>
</div>
</template>
@ -72,7 +81,7 @@
node: {},
request: {},
customizeStyle: {
type:String,
type: String,
default: "margin-top: 10px"
},
scenario: Scenario,
@ -111,8 +120,12 @@
this.loading = false
})
},
active(item) {
item.active = !item.active;
this.reload();
},
remove() {
this.$emit('remove', this.assertions,this.node);
this.$emit('remove', this.assertions, this.node);
},
addJsonpathSuggest(jsonPathList) {
jsonPathList.forEach(jsonPath => {
@ -142,31 +155,10 @@
border-radius: 5px;
}
.bg-purple-dark {
background: #99a9bf;
.icon.is-active {
transform: rotate(90deg);
}
.bg-purple {
background: #d3dce6;
/deep/ .el-card__body {
padding: 15px;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.json-path-suggest-button {
margin-top: 20px;
margin-left: 20px;
}
</style>

74
frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
View File

@ -1,35 +1,42 @@
<template>
<div :style="customizeStyle">
<div :style="customizeStyle" v-loading="loading">
<el-card>
<div class="el-step__icon is-text" style="color: #015478;background-color: #E6EEF2;margin-right: 10px" v-if="extract.index">
<div class="el-step__icon-inner">{{extract.index}}</div>
</div>
<el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2">{{$t('api_test.definition.request.extract_param')}}</el-button>
<el-button size="small" style="float: right;margin-top: 0px" @click="remove">移除</el-button>
<i class="icon el-icon-arrow-right" :class="{'is-active': extract.active}" @click="active(extract)" style="margin-left: 20px"/>
<el-input size="small" v-model="extract.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
<div style="margin: 20px">
<div class="extract-description">
{{$t('api_test.request.extract.description')}}
</div>
<div class="extract-add">
<el-row :gutter="10">
<el-col :span="2">
<el-select :disabled="isReadOnly" class="extract-item" v-model="type" :placeholder="$t('api_test.request.extract.select_type')"
size="small">
<el-option :label="$t('api_test.request.extract.regex')" :value="options.REGEX"/>
<el-option label="JSONPath" :value="options.JSON_PATH"/>
<el-option label="XPath" :value="options.XPATH"/>
</el-select>
</el-col>
<el-col :span="22">
<ms-api-extract-common :is-read-only="isReadOnly" :extract-type="type" :list="list" v-if="type" :callback="after"/>
</el-col>
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="extract.active">
<div style="margin: 20px">
<div class="extract-description">
{{$t('api_test.request.extract.description')}}
</div>
<div class="extract-add">
<el-row :gutter="10">
<el-col :span="2">
<el-select :disabled="isReadOnly" class="extract-item" v-model="type" :placeholder="$t('api_test.request.extract.select_type')"
size="small">
<el-option :label="$t('api_test.request.extract.regex')" :value="options.REGEX"/>
<el-option label="JSONPath" :value="options.JSON_PATH"/>
<el-option label="XPath" :value="options.XPATH"/>
</el-select>
</el-col>
<el-col :span="22">
<ms-api-extract-common :is-read-only="isReadOnly" :extract-type="type" :list="list" v-if="type" :callback="after"/>
</el-col>
<el-button v-if="!type" :disabled="true" type="primary" size="small">Add</el-button>
</el-row>
<el-button v-if="!type" :disabled="true" type="primary" size="small">Add</el-button>
</el-row>
</div>
<ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
</div>
</div>
<ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
</div>
</el-collapse-transition>
</el-card>
</div>
</template>
@ -66,6 +73,7 @@
options: EXTRACT_TYPE,
type: "",
reloadData: "",
loading: false,
}
},
@ -77,9 +85,17 @@
remove() {
this.$emit('remove', this.extract, this.node);
},
reload() {
this.loading = true
this.$nextTick(() => {
this.loading = false
})
},
active(item) {
item.active = !item.active;
this.reload();
},
},
computed: {
list() {
switch (this.type) {
@ -113,4 +129,12 @@
margin: 5px 0;
border-radius: 5px;
}
.icon.is-active {
transform: rotate(90deg);
}
/deep/ .el-card__body {
padding: 15px;
}
</style>

83
frontend/src/business/components/api/definition/components/processor/Jsr233Processor.vue
View File

@ -1,42 +1,44 @@
<template>
<div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin-top: 20px">
<el-row>
<div>
<el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
<i class="icon el-icon-arrow-right" :class="{'is-active': active}" @click="changeActive" style="margin-left: 20px"/>
<el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>
<el-button size="small" style="float: right" @click="remove">移除</el-button>
</div>
</el-row>
<el-collapse-transition>
<div v-if="active">
<el-row style="margin:0px 10px 10px">
<el-col>
<div class="document-url">
<el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
type="primary">{{$t('commons.reference_documentation')}}
</el-link>
<ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="20" class="script-content">
<ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage"
:read-only="isReadOnly"
:data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="['java','python']"
ref="codeEdit"/>
</el-col>
<el-col :span="4" class="script-index">
<ms-dropdown :default-command="jsr223ProcessorData.language" :commands="languages" @command="languageChange"/>
<div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
<div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
<el-link :disabled="template.disabled" @click="addTemplate(template)">{{template.title}}</el-link>
</div>
</el-col>
</el-row>
</div>
</el-collapse-transition>
<div style="margin-top: 10px">
<el-card>
<el-row>
<div>
<el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
<i class="icon el-icon-arrow-right" :class="{'is-active': active}" @click="changeActive" style="margin-left: 20px"/>
<el-input size="small" v-model="jsr223ProcessorData.name" class="ms-api-header-select" style="width: 380px"/>
<el-button size="mini" icon="el-icon-delete" circle @click="remove" style="margin-right: 20px; float: right"/>
</div>
</el-row>
<el-collapse-transition>
<div v-if="active">
<el-row style="margin:0px 10px 10px">
<el-col>
<div class="document-url">
<el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
type="primary">{{$t('commons.reference_documentation')}}
</el-link>
<ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="20" class="script-content">
<ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage"
:read-only="isReadOnly"
:data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="['java','python']"
ref="codeEdit"/>
</el-col>
<el-col :span="4" class="script-index">
<ms-dropdown :default-command="jsr223ProcessorData.language" :commands="languages" @command="languageChange"/>
<div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
<div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
<el-link :disabled="template.disabled" @click="addTemplate(template)">{{template.title}}</el-link>
</div>
</el-col>
</el-row>
</div>
</el-collapse-transition>
</el-card>
</div>
</template>
@ -138,7 +140,7 @@
}
this.reload();
},
remove(){
remove() {
this.$emit('remove', this.jsr223ProcessorData);
},
reload() {
@ -195,4 +197,7 @@
.icon.is-active {
transform: rotate(90deg);
}
/deep/ .el-card__body {
padding: 15px;
}
</style>