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

fix(测试计划): 更改测试计划执行时环境选择弹窗样式，增加滚动条；关联用例时增加按钮loading防止重复提交 

--bug=1024332 --user=宋天阳 【测试跟踪】测试计划执行的弹窗，环境较多时，显示的弹窗没有滚动条
https://www.tapd.cn/55049933/s/1349014
This commit is contained in:
song-tianyang 2023-03-13 19:13:34 +08:00 committed by 建国
parent 497654d673
commit 09ac00a06e
5 changed files with 256 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
framework/sdk-parent/frontend/src/components/MsDialogHeader.vue
View File

@ -1,29 +1,45 @@
<template>
<div class="msDialogHeader">
<span style="float: left;font-size: 18px;color: #303133;">{{ title }}</span>
<span style="float: left; font-size: 18px; color: #303133">{{
title
}}</span>
<div style="top: 20px; right: 50px; position: absolute;">
<el-tooltip effect="dark" :content="$t('commons.full_screen_editing')"
placement="top-start">
<font-awesome-icon class="alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="fullScreen"/>
<div style="top: 20px; right: 50px; position: absolute">
<el-tooltip
effect="dark"
:content="$t('commons.full_screen_editing')"
placement="top-start"
>
<font-awesome-icon
class="alt-ico"
:icon="['fa', 'expand-alt']"
size="lg"
@click="fullScreen"
/>
</el-tooltip>
</div>
<div v-if="!hideButton" style="float: right;width: fit-content;">
<div style="float: left; margin-right: 8px;">
<div v-if="!hideButton" style="float: right; width: fit-content">
<div style="float: left; margin-right: 8px">
<slot name="other"></slot>
</div>
<div class="ms_btn">
<el-button v-if="enableCancel" @click="cancel" :size="btnSize">{{ $t('commons.cancel') }}</el-button>
<el-button type="primary" @click="confirm" @keydown.enter.native.prevent v-prevent-re-click :size="btnSize">
{{ $t('commons.confirm') }}
<el-button v-if="enableCancel" @click="cancel" :size="btnSize">{{
$t("commons.cancel")
}}</el-button>
<el-button
type="primary"
:loading="isButtonSaving"
@click="confirm"
@keydown.enter.native.prevent
v-prevent-re-click
:size="btnSize"
>
{{ $t("commons.confirm") }}
</el-button>
</div>
</div>
</div>
</template>
<script>
@ -34,11 +50,12 @@ export default {
btnSize: {
type: String,
default() {
return 'small';
}
return "small";
},
},
hideButton: Boolean,
enableCancel: Boolean
enableCancel: Boolean,
isButtonSaving: Boolean,
},
methods: {
cancel() {
@ -49,9 +66,9 @@ export default {
},
fullScreen() {
this.$emit("fullScreen");
}
}
}
},
},
};
</script>
<style scoped>

2
test-track/frontend/src/business/plan/common/TestPlanRunModeWithEnv.vue
View File

@ -7,7 +7,7 @@
@close="close"
:visible.sync="runModeVisible"
>
<div class="env-container">
<div class="env-container" style="max-height: 400px; overflow: auto">
<div>
<div>{{ $t("commons.environment") }}：</div>
<env-select-popover

114
test-track/frontend/src/business/plan/view/comonents/api/TestCaseApiRelevance.vue
View File

