refactor(测试跟踪): 功能用例保存问题优化

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

@@ -2,7 +2,6 @@
   <div class="edit-container">
     <div
       class="content"
-      v-custom-click-outside="preSave"
       @mouseleave="mouseLeaveEvent"
     >
       <div class="edit" v-show="edit">

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

@@ -6,7 +6,7 @@
       <div class="edit-header-container">
         <div class="header-content-row">
           <div :class="'case-name'">
-            {{ !editable ? form.name : $t('test_track.case.create_case') }}
+            {{ !editable ? form.name : editableState ? $t('test_track.case.edit_case') : $t('test_track.case.create_case') }}
           </div>
           <div class="case-edit" v-if="!editable">
             <div class="case-level" v-if="!isPublicShow">
@@ -95,24 +95,13 @@
             <div class="label-row">{{ $t("case.followed") }}</div>
           </div>
           <div
-            class="add-public-row head-opt"
-            v-if="!isPublicShow && !casePublic"
-            @click="addPublic"
+            class="follow-row head-opt" v-if="!isPublicShow"
+            @click="toEdit"
           >
             <div class="icon-row">
-              <img src="/assets/module/figma/icon_add-folder_outlined.svg" alt="" />
+              <img src="/assets/module/figma/icon_edit_outlined.svg" alt="" />
             </div>
-            <div class="label-row">{{ $t("case.add_to_public_case") }}</div>
-          </div>
-          <div
-            class="add-public-row head-opt"
-            v-if="!isPublicShow && casePublic"
-            @click="removePublic"
-          >
-            <div class="icon-row">
-              <img src="/assets/module/figma/icon_yes_outlined.svg" alt="" />
-            </div>
-            <div class="label-row">{{ $t("case.added_to_public_case") }}</div>
+            <div class="label-row">{{ $t("commons.edit") }}</div>
           </div>
           <div class="more-row head-opt" v-if="!isPublicShow">
             <div class="icon-row">
@@ -126,6 +115,27 @@
                 :visible-arrow="false"
               >
                 <div class="opt-row">
+                  <div
+                    class="add-public-row sub-opt-row"
+                    v-if="!casePublic"
+                    @click="addPublic"
+                  >
+                    <div class="icon">
+                      <img src="/assets/module/figma/icon_add-folder_outlined.svg" alt="" />
+                    </div>
+                    <div class="title">{{ $t("case.add_to_public_case") }}</div>
+                  </div>
+                  <div
+                    class="add-public-row sub-opt-row"
+                    v-if="!isPublicShow && casePublic"
+                    @click="removePublic"
+                  >
+                    <div class="icon">
+                      <img src="/assets/module/figma/icon_yes_outlined.svg" alt="" />
+                    </div>
+                    <div class="title">{{ $t("case.added_to_public_case") }}</div>
+                  </div>
+                  <div class="split"></div>
                   <div class="copy-row sub-opt-row" @click="copyRow">
                     <div class="icon">
                       <i class="el-icon-copy-document"></i>
@@ -191,6 +201,7 @@
       <div v-loading="loading" class="edit-content-container" :class="{'editable-edit-content-container' : editable}">
         <case-edit-info-component
           :editable="editable"
+          :editable-state="editableState"
           :richTextDefaultOpen="richTextDefaultOpen"
           :formLabelWidth="formLabelWidth"
           :read-only="readOnly"
@@ -219,7 +230,7 @@
               :form="form"
               :is-form-alive="isFormAlive"
               :isloading="loading"
-              :read-only="readOnly"
+              :read-only="readOnly || !editable"
               :public-enable="isPublicShow"
               :show-input-tag="showInputTag"
               :tree-nodes="treeNodes"
@@ -253,7 +264,7 @@
           <!-- 保存并新建 -->
           <div class="save-create-row">
             <el-button
-              v-if="showAddBtn"
+              v-if="showAddBtn && !editableState"
               v-prevent-re-click
               size="small"
               :disabled="readOnly || loading"
@@ -263,7 +274,7 @@
           </div>
           <!-- 保存并添加到公共用例库 -->
           <div
-            v-if="showPublic"
+            v-if="showPublic && !editableState"
             class="save-add-pub-row">
             <el-button size="small"
                        v-prevent-re-click
@@ -272,6 +283,16 @@
               {{ $t("test_track.case.save_add_public") }}
             </el-button>
           </div>
+          <!-- 取消 -->
+          <div class="cancel-row">
+            <el-button
+              v-if="editableState"
+              size="small"
+              :disabled="readOnly || loading"
+              @click="handleCommand(4)">
+              {{ $t("commons.cancel") }}
+            </el-button>
+          </div>
         </template>
       </div>
     </div>
