From a61386cb899b3cc20a49ae349d0081be91a5918b Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Thu, 24 Nov 2022 15:31:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92=E5=85=B3=E8=81=94=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E7=94=A8=E4=BE=8B=E4=B8=8D=E5=B1=95=E7=A4=BA=E8=BF=90?=
 =?UTF-8?q?=E8=A1=8C=E7=BB=93=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1020230 --user=宋天阳 【测试跟踪】测试计划关联接口场景弹框，执行结果列没显示结果
https://www.tapd.cn/55049933/s/1304598
---
 .../home/components/chart/CountChart.vue      |   1 +
 .../menu/file/edit/EditFileMetadata.vue       | 358 +++++++++++++-----
 .../comonents/api/RelevanceScenarioList.vue   | 276 +++++++++-----
 3 files changed, 435 insertions(+), 200 deletions(-)

diff --git a/api-test/frontend/src/business/home/components/chart/CountChart.vue b/api-test/frontend/src/business/home/components/chart/CountChart.vue
index 562d19a8cc..4e8e527c1f 100644
--- a/api-test/frontend/src/business/home/components/chart/CountChart.vue
+++ b/api-test/frontend/src/business/home/components/chart/CountChart.vue
@@ -185,6 +185,7 @@ export default {
         },
         series: [
           {
+            minAngle: 3,
             type: 'pie',
             radius: [75, 100],
             center: ['104px', '50%'],
diff --git a/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue b/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue
index d3ffe12bd9..d47de77e62 100644
--- a/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue
+++ b/project-management/frontend/src/business/menu/file/edit/EditFileMetadata.vue
@@ -1,27 +1,63 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :visible.sync="visible" width="900px"
-             @close="saveAndClose" destroy-on-close ref="editFile">
-     <span slot="title" class="dialog-footer">
-       <span>{{ data.name }}</span>
-       <i class="el-icon-download ms-header-menu" @click="download" v-permission="['PROJECT_FILE:READ+DOWNLOAD+JAR']"/>
-       <i class="el-icon-delete ms-header-menu" @click="deleteData" v-permission="['PROJECT_FILE:READ+DELETE+JAR']"/>
-       <el-button v-if="isRepositoryFile()" :loading="isPullBtnLoading" class="ms-header-menu" size="mini"
-                  @click="filePull"
-                  style="padding: 2px;font-size: 12px">pull</el-button>
-     </span>
+  <el-dialog
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    width="900px"
+    @close="saveAndClose"
+    destroy-on-close
+    ref="editFile"
+  >
+    <span slot="title" class="dialog-footer">
+      <span>{{ data.name }}</span>
+      <i
+        class="el-icon-download ms-header-menu"
+        @click="download"
+        v-permission="['PROJECT_FILE:READ+DOWNLOAD+JAR']"
+      />
+      <i
+        class="el-icon-delete ms-header-menu"
+        @click="deleteData"
+        v-permission="['PROJECT_FILE:READ+DELETE+JAR']"
+      />
+      <el-button
+        v-if="isRepositoryFile()"
+        :loading="isPullBtnLoading"
+        class="ms-header-menu"
+        size="mini"
+        @click="filePull"
+        style="padding: 2px; font-size: 12px"
+        >pull</el-button
+      >
+    </span>
 
-    <el-tabs v-if="visible" tab-position="right" v-model="showPanel"
-             :class=" isRepositoryFile()?'':'file-metadata-tab'">
-      <el-tab-pane name="baseInfo" :label=" isRepositoryFile()?$t('test_track.plan_view.base_info'):''">
+    <el-tabs
+      v-if="visible"
+      tab-position="right"
+      v-model="showPanel"
+      :class="isRepositoryFile() ? '' : 'file-metadata-tab'"
+    >
+      <el-tab-pane
+        name="baseInfo"
+        :label="isRepositoryFile() ? $t('test_track.plan_view.base_info') : ''"
+      >
         <el-row align="center" v-loading="loading">
           <el-col style="margin: 10px" :span="10">
-            <el-row :gutter="20" style="background: #F5F6F8;height: 480px">
+            <el-row :gutter="20" style="background: #f5f6f8; height: 480px">
               <el-col :span="2" class="ms-left-col">
-                <i class="el-icon-arrow-left ms-icon-arrow" @click="beforeData"/>
+                <i
+                  class="el-icon-arrow-left ms-icon-arrow"
+                  @click="beforeData"
+                />
               </el-col>
               <el-col :span="18" style="padding-top: 80px">
-                <el-card :body-style="{ padding: '0px' }" v-if="isImage(data.type) && !isRepositoryFile()">
-                  <img :src="'/project/file/metadata/info/' + data.id" class="ms-edit-image"/>
+                <el-card
+                  :body-style="{ padding: '0px' }"
+                  v-if="isImage(data.type) && !isRepositoryFile()"
+                >
+                  <img
+                    :src="'/project/file/metadata/info/' + data.id"
+                    class="ms-edit-image"
+                  />
                 </el-card>
                 <el-card :body-style="{ padding: '0px' }" v-else>
                   <div class="ms-edit-image">
@@ -32,14 +68,24 @@
                 </el-card>
               </el-col>
               <el-col :span="2" class="ms-right-col">
-                <i class="el-icon-arrow-right ms-icon-arrow" @click="nextData"/>
+                <i
+                  class="el-icon-arrow-right ms-icon-arrow"
+                  @click="nextData"
+                />
               </el-col>
             </el-row>
           </el-col>
           <el-col :span="13">
             <el-container>
               <el-main>
-                <el-form :model="data" :rules="rules" label-position="right" label-width="80px" size="small" ref="form">
+                <el-form
+                  :model="data"
+                  :rules="rules"
+                  label-position="right"
+                  label-width="80px"
+                  size="small"
+                  ref="form"
+                >
                   <!-- 基础信息 -->
                   <el-form-item :label="$t('load_test.file_name')" prop="name">
                     <el-input
@@ -47,13 +93,22 @@
                       size="small"
                       v-model="data.name"
                       :disabled="isRepositoryFile() || !canEdit"
-                      show-word-limit @blur="save"/>
+                      show-word-limit
+                      @blur="save"
+                    />
                   </el-form-item>
-                  <el-form-item :label="$t('commons.description')" prop="description">
-                    <el-input class="ms-http-textarea"
-                              v-model="data.description"
-                              type="textarea"
-                              :rows="2" size="small" @blur="save"/>
+                  <el-form-item
+                    :label="$t('commons.description')"
+                    prop="description"
+                  >
+                    <el-input
+                      class="ms-http-textarea"
+                      v-model="data.description"
+                      type="textarea"
+                      :rows="2"
+                      size="small"
+                      @blur="save"
+                    />
                   </el-form-item>
                   <el-form-item :label="$t('load_test.file_type')" prop="type">
                     <span>{{ data.type }}</span>
@@ -62,40 +117,79 @@
                     <span>{{ formatFileSize(data.size) }}</span>
                   </el-form-item>
 
-                  <el-form-item :label="$t('api_test.automation.tag')" prop="tags">
-                    <ms-input-tag :currentScenario="data" ref="tag" @onblur="save"/>
+                  <el-form-item
+                    :label="$t('api_test.automation.tag')"
+                    prop="tags"
+                  >
+                    <ms-input-tag
+                      :currentScenario="data"
+                      ref="tag"
+                      @onblur="save"
+                    />
                   </el-form-item>
 
-                  <el-form-item :label="$t('test_track.case.module')" prop="moduleId">
-                    <ms-select-tree :disabled="isRepositoryFile() || !canEdit" size="small" :data="moduleOptions"
-                                    :defaultKey="data.moduleId"
-                                    @getValue="setModule" :obj="moduleObj" clearable checkStrictly/>
-
+                  <el-form-item
+                    :label="$t('test_track.case.module')"
+                    prop="moduleId"
+                  >
+                    <ms-select-tree
+                      :disabled="isRepositoryFile() || !canEdit"
+                      size="small"
+                      :data="moduleOptions"
+                      :defaultKey="data.moduleId"
+                      @getValue="setModule"
+                      :obj="moduleObj"
+                      clearable
+                      checkStrictly
+                    />
                   </el-form-item>
 
-                  <el-form-item :label="$t('project.creator')" prop="createUser">
+                  <el-form-item
+                    :label="$t('project.creator')"
+                    prop="createUser"
+                  >
                     <span>{{ data.createUser }}</span>
                   </el-form-item>
 
-                  <el-form-item :label="$t('commons.create_time')" prop="createTime">
+                  <el-form-item
+                    :label="$t('commons.create_time')"
+                    prop="createTime"
+                  >
                     <span>{{ data.createTime | datetimeFormat }}</span>
                   </el-form-item>
 
-                  <el-form-item :label="'加载Jar包'" prop="loadJar" v-if="data.type === 'JAR'">
-                    <el-switch v-model="data.loadJar" :active-text="$t('project.file_jar_message')" @change="save" :disabled="!canEdit"/>
+                  <el-form-item
+                    :label="'加载Jar包'"
+                    prop="loadJar"
+                    v-if="data.type === 'JAR'"
+                  >
+                    <el-switch
+                      v-model="data.loadJar"
+                      :active-text="$t('project.file_jar_message')"
+                      @change="save"
+                      :disabled="!canEdit"
+                    />
                   </el-form-item>
-                  <el-form-item v-if="isRepositoryFile()" :label="$t('commons.version')">
+                  <el-form-item
+                    v-if="isRepositoryFile()"
+                    :label="$t('commons.version')"
+                  >
                     {{ getCommitId() }}
                   </el-form-item>
-                  <el-form-item v-else :label="$t('project.upload_file_again')" prop="files">
+                  <el-form-item
+                    v-else
+                    :label="$t('project.upload_file_again')"
+                    prop="files"
+                  >
                     <el-upload
-                      style="width: 38px; float: left;"
+                      style="width: 38px; float: left"
                       action="#"
                       :before-upload="beforeUploadFile"
                       :http-request="handleUpload"
                       :show-file-list="false"
-                      v-permission="['PROJECT_FILE:READ+UPLOAD+JAR']">
-                      <el-button icon="el-icon-plus" size="mini"/>
+                      v-permission="['PROJECT_FILE:READ+UPLOAD+JAR']"
+                    >
+                      <el-button icon="el-icon-plus" size="mini" />
                     </el-upload>
                   </el-form-item>
                 </el-form>
@@ -104,31 +198,42 @@
           </el-col>
         </el-row>
       </el-tab-pane>
-      <el-tab-pane name="relevanceCase" v-if="isRepositoryFile()"
-                   :label=" $t('test_track.review_view.relevance_case')">
-        <file-case-relevance-list :file-metadata-ref-id="data.refId"/>
+      <el-tab-pane
+        name="relevanceCase"
+        v-if="isRepositoryFile()"
+        :label="$t('test_track.review_view.relevance_case')"
+      >
+        <file-case-relevance-list :file-metadata-ref-id="data.refId" />
       </el-tab-pane>
-      <el-tab-pane name="versionHistory" v-if="isRepositoryFile()"
-                   :label=" $t('project.project_file.repository.version_history')">
-        <file-version-list :file-metadata-ref-id="data.refId"/>
+      <el-tab-pane
+        name="versionHistory"
+        v-if="isRepositoryFile()"
+        :label="$t('project.project_file.repository.version_history')"
+      >
+        <file-version-list :file-metadata-ref-id="data.refId" />
       </el-tab-pane>
     </el-tabs>
   </el-dialog>
 </template>
 
 <script>
-import {operationConfirm} from "metersphere-frontend/src/utils";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
-import {getFileMetaPages, modifyFileMeta, pullGitFile, uploadFileMeta} from "../../../../api/file";
+import { operationConfirm } from "metersphere-frontend/src/utils";
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
+import {
+  getFileMetaPages,
+  modifyFileMeta,
+  pullGitFile,
+  uploadFileMeta,
+} from "../../../../api/file";
 import FileVersionList from "@/business/menu/file/list/FileVersionList";
 import FileCaseRelevanceList from "@/business/menu/file/list/FileCaseRelevanceList";
-import {hasPermission} from "metersphere-frontend/src/utils/permission";
-
+import { hasPermission } from "metersphere-frontend/src/utils/permission";
 
 export default {
   name: "MsEditFileMetadata",
   components: {
-    MsSelectTree: () => import("metersphere-frontend/src/components/select-tree/SelectTree"),
+    MsSelectTree: () =>
+      import("metersphere-frontend/src/components/select-tree/SelectTree"),
     MsInputTag: () => import("metersphere-frontend/src/components/MsInputTag"),
     FileVersionList,
     FileCaseRelevanceList,
@@ -142,28 +247,61 @@ export default {
       isPullBtnLoading: false,
       results: [],
       moduleObj: {
-        id: 'id',
-        label: 'name',
+        id: "id",
+        label: "name",
       },
       rules: {
         name: [
-          {min: 1, max: 200, message: this.$t('commons.input_limit', [1, 200]), trigger: 'blur'}
+          {
+            min: 1,
+            max: 200,
+            message: this.$t("commons.input_limit", [1, 200]),
+            trigger: "blur",
+          },
         ],
         description: [
-          {max: 3000, message: this.$t('commons.input_limit', [0, 3000]), trigger: 'blur'}
-        ]
+          {
+            max: 3000,
+            message: this.$t("commons.input_limit", [0, 3000]),
+            trigger: "blur",
+          },
+        ],
       },
       total: 0,
       pageSize: 10,
       loading: false,
       currentPage: 1,
-      images: ["bmp", "jpg", "png", "tif", "gif", "pcx", "tga", "exif", "fpx", "svg", "psd", "cdr", "pcd", "dxf", "ufo", "eps", "ai", "raw", "WMF", "webp", "avif", "apng", "jpeg"]
+      images: [
+        "bmp",
+        "jpg",
+        "png",
+        "tif",
+        "gif",
+        "pcx",
+        "tga",
+        "exif",
+        "fpx",
+        "svg",
+        "psd",
+        "cdr",
+        "pcd",
+        "dxf",
+        "ufo",
+        "eps",
+        "ai",
+        "raw",
+        "WMF",
+        "webp",
+        "avif",
+        "apng",
+        "jpeg",
+      ],
     };
   },
   computed: {
     canEdit() {
-      return hasPermission('PROJECT_FILE:READ+UPLOAD+JAR');
-    }
+      return hasPermission("PROJECT_FILE:READ+UPLOAD+JAR");
+    },
   },
   props: {
     moduleOptions: Array,
@@ -190,22 +328,27 @@ export default {
     },
     filePull() {
       this.isPullBtnLoading = true;
-      let formData = {id: this.data.id};
-      pullGitFile(formData).then(() => {
-        this.$success(this.$t('commons.update') + this.$t('api_test.automation.request_success'));
-        this.isPullBtnLoading = false;
-        this.$emit("reload");
-        this.close();
-      }).catch(() => {
-        this.isPullBtnLoading = false;
-      });
+      let formData = { id: this.data.id };
+      pullGitFile(formData)
+        .then(() => {
+          this.$success(
+            this.$t("commons.update") +
+              this.$t("api_test.automation.request_success")
+          );
+          this.isPullBtnLoading = false;
+          this.$emit("reload");
+          this.close();
+        })
+        .catch(() => {
+          this.isPullBtnLoading = false;
+        });
     },
     beforeUploadFile(file) {
       if (!this.fileValidator(file)) {
         return false;
       }
       if (file.size / 1024 / 1024 > 500) {
-        this.$warning(this.$t('api_test.request.body_upload_limit_size'));
+        this.$warning(this.$t("api_test.request.body_upload_limit_size"));
         return false;
       }
       return true;
@@ -217,7 +360,7 @@ export default {
       if (this.data.moduleId !== id) {
         this.data.moduleId = id;
         this.save();
-        this.$emit('refreshModule');
+        this.$emit("refreshModule");
       }
     },
     close() {
@@ -239,20 +382,31 @@ export default {
       this.visible = true;
     },
     isRepositoryFile() {
-      return this.data.storage === 'GIT';
+      return this.data.storage === "GIT";
     },
     save() {
-      this.$refs['form'].validate((valid) => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           let request = JSON.parse(JSON.stringify(this.data));
           request.tags = JSON.stringify(request.tags);
           if (request.tags && request.tags.length > 1000) {
-            this.$warning(this.$t('api_test.automation.tag') + this.$t('commons.input_limit', [0, 1000]));
+            this.$warning(
+              this.$t("api_test.automation.tag") +
+                this.$t("commons.input_limit", [0, 1000])
+            );
             return;
           }
-          modifyFileMeta(request).catch(() => {
-            this.$emit("reload");
-          });
+          this.loading = true;
+          modifyFileMeta(request)
+            .then(() => {
+              this.loading = false;
+              this.$emit("reload");
+            })
+            .catch(() => {
+              this.$error(this.$t("commons.save_failed"));
+              this.loading = false;
+              this.$emit("reload");
+            });
         }
       });
     },
@@ -264,22 +418,26 @@ export default {
       }
     },
     isImage(type) {
-      return (type && this.images.indexOf(type.toLowerCase()) !== -1);
+      return type && this.images.indexOf(type.toLowerCase()) !== -1;
     },
     download() {
       this.$emit("download", this.data);
     },
     deleteData() {
-      operationConfirm(this, this.$t('project.file_delete_tip', [this.data.name]), () => {
-        this.close();
-        this.data.confirm = true;
-        this.$emit("delete", this.data);
-      });
+      operationConfirm(
+        this,
+        this.$t("project.file_delete_tip", [this.data.name]),
+        () => {
+          this.close();
+          this.data.confirm = true;
+          this.$emit("delete", this.data);
+        }
+      );
     },
     handleUpload(uploadResources) {
       let file = uploadResources.file;
-      uploadFileMeta(file, this.data).then(res => {
-        this.$success(this.$t('commons.save_success'));
+      uploadFileMeta(file, this.data).then((res) => {
+        this.$success(this.$t("commons.save_success"));
         if (res.data && res.data.data) {
           this.data = res.data.data;
           if (this.data.tags) {
@@ -291,12 +449,17 @@ export default {
     },
     getProjectFiles(before) {
       this.loading = true;
-      getFileMetaPages(getCurrentProjectID(), this.currentPage, this.pageSize, this.condition).then(res => {
+      getFileMetaPages(
+        getCurrentProjectID(),
+        this.currentPage,
+        this.pageSize,
+        this.condition
+      ).then((res) => {
         let data = res.data;
-        let {itemCount, listObject} = data;
+        let { itemCount, listObject } = data;
         this.total = itemCount;
         this.results = listObject;
-        this.results.forEach(item => {
+        this.results.forEach((item) => {
           if (item.tags && item.tags.length > 0) {
             item.tags = JSON.parse(item.tags);
           }
@@ -310,7 +473,7 @@ export default {
     },
     beforeData() {
       this.showPanel = "baseInfo";
-      const index = this.results.findIndex(e => e.id === this.data.id);
+      const index = this.results.findIndex((e) => e.id === this.data.id);
       this.isFirst = index <= 0;
       if (!this.isFirst) {
         this.data = this.results[index - 1];
@@ -342,8 +505,8 @@ export default {
     },
     nextData() {
       this.showPanel = "baseInfo";
-      const index = this.results.findIndex(e => e.id === this.data.id);
-      this.isLast = (this.results.length - 1) === index;
+      const index = this.results.findIndex((e) => e.id === this.data.id);
+      this.isLast = this.results.length - 1 === index;
       if (!this.isLast) {
         this.data = this.results[index + 1];
       } else {
@@ -356,9 +519,9 @@ export default {
           this.getProjectFiles(false);
         }
       }
-    }
+    },
   },
-}
+};
 </script>
 
 <style scoped>
@@ -366,7 +529,7 @@ export default {
   width: 100%;
   height: 320px;
   display: block;
-  background: #407C51;
+  background: #407c51;
 }
 
 .ms-edit-image:hover {
@@ -376,7 +539,7 @@ export default {
 
 .ms-file-item {
   text-align: center;
-  padding-top: 140px
+  padding-top: 140px;
 }
 
 .icon-title {
@@ -385,7 +548,6 @@ export default {
   font-size: 16px;
 }
 
-
 .ms-file-item-input {
   width: 100%;
 }
@@ -407,7 +569,7 @@ export default {
 
 .ms-right-col {
   padding-top: 220px;
-  margin-left: 10px
+  margin-left: 10px;
 }
 
 .ms-header-menu {
diff --git a/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue
index 8ca434011e..5b671ab2bf 100644
--- a/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue
+++ b/test-track/frontend/src/business/plan/view/comonents/api/RelevanceScenarioList.vue
@@ -1,94 +1,155 @@
 <template>
   <div v-loading="result.loading">
-    <env-group-popover :env-map="projectEnvMap"
-                       :project-ids="projectIds"
-                       @setProjectEnvMap="setProjectEnvMap"
-                       :environment-type.sync="environmentType"
-                       :group-id="envGroupId"
-                       :is-scenario="false"
-                       @setEnvGroup="setEnvGroup"
-                       :show-config-button-with-out-permission="showConfigButtonWithOutPermission"
-                       :project-list="projectList"
-                       ref="envPopover" class="env-popover"/>
+    <env-group-popover
+      :env-map="projectEnvMap"
+      :project-ids="projectIds"
+      @setProjectEnvMap="setProjectEnvMap"
+      :environment-type.sync="environmentType"
+      :group-id="envGroupId"
+      :is-scenario="false"
+      @setEnvGroup="setEnvGroup"
+      :show-config-button-with-out-permission="
+        showConfigButtonWithOutPermission
+      "
+      :project-list="projectList"
+      ref="envPopover"
+      class="env-popover"
+    />
 
-
-    <mx-version-select v-xpack :project-id="projectId" @changeVersion="changeVersion" style="float: left;"
-                       class="search-input"/>
+    <mx-version-select
+      v-xpack
+      :project-id="projectId"
+      @changeVersion="changeVersion"
+      style="float: left"
+      class="search-input"
+    />
     <ms-search
       :base-search-tip="$t('api_test.definition.request.select_case')"
       :condition.sync="condition"
       style="margin-top: 10px"
-      @search="filterSearch">
+      @search="filterSearch"
+    >
     </ms-search>
-    <ms-table ref="scenarioTable"
-              v-loading="result.loading"
-              :data="tableData"
-              :condition="condition"
-              :page-size="pageSize"
-              :total="total"
-              :remember-order="true"
-              row-key="id"
-              :row-order-group-id="projectId"
-              @order="search"
-              @filter="filterSearch"
-              :disable-header-config="true"
-              @selectCountChange="selectCountChange">
-
-      <el-table-column v-if="!customNum" prop="num" label="ID" sortable="custom"
-                       show-overflow-tooltip>
+    <ms-table
+      ref="scenarioTable"
+      v-loading="result.loading"
+      :data="tableData"
+      :condition="condition"
+      :page-size="pageSize"
+      :total="total"
+      :remember-order="true"
+      row-key="id"
+      :row-order-group-id="projectId"
+      @order="search"
+      @filter="filterSearch"
+      :disable-header-config="true"
+      @selectCountChange="selectCountChange"
+    >
+      <el-table-column
+        v-if="!customNum"
+        prop="num"
+        label="ID"
+        sortable="custom"
+        show-overflow-tooltip
+      >
       </el-table-column>
-      <el-table-column v-if="customNum" prop="customNum" label="ID" sortable="custom"
-                       show-overflow-tooltip>
+      <el-table-column
+        v-if="customNum"
+        prop="customNum"
+        label="ID"
+        sortable="custom"
+        show-overflow-tooltip
+      >
       </el-table-column>
-      <el-table-column prop="name" :label="$t('api_test.automation.scenario_name')" sortable="custom" min-width="100px"
-                       show-overflow-tooltip/>
+      <el-table-column
+        prop="name"
+        :label="$t('api_test.automation.scenario_name')"
+        sortable="custom"
+        min-width="100px"
+        show-overflow-tooltip
+      />
       <el-table-column
         v-if="versionEnable"
         column-key="version_id"
         :filters="versionFilters"
         :label="$t('commons.version')"
-        min-width="100px">
+        min-width="100px"
+      >
         <template v-slot:default="scope">
           <span>{{ scope.row.versionName }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column prop="level" :label="$t('api_test.automation.case_level')" sortable="custom" min-width="100px"
-                       show-overflow-tooltip>
+      <el-table-column
+        prop="level"
+        :label="$t('api_test.automation.case_level')"
+        sortable="custom"
+        min-width="100px"
+        show-overflow-tooltip
+      >
         <template v-slot:default="scope">
-          <priority-table-item :value="scope.row.level" ref="level"/>
-        </template>
-
-      </el-table-column>
-      <el-table-column prop="tagNames" :label="$t('api_test.automation.tag')" min-width="100">
-        <template v-slot:default="scope">
-          <ms-tag v-for="itemName in scope.row.tags" :key="itemName" type="success" effect="plain" :content="itemName"
-                  style="margin-left: 0px; margin-right: 2px"/>
+          <priority-table-item :value="scope.row.level" ref="level" />
         </template>
       </el-table-column>
-      <el-table-column prop="userId" :label="$t('api_test.automation.creator')" show-overflow-tooltip sortable="custom"
-                       min-width="100px"/>
-      <el-table-column prop="updateTime" :label="$t('commons.update_time')" width="180" sortable="custom">
+      <el-table-column
+        prop="tagNames"
+        :label="$t('api_test.automation.tag')"
+        min-width="100"
+      >
+        <template v-slot:default="scope">
+          <ms-tag
+            v-for="itemName in scope.row.tags"
+            :key="itemName"
+            type="success"
+            effect="plain"
+            :content="itemName"
+            style="margin-left: 0px; margin-right: 2px"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="userId"
+        :label="$t('api_test.automation.creator')"
+        show-overflow-tooltip
+        sortable="custom"
+        min-width="100px"
+      />
+      <el-table-column
+        prop="updateTime"
+        :label="$t('commons.update_time')"
+        width="180"
+        sortable="custom"
+      >
         <template v-slot:default="scope">
           <span>{{ scope.row.updateTime | datetimeFormat }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" show-overflow-tooltip/>
-      <el-table-column prop="lastResult" :label="$t('api_test.automation.last_result')" sortable="custom">
-        <template v-slot:default="{row}">
-          <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
-            {{ $t('api_test.automation.success') }}
-          </el-link>
-          <el-link type="danger" @click="showReport(row)" v-if="row.lastResult === 'Fail'">
-            {{ $t('api_test.automation.fail') }}
-          </el-link>
+      <el-table-column
+        prop="stepTotal"
+        :label="$t('api_test.automation.step')"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="lastResult"
+        :label="$t('api_test.automation.last_result')"
+        sortable="custom"
+      >
+        <template v-slot:default="{ row }">
+          <ms-api-report-status :status="row.lastResult" />
         </template>
       </el-table-column>
-      <el-table-column prop="passRate" :label="$t('api_test.automation.passing_rate')"
-                       show-overflow-tooltip/>
+      <el-table-column
+        prop="passRate"
+        :label="$t('api_test.automation.passing_rate')"
+        show-overflow-tooltip
+      />
     </ms-table>
-    <ms-table-pagination :change="search" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                         :total="total"/>
+    <ms-table-pagination
+      :change="search"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :total="total"
+    />
   </div>
 </template>
 
@@ -100,20 +161,26 @@ import MsTag from "metersphere-frontend/src/components/MsTag";
 import TestPlanScenarioListHeader from "./TestPlanScenarioListHeader";
 import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
 import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
-import {TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS} from "metersphere-frontend/src/components/search/search-components";
-import {ENV_TYPE} from "metersphere-frontend/src/utils/constants";
+import { TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
+import { ENV_TYPE } from "metersphere-frontend/src/utils/constants";
 import MsTable from "metersphere-frontend/src/components/table/MsTable";
 import MsSearch from "metersphere-frontend/src/components/search/MsSearch";
-import {getOwnerProjects, getVersionFilters} from "@/business/utils/sdk-utils";
+import {
+  getOwnerProjects,
+  getVersionFilters,
+} from "@/business/utils/sdk-utils";
 import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
-import {getProjectApplicationConfig} from "@/api/project-application";
-import {getApiScenarioEnvByProjectId} from "@/api/remote/api/api-automation";
-import {scenarioRelevanceList} from "@/api/remote/plan/test-plan-scenario";
+import { getProjectApplicationConfig } from "@/api/project-application";
+import { getApiScenarioEnvByProjectId } from "@/api/remote/api/api-automation";
+import { scenarioRelevanceList } from "@/api/remote/plan/test-plan-scenario";
 import EnvGroupPopover from "@/business/plan/env/EnvGroupPopover";
+import ApiReportStatus from "@/business/plan/view/comonents/report/detail/api/ApiReportStatus";
+import MsApiReportStatus from "@/business/plan/view/comonents/report/detail/api/ApiReportStatus";
 
 export default {
   name: "RelevanceScenarioList",
   components: {
+    MsApiReportStatus,
     EnvGroupPopover,
     MsTable,
     PriorityTableItem,
@@ -124,7 +191,7 @@ export default {
     // MsApiReportDetail,
     MsTableAdvSearchBar,
     MxVersionSelect,
-    MsSearch
+    MsSearch,
   },
   props: {
     referenced: {
@@ -135,13 +202,14 @@ export default {
     projectId: String,
     planId: String,
     versionEnable: Boolean,
+    ApiReportStatus,
   },
   data() {
     return {
       result: {},
       showConfigButtonWithOutPermission: false,
       condition: {
-        components: TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS
+        components: TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS,
       },
       currentScenario: {},
       schedule: {},
@@ -165,7 +233,7 @@ export default {
   computed: {
     ENV_TYPE() {
       return ENV_TYPE;
-    }
+    },
   },
   watch: {
     selectNodeIds() {
@@ -173,7 +241,7 @@ export default {
     },
     projectId() {
       this.condition = {
-        components: TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS
+        components: TEST_PLAN_RELEVANCE_API_SCENARIO_CONFIGS,
       };
       this.selectNodeIds.length = 0;
       this.search();
@@ -201,7 +269,9 @@ export default {
       if (this.condition.filters) {
         this.condition.filters.status = ["Prepare", "Underway", "Completed"];
       } else {
-        this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
+        this.condition.filters = {
+          status: ["Prepare", "Underway", "Completed"],
+        };
       }
 
       this.condition.moduleIds = this.selectNodeIds;
@@ -214,18 +284,20 @@ export default {
         this.condition.planId = this.planId;
       }
       this.condition.stepTotal = "testPlan";
-      scenarioRelevanceList({pageNum: this.currentPage, pageSize: this.pageSize}, this.condition)
-        .then(response => {
-          let data = response.data;
-          this.total = data.itemCount;
-          this.tableData = data.listObject;
-          this.tableData.forEach(item => {
-            if (item.tags && item.tags.length > 0) {
-              item.tags = JSON.parse(item.tags);
-            }
-          });
-          this.clear();
+      scenarioRelevanceList(
+        { pageNum: this.currentPage, pageSize: this.pageSize },
+        this.condition
+      ).then((response) => {
+        let data = response.data;
+        this.total = data.itemCount;
+        this.tableData = data.listObject;
+        this.tableData.forEach((item) => {
+          if (item.tags && item.tags.length > 0) {
+            item.tags = JSON.parse(item.tags);
+          }
         });
+        this.clear();
+      });
     },
     clear() {
       this.selectRows.clear();
@@ -237,34 +309,33 @@ export default {
       this.envGroupId = id;
     },
     getWsProjects() {
-      getOwnerProjects()
-        .then(res => {
-          this.projectList = res.data;
-        });
+      getOwnerProjects().then((res) => {
+        this.projectList = res.data;
+      });
     },
     getProject(projectId) {
       if (projectId) {
-        getProjectApplicationConfig(projectId, 'SCENARIO_CUSTOM_NUM')
-          .then(result => {
+        getProjectApplicationConfig(projectId, "SCENARIO_CUSTOM_NUM").then(
+          (result) => {
             let data = result.data;
-            if (data && data.typeValue === 'true') {
+            if (data && data.typeValue === "true") {
               this.customNum = true;
             } else {
               this.customNum = false;
             }
-          });
+          }
+        );
       }
     },
     initProjectIds() {
       this.projectIds.clear();
       this.map.clear();
-      this.selectRows.forEach(row => {
-        getApiScenarioEnvByProjectId(row.id)
-          .then(res => {
-            let data = res.data;
-            data.projectIds.forEach(d => this.projectIds.add(d));
-            this.map.set(row.id, data.projectIds);
-          });
+      this.selectRows.forEach((row) => {
+        getApiScenarioEnvByProjectId(row.id).then((res) => {
+          let data = res.data;
+          data.projectIds.forEach((d) => this.projectIds.add(d));
+          this.map.set(row.id, data.projectIds);
+        });
       });
     },
     checkEnv() {
@@ -275,8 +346,9 @@ export default {
       this.search();
     },
     getVersionOptions() {
-      getVersionFilters(this.projectId)
-        .then(r => this.versionFilters = r.data);
+      getVersionFilters(this.projectId).then(
+        (r) => (this.versionFilters = r.data)
+      );
     },
     filter(field) {
       this.condition.filters = field || null;
@@ -286,8 +358,8 @@ export default {
       this.selectRows = this.$refs.scenarioTable.selectRows;
       this.initProjectIds();
       this.$emit("selectCountChange", data);
-    }
-  }
+    },
+  },
 };
 </script>