fix(任务中心): 接口测试任务-修复点击切换任务查看报告-报告未切换显示&修复查看场景任务空白

--bug=1027494 --user=白奇 【任务中心】接口测试任务-点击切换任务查看报告-报告未切换显示 https://www.tapd.cn/55049933/s/1391137
This commit is contained in:
BAIQI 2023-07-10 22:53:13 +08:00 committed by fit2-zhao
parent fc9e7a20f1
commit c2f237a1bf
2 changed files with 366 additions and 186 deletions

View File

@ -5,55 +5,84 @@
</template>
<script>
import {initGlobalState, loadMicroApp} from 'qiankun';
import { initGlobalState, loadMicroApp } from "qiankun";
export default {
name: 'MicroApp',
name: "MicroApp",
props: {
to: String,
service: String,
routeParams: null,
routeName: null
routeName: null,
},
data() {
return {
messageEvent: initGlobalState({ event: null }),
microApp: null,
}
updateTask: null,
};
},
watch: {
routeParams: {
handler() {
this.microApp.update({
this.microAppUpdate();
},
deep: true,
},
to(val) {
if (val) {
this.microAppUpdate();
}
},
service(val) {
if (val) {
this.microAppInit();
this.messageInit();
}
},
},
mounted() {
this.microAppInit();
this.messageInit();
},
methods: {
microAppUpdate() {
if (this.updateTask) {
//
clearTimeout(this.updateTask);
}
// watchVue0ms
this.updateTask = setTimeout(() => {
this.microApp?.update({
defaultPath: this.to,
routeParams: this.routeParams,
routeName: this.routeName,
});
this.$nextTick(() => {
//
this.updateTask = null;
});
}, 0);
},
deep: true,
}
},
mounted() {
this.microAppInit()
this.messageInit()
},
methods: {
microAppInit() {
const microPorts = JSON.parse(sessionStorage.getItem("micro_ports"));
let app = {
name: 'micro-app-' + this.service,
name: "micro-app-" + this.service,
container: this.$refs.child1,
entry: '//127.0.0.1:' + (microPorts[this.service] - 4000),
entry: "//127.0.0.1:" + (microPorts[this.service] - 4000),
props: {
defaultPath: this.to,
routeParams: this.routeParams,
routeName: this.routeName,
eventBus: this.$EventBus
}
eventBus: this.$EventBus,
},
};
if (process.env.NODE_ENV !== 'development') {
if (process.env.NODE_ENV !== "development") {
//
app.entry = app.entry.replace(/127\.0\.0\.1:\d+/g, window.location.host + "/" + this.service);
app.entry = app.entry.replace(
/127\.0\.0\.1:\d+/g,
window.location.host + "/" + this.service
);
}
this.microApp = loadMicroApp(app);
},
@ -62,15 +91,13 @@ export default {
},
changeState() {
this.messageEvent.setGlobalState({ b: 1 });
}
},
},
beforeDestroy() {
this.messageEvent.offGlobalStateChange()
this.messageEvent.offGlobalStateChange();
this.microApp.unmount();
}
}
},
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

View File

