From 5da6dbe3e53f7eefc097e4c5517b6bcd86a54050 Mon Sep 17 00:00:00 2001
From: song-cc-rock <changchang.song@fit2cloud.com>
Date: Mon, 20 Mar 2023 14:50:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E5=8E=BB=E6=8E=89=E5=8A=9F=E8=83=BD=E7=94=A8=E4=BE=8B=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=BF=9D=E5=AD=98=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1024630 --user=宋昌昌 【测试跟踪】测试用例点击“编辑”按钮进入无法修改，还得点击“编辑”按钮才能进行修改 #22902 https://www.tapd.cn/55049933/s/1352876
--bug=1024622 --user=宋昌昌 【测试跟踪】功能用例-编辑用例保存后-关联的用例不显示了 https://www.tapd.cn/55049933/s/1352877
---
 .../frontend/src/i18n/lang/track/zh-CN.js     |  2 +-
 .../frontend/src/i18n/lang/track/zh-TW.js     |  2 +-
 .../business/case/components/TestCaseEdit.vue | 16 +++---
 .../business/case/components/TestCaseList.vue | 21 ++++----
 .../components/case/CaseEditInfoComponent.vue |  1 +
 .../case/relate/CaseRelateApiList.vue         | 42 +++++++++++----
 .../case/relate/CaseRelateScenarioList.vue    | 49 +++++++++++------
 .../case/relate/CaseRelateUiScenarioList.vue  | 53 +++++++++++++------
 .../common/CaseFunctionalRelevance.vue        | 43 ++++++++++-----
 .../tableItems/plan/PlanStatusTableItem.vue   | 10 ++--
 10 files changed, 159 insertions(+), 80 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/i18n/lang/track/zh-CN.js b/framework/sdk-parent/frontend/src/i18n/lang/track/zh-CN.js
