diff --git a/test-track/frontend/src/business/issue/IssueEditDetail.vue b/test-track/frontend/src/business/issue/IssueEditDetail.vue
index eb2fde8d7b..0a4f804a9e 100644
--- a/test-track/frontend/src/business/issue/IssueEditDetail.vue
+++ b/test-track/frontend/src/business/issue/IssueEditDetail.vue
@@ -1,43 +1,121 @@
 <template>
-  <el-main v-loading="result.loading" class="container" :style="isCaseEdit ? '' : 'height: calc(100vh - 42px)'">
+  <el-main
+    v-loading="result.loading"
+    class="container"
+    :style="isCaseEdit ? '' : 'height: calc(100vh - 42px)'"
+  >
     <el-scrollbar>
-      <el-form :model="form" :rules="rules" label-position="right" label-width="80px" ref="form">
-
-        <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
-        <el-form-item v-if="!enableThirdPartTemplate" :label="$t('commons.title')" prop="title">
+      <el-form
+        :model="form"
+        :rules="rules"
+        label-position="right"
+        label-width="80px"
+        ref="form"
+      >
+        <ms-form-divider :title="$t('test_track.plan_view.base_info')" />
+        <el-form-item
+          v-if="!enableThirdPartTemplate"
+          :label="$t('commons.title')"
+          prop="title"
+        >
           <el-row>
             <el-col :span="22">
-              <el-input v-model="form.title" autocomplete="off" class="top-input-class"></el-input>
+              <el-input
+                v-model="form.title"
+                autocomplete="off"
+                class="top-input-class"
+              ></el-input>
             </el-col>
             <el-col :span="2">
-              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
-                <i class="el-icon-star-off"
-                   style="color: #783987; font-size: 25px; margin-left: 15px;cursor: pointer;position: relative;top: 5px"
-                   @click="saveFollow"/>
+              <el-tooltip
+                :content="$t('commons.follow')"
+                placement="bottom"
+                effect="dark"
+                v-if="!showFollow"
+              >
+                <i
+                  class="el-icon-star-off"
+                  style="
+                    color: #783987;
+                    font-size: 25px;
+                    margin-left: 15px;
+                    cursor: pointer;
+                    position: relative;
+                    top: 5px;
+                  "
+                  @click="saveFollow"
+                />
               </el-tooltip>
-              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
-                <i class="el-icon-star-on"
-                   style="color: #783987; font-size: 28px; margin-left: 15px; cursor: pointer;position: relative;top: 5px"
-                   @click="saveFollow"/>
+              <el-tooltip
+                :content="$t('commons.cancel')"
+                placement="bottom"
+                effect="dark"
+                v-if="showFollow"
+              >
+                <i
+                  class="el-icon-star-on"
+                  style="
+                    color: #783987;
+                    font-size: 28px;
+                    margin-left: 15px;
+                    cursor: pointer;
+                    position: relative;
+                    top: 5px;
+                  "
+                  @click="saveFollow"
+                />
               </el-tooltip>
             </el-col>
           </el-row>
         </el-form-item>
         <div v-else style="text-align: right; margin-bottom: 5px">
-          <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
-            <i class="el-icon-star-off"
-               style="color: #783987; font-size: 25px; margin-left: 15px;cursor: pointer;position: relative;top: 5px"
-               @click="saveFollow"/>
+          <el-tooltip
+            :content="$t('commons.follow')"
+            placement="bottom"
+            effect="dark"
+            v-if="!showFollow"
+          >
+            <i
+              class="el-icon-star-off"
+              style="
+                color: #783987;
+                font-size: 25px;
+                margin-left: 15px;
+                cursor: pointer;
+                position: relative;
+                top: 5px;
+              "
+              @click="saveFollow"
+            />
           </el-tooltip>
-          <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
-            <i class="el-icon-star-on"
-               style="color: #783987; font-size: 28px; margin-left: 15px; cursor: pointer;position: relative;top: 5px"
-               @click="saveFollow"/>
+          <el-tooltip
+            :content="$t('commons.cancel')"
+            placement="bottom"
+            effect="dark"
+            v-if="showFollow"
+          >
+            <i
+              class="el-icon-star-on"
+              style="
+                color: #783987;
+                font-size: 28px;
+                margin-left: 15px;
+                cursor: pointer;
+                position: relative;
+                top: 5px;
+              "
+              @click="saveFollow"
+            />
           </el-tooltip>
         </div>
 
         <!-- 自定义字段 -->
-        <el-form :model="customFieldForm" :rules="customFieldRules" ref="customFieldForm" class="case-form">
+        <el-form
+          :model="customFieldForm"
+          :rules="customFieldRules"
+          ref="customFieldForm"
+          class="case-form"
+        >
           <custom-filed-form-item
             :form="customFieldForm"
             :default-open="richTextDefaultOpen"
@@ -51,12 +129,24 @@
 
         <el-row v-if="platformTransitions">
           <el-col :span="8">
-            <el-form-item :label-width="formLabelWidth" :label="$t('test_track.issue.platform_status')"
-                          prop="platformStatus">
-              <el-select v-model="form.platformStatus" filterable
-                         :placeholder="$t('test_track.issue.please_choose_platform_status')">
-                <el-option v-for="(transition, index) in platformTransitions" :key="index" :label="transition.label"
-                           :value="transition.value"/>
+            <el-form-item
+              :label-width="formLabelWidth"
+              :label="$t('test_track.issue.platform_status')"
+              prop="platformStatus"
+            >
+              <el-select
+                v-model="form.platformStatus"
+                filterable
+                :placeholder="
+                  $t('test_track.issue.please_choose_platform_status')
+                "
+              >
+                <el-option
+                  v-for="(transition, index) in platformTransitions"
+                  :key="index"
+                  :label="transition.label"
+                  :value="transition.value"
+                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -67,34 +157,63 @@
           :title="$t('custom_field.issue_content')"
           :data="form"
           :default-open="richTextDefaultOpen"
