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

test-track/backend/src/main/java/io/metersphere/service/IssuesService.java

@@ -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.*;

test-track/frontend/src/business/case/components/BaseEditItemComponent.vue

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

test-track/frontend/src/business/case/components/TestCaseEdit.vue

@@ -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,
@@ -1223,7 +1204,7 @@ export default {
           .then((response) => {
             if (this.editableState) {
                // 如果是编辑态保存用例, 则直接reload页面
-              location.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 =
+              this.currentValidateName = name;
-                customField.label || customField.labelFor;
             }
           }
         }

test-track/frontend/src/business/case/components/case/CaseBaseInfo.vue

@@ -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.init();
-      this.getVersionOptions();
     }
   },
   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,32 +480,53 @@ export default {
     }
   },
   mounted() {
-    this.getDemandOptions();
+    this.init();
-    this.getVersionOptions();
   },
   methods: {
-    setDefaultModule() {
+    init() {
-      this.doSetDefaultModule(this.treeNodes);
+      this.getDemandOptions();
+      this.getVersionOptions();
+      this.getNodeTrees();
     },
-    doSetDefaultModule(treeNodes) {
+    setDefaultModule(treeNodes) {
+      if (this.enableDefaultModule) {
+        // 创建时设置模块ID
         if (treeNodes && treeNodes.length > 0) {
           if (this.createNodeId) {
             // 创建时设置选中的模块
-          this.form.module = this.createNodeId;
+            this.form.nodeId = this.createNodeId;
-          let node = this.findTreeNode(treeNodes);
-          this.form.nodePath = node.path;
-        } else if (this.form.module) {
-          // 编辑重新设置下 nodePath
             let node = this.findTreeNode(treeNodes);
             this.form.nodePath = node ? node.path : '';
           }  else {
             // 创建不带模块ID，设置成为规划模块
-          this.form.module = treeNodes[0].id;
+            this.form.nodeId = treeNodes[0].id;
             this.form.nodePath = treeNodes[0].path;
           }
-        this.defaultModuleKey = this.form.module;
-        this.$refs.moduleTree.setData(this.form.module);
         }
+      } else {
+        if (this.form.nodeId) {
+          // 编辑重新设置下 nodePath
+          let node = this.findTreeNode(treeNodes);
+          this.form.nodePath = node ? node.path : '';
+        }
+      }
+    },
+    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){
@@ -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;
       }
     },

test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue

@@ -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();

test-track/frontend/src/business/case/components/head/TestCaseEditNameView.vue

@@ -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;

test-track/frontend/src/business/utils/sdk-utils.js

@@ -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";