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=1028390 --user=宋昌昌 【工作台】我的待办/我的关注/我创建的-功能用例-底部换页多切换几次页面-点击用例描述预览-一直加载中转圈 https://www.tapd.cn/55049933/s/1403786
This commit is contained in:
song-cc-rock 2023-08-15 14:20:45 +08:00 committed by 刘瑞斌
parent 7534a5c1ec
commit 2da3939157
1 changed files with 179 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

365
workstation/frontend/src/business/component/CaseTableList.vue
View File

@ -1,31 +1,31 @@
<template> <template>
<div class="card-container"> <div class="card-container">
<ms-table <ms-table
:table-is-loading="loading" :table-is-loading="loading"
:data="page.data" :data="page.data"
:enableSelection="false" :enableSelection="false"
:condition="condition" :condition="condition"
:total="page.total" :total="page.total"
:page-size.sync="page.pageSize" :page-size.sync="page.pageSize"
:screen-height="screenHeight" :screen-height="screenHeight"
:remember-order="true" :remember-order="true"
row-key="id" row-key="id"
:row-order-group-id="projectId" :row-order-group-id="projectId"
:row-order-func="editTestCaseOrder" :row-order-func="editTestCaseOrder"
@handlePageChange="initTableData" @handlePageChange="initTableData"
@handleRowClick="handleEdit" @handleRowClick="handleEdit"
:fields.sync="fields" :fields.sync="fields"
:field-key="tableHeaderKey" :field-key="tableHeaderKey"
@refresh="initTableData" @refresh="initTableData"
ref="table" ref="table"
> >
<ms-table-column <ms-table-column
prop="deleteTime" prop="deleteTime"
sortable sortable
v-if="this.trashEnable" v-if="this.trashEnable"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('commons.delete_time')" :label="$t('commons.delete_time')"
min-width="150px" min-width="150px"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.deleteTime | datetimeFormat }}</span> <span>{{ scope.row.deleteTime | datetimeFormat }}</span>
@ -33,48 +33,48 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="deleteUserId" prop="deleteUserId"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
v-if="this.trashEnable" v-if="this.trashEnable"
:label="$t('commons.delete_user')" :label="$t('commons.delete_user')"
min-width="120" min-width="120"
/> />
<span v-for="item in fields" :key="item.key"> <span v-for="item in fields" :key="item.key">
<ms-table-column <ms-table-column
v-if="!customNum" v-if="!customNum"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
prop="num" prop="num"
sortable sortable
:label="$t('commons.id')" :label="$t('commons.id')"
min-width="80" min-width="80"
/> />
<ms-table-column <ms-table-column
v-if="item.id === 'num' && customNum" v-if="item.id === 'num' && customNum"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
prop="customNum" prop="customNum"
sortable sortable
:label="$t('commons.id')" :label="$t('commons.id')"
min-width="80" min-width="80"
/> />
<ms-table-column <ms-table-column
prop="name" prop="name"
sortable sortable
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('commons.name')" :label="$t('commons.name')"
min-width="120" min-width="120"
/> />
<ms-table-column <ms-table-column
prop="nodePath" prop="nodePath"
:field="item" :field="item"
v-if="isShowAllColumn" v-if="isShowAllColumn"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('test_track.case.module')" :label="$t('test_track.case.module')"
min-width="150px" min-width="150px"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ nodePathMap.get(scope.row.nodeId) }}</span> <span>{{ nodePathMap.get(scope.row.nodeId) }}</span>
@ -82,21 +82,21 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="projectName" prop="projectName"
:field="item" :field="item"
v-if="!isShowAllColumn" v-if="!isShowAllColumn"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('report.project_name')" :label="$t('report.project_name')"
min-width="150px" min-width="150px"
> >
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
:label="$t('project.version.name')" :label="$t('project.version.name')"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
min-width="100px" min-width="100px"
prop="versionId" prop="versionId"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.versionName }}</span> <span>{{ scope.row.versionName }}</span>
@ -104,29 +104,29 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
:label="$t('test_track.case.case_desc')" :label="$t('test_track.case.case_desc')"
prop="desc" prop="desc"
:field="item" :field="item"
min-width="120px" min-width="120px"
v-if="isShowAllColumn" v-if="isShowAllColumn"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-link <el-link
@click.stop="getCase(scope.row.id)" @click.stop="getCase(scope.row.id)"
style="color: #783887" style="color: #783887"
>{{ $t("commons.preview") }}</el-link >{{ $t("commons.preview") }}</el-link
> >
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
sortable sortable
prop="createUser" prop="createUser"
min-width="120" min-width="120"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('commons.create_user')" :label="$t('commons.create_user')"
:filters="userFilter" :filters="userFilter"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
{{ getCreateUserName(scope.row.createUser) }} {{ getCreateUserName(scope.row.createUser) }}
@ -134,47 +134,47 @@
</ms-table-column> </ms-table-column>
<test-case-review-status-table-item <test-case-review-status-table-item
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
/> />
<test-plan-case-status-table-item <test-plan-case-status-table-item
prop="lastExecuteResult" prop="lastExecuteResult"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
/> />
<ms-table-column <ms-table-column
prop="tags" prop="tags"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('commons.tag')" :label="$t('commons.tag')"
min-width="80" min-width="80"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<ms-tag <ms-tag
v-for="(itemName, index) in scope.row.tags" v-for="(itemName, index) in scope.row.tags"
:key="index" :key="index"
type="success" type="success"
effect="plain" effect="plain"
:show-tooltip=" :show-tooltip="
scope.row.tags.length === 1 && itemName.length * 12 <= 80 scope.row.tags.length === 1 && itemName.length * 12 <= 80
" "
:content="itemName" :content="itemName"
style="margin-left: 0px; margin-right: 2px" style="margin-left: 0px; margin-right: 2px"
/> />
<span /> <span/>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="updateTime" prop="updateTime"
sortable sortable
v-if="isShowAllColumn" v-if="isShowAllColumn"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('commons.update_time')" :label="$t('commons.update_time')"
min-width="150px" min-width="150px"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.updateTime | datetimeFormat }}</span> <span>{{ scope.row.updateTime | datetimeFormat }}</span>
@ -182,12 +182,12 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="createTime" prop="createTime"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="$t('commons.create_time')" :label="$t('commons.create_time')"
sortable sortable
min-width="150px" min-width="150px"
> >
<template v-slot:default="scope"> <template v-slot:default="scope">
<span>{{ scope.row.createTime | datetimeFormat }}</span> <span>{{ scope.row.createTime | datetimeFormat }}</span>
@ -195,19 +195,19 @@
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
v-for="field in testCaseTemplate.customFields" v-for="field in testCaseTemplate.customFields"
:key="field.id" :key="field.id"
:filters="getCustomFieldFilter(field)" :filters="getCustomFieldFilter(field)"
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
:label="field.system ? $t(systemFiledMap[field.name]) : field.name" :label="field.system ? $t(systemFiledMap[field.name]) : field.name"
:min-width="120" :min-width="120"
:prop="field.name" :prop="field.name"
> >
<template v-slot="scope"> <template v-slot="scope">
<span v-if="field.name === '用例等级'"> <span v-if="field.name === '用例等级'">
<priority-table-item <priority-table-item
:value=" :value="
getCustomFieldValue(scope.row, field) getCustomFieldValue(scope.row, field)
? getCustomFieldValue(scope.row, field) ? getCustomFieldValue(scope.row, field)
: scope.row.priority : scope.row.priority
@ -223,18 +223,18 @@
</ms-table> </ms-table>
<ms-table-pagination <ms-table-pagination
:change="initTableData" :change="initTableData"
:current-page.sync="page.currentPage" :current-page.sync="page.currentPage"
:page-size.sync="page.pageSize" :page-size.sync="page.pageSize"
:total="page.total" :total="page.total"
/> />
<test-case-preview ref="testCasePreview" :loading="rowCaseResult.loading" /> <test-case-preview ref="testCasePreview" :loading="rowCaseResult.loading"/>
</div> </div>
</template> </template>
<script> <script>
import { TEST_CASE_LIST } from "metersphere-frontend/src/utils/constants"; import {TEST_CASE_LIST} from "metersphere-frontend/src/utils/constants";
import { import {
getCustomFieldFilter, getCustomFieldFilter,
@ -247,39 +247,31 @@ import {
parseCustomFilesForList, parseCustomFilesForList,
} from "metersphere-frontend/src/utils/tableUtils"; } from "metersphere-frontend/src/utils/tableUtils";
import HeaderLabelOperate from "metersphere-frontend/src/components/head/HeaderLabelOperate"; import HeaderLabelOperate from "metersphere-frontend/src/components/head/HeaderLabelOperate";
import { import {getCurrentProjectID, getCurrentUserId,} from "metersphere-frontend/src/utils/token";
getCurrentProjectID,
getCurrentUserId,
} from "metersphere-frontend/src/utils/token";
import { getProjectMember, getProjectMemberUserFilter } from "@/api/user"; import {getProjectMember, getProjectMemberUserFilter} from "@/api/user";
import MsTable from "metersphere-frontend/src/components/table/MsTable"; import MsTable from "metersphere-frontend/src/components/table/MsTable";
import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn"; import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
import { SYSTEM_FIELD_NAME_MAP } from "metersphere-frontend/src/utils/table-constants"; import {SYSTEM_FIELD_NAME_MAP} from "metersphere-frontend/src/utils/table-constants";
import { import {editTestCaseOrder, getTestCaseListById, getTestCaseStep, testCaseList,} from "@/api/test-case";
editTestCaseOrder,
getTestCaseListById,
getTestCaseStep,
testCaseList,
} from "@/api/test-case";
import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination"; import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
import { TEST_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components"; import {TEST_CASE_CONFIGS} from "metersphere-frontend/src/components/search/search-components";
import PriorityTableItem from "@/business/module/track/PriorityTableItem"; import PriorityTableItem from "@/business/module/track/PriorityTableItem";
import StatusTableItem from "@/business/module/track/StatusTableItem"; import StatusTableItem from "@/business/module/track/StatusTableItem";
import MsTag from "metersphere-frontend/src/components/MsTag"; import MsTag from "metersphere-frontend/src/components/MsTag";
import { hasLicense } from "metersphere-frontend/src/utils/permission"; import {hasLicense} from "metersphere-frontend/src/utils/permission";
import { getProject } from "@/api/project"; import {getProject} from "@/api/project";
import { getProjectVersions } from "metersphere-frontend/src/api/version"; import {getProjectVersions} from "metersphere-frontend/src/api/version";
import useStore, { useApiStore } from "@/store"; import useStore, {useApiStore} from "@/store";
import { getTestTemplate } from "metersphere-frontend/src/api/custom-field-template"; import {getTestTemplate} from "metersphere-frontend/src/api/custom-field-template";
import { getAdvSearchCustomField } from "metersphere-frontend/src/components/search/custom-component"; import {getAdvSearchCustomField} from "metersphere-frontend/src/components/search/custom-component";
import TestCaseReviewStatusTableItem from "@/business/othermodule/track/TestCaseReviewStatusTableItem"; import TestCaseReviewStatusTableItem from "@/business/othermodule/track/TestCaseReviewStatusTableItem";
import TestPlanCaseStatusTableItem from "@/business/othermodule/track/TestPlanCaseStatusTableItem"; import TestPlanCaseStatusTableItem from "@/business/othermodule/track/TestPlanCaseStatusTableItem";
import TestCasePreview from "@/business/othermodule/track/TestCasePreview"; import TestCasePreview from "@/business/othermodule/track/TestCasePreview";
import { parseTag } from "metersphere-frontend/src/utils"; import {parseTag} from "metersphere-frontend/src/utils";
import { getCustomFieldValueForTrack } from "@/business/component/js/table-head-util"; import {getCustomFieldValueForTrack} from "@/business/component/js/table-head-util";
import {getTestCaseNodes} from "@/api/test-case-node"; import {getTestCaseNodes} from "@/api/test-case-node";
import {buildTree, buildNodePath} from "metersphere-frontend/src/model/NodeTree"; import {buildNodePath, buildTree} from "metersphere-frontend/src/model/NodeTree";
export default { export default {
name: "TableList", name: "TableList",
@ -313,18 +305,18 @@ export default {
loading: false, loading: false,
versionFilters: [], versionFilters: [],
statusFilters: [ statusFilters: [
{ text: this.$t("test_track.case.status_prepare"), value: "Prepare" }, {text: this.$t("test_track.case.status_prepare"), value: "Prepare"},
{ text: this.$t("test_track.case.status_running"), value: "Underway" }, {text: this.$t("test_track.case.status_running"), value: "Underway"},
{ {
text: this.$t("test_track.case.status_finished"), text: this.$t("test_track.case.status_finished"),
value: "Completed", value: "Completed",
}, },
], ],
priorityFilters: [ priorityFilters: [
{ text: "P0", value: "P0" }, {text: "P0", value: "P0"},
{ text: "P1", value: "P1" }, {text: "P1", value: "P1"},
{ text: "P2", value: "P2" }, {text: "P2", value: "P2"},
{ text: "P3", value: "P3" }, {text: "P3", value: "P3"},
], ],
typeArr: [], typeArr: [],
valueArr: {}, valueArr: {},
@ -407,7 +399,7 @@ export default {
delete this.condition.userId; delete this.condition.userId;
} }
this.condition.combine = { this.condition.combine = {
followPeople: { operator: "current user", value: "current user" }, followPeople: {operator: "current user", value: "current user"},
}; };
} else if (this.isCreation) { } else if (this.isCreation) {
if (this.condition.filters) { if (this.condition.filters) {
@ -422,7 +414,7 @@ export default {
if (this.condition.filters) { if (this.condition.filters) {
this.condition.filters.status = ["Trash"]; this.condition.filters.status = ["Trash"];
} else { } else {
this.condition.filters = { status: ["Trash"] }; this.condition.filters = {status: ["Trash"]};
} }
} }
this.condition.versionId = this.currentVersion; this.condition.versionId = this.currentVersion;
@ -454,7 +446,7 @@ export default {
if (this.condition.filters) { if (this.condition.filters) {
this.condition.filters.status = []; this.condition.filters.status = [];
} else { } else {
this.condition.filters = { status: [] }; this.condition.filters = {status: []};
} }
} }
initCondition(this.condition, false); initCondition(this.condition, false);
@ -469,7 +461,7 @@ export default {
if (this.condition.filters) { if (this.condition.filters) {
this.condition.filters.status = ["Trash"]; this.condition.filters.status = ["Trash"];
} else { } else {
this.condition.filters = { status: ["Trash"] }; this.condition.filters = {status: ["Trash"]};
} }
this.condition.moduleIds = []; this.condition.moduleIds = [];
initCondition(this.condition, false); initCondition(this.condition, false);
@ -478,7 +470,7 @@ export default {
if (this.condition.filters) { if (this.condition.filters) {
this.condition.filters.status = []; this.condition.filters.status = [];
} else { } else {
this.condition.filters = { status: [] }; this.condition.filters = {status: []};
} }
} }
}, },
@ -506,17 +498,17 @@ export default {
let template = data[1]; let template = data[1];
this.testCaseTemplate = template; this.testCaseTemplate = template;
this.fields = getTableHeaderWithCustomFields( this.fields = getTableHeaderWithCustomFields(
this.tableHeaderKey, this.tableHeaderKey,
this.testCaseTemplate.customFields, this.testCaseTemplate.customFields,
this.members this.members
); );
// todo 处理高级搜索自定义字段部分 // todo 处理高级搜索自定义字段部分
this.condition.components = this.condition.components.filter( this.condition.components = this.condition.components.filter(
(item) => item.custom !== true (item) => item.custom !== true
); );
let comp = getAdvSearchCustomField( let comp = getAdvSearchCustomField(
this.condition, this.condition,
this.testCaseTemplate.customFields this.testCaseTemplate.customFields
); );
// 系统字段国际化处理 // 系统字段国际化处理
comp.filter((element) => { comp.filter((element) => {
@ -558,24 +550,24 @@ export default {
return; return;
} }
getTestCaseNodes(this.projectId) getTestCaseNodes(this.projectId)
.then((r) => { .then((r) => {
let treeNodes = r.data; let treeNodes = r.data;
treeNodes.forEach(node => { treeNodes.forEach(node => {
node.name = node.name === '未规划用例' ? this.$t('api_test.unplanned_case') : node.name node.name = node.name === '未规划用例' ? this.$t('api_test.unplanned_case') : node.name
buildTree(node, {path: ''}); buildTree(node, {path: ''});
});
let moduleOptions = [];
treeNodes.forEach(node => {
buildNodePath(node, {path: ''}, moduleOptions);
});
let map = new Map();
if (moduleOptions) {
moduleOptions.forEach((item) => {
map.set(item.id, item.path);
}); });
} let moduleOptions = [];
this.nodePathMap = map; treeNodes.forEach(node => {
}); buildNodePath(node, {path: ''}, moduleOptions);
});
let map = new Map();
if (moduleOptions) {
moduleOptions.forEach((item) => {
map.set(item.id, item.path);
});
}
this.nodePathMap = map;
});
}, },
setTestCaseDefaultValue(template) { setTestCaseDefaultValue(template) {
let testCaseDefaultValue = {}; let testCaseDefaultValue = {};
@ -712,8 +704,8 @@ export default {
this.$emit("setCondition", this.condition); this.$emit("setCondition", this.condition);
this.loading = true; this.loading = true;
testCaseList( testCaseList(
{ pageNum: this.page.currentPage, pageSize: this.page.pageSize }, {pageNum: this.page.currentPage, pageSize: this.page.pageSize},
this.condition this.condition
).then((response) => { ).then((response) => {
this.loading = false; this.loading = false;
let data = response.data; let data = response.data;
@ -728,8 +720,8 @@ export default {
} }
if (nodePath.startsWith("/未规划用例", "0")) { if (nodePath.startsWith("/未规划用例", "0")) {
item.nodePath = nodePath.replaceAll( item.nodePath = nodePath.replaceAll(
"/未规划用例", "/未规划用例",
"/" + this.$t("api_test.unplanned_case") "/" + this.$t("api_test.unplanned_case")
); );
} }
}); });
@ -763,6 +755,7 @@ export default {
this.rowCaseResult.loading = true; this.rowCaseResult.loading = true;
getTestCaseStep(id).then((response) => { getTestCaseStep(id).then((response) => {
this.rowCaseResult.loading = false;
this.rowCase = response.data; this.rowCase = response.data;
this.rowCase.steps = JSON.parse(this.rowCase.steps); this.rowCase.steps = JSON.parse(this.rowCase.steps);
if (!this.rowCase.steps || this.rowCase.length < 1) { if (!this.rowCase.steps || this.rowCase.length < 1) {
@ -784,7 +777,7 @@ export default {
if (hasLicense()) { if (hasLicense()) {
getProjectVersions(getCurrentProjectID()).then((response) => { getProjectVersions(getCurrentProjectID()).then((response) => {
this.versionFilters = response.data.map((u) => { this.versionFilters = response.data.map((u) => {
return { text: u.name, value: u.id }; return {text: u.name, value: u.id};
}); });
}); });
} }