@ -1,11 +1,11 @@
<template>
<test-case-relevance-base
@setProject="setProject"
@save="saveCaseRelevance"
:plan-id="planId"
ref="baseRelevance">
:is-saving="isSaving"
ref="baseRelevance"
>
<template v-slot:aside>
<ms-api-module
:relevance-project-id="projectId"
@ -16,7 +16,8 @@
:show-case-num="false"
:is-read-only="true"
:is-relevance="true"
ref="nodeTree"/>
ref="nodeTree"
/>
</template>
<relevance-api-list
@ -31,10 +32,15 @@
:version-enable="versionEnable"
@isApiListEnableChange="isApiListEnableChange"
@selectCountChange="setSelectCounts"
ref="apiList">
ref="apiList"
>
<template v-slot:version>
<mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion($event,'api')"
margin-left="10"/>
<mx-version-select
v-xpack
:project-id="projectId"
@changeVersion="changeVersion($event, 'api')"
margin-left="10"
/>
</template>
</relevance-api-list>
@ -50,27 +56,35 @@
:plan-id="planId"
@isApiListEnableChange="isApiListEnableChange"
@selectCountChange="setSelectCounts"
ref="apiCaseList">
ref="apiCaseList"
>
<template v-slot:version>
<mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion($event, 'case')"
margin-left="10"/>
<mx-version-select
v-xpack
:project-id="projectId"
@changeVersion="changeVersion($event, 'case')"
margin-left="10"
/>
</template>
</relevance-case-list>
</test-case-relevance-base>
</template>
<script>
import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
import {apiDefinitionListBatch, apiDefinitionRelevance} from "@/api/remote/api/api-definition";
import {apiTestCaseListBlobs, apiTestCaseRelevance} from "@/api/remote/api/api-case";
import {
apiDefinitionListBatch,
apiDefinitionRelevance,
} from "@/api/remote/api/api-definition";
import {
apiTestCaseListBlobs,
apiTestCaseRelevance,
} from "@/api/remote/api/api-case";
import RelevanceApiList from "@/business/plan/view/comonents/api/RelevanceApiList";
import RelevanceCaseList from "@/business/plan/view/comonents/api/RelevanceCaseList";
import MsApiModule from "@/business/plan/view/comonents/api/module/ApiModule";
import {getVersionFilters} from "@/business/utils/sdk-utils";
import { getVersionFilters } from "@/business/utils/sdk-utils";
export default {
name: "TestCaseApiRelevance",
@ -79,7 +93,7 @@ export default {
RelevanceCaseList,
RelevanceApiList,
TestCaseRelevanceBase,
MxVersionSelect
MxVersionSelect,
},
data() {
return {
@ -94,16 +108,17 @@ export default {
currentRow: {},
projectId: "",
versionFilters: [],
isSaving: false,
};
},
props: {
planId: {
type: String
type: String,
},
versionEnable: {
type: Boolean,
default: false
}
default: false,
},
},
watch: {
planId() {
@ -111,7 +126,7 @@ export default {
},
projectId() {
this.getVersionOptions();
}
},
},
mounted() {
this.getVersionOptions();
@ -178,9 +193,10 @@ export default {
},
saveCaseRelevance() {
let url = '';
let url = "";
let environmentId = undefined;
let selectIds = [];
this.isSaving = true;
if (this.isApiListEnable) {
//查找所有数据
let params = this.$refs.apiList.getConditions();
@ -188,9 +204,17 @@ export default {
.then((response) => {
let apis = response.data;
environmentId = this.$refs.apiList.environmentId;
selectIds = Array.from(apis).map(row => row.id);
selectIds = Array.from(apis).map((row) => row.id);
let protocol = this.$refs.apiList.currentProtocol;
this.postRelevance(apiDefinitionRelevance, environmentId, selectIds, protocol);
this.postRelevance(
apiDefinitionRelevance,
environmentId,
selectIds,
protocol
);
})
.catch(() => {
this.isSaving = false;
});
} else {
let params = this.$refs.apiCaseList.getConditions();
@ -198,24 +222,33 @@ export default {
.then((response) => {
let apiCases = response.data;
environmentId = this.$refs.apiCaseList.environmentId;
selectIds = Array.from(apiCases).map(row => row.id);
selectIds = Array.from(apiCases).map((row) => row.id);
let protocol = this.$refs.apiCaseList.currentProtocol;
this.postRelevance(apiTestCaseRelevance, environmentId, selectIds, protocol);
this.postRelevance(
apiTestCaseRelevance,
environmentId,
selectIds,
protocol
);
})
.catch(() => {
this.isSaving = false;
});
}
},
postRelevance(relevanceList, environmentId, selectIds, protocol) {
let param = {};
if (protocol !== 'DUBBO') {
if (protocol !== "DUBBO") {
if (!environmentId) {
this.$warning(this.$t('api_test.environment.select_environment'));
this.isSaving = false;
this.$warning(this.$t("api_test.environment.select_environment"));
return;
}
}
if (selectIds.length < 1) {
this.$warning(this.$t('test_track.plan_view.please_choose_test_case'));
this.isSaving = false;
this.$warning(this.$t("test_track.plan_view.please_choose_test_case"));
return;
}
param.planId = this.planId;
@ -223,18 +256,23 @@ export default {
param.environmentId = environmentId;
relevanceList(param)
.then(() => {
this.$success(this.$t('commons.save_success'));
this.$emit('refresh');
this.$success(this.$t("commons.save_success"));
this.$emit("refresh");
this.refresh();
this.$refs.baseRelevance.close();
this.isSaving = false;
})
.catch(() => {
this.isSaving = false;
});
},
getVersionOptions() {
getVersionFilters(this.projectId)
.then(r => this.versionFilters = r.data);
getVersionFilters(this.projectId).then(
(r) => (this.versionFilters = r.data)
);
},
changeVersion(currentVersion, type) {
if (type == 'api') {
if (type == "api") {
this.$refs.apiList.condition.versionId = currentVersion || null;
this.$refs.apiList.initTable();
} else {
@ -245,12 +283,11 @@ export default {
setSelectCounts(data) {
this.$refs.baseRelevance.selectCounts = data;
},
}
}
},
};
</script>
<style scoped>
:deep(.select-menu) {
margin-bottom: 15px;
}
@ -259,5 +296,4 @@ export default {
float: right;
margin-right: 10px;
}
</style>

74
test-track/frontend/src/business/plan/view/comonents/api/TestCaseScenarioRelevance.vue
View File

@ -1,11 +1,11 @@
<template>
<test-case-relevance-base
@setProject="setProject"
@save="saveCaseRelevance"
:plan-id="planId"
ref="baseRelevance">
ref="baseRelevance"
:is-saving="isSaving"
>
<template v-slot:aside>
<ms-api-scenario-module
@nodeSelectEvent="nodeChange"
@ -14,7 +14,8 @@
:show-case-num="false"
:relevance-project-id="projectId"
:is-read-only="true"
ref="nodeTree"/>
ref="nodeTree"
/>
</template>
<relevance-scenario-list
@ -24,21 +25,23 @@
:plan-id="planId"
:project-id="projectId"
@selectCountChange="setSelectCounts"
ref="apiScenarioList"/>
ref="apiScenarioList"
/>
</test-case-relevance-base>
</template>
<script>
import TestCaseRelevanceBase from "../base/TestCaseRelevanceBase";
import RelevanceScenarioList from "./RelevanceScenarioList";
import {ENV_TYPE} from "metersphere-frontend/src/utils/constants";
import {getCurrentProjectID, hasLicense, strMapToObj} from "@/business/utils/sdk-utils";
import {getVersionFilters} from "@/business/utils/sdk-utils";
import {testPlanAutoCheck} from "@/api/remote/plan/test-plan";
import {scenarioRelevance} from "@/api/remote/plan/test-plan-scenario";
import { ENV_TYPE } from "metersphere-frontend/src/utils/constants";
import {
getCurrentProjectID,
hasLicense,
strMapToObj,
} from "@/business/utils/sdk-utils";
import { getVersionFilters } from "@/business/utils/sdk-utils";
import { testPlanAutoCheck } from "@/api/remote/plan/test-plan";
import { scenarioRelevance } from "@/api/remote/plan/test-plan-scenario";
import MsApiScenarioModule from "@/business/plan/view/comonents/api/module/ApiScenarioModule";
export default {
@ -59,16 +62,17 @@ export default {
currentRow: {},
projectId: "",
versionFilters: [],
isSaving: false,
};
},
props: {
planId: {
type: String
type: String,
},
versionEnable: {
type: Boolean,
default: false
}
default: false,
},
},
methods: {
open() {
@ -116,18 +120,19 @@ export default {
param.environmentType = envType;
param.envGroupId = envGroupId;
scenarioRelevance(param)
.then(() => {
this.$success(this.$t('commons.save_success'));
this.$emit('refresh');
scenarioRelevance(param).then(() => {
this.$success(this.$t("commons.save_success"));
this.$emit("refresh");
this.refresh();
this.autoCheckStatus();
this.$refs.baseRelevance.close();
});
},
async saveCaseRelevance() {
this.isSaving = true;
const sign = await this.$refs.apiScenarioList.checkEnv();
if (!sign) {
this.isSaving = false;
return false;
}
let selectIds = [];
@ -138,16 +143,19 @@ export default {
let envGroupId = this.$refs.apiScenarioList.envGroupId;
if (selectRows.size < 1) {
this.$warning(this.$t('test_track.plan_view.please_choose_test_case'));
this.isSaving = false;
this.$warning(this.$t("test_track.plan_view.please_choose_test_case"));
return;
}
selectRows.forEach(row => {
selectRows.forEach((row) => {
selectIds.push(row.id);
})
});
if (envType === ENV_TYPE.JSON && (!envMap || envMap.size < 1)) {
this.isSaving = false;
this.$warning(this.$t("api_test.environment.select_environment"));
return false;
} else if (envType === ENV_TYPE.GROUP && !envGroupId) {
this.isSaving = false;
this.$warning(this.$t("api_test.environment.select_environment"));
return false;
}
@ -161,14 +169,19 @@ export default {
param.condition = this.$refs.apiScenarioList.condition;
scenarioRelevance(param)
.then(() => {
this.$success(this.$t('commons.save_success'));
this.$emit('refresh');
this.isSaving = false;
this.$success(this.$t("commons.save_success"));
this.$emit("refresh");
this.refresh();
this.autoCheckStatus();
this.$refs.baseRelevance.close();
})
.catch(() => {
this.isSaving = false;
});
},
autoCheckStatus() { // 检查执行结果，自动更新计划状态
autoCheckStatus() {
// 检查执行结果，自动更新计划状态
if (!this.planId) {
return;
}
@ -179,16 +192,16 @@ export default {
},
getVersionOptions() {
if (hasLicense()) {
getVersionFilters(getCurrentProjectID())
.then(r => this.versionFilters = r.data);
getVersionFilters(getCurrentProjectID()).then(
(r) => (this.versionFilters = r.data)
);
}
},
}
},
};
</script>
<style scoped>
:deep(.select-menu) {
margin-bottom: 15px;
}
@ -201,5 +214,4 @@ export default {
:deep(.module-input) {
width: 243px;
}
</style>

131
test-track/frontend/src/business/plan/view/comonents/base/TestCaseRelevanceBase.vue
View File

@ -1,29 +1,59 @@
<template>
<relevance-dialog :width="width" :title="dialogTitle" ref="relevanceDialog" :full-screen="isFullScreen">
<relevance-dialog
:width="width"
:title="dialogTitle"
ref="relevanceDialog"
:full-screen="isFullScreen"
>
<!-- todo -->
<template slot="headerBtn" v-if="$slots.headerBtn">
<div>
<slot name="headerBtn"></slot>
</div>
</template>
<template slot="title" slot-scope="{title}" v-if="!$slots.headerBtn">
<ms-dialog-header :title="title" :enable-cancel="false" @confirm="save" btn-size="mini" @fullScreen="isFullScreen=!isFullScreen">
<template slot="title" slot-scope="{ title }" v-if="!$slots.headerBtn">
<ms-dialog-header
:is-button-saving="isSaving"
:title="title"
:enable-cancel="false"
@confirm="save"
btn-size="mini"
@fullScreen="isFullScreen = !isFullScreen"
>
<template #other>
<table-select-count-bar :count="selectCounts" style="float: left; margin: 5px;"/>
<table-select-count-bar
:count="selectCounts"
style="float: left; margin: 5px"
/>
<div v-if="flag" style="margin: 5px; float: left;">
<el-checkbox v-model="checked" class="el-checkbox__label">{{ $t('test_track.sync_add_api_load') }}</el-checkbox>
<div v-if="flag" style="margin: 5px; float: left">
<el-checkbox v-model="checked" class="el-checkbox__label">{{
$t("test_track.sync_add_api_load")
}}</el-checkbox>
</div>
</template>
</ms-dialog-header>
</template>
<template v-slot:aside>
<span v-if="isAcrossSpace" class="menu-title">{{ '[' + $t('project.version.checkout') + $t('commons.space') + ']' }}</span>
<el-select v-if="isAcrossSpace" filterable slot="prepend" v-model="workspaceId" @change="changeWorkspace"
<span v-if="isAcrossSpace" class="menu-title">{{
"[" + $t("project.version.checkout") + $t("commons.space") + "]"
}}</span>
<el-select
v-if="isAcrossSpace"
filterable
slot="prepend"
v-model="workspaceId"
@change="changeWorkspace"
class="ms-header-workspace"
size="small">
<el-option v-for="(item,index) in workspaceList" :key="index" :label="item.name" :value="item.id"/>
size="small"
>
<el-option
v-for="(item, index) in workspaceList"
:key="index"
:label="item.name"
:value="item.id"
/>
</el-select>
<select-menu
:data="projects"
@ -31,22 +61,25 @@
width="155px"
:current-data="currentProject"
:title="$t('test_track.switch_project')"
@dataChange="changeProject"/>
@dataChange="changeProject"
/>
<slot name="aside"></slot>
</template>
<slot></slot>
</relevance-dialog>
</template>
<script>
import MsDialogHeader from 'metersphere-frontend/src/components/MsDialogHeader'
import MsDialogHeader from "metersphere-frontend/src/components/MsDialogHeader";
import SelectMenu from "@/business/common/SelectMenu";
import RelevanceDialog from "./RelevanceDialog";
import {getCurrentProjectID, getCurrentUserId, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
import {getUserWorkspaceList} from "metersphere-frontend/src/api/workspace";
import {getUserProjectList} from "metersphere-frontend/src/api/project";
import {
getCurrentProjectID,
getCurrentUserId,
getCurrentWorkspaceId,
} from "metersphere-frontend/src/utils/token";
import { getUserWorkspaceList } from "metersphere-frontend/src/api/workspace";
import { getUserProjectList } from "metersphere-frontend/src/api/project";
import TableSelectCountBar from "metersphere-frontend/src/components/table/MsTableSelectCountBar";
export default {
@ -55,31 +88,31 @@ export default {
RelevanceDialog,
SelectMenu,
MsDialogHeader,
TableSelectCountBar
TableSelectCountBar,
},
data() {
return {
checked: true,
currentProject: {},
projectId: '',
projectName: '',
projectId: "",
projectName: "",
projects: [],
workspaceId: '',
workspaceId: "",
workspaceList: [],
currentWorkSpaceId: '',
currentWorkSpaceId: "",
selectCounts: null,
isFullScreen: false
isFullScreen: false,
};
},
props: {
planId: {
type: String
type: String,
},
dialogTitle: {
type: String,
default() {
return this.$t('test_track.plan_view.relevance_test_case');
}
return this.$t("test_track.plan_view.relevance_test_case");
},
},
flag: {
type: Boolean,
@ -89,26 +122,26 @@ export default {
type: Boolean,
default() {
return false;
}
},
},
isAcrossSpace: {
type: Boolean,
default() {
return false;
}
},
},
multipleProject: {
type: Boolean,
default: true
}
default: true,
},
},
methods: {
refreshNode() {
this.$emit('refresh');
this.$emit("refresh");
},
save() {
this.$emit('save', this.checked);
this.$emit("save", this.checked);
},
close() {
@ -123,14 +156,16 @@ export default {
},
getProject() {
let realWorkSpaceId = this.isAcrossSpace ? this.workspaceId : this.currentWorkSpaceId;
getUserProjectList( {
let realWorkSpaceId = this.isAcrossSpace
? this.workspaceId
: this.currentWorkSpaceId;
getUserProjectList({
userId: getCurrentUserId(),
workspaceId: realWorkSpaceId
}).then( res => {
workspaceId: realWorkSpaceId,
}).then((res) => {
let data = res.data;
if (data && data.length > 0) {
const index = data.findIndex(d => d.id === getCurrentProjectID());
const index = data.findIndex((d) => d.id === getCurrentProjectID());
this.projects = data;
if (index !== -1) {
this.projectId = data[index].id;
@ -142,27 +177,31 @@ export default {
this.changeProject(data[0]);
}
} else {
this.$message.warning(this.$t('commons.current_workspace') + this.$t('commons.not_exist') + this.$t('commons.project') + "!");
this.$message.warning(
this.$t("commons.current_workspace") +
this.$t("commons.not_exist") +
this.$t("commons.project") +
"!"
);
}
})
});
},
changeProject(project) {
if (project) {
this.currentProject = project;
this.$emit('setProject', project.id);
this.$emit("setProject", project.id);
// 获取项目时刷新该项目模块
this.$emit('refreshNode');
this.$emit("refreshNode");
}
},
getWorkSpaceList() {
getUserWorkspaceList()
.then((r) => {
getUserWorkspaceList().then((r) => {
this.workspaceList = r.data;
});
},
changeWorkspace() {
this.getProject();
}
},
},
created() {
this.currentWorkSpaceId = getCurrentWorkspaceId();
@ -170,8 +209,8 @@ export default {
if (this.isAcrossSpace) {
this.getWorkSpaceList();
}
}
}
},
};
</script>
<style scoped>