@@ -549,7 +570,8 @@ export default {
       // 3 表示
       saveType: 1,
       projectId: null,
-      createVersionId: null
+      createVersionId: null,
+      editableState: false
     };
   },
   props: {
@@ -603,7 +625,7 @@ export default {
       return !this.caseId || this.isCopy;
     },
     editable() {
-      return this.isAdd;
+      return this.isAdd || this.editableState;
     },
     isCopy() {
       return this.editType == 'copy';
@@ -919,6 +941,10 @@ export default {
       this.saveType = e;
       if (e === 3) {
         this.casePublic = true;
+      } else if (e === 4) {
+        this.editableState = false;
+        this.loadTestCase();
+        return;
       }
       this.saveCase();
     },
@@ -1174,6 +1200,10 @@ export default {
         this.loading = true;
         this.$request(option)
           .then((response) => {
+            if (this.editableState) {
+              this.editableState = false;
+              this.$refs.otherInfo.caseActiveName = 'detail';
+            }
             response = response.data;
             // 保存用例后刷新附件
             this.currentTestCaseInfo.isCopy = false;
@@ -1428,6 +1458,9 @@ export default {
         });
       }
     },
+    toEdit() {
+      this.editableState = true;
+    },
     setSpecialPropForCompare: function (that) {
       that.newData.tags = JSON.parse(that.newData.tags || "{}");
       that.newData.steps = JSON.parse(that.newData.steps || "{}");
@@ -2234,4 +2267,25 @@ export default {
   height: 80px;
   min-width: 120px !important;
 }
+
+.case-step-item-popover .sub-opt-row .icon img {
+  width: 14px;
+  height: 14px;
+}
+
+.case-step-item-popover .add-public-row .icon {
+  color: #646a73;
+  margin-top: 3px;
+}
+.case-step-item-popover .add-public-row .title {
+  color: #1f2329;
+  margin-right: 10px;
+}
+.case-step-item-popover .add-public-row:hover {
+  background-color: rgba(31, 35, 41, 0.1);
+}
+
+.case-step-item-popover .split {
+  width: 140px;
+}
 </style>

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

@@ -173,8 +173,8 @@
               content: isCustomNum ? form.customNum : form.num,
               contentType: 'INPUT',
             }"
-            :readonlyHoverEvent="isCustomNum"
-            :content-click-event="isCustomNum"
+            :readonlyHoverEvent="isCustomNum && !readOnly"
+            :content-click-event="isCustomNum && !readOnly"
             :model="form"
             :rules="rules"
           >

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

@@ -192,7 +192,7 @@
       </div>
 
       <!-- 附件 -->
-      <div class="attachment-row">
+      <div class="attachment-row" v-if="!editableState">
         <div class="attachment-name case-title-wrap">
           <div class="name title-wrap">{{ $t("case.attachment") }}</div>
         </div>
@@ -206,7 +206,7 @@
               :type="type"
               :isCopy="isCopy"
               :copyCaseId="copyCaseId"
-              :readOnly="readOnly"
+              :readOnly="readOnly && editable"
               :projectId="projectId"
               :isClickAttachmentTab="isClickAttachmentTab"
               :isDelete="!isTestPlan"
@@ -266,16 +266,29 @@ export default {
     projectId: String,
     copyCaseId: String,
     isCopy: Boolean,
+    editableState: Boolean
   },
   methods: {
     getUploadFiles() {
+      if (this.$refs.attachmentComp) {
         return this.$refs.attachmentComp.uploadFiles;
+      } else {
+        return [];
+      }
     },
     getRelateFiles() {
+      if (this.$refs.attachmentComp) {
         return this.$refs.attachmentComp.relateFiles;
+      } else {
+        return [];
+      }
     },
     getUnRelateFiles() {
+      if (this.$refs.attachmentComp) {
         return this.$refs.attachmentComp.unRelateFiles;
+      } else {
+        return [];
+      }
     },
     textBlur(options, refName) {
       if (!this.editable && options.autoSave) {

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

@@ -13,7 +13,7 @@
                 <case-detail-component
                   :type="type"
                   :case-id="caseId"
-                  :read-only="readOnly"
+                  :read-only="readOnly || !editable"
                   :project-id="projectId"
                   :is-copy="isCopy"
                   :copy-case-id="copyCaseId"
@@ -157,6 +157,7 @@
           :isClickAttachmentTab="isClickAttachmentTab"
           :isTestPlan="isTestPlan"
           :editable="editable"
+          :editable-state="editableState"
           :form="form"
           :richTextDefaultOpen="richTextDefaultOpen"
           :formLabelWidth="formLabelWidth"
@@ -212,6 +213,8 @@ export default {
     "comments",
     "isClickAttachmentTab",
     "defaultOpen",
+    "edit",
+    "editableState"
   ],
   data() {
     return {

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

@@ -32,7 +32,6 @@
             :rows="defaultRows"
             :placeholder="$t('commons.input_content')"
             @input="resizeTextarea(scope)"
-            @blur="onInputBlur"
           />
         </template>
       </el-table-column>
@@ -52,7 +51,6 @@
             :disabled="readOnly"
             :placeholder="$t('commons.input_content')"
             @input="resizeTextarea(scope)"
-            @blur="onInputBlur"
           />
         </template>
       </el-table-column>
@@ -222,13 +220,6 @@ export default {
         }
       });
       this.form.steps.splice(index + 1, 0, step);
-      if (data.desc && data.result) {
-        clearTimeout(this.TIMER);
-        this.TIMER = setTimeout(() => {
-          this.$emit("saveCase");
-          this.saveCase();
-        }, 500);
-      }
     },
     handleDeleteStep(index, data) {
       if (this.readOnly) {
@@ -243,11 +234,6 @@ export default {
           step.num--;
         }
       });
-      clearTimeout(this.TIMER);
-      this.TIMER = setTimeout(() => {
-        this.$emit("saveCase");
-        this.saveCase();
-      }, 500);
     },
     // 同一行文本框高度保持一致
     resizeTextarea(scope) {