refactor(测试跟踪): 用例编辑减少loading次数

This commit is contained in:
chenjianxing 2023-03-09 15:43:20 +08:00 committed by jianxing
parent 2d525c0fd2
commit 78bdc78ef6
7 changed files with 84 additions and 93 deletions

View File

@ -53,6 +53,7 @@ import io.metersphere.service.remote.project.TrackIssueTemplateService;
import io.metersphere.service.wapper.TrackProjectService;
import io.metersphere.service.wapper.UserService;
import io.metersphere.utils.DistinctKeyUtil;
import io.metersphere.xpack.track.dto.AttachmentRequest;
import io.metersphere.xpack.track.dto.PlatformStatusDTO;
import io.metersphere.xpack.track.dto.PlatformUser;
import io.metersphere.xpack.track.dto.*;

View File

@ -175,7 +175,7 @@ export default {
},
computed: {
edit() {
return this.editable || this.selfEditable || this.hoverEditable;
return this.editable;
},
},
mounted() {

View File

@ -23,7 +23,7 @@
<!-- 版本历史 v-xpack -->
<mx-version-history
v-xpack
v-if="versionEnable"
v-show="versionEnable"
ref="versionHistory"
:current-id="currentTestCaseInfo.id"
:is-read="readOnly"
@ -240,11 +240,11 @@
:project-id="projectId"
:form="form"
:is-form-alive="isFormAlive"
:isloading="loading"
:is-loading="loading"
:read-only="readOnly || !editable"
:enable-default-module="!caseId"
:public-enable="isPublicShow"
:show-input-tag="showInputTag"
:tree-nodes="treeNodes"
:project-list="projectList"
:custom-field-form="customFieldForm"
:custom-field-rules="customFieldRules"
@ -376,11 +376,9 @@ import {
testCaseEditFollows,
testCaseGetByVersionId,
testCaseDeleteToGc,
getTestCaseNodesByCaseFilter,
getTestCaseByVersionId,
getEditSimpleTestCase,
getSimpleTestCase,
testCaseBatchEdit,
} from "@/api/testCase";
import {
@ -395,7 +393,6 @@ import CaseEditInfoComponent from "./case/CaseEditInfoComponent";
import CaseBaseInfo from "./case/CaseBaseInfo";
import PriorityTableItem from "../../common/tableItems/planview/PriorityTableItem";
import MxVersionHistory from "./common/CaseVersionHistory"
import {buildTree} from "metersphere-frontend/src/model/NodeTree";
import {getProject, versionEnableByProjectId} from "@/api/project";
import {openCaseEdit} from "@/business/case/test-case";
import ListItemDeleteConfirm from "metersphere-frontend/src/components/ListItemDeleteConfirm";
@ -456,7 +453,6 @@ export default {
form: {
name: "",
num: '',
module: "default-module",
nodePath: "/未规划用例",
maintainer: getCurrentUser().id,
priority: "P0",
@ -502,7 +498,7 @@ export default {
trigger: "blur",
},
],
module: [
nodeId: [
{
required: true,
message: this.$t("test_track.case.input_module"),
@ -572,7 +568,6 @@ export default {
isClickAttachmentTab: false,
latestVersionId: "",
hasLatest: false,
treeNodes: [],
currentTestCaseInfo: {},
currentVersionName: "",
versionEnable: false,
@ -754,6 +749,13 @@ export default {
setIsLastedVersion(isLastedVersion) {
this.isLastedVersion = isLastedVersion;
},
async freshTestCase(caseId) {
this.loading = true;
this.routerToEdit(caseId);
this.$nextTick(() => {
this.initEdit();
});
},
async loadTestCase() {
if (localStorage.getItem('projectChangeFlag')) {
@ -761,6 +763,10 @@ export default {
return;
}
if (this.isPublicShow) {
this.resetForm();
}
let initFuc = this.initEdit;
this.loading = true;
@ -791,22 +797,6 @@ export default {
});
}
if (!this.isPublicShow) {
//
getTestCaseNodesByCaseFilter(this.projectId, {})
.then(r => {
this.treeNodes = r.data;
this.treeNodes.forEach(node => {
node.name = node.name === '未规划用例' ? this.$t('api_test.unplanned_case') : node.name
buildTree(node, {path: ''});
});
if (!this.caseId) {
// ID
this.setDefaultModule();
}
});
}
getTestCaseFollow(this.caseId).then((response) => {
this.form.follows = response.data;
for (let i = 0; i < response.data.length; i++) {
@ -993,7 +983,6 @@ export default {
history.pushState(null, null, document.URL);
window.addEventListener("popstate", this.close);
}
this.resetForm();
listenGoBack(this.close);
if (this.caseId) {
@ -1030,11 +1019,6 @@ export default {
callback();
}
},
setDefaultModule() {
if (this.$refs.testCaseBaseInfo) {
this.$refs.testCaseBaseInfo.doSetDefaultModule(this.treeNodes);
}
},
async checkCurrentProject() {
if (this.isPublicShow) {
//
@ -1145,9 +1129,6 @@ export default {
}
this.casePublic = tmp.casePublic;
this.form.module = testCase.nodeId;
this.$refs.testCaseBaseInfo.setDefaultModule();
//
this.customFieldForm = parseCustomField(
this.form,
@ -1222,8 +1203,8 @@ export default {
this.$request(option)
.then((response) => {
if (this.editableState) {
// , reload
location.reload();
// , reload
this.editableState = false;
}
response = response.data;
//
@ -1246,14 +1227,15 @@ export default {
if (this.createVersionId) {
//
this.createVersionId = null;
this.routerToEdit(response.data.id);
this.freshTestCase(response.data.id);
}
} else {
param.id = response.data.id;
this.close();
if (this.saveType === 2) {
//
location.reload();
this.resetForm();
this.initEdit();
} else {
this.isLastedVersion = true;
this.routerToEdit(response.data.id);
@ -1269,9 +1251,6 @@ export default {
},
routerToEdit(id) {
this.$router.push({path: '/track/case/edit/' + id});
setTimeout(() => {
window.location.reload();
}, 300);
},
buildParam() {
let param = {};
@ -1280,7 +1259,6 @@ export default {
}
Object.assign(param, this.form);
param.steps = JSON.stringify(this.form.steps);
param.nodeId = this.form.module;
param.copyCaseId = this.caseId;
param.projectId = this.projectId;
@ -1415,7 +1393,7 @@ export default {
},
_resetForm() {
this.form.name = "";
this.form.module = "";
this.form.nodeId = "";
this.form.type = "";
this.form.method = "";
this.form.maintainer = "";
@ -1540,7 +1518,7 @@ export default {
});
},
checkout(testCase) {
this.routerToEdit(testCase.id);
this.freshTestCase(testCase.id);
},
validateForm() {
let isValidate = true;
@ -1564,12 +1542,12 @@ export default {
for (let i = 0; i < customFieldFormFields.length; i++) {
let customField = customFieldFormFields[i];
if (customField.validateState === "error") {
let name = customField.label || customField.labelFor;
if (this.currentValidateName) {
this.currentValidateName =
this.currentValidateName + "," + customField.label;
this.currentValidateName + "," + name;
} else {
this.currentValidateName =
customField.label || customField.labelFor;
this.currentValidateName = name;
}
}
}

View File

@ -1,6 +1,6 @@
<template>
<!-- 功能用例编辑页面右侧基本信息-->
<div v-loading="isloading" class="case-base-info-form">
<div v-loading="isLoading" class="case-base-info-form">
<el-form ref="caseFrom" :rules="headerRules" :model="form" class="case-padding">
<!-- ID及自定义ID -->
<div class="id-row case-wrap" v-if="!editable || isCustomNum">
@ -92,7 +92,7 @@
<div class="required required-item"></div>
</div>
<div class="side-content">
<div class="side-content" v-if="treeNodes">
<base-edit-item-component
:editable="editable"
:auto-save="!readOnly"
@ -114,7 +114,7 @@
:disabled="readOnly"
:data="treeNodes"
:obj="moduleObj"
:default-key="defaultModuleKey"
:default-key="form.nodeId"
@getValue="setModule"
clearable
checkStrictly
@ -344,6 +344,8 @@ import CustomFiledFormRow from "./CaseCustomFiledFormRow";
import { useStore } from "@/store";
import BaseEditItemComponent from "../BaseEditItemComponent";
import { issueDemandList } from "@/api/issue";
import {getTestCaseNodesByCaseFilter} from "@/api/testCase";
import {buildTree} from "@/business/utils/sdk-utils";
export default {
name: "CaseBaseInfo",
components: {
@ -365,8 +367,7 @@ export default {
this.buildDemandOptions();
},
projectId() {
this.getDemandOptions();
this.getVersionOptions();
this.init();
}
},
data() {
@ -429,7 +430,7 @@ export default {
trigger: "blur",
},
],
module: [
nodeId: [
{
required: true,
message: this.$t("test_track.case.input_module"),
@ -448,7 +449,8 @@ export default {
demandOptions: [],
versionFilters: [],
demandList: [],
defaultModuleKey: ''
defaultModuleKey: '',
treeNodes: null,
};
},
props: {
@ -456,11 +458,10 @@ export default {
editableState: Boolean,
form: Object,
isFormAlive: Boolean,
isloading: Boolean,
isLoading: Boolean,
readOnly: Boolean,
publicEnable: Boolean,
showInputTag: Boolean,
treeNodes: Array,
projectList: Array,
customFieldForm: Object,
customFieldRules: Object,
@ -468,6 +469,7 @@ export default {
defaultOpen: String,
versionEnable: Boolean,
projectId: String,
enableDefaultModule: Boolean
},
computed: {
isCustomNum() {
@ -478,33 +480,54 @@ export default {
}
},
mounted() {
this.getDemandOptions();
this.getVersionOptions();
this.init();
},
methods: {
setDefaultModule() {
this.doSetDefaultModule(this.treeNodes);
init() {
this.getDemandOptions();
this.getVersionOptions();
this.getNodeTrees();
},
doSetDefaultModule(treeNodes) {
if (treeNodes && treeNodes.length > 0) {
if (this.createNodeId) {
//
this.form.module = this.createNodeId;
let node = this.findTreeNode(treeNodes);
this.form.nodePath = node.path;
} else if (this.form.module) {
setDefaultModule(treeNodes) {
if (this.enableDefaultModule) {
// ID
if (treeNodes && treeNodes.length > 0) {
if (this.createNodeId) {
//
this.form.nodeId = this.createNodeId;
let node = this.findTreeNode(treeNodes);
this.form.nodePath = node ? node.path : '';
} else {
// ID
this.form.nodeId = treeNodes[0].id;
this.form.nodePath = treeNodes[0].path;
}
}
} else {
if (this.form.nodeId) {
// nodePath
let node = this.findTreeNode(treeNodes);
this.form.nodePath = node ? node.path : '';
} else {
// ID
this.form.module = treeNodes[0].id;
this.form.nodePath = treeNodes[0].path;
}
this.defaultModuleKey = this.form.module;
this.$refs.moduleTree.setData(this.form.module);
}
},
getNodeTrees() {
if (this.publicEnable || !this.projectId) {
return;
}
getTestCaseNodesByCaseFilter(this.projectId, {})
.then(r => {
let treeNodes = r.data;
treeNodes.forEach(node => {
node.name = node.name === '未规划用例' ? this.$t('api_test.unplanned_case') : node.name
buildTree(node, {path: ''});
});
this.setDefaultModule(treeNodes);
this.treeNodes = treeNodes;
});
},
handleDemandOptionPlatform(data){
if(data.platform){
return data.platform
@ -577,7 +600,7 @@ export default {
findTreeNode(nodeArray) {
for (let i = 0; i < nodeArray.length; i++) {
let node = nodeArray[i];
if (node.id === this.form.module) {
if (node.id === this.form.nodeId) {
return node;
} else {
if (node.children && node.children.length > 0) {
@ -591,7 +614,7 @@ export default {
},
setModule(id, data) {
if (data) {
this.form.module = id;
this.form.nodeId = id;
this.form.nodePath = data.path;
}
},

View File

@ -330,20 +330,6 @@ export default {
setRelationshipGraph(val) {
this.$emit("syncRelationGraphOpen", val);
},
setModuleId(moduleId) {
let data = {
id: getUUID(),
resourceId: getCurrentProjectID(),
moduleId: moduleId,
projectId: getCurrentProjectID(),
fileName: this.dumpFile.name,
attachmentId: this.dumpFile.id,
};
dumpAttachment(data).then(() => {
this.$success(this.$t("organization.integration.successful_operation"));
});
},
getRelatedTest() {
if (this.$refs.relateTest) {
this.$refs.relateTest.initTable();

View File

@ -46,10 +46,11 @@ export default {
},
computed: {
titleNum() {
if (!this.form.num) {
let num = this.isCustomNum ? this.form.customNum : this.form.num;
if (!num) {
return '';
}
return '【' + (this.isCustomNum ? this.form.customNum : this.form.num) + '】';
return `${num}`;
},
isCustomNum() {
return useStore().currentProjectIsCustomNum;

View File

@ -7,6 +7,8 @@ export {hasLicense, hasPermissions, hasPermission} from "metersphere-frontend/sr
export {get, post, downloadFile, fileDownloadGet, fileDownloadPost, fileUpload, generateShareUrl, generateModuleUrl} from "metersphere-frontend/src/plugins/request";
export {CURRENT_LANGUAGE} from "metersphere-frontend/src/utils/constants";
export {CUSTOM_TABLE_HEADER} from "metersphere-frontend/src/utils/default-table-header";
export {buildTree} from "metersphere-frontend/src/model/NodeTree";
export {generateColumnKey, getAdvSearchCustomField} from "metersphere-frontend/src/components/search/custom-component";