-          prop="description"/>
+          prop="description"
+        />
 
         <el-row v-if="!enableThirdPartTemplate" class="custom-field-row">
           <el-col :span="8" v-if="hasTapdId">
-            <el-form-item :label-width="formLabelWidth" :label="$t('test_track.issue.tapd_current_owner')"
-                          prop="tapdUsers">
-              <el-select v-model="form.tapdUsers" multiple filterable
-                         :placeholder="$t('test_track.issue.please_choose_current_owner')">
-                <el-option v-for="(userInfo, index) in tapdUsers" :key="index" :label="userInfo.user"
-                           :value="userInfo.user"/>
+            <el-form-item
+              :label-width="formLabelWidth"
+              :label="$t('test_track.issue.tapd_current_owner')"
+              prop="tapdUsers"
+            >
+              <el-select
+                v-model="form.tapdUsers"
+                multiple
+                filterable
+                :placeholder="
+                  $t('test_track.issue.please_choose_current_owner')
+                "
+              >
+                <el-option
+                  v-for="(userInfo, index) in tapdUsers"
+                  :key="index"
+                  :label="userInfo.user"
+                  :value="userInfo.user"
+                />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
 
-        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <ms-form-divider :title="$t('test_track.case.other_info')" />
 
-        <el-tabs class="other-info-tabs" v-loading="result.loading" v-model="tabActiveName">
-          <el-tab-pane :label="$t('test_track.review_view.relevance_case')" name="relateTestCase">
-            <el-form-item v-if="!isCaseEdit" style="margin-left: -80px">
-              <test-case-issue-list :issues-id="form.id"
-                                    ref="testCaseIssueList"/>
+        <el-tabs
+          class="other-info-tabs"
+          v-loading="result.loading"
+          v-model="tabActiveName"
+        >
+          <el-tab-pane
+            :label="$t('test_track.review_view.relevance_case')"
+            name="relateTestCase"
+          >
+            <el-form-item
+              v-if="!isCaseEdit && tabActiveName === 'relateTestCase'"
+              style="margin-left: -80px"
+            >
+              <test-case-issue-list
+                :issues-id="form.id"
+                ref="testCaseIssueList"
+              />
             </el-form-item>
           </el-tab-pane>
 
-          <el-tab-pane :label="$t('test_track.case.attachment')" name="attachment">
+          <el-tab-pane
+            :label="$t('test_track.case.attachment')"
+            name="attachment"
+          >
             <el-row>
-              <el-col :span="22" style="margin-bottom: 10px;">
+              <el-col :span="22" style="margin-bottom: 10px">
                 <div class="upload-default" @click.stop>
                   <el-popover placement="right" trigger="hover">
                     <div>
@@ -109,64 +228,91 @@
                         :on-exceed="handleExceed"
                         :on-success="handleSuccess"
                         :on-error="handleError"
-                        :disabled="readOnly">
+                        :disabled="readOnly"
+                      >
                         <el-button :disabled="readOnly" type="text">
-                          {{ $t('permission.project_file.local_upload') }}
+                          {{ $t("permission.project_file.local_upload") }}
                         </el-button>
                       </el-upload>
                     </div>
-                    <el-button type="text" :disabled="readOnly" @click="associationFile">
-                      {{ $t('permission.project_file.associated_files') }}
+                    <el-button
+                      type="text"
+                      :disabled="readOnly"
+                      @click="associationFile"
+                    >
+                      {{ $t("permission.project_file.associated_files") }}
                     </el-button>
-                    <i class="el-icon-plus" slot="reference"/>
+                    <i class="el-icon-plus" slot="reference" />
                   </el-popover>
                 </div>
                 <div class="local-upload-tips">
-                  <span slot="tip" class="el-upload__tip"> {{ $t('test_track.case.upload_tip') }} </span>
+                  <span slot="tip" class="el-upload__tip">
+                    {{ $t("test_track.case.upload_tip") }}
+                  </span>
                 </div>
               </el-col>
             </el-row>
             <el-row style="margin-top: 10px">
               <el-col :span="22">
-                <test-case-attachment :table-data="tableData"
-                                      :read-only="readOnly"
-                                      :is-delete="isDelete"
-                                      :is-copy="type === 'copy'"
-                                      @handleDelete="handleDelete"
-                                      @handleCancel="handleCancel"
-                                      @handleUnRelate="handleUnRelate"
-                                      @handleDump="handleDump"/>
+                <test-case-attachment
+                  :table-data="tableData"
+                  :read-only="readOnly"
+                  :is-delete="isDelete"
+                  :is-copy="type === 'copy'"
+                  @handleDelete="handleDelete"
+                  @handleCancel="handleCancel"
+                  @handleUnRelate="handleUnRelate"
+                  @handleDump="handleDump"
+                />
               </el-col>
             </el-row>
           </el-tab-pane>
 
           <el-tab-pane :label="$t('test_track.review.comment')" name="comment">
-            <el-tooltip class="item-tabs" effect="dark" :content="$t('test_track.review.comment')" placement="top-start"
-                        slot="label">
-                  <span>
-                    {{ $t('test_track.review.comment') }}
-                    <div class="el-step__icon is-text ms-api-col ms-header" v-if="comments && comments.length>0">
-                      <div class="el-step__icon-inner">{{ comments.length }}</div>
-                    </div>
-                  </span>
+            <el-tooltip
+              class="item-tabs"
+              effect="dark"
+              :content="$t('test_track.review.comment')"
+              placement="top-start"
+              slot="label"
+            >
+              <span>
+                {{ $t("test_track.review.comment") }}
+                <div
+                  class="el-step__icon is-text ms-api-col ms-header"
+                  v-if="comments && comments.length > 0"
+                >
+                  <div class="el-step__icon-inner">{{ comments.length }}</div>
+                </div>
+              </span>
             </el-tooltip>
