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

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

@ -1,80 +1,142 @@
<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-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-button v-if="request.referenced!=undefined && request.referenced==='OT_IMPORT'" class="ms-api-col-ot-import-button" size="small"> <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
{{$t('api_test.automation.external_import')}} <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
</el-button> <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
</template>
<el-button v-if="request.referenced==undefined || request.referenced==='Created' " class="ms-create-button" size="small"> <template v-slot:button>
{{$t('api_test.automation.customize_req')}} <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> </template>
<span v-if="request.referenced!=undefined && request.referenced==='Deleted' || request.referenced=='REF'">{{request.name}} </span> <div v-if="request.protocol === 'HTTP'">
<el-input size="small" v-model="request.name" style="width: 40%;" :placeholder="$t('commons.input_name')" v-else/> <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-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
<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-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
</div>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>
<ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>
<ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :showScript="false"/>
<ms-dubbo-basis-parameters :request="request" v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'" :showScript="false"/>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag> <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
<el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag> <ms-request-result-tail :currentProtocol="request.protocol" :response="request.requestResult" ref="runResult"/>
<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">
<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">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
<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-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-input>
</div>
<p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
<ms-api-request-form :referenced="true" :headers="request.headers " :request="request" v-if="request.protocol==='HTTP' || request.type==='HTTPSamplerProxy'"/>
<ms-tcp-basis-parameters :request="request" v-if="request.protocol==='TCP'|| request.type==='TCPSampler'"/>
<ms-sql-basis-parameters :request="request" v-if="request.protocol==='SQL'|| request.type==='JDBCSampler'" :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> <!-- 保存操作 -->
<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">
{{$t('commons.save')}}
</el-button>
<!-- 保存操作 -->
<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" <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,6 +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",
@ -95,9 +158,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 +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: { methods: {
remove() { remove() {
this.$emit('remove', this.request, this.node); this.$emit('remove', this.request, this.node);
@ -124,6 +250,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 +300,7 @@
} }
}, },
active(item) { active(item) {
item.active = !item.active; this.request.active = !this.request.active;
this.reload(); this.reload();
}, },
run() { run() {
@ -205,32 +337,6 @@
</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;
@ -242,16 +348,6 @@
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;
@ -260,4 +356,20 @@
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();

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

@ -1,10 +1,14 @@
<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')">
<template v-slot:headerLeft>
<el-input size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/> <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-select>
<el-input 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>

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

@ -1,61 +1,48 @@
<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"
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>
</div> </div>
<el-button class="ms-left-buttion" size="small" :style="styleType" style="color: #B8741A;background-color: #F9F1EA">{{title}}</el-button> </el-col>
<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-row>
<el-collapse-transition> <el-row>
<div v-if="jsr223ProcessorData.active"> <el-col :span="20" class="script-content">
<el-row style="margin:0px 10px 10px"> <ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage"
<el-col> :read-only="isReadOnly"
<div class="document-url"> :data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="[]"
<el-link href="https://jmeter.apache.org/usermanual/component_reference.html#BeanShell_PostProcessor" ref="codeEdit"/>
type="primary">{{$t('commons.reference_documentation')}} </el-col>
</el-link> <el-col :span="4" class="script-index">
<ms-instructions-icon :content="$t('api_test.request.processor.bean_shell_processor_tip')"/> <ms-dropdown :default-command="jsr223ProcessorData.scriptLanguage" :commands="languages" @command="languageChange"/>
</div> <div class="template-title">{{$t('api_test.request.processor.code_template')}}</div>
</el-col> <div v-for="(template, index) in codeTemplates" :key="index" class="code-template">
</el-row> <el-link :disabled="template.disabled" @click="addTemplate(template)">{{template.title}}</el-link>
<el-row> </div>
<el-col :span="20" class="script-content"> </el-col>
<ms-code-edit v-if="isCodeEditAlive" :mode="jsr223ProcessorData.scriptLanguage" </el-row>
:read-only="isReadOnly" </api-base-component>
:data.sync="jsr223ProcessorData.script" theme="eclipse" :modes="[]"
ref="codeEdit"/>
</el-col>
<el-col :span="4" class="script-index">
<ms-dropdown :default-command="jsr223ProcessorData.scriptLanguage" :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>
</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: {},
@ -192,12 +179,8 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.ms-api-header-select { /deep/ .el-divider {
margin-left: 20px; margin-bottom: 10px;
min-width: 300px;
} }
.icon.is-active {
transform: rotate(90deg);
}
</style> </style>

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

@ -1,84 +1,78 @@
<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.loopType==='LOOP_COUNT'">
<div v-if="controller.active" style="margin-top: 20px;"> <el-row>
<div v-if="controller.loopType==='LOOP_COUNT'"> <el-col :span="8">
<el-row> <span class="ms-span ms-radio">{{$t('loop.loops')}}</span>
<el-col :span="8"> <el-input-number size="small" v-model="controller.countController.loops" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
<span class="ms-span ms-radio">{{$t('loop.loops')}}</span> <span class="ms-span ms-radio">次</span>
<el-input-number size="small" v-model="controller.countController.loops" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/> </el-col>
<span class="ms-span ms-radio">次</span> <el-col :span="8">
</el-col> <span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
<el-col :span="8"> <el-input-number size="small" v-model="controller.countController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
<span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
<el-input-number size="small" v-model="controller.countController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
<span class="ms-span ms-radio">秒</span>
</el-col>
<el-col :span="8">
<span class="ms-span ms-radio">{{$t('loop.proceed')}}</span>
<el-switch v-model="controller.countController.proceed"/>
</el-col>
</el-row>
</div>
<div v-else-if="controller.loopType==='FOREACH'">
<el-row>
<el-col :span="8">
<el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.inputVal" size="small"/>
</el-col>
<el-col :span="1" style="margin-top: 6px">
<span style="margin:10px 10px 10px">in</span>
</el-col>
<el-col :span="8">
<el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.returnVal" size="small"/>
</el-col>
<el-col :span="7">
<span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
<el-input-number size="small" v-model="controller.forEachController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
<span class="ms-span ms-radio">秒</span>
</el-col>
</el-row>
</div>
<div v-else>
<el-input size="small" v-model="controller.whileController.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
<el-select v-model="controller.whileController.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.whileController.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
<span class="ms-span ms-radio">{{$t('loop.timeout')}}</span>
<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> </el-col>
</div> <el-col :span="8">
<span class="ms-span ms-radio">{{$t('loop.proceed')}}</span>
<el-switch v-model="controller.countController.proceed"/>
</el-col>
</el-row>
</div>
</el-collapse-transition> <div v-else-if="controller.loopType==='FOREACH'">
</el-card> <el-row>
<el-col :span="8">
<el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.inputVal" size="small"/>
</el-col>
<el-col :span="1" style="margin-top: 6px">
<span style="margin:10px 10px 10px">in</span>
</el-col>
<el-col :span="8">
<el-input :placeholder="$t('api_test.request.condition_variable')" v-model="controller.forEachController.returnVal" size="small"/>
</el-col>
<el-col :span="7">
<span class="ms-span ms-radio">{{$t('loop.interval')}}</span>
<el-input-number size="small" v-model="controller.forEachController.interval" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="0"/>
<span class="ms-span ms-radio">秒</span>
</el-col>
</el-row>
</div>
<div v-else>
<el-input size="small" v-model="controller.whileController.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
<el-select v-model="controller.whileController.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.whileController.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
<span class="ms-span ms-radio">{{$t('loop.timeout')}}</span>
<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>
</api-base-component>
</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,22 +153,6 @@
</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;

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>

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

@ -1,64 +1,53 @@
<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 size="small" v-model="assertions.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/> <div class="assertion-add">
<div style="margin-right: 20px; float: right"> <el-row :gutter="10">
<i class="icon el-icon-arrow-right" :class="{'is-active': assertions.active}" @click="active(assertions)" style="margin-left: 20px"/> <el-col :span="4">
<el-switch v-model="assertions.enable" style="margin-left: 10px"/> <el-select :disabled="isReadOnly" class="assertion-item" v-model="type"
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/> :placeholder="$t('api_test.request.assertions.select_type')"
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/> size="small">
</div> <el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/>
</div> <el-option :label="'JSONPath'" :value="options.JSON_PATH"/>
<!-- 请求参数--> <el-option :label="'XPath'" :value="options.XPATH2"/>
<el-collapse-transition> <el-option :label="$t('api_test.request.assertions.response_time')" :value="options.DURATION"/>
<div v-if="assertions.active"> <el-option :label="$t('api_test.request.assertions.jsr223')" :value="options.JSR223"/>
<div class="assertion-add"> </el-select>
<el-row :gutter="10"> </el-col>
<el-col :span="4"> <el-col :span="20">
<el-select :disabled="isReadOnly" class="assertion-item" v-model="type" <ms-api-assertion-regex :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.REGEX"
:placeholder="$t('api_test.request.assertions.select_type')" :callback="after"/>
size="small"> <ms-api-assertion-json-path :is-read-only="isReadOnly" :list="assertions.jsonPath"
<el-option :label="$t('api_test.request.assertions.regex')" :value="options.REGEX"/> v-if="type === options.JSON_PATH" :callback="after"/>
<el-option :label="'JSONPath'" :value="options.JSON_PATH"/> <ms-api-assertion-x-path2 :is-read-only="isReadOnly" :list="assertions.xpath2" v-if="type === options.XPATH2"
<el-option :label="'XPath'" :value="options.XPATH2"/> :callback="after"/>
<el-option :label="$t('api_test.request.assertions.response_time')" :value="options.DURATION"/> <ms-api-assertion-duration :is-read-only="isReadOnly" v-model="time" :duration="assertions.duration"
<el-option :label="$t('api_test.request.assertions.jsr223')" :value="options.JSR223"/> v-if="type === options.DURATION" :callback="after"/>
</el-select> <ms-api-assertion-jsr223 :is-read-only="isReadOnly" :list="assertions.jsr223" v-if="type === options.JSR223"
</el-col> :callback="after"/>
<el-col :span="20"> <el-button v-if="!type" :disabled="true" type="primary" size="small">
<ms-api-assertion-regex :is-read-only="isReadOnly" :list="assertions.regex" v-if="type === options.REGEX" {{ $t('api_test.request.assertions.add') }}
:callback="after"/> </el-button>
<ms-api-assertion-json-path :is-read-only="isReadOnly" :list="assertions.jsonPath" </el-col>
v-if="type === options.JSON_PATH" :callback="after"/> </el-row>
<ms-api-assertion-x-path2 :is-read-only="isReadOnly" :list="assertions.xpath2" v-if="type === options.XPATH2" </div>
: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"/>
</div> <ms-api-assertions-edit :is-read-only="isReadOnly" :assertions="assertions" :reloadData="reloadData" style="margin-bottom: 20px"/>
</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 +63,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,
@ -139,8 +130,8 @@
this.loading = false this.loading = false
}) })
}, },
active(item) { active() {
item.active = !item.active; // item.active = !item.active;
this.reload(); this.reload();
}, },
remove() { remove() {

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

@ -1,55 +1,40 @@
<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"
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')}}
</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> <div class="extract-add">
<el-input size="small" v-model="extract.name" style="width: 40%;margin-left: 20px" :placeholder="$t('commons.input_name')"/> <el-row :gutter="10">
<div style="margin-right: 20px; float: right"> <el-col :span="2">
<i class="icon el-icon-arrow-right" :class="{'is-active': extract.active}" @click="active(extract)" style="margin-left: 20px"/> <el-select :disabled="isReadOnly" class="extract-item" v-model="type" :placeholder="$t('api_test.request.extract.select_type')"
<el-switch v-model="extract.enable" style="margin-left: 10px"/> size="small">
<el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="margin-left: 10px"/> <el-option :label="$t('api_test.request.extract.regex')" :value="options.REGEX"/>
<el-button size="mini" icon="el-icon-delete" type="danger" circle @click="remove" style="margin-left: 10px"/> <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>
</div> </div>
<!-- 请求参数--> <api-json-path-suggest-button :open-tip="$t('api_test.request.extract.json_path_suggest')"
<el-collapse-transition> :clear-tip="$t('api_test.request.extract.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
<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> <ms-api-extract-edit :is-read-only="isReadOnly" :reloadData="reloadData" :extract="extract"/>
</el-row> </div>
</div> <ms-api-jsonpath-suggest :tip="$t('api_test.request.extract.suggest_tip')" @addSuggest="addJsonPathSuggest" ref="jsonpathSuggest"/>
</api-base-component>
<api-json-path-suggest-button :open-tip="$t('api_test.request.extract.json_path_suggest')"
:clear-tip="$t('api_test.request.extract.json_path_clear')" @open="suggestJsonOpen" @clear="clearJson"/>
<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>
</template> </template>
<script> <script>
@ -60,11 +45,13 @@
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,
@ -169,10 +156,6 @@
border-radius: 5px; border-radius: 5px;
} }
.icon.is-active {
transform: rotate(90deg);
}
/deep/ .el-card__body { /deep/ .el-card__body {
padding: 15px; padding: 15px;
} }