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

refactor: 重构接口自动化组件

This commit is contained in:
chenjianxing 2021-01-12 16:28:34 +08:00
parent 5781cc7b1e
commit 283912edc1
9 changed files with 551 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,48 +1,34 @@
<template>
<div v-loading="loading">
<el-card>
<el-row>
<div class="el-step__icon is-text ms-api-col" v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'">
<div class="el-step__icon-inner">{{request.index}}</div>
</div>
<div class="el-step__icon is-text ms-api-col-ot-import" v-else-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'">
<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>
<api-base-component
v-loading="loading"
@copy="copyRow"
@remove="remove"
:data="request"
:color="displayColor.color"
:background-color="displayColor.backgroundColor"
:title="displayTitle">
<el-button v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF' || request.referenced==='Copy'" class="ms-left-button" size="small">
{{$t('api_test.automation.api_list_import')}}
</el-button>
<el-button v-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'" class="ms-api-col-ot-import-button" size="small">
{{$t('api_test.automation.external_import')}}
</el-button>
<el-button v-if="request.referenced==undefined || request.referenced==='Created' " class="ms-create-button" size="small">
{{$t('api_test.automation.customize_req')}}
</el-button>
<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/>
<template v-slot:headerLeft>
<slot name="headerLeft">
<i class="icon el-icon-arrow-right" :class="{'is-active': request.active}"
@click="active(request)"/>
<el-input v-if="isShowInput || !request.name" size="small" v-model="request.name" class="name-input"
@blur="isShowInput = false" :placeholder="$t('commons.input_name')"/>
<span v-else>
{{request.name}}
<i :class="{'edit-disable' : isDeletedOrRef}" class="el-icon-edit" style="cursor:pointer" @click="editName" v-tester/>
</span>
</slot>
<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>
<!-- 请求参数-->
<el-collapse-transition>
<div v-if="request.active">
</template>
<template v-slot:button>
<el-button @click="run" :tip="$t('api_test.run')" icon="el-icon-video-play" style="background-color: #409EFF;color: white;" size="mini" circle/>
</template>
<div v-if="request.protocol === 'HTTP'">
<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">
@ -68,13 +54,89 @@
<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)" v-if="!request.referenced">
{{$t('commons.save')}}
</el-button>
</div>
</el-collapse-transition>
</el-card>
<!-- 执行组件 -->
<ms-run :debug="false" :reportId="reportId" :run-data="runData"
@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>
<script>
@ -86,6 +148,7 @@
import MsRequestResultTail from "../../definition/components/response/RequestResultTail";
import MsRun from "../../definition/components/Run";
import {getUUID} from "@/common/js/utils";
import ApiBaseComponent from "./common/ApiBaseComponent";
export default {
name: "MsApiComponent",
@ -95,9 +158,17 @@
node: {},
currentEnvironmentId: String,
},
components: {MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun},
components: {
ApiBaseComponent,
MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm, MsRequestResultTail, MsRun},
data() {
return {loading: false, reqOptions: REQ_METHOD, reportId: "", runData: []}
return {
loading: false,
reqOptions: REQ_METHOD,
reportId: "",
runData: [],
isShowInput: false
}
},
created() {
if (!this.request.requestResult) {
@ -117,6 +188,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: {
remove() {
this.$emit('remove', this.request, this.node);
@ -124,6 +250,12 @@
copyRow() {
this.$emit('copyRow', this.request, this.node);
},
editName() {
if (this.isDeletedOrRef) {
return;
}
this.isShowInput = true;
},
getApiInfo() {
if (this.request.id && this.request.referenced === 'REF') {
let requestResult = this.request.requestResult;
@ -168,7 +300,7 @@
}
},
active(item) {
item.active = !item.active;
this.request.active = !this.request.active;
this.reload();
},
run() {
@ -205,32 +337,6 @@
</script>
<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 {
background-color: #EEF5FE;
@ -242,16 +348,6 @@
padding: 15px;
}
.icon.is-active {
transform: rotate(90deg);
}
.ms-create-button {
color: #008080;
background-color: #EBF2F2;
margin-right: 20px;
}
.tip {
padding: 3px 5px;
font-size: 16px;
@ -260,4 +356,20 @@
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>

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

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

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

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

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

@ -1,10 +1,14 @@
<template>
<el-card>
<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.if_controller')}}</el-button>
<api-base-component
@copy="copyRow"
@remove="remove"
:data="controller"
:show-collapse="false"
color="#E6A23C"
background-color="#FCF6EE"
:title="$t('api_test.automation.if_controller')">
<template v-slot:headerLeft>
<el-input size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
@ -14,18 +18,16 @@
</el-select>
<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">
<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-card>
</template>
</api-base-component>
</template>
<script>
import ApiBaseComponent from "./common/ApiBaseComponent";
export default {
name: "MsIfController",
components: {ApiBaseComponent},
props: {
controller: {},
node: {},
@ -91,16 +93,4 @@
</script>
<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>

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

@ -1,29 +1,17 @@
<template>
<el-card>
<el-row>
<div>
<div class="el-step__icon is-text" :style="styleType" style="margin-right: 10px">
<div class="el-step__icon-inner">{{jsr223ProcessorData.index}}</div>
</div>
<el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button>
<el-input 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">
<api-base-component
@copy="copyRow"
@remove="remove"
:data="jsr223ProcessorData"
color="#B8741A"
background-color="#F9F1EA"
:title="title">
<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>
@ -42,20 +30,19 @@
</div>
</el-col>
</el-row>
</div>
</el-collapse-transition>
</el-card>
</api-base-component>
</template>
<script>
import MsCodeEdit from "../../../common/components/MsCodeEdit";
import MsInstructionsIcon from "../../../common/components/MsInstructionsIcon";
import MsDropdown from "../../../common/components/MsDropdown";
import ApiBaseComponent from "./common/ApiBaseComponent";
export default {
name: "MsJsr233Processor",
components: {MsDropdown, MsInstructionsIcon, MsCodeEdit},
components: {ApiBaseComponent, MsDropdown, MsInstructionsIcon, MsCodeEdit},
data() {
return {
jsr223ProcessorData: {},
@ -192,12 +179,8 @@
margin-bottom: 20px;
}
.ms-api-header-select {
margin-left: 20px;
min-width: 300px;
/deep/ .el-divider {
margin-bottom: 10px;
}
.icon.is-active {
transform: rotate(90deg);
}
</style>

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

@ -1,26 +1,20 @@
<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="FOREACH">{{$t('loop.foreach')}}</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;">
<div v-if="controller.loopType==='LOOP_COUNT'">
<el-row>
<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"/>
<span class="ms-span ms-radio">秒</span>
</div>
</div>
</el-collapse-transition>
</el-card>
</api-base-component>
</template>
<script>
import ApiBaseComponent from "./common/ApiBaseComponent";
export default {
name: "MsLoopController",
components: {ApiBaseComponent},
props: {
controller: {},
node: {},
@ -159,22 +153,6 @@
</script>
<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 {
margin: 10px;

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>

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

@ -1,23 +1,14 @@
<template>
<div :style="customizeStyle" v-loading="loading">
<el-card>
<div>
<div class="el-step__icon is-text" style="color: #A30014;background-color: #F7E6E9;margin-right: 10px" v-if="assertions.index">
<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>
<api-base-component
v-loading="loading"
@copy="copyRow"
@remove="remove"
@active="active"
:data="assertions"
color="#A30014"
background-color="#F7E6E9"
:title="$t('api_test.definition.request.assertions_rule')">
<el-input size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
<div style="margin-right: 20px; float: right">
<i class="icon el-icon-arrow-right" :class="{'is-active': assertions.active}" @click="active(assertions)" style="margin-left: 20px"/>
<el-switch v-model="assertions.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-collapse-transition>
<div v-if="assertions.active">
<div class="assertion-add">
<el-row :gutter="10">
<el-col :span="4">
@ -51,14 +42,12 @@
<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"/>
<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"/>
</div>
</api-base-component>
</template>
<script>
@ -74,11 +63,13 @@
import {getUUID} from "@/common/js/utils";
import ApiJsonPathSuggestButton from "./ApiJsonPathSuggestButton";
import MsApiJsonpathSuggest from "./ApiJsonpathSuggest";
import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
export default {
name: "MsApiAssertions",
components: {
ApiBaseComponent,
MsApiJsonpathSuggest,
ApiJsonPathSuggestButton,
MsApiAssertionXPath2,
@ -139,8 +130,8 @@
this.loading = false
})
},
active(item) {
item.active = !item.active;
active() {
// item.active = !item.active;
this.reload();
},
remove() {

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

@ -1,21 +1,11 @@
<template>
<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-input size="small" v-model="extract.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/>
<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">
<api-base-component
@copy="copyRow"
@remove="remove"
:data="extract"
color="#015478"
background-color="#E6EEF2"
:title="$t('api_test.definition.request.extract_param')">
<div style="margin: 20px">
<div class="extract-description">
{{$t('api_test.request.extract.description')}}
@ -43,13 +33,8 @@
<ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
</div>
</div>
</el-collapse-transition>
<ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
</el-card>
</div>
</api-base-component>
</template>
<script>
@ -60,11 +45,13 @@
import ApiJsonPathSuggestButton from "../assertion/ApiJsonPathSuggestButton";
import MsApiJsonpathSuggest from "../assertion/ApiJsonpathSuggest";
import {ExtractJSONPath} from "../../../test/model/ScenarioModel";
import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
export default {
name: "MsApiExtract",
components: {
ApiBaseComponent,
MsApiJsonpathSuggest,
ApiJsonPathSuggestButton,
MsApiExtractCommon,
@ -169,10 +156,6 @@
border-radius: 5px;
}
.icon.is-active {
transform: rotate(90deg);
}
/deep/ .el-card__body {
padding: 15px;
}