index d89d189dfe..5c70ce9d76 100644
--- a/framework/sdk-parent/frontend/src/i18n/lang/track/zh-CN.js
+++ b/framework/sdk-parent/frontend/src/i18n/lang/track/zh-CN.js
@@ -421,7 +421,7 @@ export default {
     review_rate: "评审率",
     coverage: "覆盖率",
     function_case_count: "功能用例数",
-    relevance_case_count: "有关联用例的功能用例数",
+    relevance_case_count: "已关联用例的功能用例数",
     serial_number: "序号",
     test_plan_name: "测试计划名称",
     case_size: "用例数",
diff --git a/framework/sdk-parent/frontend/src/i18n/lang/track/zh-TW.js b/framework/sdk-parent/frontend/src/i18n/lang/track/zh-TW.js
index ff5a35ebf4..9f6e169703 100644
--- a/framework/sdk-parent/frontend/src/i18n/lang/track/zh-TW.js
+++ b/framework/sdk-parent/frontend/src/i18n/lang/track/zh-TW.js
@@ -420,7 +420,7 @@ export default {
     review_rate: "評審率",
     coverage: "覆蓋率",
     function_case_count: "功能用例數",
-    relevance_case_count: "有關聯用例的功能用例數",
+    relevance_case_count: "已關聯用例的功能用例數",
     serial_number: "序號",
     test_plan_name: "測試計劃名稱",
     case_size: "用例數",
diff --git a/test-track/frontend/src/business/case/components/TestCaseEdit.vue b/test-track/frontend/src/business/case/components/TestCaseEdit.vue
index 31c6db0beb..65589ca64f 100644
--- a/test-track/frontend/src/business/case/components/TestCaseEdit.vue
+++ b/test-track/frontend/src/business/case/components/TestCaseEdit.vue
@@ -180,14 +180,14 @@
                     <div class="title">{{ $t("case.added_to_public_case") }}</div>
                   </div>
                   <div class="split"></div>
-                  <div class="copy-row sub-opt-row" @click="copyRow" :style="!hasCopyPermission ? 'cursor: not-allowed' : 'cursor: default'">
+                  <div class="copy-row sub-opt-row" @click="copyRow" :style="!hasCopyPermission ? 'cursor: not-allowed' : 'cursor: pointer'">
                     <div class="icon">
                       <i class="el-icon-copy-document"></i>
                     </div>
                     <div class="title">{{ $t("commons.copy") }}</div>
                   </div>
                   <div class="split"></div>
-                  <div class="delete-row sub-opt-row" @click="deleteRow" :style="!hasDeletePermission ? 'cursor: not-allowed' : 'cursor: default'">
+                  <div class="delete-row sub-opt-row" @click="deleteRow" :style="!hasDeletePermission ? 'cursor: not-allowed' : 'cursor: pointer'">
                     <div class="icon">
                       <i class="el-icon-delete"></i>
                     </div>
@@ -1892,7 +1892,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0 0.5rem 0 0;
+          padding: 0.2rem 0.5rem 0.2rem 0;
         }
 
         .next-public-row.head-opt {
@@ -1904,7 +1904,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0 0 0 0.5rem;
+          padding: 0.2rem 0 0.2rem 0.5rem;
         }
 
         .follow-row.head-opt {
@@ -1928,7 +1928,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0 0.5rem;
+          padding: 0.2rem 0.5rem;
         }
 
         .copy-public-row.head-opt {
@@ -1940,9 +1940,11 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0 0.5rem;
+          padding: 0.2rem 0.5rem;
+        }
+        .close-row.head-opt {
+          padding: 0.2rem;
         }
-
         .add-public-row.head-opt {
           .icon-row {
             img {
diff --git a/test-track/frontend/src/business/case/components/TestCaseList.vue b/test-track/frontend/src/business/case/components/TestCaseList.vue
index 01a1f0f93a..73083f5b04 100644
--- a/test-track/frontend/src/business/case/components/TestCaseList.vue
+++ b/test-track/frontend/src/business/case/components/TestCaseList.vue
@@ -84,7 +84,7 @@
           :label="$t('commons.id')"
           min-width="80">
           <template v-slot:default="scope">
-            <a style="cursor:pointer" @click="handleEdit(scope.row)"> {{ scope.row.num }} </a>
+            <a style="cursor:pointer" class="hover-enter" @click="handleEdit(scope.row)"> {{ scope.row.num }} </a>
           </template>
         </ms-table-column>
 
@@ -97,7 +97,7 @@
           :label="$t('commons.id')"
           min-width="80">
           <template v-slot:default="scope">
-            <a style="cursor:pointer" @click="handleEdit(scope.row)"> {{ scope.row.customNum }} </a>
+            <a style="cursor:pointer" class="hover-enter" @click="handleEdit(scope.row)"> {{ scope.row.customNum }} </a>
           </template>
         </ms-table-column>
 
@@ -107,8 +107,11 @@
           :field="item"
           :fields-width="fieldsWidth"
           :label="$t('test_track.case.name')"
-          min-width="120"
-        />
+          min-width="120">
+          <template v-slot:default="scope">
+            <a style="cursor:pointer" class="hover-enter" @click="handleEdit(scope.row)"> {{ scope.row.name }} </a>
+          </template>
+        </ms-table-column>
 
         <ms-table-column :label="$t('test_track.case.case_desc')" prop="desc" :field="item" min-width="100px">
           <template v-slot:default="scope">
@@ -439,12 +442,6 @@ export default {
       ],
       operators: [],
       simpleOperators: [
-        {
-          tip: this.$t('commons.edit'),
-          isTextButton: true,
-          exec: this.handleEdit,
-          permissions: ['PROJECT_TRACK_CASE:READ+EDIT']
-        },
         {
           tip: this.$t('commons.copy'),
           isTextButton: true,
@@ -1289,4 +1286,8 @@ span.version-select {
   color: #783887;
   border: 1px solid #783887;
 }
+
+.hover-enter:hover{
+  color: #783887;
+}
 </style>
diff --git a/test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue b/test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue
index fe327f9158..72c744f76a 100644
--- a/test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue
+++ b/test-track/frontend/src/business/case/components/case/CaseEditInfoComponent.vue
@@ -42,6 +42,7 @@
             <el-scrollbar>
               <div class="content-container">
                 <case-test-relate
+                  ref="relateTest"
                   :case-id="caseId"
                   :read-only="readOnly"
                   :version-enable="versionEnable"
diff --git a/test-track/frontend/src/business/case/components/case/relate/CaseRelateApiList.vue b/test-track/frontend/src/business/case/components/case/relate/CaseRelateApiList.vue
index 4b25f371bd..98f264bdfd 100644
--- a/test-track/frontend/src/business/case/components/case/relate/CaseRelateApiList.vue
+++ b/test-track/frontend/src/business/case/components/case/relate/CaseRelateApiList.vue
@@ -69,16 +69,22 @@
               <priority-table-item :value="scope.row.priority" />
             </template>
           </ms-table-column>
-          <ms-table-column prop="tags" width="120px" :label="$t('commons.tag')">
+          <ms-table-column prop="tags" :show-overflow-tooltip="false" min-width="180" :label="$t('commons.tag')">
             <template v-slot:default="scope">
-              <ms-tag
-                v-for="(itemName, index) in scope.row.tags"
-                :key="index"
-                type="success"
-                effect="plain"
-                :content="itemName"
-                style="margin-left: 0px; margin-right: 2px"
-              ></ms-tag>
+              <el-tooltip class="item" effect="dark" placement="top">
+                <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+                <div class="oneLine">
+                  <ms-single-tag
+                    v-for="(itemName, index) in parseColumnTag(scope.row.tags)"
+                    :key="index"
+                    type="success"
+                    effect="plain"
+                    :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
+                    :content="itemName"
+                    style="margin-left: 0; margin-right: 2px"/>
+                </div>
+              </el-tooltip>
+              <span/>
             </template>
           </ms-table-column>
         </ms-table>
@@ -108,11 +114,12 @@ import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTab
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import { TEST_CASE_RELEVANCE_API_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
 import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
-import MsTag from "metersphere-frontend/src/components/MsTag";
+import MsSingleTag from "metersphere-frontend/src/components/new-ui/MsSingleTag";
 import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
 import { getVersionFilters } from "@/business/utils/sdk-utils";
 import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
 import { getTestCaseRelevanceApiList } from "@/api/testCase";
+import {getTagToolTips, parseColumnTag} from "@/business/case/test-case";
 
 export default {
   name: "CaseRelateApiList",
@@ -122,7 +129,7 @@ export default {
     MsTable,
     MsTableColumn,
     MsTableAdvSearchBar,
-    MsTag,
+    MsSingleTag,
     VersionSelect: MxVersionSelect,
     MsNewUiSearch,
     MsTableAdvSearch,
@@ -250,6 +257,19 @@ export default {
       this.condition.versionId = currentVersion || null;
       this.initTable();
     },
+    getTagToolTips(tags) {
+      return getTagToolTips(tags);
+    },
+    parseColumnTag(tags) {
+      return parseColumnTag(tags);
+    }
   },
 };
 </script>
+
+<style scoped>
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>
diff --git a/test-track/frontend/src/business/case/components/case/relate/CaseRelateScenarioList.vue b/test-track/frontend/src/business/case/components/case/relate/CaseRelateScenarioList.vue
index 353db63d80..d3256e4b3d 100644
--- a/test-track/frontend/src/business/case/components/case/relate/CaseRelateScenarioList.vue
+++ b/test-track/frontend/src/business/case/components/case/relate/CaseRelateScenarioList.vue
@@ -76,21 +76,26 @@
             min-width="120px"
           >
             <template v-slot:default="scope">
-              <plan-status-table-item :value="scope.row.status" />
+              <status-table-item :value="scope.row.status" />
             </template>
           </ms-table-column>
 
-          <ms-table-column prop="tags" width="120px" :label="$t('commons.tag')">
+          <ms-table-column prop="tags" :show-overflow-tooltip="false" min-width="180" :label="$t('commons.tag')">
             <template v-slot:default="scope">
-              <ms-tag
-                v-for="(itemName, index) in scope.row.tags"
-                :key="index"
-                type="success"
-                effect="plain"
-                :content="itemName"
-                style="margin-left: 0px; margin-right: 2px"
-              />
-              <span></span>
+              <el-tooltip class="item" effect="dark" placement="top">
+                <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+                <div class="oneLine">
+                  <ms-single-tag
+                    v-for="(itemName, index) in parseColumnTag(scope.row.tags)"
+                    :key="index"
+                    type="success"
+                    effect="plain"
+                    :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
+                    :content="itemName"
+                    style="margin-left: 0; margin-right: 2px"/>
+                </div>
+              </el-tooltip>
+              <span/>
             </template>
           </ms-table-column>
         </ms-table>
@@ -117,24 +122,25 @@ import MsTable from "metersphere-frontend/src/components/new-ui/MsTable";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
 import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
-import PlanStatusTableItem from "@/business/common/tableItems/plan/PlanStatusTableItem";
+import StatusTableItem from "@/business/common/tableItems/planview/StatusTableItem";
 import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
-import MsTag from "metersphere-frontend/src/components/MsTag";
+import MsSingleTag from "metersphere-frontend/src/components/new-ui/MsSingleTag";
 import { TEST_CASE_RELEVANCE_API_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
 import { getVersionFilters } from "@/business/utils/sdk-utils";
 import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
 import { getTestCaseRelevanceScenarioList } from "@/api/testCase";
+import {getTagToolTips, parseColumnTag} from "@/business/case/test-case";
 
 export default {
   name: "CaseRelateScenarioList",
   components: {
-    PlanStatusTableItem,
+    StatusTableItem,
     MsTablePagination,
     PriorityTableItem,
     MsTable,
     MsTableColumn,
     MsTableAdvSearchBar,
-    MsTag,
+    MsSingleTag,
     VersionSelect: MxVersionSelect,
     MsNewUiSearch,
     MsTableAdvSearch,
@@ -249,6 +255,19 @@ export default {
       this.condition.versionId = currentVersion || null;
       this.initTable();
     },
+    getTagToolTips(tags) {
+      return getTagToolTips(tags);
+    },
+    parseColumnTag(tags) {
+      return parseColumnTag(tags);
+    }
   },
 };
 </script>
+
+<style scoped>
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>
diff --git a/test-track/frontend/src/business/case/components/case/relate/CaseRelateUiScenarioList.vue b/test-track/frontend/src/business/case/components/case/relate/CaseRelateUiScenarioList.vue
index 272b465d42..67f3063253 100644
--- a/test-track/frontend/src/business/case/components/case/relate/CaseRelateUiScenarioList.vue
+++ b/test-track/frontend/src/business/case/components/case/relate/CaseRelateUiScenarioList.vue
@@ -71,21 +71,26 @@
             min-width="120px"
           >
             <template v-slot:default="scope">
-              <plan-status-table-item :value="scope.row.status" />
+              <status-table-item :value="scope.row.status" />
             </template>
           </ms-table-column>
 
-          <ms-table-column prop="tags" width="120px" :label="$t('commons.tag')">
+          <ms-table-column prop="tags" :show-overflow-tooltip="false" min-width="180" :label="$t('commons.tag')">
             <template v-slot:default="scope">
-              <ms-tag
-                v-for="(itemName, index) in scope.row.tags"
-                :key="index"
-                type="success"
-                effect="plain"
-                :content="itemName"
-                style="margin-left: 0px; margin-right: 2px"
-              />
-              <span></span>
+              <el-tooltip class="item" effect="dark" placement="top">
+                <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+                <div class="oneLine">
+                  <ms-single-tag
+                    v-for="(itemName, index) in parseColumnTag(scope.row.tags)"
+                    :key="index"
+                    type="success"
+                    effect="plain"
+                    :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
+                    :content="itemName"
+                    style="margin-left: 0; margin-right: 2px"/>
+                </div>
+              </el-tooltip>
+              <span/>
             </template>
           </ms-table-column>
         </ms-table>
@@ -112,27 +117,28 @@ import MsTable from "metersphere-frontend/src/components/new-ui/MsTable";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
 import PriorityTableItem from "@/business/common/tableItems/planview/PriorityTableItem";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
-import PlanStatusTableItem from "@/business/common/tableItems/plan/PlanStatusTableItem";
+import StatusTableItem from "@/business/common/tableItems/planview/StatusTableItem";
 import MsTableAdvSearchBar from "metersphere-frontend/src/components/search/MsTableAdvSearchBar";
-import MsTag from "metersphere-frontend/src/components/MsTag";
-import {TEST_CASE_RELEVANCE_API_CASE_CONFIGS} from "metersphere-frontend/src/components/search/search-components";
-import {getCurrentProjectID, getVersionFilters} from "@/business/utils/sdk-utils";
+import MsSingleTag from "metersphere-frontend/src/components/new-ui/MsSingleTag";
+import { TEST_CASE_RELEVANCE_API_CASE_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
+import { getVersionFilters } from "@/business/utils/sdk-utils";
 import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersionSelect";
 import {
   getTestCaseRelevanceScenarioList,
   getTestCaseRelevanceUiScenarioList,
 } from "@/api/testCase";
+import {getTagToolTips, parseColumnTag} from "@/business/case/test-case";
 
 export default {
   name: "CaseRelateUiScenarioList",
   components: {
-    PlanStatusTableItem,
+    StatusTableItem,
     MsTablePagination,
     PriorityTableItem,
     MsTable,
     MsTableColumn,
     MsTableAdvSearchBar,
-    MsTag,
+    MsSingleTag,
     VersionSelect: MxVersionSelect,
     MsNewUiSearch,
     MsTableAdvSearch,
@@ -249,6 +255,19 @@ export default {
       this.condition.versionId = currentVersion || null;
       this.initTable();
     },
+    getTagToolTips(tags) {
+      return getTagToolTips(tags);
+    },
+    parseColumnTag(tags) {
+      return parseColumnTag(tags);
+    }
   },
 };
 </script>
+
+<style scoped>
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+}
+</style>
diff --git a/test-track/frontend/src/business/case/components/common/CaseFunctionalRelevance.vue b/test-track/frontend/src/business/case/components/common/CaseFunctionalRelevance.vue
index f51857af2d..eb88e86c96 100644
--- a/test-track/frontend/src/business/case/components/common/CaseFunctionalRelevance.vue
+++ b/test-track/frontend/src/business/case/components/common/CaseFunctionalRelevance.vue
@@ -135,18 +135,24 @@
             <ms-table-column
               prop="tags"
               :label="$t('commons.tag')"
-              width="90px"
+              :show-overflow-tooltip="false"
+              min-width="180"
             >
               <template v-slot:default="scope">
-                <ms-tag
-                  v-for="(itemName, index) in scope.row.tags"
-                  :key="index"
-                  type="success"
-                  effect="plain"
-                  :content="itemName"
-                  style="margin-left: 0px; margin-right: 2px"
-                />
-                <span />
+                <el-tooltip class="item" effect="dark" placement="top">
+                  <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+                  <div class="oneLine">
+                    <ms-single-tag
+                      v-for="(itemName, index) in parseColumnTag(scope.row.tags)"
+                      :key="index"
+                      type="success"
+                      effect="plain"
+                      :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
+                      :content="itemName"
+                      style="margin-left: 0; margin-right: 2px"/>
+                  </div>
+                </el-tooltip>
+                <span/>
               </template>
             </ms-table-column>
 
@@ -191,7 +197,7 @@ import TestCaseRelevanceBase from "./CaseRelevanceSideDialog";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
 import MsTable from "metersphere-frontend/src/components/new-ui/MsTable";
 import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
-import MsTag from "metersphere-frontend/src/components/MsTag";
+import MsSingleTag from "metersphere-frontend/src/components/new-ui/MsSingleTag";
 import MsCreateTimeColumn from "metersphere-frontend/src/components/table/MsCreateTimeColumn";
 import MsUpdateTimeColumn from "metersphere-frontend/src/components/table/MsUpdateTimeColumn";
 import StatusTableItem from "@/business/common/tableItems/planview/StatusTableItem";
@@ -203,7 +209,7 @@ import MxVersionSelect from "metersphere-frontend/src/components/version/MxVersi
 import { getProjectApplicationConfig } from "@/api/project-application";
 import { getVersionFilters } from "@/business/utils/sdk-utils";
 import { getTestTemplate } from "@/api/custom-field-template";
-import { initTestCaseConditionComponents } from "@/business/case/test-case";
+import {getTagToolTips, initTestCaseConditionComponents, parseColumnTag} from "@/business/case/test-case";
 
 export default {
   name: "CaseFunctionalRelevance",
@@ -214,7 +220,7 @@ export default {
     StatusTableItem,
     MsUpdateTimeColumn,
     MsCreateTimeColumn,
-    MsTag,
+    MsSingleTag,
     MsTablePagination,
     MsTable,
     MsTableColumn,
@@ -404,6 +410,12 @@ export default {
         );
       });
     },
+    getTagToolTips(tags) {
+      return getTagToolTips(tags);
+    },
+    parseColumnTag(tags) {
+      return parseColumnTag(tags);
+    }
   },
 };
 </script>
@@ -479,4 +491,9 @@ export default {
     }
   }
 }
+
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+}
 </style>
diff --git a/test-track/frontend/src/business/common/tableItems/plan/PlanStatusTableItem.vue b/test-track/frontend/src/business/common/tableItems/plan/PlanStatusTableItem.vue
index 3a90dbd85b..cbca362d45 100644
--- a/test-track/frontend/src/business/common/tableItems/plan/PlanStatusTableItem.vue
+++ b/test-track/frontend/src/business/common/tableItems/plan/PlanStatusTableItem.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <ms-tag v-if="value == 'Prepare'" type="info" :content="$t('test_track.plan.plan_status_prepare')"/>
-    <ms-tag v-if="value == 'Underway'" type="primary" :content="$t('test_track.plan.plan_status_running')"/>
-    <ms-tag v-if="value == 'Finished'" type="warning" :content="$t('test_track.plan.plan_status_finished')"/>
-    <ms-tag v-if="value == 'Completed'" type="success" :content="$t('test_track.plan.plan_status_completed')"/>
+    <ms-tag v-if="value === 'Prepare'" type="info" :content="$t('test_track.plan.plan_status_prepare')"/>
+    <ms-tag v-if="value === 'Underway'" type="primary" :content="$t('test_track.plan.plan_status_running')"/>
+    <ms-tag v-if="value === 'Finished'" type="warning" :content="$t('test_track.plan.plan_status_finished')"/>
+    <ms-tag v-if="value === 'Completed'" type="success" :content="$t('test_track.plan.plan_status_completed')"/>
     <ms-tag v-if="value === 'Trash'" type="danger" effect="plain" :content="$t('test_track.plan.plan_status_trash')"/>
-    <ms-tag v-if="value == 'Archived'" type="danger" :content="$t('test_track.plan.plan_status_archived')"/>
+    <ms-tag v-if="value === 'Archived'" type="danger" :content="$t('test_track.plan.plan_status_archived')"/>
   </div>
 </template>