fix(接口测试): 修复跨项目引用场景展示不明确问题
--bug=1019804 --user=赵勇 【接口测试】接口自动化-场景中跨项目引用其他场景-项目名称显示不清晰 https://www.tapd.cn/55049933/s/1298191
This commit is contained in:
parent
bed338813b
commit
c499d309a5
|
@ -1,79 +1,141 @@
|
||||||
<template>
|
<template>
|
||||||
<el-card :style="{'border-color':colorStyle}" class="ms-base-card">
|
<el-card :style="{ 'border-color': colorStyle }" class="ms-base-card">
|
||||||
<div class="ms-base-header" @click="active(data)">
|
<div class="ms-base-header" @click="active(data)">
|
||||||
<slot name="beforeHeaderLeft">
|
<slot name="beforeHeaderLeft">
|
||||||
<div v-if="data.index" class="el-step__icon is-text"
|
<div
|
||||||
:style="{'color': color, 'background-color': backgroundColor}">
|
v-if="data.index"
|
||||||
<div class="el-step__icon-inner" :key="forceRerenderIndex">{{ data.index }}</div>
|
class="el-step__icon is-text"
|
||||||
|
:style="{ color: color, 'background-color': backgroundColor }"
|
||||||
|
>
|
||||||
|
<div class="el-step__icon-inner" :key="forceRerenderIndex">
|
||||||
|
{{ data.index }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-tag class="ms-left-btn" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{
|
<el-tag
|
||||||
title
|
class="ms-left-btn"
|
||||||
}}
|
size="small"
|
||||||
|
:style="{ color: color, 'background-color': backgroundColor }"
|
||||||
|
>{{ title }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<slot name="behindHeaderLeft" v-if="!isMax"></slot>
|
<slot name="behindHeaderLeft" v-if="!isMax"></slot>
|
||||||
</slot>
|
</slot>
|
||||||
|
|
||||||
<span v-show="!isMax">
|
<span v-show="!isMax">
|
||||||
<slot name="headerLeft">
|
<slot name="headerLeft">
|
||||||
<i class="icon el-icon-arrow-right" :class="{'is-active': data.active}" @click="active(data)"
|
<i
|
||||||
v-if="data.type!='scenario' && !isMax " @click.stop/>
|
class="icon el-icon-arrow-right"
|
||||||
|
:class="{ 'is-active': data.active }"
|
||||||
|
@click="active(data)"
|
||||||
|
v-if="data.type != 'scenario' && !isMax"
|
||||||
|
@click.stop
|
||||||
|
/>
|
||||||
<span @click.stop v-if="isShowInput && isShowNameInput">
|
<span @click.stop v-if="isShowInput && isShowNameInput">
|
||||||
<el-input :draggable="draggable" size="mini" v-model="data.name" class="name-input" @focus="active(data)"
|
<el-input
|
||||||
@blur="isShowInput = false" :placeholder="$t('commons.input_name')" ref="nameEdit"
|
:draggable="draggable"
|
||||||
:disabled="data.disabled"/>
|
size="mini"
|
||||||
|
v-model="data.name"
|
||||||
|
class="name-input"
|
||||||
|
@focus="active(data)"
|
||||||
|
@blur="isShowInput = false"
|
||||||
|
:placeholder="$t('commons.input_name')"
|
||||||
|
ref="nameEdit"
|
||||||
|
:disabled="data.disabled"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span :class="showVersion?'scenario-unscroll':'scenario-version'" id="moveout" @mouseenter="enter($event)"
|
<span
|
||||||
@mouseleave="leave($event)" v-else>
|
:class="showVersion ? 'scenario-unscroll' : 'scenario-version'"
|
||||||
<i class="el-icon-edit" style="cursor:pointer;" @click="editName"
|
id="moveout"
|
||||||
v-show="data.referenced!='REF' && !data.disabled"/>
|
@mouseenter="enter($event)"
|
||||||
<span>{{ data.name }}</span>
|
@mouseleave="leave($event)"
|
||||||
<el-tag size="mini" v-if="data.method && !data.pluginId" style="margin-left: 1rem">{{
|
v-else
|
||||||
getMethod()
|
>
|
||||||
}}</el-tag>
|
<i
|
||||||
<slot name="afterTitle"/>
|
class="el-icon-edit"
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click="editName"
|
||||||
|
v-show="data.referenced != 'REF' && !data.disabled"
|
||||||
|
/>
|
||||||
|
<span>{{ data.name }}</span>
|
||||||
|
<el-tag
|
||||||
|
size="mini"
|
||||||
|
v-if="data.method && !data.pluginId"
|
||||||
|
style="margin-left: 1rem"
|
||||||
|
>{{ getMethod() }}</el-tag
|
||||||
|
>
|
||||||
|
<slot name="afterTitle" />
|
||||||
</span>
|
</span>
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
<span v-show="isMax">
|
<span v-show="isMax">
|
||||||
<slot name="headerLeft">
|
<slot name="headerLeft">
|
||||||
<span class="ms-step-name-width">{{ data.name }}</span>
|
<span class="ms-step-name-width">{{ data.name }}</span>
|
||||||
</slot>
|
</slot>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div v-if="!ifFromVariableAdvance" class="header-right" @click.stop
|
<div
|
||||||
v-permission="['PROJECT_API_SCENARIO:READ+EDIT', 'PROJECT_API_SCENARIO:READ+CREATE', 'PROJECT_API_SCENARIO:READ+COPY']">
|
v-if="!ifFromVariableAdvance"
|
||||||
|
class="header-right"
|
||||||
|
@click.stop
|
||||||
|
v-permission="[
|
||||||
|
'PROJECT_API_SCENARIO:READ+EDIT',
|
||||||
|
'PROJECT_API_SCENARIO:READ+CREATE',
|
||||||
|
'PROJECT_API_SCENARIO:READ+COPY',
|
||||||
|
]"
|
||||||
|
>
|
||||||
<slot name="message" v-show="!isMax"></slot>
|
<slot name="message" v-show="!isMax"></slot>
|
||||||
<slot name="debugStepCode"></slot>
|
<slot name="debugStepCode"></slot>
|
||||||
|
|
||||||
<slot name="button" v-if="showVersion"></slot>
|
<slot name="button" v-if="showVersion"></slot>
|
||||||
|
|
||||||
<el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
|
<el-tooltip
|
||||||
<el-switch v-model="data.enable" class="enable-switch" size="mini"
|
:content="$t('test_resource_pool.enable_disable')"
|
||||||
:disabled="data.refEnable || !showVersion || isDeleted"/>
|
placement="top"
|
||||||
|
v-if="showBtn"
|
||||||
|
>
|
||||||
|
<el-switch
|
||||||
|
v-model="data.enable"
|
||||||
|
class="enable-switch"
|
||||||
|
size="mini"
|
||||||
|
:disabled="data.refEnable || !showVersion || isDeleted"
|
||||||
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
|
|
||||||
<el-button v-if="showVersion && showCopy" size="mini" icon="el-icon-copy-document" circle @click="copyRow"
|
<el-button
|
||||||
style="padding: 5px"
|
v-if="showVersion && showCopy"
|
||||||
:disabled="(data.disabled && !data.root) || !showVersion || isDeleted"/>
|
size="mini"
|
||||||
|
icon="el-icon-copy-document"
|
||||||
|
circle
|
||||||
|
@click="copyRow"
|
||||||
|
style="padding: 5px"
|
||||||
|
:disabled="(data.disabled && !data.root) || !showVersion || isDeleted"
|
||||||
|
/>
|
||||||
|
|
||||||
<el-button v-show="isSingleButton" size="mini" icon="el-icon-delete" type="danger" style="padding: 5px" circle
|
<el-button
|
||||||
@click="remove"
|
v-show="isSingleButton"
|
||||||
:disabled="(data.disabled && !data.root) || !showVersion || isDeleted"/>
|
size="mini"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
type="danger"
|
||||||
|
style="padding: 5px"
|
||||||
|
circle
|
||||||
|
@click="remove"
|
||||||
|
:disabled="(data.disabled && !data.root) || !showVersion || isDeleted"
|
||||||
|
/>
|
||||||
|
|
||||||
<step-extend-btns style="display: contents"
|
<step-extend-btns
|
||||||
:data="data"
|
style="display: contents"
|
||||||
:environmentType="environmentType"
|
:data="data"
|
||||||
:environmentGroupId="environmentGroupId"
|
:environmentType="environmentType"
|
||||||
:envMap="envMap"
|
:environmentGroupId="environmentGroupId"
|
||||||
:is-scenario="true"
|
:envMap="envMap"
|
||||||
@enable="enable"
|
:is-scenario="true"
|
||||||
@copy="copyRow"
|
@enable="enable"
|
||||||
@remove="remove"
|
@copy="copyRow"
|
||||||
@openScenario="openScenario"
|
@remove="remove"
|
||||||
v-show="isMoreButton"/>
|
@openScenario="openScenario"
|
||||||
|
v-show="isMoreButton"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!--最大化不显示具体内容-->
|
<!--最大化不显示具体内容-->
|
||||||
<div v-if="!isMax">
|
<div v-if="!isMax">
|
||||||
|
@ -92,26 +154,25 @@
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-transition>
|
</el-collapse-transition>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import StepExtendBtns from "../component/StepExtendBtns";
|
import StepExtendBtns from "../component/StepExtendBtns";
|
||||||
import {STEP} from "../Setting";
|
import { STEP } from "../Setting";
|
||||||
import {useApiStore} from "@/store";
|
import { useApiStore } from "@/store";
|
||||||
|
|
||||||
let store = useApiStore();
|
let store = useApiStore();
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ApiBaseComponent",
|
name: "ApiBaseComponent",
|
||||||
components: {StepExtendBtns},
|
components: { StepExtendBtns },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isShowInput: false,
|
isShowInput: false,
|
||||||
colorStyle: "",
|
colorStyle: "",
|
||||||
stepFilter: new STEP,
|
stepFilter: new STEP(),
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
draggable: Boolean,
|
draggable: Boolean,
|
||||||
|
@ -134,32 +195,32 @@ export default {
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
return {}
|
return {};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
color: {
|
color: {
|
||||||
type: String,
|
type: String,
|
||||||
default() {
|
default() {
|
||||||
return "#B8741A"
|
return "#B8741A";
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
backgroundColor: {
|
backgroundColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default() {
|
default() {
|
||||||
return "#F9F1EA"
|
return "#F9F1EA";
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
showCollapse: {
|
showCollapse: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default() {
|
default() {
|
||||||
return true
|
return true;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
isShowNameInput: {
|
isShowNameInput: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default() {
|
default() {
|
||||||
return true
|
return true;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
title: String,
|
title: String,
|
||||||
ifFromVariableAdvance: {
|
ifFromVariableAdvance: {
|
||||||
|
@ -171,20 +232,23 @@ export default {
|
||||||
envMap: Map,
|
envMap: Map,
|
||||||
showEnable: {
|
showEnable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true,
|
||||||
},
|
},
|
||||||
showCopy: {
|
showCopy: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true,
|
||||||
},
|
},
|
||||||
isDeleted: {
|
isDeleted: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'selectStep'() {
|
selectStep() {
|
||||||
if (store.selectStep && store.selectStep.resourceId === this.data.resourceId) {
|
if (
|
||||||
|
store.selectStep &&
|
||||||
|
store.selectStep.resourceId === this.data.resourceId
|
||||||
|
) {
|
||||||
this.colorStyle = this.color;
|
this.colorStyle = this.color;
|
||||||
} else {
|
} else {
|
||||||
this.colorStyle = "";
|
this.colorStyle = "";
|
||||||
|
@ -200,7 +264,10 @@ export default {
|
||||||
this.$refs.nameEdit.focus();
|
this.$refs.nameEdit.focus();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (this.data && this.stepFilter.get("AllSamplerProxy").indexOf(this.data.type) != -1) {
|
if (
|
||||||
|
this.data &&
|
||||||
|
this.stepFilter.get("AllSamplerProxy").indexOf(this.data.type) != -1
|
||||||
|
) {
|
||||||
if (!this.data.method) {
|
if (!this.data.method) {
|
||||||
this.data.method = this.data.protocol;
|
this.data.method = this.data.protocol;
|
||||||
}
|
}
|
||||||
|
@ -214,21 +281,45 @@ export default {
|
||||||
return store.forceRerenderIndex;
|
return store.forceRerenderIndex;
|
||||||
},
|
},
|
||||||
isSingleButton() {
|
isSingleButton() {
|
||||||
if (this.data.type === 'ConstantTimer' || this.data.type === 'Assertions') {
|
if (
|
||||||
return (this.innerStep && this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) !== -1)
|
this.data.type === "ConstantTimer" ||
|
||||||
|
this.data.type === "Assertions"
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
this.innerStep &&
|
||||||
|
this.showVersion &&
|
||||||
|
this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) !== -1
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return (this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) !== -1);
|
return (
|
||||||
|
this.showVersion &&
|
||||||
|
this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) !== -1
|
||||||
|
);
|
||||||
},
|
},
|
||||||
isMoreButton() {
|
isMoreButton() {
|
||||||
if (this.data.type === 'ConstantTimer' || this.data.type === 'Assertions') {
|
if (
|
||||||
return (!this.innerStep || this.showBtn && (!this.data.disabled || this.data.root) && this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) === -1);
|
this.data.type === "ConstantTimer" ||
|
||||||
|
this.data.type === "Assertions"
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
!this.innerStep ||
|
||||||
|
(this.showBtn &&
|
||||||
|
(!this.data.disabled || this.data.root) &&
|
||||||
|
this.showVersion &&
|
||||||
|
this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) === -1)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return (this.showBtn && (!this.data.disabled || this.data.root || this.isDeleted) && this.showVersion && this.stepFilter.get('ALlSamplerStep').indexOf(this.data.type) === -1);
|
return (
|
||||||
|
this.showBtn &&
|
||||||
|
(!this.data.disabled || this.data.root || this.isDeleted) &&
|
||||||
|
this.showVersion &&
|
||||||
|
this.stepFilter.get("ALlSamplerStep").indexOf(this.data.type) === -1
|
||||||
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
active() {
|
active() {
|
||||||
this.$emit('active');
|
this.$emit("active");
|
||||||
},
|
},
|
||||||
getMethod() {
|
getMethod() {
|
||||||
if (this.data.protocol === "HTTP") {
|
if (this.data.protocol === "HTTP") {
|
||||||
|
@ -240,13 +331,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
copyRow() {
|
copyRow() {
|
||||||
this.$emit('copy');
|
this.$emit("copy");
|
||||||
},
|
},
|
||||||
remove() {
|
remove() {
|
||||||
this.$emit('remove');
|
this.$emit("remove");
|
||||||
},
|
},
|
||||||
openScenario(data) {
|
openScenario(data) {
|
||||||
this.$emit('openScenario', data);
|
this.$emit("openScenario", data);
|
||||||
},
|
},
|
||||||
editName() {
|
editName() {
|
||||||
this.isShowInput = true;
|
this.isShowInput = true;
|
||||||
|
@ -256,28 +347,26 @@ export default {
|
||||||
},
|
},
|
||||||
enter($event) {
|
enter($event) {
|
||||||
if (this.showVersion) {
|
if (this.showVersion) {
|
||||||
$event.currentTarget.className = "scenario-name"
|
$event.currentTarget.className = "scenario-name";
|
||||||
} else {
|
} else {
|
||||||
$event.currentTarget.className = "scenario-version"
|
$event.currentTarget.className = "scenario-version";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
leave($event) {
|
leave($event) {
|
||||||
if (this.showVersion) {
|
if (this.showVersion) {
|
||||||
$event.currentTarget.className = "scenario-unscroll"
|
$event.currentTarget.className = "scenario-unscroll";
|
||||||
} else {
|
} else {
|
||||||
$event.currentTarget.className = "scenario-version"
|
$event.currentTarget.className = "scenario-version";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
enable() {
|
enable() {
|
||||||
this.data.enable = !this.data.enable;
|
this.data.enable = !this.data.enable;
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.icon.is-active {
|
.icon.is-active {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
:is-disabled="true"
|
:is-disabled="true"
|
||||||
:is-max="isMax"
|
:is-max="isMax"
|
||||||
:show-btn="showBtn"
|
:show-btn="showBtn"
|
||||||
:is-deleted="scenario.referenced==='REF' && ! isShowNum"
|
:is-deleted="scenario.referenced === 'REF' && !isShowNum"
|
||||||
:show-version="showVersion"
|
:show-version="showVersion"
|
||||||
color="#606266"
|
color="#606266"
|
||||||
background-color="#F4F4F5"
|
background-color="#F4F4F5"
|
||||||
|
@ -19,59 +19,111 @@
|
||||||
:environmentType="environmentType"
|
:environmentType="environmentType"
|
||||||
:environmentGroupId="environmentGroupId"
|
:environmentGroupId="environmentGroupId"
|
||||||
:envMap="envMap"
|
:envMap="envMap"
|
||||||
:title="$t('commons.scenario')">
|
:title="$t('commons.scenario')"
|
||||||
|
>
|
||||||
<template v-slot:afterTitle>
|
<template v-slot:afterTitle>
|
||||||
<span v-if="isShowNum" @click="clickResource(scenario)">{{ "( ID: " + scenario.num + ")" }}</span>
|
<span v-if="isShowNum" @click="clickResource(scenario)">{{
|
||||||
|
"( ID: " + scenario.num + ")"
|
||||||
|
}}</span>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<el-tooltip class="ms-num" effect="dark" :content="$t('api_test.automation.scenario.num_none')" placement="top">
|
<el-tooltip
|
||||||
<i class="el-icon-warning"/>
|
class="ms-num"
|
||||||
|
effect="dark"
|
||||||
|
:content="$t('api_test.automation.scenario.num_none')"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<i class="el-icon-warning" />
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
<span v-xpack v-if="scenario.versionEnable">{{ $t('project.version.name') }}: {{ scenario.versionName }}</span>
|
<span v-xpack v-if="scenario.versionEnable"
|
||||||
|
>{{ $t("project.version.name") }}: {{ scenario.versionName }}</span
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-slot:behindHeaderLeft>
|
<template v-slot:behindHeaderLeft>
|
||||||
<el-tag size="small" class="ms-tag" v-if="scenario.referenced==='Deleted'" type="danger">
|
<el-tag
|
||||||
{{ $t('api_test.automation.reference_deleted') }}
|
size="small"
|
||||||
|
class="ms-tag"
|
||||||
|
v-if="scenario.referenced === 'Deleted'"
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
|
{{ $t("api_test.automation.reference_deleted") }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-tag size="small" class="ms-tag" v-if="scenario.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
|
<el-tag
|
||||||
<el-tag size="small" class="ms-tag" v-if="scenario.referenced==='REF'">{{
|
size="small"
|
||||||
$t('api_test.scenario.reference')
|
class="ms-tag"
|
||||||
}}
|
v-if="scenario.referenced === 'Copy'"
|
||||||
|
>{{ $t("commons.copy") }}</el-tag
|
||||||
|
>
|
||||||
|
<el-tag size="small" class="ms-tag" v-if="scenario.referenced === 'REF'"
|
||||||
|
>{{ $t("api_test.scenario.reference") }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<span class="ms-tag ms-step-name-api">{{ getProjectName(scenario.projectId) }}</span>
|
<span class="ms-tag ms-step-name-api">{{
|
||||||
<el-tooltip v-if="(!scenario.hashTree || scenario.hashTree.length === 0) && scenario.referenced==='REF'"
|
getProjectName(scenario.projectId)
|
||||||
class="ms-num" effect="dark" :content="$t('api_test.scenario.base_scenario_step_is_empty')"
|
}}</span>
|
||||||
placement="top" style="margin-left: 5px">
|
<el-tooltip
|
||||||
<i class="el-icon-warning"/>
|
v-if="
|
||||||
|
(!scenario.hashTree || scenario.hashTree.length === 0) &&
|
||||||
|
scenario.referenced === 'REF'
|
||||||
|
"
|
||||||
|
class="ms-num"
|
||||||
|
effect="dark"
|
||||||
|
:content="$t('api_test.scenario.base_scenario_step_is_empty')"
|
||||||
|
placement="top"
|
||||||
|
style="margin-left: 5px"
|
||||||
|
>
|
||||||
|
<i class="el-icon-warning" />
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:debugStepCode>
|
<template v-slot:debugStepCode>
|
||||||
<span v-if="node.data.testing" class="ms-test-running">
|
<span v-if="node.data.testing" class="ms-test-running">
|
||||||
<i class="el-icon-loading" style="font-size: 16px"/>
|
<i class="el-icon-loading" style="font-size: 16px" />
|
||||||
{{ $t('commons.testing') }}
|
{{ $t("commons.testing") }}
|
||||||
</span>
|
</span>
|
||||||
<span class="ms-step-debug-code" :class="node.data.code ==='ERROR'?'ms-req-error':'ms-req-success'"
|
<span
|
||||||
v-if="!loading && node.data.debug && !node.data.testing">
|
class="ms-step-debug-code"
|
||||||
|
:class="node.data.code === 'ERROR' ? 'ms-req-error' : 'ms-req-success'"
|
||||||
|
v-if="!loading && node.data.debug && !node.data.testing"
|
||||||
|
>
|
||||||
{{ getCode() }}
|
{{ getCode() }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:button v-if="!ifFromVariableAdvance">
|
<template v-slot:button v-if="!ifFromVariableAdvance">
|
||||||
<el-tooltip :content="$t('api_test.run')" placement="top" v-if="!scenario.run">
|
<el-tooltip
|
||||||
<el-button :disabled="!scenario.enable" @click="run" icon="el-icon-video-play" style="padding: 5px"
|
:content="$t('api_test.run')"
|
||||||
class="ms-btn" size="mini" circle/>
|
placement="top"
|
||||||
|
v-if="!scenario.run"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
:disabled="!scenario.enable"
|
||||||
|
@click="run"
|
||||||
|
icon="el-icon-video-play"
|
||||||
|
style="padding: 5px"
|
||||||
|
class="ms-btn"
|
||||||
|
size="mini"
|
||||||
|
circle
|
||||||
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
|
<el-tooltip
|
||||||
<el-button :disabled="!scenario.enable" @click.once="stop" size="mini"
|
:content="$t('report.stop_btn')"
|
||||||
style="color:white;padding: 0 0.1px;width: 24px;height: 24px;" class="stop-btn" circle>
|
placement="top"
|
||||||
|
:enterable="false"
|
||||||
|
v-else
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
:disabled="!scenario.enable"
|
||||||
|
@click.once="stop"
|
||||||
|
size="mini"
|
||||||
|
style="color: white; padding: 0 0.1px; width: 24px; height: 24px"
|
||||||
|
class="stop-btn"
|
||||||
|
circle
|
||||||
|
>
|
||||||
<div style="transform: scale(0.66)">
|
<div style="transform: scale(0.66)">
|
||||||
<span style="margin-left: -4.5px;font-weight: bold;">STOP</span>
|
<span style="margin-left: -4.5px; font-weight: bold">STOP</span>
|
||||||
</div>
|
</div>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</api-base-component>
|
</api-base-component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -81,11 +133,18 @@ import MsTcpBasisParameters from "../../../definition/components/request/tcp/Tcp
|
||||||
import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
|
import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
|
||||||
import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
|
import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
|
||||||
import ApiBaseComponent from "../common/ApiBaseComponent";
|
import ApiBaseComponent from "../common/ApiBaseComponent";
|
||||||
import {getCurrentProjectID, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
|
import {
|
||||||
import {getUUID, strMapToObj} from "metersphere-frontend/src/utils";
|
getCurrentProjectID,
|
||||||
import {STEP} from "@/business/automation/scenario/Setting";
|
getCurrentWorkspaceId,
|
||||||
import {getOwnerProjectIds, getProject} from "@/api/project";
|
} from "metersphere-frontend/src/utils/token";
|
||||||
import {checkScenarioEnv, getScenarioById, setScenarioDomain} from "@/api/scenario";
|
import { getUUID, strMapToObj } from "metersphere-frontend/src/utils";
|
||||||
|
import { STEP } from "@/business/automation/scenario/Setting";
|
||||||
|
import { getOwnerProjectIds, getProject } from "@/api/project";
|
||||||
|
import {
|
||||||
|
checkScenarioEnv,
|
||||||
|
getScenarioById,
|
||||||
|
setScenarioDomain,
|
||||||
|
} from "@/api/scenario";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ApiScenarioComponent",
|
name: "ApiScenarioComponent",
|
||||||
|
@ -117,63 +176,83 @@ export default {
|
||||||
ifFromVariableAdvance: {
|
ifFromVariableAdvance: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
message() {
|
message() {
|
||||||
if (this.message === 'STOPPED') {
|
if (this.message === "STOPPED") {
|
||||||
this.scenario.run = false;
|
this.scenario.run = false;
|
||||||
}
|
}
|
||||||
this.reload();
|
this.reload();
|
||||||
},
|
},
|
||||||
'node.data.isBatchProcess'() {
|
"node.data.isBatchProcess"() {
|
||||||
if (this.node.data && this.node.data.isBatchProcess && this.node.data.referenced === 'REF') {
|
if (
|
||||||
|
this.node.data &&
|
||||||
|
this.node.data.isBatchProcess &&
|
||||||
|
this.node.data.referenced === "REF"
|
||||||
|
) {
|
||||||
this.node.expanded = false;
|
this.node.expanded = false;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.isShowNum = this.scenario.num ? true : false;
|
this.isShowNum = this.scenario.num ? true : false;
|
||||||
if (this.scenario.id && this.scenario.referenced === 'REF' && !this.scenario.loaded && this.scenario.hashTree) {
|
if (
|
||||||
|
this.scenario.id &&
|
||||||
|
this.scenario.referenced === "REF" &&
|
||||||
|
!this.scenario.loaded &&
|
||||||
|
this.scenario.hashTree
|
||||||
|
) {
|
||||||
this.scenario.root = this.node.parent.parent ? false : true;
|
this.scenario.root = this.node.parent.parent ? false : true;
|
||||||
this.scenario.disabled = true;
|
this.scenario.disabled = true;
|
||||||
this.recursive(this.scenario.hashTree, this.scenario.projectId, true);
|
this.recursive(this.scenario.hashTree, this.scenario.projectId, true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {ApiBaseComponent, MsSqlBasisParameters, MsTcpBasisParameters, MsDubboBasisParameters, MsApiRequestForm},
|
components: {
|
||||||
|
ApiBaseComponent,
|
||||||
|
MsSqlBasisParameters,
|
||||||
|
MsTcpBasisParameters,
|
||||||
|
MsDubboBasisParameters,
|
||||||
|
MsApiRequestForm,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
isShowInput: false,
|
isShowInput: false,
|
||||||
isShowNum: false,
|
isShowNum: false,
|
||||||
stepFilter: new STEP,
|
stepFilter: new STEP(),
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isDeletedOrRef() {
|
isDeletedOrRef() {
|
||||||
return this.scenario.referenced && this.scenario.referenced === 'Deleted' || this.scenario.referenced === 'REF';
|
return (
|
||||||
|
(this.scenario.referenced && this.scenario.referenced === "Deleted") ||
|
||||||
|
this.scenario.referenced === "REF"
|
||||||
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
run() {
|
run() {
|
||||||
if (!this.scenario.enable) {
|
if (!this.scenario.enable) {
|
||||||
this.$warning(this.$t('api_test.automation.debug_message'));
|
this.$warning(this.$t("api_test.automation.debug_message"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.scenario.run = true;
|
this.scenario.run = true;
|
||||||
let runScenario = JSON.parse(JSON.stringify(this.scenario));
|
let runScenario = JSON.parse(JSON.stringify(this.scenario));
|
||||||
let variables = JSON.parse(JSON.stringify(this.currentScenario.variables));
|
let variables = JSON.parse(
|
||||||
|
JSON.stringify(this.currentScenario.variables)
|
||||||
|
);
|
||||||
|
|
||||||
// 合并自身依赖场景变量
|
// 合并自身依赖场景变量
|
||||||
if (runScenario && runScenario.variableEnable && runScenario.variables) {
|
if (runScenario && runScenario.variableEnable && runScenario.variables) {
|
||||||
if (variables) {
|
if (variables) {
|
||||||
// 同名合并
|
// 同名合并
|
||||||
runScenario.variables.forEach(data => {
|
runScenario.variables.forEach((data) => {
|
||||||
variables.forEach(item => {
|
variables.forEach((item) => {
|
||||||
if (data.type === item.type && data.name === item.name) {
|
if (data.type === item.type && data.name === item.name) {
|
||||||
Object.assign(data, item);
|
Object.assign(data, item);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -182,18 +261,18 @@ export default {
|
||||||
|
|
||||||
runScenario.hashTree = [this.scenario];
|
runScenario.hashTree = [this.scenario];
|
||||||
runScenario.stepScenario = true;
|
runScenario.stepScenario = true;
|
||||||
this.$emit('runScenario', runScenario);
|
this.$emit("runScenario", runScenario);
|
||||||
},
|
},
|
||||||
stop() {
|
stop() {
|
||||||
this.scenario.run = false;
|
this.scenario.run = false;
|
||||||
this.$emit('stopScenario');
|
this.$emit("stopScenario");
|
||||||
this.reload();
|
this.reload();
|
||||||
},
|
},
|
||||||
checkEnv(val) {
|
checkEnv(val) {
|
||||||
checkScenarioEnv(this.scenario.id).then(res => {
|
checkScenarioEnv(this.scenario.id).then((res) => {
|
||||||
if (this.scenario.environmentEnable && !res.data) {
|
if (this.scenario.environmentEnable && !res.data) {
|
||||||
this.scenario.environmentEnable = false;
|
this.scenario.environmentEnable = false;
|
||||||
this.$warning(this.$t('commons.scenario_warning'));
|
this.$warning(this.$t("commons.scenario_warning"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.setDomain(val);
|
this.setDomain(val);
|
||||||
|
@ -206,57 +285,72 @@ export default {
|
||||||
environmentType: this.environmentType,
|
environmentType: this.environmentType,
|
||||||
environmentGroupId: this.environmentGroupId,
|
environmentGroupId: this.environmentGroupId,
|
||||||
environmentMap: strMapToObj(this.envMap),
|
environmentMap: strMapToObj(this.envMap),
|
||||||
definition: JSON.stringify(this.scenario)
|
definition: JSON.stringify(this.scenario),
|
||||||
}
|
};
|
||||||
setScenarioDomain(param).then(res => {
|
setScenarioDomain(param).then((res) => {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
let data = JSON.parse(res.data);
|
let data = JSON.parse(res.data);
|
||||||
this.scenario.hashTree = data.hashTree;
|
this.scenario.hashTree = data.hashTree;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
getCode() {
|
getCode() {
|
||||||
if (this.node && this.node.data.code && this.node.data.debug) {
|
if (this.node && this.node.data.code && this.node.data.debug) {
|
||||||
let status = this.node.data.code;
|
let status = this.node.data.code;
|
||||||
return status.toLowerCase()[0].toUpperCase() + status.toLowerCase().substr(1);
|
return (
|
||||||
|
status.toLowerCase()[0].toUpperCase() + status.toLowerCase().substr(1)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return '';
|
return "";
|
||||||
},
|
},
|
||||||
remove() {
|
remove() {
|
||||||
this.$emit('remove', this.scenario, this.node);
|
this.$emit("remove", this.scenario, this.node);
|
||||||
},
|
},
|
||||||
active() {
|
active() {
|
||||||
if (this.node) {
|
if (this.node) {
|
||||||
if (this.node.data && this.node.data.isBatchProcess && this.node.data.referenced === 'REF') {
|
if (
|
||||||
|
this.node.data &&
|
||||||
|
this.node.data.isBatchProcess &&
|
||||||
|
this.node.data.referenced === "REF"
|
||||||
|
) {
|
||||||
this.node.expanded = false;
|
this.node.expanded = false;
|
||||||
} else {
|
} else {
|
||||||
this.node.expanded = !this.node.expanded;
|
this.node.expanded = !this.node.expanded;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.scenario && this.scenario.hashTree && this.node.expanded) {
|
if (this.scenario && this.scenario.hashTree && this.node.expanded) {
|
||||||
this.scenario.disabled = (this.scenario.id && this.scenario.referenced === 'REF');
|
this.scenario.disabled =
|
||||||
this.recursive(this.scenario.hashTree, this.scenario.projectId, (this.scenario.id && this.scenario.referenced === 'REF'));
|
this.scenario.id && this.scenario.referenced === "REF";
|
||||||
|
this.recursive(
|
||||||
|
this.scenario.hashTree,
|
||||||
|
this.scenario.projectId,
|
||||||
|
this.scenario.id && this.scenario.referenced === "REF"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
this.reload();
|
this.reload();
|
||||||
},
|
},
|
||||||
copyRow() {
|
copyRow() {
|
||||||
this.$emit('copyRow', this.scenario, this.node);
|
this.$emit("copyRow", this.scenario, this.node);
|
||||||
},
|
},
|
||||||
openScenario(data) {
|
openScenario(data) {
|
||||||
this.$emit('openScenario', data);
|
this.$emit("openScenario", data);
|
||||||
},
|
},
|
||||||
reload() {
|
reload() {
|
||||||
this.loading = true
|
this.loading = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.loading = false
|
this.loading = false;
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
recursive(arr, id, disabled) {
|
recursive(arr, id, disabled) {
|
||||||
for (let i in arr) {
|
for (let i in arr) {
|
||||||
arr[i].disabled = disabled;
|
arr[i].disabled = disabled;
|
||||||
arr[i].projectId = this.calcProjectId(arr[i].projectId, id);
|
arr[i].projectId = this.calcProjectId(arr[i].projectId, id);
|
||||||
// 处理子请求环境
|
// 处理子请求环境
|
||||||
let typeArray = ["JDBCPostProcessor", "JDBCSampler", "JDBCPreProcessor"]
|
let typeArray = [
|
||||||
|
"JDBCPostProcessor",
|
||||||
|
"JDBCSampler",
|
||||||
|
"JDBCPreProcessor",
|
||||||
|
];
|
||||||
if (typeArray.indexOf(arr[i].type) !== -1) {
|
if (typeArray.indexOf(arr[i].type) !== -1) {
|
||||||
arr[i].refEevMap = new Map();
|
arr[i].refEevMap = new Map();
|
||||||
arr[i].environmentEnable = this.scenario.environmentEnable;
|
arr[i].environmentEnable = this.scenario.environmentEnable;
|
||||||
|
@ -273,7 +367,7 @@ export default {
|
||||||
if (!projectId) {
|
if (!projectId) {
|
||||||
return parentId ? parentId : getCurrentProjectID();
|
return parentId ? parentId : getCurrentProjectID();
|
||||||
} else {
|
} else {
|
||||||
const project = this.projectList.find(p => p.id === projectId);
|
const project = this.projectList.find((p) => p.id === projectId);
|
||||||
if (project) {
|
if (project) {
|
||||||
return projectId;
|
return projectId;
|
||||||
}
|
}
|
||||||
|
@ -282,20 +376,19 @@ export default {
|
||||||
},
|
},
|
||||||
getProjectName(id) {
|
getProjectName(id) {
|
||||||
if (id !== getCurrentProjectID()) {
|
if (id !== getCurrentProjectID()) {
|
||||||
const project = this.projectList.find(p => p.id === id);
|
const project = this.projectList.find((p) => p.id === id);
|
||||||
return project ? project.name : "";
|
return project ? project.name + " > " : "";
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
clickResource(resource) {
|
clickResource(resource) {
|
||||||
let workspaceId = getCurrentWorkspaceId();
|
let workspaceId = getCurrentWorkspaceId();
|
||||||
let isTurnSpace = true
|
let isTurnSpace = true;
|
||||||
getScenarioById(resource.id).then(res => {
|
getScenarioById(resource.id).then((res) => {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
resource.projectId = res.data.projectId;
|
resource.projectId = res.data.projectId;
|
||||||
if (resource.projectId !== getCurrentProjectID()) {
|
if (resource.projectId !== getCurrentProjectID()) {
|
||||||
isTurnSpace = false;
|
isTurnSpace = false;
|
||||||
getProject(resource.projectId).then(response => {
|
getProject(resource.projectId).then((response) => {
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
workspaceId = response.data.workspaceId;
|
workspaceId = response.data.workspaceId;
|
||||||
isTurnSpace = true;
|
isTurnSpace = true;
|
||||||
|
@ -306,40 +399,38 @@ export default {
|
||||||
this.checkPermission(resource, workspaceId, isTurnSpace);
|
this.checkPermission(resource, workspaceId, isTurnSpace);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
gotoTurn(resource, workspaceId, isTurnSpace) {
|
gotoTurn(resource, workspaceId, isTurnSpace) {
|
||||||
let automationData = this.$router.resolve({
|
let automationData = this.$router.resolve({
|
||||||
name: 'ApiAutomationWithQuery',
|
name: "ApiAutomationWithQuery",
|
||||||
params: {
|
params: {
|
||||||
redirectID: getUUID(),
|
redirectID: getUUID(),
|
||||||
dataType: "scenario",
|
dataType: "scenario",
|
||||||
dataSelectRange: 'edit:' + resource.id,
|
dataSelectRange: "edit:" + resource.id,
|
||||||
projectId: resource.projectId,
|
projectId: resource.projectId,
|
||||||
workspaceId: workspaceId
|
workspaceId: workspaceId,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
if (isTurnSpace) {
|
if (isTurnSpace) {
|
||||||
window.open(automationData.href, '_blank');
|
window.open(automationData.href, "_blank");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
checkPermission(resource, workspaceId, isTurnSpace) {
|
checkPermission(resource, workspaceId, isTurnSpace) {
|
||||||
getOwnerProjectIds().then(res => {
|
getOwnerProjectIds().then((res) => {
|
||||||
const project = res.data.find(p => p === resource.projectId);
|
const project = res.data.find((p) => p === resource.projectId);
|
||||||
if (!project) {
|
if (!project) {
|
||||||
this.$warning(this.$t('commons.no_permission'));
|
this.$warning(this.$t("commons.no_permission"));
|
||||||
} else {
|
} else {
|
||||||
this.gotoTurn(resource, workspaceId, isTurnSpace)
|
this.gotoTurn(resource, workspaceId, isTurnSpace);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
},
|
||||||
|
},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
:deep(.el-card__body) {
|
:deep(.el-card__body) {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
}
|
}
|
||||||
|
@ -357,7 +448,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-req-error {
|
.ms-req-error {
|
||||||
color: #F56C6C;
|
color: #f56c6c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-test-running {
|
.ms-test-running {
|
||||||
|
@ -365,11 +456,11 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-req-success {
|
.ms-req-success {
|
||||||
color: #67C23A;
|
color: #67c23a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-btn {
|
.ms-btn {
|
||||||
background-color: #409EFF;
|
background-color: #409eff;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -379,8 +470,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop-btn {
|
.stop-btn {
|
||||||
background-color: #E62424;
|
background-color: #e62424;
|
||||||
border-color: #EE6161;
|
border-color: #ee6161;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue