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

Merge branch 'master' of https://github.com/metersphere/metersphere 

# Conflicts:
#	frontend/src/business/components/api/automation/scenario/ApiComponent.vue
#	frontend/src/business/components/api/automation/scenario/IfController.vue
#	frontend/src/business/components/api/automation/scenario/Jsr233Processor.vue
#	frontend/src/business/components/api/automation/scenario/LoopController.vue
#	frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
#	frontend/src/business/components/api/definition/components/extract/ApiExtract.vue
This commit is contained in:
fit2-zhao 2021-01-12 17:29:57 +08:00
parent 59301d63ce 7f49a1b8ef
commit cc1e26fbdc
10 changed files with 550 additions and 384 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,55 +1,41 @@
<template> <template>
<div v-loading="loading"> <api-base-component
<el-card> v-loading="loading"
<el-row> @copy="copyRow"
<div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'"> @remove="remove"
<div class="el-step__icon-inner">{{request.index}}</div> :data="request"
</div> :color="displayColor.color"
<div class="el-step__icon is-text ms-api-col-ot-import" v-else-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'"> :background-color="displayColor.backgroundColor"
<div class="el-step__icon-inner">{{request.index}}</div> :title="displayTitle">
</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' || request.referenced==='Copy'" class="ms-left-button" size="small"> <template v-slot:headerLeft>
{{$t('api_test.automation.api_list_import')}} <slot name="headerLeft">
</el-button> <i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
@click="active(request)"/>
<el-button v-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'" class="ms-api-col-ot-import-button" size="small"> <el-input v-if="isShowInput || !request.name" size="small" v-model="request.name" class="name-input"
{{$t('api_test.automation.external_import')}} @blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
</el-button> <span v-else>
{{request.name}}
<el-button v-if="request.referenced==undefined || request.referenced==='Created' " class="ms-create-button" size="small"> <i :class="{'edit-disable' : isDeletedOrRef}" class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester/>
{{$t('api_test.automation.customize_req')}} </span>
</el-button> </slot>
<span v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'">{{request.name}} </span>
<el-input size="small" draggable v-model="request.name" style="width: 40%;" :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==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag> <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag> <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
<div style="margin-right: 20px; float: right"> </template>
<i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
@click="active(request)"/> <template v-slot:button>
<el-switch v-model="request.enable" style="margin-left: 10px"/> <el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play" style="background-color: #409EFF;color: white;" size="mini" circle/>
<el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play" </template>
style="background-color: #409EFF;color: white;margin-left: 10px" size="mini" circle/>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
</div>
</el-row>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="request.active" draggable>
<div v-if="request.protocol === 'HTTP'"> <div v-if="request.protocol === 'HTTP'">
<el-input draggable :placeholder="$t('api_test.definition.request.path_all_info')" v-if="request.url" v-model="request.url" style="width: 85%;margin-top: 10px" size="small"> <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-if="request.url" v-model="request.url" style="width: 85%;margin-top: 10px" size="small">
<el-select v-model="request.method" slot="prepend" style="width: 100px" size="small"> <el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/> <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select> </el-select>
</el-input> </el-input>
<el-input draggable :placeholder="$t('api_test.definition.request.path_all_info')" v-else v-model="request.path" style="width: 85%;margin-top: 10px" size="small"> <el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-else v-model="request.path" style="width: 85%;margin-top: 10px" size="small">
<el-select v-model="request.method" slot="prepend" style="width: 100px" size="small"> <el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/> <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select> </el-select>
@ -62,19 +48,95 @@
<ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/> <ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>
<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 draggable :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/> <ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>
<!-- 保存操作 --> <!-- 保存操作 -->
<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced"> <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">
{{$t('commons.save')}} {{$t('commons.save')}}
</el-button> </el-button>
</div>
</el-collapse-transition>
</el-card>
<!-- 执行组件 -->
<ms-run :debug="false" :reportId="reportId" :run-data="runData" <ms-run :debug="false" :reportId="reportId" :run-data="runData"
@runRefresh="runRefresh" ref="runTest"/> @runRefresh="runRefresh" ref="runTest"/>
</div>
</api-base-component>
<!--<div v-loading="loading" @click="active(request)">-->
<!--<el-card>-->
<!--<el-row>-->
<!--&lt;!&ndash;<div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="el-step__icon-inner">{{request.index}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="el-step__icon is-text ms-api-col-ot-import" v-else-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="el-step__icon-inner">{{request.index}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="el-step__icon is-text ms-api-col-create" v-else>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="el-step__icon-inner">{{request.index}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<el-button v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'" class="ms-left-button" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;{{$t('api_test.automation.api_list_import')}}&ndash;&gt;-->
<!--&lt;!&ndash;</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;<el-button v-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'" class="ms-api-col-ot-import-button" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;{{$t('api_test.automation.external_import')}}&ndash;&gt;-->
<!--&lt;!&ndash;</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;<el-button v-if="request.referenced==undefined || request.referenced==='Created' " class="ms-create-button" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;{{$t('api_test.automation.customize_req')}}&ndash;&gt;-->
<!--&lt;!&ndash;</el-button>&ndash;&gt;-->
<!--<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%;" :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==='Copy'">{{ $t('commons.copy') }}</el-tag>-->
<!--<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>-->
<!--<div style="margin-right: 20px; float: right">-->
<!--<i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"-->
<!--@click="active(request)"/>-->
<!--<el-switch v-model="request.enable" style="margin-left: 10px"/>-->
<!--<el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play"-->
<!--style="background-color: #409EFF;color: white;margin-left: 10px" size="mini" circle/>-->
<!--<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>-->
<!--<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>-->
<!--</div>-->
<!--</el-row>-->
<!--&lt;!&ndash;&lt;!&ndash; 请求参数&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<el-collapse-transition>&ndash;&gt;-->
<!--&lt;!&ndash;<div v-if="request.active">&ndash;&gt;-->
<!--&lt;!&ndash;<div v-if="request.protocol === 'HTTP'">&ndash;&gt;-->
<!--&lt;!&ndash;<el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-if="request.url" v-model="request.url" style="width: 85%;margin-top: 10px" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;<el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>&ndash;&gt;-->
<!--&lt;!&ndash;</el-select>&ndash;&gt;-->
<!--&lt;!&ndash;</el-input>&ndash;&gt;-->
<!--&lt;!&ndash;<el-input :placeholder="$t('api_test.definition.request.path_all_info')" v-else v-model="request.path" style="width: 85%;margin-top: 10px" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;<el-select v-model="request.method" slot="prepend" style="width: 100px" size="small">&ndash;&gt;-->
<!--&lt;!&ndash;<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>&ndash;&gt;-->
<!--&lt;!&ndash;</el-select>&ndash;&gt;-->
<!--&lt;!&ndash;</el-input>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>&ndash;&gt;-->
<!--&lt;!&ndash;<ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>&ndash;&gt;-->
<!--&lt;!&ndash;<ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>&ndash;&gt;-->
<!--&lt;!&ndash;<ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :showScript="false"/>&ndash;&gt;-->
<!--&lt;!&ndash;<ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>&ndash;&gt;-->
<!--&lt;!&ndash;<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>&ndash;&gt;-->
<!--&lt;!&ndash;<ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; 保存操作 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">&ndash;&gt;-->
<!--&lt;!&ndash;{{$t('commons.save')}}&ndash;&gt;-->
<!--&lt;!&ndash;</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</el-collapse-transition>&ndash;&gt;-->
<!--</el-card>-->
<!--&lt;!&ndash; 执行组件 &ndash;&gt;-->
<!--&lt;!&ndash;<ms-run :debug="false" :reportId="reportId" :run-data="runData"&ndash;&gt;-->
<!--&lt;!&ndash;@runRefresh="runRefresh" ref="runTest"/>&ndash;&gt;-->
<!--</div>-->
</template> </template>
<script> <script>
@ -86,7 +148,7 @@
import MsRequestResultTail from "../../definition/components/response/RequestResultTail"; import MsRequestResultTail from "../../definition/components/response/RequestResultTail";
import MsRun from "../../definition/components/Run"; import MsRun from "../../definition/components/Run";
import {getUUID} from "@/common/js/utils"; import {getUUID} from "@/common/js/utils";
import ApiBaseComponent from "./common/ApiBaseComponent";
export default { export default {
name: "MsApiComponent", name: "MsApiComponent",
props: { props: {
@ -95,9 +157,17 @@
node: {}, node: {},
currentEnvironmentId: String, currentEnvironmentId: String,
}, },
components: {MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun}, components: {
ApiBaseComponent,
MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun},
data() { data() {
return {loading: false, reqOptions: REQ_METHOD, reportId: "", runData: []} return {
loading: false,
reqOptions: REQ_METHOD,
reportId: "",
runData: [],
isShowInput: false
}
}, },
created() { created() {
if (!this.request.requestResult) { if (!this.request.requestResult) {
@ -117,6 +187,61 @@
} }
} }
}, },
computed: {
displayColor() {
if (this.isApiImport) {
return {
color: "#F56C6C",
backgroundColor: "#FCF1F1"
}
} else if (this.isExternalImport) {
return {
color: "#409EFF",
backgroundColor: "#EEF5FE"
}
} else if (this.isCustomizeReq) {
return {
color: "#008080",
backgroundColor: "#EBF2F2"
}
}
return {};
},
displayTitle() {
if (this.isApiImport) {
return this.$t('api_test.automation.api_list_import');
} else if (this.isExternalImport) {
return this.$t('api_test.automation.external_import');
} else if(this.isCustomizeReq) {
return this.$t('api_test.automation.customize_req');
}
return "";
},
isApiImport() {
if (this.request.referenced!=undefined && this.request.referenced==='Deleted' || this.request.referenced=='REF' || this.request.referenced==='Copy') {
return true
}
return false;
},
isExternalImport() {
if (this.request.referenced!=undefined && this.request.referenced==='OT_IMPORT') {
return true
}
return false;
},
isCustomizeReq() {
if (this.request.referenced==undefined || this.request.referenced==='Created') {
return true
}
return false;
},
isDeletedOrRef() {
if (this.request.referenced!= undefined && this.request.referenced === 'Deleted' || this.request.referenced === 'REF') {
return true
}
return false;
}
},
methods: { methods: {
remove() { remove() {
this.$emit('remove', this.request, this.node); this.$emit('remove', this.request, this.node);
@ -124,6 +249,12 @@
copyRow() { copyRow() {
this.$emit('copyRow', this.request, this.node); this.$emit('copyRow', this.request, this.node);
}, },
editName() {
if (this.isDeletedOrRef) {
return;
}
this.isShowInput = true;
},
getApiInfo() { getApiInfo() {
if (this.request.id && this.request.referenced === 'REF') { if (this.request.id && this.request.referenced === 'REF') {
let requestResult = this.request.requestResult; let requestResult = this.request.requestResult;
@ -168,7 +299,7 @@
} }
}, },
active(item) { active(item) {
item.active = !item.active; this.request.active = !this.request.active;
this.reload(); this.reload();
}, },
run() { run() {
@ -179,7 +310,6 @@
this.loading = true; this.loading = true;
this.runData = []; this.runData = [];
this.request.useEnvironment = this.currentEnvironmentId; this.request.useEnvironment = this.currentEnvironmentId;
let debugData = { let debugData = {
id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario", id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare, variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare,
@ -188,7 +318,6 @@
this.runData.push(debugData); this.runData.push(debugData);
/*触发执行操作*/ /*触发执行操作*/
this.reportId = getUUID().substring(0, 8); this.reportId = getUUID().substring(0, 8);
}, },
runRefresh(data) { runRefresh(data) {
this.request.requestResult = data; this.request.requestResult = data;
@ -205,53 +334,14 @@
</script> </script>
<style scoped> <style scoped>
.ms-api-col {
background-color: #FCF1F1;
border-color: #F56C6C;
margin-right: 10px;
color: #F56C6C;
}
.ms-left-button {
color: #F56C6C;
background-color: #FCF1F1;
margin-right: 20px;
}
.ms-api-col-create {
background-color: #EBF2F2;
border-color: #008080;
margin-right: 10px;
color: #008080;
}
.ms-api-col-ot-import {
background-color: #EEF5FE;
border-color: #409EFF;
margin-right: 10px;
color: #409EFF;
}
.ms-api-col-ot-import-button { .ms-api-col-ot-import-button {
background-color: #EEF5FE; background-color: #EEF5FE;
margin-right: 20px; margin-right: 20px;
color: #409EFF; color: #409EFF;
} }
/deep/ .el-card__body { /deep/ .el-card__body {
padding: 15px; padding: 15px;
} }
.icon.is-active {
transform: rotate(90deg);
}
.ms-create-button {
color: #008080;
background-color: #EBF2F2;
margin-right: 20px;
}
.tip { .tip {
padding: 3px 5px; padding: 3px 5px;
font-size: 16px; font-size: 16px;
@ -259,5 +349,16 @@
border-left: 4px solid #783887; border-left: 4px solid #783887;
margin: 20px 0; margin: 20px 0;
} }
.name-input {
width: 30%;
}
.el-icon-arrow-right {
margin-right: 5px;
}
.icon.is-active {
transform: rotate(90deg);
}
.edit-disable {
color: #808080;
}
</style> </style>

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

@ -1,26 +1,25 @@
<template> <template>
<div> <api-base-component
<el-card> @copy="copyRow"
<el-row> @remove="remove"
<div class="el-step__icon is-text ms-api-col"> :data="timer"
<div class="el-step__icon-inner">{{timer.index}}</div> :show-collapse="false"
</div> color="#67C23A"
<el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.wait_controller')}}</el-button> background-color="#F2F9EE"
<el-input-number class="width-100" size="small" v-model="timer.delay" :min="0" :step="1000"/> :title="$t('api_test.automation.wait_controller')">
ms
<div style="margin-right: 20px; float: right"> <template v-slot:headerLeft>
<el-switch v-model="timer.enable" style="margin-left: 10px"/> <el-input-number class="time-input" size="small" v-model="timer.delay" :min="0" :step="1000"/>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/> </template>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
</div> </api-base-component>
</el-row>
</el-card>
</div>
</template> </template>
<script> <script>
import ApiBaseComponent from "./common/ApiBaseComponent";
export default { export default {
name: "MsConstantTimer", name: "MsConstantTimer",
components: {ApiBaseComponent},
props: { props: {
timer: {}, timer: {},
node: {}, node: {},
@ -60,4 +59,9 @@
/deep/ .el-card__body { /deep/ .el-card__body {
padding: 15px; padding: 15px;
} }
.time-input {
width: 30%;
/*margin-left: 20px;*/
}
</style> </style>

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

@ -663,6 +663,9 @@
// 深度复制 // 深度复制
let obj = JSON.parse(JSON.stringify(row)); let obj = JSON.parse(JSON.stringify(row));
obj.resourceId = getUUID(); obj.resourceId = getUUID();
if (obj.name) {
obj.name = obj.name + '_copy';
}
hashTree.push(obj); hashTree.push(obj);
this.sort(); this.sort();
this.reload(); this.reload();

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

@ -1,31 +1,33 @@
<template> <template>
<el-card> <api-base-component
<el-row> @copy="copyRow"
<div class="el-step__icon is-text ms-api-col"> @remove="remove"
<div class="el-step__icon-inner">{{controller.index}}</div> :data="controller"
</div> :show-collapse="false"
<el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.if_controller')}}</el-button> color="#E6A23C"
background-color="#FCF6EE"
:title="$t('api_test.automation.if_controller')">
<el-input draggable size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/> <template v-slot:headerLeft>
<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" <el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
@change="change" style="width: 10%;margin-left: 10px"> @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-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
</el-select> </el-select>
<el-input draggable size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/> <el-input size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
<div style="margin-right: 20px; float: right"> </template>
<el-switch v-model="controller.enable" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/> </api-base-component>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
</div>
</el-row>
</el-card>
</template> </template>
<script> <script>
import ApiBaseComponent from "./common/ApiBaseComponent";
export default { export default {
name: "MsIfController", name: "MsIfController",
components: {ApiBaseComponent},
props: { props: {
controller: {}, controller: {},
node: {}, node: {},
@ -91,16 +93,4 @@
</script> </script>
<style scoped> <style scoped>
.ms-api-col {
background-color: #FCF6EE;
border-color: #E6A23C;
margin-right: 10px;
color: #E6A23C;
}
.ms-title-buttion {
background-color: #FCF6EE;
margin-right: 20px;
color: #E6A23C;
}
</style> </style>

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

@ -1,29 +1,17 @@
<template> <template>
<el-card> <api-base-component
<el-row> @copy="copyRow"
<div> @remove="remove"
<div class="el-step__icon is-text" :style="styleType" style="margin-right: 10px"> :data="jsr223ProcessorData"
<div class="el-step__icon-inner">{{jsr223ProcessorData.index}}</div> color="#B8741A"
</div> background-color="#F9F1EA"
<el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button> :title="title">
<el-input draggable size="small" v-model="jsr223ProcessorData.name" :placeholder="$t('commons.input_name')" class="ms-api-header-select" style="width: 40%"/>
<div style="margin-right: 20px; float: right">
<i class="icon el-icon-arrow-right" :class="{'is-active': this.jsr223ProcessorData.active}" @click="changeActive" style="margin-left: 20px"/>
<el-switch v-model="jsr223ProcessorData.enable" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
</div>
</div>
</el-row>
<el-collapse-transition>
<div v-if="jsr223ProcessorData.active">
<el-row style="margin:0px 10px 10px"> <el-row style="margin:0px 10px 10px">
<el-col> <el-col>
<div class="document-url"> <div class="document-url">
<el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor" <el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor"
type="primary">{{$t('commons.reference_documentation')}} type="primary">{{$t('commons.reference_documentation')}}
</el-link> </el-link>
<ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -42,20 +30,17 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </api-base-component>
</el-collapse-transition>
</el-card>
</template> </template>
<script> <script>
import MsCodeEdit from "../../../common/components/MsCodeEdit"; import MsCodeEdit from "../../../common/components/MsCodeEdit";
import MsInstructionsIcon from "../../../common/components/MsInstructionsIcon"; import MsInstructionsIcon from "../../../common/components/MsInstructionsIcon";
import MsDropdown from "../../../common/components/MsDropdown"; import MsDropdown from "../../../common/components/MsDropdown";
import ApiBaseComponent from "./common/ApiBaseComponent";
export default { export default {
name: "MsJsr233Processor", name: "MsJsr233Processor",
components: {MsDropdown, MsInstructionsIcon, MsCodeEdit}, components: {ApiBaseComponent, MsDropdown, MsInstructionsIcon, MsCodeEdit},
data() { data() {
return { return {
jsr223ProcessorData: {}, jsr223ProcessorData: {},
@ -161,43 +146,30 @@
</script> </script>
<style scoped> <style scoped>
.ace_editor { .ace_editor {
border-radius: 5px; border-radius: 5px;
} }
.script-content { .script-content {
height: calc(100vh - 570px); height: calc(100vh - 570px);
} }
.script-index { .script-index {
padding: 0 20px; padding: 0 20px;
} }
.template-title { .template-title {
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
} }
.document-url { .document-url {
margin-top: 10px; margin-top: 10px;
} }
.instructions-icon { .instructions-icon {
margin-left: 5px; margin-left: 5px;
} }
.ms-dropdown { .ms-dropdown {
margin-bottom: 20px; margin-bottom: 20px;
} }
/deep/ .el-divider {
.ms-api-header-select { margin-bottom: 10px;
margin-left: 20px;
min-width: 300px;
}
.icon.is-active {
transform: rotate(90deg);
} }
</style> </style>

50
frontend/src/business/components/api/automation/scenario/LoopController.vue
View File

@ -1,26 +1,20 @@
<template> <template>
<el-card v-loading="loading">
<el-row>
<div class="el-step__icon is-text ms-api-col">
<div class="el-step__icon-inner">{{controller.index}}</div>
</div>
<el-button class="ms-title-buttion" size="small">{{$t('api_test.automation.loop_controller')}}</el-button>
<api-base-component
@copy="copyRow"
@remove="remove"
:data="controller"
color="#015478"
background-color="#E6EEF2"
:title="$t('api_test.automation.loop_controller')">
<template v-slot:headerLeft>
<el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="LOOP_COUNT">{{$t('loop.loops_title')}}</el-radio> <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="LOOP_COUNT">{{$t('loop.loops_title')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="FOREACH">{{$t('loop.foreach')}}</el-radio> <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="FOREACH">{{$t('loop.foreach')}}</el-radio>
<el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="WHILE">{{$t('loop.while')}}</el-radio> <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="WHILE">{{$t('loop.while')}}</el-radio>
</template>
<div style="margin-right: 20px; float: right">
<i class="icon el-icon-arrow-right" :class="{'is-active': controller.active}"
@click="active(controller)"/>
<el-switch v-model="controller.enable" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
</div>
</el-row>
<el-collapse-transition>
<div v-if="controller.active" style="margin-top: 20px;" draggable>
<div v-if="controller.loopType==='LOOP_COUNT'"> <div v-if="controller.loopType==='LOOP_COUNT'">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
@ -70,15 +64,15 @@
<el-input-number size="small" v-model="controller.whileController.timeout" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/> <el-input-number size="small" v-model="controller.whileController.timeout" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
<span class="ms-span ms-radio">秒</span> <span class="ms-span ms-radio">秒</span>
</div> </div>
</div>
</el-collapse-transition> </api-base-component>
</el-card>
</template> </template>
<script> <script>
import ApiBaseComponent from "./common/ApiBaseComponent";
export default { export default {
name: "MsLoopController", name: "MsLoopController",
components: {ApiBaseComponent},
props: { props: {
controller: {}, controller: {},
node: {}, node: {},
@ -159,27 +153,9 @@
</script> </script>
<style scoped> <style scoped>
.ms-api-col {
background-color: #F4F4F5;
border-color: #02A7F0;
margin-right: 10px;
color: #02A7F0;
}
.ms-title-buttion {
background-color: #F4F4F5;
margin-right: 20px;
color: #02A7F0;
}
.icon.is-active {
transform: rotate(90deg);
}
.ms-span { .ms-span {
margin: 10px; margin: 10px;
} }
.ms-radio { .ms-radio {
color: #606266; color: #606266;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;

117
frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue Normal file
View File

@ -0,0 +1,117 @@
<template>
<el-card>
<div class="header" @click="active(data)">
<div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
<div class="el-step__icon-inner">{{data.index}}</div>
</div>
<el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
<span @click.stop>
<slot name="headerLeft">
<i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"
@click="active(data)"/>
<el-input v-if="!data.name || isShowInput" size="small" v-model="data.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
<span v-else>
{{data.name}}
<i class="el-icon-edit" style="cursor:pointer" @click="isShowInput = true" v-tester/>
</span>
</slot>
</span>
<div class="header-right" @click.stop>
<el-switch v-model="data.enable" class="enable-switch"/>
<slot name="button"></slot>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow"/>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove"/>
</div>
</div>
<el-collapse-transition>
<div v-if="data.active && showCollapse">
<el-divider></el-divider>
<slot></slot>
</div>
</el-collapse-transition>
</el-card>
</template>
<script>
export default {
name: "ApiBaseComponent",
data() {
return {
isShowInput: false
}
},
props: {
data: {
type: Object,
default() {
return {}
},
},
color: {
type: String,
default() {
return "#B8741A"
}
},
backgroundColor: {
type: String,
default() {
return "#F9F1EA"
}
},
showCollapse: {
type: Boolean,
default() {
return true
}
},
title: String
},
methods: {
active() {
this.data.active = !this.data.active;
this.$emit('active');
},
copyRow() {
this.$emit('copy');
},
remove() {
this.$emit('remove');
}
}
}
</script>
<style scoped>
.icon.is-active {
transform: rotate(90deg);
}
.name-input {
width: 30%;
}
.el-icon-arrow-right {
margin-right: 5px;
}
.ms-left-buttion {
margin-right: 15px;
}
.header-right {
margin-right: 20px;
float: right;
}
.enable-switch {
margin-right: 10px;
}
</style>

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

@ -1,11 +1,13 @@
<template> <template>
<div :style="customizeStyle" v-loading="loading"> <api-base-component
<el-card> v-loading="loading"
<div> @copy="copyRow"
<div class="el-step__icon is-text" style="color: #A30014;background-color: #F7E6E9;margin-right: 10px" v-if="assertions.index"> @remove="remove"
<div class="el-step__icon-inner">{{assertions.index}}</div> @active="active"
</div> :data="assertions"
<el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9">{{$t('api_test.definition.request.assertions_rule')}}</el-button> color="#A30014"
background-color="#F7E6E9"
:title="$t('api_test.definition.request.assertions_rule')">
<el-input :draggable="draggable" size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/> <el-input :draggable="draggable" size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
<div style="margin-right: 20px; float: right"> <div style="margin-right: 20px; float: right">
@ -48,17 +50,45 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </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>
<api-json-path-suggest-button :open-tip="$t('api_test.request.assertions.json_path_suggest')" <api-json-path-suggest-button :open-tip="$t('api_test.request.assertions.json_path_suggest')"
:clear-tip="$t('api_test.request.assertions.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/> :clear-tip="$t('api_test.request.assertions.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
<ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/> <ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
</div>
</el-collapse-transition>
</el-card>
<ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/> <ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
</div>
</api-base-component>
</template> </template>
<script> <script>
@ -74,11 +104,13 @@
import {getUUID} from "@/common/js/utils"; import {getUUID} from "@/common/js/utils";
import ApiJsonPathSuggestButton from "./ApiJsonPathSuggestButton"; import ApiJsonPathSuggestButton from "./ApiJsonPathSuggestButton";
import MsApiJsonpathSuggest from "./ApiJsonpathSuggest"; import MsApiJsonpathSuggest from "./ApiJsonpathSuggest";
import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
export default { export default {
name: "MsApiAssertions", name: "MsApiAssertions",
components: { components: {
ApiBaseComponent,
MsApiJsonpathSuggest, MsApiJsonpathSuggest,
ApiJsonPathSuggestButton, ApiJsonPathSuggestButton,
MsApiAssertionXPath2, MsApiAssertionXPath2,
@ -142,8 +174,8 @@
this.loading = false this.loading = false
}) })
}, },
active(item) { active() {
item.active = !item.active; // item.active = !item.active;
this.reload(); this.reload();
}, },
remove() { remove() {

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

@ -1,21 +1,11 @@
<template> <template>
<div :style="customizeStyle" v-loading="loading"> <api-base-component
<el-card> @copy="copyRow"
<div class="el-step__icon is-text" style="color: #015478;background-color: #E6EEF2;margin-right: 10px" v-if="extract.index"> @remove="remove"
<div class="el-step__icon-inner">{{extract.index}}</div> :data="extract"
</div> color="#015478"
<el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2">{{$t('api_test.definition.request.extract_param')}}</el-button> background-color="#E6EEF2"
<el-input :draggable="draggable" size="small" v-model="extract.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/> :title="$t('api_test.definition.request.extract_param')">
<div style="margin-right: 20px; float: right">
<i class="icon el-icon-arrow-right" :class="{'is-active': extract.active}" @click="active(extract)" style="margin-left: 20px"/>
<el-switch v-model="extract.enable" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/>
</div>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="extract.active" :draggable="draggable">
<div style="margin: 20px"> <div style="margin: 20px">
<div class="extract-description"> <div class="extract-description">
{{$t('api_test.request.extract.description')}} {{$t('api_test.request.extract.description')}}
@ -43,13 +33,8 @@
<ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/> <ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
</div> </div>
</div>
</el-collapse-transition>
<ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/> <ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
</api-base-component>
</el-card>
</div>
</template> </template>
<script> <script>
@ -60,17 +45,16 @@
import ApiJsonPathSuggestButton from "../assertion/ApiJsonPathSuggestButton"; import ApiJsonPathSuggestButton from "../assertion/ApiJsonPathSuggestButton";
import MsApiJsonpathSuggest from "../assertion/ApiJsonpathSuggest"; import MsApiJsonpathSuggest from "../assertion/ApiJsonpathSuggest";
import {ExtractJSONPath} from "../../../test/model/ScenarioModel"; import {ExtractJSONPath} from "../../../test/model/ScenarioModel";
import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
export default { export default {
name: "MsApiExtract", name: "MsApiExtract",
components: { components: {
ApiBaseComponent,
MsApiJsonpathSuggest, MsApiJsonpathSuggest,
ApiJsonPathSuggestButton, ApiJsonPathSuggestButton,
MsApiExtractCommon, MsApiExtractCommon,
MsApiExtractEdit, MsApiExtractEdit,
}, },
props: { props: {
extract: {}, extract: {},
response: {}, response: {},
@ -82,13 +66,8 @@
isReadOnly: { isReadOnly: {
type: Boolean, type: Boolean,
default: false default: false
},
draggable: {
type: Boolean,
default: false,
} }
}, },
data() { data() {
return { return {
options: EXTRACT_TYPE, options: EXTRACT_TYPE,
@ -97,7 +76,6 @@
loading: false, loading: false,
} }
}, },
methods: { methods: {
after() { after() {
this.type = ""; this.type = "";
@ -161,22 +139,15 @@
font-size: 13px; font-size: 13px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.extract-item { .extract-item {
width: 100%; width: 100%;
} }
.extract-add { .extract-add {
padding: 10px; padding: 10px;
border: #DCDFE6 solid 1px; border: #DCDFE6 solid 1px;
margin: 5px 0; margin: 5px 0;
border-radius: 5px; border-radius: 5px;
} }
.icon.is-active {
transform: rotate(90deg);
}
/deep/ .el-card__body { /deep/ .el-card__body {
padding: 15px; padding: 15px;
} }

2
frontend/src/business/components/xpack

@ -1 +1 @@
Subproject commit 3d96d7c61bc50f32f18311d23f447663e02d7d44 Subproject commit 010ad7a5f072a5e9d368c756a2473bbd20781433