-            <el-row style="margin-top: 10px" v-if="type!=='add'">
-              <el-col :span="20" :offset="1">{{ $t('test_track.review.comment') }}:
-                <el-button icon="el-icon-plus" type="mini" @click="openComment"></el-button>
+            <el-row style="margin-top: 10px" v-if="type !== 'add'">
+              <el-col :span="20" :offset="1"
+                >{{ $t("test_track.review.comment") }}:
+                <el-button
+                  icon="el-icon-plus"
+                  type="mini"
+                  @click="openComment"
+                ></el-button>
               </el-col>
             </el-row>
             <el-row style="margin-top: 10px">
               <el-col :span="20" :offset="1">
-
-                <review-comment-item v-for="(comment,index) in comments"
-                                     :key="index"
-                                     :comment="comment"
-                                     @refresh="getComments" api-url="/issues"/>
+                <review-comment-item
+                  v-for="(comment, index) in comments"
+                  :key="index"
+                  :comment="comment"
+                  @refresh="getComments"
+                  api-url="/issues"
+                />
                 <div v-if="comments.length === 0" style="text-align: center">
-                  <i class="el-icon-chat-line-square" style="font-size: 15px;color: #8a8b8d;">
-                      <span style="font-size: 15px; color: #8a8b8d;">
-                        {{ $t('test_track.comment.no_comment') }}
-                      </span>
+                  <i
+                    class="el-icon-chat-line-square"
+                    style="font-size: 15px; color: #8a8b8d"
+                  >
+                    <span style="font-size: 15px; color: #8a8b8d">
+                      {{ $t("test_track.comment.no_comment") }}
+                    </span>
                   </i>
                 </div>
               </el-col>
@@ -174,33 +320,49 @@
           </el-tab-pane>
         </el-tabs>
 
-        <issue-comment :issues-id="form.id"
-                       @getComments="getComments"
-                       ref="issueComment"/>
-        <ms-file-metadata-list v-if="hasProjectFilePermission" ref="metadataList" @checkRows="checkRows"/>
-        <ms-file-batch-move ref="module" @setModuleId="setModuleId"/>
+        <issue-comment
+          :issues-id="form.id"
+          @getComments="getComments"
+          ref="issueComment"
+        />
+        <ms-file-metadata-list
+          v-if="hasProjectFilePermission"
+          ref="metadataList"
+          @checkRows="checkRows"
+        />
+        <ms-file-batch-move ref="module" @setModuleId="setModuleId" />
       </el-form>
     </el-scrollbar>
   </el-main>
 </template>
 
 <script>
-
 import TemplateComponentEditHeader from "@/business/plan/view/comonents/report/TemplateComponentEditHeader";
 import MsFormDivider from "metersphere-frontend/src/components/MsFormDivider";
 import FormRichTextItem from "metersphere-frontend/src/components/FormRichTextItem";
-import {buildCustomFields, parseCustomField, parseCustomFieldForId} from "metersphere-frontend/src/utils/custom_field";
+import {
+  buildCustomFields,
+  parseCustomField,
+  parseCustomFieldForId,
+} from "metersphere-frontend/src/utils/custom_field";
 import CustomFiledComponent from "metersphere-frontend/src/components/template/CustomFiledComponent";
 import TestCaseIssueList from "@/business/issue/TestCaseIssueList";
 import IssueEditDetail from "@/business/issue/IssueEditDetail";