@ -3,14 +3,22 @@
<div class="ms-header-menu align-right">
<el-tooltip effect="light" v-if="showMenu">
<template v-slot:content>
<span>{{ $t('commons.task_center') }}</span>
<span>{{ $t("commons.task_center") }}</span>
</template>
<div @click="showTaskCenter" v-if="runningTotal > 0">
<el-badge :value="runningTotal" class="item" type="primary">
<font-awesome-icon class="icon global focusing" :icon="['fas', 'tasks']"/>
<font-awesome-icon
class="icon global focusing"
:icon="['fas', 'tasks']"
/>
</el-badge>
</div>
<font-awesome-icon @click="open('API')" class="icon global focusing" :icon="['fas', 'tasks']" v-else/>
<font-awesome-icon
@click="open('API')"
class="icon global focusing"
:icon="['fas', 'tasks']"
v-else
/>
</el-tooltip>
</div>
<el-drawer
@ -21,41 +29,63 @@
:modal="false"
:title="$t('commons.task_center')"
:size="size.toString()"
custom-class="ms-drawer-task">
<el-card style="float: left;margin-top: 0px" :style="{'width': (size - 600)+'px'}" v-if="size > 600 "
class="ms-task-container">
<div class="ms-task-opt-btn" @click="packUp">{{ $t('commons.task_close') }}</div>
<!-- 接口用例结果 -->
<micro-app :to="`/definition/report/view/${reportId}`" service="api"
v-if="executionModule === 'API' && reportType !=='API_INTEGRATED'"/>
<!-- 接口场景报告 -->
<micro-app :to="`/automation/report/view/${reportId}`" service="api"
v-if="executionModule === 'SCENARIO'|| reportType ==='API_INTEGRATED'"/>
<!-- 性能测试报告 -->
<micro-app :to="`/performance/report/view/${reportId}`" service="performance"
v-if="executionModule === 'PERFORMANCE'"/>
<!-- UI测试报告 -->
<micro-app :to="`/ui/report/view/${reportId}?showCancelButton=false`" service="ui"
v-if="executionModule === 'UI_SCENARIO'"/>
custom-class="ms-drawer-task"
>
<el-card
style="float: left; margin-top: 0px"
:style="{ width: size - 600 + 'px' }"
v-if="size > 600"
class="ms-task-container"
>
<div class="ms-task-opt-btn" @click="packUp">
{{ $t("commons.task_close") }}
</div>
<micro-app
v-if="isMicroAppInited"
:to="microAppConfig.url"
:service="microAppConfig.service"
/>
</el-card>
<el-card style="width: 550px; float: right">
<div style="color: #2B415C;margin: 0px;">
<div style="color: #2b415c; margin: 0px">
<el-form label-width="95px" class="ms-el-form-item">
<el-row>
<el-col :span="12">
<el-form-item :label="$t('test_track.report.list.trigger_mode')" prop="runMode">
<el-select size="mini" style="margin-right: 10px" v-model="condition.triggerMode" @change="changeInit"
:disabled="isDebugHistory">
<el-option v-for="item in runMode" :key="item.id" :value="item.id" :label="item.label"/>
<el-form-item
:label="$t('test_track.report.list.trigger_mode')"
prop="runMode"
>
<el-select
size="mini"
style="margin-right: 10px"
v-model="condition.triggerMode"
@change="changeInit"
:disabled="isDebugHistory"
>
<el-option
v-for="item in runMode"
:key="item.id"
:value="item.id"
:label="item.label"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('commons.status')" prop="status">
<el-select size="mini" style="margin-right: 10px" v-model="condition.executionStatus"
<el-select
size="mini"
style="margin-right: 10px"
v-model="condition.executionStatus"
@change="init(true)"
:disabled="isDebugHistory">
<el-option v-for="item in runStatus" :key="item.id" :value="item.id" :label="item.label"/>
:disabled="isDebugHistory"
>
<el-option
v-for="item in runStatus"
:key="item.id"
:value="item.id"
:label="item.label"
/>
</el-select>
</el-form-item>
</el-col>
@ -63,30 +93,57 @@
<el-row>
<el-col :span="12">
<el-form-item :label="$t('commons.executor')" prop="status">
<el-select v-model="condition.executor" :placeholder="$t('commons.executor')" filterable size="mini"
style="margin-right: 10px" @change="changeInit" :disabled="isDebugHistory">
<el-select
v-model="condition.executor"
:placeholder="$t('commons.executor')"
filterable
size="mini"
style="margin-right: 10px"
@change="changeInit"
:disabled="isDebugHistory"
>
<el-option
v-for="item in maintainerOptions"
:key="item.id"
:label="item.id + ' (' + item.name + ')'"
:value="item.id">
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-button size="mini" class="ms-task-stop" @click="stop(null)" :disabled="isDebugHistory">
{{ $t('report.stop_btn_all') }}
<el-button
size="mini"
class="ms-task-stop"
@click="stop(null)"
:disabled="isDebugHistory"
>
{{ $t("report.stop_btn_all") }}
</el-button>
</el-col>
</el-row>
</el-form>
</div>
<el-divider direction="horizontal" style="width: 100%" />
<el-tabs v-model="activeName" @tab-click="init(true)" v-loading="loading">
<el-tab-pane :key="tab.id" :name="tab.id" :label="tab.label" v-for="tab in tabs" :disabled="isDebugHistory">
<el-tabs
v-model="activeName"
@tab-click="init(true)"
v-loading="loading"
>
<el-tab-pane
:key="tab.id"
:name="tab.id"
:label="tab.label"
v-for="tab in tabs"
:disabled="isDebugHistory"
>
<span slot="label">
<el-badge class="ms-badge-item" v-if="showBadge(tab.id) > 0" :value="showBadge(tab.id)">
<el-badge
class="ms-badge-item"
v-if="showBadge(tab.id) > 0"
:value="showBadge(tab.id)"
>
{{ tab.label }}
</el-badge>
<span style="font-size: 13px" v-else>{{ tab.label }}</span>
@ -113,7 +170,14 @@ import MsDrawer from "../MsDrawer";
import { getCurrentProjectID, getCurrentUser } from "../../utils/token";
import { hasLicense, hasPermissions } from "../../utils/permission";
import { getProjectUsers } from "../../api/user";
import {getCaseData, getScenarioData, getTaskList, getTaskSocket, stopBatchTask, stopTask} from "../../api/task";
import {
getCaseData,
getScenarioData,
getTaskList,
getTaskSocket,
stopBatchTask,
stopTask,
} from "../../api/task";
import MicroApp from "../../components/MicroApp";
import { prefetchApps } from "qiankun";
import TaskCenterItem from "./TaskCenterItem";
@ -128,9 +192,7 @@ export default {
MsTaskReportStatus: () => import("./TaskReportStatus"),
MsTablePagination: () => import("./TaskPagination"),
},
inject: [
'reload'
],
inject: ["reload"],
data() {
return {
runningData: {},
@ -147,29 +209,29 @@ export default {
visible: false,
showType: "",
runMode: [
{id: '', label: this.$t('api_test.definition.document.data_set.all')},
{id: 'BATCH', label: this.$t('api_test.automation.batch_execute')},
{id: 'SCHEDULE', label: this.$t('commons.trigger_mode.schedule')},
{id: 'MANUAL', label: this.$t('commons.trigger_mode.manual')},
{id: 'API', label: this.$t('commons.trigger_mode.api')}
{ id: "", label: this.$t("api_test.definition.document.data_set.all") },
{ id: "BATCH", label: this.$t("api_test.automation.batch_execute") },
{ id: "SCHEDULE", label: this.$t("commons.trigger_mode.schedule") },
{ id: "MANUAL", label: this.$t("commons.trigger_mode.manual") },
{ id: "API", label: this.$t("commons.trigger_mode.api") },
],
tabs: [
{id: 'API', label: this.$t('task.api_title')},
{id: 'SCENARIO', label: this.$t('task.scenario_title')},
{id: 'PERF', label: this.$t('task.perf_title')}
{ id: "API", label: this.$t("task.api_title") },
{ id: "SCENARIO", label: this.$t("task.scenario_title") },
{ id: "PERF", label: this.$t("task.perf_title") },
],
runStatus: [
{id: '', label: this.$t('api_test.definition.document.data_set.all')},
{id: 'STARTING', label: 'Starting'},
{id: 'PENDING', label: 'Pending'},
{id: 'RUNNING', label: 'Running'},
{id: 'RERUNNING', label: 'Rerunning'},
{id: 'REPORTING', label: 'Reporting'},
{id: 'SUCCESS', label: 'Success'},
{id: "FAKE_ERROR", label: 'FakeError'},
{id: 'ERROR', label: 'Error'},
{id: 'STOPPED', label: 'Stopped'},
{id: 'COMPLETED', label: 'Completed'},
{ id: "", label: this.$t("api_test.definition.document.data_set.all") },
{ id: "STARTING", label: "Starting" },
{ id: "PENDING", label: "Pending" },
{ id: "RUNNING", label: "Running" },
{ id: "RERUNNING", label: "Rerunning" },
{ id: "REPORTING", label: "Reporting" },
{ id: "SUCCESS", label: "Success" },
{ id: "FAKE_ERROR", label: "FakeError" },
{ id: "ERROR", label: "Error" },
{ id: "STOPPED", label: "Stopped" },
{ id: "COMPLETED", label: "Completed" },
],
condition: { triggerMode: "", executionStatus: "" },
maintainerOptions: [],
@ -178,27 +240,32 @@ export default {
reportId: "",
executionModule: "",
reportType: "",
isDebugHistory: false
isDebugHistory: false,
isMicroAppInited: false,
microAppConfig: {
url: "",
service: "",
},
};
},
props: {
showMenu: {
type: Boolean,
default: true
}
default: true,
},
},
computed: {
disabled() {
return this.loading
return this.loading;
},
},
created() {
if (hasPermissions('PROJECT_API_SCENARIO:READ')) {
if (hasPermissions("PROJECT_API_SCENARIO:READ")) {
this.condition.executor = getCurrentUser().id;
}
if (hasLicense()) {
this.tabs.push({id: 'UI', label: this.$t('task.ui_title')})
this.tabs.push({ id: "UI", label: this.$t("task.ui_title") });
}
this.prefetchApps();
},
@ -207,7 +274,41 @@ export default {
if (!v) {
this.close();
}
},
reportId(v) {
//
if (
this.executionModule === "API" &&
this.reportType !== "API_INTEGRATED"
) {
this.microAppConfig = {
url: `/definition/report/view/${this.reportId}`,
service: "api",
};
} else if (
//
this.executionModule === "SCENARIO" ||
this.reportType === "API_INTEGRATED"
) {
this.microAppConfig = {
url: `/automation/report/view/${this.reportId}`,
service: "api",
};
} else if (this.executionModule === "PERFORMANCE") {
//
this.microAppConfig = {
url: `/performance/report/view/${this.reportId}`,
service: "performance",
};
} else if (this.executionModule === "UI_SCENARIO") {
// UI
this.microAppConfig = {
url: `/ui/report/view/${this.reportId}?showCancelButton=false`,
service: "ui",
};
}
this.isMicroAppInited = true;
},
},
methods: {
showBadge(executionModule) {
@ -223,7 +324,7 @@ export default {
}
},
format(item) {
return '';
return "";
},
packUp() {
this.size = 600;
@ -231,50 +332,65 @@ export default {
stop(row) {
if (row) {
let request = { type: row.executionModule, reportId: row.id };
stopTask(request).then(response => {
this.$success(this.$t('report.test_stop_success'));
stopTask(request).then((response) => {
this.$success(this.$t("report.test_stop_success"));
this.init(true);
});
} else {
let array = [];
array.push({type: 'API', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
array.push({type: 'SCENARIO', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
array.push({type: 'PERFORMANCE', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
array.push({type: 'UI_SCENARIO', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
stopBatchTask(array).then(response => {
this.$success(this.$t('report.test_stop_success'));
array.push({
type: "API",
projectId: getCurrentProjectID(),
userId: getCurrentUser().id,
});
array.push({
type: "SCENARIO",
projectId: getCurrentProjectID(),
userId: getCurrentUser().id,
});
array.push({
type: "PERFORMANCE",
projectId: getCurrentProjectID(),
userId: getCurrentUser().id,
});
array.push({
type: "UI_SCENARIO",
projectId: getCurrentProjectID(),
userId: getCurrentUser().id,
});
stopBatchTask(array).then((response) => {
this.$success(this.$t("report.test_stop_success"));
this.init(true);
});
}
},
getMaintainerOptions() {
getProjectUsers()
.then(response => {
getProjectUsers().then((response) => {
this.maintainerOptions = response.data;
this.condition.executor = getCurrentUser().id;
})
});
},
initWebSocket() {
let isLicense = hasLicense();
this.websocket = getTaskSocket(this.condition.executor,this.condition.triggerMode,isLicense || false);
this.websocket = getTaskSocket(
this.condition.executor,
this.condition.triggerMode,
isLicense || false
);
this.websocket.onmessage = this.onMessage;
this.websocket.onopen = this.onOpen;
this.websocket.onerror = this.onError;
this.websocket.onclose = this.onClose;
},
onOpen() {
},
onError(e) {
},
onOpen() {},
onError(e) {},
onMessage(e) {
this.loading = false;
this.runningData = JSON.parse(e.data);
this.runningTotal = this.runningData.total;
this.init(false);
},
onClose(e) {
},
onClose(e) {},
listenScreenChange() {
if (this.size != 600) {
this.size = document.body.clientWidth;
@ -306,10 +422,17 @@ export default {
getPercentage(status) {
if (status) {
status = status.toLowerCase();
if (status === "pending" || status === 'stopped') {
if (status === "pending" || status === "stopped") {
return 0;
}
let statusArray = ['saved', 'completed', 'success','error','pending','fake_error'];
let statusArray = [
"saved",
"completed",
"success",
"error",
"pending",
"fake_error",
];
if (statusArray.includes(status)) {
return 100;
}
@ -319,7 +442,15 @@ export default {
showStop(status) {
if (status) {
status = status.toLowerCase();
let statusArray = ['saved', 'completed', 'success','error','pending','fake_error', 'stopped'];
let statusArray = [
"saved",
"completed",
"success",
"error",
"pending",
"fake_error",
"stopped",
];
if (statusArray.includes(status)) {
return false;
}
@ -329,11 +460,11 @@ export default {
getModeName(executionModule) {
switch (executionModule) {
case "SCENARIO":
return this.$t('test_track.scenario_test_case');
return this.$t("test_track.scenario_test_case");
case "PERFORMANCE":
return this.$t('test_track.performance_test_case');
return this.$t("test_track.performance_test_case");
case "API":
return this.$t('test_track.api_test_case');
return this.$t("test_track.api_test_case");
case "UI_SCENARIO":
return this.$t("test_track.ui_scenario_test_case");
}
@ -346,42 +477,53 @@ export default {
let status = row.executionStatus;
if (status) {
status = row.executionStatus.toLowerCase();
let statusArray = ['saved', 'completed', 'success','error','pending','fake_error', 'stopped'];
let statusArray = [
"saved",
"completed",
"success",
"error",
"pending",
"fake_error",
"stopped",
];
if (statusArray.includes(status)) {
this.executionModule = null;
this.$nextTick(() => {
this.size = window.innerWidth;
this.executionModule = row.executionModule;
this.reportType = row.reportType;
if (row.executionModule === 'SCENARIO' || row.reportType === 'API_INTEGRATED') {
if (
row.executionModule === "SCENARIO" ||
row.reportType === "API_INTEGRATED"
) {
this.reportId = getUUID() + "[TEST-PLAN-REDIRECT]" + row.id;
} else {
this.reportId = row.id;
}
})
});
} else {
this.$warning(this.$t('commons.run_warning'))
this.$warning(this.$t("commons.run_warning"));
}
}
},
getMode(mode) {
if (mode === 'MANUAL') {
return this.$t('commons.trigger_mode.manual');
if (mode === "MANUAL") {
return this.$t("commons.trigger_mode.manual");
}
if (mode === 'SCHEDULE') {
return this.$t('commons.trigger_mode.schedule');
if (mode === "SCHEDULE") {
return this.$t("commons.trigger_mode.schedule");
}
if (mode === 'TEST_PLAN_SCHEDULE') {
return this.$t('commons.trigger_mode.schedule');
if (mode === "TEST_PLAN_SCHEDULE") {
return this.$t("commons.trigger_mode.schedule");
}
if (mode === 'API') {
return this.$t('commons.trigger_mode.api');
if (mode === "API") {
return this.$t("commons.trigger_mode.api");
}
if (mode === 'BATCH') {
return this.$t('api_test.automation.batch_execute');
if (mode === "BATCH") {
return this.$t("api_test.automation.batch_execute");
}
if (mode.startsWith('JENKINS')) {
return this.$t('commons.trigger_mode.api');
if (mode.startsWith("JENKINS")) {
return this.$t("commons.trigger_mode.api");
}
return mode;
},
@ -408,8 +550,11 @@ export default {
this.condition.userId = getCurrentUser().id;
this.condition.activeName = this.activeName;
this.loading = loading;
this.result = getTaskList(this.condition, this.currentPage, this.pageSize)
.then(response => {
this.result = getTaskList(
this.condition,
this.currentPage,
this.pageSize
).then((response) => {
this.total = response.data.itemCount;
this.taskData = response.data.listObject;
this.loading = false;
@ -417,24 +562,23 @@ export default {
},
setActiveName() {
if (this.runningData.apiTotal > 0) {
this.activeName = 'API';
this.activeName = "API";
} else if (this.runningData.scenarioTotal > 0) {
this.activeName = 'SCENARIO';
this.activeName = "SCENARIO";
} else if (this.runningData.perfTotal > 0) {
this.activeName = 'PERF';
this.activeName = "PERF";
} else if (this.runningData.uiTotal > 0) {
this.activeName = 'UI';
this.activeName = "UI";
}
},
initCaseHistory(id) {
getCaseData(id)
.then(response => {
getCaseData(id).then((response) => {
this.taskData = response.data;
})
});
},
openHistory(id) {
window.addEventListener("resize", this.listenScreenChange, false);
this.activeName = 'API';
this.activeName = "API";
this.initCaseHistory(id);
this.taskVisible = true;
this.isDebugHistory = true;
@ -443,9 +587,8 @@ export default {
},
openScenarioHistory(id) {
window.addEventListener("resize", this.listenScreenChange, false);
this.activeName = 'SCENARIO';
getScenarioData(id)
.then(response => {
this.activeName = "SCENARIO";
getScenarioData(id).then((response) => {
this.taskData = response.data;
});
this.showType = "SCENARIO";
@ -457,28 +600,39 @@ export default {
const microPorts = JSON.parse(sessionStorage.getItem("micro_ports"));
let apps = [];
if (microPorts.api) {
apps.push({name: 'api', entry: '//127.0.0.1:' + (microPorts.api - 4000)})
apps.push({
name: "api",
entry: "//127.0.0.1:" + (microPorts.api - 4000),
});
}
if (microPorts.performance) {
apps.push({name: 'performance', entry: '//127.0.0.1:' + (microPorts.performance - 4000)})
apps.push({
name: "performance",
entry: "//127.0.0.1:" + (microPorts.performance - 4000),
});
}
if (microPorts.ui) {
apps.push({name: 'ui', entry: '//127.0.0.1:' + (microPorts.ui - 4000)})
apps.push({
name: "ui",
entry: "//127.0.0.1:" + (microPorts.ui - 4000),
});
}
if (process.env.NODE_ENV !== 'development') {
if (process.env.NODE_ENV !== "development") {
//
apps.forEach(app => {
app.entry = app.entry.replace(/127\.0\.0\.1:\d+/g, window.location.host + "/" + app.name);
})
apps.forEach((app) => {
app.entry = app.entry.replace(
/127\.0\.0\.1:\d+/g,
window.location.host + "/" + app.name
);
});
}
prefetchApps(apps);
}
}
},
},
};
</script>
<style scoped>
.align-right {
float: right;
@ -491,8 +645,8 @@ export default {
:deep(.el-drawer__header) {
font-size: 14px;
color: #0a0a0a;
border-bottom: 1px solid #E6E6E6;
background-color: #FFF;
border-bottom: 1px solid #e6e6e6;
background-color: #fff;
margin-bottom: 0px;
padding-top: 6px;
padding-bottom: 6px;
@ -500,7 +654,7 @@ export default {
.global {
color: rgb(96, 98, 102);
font-size: 14px
font-size: 14px;
}
.ms-header-menu {
@ -522,12 +676,11 @@ export default {
}
.ms-task-stop {
color: #F56C6C;
color: #f56c6c;
float: right;
margin-right: 20px;
}
.ms-task-stop {
color: #909399;
}