-import {byteToSize, getTypeByFileName, getUUID} from "metersphere-frontend/src/utils";
+import {
+  byteToSize,
+  getTypeByFileName,
+  getUUID,
+} from "metersphere-frontend/src/utils";
 import {
   getCurrentProjectID,
   getCurrentUser,
   getCurrentWorkspaceId,
-  getCurrentUserId
-} from "metersphere-frontend/src/utils/token"
-import {hasLicense, hasPermission} from "metersphere-frontend/src/utils/permission";
+  getCurrentUserId,
+} from "metersphere-frontend/src/utils/token";
+import {
+  hasLicense,
+  hasPermission,
+} from "metersphere-frontend/src/utils/permission";
 import {
   enableThirdPartTemplate,
   getIssuePartTemplateWithProject,
@@ -208,20 +370,24 @@ import {
   saveFollow,
   getFollow,
   getComments,
-  getTapdUser, getPlatformTransitions, getPlatformFormOption, getTapdCurrentOwner
+  getTapdUser,
+  getPlatformTransitions,
+  getPlatformFormOption,
+  getTapdCurrentOwner,
 } from "@/api/issue";
 import {
   uploadIssueAttachment,
   attachmentList,
   deleteIssueAttachment,
   unrelatedIssueAttachment,
-  relatedIssueAttachment, dumpAttachment
+  relatedIssueAttachment,
+  dumpAttachment,
 } from "@/api/attachment";
 import CustomFiledFormItem from "metersphere-frontend/src/components/form/CustomFiledFormItem";
 import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
 import IssueComment from "@/business/issue/IssueComment";
 import ReviewCommentItem from "@/business/review/commom/ReviewCommentItem";
-import {TokenKey} from "metersphere-frontend/src/utils/constants";
+import { TokenKey } from "metersphere-frontend/src/utils/constants";
 import TestCaseAttachment from "@/business/case/components/TestCaseAttachment";
 import axios from "axios";
 import MsFileMetadataList from "metersphere-frontend/src/components/environment/commons/variable/QuoteFileList";
@@ -247,9 +413,9 @@ export default {
   data() {
     return {
       type: null,
-      issueId: '',
+      issueId: "",
       result: {
-        loading: false
+        loading: false,
       },
       relateFields: [],
       showFollow: false,
@@ -259,22 +425,34 @@ export default {
       customFieldRules: {},
       rules: {
         title: [
-          {required: true, message: this.$t('commons.please_fill_content'), trigger: 'blur'},
-          {max: 300, message: this.$t('test_track.length_less_than') + '300', trigger: 'blur'}
+          {
+            required: true,
+            message: this.$t("commons.please_fill_content"),
+            trigger: "blur",
+          },
+          {
+            max: 300,
+            message: this.$t("test_track.length_less_than") + "300",
+            trigger: "blur",
+          },
         ],
         description: [
-          {required: true, message: this.$t('commons.please_fill_content'), trigger: 'blur'},
-        ]
+          {
+            required: true,
+            message: this.$t("commons.please_fill_content"),
+            trigger: "blur",
+          },
+        ],
       },
-      url: '',
+      url: "",
       form: {
-        title: '',
-        description: '',
+        title: "",
+        description: "",
         creator: null,
         remark: null,
         tapdUsers: [],
         platformStatus: null,
-        copyIssueId: ''
+        copyIssueId: "",
       },
       tapdUsers: [],
       hasTapdId: false,
@@ -316,8 +494,8 @@ export default {
         preview: false, // 预览
       },
       comments: [],
-      richTextDefaultOpen: 'preview',
-      tabActiveName: 'relateTestCase',
+      richTextDefaultOpen: "preview",
+      tabActiveName: "relateTestCase",
       fileList: [],
       tableData: [],
       readOnly: false,
@@ -328,7 +506,7 @@ export default {
       unRelateFiles: [],
       filterCopyFiles: [],
       dumpFile: {},
-      enableThirdPartTemplate: false
+      enableThirdPartTemplate: false,
     };
   },
   props: {
@@ -336,7 +514,7 @@ export default {
       type: Boolean,
       default() {
         return false;
-      }
+      },
     },
     caseId: String,
     planId: String,
@@ -352,12 +530,12 @@ export default {
     },
     hasProjectFilePermission() {
       return hasPermission("PROJECT_FILE:READ");
-    }
+    },
   },
   watch: {
     tabActiveName() {
-      if (this.tabActiveName === 'attachment') {
-        if (this.type === 'edit' && this.issueId) {
+      if (this.tabActiveName === "attachment") {
+        if (this.type === "edit" && this.issueId) {
           this.getFileMetaData(this.issueId);
         }
       }
@@ -366,12 +544,12 @@ export default {
   methods: {
     resetForm() {
       this.form = {
-        title: '',
-        description: '',
+        title: "",
+        description: "",
         creator: null,
         remark: null,
         tapdUsers: [],
-        platformStatus: null
+        platformStatus: null,
       };
       this.customFieldForm = null;
       this.issueTemplate = {};
@@ -382,36 +560,38 @@ export default {
     },
     open(data, type) {
       this.uploadFiles = [];
-      this.tabActiveName = 'relateTestCase'
+      this.tabActiveName = "relateTestCase";
       this.showFollow = false;
       this.result.loading = true;
       this.type = type;
-      this.richTextDefaultOpen = this.type === 'edit' ? 'preview' : 'edit';
+      this.richTextDefaultOpen = this.type === "edit" ? "preview" : "edit";
       if (this.$refs.testCaseIssueList) {
         this.$refs.testCaseIssueList.clear();
         this.$refs.testCaseIssueList.isXpack = hasLicense();
       }
       this.$nextTick(() => {
-        getIssuePartTemplateWithProject((template, project) => {
-          this.currentProject = project;
-          this.init(template, data);
-          this.getDataInfoAsync(data);
+        getIssuePartTemplateWithProject(
+          (template, project) => {
+            this.currentProject = project;
+            this.init(template, data);
+            this.getDataInfoAsync(data);
 
-          enableThirdPartTemplate(this.currentProject.id)
-            .then(r => {
+            enableThirdPartTemplate(this.currentProject.id).then((r) => {
               this.enableThirdPartTemplate = r.data;
             });
-        }, () => {
-          this.result.loading = false;
-        });
+          },
+          () => {
+            this.result.loading = false;
+          }
+        );
       });
     },
     getTapdCurrentOwner() {
-      getTapdCurrentOwner(this.form.id).then(res => {
+      getTapdCurrentOwner(this.form.id).then((res) => {
         if (res && res.data && res.data[0]) {
-          this.form.tapdUsers = res.data[0].split(';').filter(i => i);
+          this.form.tapdUsers = res.data[0].split(";").filter((i) => i);
         }
-      })
+      });
     },
     getDataInfoAsync(data) {
       if (data && data.id) {
@@ -447,9 +627,9 @@ export default {
         let data = {
           platformKey: this.form.platformId,
           projectId: getCurrentProjectID(),
-          workspaceId: getCurrentWorkspaceId()
-        }
-        getPlatformTransitions(data).then(response => {
+          workspaceId: getCurrentWorkspaceId(),
+        };
+        getPlatformTransitions(data).then((response) => {
           if (response.data.length > 0) {
             this.platformTransitions = response.data;
           }
@@ -458,15 +638,14 @@ export default {
 
       let data = {
         projectId: this.projectId,
-        workspaceId: getCurrentWorkspaceId()
-      }
-      if (platform === 'Tapd') {
+        workspaceId: getCurrentWorkspaceId(),
+      };
+      if (platform === "Tapd") {
         this.hasTapdId = true;
         this.getTapdCurrentOwner();
-        getTapdUser(data)
-          .then((response) => {
-            this.tapdUsers = response.data;
-          })
+        getTapdUser(data).then((response) => {
+          this.tapdUsers = response.data;
+        });
       }
     },
     initEdit(data) {
@@ -478,36 +657,37 @@ export default {
           this.form.options = data.options ? JSON.parse(data.options) : [];
         }
         if (data.id) {
-          this.issueId = data.id
-          this.url = 'issues/update';
+          this.issueId = data.id;
+          this.url = "issues/update";
         } else {
           //copy
-          this.url = 'issues/add';
+          this.url = "issues/add";
           if (!this.form.creator) {
             this.form.creator = getCurrentUserId();
           }
-          this.form.title = data.title + '_copy';
+          this.form.title = data.title + "_copy";
           this.form.copyIssueId = data.copyIssueId;
         }
       } else {
         this.form = {
           title: this.issueTemplate.title,
-          description: this.issueTemplate.content
+          description: this.issueTemplate.content,
         };
-        this.url = 'issues/add';
+        this.url = "issues/add";
         if (!this.form.creator) {
           this.form.creator = getCurrentUserId();
         }
       }
-      this.customFieldForm = parseCustomFieldForId(this.form, this.issueTemplate, this.customFieldRules);
+      this.customFieldForm = parseCustomFieldForId(
+        this.form,
+        this.issueTemplate,
+        this.customFieldRules
+      );
       this.comments = [];
       this.$nextTick(() => {
-        if (this.$refs.testCaseIssueList) {
-          this.$refs.testCaseIssueList.initTableData();
-        }
-        if (this.type === 'copy' && data.copyIssueId != null) {
+        if (this.type === "copy" && data.copyIssueId != null) {
           this.getFileMetaData(data.copyIssueId);
-        } else if (this.type === 'edit' && data.id != null) {
+        } else if (this.type === "edit" && data.id != null) {
           this.getFileMetaData(data.id);
         }
         this.getComments();
@@ -515,13 +695,13 @@ export default {
     },
     save() {
       let isValidate = true;
-      this.$refs['form'].validate((valid) => {
+      this.$refs["form"].validate((valid) => {
         if (!valid) {
           isValidate = false;
           return false;
         }
       });
-      this.$refs['customFieldForm'].validate((valid) => {
+      this.$refs["customFieldForm"].validate((valid) => {
         if (!valid) {
           isValidate = false;
           return false;
@@ -537,7 +717,7 @@ export default {
       param.projectId = this.projectId;
       param.workspaceId = getCurrentWorkspaceId();
       if (this.platformTransitions) {
-        this.platformTransitions.forEach(item => {
+        this.platformTransitions.forEach((item) => {
           if (item.value === this.form.platformStatus) {
             param.transitions = item;
           }
@@ -584,11 +764,12 @@ export default {
       this.result.loading = true;
       saveOrUpdateIssue(option.url, option.data)
         .then((response) => {
-          this.$emit('close');
-          this.$success(this.$t('commons.save_success'));
-          this.$emit('refresh', response.data);
+          this.$emit("close");
+          this.$success(this.$t("commons.save_success"));
+          this.$emit("refresh", response.data);
           this.result.loading = false;
-        }).catch(() => {
+        })
+        .catch(() => {
           this.result.loading = false;
         });
     },
@@ -596,8 +777,8 @@ export default {
       let customFieldsStr = param.customFields;
       if (customFieldsStr) {
         let customFields = JSON.parse(customFieldsStr);
-        customFields.forEach(item => {
-          if (item.name === '状态') {
+        customFields.forEach((item) => {
+          if (item.name === "状态") {
             param.status = item.value;
           }
         });
@@ -606,25 +787,28 @@ export default {
     getOption(param) {
       let formData = new FormData();
       let requestJson = JSON.stringify(param, function (key, value) {
-        return key === "file" ? undefined : value
+        return key === "file" ? undefined : value;
       });
 
       if (this.uploadFiles.length > 0) {
-        this.uploadFiles.forEach(f => {
+        this.uploadFiles.forEach((f) => {
           formData.append("file", f);
         });
       }
-      formData.append('request', new Blob([requestJson], {
-        type: "application/json"
-      }));
+      formData.append(
+        "request",
+        new Blob([requestJson], {
+          type: "application/json",
+        })
+      );
 
       return {
-        method: 'POST',
+        method: "POST",
         url: this.url,
         data: formData,
         headers: {
-          'Content-Type': undefined
-        }
+          "Content-Type": undefined,
+        },
       };
     },
     saveFollow() {
@@ -635,25 +819,25 @@ export default {
         this.showFollow = false;
         for (let i = 0; i < this.form.follows.length; i++) {
           if (this.form.follows[i] === this.currentUser().id) {
-            this.form.follows.splice(i, 1)
+            this.form.follows.splice(i, 1);
             break;
           }
         }
         if (this.url === "issues/update") {
           saveFollow(this.issueId, this.form.follows).then(() => {
-            this.$success(this.$t('commons.cancel_follow_success'));
-          })
+            this.$success(this.$t("commons.cancel_follow_success"));
+          });
         }
       } else {
         this.showFollow = true;
         if (!this.form.follows) {
           this.form.follows = [];
         }
-        this.form.follows.push(this.currentUser().id)
+        this.form.follows.push(this.currentUser().id);
         if (this.url === "issues/update") {
           saveFollow(this.issueId, this.form.follows).then(() => {
-            this.$success(this.$t('commons.follow_success'));
-          })
+            this.$success(this.$t("commons.follow_success"));
+          });
         }
       }
     },
@@ -662,12 +846,12 @@ export default {
     },
     beforeUpload(file) {
       if (!this.fileValidator(file)) {
-        this.$error(this.$t('load_test.file_size_out_of_bounds') + file.name);
+        this.$error(this.$t("load_test.file_size_out_of_bounds") + file.name);
         return false;
       }
 
-      if (this.tableData.filter(f => f.name === file.name).length > 0) {
-        this.$error(this.$t('load_test.delete_file') + ', name: ' + file.name);
+      if (this.tableData.filter((f) => f.name === file.name).length > 0) {
+        this.$error(this.$t("load_test.delete_file") + ", name: " + file.name);
         return false;
       }
     },
@@ -679,70 +863,85 @@ export default {
         name: file.name,
         size: byteToSize(file.size),
         updateTime: new Date().getTime(),
-        progress: this.type === 'add' || this.isCaseEdit || this.type === 'copy' ? 100 : 0,
-        status: this.type === 'add' || this.isCaseEdit || this.type === 'copy'? 'toUpload' : 0,
+        progress:
+          this.type === "add" || this.isCaseEdit || this.type === "copy"
+            ? 100
+            : 0,
+        status:
+          this.type === "add" || this.isCaseEdit || this.type === "copy"
+            ? "toUpload"
+            : 0,
         creator: user.name,
         type: getTypeByFileName(file.name),
-        isLocal: true
+        isLocal: true,
       });
 
-      if (this.type === 'add' || this.isCaseEdit || this.type === 'copy') {
+      if (this.type === "add" || this.isCaseEdit || this.type === "copy") {
         // 新增上传
         this.uploadFiles.push(file);
         return false;
       }
       this.uploadFile(e, (param) => {
-        this.showProgress(e.file, param)
-      })
+        this.showProgress(e.file, param);
+      });
     },
     async uploadFile(param, progressCallback) {
       let progress = 0;
       let file = param.file;
-      let data = {"belongId": this.issueId, "belongType": "issue"};
-      let CancelToken = axios.CancelToken
+      let data = { belongId: this.issueId, belongType: "issue" };
+      let CancelToken = axios.CancelToken;
       let self = this;
-      uploadIssueAttachment(file, data, CancelToken, self.cancelFileToken, progressCallback)
-        .then(response => { // 成功回调
+      uploadIssueAttachment(
+        file,
+        data,
+        CancelToken,
+        self.cancelFileToken,
+        progressCallback
+      )
+        .then((response) => {
+          // 成功回调
           progress = 100;
           param.onSuccess(response);
-          progressCallback({progress, status: 'success'});
+          progressCallback({ progress, status: "success" });
           self.cancelFileToken.forEach((token, index, array) => {
             if (token.name == file.name) {
-              array.splice(token, 1)
+              array.splice(token, 1);
             }
-          })
-        }).catch(({error}) => { // 失败回调
-        progress = 100;
-        progressCallback({progress, status: 'error'});
-        self.cancelFileToken.forEach((token, index, array) => {
-          if (token.name == file.name) {
-            array.splice(token, 1)
-          }
+          });
         })
-      });
+        .catch(({ error }) => {
+          // 失败回调
+          progress = 100;
+          progressCallback({ progress, status: "error" });
+          self.cancelFileToken.forEach((token, index, array) => {
+            if (token.name == file.name) {
+              array.splice(token, 1);
+            }
+          });
+        });
     },
     showProgress(file, params) {
-      const {progress, status} = params
-      const arr = [...this.tableData].map(item => {
+      const { progress, status } = params;
+      const arr = [...this.tableData].map((item) => {
         if (item.name === file.name) {
-          item.progress = progress
-          item.status = status
+          item.progress = progress;
+          item.status = status;
         }
-        return item
-      })
-      this.tableData = [...arr]
+        return item;
+      });
+      this.tableData = [...arr];
     },
     handleExceed(files, fileList) {
-      this.$error(this.$t('load_test.file_size_limit'));
+      this.$error(this.$t("load_test.file_size_limit"));
     },
     handleSuccess(response, file, fileList) {
-      let readyFiles = fileList.filter(item => item.status === 'success')
+      let readyFiles = fileList.filter((item) => item.status === "success");
       if (readyFiles.length === fileList.length) {
         this.getFileMetaData(this.issueId);
       }
     },
     handleError(err, file, fileList) {
-      let readyFiles = fileList.filter(item => item.status === 'success')
+      let readyFiles = fileList.filter((item) => item.status === "success");
       if (readyFiles.length === fileList.length) {
         this.getFileMetaData(this.issueId);
       }
@@ -753,79 +952,100 @@ export default {
         workspaceId: getCurrentWorkspaceId(),
         platform: this.issueTemplate.platform,
         projectId: this.form.projectId ? this.form.projectId : this.projectId,
-        query
+        query,
       }).then((r) => {
         data.options = r.data;
         this.$refs.customFieldItem.stopLoading();
       });
     },
     handleDelete(file, index) {
-      this.$alert((this.cancelFileToken.length > 0 ? this.$t('load_test.delete_file_when_uploading') + '<br/>' : "") + this.$t('load_test.delete_file_confirm') + file.name + "?", '', {
-        confirmButtonText: this.$t('commons.confirm'),
-        dangerouslyUseHTMLString: true,
-        callback: (action) => {
-          if (action === 'confirm') {
-            this._handleDelete(file, index);
-          }
+      this.$alert(
+        (this.cancelFileToken.length > 0
+          ? this.$t("load_test.delete_file_when_uploading") + "<br/>"
+          : "") +
+          this.$t("load_test.delete_file_confirm") +
+          file.name +
+          "?",
+        "",
+        {
+          confirmButtonText: this.$t("commons.confirm"),
+          dangerouslyUseHTMLString: true,
+          callback: (action) => {
+            if (action === "confirm") {
+              this._handleDelete(file, index);
+            }
+          },
         }
-      });
+      );
     },
     _handleDelete(file, index) {
       // 中断所有正在上传的文件
       if (this.cancelFileToken && this.cancelFileToken.length >= 1) {
-        this.cancelFileToken.forEach(cacelToken => {
+        this.cancelFileToken.forEach((cacelToken) => {
           cacelToken.cancelFunc();
-        })
+        });
       }
       this.fileList.splice(index, 1);
       this.tableData.splice(index, 1);
-      if (file.status === 'toUpload') {
-        let delIndex = this.uploadFiles.findIndex(uploadFile => uploadFile.name === file.name)
+      if (file.status === "toUpload") {
+        let delIndex = this.uploadFiles.findIndex(
+          (uploadFile) => uploadFile.name === file.name
+        );
         this.uploadFiles.splice(delIndex, 1);
       } else {
-        if (this.type === 'copy') {
+        if (this.type === "copy") {
           this.filterCopyFiles.push(file.id);
         } else {
-          deleteIssueAttachment(file.id)
-            .then(() => {
-              this.$success(this.$t('commons.delete_success'));
-              this.getFileMetaData(this.issueId);
-            });
+          deleteIssueAttachment(file.id).then(() => {
+            this.$success(this.$t("commons.delete_success"));
+            this.getFileMetaData(this.issueId);
+          });
         }
       }
     },
     handleUnRelate(file, index) {
       // 取消关联
-      this.$alert(this.$t('load_test.unrelated_file_confirm') + file.name + "?", '', {
-        confirmButtonText: this.$t('commons.confirm'),
-        dangerouslyUseHTMLString: true,
-        callback: (action) => {
-          if (action === 'confirm') {
-            let unRelateFileIndex = this.tableData.findIndex(f => f.name === file.name);
-            this.tableData.splice(unRelateFileIndex, 1);
-            if (file.status === 'toRelate') {
-              // 待关联的记录, 直接移除
-              let unRelateId = this.relateFiles.findIndex(f => f === file.id);
-              this.relateFiles.splice(unRelateId, 1);
-            } else {
-              if (this.type === 'copy') {
-                this.filterCopyFiles.push(file.id);
+      this.$alert(
+        this.$t("load_test.unrelated_file_confirm") + file.name + "?",
+        "",
+        {
+          confirmButtonText: this.$t("commons.confirm"),
+          dangerouslyUseHTMLString: true,
+          callback: (action) => {
+            if (action === "confirm") {
+              let unRelateFileIndex = this.tableData.findIndex(
+                (f) => f.name === file.name
+              );
+              this.tableData.splice(unRelateFileIndex, 1);
+              if (file.status === "toRelate") {
+                // 待关联的记录, 直接移除
+                let unRelateId = this.relateFiles.findIndex(
+                  (f) => f === file.id
+                );
+                this.relateFiles.splice(unRelateId, 1);
               } else {
-                // 已经关联的记录
-                this.unRelateFiles.push(file.id);
-                let data = {'belongType': 'issue', 'belongId': this.issueId, 'metadataRefIds': this.unRelateFiles};
-                this.result.loading = true;
-                unrelatedIssueAttachment(data)
-                  .then(() => {
-                    this.$success(this.$t('commons.unrelated_success'));
+                if (this.type === "copy") {
+                  this.filterCopyFiles.push(file.id);
+                } else {
+                  // 已经关联的记录
+                  this.unRelateFiles.push(file.id);
+                  let data = {
+                    belongType: "issue",
+                    belongId: this.issueId,
+                    metadataRefIds: this.unRelateFiles,
+                  };
+                  this.result.loading = true;
+                  unrelatedIssueAttachment(data).then(() => {
+                    this.$success(this.$t("commons.unrelated_success"));
                     this.result.loading = false;
                     this.getFileMetaData(this.issueId);
-                  })
+                  });
+                }
               }
             }
-          }
+          },
         }
-      });
+      );
     },
     handleDump(file) {
       this.$refs.module.init();
@@ -833,11 +1053,13 @@ export default {
     },
     handleCancel(file, index) {
       this.fileList.splice(index, 1);
-      let cancelToken = this.cancelFileToken.filter(f => f.name === file.name)[0];
+      let cancelToken = this.cancelFileToken.filter(
+        (f) => f.name === file.name
+      )[0];
       cancelToken.cancelFunc();
-      let cancelFile = this.tableData.filter(f => f.name === file.name)[0];
+      let cancelFile = this.tableData.filter((f) => f.name === file.name)[0];
       cancelFile.progress = 100;
-      cancelFile.status = 'error';
+      cancelFile.status = "error";
     },
     associationFile() {
       this.$refs.metadataList.open();
@@ -845,17 +1067,21 @@ export default {
     checkRows(rows) {
       let repeatRecord = false;
       for (let row of rows) {
-        let rowIndex = this.tableData.findIndex(item => item.name === row.name);
+        let rowIndex = this.tableData.findIndex(
+          (item) => item.name === row.name
+        );
         if (rowIndex >= 0) {
-          this.$error(this.$t('load_test.exist_related_file') + ": " + row.name);
+          this.$error(
+            this.$t("load_test.exist_related_file") + ": " + row.name
+          );
           repeatRecord = true;
           break;
         }
       }
       if (!repeatRecord) {
-        if (this.type === 'add' || this.isCaseEdit || this.type === 'copy') {
+        if (this.type === "add" || this.isCaseEdit || this.type === "copy") {
           // 新增
-          rows.forEach(row => {
+          rows.forEach((row) => {
             this.relateFiles.push(row.id);
             this.tableData.push({
               id: row.id,
@@ -863,39 +1089,45 @@ export default {
               size: byteToSize(row.size),
               updateTime: row.createTime,
               progress: 100,
-              status: 'toRelate',
+              status: "toRelate",
               creator: row.createUser,
               type: row.type,
               isLocal: false,
             });
-          })
+          });
         } else {
           // 编辑
           let metadataRefIds = [];
-          rows.forEach(row => metadataRefIds.push(row.id));
-          let data = {'belongType': 'issue', 'belongId': this.issueId, 'metadataRefIds': metadataRefIds};
+          rows.forEach((row) => metadataRefIds.push(row.id));
+          let data = {
+            belongType: "issue",
+            belongId: this.issueId,
+            metadataRefIds: metadataRefIds,
+          };
           this.result.loading = true;
-          relatedIssueAttachment(data)
-            .then(() => {
-              this.$success(this.$t('commons.relate_success'));
-              this.result.loading = false;
-              this.getFileMetaData(this.issueId);
-            });
+          relatedIssueAttachment(data).then(() => {
+            this.$success(this.$t("commons.relate_success"));
+            this.result.loading = false;
+            this.getFileMetaData(this.issueId);
+          });
         }
       }
     },
     setModuleId(moduleId) {
       let data = {
-        id: getUUID(), resourceId: getCurrentProjectID(), moduleId: moduleId,
-        projectId: getCurrentProjectID(), fileName: this.dumpFile.name, attachmentId: this.dumpFile.id
+        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"));
-        });
+      dumpAttachment(data).then(() => {
+        this.$success(this.$t("organization.integration.successful_operation"));
+      });
     },
     getFileMetaData(id) {
-      if (this.type === 'edit') {
+      if (this.type === "edit") {
         this.uploadFiles = [];
         this.relateFiles = [];
         this.unRelateFiles = [];
@@ -904,7 +1136,7 @@ export default {
       this.fileList = [];
       this.tableData = [];
       if (id) {
-        let data = {'belongType': 'issue', 'belongId': id};
+        let data = { belongType: "issue", belongId: id };
         attachmentList(data).then((response) => {
           let files = response.data;
           if (!files) {
@@ -913,29 +1145,29 @@ export default {
           // deep copy
           this.fileList = JSON.parse(JSON.stringify(files));
           this.tableData = JSON.parse(JSON.stringify(files));
-          this.tableData.map(f => {
+          this.tableData.map((f) => {
             f.size = byteToSize(f.size);
-            f.status = 'success';
-            f.progress = 100
+            f.status = "success";
+            f.progress = 100;
           });
         });
       }
     },
     openComment() {
       if (!this.issueId) {
-        this.$warning(this.$t('test_track.issue.save_before_open_comment'));
+        this.$warning(this.$t("test_track.issue.save_before_open_comment"));
         return;
       }
       this.$refs.issueComment.open();
     },
     getComments() {
       if (this.issueId) {
-        getComments(this.issueId).then(response => {
+        getComments(this.issueId).then((response) => {
           this.comments = response.data;
-        })
+        });
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/test-track/frontend/src/business/issue/TestCaseIssueList.vue b/test-track/frontend/src/business/issue/TestCaseIssueList.vue
index a43a64f890..fcb8c905de 100644
--- a/test-track/frontend/src/business/issue/TestCaseIssueList.vue
+++ b/test-track/frontend/src/business/issue/TestCaseIssueList.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <el-button type="primary" @click="relateTestCase">{{$t('test_track.review_view.relevance_case')}}</el-button>
+    <el-button type="primary" @click="relateTestCase">{{
+      $t("test_track.review_view.relevance_case")
+    }}</el-button>
 
     <ms-table
       v-loading="result.loading"
@@ -9,53 +11,42 @@
       :data="tableData"
       :screen-height="null"
       @refresh="initTableData"
-      ref="table">
+      ref="table"
+    >
+      <ms-table-column :label="$t('commons.id')" prop="num"> </ms-table-column>
 
-      <ms-table-column
-        :label="$t('commons.id')"
-        prop="num">
+      <ms-table-column :label="$t('commons.name')" prop="name">
       </ms-table-column>
 
-      <ms-table-column
-        :label="$t('commons.name')"
-        prop="name">
-      </ms-table-column>
-
-      <ms-table-column
-        :label="$t('test_track.case.priority')"
-        prop="name">
+      <ms-table-column :label="$t('test_track.case.priority')" prop="name">
         <template v-slot:default="scope">
-          <priority-table-item :value="scope.row.priority" ref="priority"/>
+          <priority-table-item :value="scope.row.priority" ref="priority" />
         </template>
       </ms-table-column>
 
-      <ms-table-column
-        :label="$t('test_track.case.type')"
-        prop="type">
+      <ms-table-column :label="$t('test_track.case.type')" prop="type">
         <template v-slot:default="scope">
-          <type-table-item :value="scope.row.type"/>
+          <type-table-item :value="scope.row.type" />
         </template>
       </ms-table-column>
 
-      <ms-table-column
-        :label="$t('test_track.case.module')"
-        prop="nodePath">
+      <ms-table-column :label="$t('test_track.case.module')" prop="nodePath">
       </ms-table-column>
 
       <ms-table-column
         :label="$t('test_track.plan.plan_project')"
-        prop="projectName">
+        prop="projectName"
+      >
       </ms-table-column>
-
     </ms-table>
 
     <test-case-relate-list
       :test-case-contain-ids="testCaseContainIds"
       @refresh="initTableData"
       @save="handleRelate"
-      ref="testCaseRelevance"/>
+      ref="testCaseRelevance"
+    />
   </div>
-
 </template>
 
 <script>
@@ -64,28 +55,48 @@ import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColu
 import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
 import TypeTableItem from "@/business/common/tableItems/planview/TypeTableItem";
 import TestCaseRelateList from "@/business/issue/TestCaseRelateList";
-import {getTestCaseIssueList} from "@/api/testCase";
+import { getTestCaseIssueList } from "@/api/testCase";
 export default {
   name: "TestCaseIssueList",
-  components: {TestCaseRelateList, TypeTableItem, PriorityTableItem, MsTableColumn, MsTable},
+  components: {
+    TestCaseRelateList,
+    TypeTableItem,
+    PriorityTableItem,
+    MsTableColumn,
+    MsTable,
+  },
   data() {
     return {
-      result: {},
+      result: {
+        loading: false,
+      },
       tableData: [],
       deleteIds: new Set(),
       addIds: new Set(),
       testCaseContainIds: new Set(),
       operators: [
         {
-          tip: this.$t('commons.delete'), icon: "el-icon-delete", type: "danger",
-          exec: this.handleDelete
-        }
+          tip: this.$t("commons.delete"),
+          icon: "el-icon-delete",
+          type: "danger",
+          exec: this.handleDelete,
+        },
       ],
     };
   },
   props: {
     issuesId: String,
   },
+  watch: {
+    issuesId: {
+      handler(val) {
+        if (val) {
+          this.initTableData();
+        }
+      },
+      immediate: true,
+    },
+  },
   methods: {
     handleDelete(item, index) {
       this.testCaseContainIds.delete(item.id);
@@ -99,17 +110,18 @@ export default {
     initTableData() {
       this.tableData = [];
       let condition = {
-        issuesId: this.issuesId
+        issuesId: this.issuesId,
       };
       if (this.issuesId) {
-        getTestCaseIssueList(condition)
-          .then((response) => {
-            this.tableData = response.data;
-            this.tableData.forEach(item => {
-              this.testCaseContainIds.add(item.id);
-            });
-            this.$refs.table.reloadTable();
-          })
+        this.result.loading = true;
+        getTestCaseIssueList(condition).then((response) => {
+          this.tableData = response.data;
+          this.tableData.forEach((item) => {
+            this.testCaseContainIds.add(item.id);
+          });
+          this.$refs.table.reloadTable();
+          this.result.loading = false;
+        });
       }
     },
     relateTestCase() {
@@ -117,7 +129,7 @@ export default {
     },
     handleRelate(selectRows) {
       let selectData = Array.from(selectRows);
-      selectRows.forEach(i => {
+      selectRows.forEach((i) => {
         if (i.id) {
           this.testCaseContainIds.add(i.id);
         }
@@ -127,10 +139,8 @@ export default {
       this.tableData.push(...selectData);
       this.testCaseContainIds = new Set();
     },
-  }
-}
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>